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

package/dist/command.js

@@ -0,0 +1,111 @@
+"use client";
+import {
+  DialogContent
+} from "./chunk-3X5MVH54.js";
+import "./chunk-ZUD4U22H.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 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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { B as ButtonProps } from './button-8La7l0V4.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-ZUD4U22H.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/countdown.d.ts

@@ -20,6 +20,7 @@ type CountdownUnits = {
 declare function countdownParts(ms: number, units: CountdownUnits): [number, string][];
 
 type CountdownProps = {
+    /** The moment it counts down to: a Date, an ISO string or epoch milliseconds. */
     target: Date | string | number;
     /** Server clock − this clock, in milliseconds. */
     skewMs?: number;
@@ -27,9 +28,11 @@ type CountdownProps = {
     units: CountdownUnits;
     /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */
     urgentBelowMs?: number;
+    /** sm · md · lg (the danger role is large-text safe from `md`). */
     size?: "sm" | "md" | "lg";
     /** Accessible name, e.g. "Ends in". */
     label: string;
+    /** Classes merged last, over the primitive's. */
     className?: string;
 };
 /**

package/dist/countdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/countdown/core.ts","../src/countdown/countdown.tsx"],"sourcesContent":["// The countdown's clock, shared by the web (`@krizaka/ui/countdown`) and native renders: no DOM import.\nimport { useSyncExternalStore } from \"react\";\n\n// One clock for every countdown on the page: it ticks each second while someone listens.\nconst listeners = new Set<() => void>();\nlet timer: ReturnType<typeof setInterval> | null = null;\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  timer ??= setInterval(() => listeners.forEach((l) => l()), 1000);\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0 && timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n  };\n}\n\nconst nowSecond = () => Math.floor(Date.now() / 1000) * 1000;\n\n/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */\nexport function useCountdown(target: Date | string | number, skewMs = 0): number {\n  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);\n  return Math.max(0, new Date(target).getTime() - (now + skewMs));\n}\n\n/** Splits a duration into days, hours, minutes and seconds. */\nexport function splitDuration(ms: number): { d: number; h: number; m: number; s: number } {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\n\n/** The short unit labels, passed translated (e.g. `{ d: \"d\", h: \"h\", m: \"m\", s: \"s\" }`). */\nexport type CountdownUnits = { d: string; h: string; m: string; s: string };\n\n/** The three segments shown: days, hours, minutes when there are days; else hours, minutes, seconds. */\nexport function countdownParts(ms: number, units: CountdownUnits): [number, string][] {\n  const { d, h, m, s } = splitDuration(ms);\n  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];\n}\n","// Client: the clock is a hook.\nimport { tv } from \"tailwind-variants\";\n\nimport { countdownParts, type CountdownUnits, useCountdown } from \"./core\";\n\nconst countdown = tv({\n  slots: {\n    root: \"inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg\",\n    segment: \"inline-flex items-baseline\",\n    unit: \"ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary\",\n  },\n  variants: {\n    size: { sm: { root: \"text-sm\" }, md: { root: \"text-xl\" }, lg: { root: \"text-3xl sm:text-4xl\" } },\n    urgent: { true: { root: \"text-danger\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type CountdownProps = {\n  target: Date | string | number;\n  /** Server clock − this clock, in milliseconds. */\n  skewMs?: number;\n  /** The short unit labels, passed translated. */\n  units: CountdownUnits;\n  /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */\n  urgentBelowMs?: number;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Accessible name, e.g. \"Ends in\". */\n  label: string;\n  className?: string;\n};\n\n/**\n * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under\n * `urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).\n * Words come from the app: `units` are the short unit labels. `role=\"timer\"` without live announcements — the app\n * announces what matters. State: `data-urgent`, `data-ended`.\n *\n * The danger role is large-text safe (≥ 3:1) from `size=\"md\"`; at `size=\"sm\"` an urgent countdown in light mode is\n * under the 4.5:1 of small text.\n */\nexport function Countdown({ target, skewMs = 0, units, urgentBelowMs = 60_000, size = \"md\", label, className }: CountdownProps) {\n  const ms = useCountdown(target, skewMs);\n  const urgent = ms > 0 && ms < urgentBelowMs;\n  const parts = countdownParts(ms, units);\n  const s = countdown({ size, urgent });\n  return (\n    <span\n      role=\"timer\"\n      aria-label={label}\n      data-urgent={urgent ? \"\" : undefined}\n      data-ended={ms === 0 ? \"\" : undefined}\n      suppressHydrationWarning\n      className={s.root({ className })}\n    >\n      {parts.map(([value, unit], i) => (\n        <span key={unit} className={s.segment({ className: urgent && i === parts.length - 1 ? \"motion-safe:animate-pulse\" : undefined })}>\n          {String(value).padStart(2, \"0\")}\n          <span className={s.unit()}>{unit}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n"],"mappings":";;;AACA,SAAS,4BAA4B;AAGrC,IAAM,YAAY,oBAAI,IAAgB;AACtC,IAAI,QAA+C;AAEnD,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,YAAU,YAAY,MAAM,UAAU,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,GAAI;AAC/D,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AACzB,QAAI,UAAU,SAAS,KAAK,OAAO;AACjC,oBAAc,KAAK;AACnB,cAAQ;AAAA,IACV;AAAA,EACF;AACF;AAEA,IAAM,YAAY,MAAM,KAAK,MAAM,KAAK,IAAI,IAAI,GAAI,IAAI;AAGjD,SAAS,aAAa,QAAgC,SAAS,GAAW;AAC/E,QAAM,MAAM,qBAAqB,WAAW,WAAW,SAAS;AAChE,SAAO,KAAK,IAAI,GAAG,IAAI,KAAK,MAAM,EAAE,QAAQ,KAAK,MAAM,OAAO;AAChE;AAGO,SAAS,cAAc,IAA4D;AACxF,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,GAAI,CAAC;AAC/C,SAAO,EAAE,GAAG,KAAK,MAAM,QAAQ,KAAK,GAAG,GAAG,KAAK,MAAO,QAAQ,QAAS,IAAI,GAAG,GAAG,KAAK,MAAO,QAAQ,OAAQ,EAAE,GAAG,GAAG,QAAQ,GAAG;AAClI;AAMO,SAAS,eAAe,IAAY,OAA2C;AACpF,QAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,cAAc,EAAE;AACvC,SAAO,IAAI,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;AACvG;;;ACvCA,SAAS,UAAU;AAuDX,SAEE,KAFF;AAnDR,IAAM,YAAY,GAAG;AAAA,EACnB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,MAAM,uBAAuB,EAAE;AAAA,IAC/F,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,EAAE;AAAA,EAC1C;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAyBM,SAAS,UAAU,EAAE,QAAQ,SAAS,GAAG,OAAO,gBAAgB,KAAQ,OAAO,MAAM,OAAO,UAAU,GAAmB;AAC9H,QAAM,KAAK,aAAa,QAAQ,MAAM;AACtC,QAAM,SAAS,KAAK,KAAK,KAAK;AAC9B,QAAM,QAAQ,eAAe,IAAI,KAAK;AACtC,QAAM,IAAI,UAAU,EAAE,MAAM,OAAO,CAAC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,SAAS,KAAK;AAAA,MAC3B,cAAY,OAAO,IAAI,KAAK;AAAA,MAC5B,0BAAwB;AAAA,MACxB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAE9B,gBAAM,IAAI,CAAC,CAAC,OAAO,IAAI,GAAG,MACzB,qBAAC,UAAgB,WAAW,EAAE,QAAQ,EAAE,WAAW,UAAU,MAAM,MAAM,SAAS,IAAI,8BAA8B,OAAU,CAAC,GAC5H;AAAA,eAAO,KAAK,EAAE,SAAS,GAAG,GAAG;AAAA,QAC9B,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,WAFxB,IAGX,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/countdown/core.ts","../src/countdown/countdown.tsx"],"sourcesContent":["// The countdown's clock, shared by the web (`@krizaka/ui/countdown`) and native renders: no DOM import.\nimport { useSyncExternalStore } from \"react\";\n\n// One clock for every countdown on the page: it ticks each second while someone listens.\nconst listeners = new Set<() => void>();\nlet timer: ReturnType<typeof setInterval> | null = null;\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  timer ??= setInterval(() => listeners.forEach((l) => l()), 1000);\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0 && timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n  };\n}\n\nconst nowSecond = () => Math.floor(Date.now() / 1000) * 1000;\n\n/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */\nexport function useCountdown(target: Date | string | number, skewMs = 0): number {\n  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);\n  return Math.max(0, new Date(target).getTime() - (now + skewMs));\n}\n\n/** Splits a duration into days, hours, minutes and seconds. */\nexport function splitDuration(ms: number): { d: number; h: number; m: number; s: number } {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\n\n/** The short unit labels, passed translated (e.g. `{ d: \"d\", h: \"h\", m: \"m\", s: \"s\" }`). */\nexport type CountdownUnits = { d: string; h: string; m: string; s: string };\n\n/** The three segments shown: days, hours, minutes when there are days; else hours, minutes, seconds. */\nexport function countdownParts(ms: number, units: CountdownUnits): [number, string][] {\n  const { d, h, m, s } = splitDuration(ms);\n  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];\n}\n","// Client: the clock is a hook.\nimport { tv } from \"tailwind-variants\";\n\nimport { countdownParts, type CountdownUnits, useCountdown } from \"./core\";\n\nconst countdown = tv({\n  slots: {\n    root: \"inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg\",\n    segment: \"inline-flex items-baseline\",\n    unit: \"ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary\",\n  },\n  variants: {\n    size: { sm: { root: \"text-sm\" }, md: { root: \"text-xl\" }, lg: { root: \"text-3xl sm:text-4xl\" } },\n    urgent: { true: { root: \"text-danger\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type CountdownProps = {\n  /** The moment it counts down to: a Date, an ISO string or epoch milliseconds. */\n  target: Date | string | number;\n  /** Server clock − this clock, in milliseconds. */\n  skewMs?: number;\n  /** The short unit labels, passed translated. */\n  units: CountdownUnits;\n  /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */\n  urgentBelowMs?: number;\n  /** sm · md · lg (the danger role is large-text safe from `md`). */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Accessible name, e.g. \"Ends in\". */\n  label: string;\n  /** Classes merged last, over the primitive's. */\n  className?: string;\n};\n\n/**\n * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under\n * `urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).\n * Words come from the app: `units` are the short unit labels. `role=\"timer\"` without live announcements — the app\n * announces what matters. State: `data-urgent`, `data-ended`.\n *\n * The danger role is large-text safe (≥ 3:1) from `size=\"md\"`; at `size=\"sm\"` an urgent countdown in light mode is\n * under the 4.5:1 of small text.\n */\nexport function Countdown({ target, skewMs = 0, units, urgentBelowMs = 60_000, size = \"md\", label, className }: CountdownProps) {\n  const ms = useCountdown(target, skewMs);\n  const urgent = ms > 0 && ms < urgentBelowMs;\n  const parts = countdownParts(ms, units);\n  const s = countdown({ size, urgent });\n  return (\n    <span\n      role=\"timer\"\n      aria-label={label}\n      data-urgent={urgent ? \"\" : undefined}\n      data-ended={ms === 0 ? \"\" : undefined}\n      suppressHydrationWarning\n      className={s.root({ className })}\n    >\n      {parts.map(([value, unit], i) => (\n        <span key={unit} className={s.segment({ className: urgent && i === parts.length - 1 ? \"motion-safe:animate-pulse\" : undefined })}>\n          {String(value).padStart(2, \"0\")}\n          <span className={s.unit()}>{unit}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n"],"mappings":";;;AACA,SAAS,4BAA4B;AAGrC,IAAM,YAAY,oBAAI,IAAgB;AACtC,IAAI,QAA+C;AAEnD,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,YAAU,YAAY,MAAM,UAAU,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,GAAI;AAC/D,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AACzB,QAAI,UAAU,SAAS,KAAK,OAAO;AACjC,oBAAc,KAAK;AACnB,cAAQ;AAAA,IACV;AAAA,EACF;AACF;AAEA,IAAM,YAAY,MAAM,KAAK,MAAM,KAAK,IAAI,IAAI,GAAI,IAAI;AAGjD,SAAS,aAAa,QAAgC,SAAS,GAAW;AAC/E,QAAM,MAAM,qBAAqB,WAAW,WAAW,SAAS;AAChE,SAAO,KAAK,IAAI,GAAG,IAAI,KAAK,MAAM,EAAE,QAAQ,KAAK,MAAM,OAAO;AAChE;AAGO,SAAS,cAAc,IAA4D;AACxF,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,GAAI,CAAC;AAC/C,SAAO,EAAE,GAAG,KAAK,MAAM,QAAQ,KAAK,GAAG,GAAG,KAAK,MAAO,QAAQ,QAAS,IAAI,GAAG,GAAG,KAAK,MAAO,QAAQ,OAAQ,EAAE,GAAG,GAAG,QAAQ,GAAG;AAClI;AAMO,SAAS,eAAe,IAAY,OAA2C;AACpF,QAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,cAAc,EAAE;AACvC,SAAO,IAAI,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;AACvG;;;ACvCA,SAAS,UAAU;AA0DX,SAEE,KAFF;AAtDR,IAAM,YAAY,GAAG;AAAA,EACnB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,MAAM,uBAAuB,EAAE;AAAA,IAC/F,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,EAAE;AAAA,EAC1C;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AA4BM,SAAS,UAAU,EAAE,QAAQ,SAAS,GAAG,OAAO,gBAAgB,KAAQ,OAAO,MAAM,OAAO,UAAU,GAAmB;AAC9H,QAAM,KAAK,aAAa,QAAQ,MAAM;AACtC,QAAM,SAAS,KAAK,KAAK,KAAK;AAC9B,QAAM,QAAQ,eAAe,IAAI,KAAK;AACtC,QAAM,IAAI,UAAU,EAAE,MAAM,OAAO,CAAC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,SAAS,KAAK;AAAA,MAC3B,cAAY,OAAO,IAAI,KAAK;AAAA,MAC5B,0BAAwB;AAAA,MACxB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAE9B,gBAAM,IAAI,CAAC,CAAC,OAAO,IAAI,GAAG,MACzB,qBAAC,UAAgB,WAAW,EAAE,QAAQ,EAAE,WAAW,UAAU,MAAM,MAAM,SAAS,IAAI,8BAA8B,OAAU,CAAC,GAC5H;AAAA,eAAO,KAAK,EAAE,SAAS,GAAG,GAAG;AAAA,QAC9B,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,WAFxB,IAGX,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/dialog-GQ4Nvuyf.d.ts

@@ -0,0 +1,157 @@
+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 & {
+    /**
+     * center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height).
+     * @default "center"
+     */
+    placement?: DialogVariants["placement"];
+    /**
+     * sm · md · lg: the width of the dialog.
+     * @default "md"
+     */
+    size?: DialogVariants["size"];
+    /**
+     * `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 };

package/dist/dialog.d.ts

@@ -1,19 +1,26 @@
 import * as React from 'react';
-import * as tailwind_variants from 'tailwind-variants';
-import { VariantProps } from 'tailwind-variants';
-import { Dialog as Dialog$1 } from 'radix-ui';
+export { a as Dialog, b as DialogBody, c as DialogContent, D as DialogContentProps, d as DialogDescription, e as DialogFooter, f as DialogHeader, g as DialogTitle, h as DialogVariants, S as Sheet, i as SheetProps, j as dialog } from './dialog-GQ4Nvuyf.js';
+import 'tailwind-variants';
+import 'radix-ui';
 
 type AlertDialogProps = {
+    /** Open or closed (controlled), with `onOpenChange`. */
     open?: boolean;
+    /** Open at first, uncontrolled. */
     defaultOpen?: boolean;
+    /** Called when it opens or closes (never while `onConfirm` is pending). */
     onOpenChange?: (open: boolean) => void;
     /** The element that opens the dialog (rendered as is, `asChild`): a Button, an IconButton. */
     trigger?: React.ReactNode;
+    /** The question asked ("Delete this video?"): the dialog's accessible name. */
     title: React.ReactNode;
+    /** What the action does and what it costs: the dialog's description. */
     description?: React.ReactNode;
     /** More content between the description and the actions. */
     children?: React.ReactNode;
+    /** The words of the confirm button — passed translated. */
     confirmLabel: string;
+    /** The words of the cancel button (it takes the focus at open) — passed translated. */
     cancelLabel: string;
     /** `danger` for a destructive action (delete, leave, cancel a payment). */
     tone?: "danger" | "primary";
@@ -21,135 +28,9 @@ type AlertDialogProps = {
     onConfirm: () => void | Promise<unknown>;
     /** The element the portal renders into (default: document.body). */
     container?: HTMLElement | null;
+    /** Classes of the dialog's content, merged last. */
     className?: string;
 };
 declare function AlertDialog({ open: openProp, defaultOpen, onOpenChange, trigger, title, description, children, confirmLabel, cancelLabel, tone, onConfirm, container, className, }: AlertDialogProps): React.JSX.Element;
 
-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 DialogContentProps = React.ComponentProps<typeof Dialog$1.Content> & DialogVariants & {
-    /** The accessible name of the close button — passed translated. */
-    closeLabel: string;
-    /** 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, container, className, children, ...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;
-};
-type SheetProps = Omit<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 { AlertDialog, type AlertDialogProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, type DialogVariants, Sheet, type SheetProps, dialog };
+export { AlertDialog, type AlertDialogProps };