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

package/dist/dialog.d.ts

@@ -1,7 +1,7 @@
 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-DGBY2grk.js';
+import 'tailwind-variants';
+import 'radix-ui';
 
 type AlertDialogProps = {
     open?: boolean;
@@ -25,131 +25,4 @@ type AlertDialogProps = {
 };
 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 };

package/dist/dialog.js

@@ -1,88 +1,24 @@
 "use client";
 import {
-  Button,
-  IconButton
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Sheet,
+  dialog
+} from "./chunk-5FRYKFTO.js";
+import {
+  Button
 } from "./chunk-QRG5RYEI.js";
 
 // src/dialog/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import * as React from "react";
-
-// src/dialog/dialog.tsx
-import { Dialog as DialogPrimitive } from "radix-ui";
-import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
-var dialog = tv({
-  slots: {
-    overlay: "kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs",
-    content: "kz-dialog fixed z-50 flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg shadow-lg focus:outline-hidden",
-    close: "absolute right-3 top-3 h-9 w-9",
-    header: "flex flex-col gap-1 px-5 pb-2 pr-14 pt-5",
-    title: "text-base font-bold text-fg",
-    description: "text-sm text-fg-secondary",
-    body: "min-h-0 flex-1 overflow-y-auto px-5 pb-5",
-    footer: "flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle px-5 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]"
-  },
-  variants: {
-    placement: {
-      center: { content: "left-1/2 top-1/2 max-h-[85dvh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl" },
-      /* A sheet: anchored at the bottom on a phone, centred from `sm` up. */
-      bottom: {
-        content: "inset-x-0 bottom-0 max-h-[92dvh] rounded-t-[1.75rem] sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:w-full sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-[1.75rem]"
-      },
-      right: { content: "inset-y-0 right-0 h-full w-full max-w-md rounded-none border-y-0 border-r-0" }
-    },
-    size: { sm: { content: "sm:max-w-sm" }, md: { content: "sm:max-w-md" }, lg: { content: "sm:max-w-2xl" } }
-  },
-  defaultVariants: { placement: "center", size: "md" }
-});
-var s = dialog();
-function CloseIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
-}
-function DialogContent({ placement, size, closeLabel, container, className, children, ...props }) {
-  const v = dialog({ placement, size });
-  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container, children: [
-    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: v.overlay() }),
-    /* @__PURE__ */ jsxs(DialogPrimitive.Content, { "data-placement": placement ?? "center", className: v.content({ className }), ...props, children: [
-      children,
-      /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { label: closeLabel, variant: "ghost", shape: "pill", className: v.close(), children: /* @__PURE__ */ jsx(CloseIcon, {}) }) })
-    ] })
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: s.header({ className }), ...props });
-}
-function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: s.title({ className }), ...props });
-}
-function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: s.description({ className }), ...props });
-}
-function DialogBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: s.body({ className }), ...props });
-}
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: s.footer({ className }), ...props });
-}
-var Dialog = {
-  Root: DialogPrimitive.Root,
-  Trigger: DialogPrimitive.Trigger,
-  Close: DialogPrimitive.Close,
-  Content: DialogContent,
-  Header: DialogHeader,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Body: DialogBody,
-  Footer: DialogFooter
-};
-function Sheet(props) {
-  return /* @__PURE__ */ jsx(DialogContent, { placement: "bottom", ...props });
-}
-
-// src/dialog/alert-dialog.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var s2 = dialog({ placement: "center", size: "sm" });
+var s = dialog({ placement: "center", size: "sm" });
 function AlertDialog({
   open: openProp,
   defaultOpen = false,
@@ -115,26 +51,26 @@ function AlertDialog({
       setPending(false);
     }
   };
-  return /* @__PURE__ */ jsxs2(AlertDialogPrimitive.Root, { open, onOpenChange: (next) => pending ? void 0 : setOpen(next), children: [
-    trigger && /* @__PURE__ */ jsx2(AlertDialogPrimitive.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs2(AlertDialogPrimitive.Portal, { container, children: [
-      /* @__PURE__ */ jsx2(AlertDialogPrimitive.Overlay, { className: s2.overlay() }),
-      /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Root, { open, onOpenChange: (next) => pending ? void 0 : setOpen(next), children: [
+    trigger && /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { container, children: [
+      /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, { className: s.overlay() }),
+      /* @__PURE__ */ jsxs(
         AlertDialogPrimitive.Content,
         {
           "data-tone": tone,
           "aria-busy": pending || void 0,
-          className: s2.content({ className }),
+          className: s.content({ className }),
           onEscapeKeyDown: (event) => pending && event.preventDefault(),
           children: [
-            /* @__PURE__ */ jsxs2("div", { className: s2.header({ className: "pr-5" }), children: [
-              /* @__PURE__ */ jsx2(AlertDialogPrimitive.Title, { className: s2.title(), children: title }),
-              description && /* @__PURE__ */ jsx2(AlertDialogPrimitive.Description, { className: s2.description(), children: description })
+            /* @__PURE__ */ jsxs("div", { className: s.header({ className: "pr-5" }), children: [
+              /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { className: s.title(), children: title }),
+              description && /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { className: s.description(), children: description })
             ] }),
-            children && /* @__PURE__ */ jsx2("div", { className: s2.body(), children }),
-            /* @__PURE__ */ jsxs2("div", { className: s2.footer(), children: [
-              /* @__PURE__ */ jsx2(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { variant: "ghost", disabled: pending, children: cancelLabel }) }),
-              /* @__PURE__ */ jsx2(Button, { variant: tone === "danger" ? "danger" : "primary", loading: pending, onClick: confirm, children: confirmLabel })
+            children && /* @__PURE__ */ jsx("div", { className: s.body(), children }),
+            /* @__PURE__ */ jsxs("div", { className: s.footer(), children: [
+              /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: pending, children: cancelLabel }) }),
+              /* @__PURE__ */ jsx(Button, { variant: tone === "danger" ? "danger" : "primary", loading: pending, onClick: confirm, children: confirmLabel })
             ] })
           ]
         }

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dialog/alert-dialog.tsx","../src/dialog/dialog.tsx"],"sourcesContent":["// Client. A confirmation that interrupts: Radix AlertDialog (role=\"alertdialog\", no outside click, focus on Cancel).\n// `onConfirm` may be async: the dialog stays open with the confirm button loading until it settles, closes when it\n// resolves, and stays open when it rejects (the product shows the error).\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Button } from \"../button/button\";\nimport { dialog } from \"./dialog\";\n\nconst s = dialog({ placement: \"center\", size: \"sm\" });\n\nexport type AlertDialogProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The element that opens the dialog (rendered as is, `asChild`): a Button, an IconButton. */\n  trigger?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** More content between the description and the actions. */\n  children?: React.ReactNode;\n  confirmLabel: string;\n  cancelLabel: string;\n  /** `danger` for a destructive action (delete, leave, cancel a payment). */\n  tone?: \"danger\" | \"primary\";\n  /** Runs on confirm. A promise keeps the dialog open and the button loading until it settles. */\n  onConfirm: () => void | Promise<unknown>;\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n  className?: string;\n};\n\nexport function AlertDialog({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  description,\n  children,\n  confirmLabel,\n  cancelLabel,\n  tone = \"primary\",\n  onConfirm,\n  container,\n  className,\n}: AlertDialogProps) {\n  const [openState, setOpenState] = React.useState(defaultOpen);\n  const [pending, setPending] = React.useState(false);\n  const open = openProp ?? openState;\n\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const confirm = async () => {\n    setPending(true);\n    try {\n      await onConfirm();\n      setOpen(false);\n    } catch {\n      // Stays open: the product reports the failure (a toast, an inline error) and the person may retry.\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <AlertDialogPrimitive.Root open={open} onOpenChange={(next) => (pending ? undefined : setOpen(next))}>\n      {trigger && <AlertDialogPrimitive.Trigger asChild>{trigger}</AlertDialogPrimitive.Trigger>}\n      <AlertDialogPrimitive.Portal container={container}>\n        <AlertDialogPrimitive.Overlay className={s.overlay()} />\n        <AlertDialogPrimitive.Content\n          data-tone={tone}\n          aria-busy={pending || undefined}\n          className={s.content({ className })}\n          onEscapeKeyDown={(event) => pending && event.preventDefault()}\n        >\n          <div className={s.header({ className: \"pr-5\" })}>\n            <AlertDialogPrimitive.Title className={s.title()}>{title}</AlertDialogPrimitive.Title>\n            {description && <AlertDialogPrimitive.Description className={s.description()}>{description}</AlertDialogPrimitive.Description>}\n          </div>\n          {children && <div className={s.body()}>{children}</div>}\n          <div className={s.footer()}>\n            <AlertDialogPrimitive.Cancel asChild>\n              <Button variant=\"ghost\" disabled={pending}>\n                {cancelLabel}\n              </Button>\n            </AlertDialogPrimitive.Cancel>\n            <Button variant={tone === \"danger\" ? \"danger\" : \"primary\"} loading={pending} onClick={confirm}>\n              {confirmLabel}\n            </Button>\n          </div>\n        </AlertDialogPrimitive.Content>\n      </AlertDialogPrimitive.Portal>\n    </AlertDialogPrimitive.Root>\n  );\n}\n","// Client (a portal). Radix does the focus trap, the scroll lock, Escape, the outside click, aria-modal, the\n// aria-labelledby / aria-describedby wiring and the focus return: this file only holds the shape.\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { IconButton } from \"../button/button\";\n\nexport const dialog = tv({\n  slots: {\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    content:\n      \"kz-dialog fixed z-50 flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg shadow-lg focus:outline-hidden\",\n    close: \"absolute right-3 top-3 h-9 w-9\",\n    header: \"flex flex-col gap-1 px-5 pb-2 pr-14 pt-5\",\n    title: \"text-base font-bold text-fg\",\n    description: \"text-sm text-fg-secondary\",\n    body: \"min-h-0 flex-1 overflow-y-auto px-5 pb-5\",\n    footer:\n      \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle px-5 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]\",\n  },\n  variants: {\n    placement: {\n      center: { content: \"left-1/2 top-1/2 max-h-[85dvh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl\" },\n      /* A sheet: anchored at the bottom on a phone, centred from `sm` up. */\n      bottom: {\n        content:\n          \"inset-x-0 bottom-0 max-h-[92dvh] rounded-t-[1.75rem] sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:w-full \" +\n          \"sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-[1.75rem]\",\n      },\n      right: { content: \"inset-y-0 right-0 h-full w-full max-w-md rounded-none border-y-0 border-r-0\" },\n    },\n    size: { sm: { content: \"sm:max-w-sm\" }, md: { content: \"sm:max-w-md\" }, lg: { content: \"sm:max-w-2xl\" } },\n  },\n  defaultVariants: { placement: \"center\", size: \"md\" },\n});\nconst s = dialog();\n\nexport type DialogVariants = VariantProps<typeof dialog>;\n\nfunction CloseIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\nexport type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> &\n  DialogVariants & {\n    /** The accessible name of the close button — passed translated. */\n    closeLabel: string;\n    /** The element the portal renders into (default: document.body). */\n    container?: HTMLElement | null;\n  };\n\n/** The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`. */\nexport function DialogContent({ placement, size, closeLabel, container, className, children, ...props }: DialogContentProps) {\n  const v = dialog({ placement, size });\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <DialogPrimitive.Overlay className={v.overlay()} />\n      <DialogPrimitive.Content data-placement={placement ?? \"center\"} className={v.content({ className })} {...props}>\n        {children}\n        <DialogPrimitive.Close asChild>\n          <IconButton label={closeLabel} variant=\"ghost\" shape=\"pill\" className={v.close()}>\n            <CloseIcon />\n          </IconButton>\n        </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\nexport function DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.header({ className })} {...props} />;\n}\n\nexport function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return <DialogPrimitive.Title className={s.title({ className })} {...props} />;\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return <DialogPrimitive.Description className={s.description({ className })} {...props} />;\n}\n\nexport function DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.footer({ className })} {...props} />;\n}\n\n/** `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const Dialog = {\n  Root: DialogPrimitive.Root,\n  Trigger: DialogPrimitive.Trigger,\n  Close: DialogPrimitive.Close,\n  Content: DialogContent,\n  Header: DialogHeader,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Body: DialogBody,\n  Footer: DialogFooter,\n};\n\nexport type SheetProps = Omit<DialogContentProps, \"placement\">;\n\n/** A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement=\"bottom\"`. */\nexport function Sheet(props: SheetProps) {\n  return <DialogContent placement=\"bottom\" {...props} />;\n}\n"],"mappings":"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","names":["jsx","jsxs","s"]}
+{"version":3,"sources":["../src/dialog/alert-dialog.tsx"],"sourcesContent":["// Client. A confirmation that interrupts: Radix AlertDialog (role=\"alertdialog\", no outside click, focus on Cancel).\n// `onConfirm` may be async: the dialog stays open with the confirm button loading until it settles, closes when it\n// resolves, and stays open when it rejects (the product shows the error).\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Button } from \"../button/button\";\nimport { dialog } from \"./dialog\";\n\nconst s = dialog({ placement: \"center\", size: \"sm\" });\n\nexport type AlertDialogProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The element that opens the dialog (rendered as is, `asChild`): a Button, an IconButton. */\n  trigger?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** More content between the description and the actions. */\n  children?: React.ReactNode;\n  confirmLabel: string;\n  cancelLabel: string;\n  /** `danger` for a destructive action (delete, leave, cancel a payment). */\n  tone?: \"danger\" | \"primary\";\n  /** Runs on confirm. A promise keeps the dialog open and the button loading until it settles. */\n  onConfirm: () => void | Promise<unknown>;\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n  className?: string;\n};\n\nexport function AlertDialog({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  description,\n  children,\n  confirmLabel,\n  cancelLabel,\n  tone = \"primary\",\n  onConfirm,\n  container,\n  className,\n}: AlertDialogProps) {\n  const [openState, setOpenState] = React.useState(defaultOpen);\n  const [pending, setPending] = React.useState(false);\n  const open = openProp ?? openState;\n\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const confirm = async () => {\n    setPending(true);\n    try {\n      await onConfirm();\n      setOpen(false);\n    } catch {\n      // Stays open: the product reports the failure (a toast, an inline error) and the person may retry.\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <AlertDialogPrimitive.Root open={open} onOpenChange={(next) => (pending ? undefined : setOpen(next))}>\n      {trigger && <AlertDialogPrimitive.Trigger asChild>{trigger}</AlertDialogPrimitive.Trigger>}\n      <AlertDialogPrimitive.Portal container={container}>\n        <AlertDialogPrimitive.Overlay className={s.overlay()} />\n        <AlertDialogPrimitive.Content\n          data-tone={tone}\n          aria-busy={pending || undefined}\n          className={s.content({ className })}\n          onEscapeKeyDown={(event) => pending && event.preventDefault()}\n        >\n          <div className={s.header({ className: \"pr-5\" })}>\n            <AlertDialogPrimitive.Title className={s.title()}>{title}</AlertDialogPrimitive.Title>\n            {description && <AlertDialogPrimitive.Description className={s.description()}>{description}</AlertDialogPrimitive.Description>}\n          </div>\n          {children && <div className={s.body()}>{children}</div>}\n          <div className={s.footer()}>\n            <AlertDialogPrimitive.Cancel asChild>\n              <Button variant=\"ghost\" disabled={pending}>\n                {cancelLabel}\n              </Button>\n            </AlertDialogPrimitive.Cancel>\n            <Button variant={tone === \"danger\" ? \"danger\" : \"primary\"} loading={pending} onClick={confirm}>\n              {confirmLabel}\n            </Button>\n          </div>\n        </AlertDialogPrimitive.Content>\n      </AlertDialogPrimitive.Portal>\n    </AlertDialogPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA,SAAS,eAAe,4BAA4B;AACpD,YAAY,WAAW;AAkEL,cASR,YATQ;AA7DlB,IAAM,IAAI,OAAO,EAAE,WAAW,UAAU,MAAM,KAAK,CAAC;AAuB7C,SAAS,YAAY;AAAA,EAC1B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,WAAW,YAAY,IAAU,eAAS,WAAW;AAC5D,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAClD,QAAM,OAAO,YAAY;AAEzB,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,aAAa,OAAW,cAAa,IAAI;AAC7C,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,UAAU,YAAY;AAC1B,eAAW,IAAI;AACf,QAAI;AACF,YAAM,UAAU;AAChB,cAAQ,KAAK;AAAA,IACf,QAAQ;AAAA,IAER,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE,qBAAC,qBAAqB,MAArB,EAA0B,MAAY,cAAc,CAAC,SAAU,UAAU,SAAY,QAAQ,IAAI,GAC/F;AAAA,eAAW,oBAAC,qBAAqB,SAArB,EAA6B,SAAO,MAAE,mBAAQ;AAAA,IAC3D,qBAAC,qBAAqB,QAArB,EAA4B,WAC3B;AAAA,0BAAC,qBAAqB,SAArB,EAA6B,WAAW,EAAE,QAAQ,GAAG;AAAA,MACtD;AAAA,QAAC,qBAAqB;AAAA,QAArB;AAAA,UACC,aAAW;AAAA,UACX,aAAW,WAAW;AAAA,UACtB,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA,UAClC,iBAAiB,CAAC,UAAU,WAAW,MAAM,eAAe;AAAA,UAE5D;AAAA,iCAAC,SAAI,WAAW,EAAE,OAAO,EAAE,WAAW,OAAO,CAAC,GAC5C;AAAA,kCAAC,qBAAqB,OAArB,EAA2B,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,cACxD,eAAe,oBAAC,qBAAqB,aAArB,EAAiC,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,eAC7F;AAAA,YACC,YAAY,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,YACjD,qBAAC,SAAI,WAAW,EAAE,OAAO,GACvB;AAAA,kCAAC,qBAAqB,QAArB,EAA4B,SAAO,MAClC,8BAAC,UAAO,SAAQ,SAAQ,UAAU,SAC/B,uBACH,GACF;AAAA,cACA,oBAAC,UAAO,SAAS,SAAS,WAAW,WAAW,WAAW,SAAS,SAAS,SAAS,SACnF,wBACH;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/dropdown-menu.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-J3NC6ER4.js";
 import {
   cn
-} from "./chunk-RLOXWF2G.js";
+} from "./chunk-5AXLA4LK.js";
 
 // src/dropdown-menu/dropdown-menu.tsx
 import { DropdownMenu as MenuPrimitive } from "radix-ui";

package/dist/field.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-CPMZS4XA.js";
+} from "./chunk-FJDSLNXK.js";
 
 // src/field/field.tsx
 import { tv } from "tailwind-variants";

package/dist/motion.css

@@ -145,12 +145,18 @@
     from { opacity: 0; transform: translateY(12px) scale(0.97); }
   }
 }
+/* An indeterminate progress bar: a segment that crosses the track (Progress, variant bar). */
+.kz-progress[data-state="indeterminate"] { animation: kz-progress-slide 1.4s var(--kz-ease) infinite; }
+@keyframes kz-progress-slide {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
 @keyframes kz-pop-in {
   from { opacity: 0; transform: translateY(-6px) scale(0.96); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade { animation: none !important; }
+  .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress { animation: none !important; }
   [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
   .kz-sheen::after { display: none; }
   .kz-lift, .kz-lift:hover { transform: none; transition: none; }

package/dist/popover.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-J3NC6ER4.js";
 import {
   cn
-} from "./chunk-RLOXWF2G.js";
+} from "./chunk-5AXLA4LK.js";
 
 // src/popover/popover.tsx
 import { Popover as PopoverPrimitive } from "radix-ui";

package/dist/progress.d.ts

@@ -0,0 +1,87 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const progress: tailwind_variants.TVReturnType<{
+    variant: {
+        bar: {
+            root: string;
+            indicator: string;
+        };
+        ring: {
+            root: string;
+            track: string;
+            indicator: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+}, {
+    root: string;
+    track: string;
+    indicator: string;
+    center: string;
+}, undefined, {
+    variant: {
+        bar: {
+            root: string;
+            indicator: string;
+        };
+        ring: {
+            root: string;
+            track: string;
+            indicator: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+}, {
+    root: string;
+    track: string;
+    indicator: string;
+    center: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        bar: {
+            root: string;
+            indicator: string;
+        };
+        ring: {
+            root: string;
+            track: string;
+            indicator: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+}, {
+    root: string;
+    track: string;
+    indicator: string;
+    center: string;
+}>>;
+type ProgressVariants = VariantProps<typeof progress>;
+type ProgressProps = Omit<React.ComponentProps<"div">, "children"> & ProgressVariants & {
+    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */
+    value?: number | null;
+    max?: number;
+    /** The accessible name — passed translated ("Upload", "Raised towards the goal"). */
+    label: string;
+    /** The value in words for assistive technology ("$420 of $1,000") — default: the percentage. */
+    valueText?: string;
+    /** A ring's centre: an amount, a percentage, an icon. */
+    children?: React.ReactNode;
+};
+/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */
+declare function Progress({ variant, size, value, max, label, valueText, className, children, ...props }: ProgressProps): React.JSX.Element;
+
+export { Progress, type ProgressProps, type ProgressVariants, progress };

package/dist/progress.js

@@ -0,0 +1,85 @@
+// src/progress/progress.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var progress = tv({
+  slots: {
+    root: "relative",
+    track: "",
+    indicator: "",
+    center: "absolute inset-0 flex flex-col items-center justify-center text-center"
+  },
+  variants: {
+    variant: {
+      bar: {
+        root: "w-full overflow-hidden rounded-full bg-surface-3",
+        indicator: "kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none data-[state=indeterminate]:w-2/5"
+      },
+      ring: {
+        root: "inline-flex shrink-0 items-center justify-center",
+        track: "stroke-border-default",
+        indicator: "stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none"
+      }
+    },
+    size: { sm: {}, md: {}, lg: {} }
+  },
+  compoundVariants: [
+    { variant: "bar", size: "sm", class: { root: "h-1" } },
+    { variant: "bar", size: "md", class: { root: "h-2" } },
+    { variant: "bar", size: "lg", class: { root: "h-3" } },
+    { variant: "ring", size: "sm", class: { root: "h-10 w-10" } },
+    { variant: "ring", size: "md", class: { root: "h-20 w-20" } },
+    { variant: "ring", size: "lg", class: { root: "h-36 w-36" } }
+  ],
+  defaultVariants: { variant: "bar", size: "md" }
+});
+var STROKE = { sm: 12, md: 9, lg: 7 };
+function Progress({ variant = "bar", size = "md", value, max = 100, label, valueText, className, children, ...props }) {
+  const s = progress({ variant, size });
+  const known = typeof value === "number" && Number.isFinite(value);
+  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;
+  const percent = Math.round(ratio * 100);
+  const state = !known ? "indeterminate" : ratio >= 1 ? "complete" : "loading";
+  const aria = {
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuemin": known ? 0 : void 0,
+    "aria-valuemax": known ? max : void 0,
+    "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
+    "aria-valuetext": known ? valueText ?? `${percent}%` : valueText,
+    "data-state": state,
+    "data-value": known ? value : void 0,
+    "data-variant": variant
+  };
+  if (variant === "ring") {
+    const stroke = STROKE[size];
+    const r = 50 - stroke / 2;
+    return /* @__PURE__ */ jsxs("div", { ...aria, className: s.root({ className }), ...props, children: [
+      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: stroke, className: s.track() }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "50",
+            cy: "50",
+            r,
+            fill: "none",
+            strokeWidth: stroke,
+            strokeLinecap: "round",
+            pathLength: 100,
+            strokeDasharray: 100,
+            strokeDashoffset: known ? 100 - percent : 75,
+            "data-state": state,
+            className: s.indicator()
+          }
+        )
+      ] }),
+      children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ...aria, className: s.root({ className }), ...props, children: /* @__PURE__ */ jsx("div", { "data-state": state, className: s.indicator(), style: known ? { width: `${ratio * 100}%` } : void 0 }) });
+}
+export {
+  Progress,
+  progress
+};
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/progress/progress.tsx"],"sourcesContent":["// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({ variant = \"bar\", size = \"md\", value, max = 100, label, valueText, className, children, ...props }: ProgressProps) {\n  const s = progress({ variant, size });\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": known ? (valueText ?? `${percent}%`) : valueText,\n    \"data-state\": state,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  return (\n    <div {...aria} className={s.root({ className })} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/radio-group.d.ts

@@ -0,0 +1,77 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { RadioGroup as RadioGroup$1 } from 'radix-ui';
+import * as React from 'react';
+
+declare const radioGroup: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    dot: string;
+    label: string;
+    card: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    dot: string;
+    label: string;
+    card: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    item: string;
+    dot: string;
+    label: string;
+    card: string;
+}>>;
+type RadioGroupRootProps = React.ComponentProps<typeof RadioGroup$1.Root> & {
+    /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */
+    label?: string;
+    /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */
+    invalid?: boolean;
+};
+/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form. */
+declare function RadioGroupRoot({ label, invalid, className, ...props }: RadioGroupRootProps): React.JSX.Element;
+type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroup$1.Item>, "children"> & {
+    /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */
+    children?: React.ReactNode;
+};
+/** A radio: a dot, and its words when given. */
+declare function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps): React.JSX.Element;
+/** A whole card as the radio: its content is the radio's name. `data-state="checked"` styles the chosen one. */
+declare function RadioGroupCard({ className, ...props }: React.ComponentProps<typeof RadioGroup$1.Item>): React.JSX.Element;
+/** `RadioGroup.Root/Item/Card`. */
+declare const RadioGroup: {
+    Root: typeof RadioGroupRoot;
+    Item: typeof RadioGroupItem;
+    Card: typeof RadioGroupCard;
+};
+
+export { RadioGroup, RadioGroupCard, RadioGroupItem, type RadioGroupItemProps, RadioGroupRoot, type RadioGroupRootProps, radioGroup };