@krizaka/ui 2.2.0 → 2.4.0

package/dist/command.d.ts

@@ -1,18 +1,18 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { Command as Command$1 } from 'cmdk';
 import * as React from 'react';
-import { D as DialogContentProps } from './dialog-GQ4Nvuyf.js';
+import { D as DialogContentProps } from './dialog-D42QwYb_.js';
 import 'radix-ui';
 
 declare const command: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
-            input?: tailwind_variants.ClassValue;
             loading?: tailwind_variants.ClassValue;
+            input?: tailwind_variants.ClassValue;
             group?: tailwind_variants.ClassValue;
             list?: tailwind_variants.ClassValue;
             separator?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             inputWrap?: tailwind_variants.ClassValue;
             empty?: tailwind_variants.ClassValue;
@@ -23,12 +23,12 @@ declare const command: tailwind_variants.TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
-            input?: tailwind_variants.ClassValue;
             loading?: tailwind_variants.ClassValue;
+            input?: tailwind_variants.ClassValue;
             group?: tailwind_variants.ClassValue;
             list?: tailwind_variants.ClassValue;
             separator?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             inputWrap?: tailwind_variants.ClassValue;
             empty?: tailwind_variants.ClassValue;
@@ -51,12 +51,12 @@ declare const command: tailwind_variants.TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
-            input?: tailwind_variants.ClassValue;
             loading?: tailwind_variants.ClassValue;
+            input?: tailwind_variants.ClassValue;
             group?: tailwind_variants.ClassValue;
             list?: tailwind_variants.ClassValue;
             separator?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             inputWrap?: tailwind_variants.ClassValue;
             empty?: tailwind_variants.ClassValue;

package/dist/command.js

@@ -1,8 +1,9 @@
 "use client";
 import {
   DialogContent
-} from "./chunk-FHYZSO2S.js";
-import "./chunk-PESA2R4U.js";
+} from "./chunk-R6SDS7JM.js";
+import "./chunk-RUPNPMP3.js";
+import "./chunk-WEVYKZIF.js";
 import {
   cn
 } from "./chunk-5AXLA4LK.js";

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

package/dist/confirm-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { B as ButtonProps } from './button-Cgfkg_3y.js';
+import { B as ButtonProps } from './button-BMAO7dKF.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-PESA2R4U.js";
+} from "./chunk-RUPNPMP3.js";
+import "./chunk-WEVYKZIF.js";
 import {
   cn
 } from "./chunk-5AXLA4LK.js";

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/data-table.d.ts

@@ -0,0 +1,246 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const dataTable: tailwind_variants.TVReturnType<{
+    layout: {
+        table: {};
+        auto: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+        cards: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+    };
+    density: {
+        comfortable: {};
+        compact: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    table: string;
+    caption: string;
+    thead: string;
+    headRow: string;
+    th: string;
+    sortButton: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    select: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}, undefined, {
+    layout: {
+        table: {};
+        auto: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+        cards: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+    };
+    density: {
+        comfortable: {};
+        compact: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    table: string;
+    caption: string;
+    thead: string;
+    headRow: string;
+    th: string;
+    sortButton: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    select: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    layout: {
+        table: {};
+        auto: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+        cards: {
+            table: string;
+            caption: string;
+            thead: string;
+            headRow: string;
+            th: string;
+            tbody: string;
+            tr: string;
+            td: string;
+            select: string;
+        };
+    };
+    density: {
+        comfortable: {};
+        compact: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    root: string;
+    scroller: string;
+    table: string;
+    caption: string;
+    thead: string;
+    headRow: string;
+    th: string;
+    sortButton: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    select: string;
+    message: string;
+    skeleton: string;
+    footer: string;
+}>>;
+type SortDirection = "ascending" | "descending";
+type DataTableSort = {
+    column: string;
+    direction: SortDirection;
+} | null;
+type Sortable = string | number | boolean | Date | null | undefined;
+type DataTableColumn<T> = {
+    /** A key of the column (and of the row, for the default cell and sort). */
+    id: string;
+    /** The column's name, passed translated: the header, and the label of the value in a card. */
+    header: string;
+    /** What a cell shows. Default: `value(row)`, or `row[id]`. */
+    cell?: (row: T) => React.ReactNode;
+    /** The value sorted on (and shown by default): a string, a number, a date. Default `row[id]`. */
+    value?: (row: T) => Sortable;
+    /** The header becomes a sort button (ascending → descending → none). */
+    sortable?: boolean;
+    /** Text alignment: `end` for amounts and counts. */
+    align?: "start" | "center" | "end";
+    /** A CSS width (`"8rem"`, `"30%"`). */
+    width?: string;
+    /** In a card: `title` (the heading of the card), `label` (default: "Header  value"), `hidden`. */
+    card?: "title" | "label" | "hidden";
+    /** Hides the header visually (an actions column), keeping it for screen readers. */
+    headerHidden?: boolean;
+};
+type DataTableLabels = {
+    /** The checkbox of the header ("Select all rows"). */
+    selectAll: string;
+    /** The checkbox of a row: `(name) => "Select " + name`, the name from `rowLabel`. */
+    selectRow: (name: string) => string;
+    /** Read while the rows load ("Loading"). */
+    loading: string;
+    /** The default empty state ("Nothing to show"). */
+    empty: string;
+};
+declare const dataTableLabels: DataTableLabels;
+type DataTableProps<T> = {
+    /** The rows, in the order the server gave (sorted here unless `manualSort`). */
+    rows: readonly T[];
+    /** The columns, in order. */
+    columns: readonly DataTableColumn<T>[];
+    /** A stable id per row: the React key and the selection's value. */
+    getRowId: (row: T) => string;
+    /** What the table lists ("Jobs", "Your videos"): its `<caption>`, hidden unless `showCaption`. */
+    caption: string;
+    /** Shows the caption above the table. */
+    showCaption?: boolean;
+    /** The sorted column (controlled), `null` for none. */
+    sort?: DataTableSort;
+    /** The sort at first, uncontrolled. */
+    defaultSort?: DataTableSort;
+    /** Called when a header asks for a new sort. */
+    onSortChange?: (sort: DataTableSort) => void;
+    /** The server sorts (`onSortChange` fetches): the rows are shown as given. */
+    manualSort?: boolean;
+    /** Adds a checkbox per row and one in the header. */
+    selectable?: boolean;
+    /** The ids selected (controlled). */
+    selected?: readonly string[];
+    /** The ids selected at first, uncontrolled. */
+    defaultSelected?: readonly string[];
+    /** Called with the new selection. */
+    onSelectedChange?: (selected: string[]) => void;
+    /** The name of a row in its checkbox's label (default: its id). */
+    rowLabel?: (row: T) => string;
+    /** Rows are loading: skeleton rows (`loadingRows` of them) and `aria-busy`. */
+    loading?: boolean;
+    /** How many skeleton rows while loading. Default 5. */
+    loadingRows?: number;
+    /** A failure, shown in place of the rows (an `Alert`, a retry button); announced. */
+    error?: React.ReactNode;
+    /** Shown when there is no row (an `EmptyState`). Default: `labels.empty`. */
+    empty?: React.ReactNode;
+    /** `auto` (default): a table, cards below 36rem of container width. `table` or `cards` to force one. */
+    layout?: "auto" | "table" | "cards";
+    /** comfortable (default) · compact. */
+    density?: "comfortable" | "compact";
+    /** Renders only the rows in view (fixed `rowHeight`, a scrolling body of `height` px). Forces the table layout. */
+    virtualize?: {
+        rowHeight: number;
+        height: number;
+        overscan?: number;
+    };
+    /** Under the table: a `Pagination`, a total. */
+    footer?: React.ReactNode;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<DataTableLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** A table of records: sort, selection, loading / empty / error, cards on a phone, windowing for long lists. */
+declare function DataTable<T>({ rows, columns, getRowId, caption, showCaption, sort: sortProp, defaultSort, onSortChange, manualSort, selectable, selected: selectedProp, defaultSelected, onSelectedChange, rowLabel, loading, loadingRows, error, empty, layout, density, virtualize, footer, labels: given, className, }: DataTableProps<T>): React.JSX.Element;
+
+export { DataTable, type DataTableColumn, type DataTableLabels, type DataTableProps, type DataTableSort, type SortDirection, dataTable, dataTableLabels };