Structural glyphs

bunx --bun shadcn@latest add @woohl/glyphs

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

/** Structural glyphs drawn internally by control primitives. */

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 left. Pagination, gallery navigation, carousel previous. */
export function ChevronLeftGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <path d="m15 18-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>
  );
}