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

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
+        }
+      ]
+    }
+  ]
+}

package/registry/dropdown-menu.json

@@ -0,0 +1,63 @@
+{
+  "name": "dropdown-menu",
+  "type": "primitive",
+  "description": "`DropdownMenu.*`, `menu` (the slots). Client (\"use client\").",
+  "files": [
+    {
+      "path": "dropdown-menu/dropdown-menu.tsx",
+      "content": "// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The danger token is too light for small text on a light surface: the label stays a text role, the icon and the\n    // highlight carry the danger.\n    tone: { default: {}, danger: { item: \"data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"
+    },
+    {
+      "path": "dropdown-menu/index.ts",
+      "content": "/** @krizaka/ui/dropdown-menu — `DropdownMenu.*`, `menu` (the slots). Client (\"use client\"). */\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  type DropdownMenuContentProps,\n  DropdownMenuItem,\n  type DropdownMenuItemProps,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  menu,\n} from \"./dropdown-menu\";\n"
+    },
+    {
+      "path": "floating.ts",
+      "content": "// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "demos/dropdown-menu.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { DropdownMenu } from \"@krizaka/ui/dropdown-menu\";\n\nconst icon = (d: string) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d={d} />\n  </svg>\n);\n\nexport default function DropdownMenuDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>\n      <DropdownMenu.Trigger asChild>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"center\">\n        <DropdownMenu.Label>Video</DropdownMenu.Label>\n        <DropdownMenu.Item>{icon(\"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\")}Edit</DropdownMenu.Item>\n        <DropdownMenu.Item>{icon(\"M4 12v8h16v-8M16 6l-4-4-4 4M12 2v13\")}Share</DropdownMenu.Item>\n        <DropdownMenu.Item disabled>{icon(\"M12 3v12M7 10l5 5 5-5M5 21h14\")}Download</DropdownMenu.Item>\n        <DropdownMenu.CheckboxItem checked>Pinned to the profile</DropdownMenu.CheckboxItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item tone=\"danger\">{icon(\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\")}Delete</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "DropdownMenuContent",
+      "description": "",
+      "props": [
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "default": null,
+          "description": "The element the portal renders into (default: document.body).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DropdownMenuItem",
+      "description": "An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes).",
+      "props": [
+        {
+          "name": "tone",
+          "type": "\"danger\" | \"default\"",
+          "default": null,
+          "description": "`danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DropdownMenuCheckboxItem",
+      "description": "A toggled option: `checked` + `onCheckedChange`.",
+      "props": []
+    }
+  ]
+}

package/registry/empty-state.json

@@ -0,0 +1,59 @@
+{
+  "name": "empty-state",
+  "type": "primitive",
+  "description": "`EmptyState`. Server-safe.",
+  "files": [
+    {
+      "path": "empty-state/empty-state.tsx",
+      "content": "// Server-safe. What a list, a search or a panel says when it has nothing to show — every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const emptyState = tv({\n  slots: {\n    root: \"flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-default px-6 py-10 text-center\",\n    icon: \"flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-fg-secondary [&>svg]:h-6 [&>svg]:w-6\",\n    title: \"text-sm font-semibold text-fg\",\n    description: \"max-w-sm text-sm text-fg-secondary\",\n    action: \"mt-1 flex flex-wrap items-center justify-center gap-2\",\n  },\n});\nconst s = emptyState();\n\nexport type EmptyStateProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** A decorative icon (hidden from assistive technology). */\n  icon?: React.ReactNode;\n  /** What is empty, in a few words (\"No videos yet\"). */\n  title: React.ReactNode;\n  /** Why, or what will fill it. */\n  description?: React.ReactNode;\n  /** What to do next: a Button, a link. */\n  action?: React.ReactNode;\n};\n\nexport function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps) {\n  return (\n    <div role=\"status\" className={s.root({ className })} {...props}>\n      {icon && (\n        <div aria-hidden className={s.icon()}>\n          {icon}\n        </div>\n      )}\n      <p className={s.title()}>{title}</p>\n      {description && <p className={s.description()}>{description}</p>}\n      {action && <div className={s.action()}>{action}</div>}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "empty-state/index.ts",
+      "content": "/** @krizaka/ui/empty-state — `EmptyState`. Server-safe. */\nexport { EmptyState, emptyState, type EmptyStateProps } from \"./empty-state\";\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "demos/empty-state.tsx",
+    "content": "import { EmptyState } from \"@krizaka/ui/empty-state\";\n\nconst ICON = (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"m10 9 5 3-5 3z\" />\n  </svg>\n);\n\nexport default function EmptyStateDemo() {\n  return <EmptyState icon={ICON} title=\"No videos yet\" description=\"The videos you publish appear here.\" />;\n}\n"
+  },
+  "props": [
+    {
+      "component": "EmptyState",
+      "description": "",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What is empty, in a few words (\"No videos yet\").",
+          "required": true
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What to do next: a Button, a link.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Why, or what will fill it.",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A decorative icon (hidden from assistive technology).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}