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:T1285,import type { ComponentProps, ReactElement, ReactNode } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { cva, focusRing, type VariantProps } from "@/registry/tier-2-primitives/lib/cva"; import { CloseGlyph } from "@/registry/tier-2-primitives/glyphs"; import { IconSlot } from "@/registry/tier-2-primitives/icon-slot"; /** * Badge. * * A small, static label. "New", "Ships in 48h", "Woohl Assured", "Refunded". * * COLOUR IS NEVER THE ONLY SIGNAL * Roughly one in twelve men has some form of colour-vision deficiency, and * red/orange is the most commonly affected pair. A status badge always * carries a word; the `icon` prop is there so it can carry a shape too. A * bare coloured dot meaning "failed" is not a badge, it's a guess. * * The status tones use the status palette, which is deliberately NOT the brand * accent — `danger` is a deep crimson so it can never be mistaken for Woohl * Orange. */ const badgeVariants = cva( cn( "inline-flex items-center gap-1.5 whitespace-nowrap rounded-pill", "font-ui text-caption font-bold leading-[1.35]", ), { variants: { tone: { /** Default. Metadata that isn't a state. */ neutral: "bg-surface-sunken text-text-secondary", /** Brand emphasis — "New in", "Curated". Uses the AA-safe accent text. */ accent: "bg-surface-accent-subtle text-text-accent-strong", /** Order confirmed, payout sent, verified maker. */ success: "bg-success-subtle text-success", /** Low stock, action needed, expiring soon. */ warning: "bg-warning-subtle text-warning", /** Failed payment, cancelled, validation error. */ danger: "bg-danger-subtle text-danger", /** Neutral system messages, tips, shipping updates. */ info: "bg-info-subtle text-info", /** High contrast, for a badge sitting on a photograph. */ ink: "bg-surface-inverse text-text-inverse", /** On a dark surface or an image, where a fill would be heavy. */ outline: "border border-border-subtle bg-transparent text-text-secondary", }, size: { sm: "px-2 py-0.5 text-caption", md: "px-2.5 py-[5px]", }, }, defaultVariants: { tone: "neutral", size: "md" }, }, ); export type BadgeProps = ComponentProps<"span"> & VariantProps & { /** Leading icon as a node: `icon={}`. */ icon?: ReactElement; }; export function Badge({ className, tone, size, icon, children, ...props }: BadgeProps) { return ( {icon && } {children} ); } /** * Chip. * * A badge you can act on: a filter, a selected facet, a removable tag. * * The difference from Badge is not visual, it's semantic — a chip is a control * and renders as a ` {onRemove && ( )} ); } export { badgeVariants }; 24:T7d56,

import type { ComponentProps, ReactElement, ReactNode } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { cva, focusRing, type VariantProps } from "@/registry/tier-2-primitives/lib/cva";
import { CloseGlyph } from "@/registry/tier-2-primitives/glyphs";
import { IconSlot } from "@/registry/tier-2-primitives/icon-slot";

/**
 * Badge.
 *
 * A small, static label. "New", "Ships in 48h", "Woohl Assured", "Refunded".
 *
 * COLOUR IS NEVER THE ONLY SIGNAL
 *   Roughly one in twelve men has some form of colour-vision deficiency, and
 *   red/orange is the most commonly affected pair. A status badge always
 *   carries a word; the `icon` prop is there so it can carry a shape too. A
 *   bare coloured dot meaning "failed" is not a badge, it's a guess.
 *
 * The status tones use the status palette, which is deliberately NOT the brand
 * accent — `danger` is a deep crimson so it can never be mistaken for Woohl
 * Orange.
 */
const badgeVariants = cva(
  cn(
    "inline-flex items-center gap-1.5 whitespace-nowrap rounded-pill",
    "font-ui text-caption font-bold leading-[1.35]",
  ),
  {
    variants: {
      tone: {
        /** Default. Metadata that isn't a state. */
        neutral: "bg-surface-sunken text-text-secondary",
        /** Brand emphasis — "New in", "Curated". Uses the AA-safe accent text. */
        accent: "bg-surface-accent-subtle text-text-accent-strong",
        /** Order confirmed, payout sent, verified maker. */
        success: "bg-success-subtle text-success",
        /** Low stock, action needed, expiring soon. */
        warning: "bg-warning-subtle text-warning",
        /** Failed payment, cancelled, validation error. */
        danger: "bg-danger-subtle text-danger",
        /** Neutral system messages, tips, shipping updates. */
        info: "bg-info-subtle text-info",
        /** High contrast, for a badge sitting on a photograph. */
        ink: "bg-surface-inverse text-text-inverse",
        /** On a dark surface or an image, where a fill would be heavy. */
        outline: "border border-border-subtle bg-transparent text-text-secondary",
      },
      size: {
        sm: "px-2 py-0.5 text-caption",
        md: "px-2.5 py-[5px]",
      },
    },
    defaultVariants: { tone: "neutral", size: "md" },
  },
);

export type BadgeProps = ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & {
    /** Leading icon as a node: `icon={<Icon name="tag" />}`. */
    icon?: ReactElement;
  };

export function Badge({ className, tone, size, icon, children, ...props }: BadgeProps) {
  return (
    <span data-slot="badge" className={cn(badgeVariants({ tone, size }), className)} {...props}>
      {icon && <IconSlot icon={icon} size={12} />}
      {children}
    </span>
  );
}

/**
 * Chip.
 *
 * A badge you can act on: a filter, a selected facet, a removable tag.
 *
 * The difference from Badge is not visual, it's semantic — a chip is a control
 * and renders as a `<button>`, so it is reachable by keyboard and announced as
 * pressable. If it doesn't do anything, it's a Badge.
 */
export type ChipProps = Omit<ComponentProps<"button">, "onSelect"> & {
  selected?: boolean;
  /** Renders a × that removes the chip. Gets its own accessible name. */
  onRemove?: () => void;
  removeLabel?: string;
  /** Leading icon as a node: `icon={<Icon name="tag" />}`. */
  icon?: ReactElement;
};

export function Chip({
  className,
  selected = false,
  onRemove,
  removeLabel,
  icon,
  children,
  type = "button",
  ...props
}: ChipProps) {
  return (
    <span
      data-slot="chip"
      className={cn(
        "inline-flex h-[var(--control-h-sm)] items-center gap-1.5 rounded-pill border px-3.5",
        "font-ui text-label font-semibold",
        "transition-[background-color,border-color,color] motion-instant",
        selected
          ? "border-surface-inverse bg-surface-inverse text-text-inverse"
          : "border-border-subtle bg-surface-raised text-text-secondary hover:border-border-strong",
        className,
      )}
    >
      <button
        type={type}
        aria-pressed={selected}
        className={cn("inline-flex items-center gap-1.5 rounded-pill", focusRing)}
        {...props}
      >
        {icon && <IconSlot icon={icon} size={13} />}
        {children}
      </button>
      {onRemove && (
        <button
          type="button"
          onClick={onRemove}
          aria-label={removeLabel ?? `Remove ${typeof children === "string" ? children : "filter"}`}
          className={cn("grid place-items-center rounded-full text-current opacity-70 hover:opacity-100", focusRing)}
        >
          <CloseGlyph size={13} />
        </button>
      )}
    </span>
  );
}

export { badgeVariants };

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"Badge & Chip"}],["$","$L1f",null,{"children":"Status and category labels, plus the removable chip."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"badge"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/badge","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/cva","@woohl/glyphs","@woohl/icon-slot","@woohl/tokens","@woohl/utils"],"props":[{"name":"tone","type":"\"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"info\"","default":"\"neutral\""},{"name":"size","type":"\"sm\" | \"md\"","default":"\"md\""},{"name":"icon","type":"ReactElement"}]}]}]]}]]}]