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

package/registry/demos/skeleton.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/demos/skeleton.tsx
+import { Skeleton } from "@krizaka/ui/skeleton";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SkeletonDemo() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+    /* @__PURE__ */ jsx(Skeleton, { shape: "rect", className: "h-32" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { shape: "circle", className: "h-8" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, {}),
+        /* @__PURE__ */ jsx(Skeleton, { className: "w-2/3" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  SkeletonDemo as default
+};

package/registry/demos/skeleton.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "@krizaka/ui/skeleton";
+
+export default function SkeletonDemo() {
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4">
+      <Skeleton shape="rect" className="h-32" />
+      <div className="flex items-center gap-3">
+        <Skeleton shape="circle" className="h-8" />
+        <div className="flex flex-1 flex-col gap-2">
+          <Skeleton />
+          <Skeleton className="w-2/3" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/registry/demos/slider.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SliderDemo(): react.JSX.Element;
+
+export { SliderDemo as default };

package/registry/demos/slider.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/slider.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderDemo() {
+  return /* @__PURE__ */ jsx(Slider, { label: "Volume", defaultValue: 60 });
+}
+export {
+  SliderDemo as default
+};

package/registry/demos/slider.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@krizaka/ui/slider";
+
+export default function SliderDemo() {
+  return <Slider label="Volume" defaultValue={60} />;
+}

package/registry/demos/slot.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SlotDemo(): react.JSX.Element;
+
+export { SlotDemo as default };

package/registry/demos/slot.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/demos/slot.tsx
+import { Slot, VisuallyHidden } from "@krizaka/ui/slot";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SlotDemo() {
+  return /* @__PURE__ */ jsx(Slot, { className: "text-sm font-semibold text-fg underline underline-offset-4", children: /* @__PURE__ */ jsxs("a", { href: "#docs", children: [
+    "Read the docs",
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: " about Slot" })
+  ] }) });
+}
+export {
+  SlotDemo as default
+};

package/registry/demos/slot.tsx

@@ -0,0 +1,13 @@
+import { Slot, VisuallyHidden } from "@krizaka/ui/slot";
+
+export default function SlotDemo() {
+  // Slot merges its props and classes into its only child: the link is rendered, styled by the Slot.
+  return (
+    <Slot className="text-sm font-semibold text-fg underline underline-offset-4">
+      <a href="#docs">
+        Read the docs
+        <VisuallyHidden> about Slot</VisuallyHidden>
+      </a>
+    </Slot>
+  );
+}

package/registry/demos/spinner.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SpinnerDemo(): react.JSX.Element;
+
+export { SpinnerDemo as default };

package/registry/demos/spinner.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/spinner.tsx
+import { Spinner } from "@krizaka/ui/spinner";
+import { jsx } from "react/jsx-runtime";
+function SpinnerDemo() {
+  return /* @__PURE__ */ jsx(Spinner, { label: "Loading" });
+}
+export {
+  SpinnerDemo as default
+};

package/registry/demos/spinner.tsx

@@ -0,0 +1,5 @@
+import { Spinner } from "@krizaka/ui/spinner";
+
+export default function SpinnerDemo() {
+  return <Spinner label="Loading" />;
+}

package/registry/demos/stat.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function StatDemo(): react.JSX.Element;
+
+export { StatDemo as default };

package/registry/demos/stat.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/stat.tsx
+import { Stat } from "@krizaka/ui/stat";
+import { jsx } from "react/jsx-runtime";
+function StatDemo() {
+  return /* @__PURE__ */ jsx(Stat, { label: "Revenue", value: "\u20AC4,812", hint: "vs last month", trend: "up", trendLabel: "+12 %" });
+}
+export {
+  StatDemo as default
+};

package/registry/demos/stat.tsx

@@ -0,0 +1,5 @@
+import { Stat } from "@krizaka/ui/stat";
+
+export default function StatDemo() {
+  return <Stat label="Revenue" value="€4,812" hint="vs last month" trend="up" trendLabel="+12 %" />;
+}

package/registry/demos/switch.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SwitchDemo(): react.JSX.Element;
+
+export { SwitchDemo as default };

package/registry/demos/switch.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/switch.tsx
+import { Switch } from "@krizaka/ui/switch";
+import { jsx } from "react/jsx-runtime";
+function SwitchDemo() {
+  return /* @__PURE__ */ jsx(Switch, { label: "Autoplay" });
+}
+export {
+  SwitchDemo as default
+};

package/registry/demos/switch.tsx

@@ -0,0 +1,5 @@
+import { Switch } from "@krizaka/ui/switch";
+
+export default function SwitchDemo() {
+  return <Switch label="Autoplay" />;
+}

package/registry/demos/tabs.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function TabsDemo(): react.JSX.Element;
+
+export { TabsDemo as default };

package/registry/demos/tabs.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/demos/tabs.tsx
+import { Tabs } from "@krizaka/ui/tabs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TabsDemo() {
+  return /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "videos", children: [
+    /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Profile", children: [
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "videos", children: "Videos" }),
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "stories", children: "Stories" }),
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "collections", children: "Collections" }),
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "about", disabled: true, children: "About" })
+    ] }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "videos", className: "text-sm text-fg-secondary", children: "Twelve videos, newest first." }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "stories", className: "text-sm text-fg-secondary", children: "Stories of the last 24 hours." }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "collections", className: "text-sm text-fg-secondary", children: "Three public collections." }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "about", className: "text-sm text-fg-secondary", children: "About this channel." })
+  ] });
+}
+export {
+  TabsDemo as default
+};

package/registry/demos/tabs.tsx

@@ -0,0 +1,28 @@
+import { Tabs } from "@krizaka/ui/tabs";
+
+export default function TabsDemo() {
+  return (
+    <Tabs.Root defaultValue="videos">
+      <Tabs.List aria-label="Profile">
+        <Tabs.Trigger value="videos">Videos</Tabs.Trigger>
+        <Tabs.Trigger value="stories">Stories</Tabs.Trigger>
+        <Tabs.Trigger value="collections">Collections</Tabs.Trigger>
+        <Tabs.Trigger value="about" disabled>
+          About
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="videos" className="text-sm text-fg-secondary">
+        Twelve videos, newest first.
+      </Tabs.Content>
+      <Tabs.Content value="stories" className="text-sm text-fg-secondary">
+        Stories of the last 24 hours.
+      </Tabs.Content>
+      <Tabs.Content value="collections" className="text-sm text-fg-secondary">
+        Three public collections.
+      </Tabs.Content>
+      <Tabs.Content value="about" className="text-sm text-fg-secondary">
+        About this channel.
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+}

package/registry/demos/theme.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function ThemeDemo(): react.JSX.Element;
+
+export { ThemeDemo as default };

package/registry/demos/theme.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/theme.tsx
+import { ThemeProvider, ThemeToggle } from "@krizaka/ui/theme";
+import { jsx } from "react/jsx-runtime";
+function ThemeDemo() {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(ThemeToggle, { label: "Change the theme" }) });
+}
+export {
+  ThemeDemo as default
+};

package/registry/demos/theme.tsx

@@ -0,0 +1,9 @@
+import { ThemeProvider, ThemeToggle } from "@krizaka/ui/theme";
+
+export default function ThemeDemo() {
+  return (
+    <ThemeProvider>
+      <ThemeToggle label="Change the theme" />
+    </ThemeProvider>
+  );
+}

package/registry/demos/toast.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+
+/** `defaultOpen`: the toasts show at once and stay (the screenshot); otherwise the button shows them. */
+declare function ToastDemo({ defaultOpen }: {
+    defaultOpen?: boolean;
+}): react.JSX.Element;
+
+export { ToastDemo as default };

package/registry/demos/toast.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/demos/toast.tsx
+import { Button } from "@krizaka/ui/button";
+import { toast, Toaster } from "@krizaka/ui/toast";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var toasterId = "tones";
+var show = () => {
+  toast("Draft saved", { toasterId, description: "Autosaved a moment ago." });
+  toast.success("Payment received", { toasterId, description: "\u20AC12.00 from @maya." });
+  toast.warning("Your balance is low", { toasterId, description: "Two tips left before a top-up." });
+  toast.error("Upload failed", { toasterId, description: "The connection dropped at 64 %.", action: { label: "Retry", onClick: () => {
+  } } });
+};
+function ToastDemo({ defaultOpen = false }) {
+  useEffect(() => {
+    if (!defaultOpen) return;
+    toast.dismiss();
+    show();
+  }, [defaultOpen]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Toaster, { id: toasterId, label: "Notifications", closeLabel: "Dismiss", position: "bottom-right", expand: true, visibleToasts: 4, duration: defaultOpen ? Number.POSITIVE_INFINITY : void 0 }),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: show, children: "Show again" })
+  ] });
+}
+export {
+  ToastDemo as default
+};

package/registry/demos/toast.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { toast, Toaster } from "@krizaka/ui/toast";
+import { useEffect } from "react";
+
+// Each toaster has its own `id`: the toasts of this demo stay in this demo's toaster.
+const toasterId = "tones";
+const show = () => {
+  toast("Draft saved", { toasterId, description: "Autosaved a moment ago." });
+  toast.success("Payment received", { toasterId, description: "€12.00 from @maya." });
+  toast.warning("Your balance is low", { toasterId, description: "Two tips left before a top-up." });
+  toast.error("Upload failed", { toasterId, description: "The connection dropped at 64 %.", action: { label: "Retry", onClick: () => {} } });
+};
+
+/** `defaultOpen`: the toasts show at once and stay (the screenshot); otherwise the button shows them. */
+export default function ToastDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  useEffect(() => {
+    if (!defaultOpen) return;
+    toast.dismiss();
+    show();
+  }, [defaultOpen]);
+  return (
+    <>
+      <Toaster id={toasterId} label="Notifications" closeLabel="Dismiss" position="bottom-right" expand visibleToasts={4} duration={defaultOpen ? Number.POSITIVE_INFINITY : undefined} />
+      <Button variant="outline" onClick={show}>
+        Show again
+      </Button>
+    </>
+  );
+}

package/registry/demos/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+
+declare function TooltipDemo({ defaultOpen }: {
+    defaultOpen?: boolean;
+}): react.JSX.Element;
+
+export { TooltipDemo as default };

package/registry/demos/tooltip.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/demos/tooltip.tsx
+import { IconButton } from "@krizaka/ui/button";
+import { Tooltip } from "@krizaka/ui/tooltip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TooltipDemo({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: "Copy the link", defaultOpen, children: /* @__PURE__ */ jsx(IconButton, { label: "Copy", variant: "outline", children: /* @__PURE__ */ jsxs("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("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+  ] }) }) });
+}
+export {
+  TooltipDemo as default
+};

package/registry/demos/tooltip.tsx

@@ -0,0 +1,15 @@
+import { IconButton } from "@krizaka/ui/button";
+import { Tooltip } from "@krizaka/ui/tooltip";
+
+export default function TooltipDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Tooltip content="Copy the link" defaultOpen={defaultOpen}>
+      <IconButton label="Copy" variant="outline">
+        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+          <rect x="9" y="9" width="12" height="12" rx="2" />
+          <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+        </svg>
+      </IconButton>
+    </Tooltip>
+  );
+}

package/registry/dialog.json

@@ -0,0 +1,218 @@
+{
+  "name": "dialog",
+  "type": "primitive",
+  "description": "`Dialog.*`, `Sheet`, `AlertDialog`, `dialog` (the slots). Client (\"use client\").",
+  "files": [
+    {
+      "path": "dialog/alert-dialog.tsx",
+      "content": "// 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 or closed (controlled), with `onOpenChange`. */\n  open?: boolean;\n  /** Open at first, uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when it opens or closes (never while `onConfirm` is pending). */\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  /** The question asked (\"Delete this video?\"): the dialog's accessible name. */\n  title: React.ReactNode;\n  /** What the action does and what it costs: the dialog's description. */\n  description?: React.ReactNode;\n  /** More content between the description and the actions. */\n  children?: React.ReactNode;\n  /** The words of the confirm button — passed translated. */\n  confirmLabel: string;\n  /** The words of the cancel button (it takes the focus at open) — passed translated. */\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  /** Classes of the dialog's content, merged last. */\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"
+    },
+    {
+      "path": "dialog/dialog.tsx",
+      "content": "// 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\ntype CloseButtonProps =\n  | {\n      /** The accessible name of the close button — passed translated. */\n      closeLabel: string;\n      /** Leaves the close button out (the content brings its own way out, or none: see `dismissible`). */\n      hideClose?: false;\n    }\n  | { closeLabel?: string; hideClose: true };\n\nexport type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> &\n  DialogVariants &\n  CloseButtonProps & {\n    /**\n     * center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height).\n     * @default \"center\"\n     */\n    placement?: DialogVariants[\"placement\"];\n    /**\n     * sm · md · lg: the width of the dialog.\n     * @default \"md\"\n     */\n    size?: DialogVariants[\"size\"];\n    /**\n     * `false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\n     * through `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.\n     */\n    dismissible?: boolean;\n    /** The element the portal renders into (default: document.body). */\n    container?: HTMLElement | null;\n  };\n\nconst prevent = (event: Event) => event.preventDefault();\n\n/** The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`. */\nexport function DialogContent({\n  placement,\n  size,\n  closeLabel,\n  hideClose,\n  dismissible = true,\n  container,\n  className,\n  children,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  ...props\n}: DialogContentProps) {\n  const v = dialog({ placement, size });\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <DialogPrimitive.Overlay className={v.overlay()} />\n      <DialogPrimitive.Content\n        data-placement={placement ?? \"center\"}\n        data-dismissible={dismissible ? undefined : \"false\"}\n        className={v.content({ className })}\n        onEscapeKeyDown={dismissible ? onEscapeKeyDown : chain(onEscapeKeyDown, prevent)}\n        onPointerDownOutside={dismissible ? onPointerDownOutside : chain(onPointerDownOutside, prevent)}\n        onInteractOutside={dismissible ? onInteractOutside : chain(onInteractOutside, prevent)}\n        {...props}\n      >\n        {children}\n        {!hideClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton label={closeLabel as string} variant=\"ghost\" shape=\"pill\" className={v.close()}>\n              <CloseIcon />\n            </IconButton>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\nfunction chain<E extends Event>(handler: ((event: E) => void) | undefined, then: (event: E) => void) {\n  return (event: E) => {\n    handler?.(event);\n    then(event);\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\n/** `Omit` that keeps the close-button union (`closeLabel` required unless `hideClose`). */\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\nexport type SheetProps = DistributiveOmit<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"
+    },
+    {
+      "path": "dialog/index.ts",
+      "content": "/** @krizaka/ui/dialog — `Dialog.*`, `Sheet`, `AlertDialog`, `dialog` (the slots). Client (\"use client\"). */\nexport { AlertDialog, type AlertDialogProps } from \"./alert-dialog\";\nexport {\n  Dialog,\n  dialog,\n  DialogBody,\n  DialogContent,\n  type DialogContentProps,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  type DialogVariants,\n  Sheet,\n  type SheetProps,\n} from \"./dialog\";\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "demo": {
+    "path": "demos/dialog.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { Dialog } from \"@krizaka/ui/dialog\";\nimport { Field, Input } from \"@krizaka/ui/field\";\n\nexport default function DialogDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Dialog.Root defaultOpen={defaultOpen}>\n      <Dialog.Trigger asChild>\n        <Button>Open</Button>\n      </Dialog.Trigger>\n      <Dialog.Content closeLabel=\"Close\">\n        <Dialog.Header>\n          <Dialog.Title>Invite a collaborator</Dialog.Title>\n          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <Field.Root>\n            <Field.Label htmlFor=\"invite-email\">Email</Field.Label>\n            <Input id=\"invite-email\" type=\"email\" placeholder=\"name@example.com\" />\n          </Field.Root>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Dialog.Close asChild>\n            <Button variant=\"ghost\">Cancel</Button>\n          </Dialog.Close>\n          <Button variant=\"primary\">Send the invitation</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "AlertDialog",
+      "description": "",
+      "props": [
+        {
+          "name": "cancelLabel",
+          "type": "string",
+          "default": null,
+          "description": "The words of the cancel button (it takes the focus at open) — passed translated.",
+          "required": true
+        },
+        {
+          "name": "confirmLabel",
+          "type": "string",
+          "default": null,
+          "description": "The words of the confirm button — passed translated.",
+          "required": true
+        },
+        {
+          "name": "onConfirm",
+          "type": "() => void | Promise<unknown>",
+          "default": null,
+          "description": "Runs on confirm. A promise keeps the dialog open and the button loading until it settles.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The question asked (\"Delete this video?\"): the dialog's accessible name.",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "More content between the description and the actions.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes of the dialog's content, merged last.",
+          "required": false
+        },
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "default": null,
+          "description": "The element the portal renders into (default: document.body).",
+          "required": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Open at first, uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What the action does and what it costs: the dialog's description.",
+          "required": false
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((open: boolean) => void)",
+          "default": null,
+          "description": "Called when it opens or closes (never while `onConfirm` is pending).",
+          "required": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": null,
+          "description": "Open or closed (controlled), with `onOpenChange`.",
+          "required": false
+        },
+        {
+          "name": "tone",
+          "type": "\"danger\" | \"primary\"",
+          "default": "primary",
+          "description": "`danger` for a destructive action (delete, leave, cancel a payment).",
+          "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The element that opens the dialog (rendered as is, `asChild`): a Button, an IconButton.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DialogContent",
+      "description": "The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`.",
+      "props": [
+        {
+          "name": "closeLabel",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name of the close button — passed translated.",
+          "required": false
+        },
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "default": null,
+          "description": "The element the portal renders into (default: document.body).",
+          "required": false
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "default": "true",
+          "description": "`false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\nthrough `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.",
+          "required": false
+        },
+        {
+          "name": "hideClose",
+          "type": "boolean",
+          "default": null,
+          "description": "Leaves the close button out (the content brings its own way out, or none: see `dismissible`).",
+          "required": false
+        },
+        {
+          "name": "placement",
+          "type": "\"center\" | \"bottom\" | \"right\"",
+          "default": "center",
+          "description": "center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height).",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "description": "sm · md · lg: the width of the dialog.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Sheet",
+      "description": "A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement=\"bottom\"`.",
+      "props": [
+        {
+          "name": "closeLabel",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name of the close button — passed translated.",
+          "required": false
+        },
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "default": null,
+          "description": "The element the portal renders into (default: document.body).",
+          "required": false
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "default": null,
+          "description": "`false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\nthrough `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.",
+          "required": false
+        },
+        {
+          "name": "hideClose",
+          "type": "boolean",
+          "default": null,
+          "description": "Leaves the close button out (the content brings its own way out, or none: see `dismissible`).",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "description": "sm · md · lg: the width of the dialog.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}