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

package/dist/dialog.js

@@ -0,0 +1,93 @@
+"use client";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Sheet,
+  dialog
+} from "./chunk-5FRYKFTO.js";
+import {
+  Button
+} from "./chunk-QRG5RYEI.js";
+
+// src/dialog/alert-dialog.tsx
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var s = 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__ */ jsxs(AlertDialogPrimitive.Root, { open, onOpenChange: (next) => pending ? void 0 : setOpen(next), children: [
+    trigger && /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { container, children: [
+      /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, { className: s.overlay() }),
+      /* @__PURE__ */ jsxs(
+        AlertDialogPrimitive.Content,
+        {
+          "data-tone": tone,
+          "aria-busy": pending || void 0,
+          className: s.content({ className }),
+          onEscapeKeyDown: (event) => pending && event.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: s.header({ className: "pr-5" }), children: [
+              /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { className: s.title(), children: title }),
+              description && /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { className: s.description(), children: description })
+            ] }),
+            children && /* @__PURE__ */ jsx("div", { className: s.body(), children }),
+            /* @__PURE__ */ jsxs("div", { className: s.footer(), children: [
+              /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: pending, children: cancelLabel }) }),
+              /* @__PURE__ */ jsx(Button, { variant: tone === "danger" ? "danger" : "primary", loading: pending, onClick: confirm, children: confirmLabel })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+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"],"sourcesContent":["// Client. A confirmation that interrupts: Radix AlertDialog (role=\"alertdialog\", no outside click, focus on Cancel).\n// `onConfirm` may be async: the dialog stays open with the confirm button loading until it settles, closes when it\n// resolves, and stays open when it rejects (the product shows the error).\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Button } from \"../button/button\";\nimport { dialog } from \"./dialog\";\n\nconst s = dialog({ placement: \"center\", size: \"sm\" });\n\nexport type AlertDialogProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The element that opens the dialog (rendered as is, `asChild`): a Button, an IconButton. */\n  trigger?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** More content between the description and the actions. */\n  children?: React.ReactNode;\n  confirmLabel: string;\n  cancelLabel: string;\n  /** `danger` for a destructive action (delete, leave, cancel a payment). */\n  tone?: \"danger\" | \"primary\";\n  /** Runs on confirm. A promise keeps the dialog open and the button loading until it settles. */\n  onConfirm: () => void | Promise<unknown>;\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n  className?: string;\n};\n\nexport function AlertDialog({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  description,\n  children,\n  confirmLabel,\n  cancelLabel,\n  tone = \"primary\",\n  onConfirm,\n  container,\n  className,\n}: AlertDialogProps) {\n  const [openState, setOpenState] = React.useState(defaultOpen);\n  const [pending, setPending] = React.useState(false);\n  const open = openProp ?? openState;\n\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const confirm = async () => {\n    setPending(true);\n    try {\n      await onConfirm();\n      setOpen(false);\n    } catch {\n      // Stays open: the product reports the failure (a toast, an inline error) and the person may retry.\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <AlertDialogPrimitive.Root open={open} onOpenChange={(next) => (pending ? undefined : setOpen(next))}>\n      {trigger && <AlertDialogPrimitive.Trigger asChild>{trigger}</AlertDialogPrimitive.Trigger>}\n      <AlertDialogPrimitive.Portal container={container}>\n        <AlertDialogPrimitive.Overlay className={s.overlay()} />\n        <AlertDialogPrimitive.Content\n          data-tone={tone}\n          aria-busy={pending || undefined}\n          className={s.content({ className })}\n          onEscapeKeyDown={(event) => pending && event.preventDefault()}\n        >\n          <div className={s.header({ className: \"pr-5\" })}>\n            <AlertDialogPrimitive.Title className={s.title()}>{title}</AlertDialogPrimitive.Title>\n            {description && <AlertDialogPrimitive.Description className={s.description()}>{description}</AlertDialogPrimitive.Description>}\n          </div>\n          {children && <div className={s.body()}>{children}</div>}\n          <div className={s.footer()}>\n            <AlertDialogPrimitive.Cancel asChild>\n              <Button variant=\"ghost\" disabled={pending}>\n                {cancelLabel}\n              </Button>\n            </AlertDialogPrimitive.Cancel>\n            <Button variant={tone === \"danger\" ? \"danger\" : \"primary\"} loading={pending} onClick={confirm}>\n              {confirmLabel}\n            </Button>\n          </div>\n        </AlertDialogPrimitive.Content>\n      </AlertDialogPrimitive.Portal>\n    </AlertDialogPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA,SAAS,eAAe,4BAA4B;AACpD,YAAY,WAAW;AAkEL,cASR,YATQ;AA7DlB,IAAM,IAAI,OAAO,EAAE,WAAW,UAAU,MAAM,KAAK,CAAC;AAuB7C,SAAS,YAAY;AAAA,EAC1B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,WAAW,YAAY,IAAU,eAAS,WAAW;AAC5D,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAClD,QAAM,OAAO,YAAY;AAEzB,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,aAAa,OAAW,cAAa,IAAI;AAC7C,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,UAAU,YAAY;AAC1B,eAAW,IAAI;AACf,QAAI;AACF,YAAM,UAAU;AAChB,cAAQ,KAAK;AAAA,IACf,QAAQ;AAAA,IAER,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE,qBAAC,qBAAqB,MAArB,EAA0B,MAAY,cAAc,CAAC,SAAU,UAAU,SAAY,QAAQ,IAAI,GAC/F;AAAA,eAAW,oBAAC,qBAAqB,SAArB,EAA6B,SAAO,MAAE,mBAAQ;AAAA,IAC3D,qBAAC,qBAAqB,QAArB,EAA4B,WAC3B;AAAA,0BAAC,qBAAqB,SAArB,EAA6B,WAAW,EAAE,QAAQ,GAAG;AAAA,MACtD;AAAA,QAAC,qBAAqB;AAAA,QAArB;AAAA,UACC,aAAW;AAAA,UACX,aAAW,WAAW;AAAA,UACtB,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA,UAClC,iBAAiB,CAAC,UAAU,WAAW,MAAM,eAAe;AAAA,UAE5D;AAAA,iCAAC,SAAI,WAAW,EAAE,OAAO,EAAE,WAAW,OAAO,CAAC,GAC5C;AAAA,kCAAC,qBAAqB,OAArB,EAA2B,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,cACxD,eAAe,oBAAC,qBAAqB,aAArB,EAAiC,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,eAC7F;AAAA,YACC,YAAY,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,YACjD,qBAAC,SAAI,WAAW,EAAE,OAAO,GACvB;AAAA,kCAAC,qBAAqB,QAArB,EAA4B,SAAO,MAClC,8BAAC,UAAO,SAAQ,SAAQ,UAAU,SAC/B,uBACH,GACF;AAAA,cACA,oBAAC,UAAO,SAAS,SAAS,WAAW,WAAW,WAAW,SAAS,SAAS,SAAS,SACnF,wBACH;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/dropdown-menu.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-5AXLA4LK.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/field.js

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

package/dist/kbd.d.ts

@@ -0,0 +1,24 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const kbdVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: "h-5 min-w-5 px-1 text-[10px]";
+        md: "h-6 min-w-6 px-1.5 text-xs";
+    };
+}, undefined, string, {
+    size: {
+        sm: "h-5 min-w-5 px-1 text-[10px]";
+        md: "h-6 min-w-6 px-1.5 text-xs";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        sm: "h-5 min-w-5 px-1 text-[10px]";
+        md: "h-6 min-w-6 px-1.5 text-xs";
+    };
+}, undefined>>;
+type KbdProps = React.ComponentProps<"kbd"> & VariantProps<typeof kbdVariants>;
+declare function Kbd({ size, className, ...props }: KbdProps): React.JSX.Element;
+
+export { Kbd, type KbdProps, kbdVariants };

package/dist/kbd.js

@@ -0,0 +1,16 @@
+// src/kbd/kbd.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var kbdVariants = tv({
+  base: "inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 font-mono font-semibold text-fg-secondary",
+  variants: { size: { sm: "h-5 min-w-5 px-1 text-[10px]", md: "h-6 min-w-6 px-1.5 text-xs" } },
+  defaultVariants: { size: "md" }
+});
+function Kbd({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: kbdVariants({ size, className }), ...props });
+}
+export {
+  Kbd,
+  kbdVariants
+};
+//# sourceMappingURL=kbd.js.map

package/dist/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/kbd/kbd.tsx"],"sourcesContent":["// Server-safe. A key, or a shortcut of several (`<Kbd>⌘</Kbd><Kbd>K</Kbd>`).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbdVariants = tv({\n  base:\n    \"inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 \" +\n    \"font-mono font-semibold text-fg-secondary\",\n  variants: { size: { sm: \"h-5 min-w-5 px-1 text-[10px]\", md: \"h-6 min-w-6 px-1.5 text-xs\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type KbdProps = React.ComponentProps<\"kbd\"> & VariantProps<typeof kbdVariants>;\n\nexport function Kbd({ size, className, ...props }: KbdProps) {\n  return <kbd className={kbdVariants({ size, className })} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAa7B;AAXF,IAAM,cAAc,GAAG;AAAA,EAC5B,MACE;AAAA,EAEF,UAAU,EAAE,MAAM,EAAE,IAAI,gCAAgC,IAAI,6BAA6B,EAAE;AAAA,EAC3F,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAIM,SAAS,IAAI,EAAE,MAAM,WAAW,GAAG,MAAM,GAAa;AAC3D,SAAO,oBAAC,SAAI,WAAW,YAAY,EAAE,MAAM,UAAU,CAAC,GAAI,GAAG,OAAO;AACtE;","names":[]}

package/dist/motion.css

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

package/dist/page-header.d.ts

@@ -0,0 +1,77 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const pageHeader: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            breadcrumb?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            breadcrumb?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    breadcrumb: string;
+    row: string;
+    text: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            breadcrumb?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    breadcrumb: string;
+    row: string;
+    text: string;
+    title: string;
+    description: string;
+    actions: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    breadcrumb: string;
+    row: string;
+    text: string;
+    title: string;
+    description: string;
+    actions: string;
+}>>;
+type PageHeaderProps = Omit<React.ComponentProps<"div">, "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** The page's actions: Buttons, a DropdownMenu. */
+    actions?: React.ReactNode;
+    /** A breadcrumb (the product's own <nav aria-label>), shown above the title. */
+    breadcrumb?: React.ReactNode;
+    /** The heading level of the title: `h1` for a page, `h2` for a section that looks like one. */
+    as?: "h1" | "h2";
+};
+declare function PageHeader({ title, description, actions, breadcrumb, as: Heading, className, ...props }: PageHeaderProps): React.JSX.Element;
+
+export { PageHeader, type PageHeaderProps, pageHeader };

package/dist/page-header.js

@@ -0,0 +1,32 @@
+// src/page-header/page-header.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pageHeader = tv({
+  slots: {
+    root: "flex flex-col gap-3 border-b border-border-subtle pb-6",
+    breadcrumb: "text-xs text-fg-secondary",
+    row: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
+    text: "flex min-w-0 flex-col gap-1.5",
+    title: "font-display text-2xl font-black tracking-tight text-fg sm:text-3xl",
+    description: "max-w-2xl text-sm text-fg-secondary",
+    actions: "flex shrink-0 flex-wrap items-center gap-2"
+  }
+});
+var s = pageHeader();
+function PageHeader({ title, description, actions, breadcrumb, as: Heading = "h1", className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    breadcrumb && /* @__PURE__ */ jsx("div", { className: s.breadcrumb(), children: breadcrumb }),
+    /* @__PURE__ */ jsxs("div", { className: s.row(), children: [
+      /* @__PURE__ */ jsxs("div", { className: s.text(), children: [
+        /* @__PURE__ */ jsx(Heading, { className: s.title(), children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: s.description(), children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    ] })
+  ] });
+}
+export {
+  PageHeader,
+  pageHeader
+};
+//# sourceMappingURL=page-header.js.map

package/dist/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/page-header/page-header.tsx"],"sourcesContent":["// Server-safe. The top of a page: an optional breadcrumb, the title (h1), a description and the page's actions.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const pageHeader = tv({\n  slots: {\n    root: \"flex flex-col gap-3 border-b border-border-subtle pb-6\",\n    breadcrumb: \"text-xs text-fg-secondary\",\n    row: \"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\",\n    text: \"flex min-w-0 flex-col gap-1.5\",\n    title: \"font-display text-2xl font-black tracking-tight text-fg sm:text-3xl\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n  },\n});\nconst s = pageHeader();\n\nexport type PageHeaderProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** The page's actions: Buttons, a DropdownMenu. */\n  actions?: React.ReactNode;\n  /** A breadcrumb (the product's own <nav aria-label>), shown above the title. */\n  breadcrumb?: React.ReactNode;\n  /** The heading level of the title: `h1` for a page, `h2` for a section that looks like one. */\n  as?: \"h1\" | \"h2\";\n};\n\nexport function PageHeader({ title, description, actions, breadcrumb, as: Heading = \"h1\", className, ...props }: PageHeaderProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      {breadcrumb && <div className={s.breadcrumb()}>{breadcrumb}</div>}\n      <div className={s.row()}>\n        <div className={s.text()}>\n          <Heading className={s.title()}>{title}</Heading>\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA6BE,cAEb,YAFa;AA3Bd,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAad,SAAS,WAAW,EAAE,OAAO,aAAa,SAAS,YAAY,IAAI,UAAU,MAAM,WAAW,GAAG,MAAM,GAAoB;AAChI,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACxC;AAAA,kBAAc,oBAAC,SAAI,WAAW,EAAE,WAAW,GAAI,sBAAW;AAAA,IAC3D,qBAAC,SAAI,WAAW,EAAE,IAAI,GACpB;AAAA,2BAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,4BAAC,WAAQ,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,QACrC,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,SAC9D;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,KACF;AAEJ;","names":[]}

package/dist/popover.d.ts

@@ -0,0 +1,18 @@
+import { Popover as Popover$1 } from 'radix-ui';
+import * as React from 'react';
+
+type PopoverContentProps = React.ComponentProps<typeof Popover$1.Content> & {
+    /** The element the portal renders into (default: document.body). */
+    container?: HTMLElement | null;
+};
+declare function PopoverContent({ sideOffset, collisionPadding, container, className, ...props }: PopoverContentProps): React.JSX.Element;
+/** `Popover.Root/Trigger/Anchor/Content/Close`. `open`/`defaultOpen` + `onOpenChange`. */
+declare const Popover: {
+    Root: React.FC<Popover$1.PopoverProps>;
+    Trigger: React.ForwardRefExoticComponent<Popover$1.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Anchor: React.ForwardRefExoticComponent<Popover$1.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<Popover$1.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: typeof PopoverContent;
+};
+
+export { Popover, PopoverContent, type PopoverContentProps };

package/dist/popover.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  floating
+} from "./chunk-J3NC6ER4.js";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/popover/popover.tsx
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+function PopoverContent({ sideOffset = 8, collisionPadding = 8, container, className, ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      sideOffset,
+      collisionPadding,
+      className: cn(floating, "w-72 max-w-(--radix-popover-content-available-width) p-4 origin-(--radix-popover-content-transform-origin)", className),
+      ...props
+    }
+  ) });
+}
+var Popover = {
+  Root: PopoverPrimitive.Root,
+  Trigger: PopoverPrimitive.Trigger,
+  Anchor: PopoverPrimitive.Anchor,
+  Close: PopoverPrimitive.Close,
+  Content: PopoverContent
+};
+export {
+  Popover,
+  PopoverContent
+};
+//# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/popover/popover.tsx"],"sourcesContent":["// Client (a portal). Radix places the content, traps nothing, closes on Escape and on an outside click, and returns\n// the focus to the trigger.\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function PopoverContent({ sideOffset = 8, collisionPadding = 8, container, className, ...props }: PopoverContentProps) {\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Content\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cn(floating, \"w-72 max-w-(--radix-popover-content-available-width) p-4 origin-(--radix-popover-content-transform-origin)\", className)}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** `Popover.Root/Trigger/Anchor/Content/Close`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const Popover = {\n  Root: PopoverPrimitive.Root,\n  Trigger: PopoverPrimitive.Trigger,\n  Anchor: PopoverPrimitive.Anchor,\n  Close: PopoverPrimitive.Close,\n  Content: PopoverContent,\n};\n"],"mappings":";;;;;;;;;AAEA,SAAS,WAAW,wBAAwB;AActC;AAHC,SAAS,eAAe,EAAE,aAAa,GAAG,mBAAmB,GAAG,WAAW,WAAW,GAAG,MAAM,GAAwB;AAC5H,SACE,oBAAC,iBAAiB,QAAjB,EAAwB,WACvB;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,UAAU,8GAA8G,SAAS;AAAA,MAC9I,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAGO,IAAM,UAAU;AAAA,EACrB,MAAM,iBAAiB;AAAA,EACvB,SAAS,iBAAiB;AAAA,EAC1B,QAAQ,iBAAiB;AAAA,EACzB,OAAO,iBAAiB;AAAA,EACxB,SAAS;AACX;","names":[]}

package/dist/progress.d.ts

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