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

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
+        }
+      ]
+    }
+  ]
+}

package/registry/confirm-button.json

@@ -0,0 +1,104 @@
+{
+  "name": "confirm-button",
+  "type": "primitive",
+  "description": "`ConfirmButton` (two steps: arm, then confirm). Client (\"use client\").",
+  "files": [
+    {
+      "path": "confirm-button/confirm-button.tsx",
+      "content": "// Client (a state). A destructive action confirmed by a second press, never `window.confirm`: the first press arms it\n// and says what will happen (`confirmLabel`, announced politely), the second runs `onConfirm`. It disarms by itself\n// after `timeoutMs`, on Escape, and when the focus leaves. The danger is the border and the tint; the words stay a\n// text role (contrast AA in both themes).\nimport { VisuallyHidden } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/button\";\nimport { cn } from \"../cn\";\n\nexport const confirmArmed = \"border border-danger bg-danger/20 text-fg hover:border-danger hover:bg-danger/30\";\n\nexport type ConfirmButtonProps = Omit<ButtonProps, \"onClick\" | \"asChild\"> & {\n  /** What the second press does, in words — shown and announced once armed (\"Delete for good?\"). Passed translated. */\n  confirmLabel: string;\n  /** The accessible name while idle, for an icon-only button (the confirm label names it once armed). */\n  label?: string;\n  /** Runs on the second press. */\n  onConfirm: () => void;\n  /** Disarms after this many milliseconds (4000 by default). */\n  timeoutMs?: number;\n  /** What it shows once armed (default: its children, then `confirmLabel`). */\n  armedContent?: React.ReactNode;\n  /** Notified when it arms and disarms. */\n  onArmedChange?: (armed: boolean) => void;\n};\n\n/** A two-step button: press to arm, press again within `timeoutMs` to confirm. State: `data-armed`. */\nexport function ConfirmButton({\n  confirmLabel,\n  label,\n  onConfirm,\n  timeoutMs = 4000,\n  onArmedChange,\n  armedContent,\n  variant = \"ghost\",\n  className,\n  children,\n  onBlur,\n  onKeyDown,\n  ...props\n}: ConfirmButtonProps) {\n  const [armed, setArmedState] = React.useState(false);\n  const armedRef = React.useRef(false);\n  const onArmedChangeRef = React.useRef(onArmedChange);\n  React.useEffect(() => {\n    onArmedChangeRef.current = onArmedChange;\n  }, [onArmedChange]);\n  const setArmed = React.useCallback((next: boolean) => {\n    if (armedRef.current === next) return;\n    armedRef.current = next;\n    setArmedState(next);\n    onArmedChangeRef.current?.(next);\n  }, []);\n  React.useEffect(() => {\n    if (!armed) return;\n    const timer = window.setTimeout(() => setArmed(false), timeoutMs);\n    return () => window.clearTimeout(timer);\n  }, [armed, timeoutMs, setArmed]);\n  const name = armed ? confirmLabel : label;\n  return (\n    <>\n      <Button\n        variant={variant}\n        aria-label={name}\n        title={name}\n        data-armed={armed ? \"\" : undefined}\n        className={cn(armed && confirmArmed, className)}\n        onClick={() => {\n          if (!armed) return setArmed(true);\n          setArmed(false);\n          onConfirm();\n        }}\n        onBlur={(event) => {\n          onBlur?.(event);\n          setArmed(false);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (armed && event.key === \"Escape\") {\n            event.stopPropagation();\n            setArmed(false);\n          }\n        }}\n        {...props}\n      >\n        {armed\n          ? (armedContent ?? (\n              <>\n                {children}\n                <span>{confirmLabel}</span>\n              </>\n            ))\n          : children}\n      </Button>\n      <VisuallyHidden.Root aria-live=\"polite\">{armed ? confirmLabel : \"\"}</VisuallyHidden.Root>\n    </>\n  );\n}\n"
+    },
+    {
+      "path": "confirm-button/index.ts",
+      "content": "/** @krizaka/ui/confirm-button — `ConfirmButton` (two steps: arm, then confirm). Client (\"use client\"). */\nexport { confirmArmed, ConfirmButton, type ConfirmButtonProps } from \"./confirm-button\";\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0"
+  ],
+  "registryDependencies": [
+    "button",
+    "cn"
+  ],
+  "demo": {
+    "path": "demos/confirm-button.tsx",
+    "content": "\"use client\";\n\nimport { ConfirmButton } from \"@krizaka/ui/confirm-button\";\n\nexport default function ConfirmButtonDemo() {\n  return (\n    <ConfirmButton label=\"Delete the comment\" confirmLabel=\"Delete?\" size=\"sm\" onConfirm={() => {}}>\n      <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        <path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\" />\n      </svg>\n    </ConfirmButton>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "ConfirmButton",
+      "description": "A two-step button: press to arm, press again within `timeoutMs` to confirm. State: `data-armed`.",
+      "props": [
+        {
+          "name": "confirmLabel",
+          "type": "string",
+          "default": null,
+          "description": "What the second press does, in words — shown and announced once armed (\"Delete for good?\"). Passed translated.",
+          "required": true
+        },
+        {
+          "name": "onConfirm",
+          "type": "() => void",
+          "default": null,
+          "description": "Runs on the second press.",
+          "required": true
+        },
+        {
+          "name": "armedContent",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What it shows once armed (default: its children, then `confirmLabel`).",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name while idle, for an icon-only button (the confirm label names it once armed).",
+          "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": "onArmedChange",
+          "type": "((armed: boolean) => void)",
+          "default": null,
+          "description": "Notified when it arms and disarms.",
+          "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": "timeoutMs",
+          "type": "number",
+          "default": "4000",
+          "description": "Disarms after this many milliseconds (4000 by default).",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"danger\" | \"primary\" | \"secondary\" | \"outline\" | \"ghost\"",
+          "default": "ghost",
+          "description": "The look: `primary` (the accent), `secondary` (a raised surface), `outline`, `ghost`, `danger`.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/countdown.json

@@ -0,0 +1,84 @@
+{
+  "name": "countdown",
+  "type": "primitive",
+  "description": "`Countdown`, `useCountdown`, `splitDuration`. Client (\"use client\").",
+  "files": [
+    {
+      "path": "countdown/core.ts",
+      "content": "// The countdown's clock, shared by the web (`@krizaka/ui/countdown`) and native renders: no DOM import.\nimport { useSyncExternalStore } from \"react\";\n\n// One clock for every countdown on the page: it ticks each second while someone listens.\nconst listeners = new Set<() => void>();\nlet timer: ReturnType<typeof setInterval> | null = null;\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  timer ??= setInterval(() => listeners.forEach((l) => l()), 1000);\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0 && timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n  };\n}\n\nconst nowSecond = () => Math.floor(Date.now() / 1000) * 1000;\n\n/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */\nexport function useCountdown(target: Date | string | number, skewMs = 0): number {\n  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);\n  return Math.max(0, new Date(target).getTime() - (now + skewMs));\n}\n\n/** Splits a duration into days, hours, minutes and seconds. */\nexport function splitDuration(ms: number): { d: number; h: number; m: number; s: number } {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\n\n/** The short unit labels, passed translated (e.g. `{ d: \"d\", h: \"h\", m: \"m\", s: \"s\" }`). */\nexport type CountdownUnits = { d: string; h: string; m: string; s: string };\n\n/** The three segments shown: days, hours, minutes when there are days; else hours, minutes, seconds. */\nexport function countdownParts(ms: number, units: CountdownUnits): [number, string][] {\n  const { d, h, m, s } = splitDuration(ms);\n  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];\n}\n"
+    },
+    {
+      "path": "countdown/countdown.tsx",
+      "content": "// Client: the clock is a hook.\nimport { tv } from \"tailwind-variants\";\n\nimport { countdownParts, type CountdownUnits, useCountdown } from \"./core\";\n\nconst countdown = tv({\n  slots: {\n    root: \"inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg\",\n    segment: \"inline-flex items-baseline\",\n    unit: \"ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary\",\n  },\n  variants: {\n    size: { sm: { root: \"text-sm\" }, md: { root: \"text-xl\" }, lg: { root: \"text-3xl sm:text-4xl\" } },\n    urgent: { true: { root: \"text-danger\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type CountdownProps = {\n  /** The moment it counts down to: a Date, an ISO string or epoch milliseconds. */\n  target: Date | string | number;\n  /** Server clock − this clock, in milliseconds. */\n  skewMs?: number;\n  /** The short unit labels, passed translated. */\n  units: CountdownUnits;\n  /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */\n  urgentBelowMs?: number;\n  /** sm · md · lg (the danger role is large-text safe from `md`). */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Accessible name, e.g. \"Ends in\". */\n  label: string;\n  /** Classes merged last, over the primitive's. */\n  className?: string;\n};\n\n/**\n * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under\n * `urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).\n * Words come from the app: `units` are the short unit labels. `role=\"timer\"` without live announcements — the app\n * announces what matters. State: `data-urgent`, `data-ended`.\n *\n * The danger role is large-text safe (≥ 3:1) from `size=\"md\"`; at `size=\"sm\"` an urgent countdown in light mode is\n * under the 4.5:1 of small text.\n */\nexport function Countdown({ target, skewMs = 0, units, urgentBelowMs = 60_000, size = \"md\", label, className }: CountdownProps) {\n  const ms = useCountdown(target, skewMs);\n  const urgent = ms > 0 && ms < urgentBelowMs;\n  const parts = countdownParts(ms, units);\n  const s = countdown({ size, urgent });\n  return (\n    <span\n      role=\"timer\"\n      aria-label={label}\n      data-urgent={urgent ? \"\" : undefined}\n      data-ended={ms === 0 ? \"\" : undefined}\n      suppressHydrationWarning\n      className={s.root({ className })}\n    >\n      {parts.map(([value, unit], i) => (\n        <span key={unit} className={s.segment({ className: urgent && i === parts.length - 1 ? \"motion-safe:animate-pulse\" : undefined })}>\n          {String(value).padStart(2, \"0\")}\n          <span className={s.unit()}>{unit}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n"
+    },
+    {
+      "path": "countdown/index.ts",
+      "content": "/** @krizaka/ui/countdown — `Countdown`, `useCountdown`, `splitDuration`. Client (\"use client\"). */\nexport { countdownParts, type CountdownUnits, splitDuration, useCountdown } from \"./core\";\nexport { Countdown, type CountdownProps } from \"./countdown\";\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/countdown.tsx",
+    "content": "\"use client\";\n\nimport { Countdown } from \"@krizaka/ui/countdown\";\nimport { useState } from \"react\";\n\nexport default function CountdownDemo() {\n  // One hour, two minutes and three seconds from the first render.\n  const [target] = useState(() => Date.now() + 3_723_000);\n  return <Countdown target={target} units={{ d: \"d\", h: \"h\", m: \"m\", s: \"s\" }} label=\"Ends in\" />;\n}\n"
+  },
+  "props": [
+    {
+      "component": "Countdown",
+      "description": "Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under\n`urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).\nWords come from the app: `units` are the short unit labels. `role=\"timer\"` without live announcements — the app\nannounces what matters. State: `data-urgent`, `data-ended`.\n\nThe danger role is large-text safe (≥ 3:1) from `size=\"md\"`; at `size=\"sm\"` an urgent countdown in light mode is\nunder the 4.5:1 of small text.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Accessible name, e.g. \"Ends in\".",
+          "required": true
+        },
+        {
+          "name": "target",
+          "type": "string | number | Date",
+          "default": null,
+          "description": "The moment it counts down to: a Date, an ISO string or epoch milliseconds.",
+          "required": true
+        },
+        {
+          "name": "units",
+          "type": "CountdownUnits",
+          "default": null,
+          "description": "The short unit labels, passed translated.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged last, over the primitive's.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "description": "sm · md · lg (the danger role is large-text safe from `md`).",
+          "required": false
+        },
+        {
+          "name": "skewMs",
+          "type": "number",
+          "default": "0",
+          "description": "Server clock − this clock, in milliseconds.",
+          "required": false
+        },
+        {
+          "name": "urgentBelowMs",
+          "type": "number",
+          "default": "60000",
+          "description": "Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/demos/alert.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function AlertDemo(): react.JSX.Element;
+
+export { AlertDemo as default };

package/registry/demos/alert.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/demos/alert.tsx
+import { Alert } from "@krizaka/ui/alert";
+import { jsx } from "react/jsx-runtime";
+var INFO = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z" }) });
+function AlertDemo() {
+  return /* @__PURE__ */ jsx(Alert, { title: "New payout schedule", icon: INFO, children: "Payouts now arrive every Monday." });
+}
+export {
+  AlertDemo as default
+};

package/registry/demos/alert.tsx

@@ -0,0 +1,15 @@
+import { Alert } from "@krizaka/ui/alert";
+
+const INFO = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 16v-4M12 8h.01M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z" />
+  </svg>
+);
+
+export default function AlertDemo() {
+  return (
+    <Alert title="New payout schedule" icon={INFO}>
+      Payouts now arrive every Monday.
+    </Alert>
+  );
+}

package/registry/demos/avatar.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function AvatarDemo(): react.JSX.Element;
+
+export { AvatarDemo as default };

package/registry/demos/avatar.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/demos/avatar.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { jsx } from "react/jsx-runtime";
+var PORTRAIT = "data:image/svg+xml;utf8," + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/><circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>'
+);
+function AvatarDemo() {
+  return /* @__PURE__ */ jsx(Avatar, { src: PORTRAIT, alt: "Oussama", fallback: "OA" });
+}
+export {
+  AvatarDemo as default
+};

package/registry/demos/avatar.tsx

@@ -0,0 +1,13 @@
+import { Avatar } from "@krizaka/ui/avatar";
+
+// A self-contained portrait (no network).
+const PORTRAIT =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/>' +
+      '<circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>',
+  );
+
+export default function AvatarDemo() {
+  return <Avatar src={PORTRAIT} alt="Oussama" fallback="OA" />;
+}

package/registry/demos/badge.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function BadgeDemo(): react.JSX.Element;
+
+export { BadgeDemo as default };

package/registry/demos/badge.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/badge.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { jsx } from "react/jsx-runtime";
+function BadgeDemo() {
+  return /* @__PURE__ */ jsx(Badge, { children: "New" });
+}
+export {
+  BadgeDemo as default
+};

package/registry/demos/badge.tsx

@@ -0,0 +1,5 @@
+import { Badge } from "@krizaka/ui/badge";
+
+export default function BadgeDemo() {
+  return <Badge>New</Badge>;
+}

package/registry/demos/button.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function ButtonDemo(): react.JSX.Element;
+
+export { ButtonDemo as default };

package/registry/demos/button.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/button.tsx
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+function ButtonDemo() {
+  return /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Continue" });
+}
+export {
+  ButtonDemo as default
+};

package/registry/demos/button.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@krizaka/ui/button";
+
+export default function ButtonDemo() {
+  return <Button variant="primary">Continue</Button>;
+}

package/registry/demos/card.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function CardDemo(): react.JSX.Element;
+
+export { CardDemo as default };

package/registry/demos/card.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/demos/card.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { Card } from "@krizaka/ui/card";
+import { jsx, jsxs } from "react/jsx-runtime";
+var COVER = "data:image/svg+xml;utf8," + encodeURIComponent(
+  '<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"><stop offset="0" stop-color="#1e3a8a"/><stop offset="1" stop-color="#7c3aed"/></linearGradient></defs><rect width="160" height="90" fill="url(#g)"/><circle cx="118" cy="30" r="14" fill="#fde68a"/><path d="M0 90 50 44l30 28 22-18 58 36z" fill="#0f172a" opacity=".55"/></svg>'
+);
+function CardDemo() {
+  return /* @__PURE__ */ jsxs(Card.Root, { children: [
+    /* @__PURE__ */ jsxs(Card.Media, { children: [
+      /* @__PURE__ */ jsx(Card.Image, { src: COVER }),
+      /* @__PURE__ */ jsx(Card.Overlay, { children: /* @__PURE__ */ jsx(Badge, { tone: "scrim", children: "4K" }) }),
+      /* @__PURE__ */ jsx(Card.Overlay, { corner: "bottom-right", children: /* @__PURE__ */ jsx(Badge, { tone: "scrim", children: "12:04" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Card.Body, { children: [
+      /* @__PURE__ */ jsx(Card.Title, { children: "Night ride across the city" }),
+      /* @__PURE__ */ jsx(Card.Description, { children: "Ten minutes of neon, rain and empty avenues, filmed in one take." }),
+      /* @__PURE__ */ jsxs(Card.Footer, { children: [
+        /* @__PURE__ */ jsx("span", { children: "1.2k views" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: "2 days ago" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  CardDemo as default
+};

package/registry/demos/card.tsx

@@ -0,0 +1,37 @@
+import { Badge } from "@krizaka/ui/badge";
+import { Card } from "@krizaka/ui/card";
+
+// A self-contained cover (no network).
+const COVER =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    '<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">' +
+      '<stop offset="0" stop-color="#1e3a8a"/><stop offset="1" stop-color="#7c3aed"/></linearGradient></defs>' +
+      '<rect width="160" height="90" fill="url(#g)"/><circle cx="118" cy="30" r="14" fill="#fde68a"/>' +
+      '<path d="M0 90 50 44l30 28 22-18 58 36z" fill="#0f172a" opacity=".55"/></svg>',
+  );
+
+export default function CardDemo() {
+  return (
+    <Card.Root>
+      <Card.Media>
+        <Card.Image src={COVER} />
+        <Card.Overlay>
+          <Badge tone="scrim">4K</Badge>
+        </Card.Overlay>
+        <Card.Overlay corner="bottom-right">
+          <Badge tone="scrim">12:04</Badge>
+        </Card.Overlay>
+      </Card.Media>
+      <Card.Body>
+        <Card.Title>Night ride across the city</Card.Title>
+        <Card.Description>Ten minutes of neon, rain and empty avenues, filmed in one take.</Card.Description>
+        <Card.Footer>
+          <span>1.2k views</span>
+          <span aria-hidden>·</span>
+          <span>2 days ago</span>
+        </Card.Footer>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/registry/demos/checkbox.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function CheckboxDemo(): react.JSX.Element;
+
+export { CheckboxDemo as default };

package/registry/demos/checkbox.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/checkbox.tsx
+import { Checkbox } from "@krizaka/ui/checkbox";
+import { jsx } from "react/jsx-runtime";
+function CheckboxDemo() {
+  return /* @__PURE__ */ jsx(Checkbox, { children: "I accept the terms of use" });
+}
+export {
+  CheckboxDemo as default
+};

package/registry/demos/checkbox.tsx

@@ -0,0 +1,5 @@
+import { Checkbox } from "@krizaka/ui/checkbox";
+
+export default function CheckboxDemo() {
+  return <Checkbox>I accept the terms of use</Checkbox>;
+}

package/registry/demos/chip.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function ChipDemo(): react.JSX.Element;
+
+export { ChipDemo as default };

package/registry/demos/chip.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/demos/chip.tsx
+import { Chip } from "@krizaka/ui/chip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChipDemo() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx(Chip, { children: "Subtitles" }),
+    /* @__PURE__ */ jsx(Chip, { defaultSelected: true, children: "HD" }),
+    /* @__PURE__ */ jsx(Chip, { disabled: true, children: "4K" })
+  ] });
+}
+export {
+  ChipDemo as default
+};