1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T2dbe,import type { CSSProperties } from "react"; import { BIRD_PATH, BIRD_VIEWBOX, LOCKUP, WORDMARK_BOX, WORDMARK_PATH } from "./marks"; import { LOGO_MIN_SIZE } from "@/registry/tier-1-tokens/lib/constants"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; /** * The Woohl logo. * * A bird and a wordmark. Both are DRAWN — never set in a font, never rebuilt by * hand. The paths in marks.ts are exported from the master artwork; this file * only positions and colours them. * * The mark is SINGLE-COLOUR. Bird and wordmark always share one colour. There * is no two-tone lockup; if you have seen one, it was a mistake. * * WHAT THIS COMPONENT WILL NOT LET YOU DO * · stretch it — width follows height, always * · recolour it outside the three approved tones * · render a lockup so small the wordmark turns to mush (below 24px it * silently falls back to the bird, which is the documented answer) * * Rotation, mirroring, gradients, shadows, glows and re-spacing are prohibited * and are not reachable through this API. If you are reaching for `style` to do * one of them, the answer is no. */ /* --------------------------------------------------------------- tones ---- */ /** * The only colour treatments the logo is ever allowed. * * brand Woohl Orange. The default, on any light surface. * paper Reversed. On ink, on Woohl Orange, on photography (over a scrim). * ink Single-colour ink. Engraving, letterpress, one-plate print. */ export type LogoTone = "brand" | "paper" | "ink"; const TONE_COLOR: Record = { brand: "var(--color-brand-600)", paper: "#FFFFFF", ink: "var(--color-ink)", }; /** The five approved lockups. `auto` picks between horizontal and bird by size. */ export type LogoVariant = "horizontal" | "stacked" | "bird" | "wordmark" | "auto"; const HORIZONTAL_RATIO = 374 / 105; type BaseProps = { /** Rendered height in px. Width follows the mark's fixed ratio. */ size?: number; tone?: LogoTone; className?: string; style?: CSSProperties; /** * Accessible name. Defaults to "Woohl" on a lockup. * * Pass `title=""` when the logo is decorative — sitting next to a text link * that already says "Woohl", for instance — and it is hidden from screen * readers instead of read out twice. */ title?: string; }; /* ---------------------------------------------------------------- bird ---- */ /** * The bird alone. Favicons, app icons, avatars, watermarks, slide footers. * The one mark that still reads at 16px. */ export function WoohlBird({ size = 32, tone = "brand", className, style, title, }: BaseProps) { const labelled = title !== ""; return ( ); } /* ------------------------------------------------------------ wordmark ---- */ /** * WOOHL, in Baloo Bhaijaan 2 Extra-Bold converted to outlines. Uppercase, * always. Never retyped — the letterspacing is custom. * * Rarely correct on its own. The horizontal lockup is the default; reach for * the bare wordmark only where the bird already appears elsewhere on the * surface. */ export function WoohlWordmark({ size = 24, tone = "ink", className, style, title, }: BaseProps) { const labelled = title !== ""; return ( ); } /* --------------------------------------------------------------- stacked -- */ /** Bird above wordmark, centred. Square and near-square spaces. */ export function WoohlLogoStacked({ size = 72, tone = "brand", className, style, title, }: BaseProps) { const color = TONE_COLOR[tone]; const labelled = title !== ""; // Bird 96 tall, 28 gap, wordmark 42 tall — the master file's proportions. const birdW = (96 * BIRD_VIEWBOX.w) / BIRD_VIEWBOX.h; const wordW = (42 * WORDMARK_BOX.w) / WORDMARK_BOX.h; const boxW = Math.max(birdW, wordW); const totalH = 96 + 28 + 42; return ( ); } /* --------------------------------------------------------------- lockup --- */ export type WoohlLogoProps = BaseProps & { variant?: LogoVariant; /** * Reserve the documented clear space around the mark — X on all four sides, * where X is the height of the bird. * * `true` full X. The rule. * `"tight"` X/2. Only on a genuinely crowded surface — a co-branded * banner, a partner deck. If you can't afford half, use `bird`. */ clearSpace?: boolean | "tight"; }; /** * The horizontal lockup — the default, and what you want unless you know * otherwise. Bird left, wordmark right, one colour, in a fixed relationship * you may not adjust. * * Below 24px it renders the bird instead. That is not a fallback for a bug, * it is the documented rule: the letterforms stop resolving before the bird * does, so every favicon and slide footer uses the bird. */ export function WoohlLogo({ size = 32, tone = "brand", variant = "horizontal", clearSpace = false, className, style, title, }: WoohlLogoProps) { const resolved = variant === "auto" ? size < LOGO_MIN_SIZE.horizontal ? "bird" : "horizontal" : variant === "horizontal" && size < LOGO_MIN_SIZE.horizontal ? "bird" : variant; const mark = resolved === "bird" ? ( ) : resolved === "stacked" ? ( ) : resolved === "wordmark" ? ( ) : ( ); if (!clearSpace) return mark; // X = the height of the bird mark. In the horizontal lockup the bird is // 83.15 of the 105-unit box, so X is derived from the rendered size rather // than assumed equal to it. const birdHeight = resolved === "horizontal" ? size * (LOCKUP.bird.h / 105) : resolved === "stacked" ? size * (96 / 166) : size; const pad = birdHeight * (clearSpace === "tight" ? 0.5 : 1); return ( {mark} ); } function HorizontalLockup({ size = 32, tone = "brand", className, style, title }: BaseProps) { const color = TONE_COLOR[tone]; const labelled = title !== ""; return ( ); } /* ------------------------------------------------------------- app icon --- */ /** * The bird centred in a rounded square — the ONLY context in which the mark * sits inside a container shape. App icons, store listings, avatars for the * brand itself. * * Everywhere else, boxing the logo is misuse. */ export function WoohlAppIcon({ size = 64, variant = "paper-on-brand", radius, className, title, }: { size?: number; variant?: "brand-on-paper" | "paper-on-brand" | "brand-on-ink" | "paper-on-ink"; radius?: number; className?: string; title?: string; }) { const map = { "brand-on-paper": { bg: "#FFFFFF", fg: "var(--color-brand-600)", ring: true }, "paper-on-brand": { bg: "var(--color-brand-600)", fg: "#FFFFFF", ring: false }, "brand-on-ink": { bg: "var(--color-ink)", fg: "var(--color-brand-600)", ring: false }, "paper-on-ink": { bg: "var(--color-ink)", fg: "#FFFFFF", ring: false }, }[variant]; return (

); } /** * The Woohl bullet — a filled diamond in the accent. * * Carries bullets, list markers and metadata separators. It is geometric on * purpose: a bullet should never compete with the sentence next to it. * * The bird is NEVER used as punctuation, as a bullet, inside a sentence, or as * a loading spinner. It is a logo, and it behaves like one wherever it appears. */ export function WoohlBullet({ size = 7, className, style, }: { size?: number; className?: string; style?: CSSProperties; }) { return ( ); } 24:T1a880,

import type { CSSProperties } from "react";
import { BIRD_PATH, BIRD_VIEWBOX, LOCKUP, WORDMARK_BOX, WORDMARK_PATH } from "./marks";
import { LOGO_MIN_SIZE } from "@/registry/tier-1-tokens/lib/constants";
import { cn } from "@/registry/tier-2-primitives/lib/cn";

/**
 * The Woohl logo.
 *
 * A bird and a wordmark. Both are DRAWN — never set in a font, never rebuilt by
 * hand. The paths in marks.ts are exported from the master artwork; this file
 * only positions and colours them.
 *
 * The mark is SINGLE-COLOUR. Bird and wordmark always share one colour. There
 * is no two-tone lockup; if you have seen one, it was a mistake.
 *
 * WHAT THIS COMPONENT WILL NOT LET YOU DO
 *   · stretch it — width follows height, always
 *   · recolour it outside the three approved tones
 *   · render a lockup so small the wordmark turns to mush (below 24px it
 *     silently falls back to the bird, which is the documented answer)
 *
 * Rotation, mirroring, gradients, shadows, glows and re-spacing are prohibited
 * and are not reachable through this API. If you are reaching for `style` to do
 * one of them, the answer is no.
 */

/* --------------------------------------------------------------- tones ---- */

/**
 * The only colour treatments the logo is ever allowed.
 *
 *   brand   Woohl Orange. The default, on any light surface.
 *   paper   Reversed. On ink, on Woohl Orange, on photography (over a scrim).
 *   ink     Single-colour ink. Engraving, letterpress, one-plate print.
 */
export type LogoTone = "brand" | "paper" | "ink";

const TONE_COLOR: Record<LogoTone, string> = {
  brand: "var(--color-brand-600)",
  paper: "#FFFFFF",
  ink: "var(--color-ink)",
};

/** The five approved lockups. `auto` picks between horizontal and bird by size. */
export type LogoVariant = "horizontal" | "stacked" | "bird" | "wordmark" | "auto";

const HORIZONTAL_RATIO = 374 / 105;

type BaseProps = {
  /** Rendered height in px. Width follows the mark's fixed ratio. */
  size?: number;
  tone?: LogoTone;
  className?: string;
  style?: CSSProperties;
  /**
   * Accessible name. Defaults to "Woohl" on a lockup.
   *
   * Pass `title=""` when the logo is decorative — sitting next to a text link
   * that already says "Woohl", for instance — and it is hidden from screen
   * readers instead of read out twice.
   */
  title?: string;
};

/* ---------------------------------------------------------------- bird ---- */

/**
 * The bird alone. Favicons, app icons, avatars, watermarks, slide footers.
 * The one mark that still reads at 16px.
 */
export function WoohlBird({
  size = 32,
  tone = "brand",
  className,
  style,
  title,
}: BaseProps) {
  const labelled = title !== "";
  return (
    <svg
      viewBox={`0 0 ${BIRD_VIEWBOX.w} ${BIRD_VIEWBOX.h}`}
      height={size}
      width={(size * BIRD_VIEWBOX.w) / BIRD_VIEWBOX.h}
      className={cn("block", className)}
      style={{ color: TONE_COLOR[tone], ...style }}
      role={labelled ? "img" : "presentation"}
      aria-label={labelled ? (title ?? "Woohl") : undefined}
      aria-hidden={labelled ? undefined : true}
    >
      <path fillRule="evenodd" clipRule="evenodd" d={BIRD_PATH} fill="currentColor" />
    </svg>
  );
}

/* ------------------------------------------------------------ wordmark ---- */

/**
 * WOOHL, in Baloo Bhaijaan 2 Extra-Bold converted to outlines. Uppercase,
 * always. Never retyped — the letterspacing is custom.
 *
 * Rarely correct on its own. The horizontal lockup is the default; reach for
 * the bare wordmark only where the bird already appears elsewhere on the
 * surface.
 */
export function WoohlWordmark({
  size = 24,
  tone = "ink",
  className,
  style,
  title,
}: BaseProps) {
  const labelled = title !== "";
  return (
    <svg
      viewBox={`${WORDMARK_BOX.x} ${WORDMARK_BOX.y} ${WORDMARK_BOX.w} ${WORDMARK_BOX.h}`}
      height={size}
      width={(size * WORDMARK_BOX.w) / WORDMARK_BOX.h}
      className={cn("block", className)}
      style={{ color: TONE_COLOR[tone], ...style }}
      role={labelled ? "img" : "presentation"}
      aria-label={labelled ? (title ?? "Woohl") : undefined}
      aria-hidden={labelled ? undefined : true}
    >
      <path d={WORDMARK_PATH} fill="currentColor" />
    </svg>
  );
}

/* --------------------------------------------------------------- stacked -- */

/** Bird above wordmark, centred. Square and near-square spaces. */
export function WoohlLogoStacked({
  size = 72,
  tone = "brand",
  className,
  style,
  title,
}: BaseProps) {
  const color = TONE_COLOR[tone];
  const labelled = title !== "";

  // Bird 96 tall, 28 gap, wordmark 42 tall — the master file's proportions.
  const birdW = (96 * BIRD_VIEWBOX.w) / BIRD_VIEWBOX.h;
  const wordW = (42 * WORDMARK_BOX.w) / WORDMARK_BOX.h;
  const boxW = Math.max(birdW, wordW);
  const totalH = 96 + 28 + 42;

  return (
    <svg
      viewBox={`0 0 ${boxW} ${totalH}`}
      height={size}
      width={(size * boxW) / totalH}
      className={cn("block", className)}
      style={style}
      role={labelled ? "img" : "presentation"}
      aria-label={labelled ? (title ?? "Woohl") : undefined}
      aria-hidden={labelled ? undefined : true}
    >
      <svg
        x={(boxW - birdW) / 2}
        y={0}
        width={birdW}
        height={96}
        viewBox={`0 0 ${BIRD_VIEWBOX.w} ${BIRD_VIEWBOX.h}`}
        overflow="visible"
      >
        <path fillRule="evenodd" clipRule="evenodd" d={BIRD_PATH} fill={color} />
      </svg>
      <svg
        x={(boxW - wordW) / 2}
        y={124}
        width={wordW}
        height={42}
        viewBox={`${WORDMARK_BOX.x} ${WORDMARK_BOX.y} ${WORDMARK_BOX.w} ${WORDMARK_BOX.h}`}
        overflow="visible"
      >
        <path d={WORDMARK_PATH} fill={color} />
      </svg>
    </svg>
  );
}

/* --------------------------------------------------------------- lockup --- */

export type WoohlLogoProps = BaseProps & {
  variant?: LogoVariant;
  /**
   * Reserve the documented clear space around the mark — X on all four sides,
   * where X is the height of the bird.
   *
   *   `true`    full X. The rule.
   *   `"tight"` X/2. Only on a genuinely crowded surface — a co-branded
   *             banner, a partner deck. If you can't afford half, use `bird`.
   */
  clearSpace?: boolean | "tight";
};

/**
 * The horizontal lockup — the default, and what you want unless you know
 * otherwise. Bird left, wordmark right, one colour, in a fixed relationship
 * you may not adjust.
 *
 * Below 24px it renders the bird instead. That is not a fallback for a bug,
 * it is the documented rule: the letterforms stop resolving before the bird
 * does, so every favicon and slide footer uses the bird.
 */
export function WoohlLogo({
  size = 32,
  tone = "brand",
  variant = "horizontal",
  clearSpace = false,
  className,
  style,
  title,
}: WoohlLogoProps) {
  const resolved =
    variant === "auto"
      ? size < LOGO_MIN_SIZE.horizontal
        ? "bird"
        : "horizontal"
      : variant === "horizontal" && size < LOGO_MIN_SIZE.horizontal
        ? "bird"
        : variant;

  const mark =
    resolved === "bird" ? (
      <WoohlBird size={size} tone={tone} className={clearSpace ? undefined : className} style={clearSpace ? undefined : style} title={title} />
    ) : resolved === "stacked" ? (
      <WoohlLogoStacked size={size} tone={tone} className={clearSpace ? undefined : className} style={clearSpace ? undefined : style} title={title} />
    ) : resolved === "wordmark" ? (
      <WoohlWordmark size={size} tone={tone} className={clearSpace ? undefined : className} style={clearSpace ? undefined : style} title={title} />
    ) : (
      <HorizontalLockup
        size={size}
        tone={tone}
        className={clearSpace ? undefined : className}
        style={clearSpace ? undefined : style}
        title={title}
      />
    );

  if (!clearSpace) return mark;

  // X = the height of the bird mark. In the horizontal lockup the bird is
  // 83.15 of the 105-unit box, so X is derived from the rendered size rather
  // than assumed equal to it.
  const birdHeight =
    resolved === "horizontal" ? size * (LOCKUP.bird.h / 105) : resolved === "stacked" ? size * (96 / 166) : size;
  const pad = birdHeight * (clearSpace === "tight" ? 0.5 : 1);

  return (
    <span
      className={cn("inline-flex items-center justify-center", className)}
      style={{ padding: pad, ...style }}
    >
      {mark}
    </span>
  );
}

function HorizontalLockup({ size = 32, tone = "brand", className, style, title }: BaseProps) {
  const color = TONE_COLOR[tone];
  const labelled = title !== "";
  return (
    <svg
      viewBox={LOCKUP.viewBox}
      height={size}
      width={size * HORIZONTAL_RATIO}
      className={cn("block", className)}
      style={style}
      role={labelled ? "img" : "presentation"}
      aria-label={labelled ? (title ?? "Woohl") : undefined}
      aria-hidden={labelled ? undefined : true}
    >
      <svg
        x={LOCKUP.bird.x}
        y={LOCKUP.bird.y}
        width={LOCKUP.bird.w}
        height={LOCKUP.bird.h}
        viewBox={`0 0 ${BIRD_VIEWBOX.w} ${BIRD_VIEWBOX.h}`}
        preserveAspectRatio="xMidYMid meet"
        overflow="visible"
      >
        <path fillRule="evenodd" clipRule="evenodd" d={BIRD_PATH} fill={color} />
      </svg>
      <path d={WORDMARK_PATH} fill={color} />
    </svg>
  );
}

/* ------------------------------------------------------------- app icon --- */

/**
 * The bird centred in a rounded square — the ONLY context in which the mark
 * sits inside a container shape. App icons, store listings, avatars for the
 * brand itself.
 *
 * Everywhere else, boxing the logo is misuse.
 */
export function WoohlAppIcon({
  size = 64,
  variant = "paper-on-brand",
  radius,
  className,
  title,
}: {
  size?: number;
  variant?: "brand-on-paper" | "paper-on-brand" | "brand-on-ink" | "paper-on-ink";
  radius?: number;
  className?: string;
  title?: string;
}) {
  const map = {
    "brand-on-paper": { bg: "#FFFFFF", fg: "var(--color-brand-600)", ring: true },
    "paper-on-brand": { bg: "var(--color-brand-600)", fg: "#FFFFFF", ring: false },
    "brand-on-ink": { bg: "var(--color-ink)", fg: "var(--color-brand-600)", ring: false },
    "paper-on-ink": { bg: "var(--color-ink)", fg: "#FFFFFF", ring: false },
  }[variant];

  return (
    <div
      className={cn("grid flex-none place-items-center", className)}
      style={{
        width: size,
        height: size,
        borderRadius: radius ?? size * 0.2237, // iOS squircle approximation
        background: map.bg,
        border: map.ring ? "1px solid var(--border-subtle)" : undefined,
      }}
      role={title === "" ? "presentation" : "img"}
      aria-label={title === "" ? undefined : (title ?? "Woohl")}
      aria-hidden={title === "" ? true : undefined}
    >
      <WoohlBird size={size * 0.52} style={{ color: map.fg }} title="" />
    </div>
  );
}

/**
 * The Woohl bullet — a filled diamond in the accent.
 *
 * Carries bullets, list markers and metadata separators. It is geometric on
 * purpose: a bullet should never compete with the sentence next to it.
 *
 * The bird is NEVER used as punctuation, as a bullet, inside a sentence, or as
 * a loading spinner. It is a logo, and it behaves like one wherever it appears.
 */
export function WoohlBullet({
  size = 7,
  className,
  style,
}: {
  size?: number;
  className?: string;
  style?: CSSProperties;
}) {
  return (
    <span
      aria-hidden
      className={cn("inline-block flex-none rotate-45 bg-surface-accent", className)}
      style={{
        width: size,
        height: size,
        borderRadius: Math.max(1, size * 0.18),
        ...style,
      }}
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Tokens & brand"}],["$","$L1e",null,{"children":"Brand marks"}],["$","$L1f",null,{"children":"WoohlLogo, WoohlBird, WoohlWordmark, WoohlBullet and WoohlAppIcon, drawn from the canonical path data. Never rebuild the logo from text."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"brand"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/brand","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/constants","@woohl/utils"],"props":"$undefined"}]}]]}]]}]