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:Te48,import type { ReactNode, SVGProps } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { ICON_STROKE } from "@/registry/tier-1-tokens/lib/constants"; /** * Structural glyphs — the handful of shapes a primitive draws as part of itself. * * This is NOT an icon set and it is not exported from the package barrel. A * checkbox has to draw a tick, a dialog has to draw a close cross, a select has * to draw a caret: those marks are part of the control, not content passed into * it, so they cannot come from a prop and they cannot come from an app's icon * library without coupling this folder to one. * * Every icon a *consumer* chooses comes from that app's own `Icon` component and * arrives here as a `ReactNode` through an `icon` prop. Nothing else belongs in * this file — if you are reaching for a new glyph to express meaning, it is * content, and it goes through the prop. * * Drawn on a 24px box to Lucide's geometry so the stroke weight sits beside * Phosphor (buyer) and Lucide (seller, admin) without reading as a third hand. */ type GlyphProps = Omit, "ref" | "children"> & { size?: number; }; function Glyph({ size = 16, className, strokeWidth, children, ...props }: GlyphProps & { children: ReactNode }) { return ( ); } /** Tick. Checkbox (checked), avatar (verified). */ export function CheckGlyph(props: GlyphProps) { return ( ); } /** Horizontal bar. Checkbox (indeterminate). */ export function MinusGlyph(props: GlyphProps) { return ( ); } /** Plus. The counterpart of MinusGlyph in a stepper. */ export function PlusGlyph(props: GlyphProps) { return ( ); } /** Cross. Dismiss affordances: dialog, drawer, toast, removable chip. */ export function CloseGlyph(props: GlyphProps) { return ( ); } /** Caret down. Select trigger. */ export function ChevronDownGlyph(props: GlyphProps) { return ( ); } /** Caret right. Breadcrumb separator, nav disclosure. */ export function ChevronRightGlyph(props: GlyphProps) { return ( ); } /** Warning triangle. Field error, warning/danger toast. */ export function AlertGlyph(props: GlyphProps) { return ( ); } /** Circled i. Info toast. */ export function InfoGlyph(props: GlyphProps) { return ( ); } /** Circled tick. Success toast. */ export function SuccessGlyph(props: GlyphProps) { return ( ); } 24:T891c,

import type { ReactNode, SVGProps } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { ICON_STROKE } from "@/registry/tier-1-tokens/lib/constants";

/**
 * Structural glyphs — the handful of shapes a primitive draws as part of itself.
 *
 * This is NOT an icon set and it is not exported from the package barrel. A
 * checkbox has to draw a tick, a dialog has to draw a close cross, a select has
 * to draw a caret: those marks are part of the control, not content passed into
 * it, so they cannot come from a prop and they cannot come from an app's icon
 * library without coupling this folder to one.
 *
 * Every icon a *consumer* chooses comes from that app's own `Icon` component and
 * arrives here as a `ReactNode` through an `icon` prop. Nothing else belongs in
 * this file — if you are reaching for a new glyph to express meaning, it is
 * content, and it goes through the prop.
 *
 * Drawn on a 24px box to Lucide's geometry so the stroke weight sits beside
 * Phosphor (buyer) and Lucide (seller, admin) without reading as a third hand.
 */

type GlyphProps = Omit<SVGProps<SVGSVGElement>, "ref" | "children"> & {
  size?: number;
};

function Glyph({
  size = 16,
  className,
  strokeWidth,
  children,
  ...props
}: GlyphProps & { children: ReactNode }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth ?? ICON_STROKE}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      focusable={false}
      className={cn("flex-none", className)}
      {...props}
    >
      {children}
    </svg>
  );
}

/** Tick. Checkbox (checked), avatar (verified). */
export function CheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <path d="M20 6 9 17l-5-5" />
    </Glyph>
  );
}

/** Horizontal bar. Checkbox (indeterminate). */
export function MinusGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <path d="M5 12h14" />
    </Glyph>
  );
}

/** Plus. The counterpart of MinusGlyph in a stepper. */
export function PlusGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <path d="M12 5v14" />
      <path d="M5 12h14" />
    </Glyph>
  );
}

/** Cross. Dismiss affordances: dialog, drawer, toast, removable chip. */
export function CloseGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </Glyph>
  );
}

/** Caret down. Select trigger. */
export function ChevronDownGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <path d="m6 9 6 6 6-6" />
    </Glyph>
  );
}

/** Caret right. Breadcrumb separator, nav disclosure. */
export function ChevronRightGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <path d="m9 18 6-6-6-6" />
    </Glyph>
  );
}

/** Warning triangle. Field error, warning/danger toast. */
export function AlertGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
      <path d="M12 9v4" />
      <path d="M12 17h.01" />
    </Glyph>
  );
}

/** Circled i. Info toast. */
export function InfoGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <circle cx="12" cy="12" r="10" />
      <path d="M12 16v-4" />
      <path d="M12 8h.01" />
    </Glyph>
  );
}

/** Circled tick. Success toast. */
export function SuccessGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <circle cx="12" cy="12" r="10" />
      <path d="m9 12 2 2 4-4" />
    </Glyph>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Primitives"}],["$","$L1e",null,{"children":"Structural glyphs"}],["$","$L1f",null,{"children":"The handful of marks a control draws as part of itself — tick, cross, caret, alert. Not an icon set: content icons come from your app through an `icon` prop."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"glyphs"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/glyphs","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/constants","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]