@krizaka/ui 2.0.0-beta.2 → 2.0.0-beta.3

package/registry/card.json

@@ -0,0 +1,154 @@
+{
+  "name": "card",
+  "type": "primitive",
+  "description": "`Card.*`, `card` (the slots). Server-safe.",
+  "files": [
+    {
+      "path": "card/card.tsx",
+      "content": "// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\n\nexport const card = tv({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"kz-spotlight kz-lift hover:border-accent/50\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The spotlight that follows the pointer and the lift on hover: for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading=\"lazy\" decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n"
+    },
+    {
+      "path": "card/index.ts",
+      "content": "/** @krizaka/ui/card — `Card.*`, `card` (the slots). Server-safe. */\nexport {\n  Card,\n  card,\n  CardBody,\n  type CardBodyProps,\n  CardDescription,\n  CardFooter,\n  CardImage,\n  type CardImageProps,\n  CardMedia,\n  type CardMediaProps,\n  CardOverlay,\n  type CardOverlayProps,\n  CardRoot,\n  type CardRootProps,\n  CardStat,\n  type CardStatProps,\n  CardTitle,\n  type CardTitleProps,\n} from \"./card\";\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "demos/card.tsx",
+    "content": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Card } from \"@krizaka/ui/card\";\n\n// A self-contained cover (no network).\nconst COVER =\n  \"data:image/svg+xml;utf8,\" +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 160 90\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n      '<stop offset=\"0\" stop-color=\"#1e3a8a\"/><stop offset=\"1\" stop-color=\"#7c3aed\"/></linearGradient></defs>' +\n      '<rect width=\"160\" height=\"90\" fill=\"url(#g)\"/><circle cx=\"118\" cy=\"30\" r=\"14\" fill=\"#fde68a\"/>' +\n      '<path d=\"M0 90 50 44l30 28 22-18 58 36z\" fill=\"#0f172a\" opacity=\".55\"/></svg>',\n  );\n\nexport default function CardDemo() {\n  return (\n    <Card.Root>\n      <Card.Media>\n        <Card.Image src={COVER} />\n        <Card.Overlay>\n          <Badge tone=\"scrim\">4K</Badge>\n        </Card.Overlay>\n        <Card.Overlay corner=\"bottom-right\">\n          <Badge tone=\"scrim\">12:04</Badge>\n        </Card.Overlay>\n      </Card.Media>\n      <Card.Body>\n        <Card.Title>Night ride across the city</Card.Title>\n        <Card.Description>Ten minutes of neon, rain and empty avenues, filmed in one take.</Card.Description>\n        <Card.Footer>\n          <span>1.2k views</span>\n          <span aria-hidden>·</span>\n          <span>2 days ago</span>\n        </Card.Footer>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "CardRoot",
+      "description": "",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged.",
+          "required": false
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "default": null,
+          "description": "The spotlight that follows the pointer and the lift on hover: for a card that is a link.",
+          "required": false
+        },
+        {
+          "name": "radius",
+          "type": "\"md\" | \"lg\" | \"xl\"",
+          "default": "xl",
+          "description": "md · lg · xl.",
+          "required": false
+        },
+        {
+          "name": "reveal",
+          "type": "number",
+          "default": null,
+          "description": "Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most).",
+          "required": false
+        },
+        {
+          "name": "tone",
+          "type": "\"default\" | \"elevated\" | \"glass\"",
+          "default": "default",
+          "description": "default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CardMedia",
+      "description": "",
+      "props": [
+        {
+          "name": "aspect",
+          "type": "\"video\" | \"auto\" | \"square\" | \"portrait\"",
+          "default": "video",
+          "description": "The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CardImage",
+      "description": "The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card.",
+      "props": [
+        {
+          "name": "fallback",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Shown when there is no image: an icon, an illustration (decorative).",
+          "required": false
+        },
+        {
+          "name": "src",
+          "type": "string | null",
+          "default": null,
+          "description": "The image's URL; `null` or nothing shows the `fallback`.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CardOverlay",
+      "description": "What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light.",
+      "props": [
+        {
+          "name": "corner",
+          "type": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\"",
+          "default": "top-left",
+          "description": "The corner of the media it sits in.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CardBody",
+      "description": "",
+      "props": [
+        {
+          "name": "padding",
+          "type": "\"none\" | \"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "description": "none · sm · md · lg.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CardTitle",
+      "description": "",
+      "props": [
+        {
+          "name": "as",
+          "type": "\"h2\" | \"h3\" | \"h4\"",
+          "default": "h3",
+          "description": "The heading level, to fit the page's outline.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CardStat",
+      "description": "A figure put forward: the label in capitals, the value in tabular digits.",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What the figure is, in small capitals above it (the figure is the children).",
+          "required": true
+        }
+      ]
+    }
+  ]
+}

package/registry/checkbox.json

@@ -0,0 +1,46 @@
+{
+  "name": "checkbox",
+  "type": "primitive",
+  "description": "`Checkbox` (checked · unchecked · indeterminate), `checkbox` (the slots). Client (\"use client\").",
+  "files": [
+    {
+      "path": "checkbox/checkbox.tsx",
+      "content": "// Client. Radix Checkbox: role=\"checkbox\", aria-checked (true · false · mixed), Space toggles, a hidden input inside a\n// form. It sits in a `Field` like the other controls: `<Field.Label htmlFor={id}>`, `invalid`, aria-describedby.\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const checkbox = tv({\n  slots: {\n    root:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent \" +\n      \"aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    indicator: \"flex items-center justify-center\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60\",\n  },\n});\n\nfunction Check() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction Dash() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, \"children\"> & {\n  /** Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n  /** The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with\n   * `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A checkbox: `checked`/`defaultChecked` (`true` · `false` · `\"indeterminate\"`) + `onCheckedChange`. */\nexport function Checkbox({ invalid, className, children, ...props }: CheckboxProps) {\n  const s = checkbox();\n  const box = (\n    <CheckboxPrimitive.Root\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className: children ? \"mt-0.5\" : className })}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={s.indicator()}>\n        {props.checked === \"indeterminate\" ? <Dash /> : <Check />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n  if (!children) return box;\n  return (\n    <label className={s.label({ className })}>\n      {box}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n"
+    },
+    {
+      "path": "checkbox/index.ts",
+      "content": "/** @krizaka/ui/checkbox — `Checkbox` (checked · unchecked · indeterminate), `checkbox` (the slots). Client (\"use client\"). */\nexport { Checkbox, checkbox, type CheckboxProps } from \"./checkbox\";\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/checkbox.tsx",
+    "content": "import { Checkbox } from \"@krizaka/ui/checkbox\";\n\nexport default function CheckboxDemo() {\n  return <Checkbox>I accept the terms of use</Checkbox>;\n}\n"
+  },
+  "props": [
+    {
+      "component": "Checkbox",
+      "description": "A checkbox: `checked`/`defaultChecked` (`true` · `false` · `\"indeterminate\"`) + `onCheckedChange`.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with\n`Field.Label htmlFor` or `aria-label`.",
+          "required": false
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "default": null,
+          "description": "Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/chip.json

@@ -0,0 +1,164 @@
+{
+  "name": "chip",
+  "type": "primitive",
+  "description": "`Chip` (selectable, removable), `Chip.Group` (single · multiple), `chip` (the slots). Client (\"use client\").",
+  "files": [
+    {
+      "path": "chip/chip.tsx",
+      "content": "// Client (a context). A chip is a pressable pill: alone it is a Radix Toggle (aria-pressed), inside `Chip.Group` an\n// item of a Radix Toggle Group (roving focus with the arrows; `single` = radio semantics, `multiple` = pressed\n// buttons). A `removable` chip is a static label with its own remove button (two buttons cannot nest).\nimport { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const chip = tv({\n  slots: {\n    group: \"flex flex-wrap items-center gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n    base:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 \" +\n      \"border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg \" +\n      \"data-[state=on]:border-accent data-[state=on]:bg-accent-soft data-[state=on]:text-fg\",\n    remove:\n      \"-mr-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    size: { sm: { base: \"h-7 px-3 text-xs\" }, md: { base: \"h-9 px-3.5 text-xs\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type ChipVariants = VariantProps<typeof chip>;\n\ntype GroupContext = { size: ChipVariants[\"size\"] };\nconst ChipGroupContext = React.createContext<GroupContext | null>(null);\n\nfunction RemoveIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\ntype ToggleChipProps = Omit<React.ComponentProps<\"button\">, \"value\" | \"defaultValue\"> &\n  ChipVariants & {\n    /**\n     * sm · md (inside `Chip.Group`, the group's size by default).\n     * @default \"md\"\n     */\n    size?: ChipVariants[\"size\"];\n    /** Inside `Chip.Group`: the value this chip stands for (required there, ignored alone). */\n    value?: string;\n    /** Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press. */\n    selected?: boolean;\n    /** Alone: pressed at first, uncontrolled. */\n    defaultSelected?: boolean;\n    /** Alone: called with the new state on every press. */\n    onSelectedChange?: (selected: boolean) => void;\n    /** A pressable chip (the default); `true` makes it a static chip with a remove button. */\n    removable?: false;\n  };\n\ntype RemovableChipProps = Omit<React.ComponentProps<\"span\">, \"onSelect\"> &\n  ChipVariants & {\n    /** A static chip (a chosen tag, an applied filter) with a remove button. */\n    removable: true;\n    /** The accessible name of the remove button — passed translated, e.g. \"Remove #night\". */\n    removeLabel: string;\n    /** Runs when the remove button is pressed. */\n    onRemove: () => void;\n    /** Disables the remove button. */\n    disabled?: boolean;\n  };\n\nexport type ChipProps = ToggleChipProps | RemovableChipProps;\n\n/** A selectable pill (`selected` / `onSelectedChange`), an item of `Chip.Group` (`value`), or `removable`. */\nfunction ChipBase(props: ChipProps) {\n  const group = React.useContext(ChipGroupContext);\n  if (props.removable) {\n    const { removable: _removable, removeLabel, onRemove, disabled, size, className, children, ...rest } = props;\n    const s = chip({ size: size ?? group?.size });\n    return (\n      <span data-removable=\"\" className={s.base({ className })} {...rest}>\n        {children}\n        <button type=\"button\" aria-label={removeLabel} title={removeLabel} disabled={disabled} onClick={onRemove} className={s.remove()}>\n          <RemoveIcon />\n        </button>\n      </span>\n    );\n  }\n  const { removable: _removable, value, selected, defaultSelected, onSelectedChange, size, className, ...rest } = props;\n  const s = chip({ size: size ?? group?.size });\n  if (group) {\n    if (value === undefined) throw new Error(\"Chip: a chip inside Chip.Group needs a `value`.\");\n    return <ToggleGroupPrimitive.Item value={value} className={s.base({ className })} {...rest} />;\n  }\n  return (\n    <TogglePrimitive.Root\n      pressed={selected}\n      defaultPressed={defaultSelected}\n      onPressedChange={onSelectedChange}\n      className={s.base({ className })}\n      {...rest}\n    />\n  );\n}\n\ntype GroupBase = Omit<React.ComponentProps<\"div\">, \"defaultValue\" | \"dir\"> &\n  ChipVariants & {\n    /**\n     * sm · md: the size of every chip of the group.\n     * @default \"md\"\n     */\n    size?: ChipVariants[\"size\"];\n    /** The group's accessible name — passed translated (\"Filter by format\"). */\n    label?: string;\n    /** The arrow keys that move: left / right (horizontal, a row) or up / down (vertical, a column). */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Arrow keys wrap from the last chip to the first (default `true`). */\n    loop?: boolean;\n    /** Disables every chip of the group. */\n    disabled?: boolean;\n  };\n\nexport type ChipGroupProps =\n  | (GroupBase & {\n      /** One choice: the chips behave as radios. */\n      type: \"single\";\n      /** The chosen value (controlled), `\"\"` when none. */\n      value?: string;\n      /** The value chosen at first, uncontrolled. */\n      defaultValue?: string;\n      /** Called with the new value on every choice. */\n      onValueChange?: (value: string) => void;\n      /** Keeps one chip selected: pressing the selected chip does not clear it (default `false`). */\n      required?: boolean;\n    })\n  | (GroupBase & {\n      /** Any number of choices: the chips are pressed buttons. */\n      type: \"multiple\";\n      /** The chosen values (controlled). */\n      value?: string[];\n      /** The values chosen at first, uncontrolled. */\n      defaultValue?: string[];\n      /** Called with the new values on every press. */\n      onValueChange?: (value: string[]) => void;\n      required?: never;\n    });\n\n/** Chips that choose together: `type` single · multiple, `value`/`defaultValue` + `onValueChange`. */\nexport function ChipGroup({ label, size, className, children, ...props }: ChipGroupProps) {\n  const s = chip({ size });\n  const context = React.useMemo(() => ({ size }), [size]);\n  const common = { \"aria-label\": label, className: s.group({ className }) };\n  let group: React.ReactNode;\n  if (props.type === \"single\") {\n    const { type: _type, value, defaultValue, onValueChange, required, ...rest } = props;\n    group = <SingleGroup {...rest} {...common} value={value} defaultValue={defaultValue} onValueChange={onValueChange} required={required}>{children}</SingleGroup>;\n  } else {\n    const { type: _type, required: _required, ...rest } = props;\n    group = (\n      <ToggleGroupPrimitive.Root type=\"multiple\" {...rest} {...common}>\n        {children}\n      </ToggleGroupPrimitive.Root>\n    );\n  }\n  return <ChipGroupContext.Provider value={context}>{group}</ChipGroupContext.Provider>;\n}\n\n/** Radix's single group, plus `required`: the value is held here so that an empty change can be refused. */\nfunction SingleGroup({\n  value,\n  defaultValue,\n  onValueChange,\n  required,\n  ...props\n}: Omit<GroupBase, \"size\" | \"label\"> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  required?: boolean;\n}) {\n  const [inner, setInner] = React.useState(defaultValue ?? \"\");\n  const current = value ?? inner;\n  return (\n    <ToggleGroupPrimitive.Root\n      type=\"single\"\n      value={current}\n      onValueChange={(next) => {\n        if (required && !next) return;\n        if (value === undefined) setInner(next);\n        onValueChange?.(next);\n      }}\n      {...props}\n    />\n  );\n}\n\n/** `Chip` (selectable, removable) and `Chip.Group` (single · multiple). */\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n"
+    },
+    {
+      "path": "chip/index.ts",
+      "content": "/** @krizaka/ui/chip — `Chip` (selectable, removable), `Chip.Group` (single · multiple), `chip` (the slots). Client (\"use client\"). */\nexport { Chip, chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipVariants } from \"./chip\";\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/chip.tsx",
+    "content": "import { Chip } from \"@krizaka/ui/chip\";\n\nexport default function ChipDemo() {\n  return (\n    <div className=\"flex gap-2\">\n      <Chip>Subtitles</Chip>\n      <Chip defaultSelected>HD</Chip>\n      <Chip disabled>4K</Chip>\n    </div>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Chip",
+      "description": "`Chip` (selectable, removable) and `Chip.Group` (single · multiple).",
+      "props": [
+        {
+          "name": "onRemove",
+          "type": "() => void",
+          "default": null,
+          "description": "Runs when the remove button is pressed.",
+          "required": true
+        },
+        {
+          "name": "removeLabel",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name of the remove button — passed translated, e.g. \"Remove #night\".",
+          "required": true
+        },
+        {
+          "name": "defaultSelected",
+          "type": "boolean",
+          "default": null,
+          "description": "Alone: pressed at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "onSelectedChange",
+          "type": "((selected: boolean) => void)",
+          "default": null,
+          "description": "Alone: called with the new state on every press.",
+          "required": false
+        },
+        {
+          "name": "removable",
+          "type": "boolean",
+          "default": null,
+          "description": "A pressable chip (the default); `true` makes it a static chip with a remove button.\nA static chip (a chosen tag, an applied filter) with a remove button.",
+          "required": false
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "default": null,
+          "description": "Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\"",
+          "default": "md",
+          "description": "sm · md (inside `Chip.Group`, the group's size by default).",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "default": null,
+          "description": "Inside `Chip.Group`: the value this chip stands for (required there, ignored alone).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "ChipGroup",
+      "description": "Chips that choose together: `type` single · multiple, `value`/`defaultValue` + `onValueChange`.",
+      "props": [
+        {
+          "name": "type",
+          "type": "\"single\" | \"multiple\"",
+          "default": null,
+          "description": "One choice: the chips behave as radios.\nAny number of choices: the chips are pressed buttons.",
+          "required": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | string[]",
+          "default": null,
+          "description": "The value chosen at first, uncontrolled.\nThe values chosen at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Disables every chip of the group.",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The group's accessible name — passed translated (\"Filter by format\").",
+          "required": false
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "default": null,
+          "description": "Arrow keys wrap from the last chip to the first (default `true`).",
+          "required": false
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string) => void) | ((value: string[]) => void)",
+          "default": null,
+          "description": "Called with the new value on every choice.\nCalled with the new values on every press.",
+          "required": false
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "default": null,
+          "description": "The arrow keys that move: left / right (horizontal, a row) or up / down (vertical, a column).",
+          "required": false
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "default": null,
+          "description": "Keeps one chip selected: pressing the selected chip does not clear it (default `false`).",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\"",
+          "default": "md",
+          "description": "sm · md: the size of every chip of the group.",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string | string[]",
+          "default": null,
+          "description": "The chosen value (controlled), `\"\"` when none.\nThe chosen values (controlled).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/cn.json

@@ -0,0 +1,21 @@
+{
+  "name": "cn",
+  "type": "primitive",
+  "description": "Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it. tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer): hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean install of the packed package.",
+  "files": [
+    {
+      "path": "cn.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n"
+    }
+  ],
+  "dependencies": [
+    "clsx@^2.1.1",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/cn.tsx",
+    "content": "import { cn } from \"@krizaka/ui/cn\";\n\nexport default function CnDemo({ selected = true }: { selected?: boolean }) {\n  return (\n    <p className={cn(\"rounded-lg border border-border-default px-3 py-2 text-sm text-fg-secondary\", selected && \"border-accent text-fg\", \"px-4\")}>\n      The last class wins: <code>px-4</code> replaces <code>px-3</code>, and the selected colours replace the idle ones.\n    </p>\n  );\n}\n"
+  },
+  "props": []
+}

package/registry/command.json

@@ -0,0 +1,162 @@
+{
+  "name": "command",
+  "type": "primitive",
+  "description": "`Command.*` (cmdk) and `CommandDialog`, `command` (the slots). Client (\"use client\").",
+  "files": [
+    {
+      "path": "command/command.tsx",
+      "content": "// Client. A command palette on cmdk: the combobox / listbox roles, the active option (aria-activedescendant), the\n// arrows, Home / End, Enter, and the filtering (turn it off with `shouldFilter={false}` when the server searches).\n// `CommandDialog` puts it in the platform's Dialog. Words arrive as props.\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { DialogContent, type DialogContentProps } from \"../dialog/dialog\";\n\nexport const command = tv({\n  slots: {\n    root: \"flex h-full w-full flex-col overflow-hidden bg-surface-1 text-fg\",\n    inputWrap: \"flex items-center gap-3 border-b border-border-default px-4\",\n    icon: \"h-5 w-5 shrink-0 text-fg-secondary\",\n    input:\n      \"h-13 w-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:text-base\",\n    list: \"max-h-[min(60dvh,26rem)] scroll-py-2 overflow-y-auto overscroll-contain p-2\",\n    empty: \"px-3 py-8 text-center text-sm text-fg-secondary\",\n    loading: \"px-3 py-6 text-center text-sm text-fg-secondary\",\n    group:\n      \"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:pt-3 [&_[cmdk-group-heading]]:text-xs \" +\n      \"[&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-fg-secondary\",\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-fg outline-hidden transition-colors \" +\n      \"before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-transparent \" +\n      \"data-[selected=true]:bg-surface-2 data-[selected=true]:before:bg-accent data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40\",\n    separator: \"-mx-2 my-1 h-px bg-border-subtle\",\n    shortcut: \"ml-auto text-xs tracking-widest text-fg-secondary\",\n  },\n});\nconst s = command();\n\nfunction SearchIcon({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-3.5-3.5\" />\n    </svg>\n  );\n}\n\nexport type CommandRootProps = React.ComponentProps<typeof CommandPrimitive> & {\n  /** The accessible name of the palette — passed translated (\"Search\", \"Commands\"). */\n  label: string;\n};\n\n/** The palette: `value` / `onValueChange` (the active item), `shouldFilter`, `filter`, `loop`. */\nexport function CommandRoot({ className, ...props }: CommandRootProps) {\n  return <CommandPrimitive className={s.root({ className })} {...props} />;\n}\n\nexport type CommandInputProps = Omit<React.ComponentProps<typeof CommandPrimitive.Input>, \"placeholder\"> & {\n  /** What to type — passed translated. The input is named by the palette's `label`. */\n  placeholder: string;\n  /** After the input, inside the bar: a spinner, a clear button. */\n  trailing?: React.ReactNode;\n};\n\n/** The search field (`value` / `onValueChange` for the query), with a magnifier. */\nexport function CommandInput({ className, placeholder, trailing, ...props }: CommandInputProps) {\n  return (\n    <div className={s.inputWrap()} cmdk-input-wrapper=\"\">\n      <SearchIcon className={s.icon()} />\n      <CommandPrimitive.Input placeholder={placeholder} className={s.input({ className })} {...props} />\n      {trailing}\n    </div>\n  );\n}\n\nexport type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List> & {\n  /** The accessible name of the list of results — passed translated (\"Suggestions\", \"Results\"). */\n  label: string;\n};\n\nexport function CommandList({ className, ...props }: CommandListProps) {\n  return <CommandPrimitive.List className={s.list({ className })} {...props} />;\n}\n\nexport type CommandEmptyProps = Omit<React.ComponentProps<typeof CommandPrimitive.Empty>, \"children\"> & {\n  /** Shown when nothing matches — passed translated. */\n  emptyLabel: React.ReactNode;\n};\n\n/** Shown by cmdk only when no item matches. */\nexport function CommandEmpty({ className, emptyLabel, ...props }: CommandEmptyProps) {\n  return (\n    <CommandPrimitive.Empty className={s.empty({ className })} {...props}>\n      {emptyLabel}\n    </CommandPrimitive.Empty>\n  );\n}\n\n/** While results load (`label` is announced). */\nexport function CommandLoading({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Loading>) {\n  return <CommandPrimitive.Loading className={s.loading({ className })} {...props} />;\n}\n\n/** A group of items under a `heading`. */\nexport function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return <CommandPrimitive.Group className={s.group({ className })} {...props} />;\n}\n\n/** An option: `onSelect` on Enter or click, `value` and `keywords` for the filter, `disabled`. */\nexport function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return <CommandPrimitive.Item className={s.item({ className })} {...props} />;\n}\n\n/** A line between groups. Decorative (`role=\"none\"`): cmdk's own separator is a role a listbox may not hold (axe). */\nexport function CommandSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div role=\"none\" className={s.separator({ className })} {...props} />;\n}\n\n/** A keyboard hint at the end of an item. */\nexport function CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span className={s.shortcut({ className })} {...props} />;\n}\n\n/** `Command.Root/Input/List/Empty/Loading/Group/Item/Separator/Shortcut`. */\nexport const Command = {\n  Root: CommandRoot,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Loading: CommandLoading,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Separator: CommandSeparator,\n  Shortcut: CommandShortcut,\n};\n\nexport type CommandDialogProps = Omit<CommandRootProps, \"title\"> & {\n  /** Open or closed (controlled), with `onOpenChange`. */\n  open?: boolean;\n  /** Open at first, uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when it opens or closes (Escape, a click outside, a shortcut of the product). */\n  onOpenChange?: (open: boolean) => void;\n  /** Under the palette, inside the dialog: shortcuts, a \"see all results\" link. */\n  footer?: React.ReactNode;\n  /** Passed to `Dialog.Content`: `size`, `container`, `className` of the dialog. */\n  contentProps?: Omit<Extract<DialogContentProps, { hideClose: true }>, \"hideClose\" | \"children\" | \"placement\">;\n};\n\n/**\n * The palette in a dialog (Radix: focus trap, Escape, focus return). The dialog is named by `label`; it has no close\n * button — Escape and a click outside close it — and the input takes the focus when it opens.\n */\nexport function CommandDialog({ open, defaultOpen, onOpenChange, footer, contentProps, label, className, children, ...props }: CommandDialogProps) {\n  const { className: contentClassName, ...content } = contentProps ?? {};\n  return (\n    <DialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <DialogContent\n        hideClose\n        size=\"lg\"\n        aria-describedby={undefined}\n        className={cn(\"top-[12dvh] translate-y-0 sm:top-[14dvh]\", contentClassName)}\n        {...content}\n      >\n        <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n        <CommandRoot label={label} className={className} {...props}>\n          {children}\n        </CommandRoot>\n        {footer}\n      </DialogContent>\n    </DialogPrimitive.Root>\n  );\n}\n"
+    },
+    {
+      "path": "command/index.ts",
+      "content": "/** @krizaka/ui/command — `Command.*` (cmdk) and `CommandDialog`, `command` (the slots). Client (\"use client\"). */\nexport {\n  Command,\n  command,\n  CommandDialog,\n  type CommandDialogProps,\n  CommandEmpty,\n  type CommandEmptyProps,\n  CommandGroup,\n  CommandInput,\n  type CommandInputProps,\n  CommandItem,\n  CommandList,\n  type CommandListProps,\n  CommandLoading,\n  CommandRoot,\n  type CommandRootProps,\n  CommandSeparator,\n  CommandShortcut,\n} from \"./command\";\n"
+    }
+  ],
+  "dependencies": [
+    "cmdk@^1.1.1",
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn",
+    "dialog"
+  ],
+  "demo": {
+    "path": "demos/command.tsx",
+    "content": "import { Command } from \"@krizaka/ui/command\";\n\nexport default function CommandDemo() {\n  return (\n    <Command.Root label=\"Commands\" className=\"w-[28rem] max-w-full rounded-xl border border-border-default shadow-lg\">\n      <Command.Input placeholder=\"Type a command or search\" />\n      <Command.List label=\"Suggestions\">\n        <Command.Empty emptyLabel=\"Nothing matches.\" />\n        <Command.Group heading=\"Pages\">\n          <Command.Item>\n            Home\n            <Command.Shortcut>G H</Command.Shortcut>\n          </Command.Item>\n          <Command.Item>\n            Wallet\n            <Command.Shortcut>G W</Command.Shortcut>\n          </Command.Item>\n          <Command.Item disabled>Studio</Command.Item>\n        </Command.Group>\n        <Command.Separator />\n        <Command.Group heading=\"Actions\">\n          <Command.Item keywords={[\"video\", \"new\"]}>Upload a video</Command.Item>\n          <Command.Item>Switch the theme</Command.Item>\n        </Command.Group>\n      </Command.List>\n    </Command.Root>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "CommandRoot",
+      "description": "The palette: `value` / `onValueChange` (the active item), `shouldFilter`, `filter`, `loop`.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Accessible label for this command menu. Not shown visibly.\nThe accessible name of the palette — passed translated (\"Search\", \"Commands\").",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CommandInput",
+      "description": "The search field (`value` / `onValueChange` for the query), with a magnifier.",
+      "props": [
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "What to type — passed translated. The input is named by the palette's `label`.",
+          "required": true
+        },
+        {
+          "name": "trailing",
+          "type": "ReactNode",
+          "default": null,
+          "description": "After the input, inside the bar: a spinner, a clear button.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CommandList",
+      "description": "",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Accessible label for this List of suggestions. Not shown visibly.\nThe accessible name of the list of results — passed translated (\"Suggestions\", \"Results\").",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "CommandEmpty",
+      "description": "Shown by cmdk only when no item matches.",
+      "props": [
+        {
+          "name": "emptyLabel",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Shown when nothing matches — passed translated.",
+          "required": true
+        }
+      ]
+    },
+    {
+      "component": "CommandLoading",
+      "description": "While results load (`label` is announced).",
+      "props": []
+    },
+    {
+      "component": "CommandGroup",
+      "description": "A group of items under a `heading`.",
+      "props": []
+    },
+    {
+      "component": "CommandItem",
+      "description": "An option: `onSelect` on Enter or click, `value` and `keywords` for the filter, `disabled`.",
+      "props": []
+    },
+    {
+      "component": "CommandSeparator",
+      "description": "A line between groups. Decorative (`role=\"none\"`): cmdk's own separator is a role a listbox may not hold (axe).",
+      "props": []
+    },
+    {
+      "component": "CommandShortcut",
+      "description": "A keyboard hint at the end of an item.",
+      "props": []
+    },
+    {
+      "component": "CommandDialog",
+      "description": "The palette in a dialog (Radix: focus trap, Escape, focus return). The dialog is named by `label`; it has no close\nbutton — Escape and a click outside close it — and the input takes the focus when it opens.",
+      "props": [
+        {
+          "name": "contentProps",
+          "type": "Omit<DialogContentProps & RefAttributes<HTMLDivElement> & DialogVariants & { closeLabel?: string; hideClose: true; } & { ...; }, \"children\" | ... 1 more ... | \"hideClose\">",
+          "default": null,
+          "description": "Passed to `Dialog.Content`: `size`, `container`, `className` of the dialog.",
+          "required": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": null,
+          "description": "Open at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Under the palette, inside the dialog: shortcuts, a \"see all results\" link.",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Accessible label for this command menu. Not shown visibly.\nThe accessible name of the palette — passed translated (\"Search\", \"Commands\").",
+          "required": false
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((open: boolean) => void)",
+          "default": null,
+          "description": "Called when it opens or closes (Escape, a click outside, a shortcut of the product).",
+          "required": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": null,
+          "description": "Open or closed (controlled), with `onOpenChange`.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}