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

package/dist/command.d.ts

@@ -0,0 +1,156 @@
+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-DGBY2grk.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;
+            group?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            inputWrap?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            icon?: tailwind_variants.ClassValue;
+            input?: tailwind_variants.ClassValue;
+            loading?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            inputWrap?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    inputWrap: string;
+    icon: string;
+    input: string;
+    list: string;
+    empty: string;
+    loading: string;
+    group: string;
+    item: string;
+    separator: string;
+    shortcut: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            icon?: tailwind_variants.ClassValue;
+            input?: tailwind_variants.ClassValue;
+            loading?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            inputWrap?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    inputWrap: string;
+    icon: string;
+    input: string;
+    list: string;
+    empty: string;
+    loading: string;
+    group: string;
+    item: string;
+    separator: string;
+    shortcut: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    inputWrap: string;
+    icon: string;
+    input: string;
+    list: string;
+    empty: string;
+    loading: string;
+    group: string;
+    item: string;
+    separator: string;
+    shortcut: string;
+}>>;
+type CommandRootProps = React.ComponentProps<typeof Command$1> & {
+    /** The accessible name of the palette — passed translated ("Search", "Commands"). */
+    label: string;
+};
+/** The palette: `value` / `onValueChange` (the active item), `shouldFilter`, `filter`, `loop`. */
+declare function CommandRoot({ className, ...props }: CommandRootProps): React.JSX.Element;
+type CommandInputProps = Omit<React.ComponentProps<typeof Command$1.Input>, "placeholder"> & {
+    /** What to type — passed translated. The input is named by the palette's `label`. */
+    placeholder: string;
+    /** After the input, inside the bar: a spinner, a clear button. */
+    trailing?: React.ReactNode;
+};
+/** The search field (`value` / `onValueChange` for the query), with a magnifier. */
+declare function CommandInput({ className, placeholder, trailing, ...props }: CommandInputProps): React.JSX.Element;
+type CommandListProps = React.ComponentProps<typeof Command$1.List> & {
+    /** The accessible name of the list of results — passed translated ("Suggestions", "Results"). */
+    label: string;
+};
+declare function CommandList({ className, ...props }: CommandListProps): React.JSX.Element;
+type CommandEmptyProps = Omit<React.ComponentProps<typeof Command$1.Empty>, "children"> & {
+    /** Shown when nothing matches — passed translated. */
+    emptyLabel: React.ReactNode;
+};
+/** Shown by cmdk only when no item matches. */
+declare function CommandEmpty({ className, emptyLabel, ...props }: CommandEmptyProps): React.JSX.Element;
+/** While results load (`label` is announced). */
+declare function CommandLoading({ className, ...props }: React.ComponentProps<typeof Command$1.Loading>): React.JSX.Element;
+/** A group of items under a `heading`. */
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command$1.Group>): React.JSX.Element;
+/** An option: `onSelect` on Enter or click, `value` and `keywords` for the filter, `disabled`. */
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof Command$1.Item>): React.JSX.Element;
+/** A line between groups. Decorative (`role="none"`): cmdk's own separator is a role a listbox may not hold (axe). */
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** A keyboard hint at the end of an item. */
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/** `Command.Root/Input/List/Empty/Loading/Group/Item/Separator/Shortcut`. */
+declare const Command: {
+    Root: typeof CommandRoot;
+    Input: typeof CommandInput;
+    List: typeof CommandList;
+    Empty: typeof CommandEmpty;
+    Loading: typeof CommandLoading;
+    Group: typeof CommandGroup;
+    Item: typeof CommandItem;
+    Separator: typeof CommandSeparator;
+    Shortcut: typeof CommandShortcut;
+};
+type CommandDialogProps = Omit<CommandRootProps, "title"> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Under the palette, inside the dialog: shortcuts, a "see all results" link. */
+    footer?: React.ReactNode;
+    /** Passed to `Dialog.Content`: `size`, `container`, `className` of the dialog. */
+    contentProps?: Omit<Extract<DialogContentProps, {
+        hideClose: true;
+    }>, "hideClose" | "children" | "placement">;
+};
+/**
+ * The palette in a dialog (Radix: focus trap, Escape, focus return). The dialog is named by `label`; it has no close
+ * button — Escape and a click outside close it — and the input takes the focus when it opens.
+ */
+declare function CommandDialog({ open, defaultOpen, onOpenChange, footer, contentProps, label, className, children, ...props }: CommandDialogProps): React.JSX.Element;
+
+export { Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, CommandInput, type CommandInputProps, CommandItem, CommandList, type CommandListProps, CommandLoading, CommandRoot, type CommandRootProps, CommandSeparator, CommandShortcut, command };

package/dist/command.js

@@ -0,0 +1,111 @@
+"use client";
+import {
+  DialogContent
+} from "./chunk-5FRYKFTO.js";
+import "./chunk-QRG5RYEI.js";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/command/command.tsx
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var command = tv({
+  slots: {
+    root: "flex h-full w-full flex-col overflow-hidden bg-surface-1 text-fg",
+    inputWrap: "flex items-center gap-3 border-b border-border-default px-4",
+    icon: "h-5 w-5 shrink-0 text-fg-secondary",
+    input: "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",
+    list: "max-h-[min(60dvh,26rem)] scroll-py-2 overflow-y-auto overscroll-contain p-2",
+    empty: "px-3 py-8 text-center text-sm text-fg-secondary",
+    loading: "px-3 py-6 text-center text-sm text-fg-secondary",
+    group: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:pt-3 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-fg-secondary",
+    item: "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 before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-transparent data-[selected=true]:bg-surface-2 data-[selected=true]:before:bg-accent data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40",
+    separator: "-mx-2 my-1 h-px bg-border-subtle",
+    shortcut: "ml-auto text-xs tracking-widest text-fg-secondary"
+  }
+});
+var s = command();
+function SearchIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })
+  ] });
+}
+function CommandRoot({ className, ...props }) {
+  return /* @__PURE__ */ jsx(CommandPrimitive, { className: s.root({ className }), ...props });
+}
+function CommandInput({ className, placeholder, trailing, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: s.inputWrap(), "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ jsx(SearchIcon, { className: s.icon() }),
+    /* @__PURE__ */ jsx(CommandPrimitive.Input, { placeholder, className: s.input({ className }), ...props }),
+    trailing
+  ] });
+}
+function CommandList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(CommandPrimitive.List, { className: s.list({ className }), ...props });
+}
+function CommandEmpty({ className, emptyLabel, ...props }) {
+  return /* @__PURE__ */ jsx(CommandPrimitive.Empty, { className: s.empty({ className }), ...props, children: emptyLabel });
+}
+function CommandLoading({ className, ...props }) {
+  return /* @__PURE__ */ jsx(CommandPrimitive.Loading, { className: s.loading({ className }), ...props });
+}
+function CommandGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(CommandPrimitive.Group, { className: s.group({ className }), ...props });
+}
+function CommandItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(CommandPrimitive.Item, { className: s.item({ className }), ...props });
+}
+function CommandSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { role: "none", className: s.separator({ className }), ...props });
+}
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: s.shortcut({ className }), ...props });
+}
+var Command = {
+  Root: CommandRoot,
+  Input: CommandInput,
+  List: CommandList,
+  Empty: CommandEmpty,
+  Loading: CommandLoading,
+  Group: CommandGroup,
+  Item: CommandItem,
+  Separator: CommandSeparator,
+  Shortcut: CommandShortcut
+};
+function CommandDialog({ open, defaultOpen, onOpenChange, footer, contentProps, label, className, children, ...props }) {
+  const { className: contentClassName, ...content } = contentProps ?? {};
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      hideClose: true,
+      size: "lg",
+      "aria-describedby": void 0,
+      className: cn("top-[12dvh] translate-y-0 sm:top-[14dvh]", contentClassName),
+      ...content,
+      children: [
+        /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx(CommandRoot, { label, className, ...props, children }),
+        footer
+      ]
+    }
+  ) });
+}
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandLoading,
+  CommandRoot,
+  CommandSeparator,
+  CommandShortcut,
+  command
+};
+//# sourceMappingURL=command.js.map

package/dist/command.js.map

@@ -0,0 +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 type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { DialogContent, type DialogContentProps } from \"../dialog/dialog\";\n\nexport const command = tv({\n  slots: {\n    root: \"flex h-full w-full flex-col overflow-hidden bg-surface-1 text-fg\",\n    inputWrap: \"flex items-center gap-3 border-b border-border-default px-4\",\n    icon: \"h-5 w-5 shrink-0 text-fg-secondary\",\n    input:\n      \"h-13 w-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:text-base\",\n    list: \"max-h-[min(60dvh,26rem)] scroll-py-2 overflow-y-auto overscroll-contain p-2\",\n    empty: \"px-3 py-8 text-center text-sm text-fg-secondary\",\n    loading: \"px-3 py-6 text-center text-sm text-fg-secondary\",\n    group:\n      \"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:pt-3 [&_[cmdk-group-heading]]:text-xs \" +\n      \"[&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-fg-secondary\",\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-fg outline-hidden transition-colors \" +\n      \"before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-transparent \" +\n      \"data-[selected=true]:bg-surface-2 data-[selected=true]:before:bg-accent data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40\",\n    separator: \"-mx-2 my-1 h-px bg-border-subtle\",\n    shortcut: \"ml-auto text-xs tracking-widest text-fg-secondary\",\n  },\n});\nconst s = command();\n\nfunction SearchIcon({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"m20 20-3.5-3.5\" />\n    </svg>\n  );\n}\n\nexport type CommandRootProps = React.ComponentProps<typeof CommandPrimitive> & {\n  /** The accessible name of the palette — passed translated (\"Search\", \"Commands\"). */\n  label: string;\n};\n\n/** The palette: `value` / `onValueChange` (the active item), `shouldFilter`, `filter`, `loop`. */\nexport function CommandRoot({ className, ...props }: CommandRootProps) {\n  return <CommandPrimitive className={s.root({ className })} {...props} />;\n}\n\nexport type CommandInputProps = Omit<React.ComponentProps<typeof CommandPrimitive.Input>, \"placeholder\"> & {\n  /** What to type — passed translated. The input is named by the palette's `label`. */\n  placeholder: string;\n  /** After the input, inside the bar: a spinner, a clear button. */\n  trailing?: React.ReactNode;\n};\n\n/** The search field (`value` / `onValueChange` for the query), with a magnifier. */\nexport function CommandInput({ className, placeholder, trailing, ...props }: CommandInputProps) {\n  return (\n    <div className={s.inputWrap()} cmdk-input-wrapper=\"\">\n      <SearchIcon className={s.icon()} />\n      <CommandPrimitive.Input placeholder={placeholder} className={s.input({ className })} {...props} />\n      {trailing}\n    </div>\n  );\n}\n\nexport type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List> & {\n  /** The accessible name of the list of results — passed translated (\"Suggestions\", \"Results\"). */\n  label: string;\n};\n\nexport function CommandList({ className, ...props }: CommandListProps) {\n  return <CommandPrimitive.List className={s.list({ className })} {...props} />;\n}\n\nexport type CommandEmptyProps = Omit<React.ComponentProps<typeof CommandPrimitive.Empty>, \"children\"> & {\n  /** Shown when nothing matches — passed translated. */\n  emptyLabel: React.ReactNode;\n};\n\n/** Shown by cmdk only when no item matches. */\nexport function CommandEmpty({ className, emptyLabel, ...props }: CommandEmptyProps) {\n  return (\n    <CommandPrimitive.Empty className={s.empty({ className })} {...props}>\n      {emptyLabel}\n    </CommandPrimitive.Empty>\n  );\n}\n\n/** While results load (`label` is announced). */\nexport function CommandLoading({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Loading>) {\n  return <CommandPrimitive.Loading className={s.loading({ className })} {...props} />;\n}\n\n/** A group of items under a `heading`. */\nexport function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return <CommandPrimitive.Group className={s.group({ className })} {...props} />;\n}\n\n/** An option: `onSelect` on Enter or click, `value` and `keywords` for the filter, `disabled`. */\nexport function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return <CommandPrimitive.Item className={s.item({ className })} {...props} />;\n}\n\n/** A line between groups. Decorative (`role=\"none\"`): cmdk's own separator is a role a listbox may not hold (axe). */\nexport function CommandSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div role=\"none\" className={s.separator({ className })} {...props} />;\n}\n\n/** A keyboard hint at the end of an item. */\nexport function CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span className={s.shortcut({ className })} {...props} />;\n}\n\n/** `Command.Root/Input/List/Empty/Loading/Group/Item/Separator/Shortcut`. */\nexport const Command = {\n  Root: CommandRoot,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Loading: CommandLoading,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Separator: CommandSeparator,\n  Shortcut: CommandShortcut,\n};\n\nexport type CommandDialogProps = Omit<CommandRootProps, \"title\"> & {\n  open?: boolean;\n  defaultOpen?: boolean;\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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { B as ButtonProps } from './button-G5qY4qSY.js';
+import 'tailwind-variants';
+
+declare const confirmArmed = "border border-danger bg-danger/20 text-fg hover:border-danger hover:bg-danger/30";
+type ConfirmButtonProps = Omit<ButtonProps, "onClick" | "asChild"> & {
+    /** What the second press does, in words — shown and announced once armed ("Delete for good?"). Passed translated. */
+    confirmLabel: string;
+    /** The accessible name while idle, for an icon-only button (the confirm label names it once armed). */
+    label?: string;
+    /** Runs on the second press. */
+    onConfirm: () => void;
+    /** Disarms after this many milliseconds (4000 by default). */
+    timeoutMs?: number;
+    /** What it shows once armed (default: its children, then `confirmLabel`). */
+    armedContent?: React.ReactNode;
+    /** Notified when it arms and disarms. */
+    onArmedChange?: (armed: boolean) => void;
+};
+/** A two-step button: press to arm, press again within `timeoutMs` to confirm. State: `data-armed`. */
+declare function ConfirmButton({ confirmLabel, label, onConfirm, timeoutMs, onArmedChange, armedContent, variant, className, children, onBlur, onKeyDown, ...props }: ConfirmButtonProps): React.JSX.Element;
+
+export { ConfirmButton, type ConfirmButtonProps, confirmArmed };

package/dist/confirm-button.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  Button
+} from "./chunk-QRG5RYEI.js";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/confirm-button/confirm-button.tsx
+import { VisuallyHidden } from "radix-ui";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var confirmArmed = "border border-danger bg-danger/20 text-fg hover:border-danger hover:bg-danger/30";
+function ConfirmButton({
+  confirmLabel,
+  label,
+  onConfirm,
+  timeoutMs = 4e3,
+  onArmedChange,
+  armedContent,
+  variant = "ghost",
+  className,
+  children,
+  onBlur,
+  onKeyDown,
+  ...props
+}) {
+  const [armed, setArmedState] = React.useState(false);
+  const armedRef = React.useRef(false);
+  const onArmedChangeRef = React.useRef(onArmedChange);
+  React.useEffect(() => {
+    onArmedChangeRef.current = onArmedChange;
+  }, [onArmedChange]);
+  const setArmed = React.useCallback((next) => {
+    if (armedRef.current === next) return;
+    armedRef.current = next;
+    setArmedState(next);
+    onArmedChangeRef.current?.(next);
+  }, []);
+  React.useEffect(() => {
+    if (!armed) return;
+    const timer = window.setTimeout(() => setArmed(false), timeoutMs);
+    return () => window.clearTimeout(timer);
+  }, [armed, timeoutMs, setArmed]);
+  const name = armed ? confirmLabel : label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant,
+        "aria-label": name,
+        title: name,
+        "data-armed": armed ? "" : void 0,
+        className: cn(armed && confirmArmed, className),
+        onClick: () => {
+          if (!armed) return setArmed(true);
+          setArmed(false);
+          onConfirm();
+        },
+        onBlur: (event) => {
+          onBlur?.(event);
+          setArmed(false);
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (armed && event.key === "Escape") {
+            event.stopPropagation();
+            setArmed(false);
+          }
+        },
+        ...props,
+        children: armed ? armedContent ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          /* @__PURE__ */ jsx("span", { children: confirmLabel })
+        ] }) : children
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden.Root, { "aria-live": "polite", children: armed ? confirmLabel : "" })
+  ] });
+}
+export {
+  ConfirmButton,
+  confirmArmed
+};
+//# sourceMappingURL=confirm-button.js.map

package/dist/confirm-button.js.map

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

package/dist/dialog-DGBY2grk.d.ts

@@ -0,0 +1,147 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import { Dialog as Dialog$1 } from 'radix-ui';
+import * as React from 'react';
+
+declare const dialog: tailwind_variants.TVReturnType<{
+    placement: {
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    placement: {
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    placement: {
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}>>;
+type DialogVariants = VariantProps<typeof dialog>;
+type CloseButtonProps = {
+    /** The accessible name of the close button — passed translated. */
+    closeLabel: string;
+    /** Leaves the close button out (the content brings its own way out, or none: see `dismissible`). */
+    hideClose?: false;
+} | {
+    closeLabel?: string;
+    hideClose: true;
+};
+type DialogContentProps = React.ComponentProps<typeof Dialog$1.Content> & DialogVariants & CloseButtonProps & {
+    /**
+     * `false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes
+     * through `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.
+     */
+    dismissible?: boolean;
+    /** The element the portal renders into (default: document.body). */
+    container?: HTMLElement | null;
+};
+/** The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`. */
+declare function DialogContent({ placement, size, closeLabel, hideClose, dismissible, container, className, children, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog$1.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof Dialog$1.Description>): React.JSX.Element;
+declare function DialogBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close`. `open`/`defaultOpen` + `onOpenChange`. */
+declare const Dialog: {
+    Root: React.FC<Dialog$1.DialogProps>;
+    Trigger: React.ForwardRefExoticComponent<Dialog$1.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Close: React.ForwardRefExoticComponent<Dialog$1.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: typeof DialogContent;
+    Header: typeof DialogHeader;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+};
+/** `Omit` that keeps the close-button union (`closeLabel` required unless `hideClose`). */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+type SheetProps = DistributiveOmit<DialogContentProps, "placement">;
+/** A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement="bottom"`. */
+declare function Sheet(props: SheetProps): React.JSX.Element;
+
+export { type DialogContentProps as D, Sheet as S, Dialog as a, DialogBody as b, DialogContent as c, DialogDescription as d, DialogFooter as e, DialogHeader as f, DialogTitle as g, type DialogVariants as h, type SheetProps as i, dialog as j };