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

package/registry/button.json

@@ -0,0 +1,115 @@
+{
+  "name": "button",
+  "type": "primitive",
+  "description": "`Button`, `IconButton`, `buttonVariants`. Server-safe.",
+  "files": [
+    {
+      "path": "button/button.tsx",
+      "content": "// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const buttonVariants = tv({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\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    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a\n      // text role, the border and the tint carry the danger.\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `secondary` (a raised surface), `outline`, `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * rounded · pill.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one. */\n    loading?: boolean;\n  };\n\nexport function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({ variant, size, shape, className })}\n      {...props}\n    />\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. */\nexport function IconButton({ label, size = \"icon\", ...props }: IconButtonProps) {\n  return <Button aria-label={label} title={label} size={size} {...props} />;\n}\n"
+    },
+    {
+      "path": "button/index.ts",
+      "content": "/** @krizaka/ui/button — `Button`, `IconButton`, `buttonVariants`. Server-safe. */\nexport { Button, type ButtonProps, type ButtonVariants, buttonVariants, IconButton, type IconButtonProps } from \"./button\";\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/button.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\n\nexport default function ButtonDemo() {\n  return <Button variant=\"primary\">Continue</Button>;\n}\n"
+  },
+  "props": [
+    {
+      "component": "Button",
+      "description": "",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged.",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "default": null,
+          "description": "Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one.",
+          "required": false
+        },
+        {
+          "name": "shape",
+          "type": "\"rounded\" | \"pill\"",
+          "default": "rounded",
+          "description": "rounded · pill.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"icon\" | \"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "description": "sm · md · lg, or `icon` (a square).",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"danger\" | \"primary\" | \"secondary\" | \"outline\" | \"ghost\"",
+          "default": "secondary",
+          "description": "The look: `primary` (the accent), `secondary` (a raised surface), `outline`, `ghost`, `danger`.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IconButton",
+      "description": "An icon-only button: `label` is required, it is its accessible name.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name (and tooltip) of the button — required, passed translated.",
+          "required": true
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged.",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "default": null,
+          "description": "Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one.",
+          "required": false
+        },
+        {
+          "name": "shape",
+          "type": "\"rounded\" | \"pill\"",
+          "default": "rounded",
+          "description": "rounded · pill.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"icon\" | \"sm\" | \"md\" | \"lg\"",
+          "default": "icon",
+          "description": "sm · md · lg, or `icon` (a square).",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"danger\" | \"primary\" | \"secondary\" | \"outline\" | \"ghost\"",
+          "default": "secondary",
+          "description": "The look: `primary` (the accent), `secondary` (a raised surface), `outline`, `ghost`, `danger`.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

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": []
+}