@krizaka/ui 1.3.0 → 2.0.0-beta.1

package/dist/countdown.js

@@ -0,0 +1,74 @@
+"use client";
+
+// src/countdown/core.ts
+import { useSyncExternalStore } from "react";
+var listeners = /* @__PURE__ */ new Set();
+var timer = null;
+function subscribe(listener) {
+  listeners.add(listener);
+  timer ??= setInterval(() => listeners.forEach((l) => l()), 1e3);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+}
+var nowSecond = () => Math.floor(Date.now() / 1e3) * 1e3;
+function useCountdown(target, skewMs = 0) {
+  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);
+  return Math.max(0, new Date(target).getTime() - (now + skewMs));
+}
+function splitDuration(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  return { d: Math.floor(total / 86400), h: Math.floor(total % 86400 / 3600), m: Math.floor(total % 3600 / 60), s: total % 60 };
+}
+function countdownParts(ms, units) {
+  const { d, h, m, s } = splitDuration(ms);
+  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];
+}
+
+// src/countdown/countdown.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var countdown = tv({
+  slots: {
+    root: "inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg",
+    segment: "inline-flex items-baseline",
+    unit: "ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary"
+  },
+  variants: {
+    size: { sm: { root: "text-sm" }, md: { root: "text-xl" }, lg: { root: "text-3xl sm:text-4xl" } },
+    urgent: { true: { root: "text-danger" } }
+  },
+  defaultVariants: { size: "md" }
+});
+function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, className }) {
+  const ms = useCountdown(target, skewMs);
+  const urgent = ms > 0 && ms < urgentBelowMs;
+  const parts = countdownParts(ms, units);
+  const s = countdown({ size, urgent });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "timer",
+      "aria-label": label,
+      "data-urgent": urgent ? "" : void 0,
+      "data-ended": ms === 0 ? "" : void 0,
+      suppressHydrationWarning: true,
+      className: s.root({ className }),
+      children: parts.map(([value, unit], i) => /* @__PURE__ */ jsxs("span", { className: s.segment({ className: urgent && i === parts.length - 1 ? "motion-safe:animate-pulse" : void 0 }), children: [
+        String(value).padStart(2, "0"),
+        /* @__PURE__ */ jsx("span", { className: s.unit(), children: unit })
+      ] }, unit))
+    }
+  );
+}
+export {
+  Countdown,
+  countdownParts,
+  splitDuration,
+  useCountdown
+};
+//# sourceMappingURL=countdown.js.map

package/dist/countdown.js.map

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

package/dist/dialog.d.ts

@@ -0,0 +1,155 @@
+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';
+
+type AlertDialogProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The element that opens the dialog (rendered as is, `asChild`): a Button, an IconButton. */
+    trigger?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** More content between the description and the actions. */
+    children?: React.ReactNode;
+    confirmLabel: string;
+    cancelLabel: string;
+    /** `danger` for a destructive action (delete, leave, cancel a payment). */
+    tone?: "danger" | "primary";
+    /** Runs on confirm. A promise keeps the dialog open and the button loading until it settles. */
+    onConfirm: () => void | Promise<unknown>;
+    /** The element the portal renders into (default: document.body). */
+    container?: HTMLElement | null;
+    className?: string;
+};
+declare function AlertDialog({ open: openProp, defaultOpen, onOpenChange, trigger, title, description, children, confirmLabel, cancelLabel, tone, onConfirm, container, className, }: AlertDialogProps): React.JSX.Element;
+
+declare const dialog: tailwind_variants.TVReturnType<{
+    placement: {
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    placement: {
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    placement: {
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    close: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}>>;
+type DialogVariants = VariantProps<typeof dialog>;
+type DialogContentProps = React.ComponentProps<typeof Dialog$1.Content> & DialogVariants & {
+    /** The accessible name of the close button — passed translated. */
+    closeLabel: string;
+    /** The element the portal renders into (default: document.body). */
+    container?: HTMLElement | null;
+};
+/** The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`. */
+declare function DialogContent({ placement, size, closeLabel, container, className, children, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog$1.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof Dialog$1.Description>): React.JSX.Element;
+declare function DialogBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close`. `open`/`defaultOpen` + `onOpenChange`. */
+declare const Dialog: {
+    Root: React.FC<Dialog$1.DialogProps>;
+    Trigger: React.ForwardRefExoticComponent<Dialog$1.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Close: React.ForwardRefExoticComponent<Dialog$1.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: typeof DialogContent;
+    Header: typeof DialogHeader;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+};
+type SheetProps = Omit<DialogContentProps, "placement">;
+/** A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement="bottom"`. */
+declare function Sheet(props: SheetProps): React.JSX.Element;
+
+export { AlertDialog, type AlertDialogProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, type DialogVariants, Sheet, type SheetProps, dialog };

package/dist/dialog.js

@@ -0,0 +1,157 @@
+"use client";
+import {
+  Button,
+  IconButton
+} 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" });
+function AlertDialog({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  children,
+  confirmLabel,
+  cancelLabel,
+  tone = "primary",
+  onConfirm,
+  container,
+  className
+}) {
+  const [openState, setOpenState] = React.useState(defaultOpen);
+  const [pending, setPending] = React.useState(false);
+  const open = openProp ?? openState;
+  const setOpen = (next) => {
+    if (openProp === void 0) setOpenState(next);
+    onOpenChange?.(next);
+  };
+  const confirm = async () => {
+    setPending(true);
+    try {
+      await onConfirm();
+      setOpen(false);
+    } catch {
+    } finally {
+      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(
+        AlertDialogPrimitive.Content,
+        {
+          "data-tone": tone,
+          "aria-busy": pending || void 0,
+          className: s2.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 })
+            ] }),
+            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 })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  AlertDialog,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Sheet,
+  dialog
+};
+//# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

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

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,71 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { DropdownMenu as DropdownMenu$1 } from 'radix-ui';
+import * as React from 'react';
+
+declare const menu: tailwind_variants.TVReturnType<{
+    tone: {
+        default: {};
+        danger: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    indicator: string;
+    label: string;
+    separator: string;
+}, undefined, {
+    tone: {
+        default: {};
+        danger: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    indicator: string;
+    label: string;
+    separator: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    tone: {
+        default: {};
+        danger: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    indicator: string;
+    label: string;
+    separator: string;
+}>>;
+type DropdownMenuContentProps = React.ComponentProps<typeof DropdownMenu$1.Content> & {
+    /** The element the portal renders into (default: document.body). */
+    container?: HTMLElement | null;
+};
+declare function DropdownMenuContent({ sideOffset, align, collisionPadding, container, className, ...props }: DropdownMenuContentProps): React.JSX.Element;
+type DropdownMenuItemProps = React.ComponentProps<typeof DropdownMenu$1.Item> & {
+    tone?: "default" | "danger";
+};
+/** An action. `tone="danger"` for a destructive one; `onSelect` runs it (the menu closes). */
+declare function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps): React.JSX.Element;
+/** A toggled option: `checked` + `onCheckedChange`. */
+declare function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Label>): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Separator>): React.JSX.Element;
+/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */
+declare const DropdownMenu: {
+    Root: React.FC<DropdownMenu$1.DropdownMenuProps>;
+    Trigger: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: typeof DropdownMenuContent;
+    Item: typeof DropdownMenuItem;
+    CheckboxItem: typeof DropdownMenuCheckboxItem;
+    Label: typeof DropdownMenuLabel;
+    Separator: typeof DropdownMenuSeparator;
+    Group: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, menu };

package/dist/dropdown-menu.js

@@ -0,0 +1,66 @@
+"use client";
+import {
+  floating
+} from "./chunk-J3NC6ER4.js";
+import {
+  cn
+} from "./chunk-RLOXWF2G.js";
+
+// src/dropdown-menu/dropdown-menu.tsx
+import { DropdownMenu as MenuPrimitive } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var menu = tv({
+  slots: {
+    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)"),
+    item: "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 data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-secondary",
+    indicator: "ml-auto flex h-4 w-4 items-center justify-center text-accent",
+    label: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    separator: "-mx-1 my-1 h-px bg-border-subtle"
+  },
+  variants: {
+    // The danger token is too light for small text on a light surface: the label stays a text role, the icon and the
+    // highlight carry the danger.
+    tone: { default: {}, danger: { item: "data-highlighted:bg-danger/15 [&>svg]:text-danger" } }
+  },
+  defaultVariants: { tone: "default" }
+});
+var s = menu();
+function DropdownMenuContent({ sideOffset = 6, align = "end", collisionPadding = 8, container, className, ...props }) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(MenuPrimitive.Content, { sideOffset, align, collisionPadding, className: s.content({ className }), ...props }) });
+}
+function DropdownMenuItem({ tone, className, ...props }) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Item, { "data-tone": tone ?? "default", className: menu({ tone }).item({ className }), ...props });
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(MenuPrimitive.CheckboxItem, { className: s.item({ className }), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(MenuPrimitive.ItemIndicator, { className: s.indicator(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) })
+  ] });
+}
+function DropdownMenuLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Label, { className: s.label({ className }), ...props });
+}
+function DropdownMenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Separator, { className: s.separator({ className }), ...props });
+}
+var DropdownMenu = {
+  Root: MenuPrimitive.Root,
+  Trigger: MenuPrimitive.Trigger,
+  Content: DropdownMenuContent,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  Label: DropdownMenuLabel,
+  Separator: DropdownMenuSeparator,
+  Group: MenuPrimitive.Group
+};
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  menu
+};
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// 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> & { tone?: \"default\" | \"danger\" };\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"],"mappings":";;;;;;;;;AACA,SAAS,gBAAgB,qBAAqB;AAE9C,SAAS,UAAU;AAiCb,cAeF,YAfE;AA5BC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,SAAS,GAAG,UAAU,6IAA6I;AAAA,IACnK,MACE;AAAA,IAGF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA;AAAA;AAAA,IAGR,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAE,MAAM,oDAAoD,EAAE;AAAA,EAC7F;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AACD,IAAM,IAAI,KAAK;AAOR,SAAS,oBAAoB,EAAE,aAAa,GAAG,QAAQ,OAAO,mBAAmB,GAAG,WAAW,WAAW,GAAG,MAAM,GAA6B;AACrJ,SACE,oBAAC,cAAc,QAAd,EAAqB,WACpB,8BAAC,cAAc,SAAd,EAAsB,YAAwB,OAAc,kBAAoC,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GACnJ;AAEJ;AAKO,SAAS,iBAAiB,EAAE,MAAM,WAAW,GAAG,MAAM,GAA0B;AACrF,SAAO,oBAAC,cAAc,MAAd,EAAmB,aAAW,QAAQ,WAAW,WAAW,KAAK,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrH;AAGO,SAAS,yBAAyB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA4D;AACnI,SACE,qBAAC,cAAc,cAAd,EAA2B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/D;AAAA;AAAA,IACD,oBAAC,cAAc,eAAd,EAA4B,WAAW,EAAE,UAAU,GAClD,8BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAE,mBAAkB,GAC5B,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAqD;AAC3G,SAAO,oBAAC,cAAc,OAAd,EAAoB,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC5E;AAEO,SAAS,sBAAsB,EAAE,WAAW,GAAG,MAAM,GAAyD;AACnH,SAAO,oBAAC,cAAc,WAAd,EAAwB,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACpF;AAGO,IAAM,eAAe;AAAA,EAC1B,MAAM,cAAc;AAAA,EACpB,SAAS,cAAc;AAAA,EACvB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO,cAAc;AACvB;","names":[]}

package/dist/empty-state.d.ts

@@ -0,0 +1,63 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const emptyState: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    action: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    action: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    action: string;
+}>>;
+type EmptyStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** A decorative icon (hidden from assistive technology). */
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** What to do next: a Button, a link. */
+    action?: React.ReactNode;
+};
+declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): React.JSX.Element;
+
+export { EmptyState, type EmptyStateProps, emptyState };