@krizaka/ui 3.8.0 → 3.10.0

package/dist/command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/command/command.tsx"],"sourcesContent":["// 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 * 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 [&:not(:has([cmdk-item]))]:p-0\",\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\n// Set inside `Command.List`: a listbox may only hold options and groups (axe `aria-required-children`), so the empty\n// message must live beside it, not in it.\nconst InsideList = React.createContext(false);\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   * Shown when nothing matches — passed translated. Rendered after the listbox, never inside it: an empty listbox is\n   * valid, a listbox holding text is not.\n   */\n  emptyLabel?: React.ReactNode;\n};\n\nexport function CommandList({ className, emptyLabel, children, ...props }: CommandListProps) {\n  return (\n    <>\n      <CommandPrimitive.List className={s.list({ className })} {...props}>\n        <InsideList.Provider value>{children}</InsideList.Provider>\n      </CommandPrimitive.List>\n      {emptyLabel === undefined ? null : <CommandEmpty emptyLabel={emptyLabel} />}\n    </>\n  );\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/**\n * Shown by cmdk only when no item matches. Place it beside `Command.List` (or pass `emptyLabel` to the list), never\n * inside it: inside, it is rendered as before but warns in development — the listbox then holds text, which axe\n * refuses (`aria-required-children`).\n */\nexport function CommandEmpty({ className, emptyLabel, ...props }: CommandEmptyProps) {\n  const inside = React.useContext(InsideList);\n  React.useEffect(() => {\n    if (inside && typeof process !== \"undefined\" && process.env.NODE_ENV !== \"production\") {\n      console.warn(\"@krizaka/ui/command: <Command.Empty> inside <Command.List> breaks the listbox (axe aria-required-children). Pass `emptyLabel` to <Command.List> instead.\");\n    }\n  }, [inside]);\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"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/command/command.tsx"],"sourcesContent":["// 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 * 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 [&:not(:has([cmdk-item]))]:p-0\",\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\n// Set inside `Command.List`: a listbox may only hold options and groups (axe `aria-required-children`), so the empty\n// message must live beside it, not in it.\nconst InsideList = React.createContext(false);\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   * Shown when nothing matches — passed translated. Rendered after the listbox, never inside it: an empty listbox is\n   * valid, a listbox holding text is not.\n   */\n  emptyLabel?: React.ReactNode;\n};\n\nexport function CommandList({ className, emptyLabel, children, ...props }: CommandListProps) {\n  return (\n    <>\n      <CommandPrimitive.List className={s.list({ className })} {...props}>\n        <InsideList.Provider value>{children}</InsideList.Provider>\n      </CommandPrimitive.List>\n      {emptyLabel === undefined ? null : <CommandEmpty emptyLabel={emptyLabel} />}\n    </>\n  );\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/**\n * Shown by cmdk only when no item matches. Place it beside `Command.List` (or pass `emptyLabel` to the list), never\n * inside it: inside, it is rendered as before but warns in development — the listbox then holds text, which axe\n * refuses (`aria-required-children`).\n */\nexport function CommandEmpty({ className, emptyLabel, ...props }: CommandEmptyProps) {\n  const inside = React.useContext(InsideList);\n  React.useEffect(() => {\n    if (inside && typeof process !== \"undefined\" && process.env.NODE_ENV !== \"production\") {\n      console.warn(\"@krizaka/ui/command: <Command.Empty> inside <Command.List> breaks the listbox (axe aria-required-children). Pass `emptyLabel` to <Command.List> instead.\");\n    }\n  }, [inside]);\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"],"mappings":";;;;;;;;;;;;AAGA,SAAS,WAAW,wBAAwB;AAC5C,SAAS,UAAU,uBAAuB;AAC1C,YAAY,WAAW;AACvB,SAAS,UAAU;AA8Bf,SAmDA,UAlDE,KADF;AAzBG,IAAM,UAAU,GAAG;AAAA,EACxB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OACE;AAAA,IAEF,MACE;AAAA,IAGF,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AACF,CAAC;AACD,IAAM,IAAI,QAAQ;AAElB,SAAS,WAAW,EAAE,UAAU,GAA2B;AACzD,SACE,qBAAC,SAAI,SAAQ,aAAY,WAAsB,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACvJ;AAAA,wBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,IAC9B,oBAAC,UAAK,GAAE,kBAAiB;AAAA,KAC3B;AAEJ;AAQO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AACrE,SAAO,oBAAC,oBAAiB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACxE;AAUO,SAAS,aAAa,EAAE,WAAW,aAAa,UAAU,GAAG,MAAM,GAAsB;AAC9F,SACE,qBAAC,SAAI,WAAW,EAAE,UAAU,GAAG,sBAAmB,IAChD;AAAA,wBAAC,cAAW,WAAW,EAAE,KAAK,GAAG;AAAA,IACjC,oBAAC,iBAAiB,OAAjB,EAAuB,aAA0B,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,IAC/F;AAAA,KACH;AAEJ;AAIA,IAAM,aAAmB,oBAAc,KAAK;AAYrC,SAAS,YAAY,EAAE,WAAW,YAAY,UAAU,GAAG,MAAM,GAAqB;AAC3F,SACE,iCACE;AAAA,wBAAC,iBAAiB,MAAjB,EAAsB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC3D,8BAAC,WAAW,UAAX,EAAoB,OAAK,MAAE,UAAS,GACvC;AAAA,IACC,eAAe,SAAY,OAAO,oBAAC,gBAAa,YAAwB;AAAA,KAC3E;AAEJ;AAYO,SAAS,aAAa,EAAE,WAAW,YAAY,GAAG,MAAM,GAAsB;AACnF,QAAM,SAAe,iBAAW,UAAU;AAC1C,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,cAAc;AACrF,cAAQ,KAAK,0JAA0J;AAAA,IACzK;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACX,SACE,oBAAC,iBAAiB,OAAjB,EAAuB,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D,sBACH;AAEJ;AAGO,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA0D;AAC7G,SAAO,oBAAC,iBAAiB,SAAjB,EAAyB,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACnF;AAGO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAwD;AACzG,SAAO,oBAAC,iBAAiB,OAAjB,EAAuB,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC/E;AAGO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,iBAAiB,MAAjB,EAAsB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC7E;AAGO,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACrF,SAAO,oBAAC,SAAI,MAAK,QAAO,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC5E;AAGO,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAiC;AACrF,SAAO,oBAAC,UAAK,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChE;AAGO,IAAM,UAAU;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AACZ;AAmBO,SAAS,cAAc,EAAE,MAAM,aAAa,cAAc,QAAQ,cAAc,OAAO,WAAW,UAAU,GAAG,MAAM,GAAuB;AACjJ,QAAM,EAAE,WAAW,kBAAkB,GAAG,QAAQ,IAAI,gBAAgB,CAAC;AACrE,SACE,oBAAC,gBAAgB,MAAhB,EAAqB,MAAY,aAA0B,cAC1D;AAAA,IAAC;AAAA;AAAA,MACC,WAAS;AAAA,MACT,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,WAAW,GAAG,4CAA4C,gBAAgB;AAAA,MACzE,GAAG;AAAA,MAEJ;AAAA,4BAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAW,iBAAM;AAAA,QAClD,oBAAC,eAAY,OAAc,WAAuB,GAAG,OAClD,UACH;AAAA,QACC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/component-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component-page/component-page.tsx"],"sourcesContent":["// Server-safe. The page of one component of a design system (what krizaka.com/docs/ui draws from the registry): its\n// name, summary, status and platforms; the live preview with its code; installation; when to use it and when not; its\n// examples; its props; its accessibility — the facts in a side column that goes under the content on a phone.\nimport { CodeBlock } from \"@krizaka/ui/code-block\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\nimport { type Fact, Facts, Section } from \"@krizaka/ui/page\";\nimport type * as React from \"react\";\n\nexport interface ComponentPageSection {\n  /** The section's anchor. */\n  id: string;\n  /** Its title (`When to use`, `Props`). */\n  title: React.ReactNode;\n  /** Its content (lists, a props table, examples). */\n  children: React.ReactNode;\n}\n\nexport type ComponentPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back to the catalogue (your router's link). */\n  back?: React.ReactNode;\n  /** The category (`Blocks`, `Forms`). */\n  eyebrow?: React.ReactNode;\n  /** The component's name: the `h1`. */\n  title: React.ReactNode;\n  /** Its summary, in one sentence. */\n  summary: React.ReactNode;\n  /** Its status and platforms. */\n  facts?: readonly Fact[];\n  /** The live preview of its first example (a framed stage with its code). */\n  preview: React.ReactNode;\n  /** The line to install or import it, and the copy words. */\n  install?: { code: string; language?: string; copyLabel: string; copiedLabel: string; file?: React.ReactNode };\n  /** The sections, in reading order: when to use / not, examples, props, accessibility. */\n  sections: readonly ComponentPageSection[];\n  /** The side column: related components, source, the version. */\n  aside?: React.ReactNode;\n};\n\n/** A component's page: name, summary, facts, live preview, install, then its sections; facts and related aside. */\nexport function ComponentPage({ back, eyebrow, title, summary, facts, preview, install, sections, aside, ...props }: ComponentPageProps) {\n  return (\n    <DetailLayout back={back} eyebrow={eyebrow} title={title} meta={<span>{summary}</span>} aside={aside} {...props}>\n      {facts && facts.length > 0 && <Facts items={facts} />}\n      <div className=\"kz-tpl-stage\">{preview}</div>\n      {install && <CodeBlock code={install.code} language={install.language ?? \"bash\"} file={install.file} copyLabel={install.copyLabel} copiedLabel={install.copiedLabel} />}\n      <div className=\"kz-tpl-flush\">\n        {sections.map((s) => (\n          <Section key={s.id} id={s.id} title={s.title} headingSize=\"sm\" spacing=\"sm\" size=\"full\" divider>\n            {s.children}\n          </Section>\n        ))}\n      </div>\n    </DetailLayout>\n  );\n}\n"],"mappings":";AAGA,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAoB,OAAO,eAAe;AAoCtC,SAAgE,KAAhE;AAFG,SAAS,cAAc,EAAE,MAAM,SAAS,OAAO,SAAS,OAAO,SAAS,SAAS,UAAU,OAAO,GAAG,MAAM,GAAuB;AACvI,SACE,qBAAC,gBAAa,MAAY,SAAkB,OAAc,MAAM,oBAAC,UAAM,mBAAQ,GAAS,OAAe,GAAG,OACvG;AAAA,aAAS,MAAM,SAAS,KAAK,oBAAC,SAAM,OAAO,OAAO;AAAA,IACnD,oBAAC,SAAI,WAAU,gBAAgB,mBAAQ;AAAA,IACtC,WAAW,oBAAC,aAAU,MAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,QAAQ,MAAM,QAAQ,MAAM,WAAW,QAAQ,WAAW,aAAa,QAAQ,aAAa;AAAA,IACrK,oBAAC,SAAI,WAAU,gBACZ,mBAAS,IAAI,CAAC,MACb,oBAAC,WAAmB,IAAI,EAAE,IAAI,OAAO,EAAE,OAAO,aAAY,MAAK,SAAQ,MAAK,MAAK,QAAO,SAAO,MAC5F,YAAE,YADS,EAAE,EAEhB,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/component-page/component-page.tsx"],"sourcesContent":["// Server-safe. The page of one component of a design system (what ui.krizaka.com draws from the registry): its\n// name, summary, status and platforms; the live preview with its code; installation; when to use it and when not; its\n// examples; its props; its accessibility — the facts in a side column that goes under the content on a phone.\nimport { CodeBlock } from \"@krizaka/ui/code-block\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\nimport { type Fact, Facts, Section } from \"@krizaka/ui/page\";\nimport type * as React from \"react\";\n\nexport interface ComponentPageSection {\n  /** The section's anchor. */\n  id: string;\n  /** Its title (`When to use`, `Props`). */\n  title: React.ReactNode;\n  /** Its content (lists, a props table, examples). */\n  children: React.ReactNode;\n}\n\nexport type ComponentPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back to the catalogue (your router's link). */\n  back?: React.ReactNode;\n  /** The category (`Blocks`, `Forms`). */\n  eyebrow?: React.ReactNode;\n  /** The component's name: the `h1`. */\n  title: React.ReactNode;\n  /** Its summary, in one sentence. */\n  summary: React.ReactNode;\n  /** Its status and platforms. */\n  facts?: readonly Fact[];\n  /** The live preview of its first example (a framed stage with its code). */\n  preview: React.ReactNode;\n  /** The line to install or import it, and the copy words. */\n  install?: { code: string; language?: string; copyLabel: string; copiedLabel: string; file?: React.ReactNode };\n  /** The sections, in reading order: when to use / not, examples, props, accessibility. */\n  sections: readonly ComponentPageSection[];\n  /** The side column: related components, source, the version. */\n  aside?: React.ReactNode;\n};\n\n/** A component's page: name, summary, facts, live preview, install, then its sections; facts and related aside. */\nexport function ComponentPage({ back, eyebrow, title, summary, facts, preview, install, sections, aside, ...props }: ComponentPageProps) {\n  return (\n    <DetailLayout back={back} eyebrow={eyebrow} title={title} meta={<span>{summary}</span>} aside={aside} {...props}>\n      {facts && facts.length > 0 && <Facts items={facts} />}\n      <div className=\"kz-tpl-stage\">{preview}</div>\n      {install && <CodeBlock code={install.code} language={install.language ?? \"bash\"} file={install.file} copyLabel={install.copyLabel} copiedLabel={install.copiedLabel} />}\n      <div className=\"kz-tpl-flush\">\n        {sections.map((s) => (\n          <Section key={s.id} id={s.id} title={s.title} headingSize=\"sm\" spacing=\"sm\" size=\"full\" divider>\n            {s.children}\n          </Section>\n        ))}\n      </div>\n    </DetailLayout>\n  );\n}\n"],"mappings":";AAGA,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAoB,OAAO,eAAe;AAoCtC,SAAgE,KAAhE;AAFG,SAAS,cAAc,EAAE,MAAM,SAAS,OAAO,SAAS,OAAO,SAAS,SAAS,UAAU,OAAO,GAAG,MAAM,GAAuB;AACvI,SACE,qBAAC,gBAAa,MAAY,SAAkB,OAAc,MAAM,oBAAC,UAAM,mBAAQ,GAAS,OAAe,GAAG,OACvG;AAAA,aAAS,MAAM,SAAS,KAAK,oBAAC,SAAM,OAAO,OAAO;AAAA,IACnD,oBAAC,SAAI,WAAU,gBAAgB,mBAAQ;AAAA,IACtC,WAAW,oBAAC,aAAU,MAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,QAAQ,MAAM,QAAQ,MAAM,WAAW,QAAQ,WAAW,aAAa,QAAQ,aAAa;AAAA,IACrK,oBAAC,SAAI,WAAU,gBACZ,mBAAS,IAAI,CAAC,MACb,oBAAC,WAAmB,IAAI,EAAE,IAAI,OAAO,EAAE,OAAO,aAAY,MAAK,SAAQ,MAAK,MAAK,QAAO,SAAO,MAC5F,YAAE,YADS,EAAE,EAEhB,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/confirm-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { B as ButtonProps } from './button-BMAO7dKF.js';
+import { B as ButtonProps } from './button-BmCrLCq7.js';
 import 'tailwind-variants';
 
 declare const confirmArmed = "border border-danger bg-danger/20 text-fg hover:border-danger hover:bg-danger/30";

package/dist/confirm-button.js

@@ -1,7 +1,8 @@
 "use client";
 import {
   Button
-} from "./chunk-RUPNPMP3.js";
+} from "./chunk-OWC2LZD2.js";
+import "./chunk-D3T54RSL.js";
 import "./chunk-WEVYKZIF.js";
 import {
   cn

package/dist/confirm-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/confirm-button/confirm-button.tsx"],"sourcesContent":["// 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"],"mappings":";;;;;;;;;;AAIA,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAmFT,mBAEE,KAFF;AA9EP,IAAM,eAAe;AAkBrB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,OAAO,aAAa,IAAU,eAAS,KAAK;AACnD,QAAM,WAAiB,aAAO,KAAK;AACnC,QAAM,mBAAyB,aAAO,aAAa;AACnD,EAAM,gBAAU,MAAM;AACpB,qBAAiB,UAAU;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAClB,QAAM,WAAiB,kBAAY,CAAC,SAAkB;AACpD,QAAI,SAAS,YAAY,KAAM;AAC/B,aAAS,UAAU;AACnB,kBAAc,IAAI;AAClB,qBAAiB,UAAU,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AACL,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,MAAO;AACZ,UAAM,QAAQ,OAAO,WAAW,MAAM,SAAS,KAAK,GAAG,SAAS;AAChE,WAAO,MAAM,OAAO,aAAa,KAAK;AAAA,EACxC,GAAG,CAAC,OAAO,WAAW,QAAQ,CAAC;AAC/B,QAAM,OAAO,QAAQ,eAAe;AACpC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,OAAO;AAAA,QACP,cAAY,QAAQ,KAAK;AAAA,QACzB,WAAW,GAAG,SAAS,cAAc,SAAS;AAAA,QAC9C,SAAS,MAAM;AACb,cAAI,CAAC,MAAO,QAAO,SAAS,IAAI;AAChC,mBAAS,KAAK;AACd,oBAAU;AAAA,QACZ;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,mBAAS,KAAK;AACd,mBAAS,KAAK;AAAA,QAChB;AAAA,QACA,WAAW,CAAC,UAAU;AACpB,sBAAY,KAAK;AACjB,cAAI,SAAS,MAAM,QAAQ,UAAU;AACnC,kBAAM,gBAAgB;AACtB,qBAAS,KAAK;AAAA,UAChB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,kBACI,gBACC,iCACG;AAAA;AAAA,UACD,oBAAC,UAAM,wBAAa;AAAA,WACtB,IAEF;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,eAAe,MAAf,EAAoB,aAAU,UAAU,kBAAQ,eAAe,IAAG;AAAA,KACrE;AAEJ;","names":[]}
+{"version":3,"sources":["../src/confirm-button/confirm-button.tsx"],"sourcesContent":["// 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"],"mappings":";;;;;;;;;;;AAIA,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAmFT,mBAEE,KAFF;AA9EP,IAAM,eAAe;AAkBrB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,OAAO,aAAa,IAAU,eAAS,KAAK;AACnD,QAAM,WAAiB,aAAO,KAAK;AACnC,QAAM,mBAAyB,aAAO,aAAa;AACnD,EAAM,gBAAU,MAAM;AACpB,qBAAiB,UAAU;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAClB,QAAM,WAAiB,kBAAY,CAAC,SAAkB;AACpD,QAAI,SAAS,YAAY,KAAM;AAC/B,aAAS,UAAU;AACnB,kBAAc,IAAI;AAClB,qBAAiB,UAAU,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AACL,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,MAAO;AACZ,UAAM,QAAQ,OAAO,WAAW,MAAM,SAAS,KAAK,GAAG,SAAS;AAChE,WAAO,MAAM,OAAO,aAAa,KAAK;AAAA,EACxC,GAAG,CAAC,OAAO,WAAW,QAAQ,CAAC;AAC/B,QAAM,OAAO,QAAQ,eAAe;AACpC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,OAAO;AAAA,QACP,cAAY,QAAQ,KAAK;AAAA,QACzB,WAAW,GAAG,SAAS,cAAc,SAAS;AAAA,QAC9C,SAAS,MAAM;AACb,cAAI,CAAC,MAAO,QAAO,SAAS,IAAI;AAChC,mBAAS,KAAK;AACd,oBAAU;AAAA,QACZ;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,mBAAS,KAAK;AACd,mBAAS,KAAK;AAAA,QAChB;AAAA,QACA,WAAW,CAAC,UAAU;AACpB,sBAAY,KAAK;AACjB,cAAI,SAAS,MAAM,QAAQ,UAAU;AACnC,kBAAM,gBAAgB;AACtB,qBAAS,KAAK;AAAA,UAChB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,kBACI,gBACC,iCACG;AAAA;AAAA,UACD,oBAAC,UAAM,wBAAa;AAAA,WACtB,IAEF;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,eAAe,MAAf,EAAoB,aAAU,UAAU,kBAAQ,eAAe,IAAG;AAAA,KACrE;AAEJ;","names":[]}

package/dist/continue-prompt.js

@@ -35,9 +35,13 @@ function LoaderGlyph({ state = "loading", value, ...props }) {
   ] });
 }
 
-// src/button/button.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var buttonVariants = tv({
+// src/recipes/define.ts
+function defineRecipe(config) {
+  return config;
+}
+
+// src/button/recipe.ts
+var buttonRecipe = defineRecipe({
   base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
   variants: {
     variant: {
@@ -58,6 +62,10 @@ var buttonVariants = tv({
   },
   defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
 });
+
+// src/button/button.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants = tv(buttonRecipe);
 var STATUS_TEXT = { success: "text-fg-success", error: "text-fg-danger" };
 function Button({
   asChild,

package/dist/continue-prompt.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/button/button.tsx","../src/spinner/glyph.tsx","../src/continue-prompt/continue-prompt.tsx"],"sourcesContent":["// 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\nimport { LoaderGlyph } from \"../spinner/glyph\";\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    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\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-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\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    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the\n    // focus ring and the hover follow the cut, unlike a clip-path.\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\", cut: \"rounded-[10px] [corner-shape:bevel]\" },\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), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `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 · cut (45° corners, the Krizaka chamfer).\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    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** A sheen of light crosses the button on hover — for the one action a page is about. */\n    shimmer?: boolean;\n    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer,\n  magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      data-kz-magnetic={magnetic ? \"\" : undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: [known && \"relative isolate overflow-hidden\", shimmer && \"kz-sheen\", className].filter(Boolean).join(\" \") || undefined,\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={[\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph]].filter(Boolean).join(\" \")} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\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. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n","// The Krizaka loader glyph, server-safe: a hexagon (the marks' shape) traced by a segment of light around a node that\n// breathes; determinate, it fills to its value; done, the trace closes and a check (or a cross) draws itself. Animated by\n// motion.css (`kz-loader-*`); still under prefers-reduced-motion — a segment at rest and the node lit, never blank.\nimport type * as React from \"react\";\n\n/** The hexagon, pointy top, radius 9 around (12, 12). */\nconst HEX = \"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\";\n\n/** What the glyph shows: a wait (with an optional value), or how it ended. */\nexport type LoaderGlyphState = \"loading\" | \"success\" | \"error\";\n\nexport interface LoaderGlyphProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** loading · success · error. */\n  state?: LoaderGlyphState;\n  /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */\n  value?: number | null;\n}\n\n/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */\nexport function LoaderGlyph({ state = \"loading\", value, ...props }: LoaderGlyphProps) {\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const fill = state !== \"loading\" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden data-state={state} data-progress={fill === null ? undefined : fill} {...props}>\n      <path d={HEX} stroke=\"currentColor\" strokeOpacity=\"0.22\" strokeWidth=\"2.2\" strokeLinejoin=\"round\" />\n      <path\n        d={HEX}\n        pathLength={100}\n        stroke=\"currentColor\"\n        strokeWidth=\"2.2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        className=\"kz-loader-trace\"\n        strokeDasharray={fill === null ? undefined : `${fill} ${100 - fill}`}\n      />\n      {state === \"loading\" && <circle cx=\"12\" cy=\"12\" r=\"2.6\" fill=\"currentColor\" className=\"kz-loader-node\" />}\n      {state === \"success\" && <path d=\"M8.3 12.3l2.6 2.6 4.9-5.3\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"kz-loader-mark\" />}\n      {state === \"error\" && <path d=\"M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" className=\"kz-loader-mark\" />}\n    </svg>\n  );\n}\n","// Server-safe. The last call of a page or a flow (story.css): a short question, a figure that counts (days, seats,\n// seconds), what to say before leaving, and the one action that continues — “Keep your studio? · 3 days left”.\nimport type * as React from \"react\";\n\nimport { Button } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type ContinuePromptProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** The question (“Keep your studio?”, arcade “Continue?”). */\n  title: React.ReactNode;\n  /** What counts, beside the question: a figure, or a live `Countdown` for a real deadline. Decorative: say it in words too. */\n  count?: React.ReactNode;\n  /**\n   * A count that ticks down once when its scene plays (`{ from: 9, to: 7 }`), then waits; still under reduced motion.\n   * Use `count` for anything else.\n   */\n  countdown?: { readonly from: number; readonly to: number };\n  /** Inside the screen, under the question: a heading, a line, links — the closing call itself. */\n  children?: React.ReactNode;\n  /** The action's words. */\n  actionLabel: React.ReactNode;\n  /** Runs the action (a client handler). Without `href`, the action is a `button`. */\n  onAction?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Makes the action a link. */\n  href?: string;\n  /** A key-cap before the action's words (“Enter”, arcade “1P Start”). Decorative. */\n  actionKey?: React.ReactNode;\n  /** The action's glyph after its words; default an arrow. Decorative. */\n  actionIcon?: React.ReactNode;\n  /** A small line at the top of the card (where it comes from). */\n  caption?: React.ReactNode;\n  /** In the deck, in the accent: the call (“Last places”, arcade “Insert coin”). */\n  highlight?: React.ReactNode;\n  /** Beside the highlight: how (“One click, no card”). */\n  hint?: React.ReactNode;\n  /** A status with a green dot (“All features on”, “Credit 01”). */\n  status?: React.ReactNode;\n  /**\n   * `default`: a calm card. `arcade`: the cabinet — screws, a dark CRT that switches on, a coin deck.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`krizaka` → `.brand-krizaka`). */\n  brand?: string;\n};\n\nconst Arrow = () => (\n  <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"M5 12h14M13 6l6 6-6 6\" />\n  </svg>\n);\n\n/** One countdown's keyframes, named by its range: the digit steps from `from` to `to`, once. */\nfunction countdownCss(from: number, to: number) {\n  const steps = Math.max(1, Math.abs(from - to));\n  const frames = Array.from({ length: steps + 1 }, (_, i) => {\n    const n = from > to ? from - i : from + i;\n    return `${Math.round((i / steps) * 100)}% { content: \"${n}\"; }`;\n  }).join(\" \");\n  return `@keyframes kzs-count-${from}-${to} { ${frames} }\n@media (prefers-reduced-motion: no-preference) {\n  [data-in] .kzs-prompt-count[data-from=\"${from}\"][data-to=\"${to}\"] { color: transparent; }\n  [data-in] .kzs-prompt-count[data-from=\"${from}\"][data-to=\"${to}\"]::after { content: \"${to}\"; animation: kzs-count-${from}-${to} ${steps}s steps(1) 1s both; }\n}`;\n}\n\n/** A last call: a question, what counts, the closing words, the one action that continues — a `button`, or a link. */\nexport function ContinuePrompt({\n  title,\n  count,\n  countdown,\n  children,\n  actionLabel,\n  onAction,\n  href,\n  actionKey,\n  actionIcon,\n  caption,\n  highlight,\n  hint,\n  status,\n  variant,\n  brand,\n  className,\n  ...props\n}: ContinuePromptProps) {\n  const arcade = variant === \"arcade\";\n  const inner = (\n    <>\n      {actionKey && (\n        <span className=\"kzs-prompt-key\" aria-hidden>\n          {actionKey}\n        </span>\n      )}\n      {actionLabel}\n      <span className=\"kzs-prompt-icon\" aria-hidden>\n        {actionIcon ?? <Arrow />}\n      </span>\n    </>\n  );\n  const button = { variant: arcade ? (\"secondary\" as const) : (\"primary\" as const), size: \"md\" as const, shape: arcade ? (\"cut\" as const) : undefined, className: \"kzs-prompt-action\" };\n  return (\n    <div data-kzs-scene=\"\" className={cn(\"kzs-prompt\", storyVariantClass(variant), brandClass(brand), className)} {...props}>\n      {countdown && <style>{countdownCss(countdown.from, countdown.to)}</style>}\n      {(caption || arcade) && (\n        <div className=\"kzs-prompt-top\">\n          <span className=\"kzs-prompt-screw\" aria-hidden />\n          {caption && <span>{caption}</span>}\n          <span className=\"kzs-prompt-screw\" aria-hidden />\n        </div>\n      )}\n      <div className={cn(\"kzs-prompt-screen\", arcade && \"theme-dark\", brandClass(brand))}>\n        <span className=\"kzs-texture\" aria-hidden />\n        <span className=\"kzs-scan kzs-loop\" aria-hidden />\n        <span className=\"kzs-prompt-glass\" aria-hidden />\n        <div className=\"kzs-prompt-content\">\n          <div className=\"kzs-prompt-head\">\n            <span className=\"kzs-prompt-title\">{title}</span>\n            {countdown ? (\n              <span className=\"kzs-prompt-count\" data-from={countdown.from} data-to={countdown.to} aria-hidden>\n                {countdown.from}\n              </span>\n            ) : (\n              count !== undefined && (\n                <span className=\"kzs-prompt-count\" aria-hidden>\n                  {count}\n                </span>\n              )\n            )}\n          </div>\n          {children}\n        </div>\n      </div>\n      <div className=\"kzs-prompt-deck\">\n        {(highlight || hint || status) && (\n          <div className=\"kzs-prompt-coin\">\n            {highlight && <span className=\"kzs-prompt-highlight\">{highlight}</span>}\n            {hint && <span className=\"kzs-prompt-hint\">{hint}</span>}\n            {status && (\n              <span className=\"kzs-prompt-status\">\n                <span className=\"kzs-prompt-led\" aria-hidden />\n                {status}\n              </span>\n            )}\n          </div>\n        )}\n        {href ? (\n          <Button asChild {...button}>\n            <a href={href}>{inner}</a>\n          </Button>\n        ) : (\n          <Button type=\"button\" onClick={onAction} {...button}>\n            {inner}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","Fragment","jsx","jsxs"]}
+{"version":3,"sources":["../src/button/button.tsx","../src/spinner/glyph.tsx","../src/recipes/define.ts","../src/button/recipe.ts","../src/continue-prompt/continue-prompt.tsx"],"sourcesContent":["// 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\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `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 · cut (45° corners, the Krizaka chamfer).\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    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** A sheen of light crosses the button on hover — for the one action a page is about. */\n    shimmer?: boolean;\n    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer,\n  magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      data-kz-magnetic={magnetic ? \"\" : undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: [known && \"relative isolate overflow-hidden\", shimmer && \"kz-sheen\", className].filter(Boolean).join(\" \") || undefined,\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={[\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph]].filter(Boolean).join(\" \")} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\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. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n","// The Krizaka loader glyph, server-safe: a hexagon (the marks' shape) traced by a segment of light around a node that\n// breathes; determinate, it fills to its value; done, the trace closes and a check (or a cross) draws itself. Animated by\n// motion.css (`kz-loader-*`); still under prefers-reduced-motion — a segment at rest and the node lit, never blank.\nimport type * as React from \"react\";\n\n/** The hexagon, pointy top, radius 9 around (12, 12). */\nconst HEX = \"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\";\n\n/** What the glyph shows: a wait (with an optional value), or how it ended. */\nexport type LoaderGlyphState = \"loading\" | \"success\" | \"error\";\n\nexport interface LoaderGlyphProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** loading · success · error. */\n  state?: LoaderGlyphState;\n  /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */\n  value?: number | null;\n}\n\n/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */\nexport function LoaderGlyph({ state = \"loading\", value, ...props }: LoaderGlyphProps) {\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const fill = state !== \"loading\" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden data-state={state} data-progress={fill === null ? undefined : fill} {...props}>\n      <path d={HEX} stroke=\"currentColor\" strokeOpacity=\"0.22\" strokeWidth=\"2.2\" strokeLinejoin=\"round\" />\n      <path\n        d={HEX}\n        pathLength={100}\n        stroke=\"currentColor\"\n        strokeWidth=\"2.2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        className=\"kz-loader-trace\"\n        strokeDasharray={fill === null ? undefined : `${fill} ${100 - fill}`}\n      />\n      {state === \"loading\" && <circle cx=\"12\" cy=\"12\" r=\"2.6\" fill=\"currentColor\" className=\"kz-loader-node\" />}\n      {state === \"success\" && <path d=\"M8.3 12.3l2.6 2.6 4.9-5.3\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"kz-loader-mark\" />}\n      {state === \"error\" && <path d=\"M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" className=\"kz-loader-mark\" />}\n    </svg>\n  );\n}\n","import type { TV } from \"tailwind-variants\";\n\n/** What a recipe is made of: the `tv()` options — `base`, `slots`, `variants`, `defaultVariants`, `compoundVariants`. */\nexport type RecipeConfig = Parameters<TV>[0];\n\n/**\n * A recipe is data: the variants of a component (a `variant`, a `size`, a `tone`…) as classes of the Krizaka tokens.\n * `defineRecipe` only keeps the literal types, so `tv(recipe)` is typed exactly as `tv({ … })` would be (the web side) and\n * `nativeRecipe(recipe)` reads the same classes into styles on the theme's roles (the native side, `./native`).\n *\n * Sizes are a variant dimension (`size: { sm: \"h-8 px-3 text-xs\" }`); states are the prefixes (`hover:`, `disabled:`,\n * `data-[state=on]:`). Write colours as roles (`bg-accent`, `text-fg-secondary`, `border-border-default`, `ring-accent/40`),\n * spacing as Tailwind units (`h-10`, `px-4`), type as `text-sm` / `text-[11px]` / `font-semibold`.\n */\nexport function defineRecipe<const C extends RecipeConfig>(config: C): C {\n  return config;\n}\n","// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\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    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\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-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\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    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the\n    // focus ring and the hover follow the cut, unlike a clip-path.\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\", cut: \"rounded-[10px] [corner-shape:bevel]\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n","// Server-safe. The last call of a page or a flow (story.css): a short question, a figure that counts (days, seats,\n// seconds), what to say before leaving, and the one action that continues — “Keep your studio? · 3 days left”.\nimport type * as React from \"react\";\n\nimport { Button } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type ContinuePromptProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** The question (“Keep your studio?”, arcade “Continue?”). */\n  title: React.ReactNode;\n  /** What counts, beside the question: a figure, or a live `Countdown` for a real deadline. Decorative: say it in words too. */\n  count?: React.ReactNode;\n  /**\n   * A count that ticks down once when its scene plays (`{ from: 9, to: 7 }`), then waits; still under reduced motion.\n   * Use `count` for anything else.\n   */\n  countdown?: { readonly from: number; readonly to: number };\n  /** Inside the screen, under the question: a heading, a line, links — the closing call itself. */\n  children?: React.ReactNode;\n  /** The action's words. */\n  actionLabel: React.ReactNode;\n  /** Runs the action (a client handler). Without `href`, the action is a `button`. */\n  onAction?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Makes the action a link. */\n  href?: string;\n  /** A key-cap before the action's words (“Enter”, arcade “1P Start”). Decorative. */\n  actionKey?: React.ReactNode;\n  /** The action's glyph after its words; default an arrow. Decorative. */\n  actionIcon?: React.ReactNode;\n  /** A small line at the top of the card (where it comes from). */\n  caption?: React.ReactNode;\n  /** In the deck, in the accent: the call (“Last places”, arcade “Insert coin”). */\n  highlight?: React.ReactNode;\n  /** Beside the highlight: how (“One click, no card”). */\n  hint?: React.ReactNode;\n  /** A status with a green dot (“All features on”, “Credit 01”). */\n  status?: React.ReactNode;\n  /**\n   * `default`: a calm card. `arcade`: the cabinet — screws, a dark CRT that switches on, a coin deck.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`krizaka` → `.brand-krizaka`). */\n  brand?: string;\n};\n\nconst Arrow = () => (\n  <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"M5 12h14M13 6l6 6-6 6\" />\n  </svg>\n);\n\n/** One countdown's keyframes, named by its range: the digit steps from `from` to `to`, once. */\nfunction countdownCss(from: number, to: number) {\n  const steps = Math.max(1, Math.abs(from - to));\n  const frames = Array.from({ length: steps + 1 }, (_, i) => {\n    const n = from > to ? from - i : from + i;\n    return `${Math.round((i / steps) * 100)}% { content: \"${n}\"; }`;\n  }).join(\" \");\n  return `@keyframes kzs-count-${from}-${to} { ${frames} }\n@media (prefers-reduced-motion: no-preference) {\n  [data-in] .kzs-prompt-count[data-from=\"${from}\"][data-to=\"${to}\"] { color: transparent; }\n  [data-in] .kzs-prompt-count[data-from=\"${from}\"][data-to=\"${to}\"]::after { content: \"${to}\"; animation: kzs-count-${from}-${to} ${steps}s steps(1) 1s both; }\n}`;\n}\n\n/** A last call: a question, what counts, the closing words, the one action that continues — a `button`, or a link. */\nexport function ContinuePrompt({\n  title,\n  count,\n  countdown,\n  children,\n  actionLabel,\n  onAction,\n  href,\n  actionKey,\n  actionIcon,\n  caption,\n  highlight,\n  hint,\n  status,\n  variant,\n  brand,\n  className,\n  ...props\n}: ContinuePromptProps) {\n  const arcade = variant === \"arcade\";\n  const inner = (\n    <>\n      {actionKey && (\n        <span className=\"kzs-prompt-key\" aria-hidden>\n          {actionKey}\n        </span>\n      )}\n      {actionLabel}\n      <span className=\"kzs-prompt-icon\" aria-hidden>\n        {actionIcon ?? <Arrow />}\n      </span>\n    </>\n  );\n  const button = { variant: arcade ? (\"secondary\" as const) : (\"primary\" as const), size: \"md\" as const, shape: arcade ? (\"cut\" as const) : undefined, className: \"kzs-prompt-action\" };\n  return (\n    <div data-kzs-scene=\"\" className={cn(\"kzs-prompt\", storyVariantClass(variant), brandClass(brand), className)} {...props}>\n      {countdown && <style>{countdownCss(countdown.from, countdown.to)}</style>}\n      {(caption || arcade) && (\n        <div className=\"kzs-prompt-top\">\n          <span className=\"kzs-prompt-screw\" aria-hidden />\n          {caption && <span>{caption}</span>}\n          <span className=\"kzs-prompt-screw\" aria-hidden />\n        </div>\n      )}\n      <div className={cn(\"kzs-prompt-screen\", arcade && \"theme-dark\", brandClass(brand))}>\n        <span className=\"kzs-texture\" aria-hidden />\n        <span className=\"kzs-scan kzs-loop\" aria-hidden />\n        <span className=\"kzs-prompt-glass\" aria-hidden />\n        <div className=\"kzs-prompt-content\">\n          <div className=\"kzs-prompt-head\">\n            <span className=\"kzs-prompt-title\">{title}</span>\n            {countdown ? (\n              <span className=\"kzs-prompt-count\" data-from={countdown.from} data-to={countdown.to} aria-hidden>\n                {countdown.from}\n              </span>\n            ) : (\n              count !== undefined && (\n                <span className=\"kzs-prompt-count\" aria-hidden>\n                  {count}\n                </span>\n              )\n            )}\n          </div>\n          {children}\n        </div>\n      </div>\n      <div className=\"kzs-prompt-deck\">\n        {(highlight || hint || status) && (\n          <div className=\"kzs-prompt-coin\">\n            {highlight && <span className=\"kzs-prompt-highlight\">{highlight}</span>}\n            {hint && <span className=\"kzs-prompt-hint\">{hint}</span>}\n            {status && (\n              <span className=\"kzs-prompt-status\">\n                <span className=\"kzs-prompt-led\" aria-hidden />\n                {status}\n              </span>\n            )}\n          </div>\n        )}\n        {href ? (\n          <Button asChild {...button}>\n            <a href={href}>{inner}</a>\n          </Button>\n        ) : (\n          <Button type=\"button\" onClick={onAction} {...button}>\n            {inner}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","Fragment","jsx","jsxs"]}

package/dist/data-table.js

@@ -2,29 +2,30 @@
 import "./chunk-JXLDUDTD.js";
 import {
   Button
-} from "./chunk-UOMP6VOZ.js";
+} from "./chunk-276PTQMQ.js";
 import {
   Checkbox
 } from "./chunk-7Z4KHPFC.js";
 import {
   useLayoutFallbacks,
   useVirtualizer
-} from "./chunk-HCNOOPZE.js";
+} from "./chunk-KVDB4GXV.js";
 import {
   DropdownMenu,
   FilterBar,
   FilterMenu
-} from "./chunk-ZKVQGXLD.js";
-import "./chunk-YH4LMWRU.js";
+} from "./chunk-FKBHWS4N.js";
+import "./chunk-7UCPGXKN.js";
+import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";
 import {
   SearchField
-} from "./chunk-FDCMBWUU.js";
+} from "./chunk-REPTKUJ6.js";
 import "./chunk-ZIXB33X7.js";
 import "./chunk-2FRWNSRO.js";
 import {
   useControllable
-} from "./chunk-BRKMQ6JV.js";
+} from "./chunk-FZBWEDQI.js";
 import {
   ChevronGlyph,
   SortGlyph