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

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-RLOXWF2G.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/separator.d.ts

@@ -0,0 +1,24 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { Separator as Separator$1 } from 'radix-ui';
+import * as React from 'react';
+
+declare const separatorVariants: tailwind_variants.TVReturnType<{
+    orientation: {
+        horizontal: "h-px w-full";
+        vertical: "h-full w-px self-stretch";
+    };
+}, undefined, "shrink-0 bg-border-default", {
+    orientation: {
+        horizontal: "h-px w-full";
+        vertical: "h-full w-px self-stretch";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    orientation: {
+        horizontal: "h-px w-full";
+        vertical: "h-full w-px self-stretch";
+    };
+}, undefined>>;
+type SeparatorProps = React.ComponentProps<typeof Separator$1.Root>;
+declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): React.JSX.Element;
+
+export { Separator, type SeparatorProps, separatorVariants };

package/dist/separator.js

@@ -0,0 +1,17 @@
+// src/separator/separator.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var separatorVariants = tv({
+  base: "shrink-0 bg-border-default",
+  variants: { orientation: { horizontal: "h-px w-full", vertical: "h-full w-px self-stretch" } },
+  defaultVariants: { orientation: "horizontal" }
+});
+function Separator({ orientation = "horizontal", decorative = true, className, ...props }) {
+  return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, { orientation, decorative, className: separatorVariants({ orientation, className }), ...props });
+}
+export {
+  Separator,
+  separatorVariants
+};
+//# sourceMappingURL=separator.js.map

package/dist/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/separator/separator.tsx"],"sourcesContent":["// Server-safe. A line between groups: decorative by default (hidden from assistive technology), or a real\n// `role=\"separator\"` with `decorative={false}`.\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const separatorVariants = tv({\n  base: \"shrink-0 bg-border-default\",\n  variants: { orientation: { horizontal: \"h-px w-full\", vertical: \"h-full w-px self-stretch\" } },\n  defaultVariants: { orientation: \"horizontal\" },\n});\n\nexport type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive.Root>;\n\nexport function Separator({ orientation = \"horizontal\", decorative = true, className, ...props }: SeparatorProps) {\n  return <SeparatorPrimitive.Root orientation={orientation} decorative={decorative} className={separatorVariants({ orientation, className })} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,aAAa,0BAA0B;AAEhD,SAAS,UAAU;AAWV;AATF,IAAM,oBAAoB,GAAG;AAAA,EAClC,MAAM;AAAA,EACN,UAAU,EAAE,aAAa,EAAE,YAAY,eAAe,UAAU,2BAA2B,EAAE;AAAA,EAC7F,iBAAiB,EAAE,aAAa,aAAa;AAC/C,CAAC;AAIM,SAAS,UAAU,EAAE,cAAc,cAAc,aAAa,MAAM,WAAW,GAAG,MAAM,GAAmB;AAChH,SAAO,oBAAC,mBAAmB,MAAnB,EAAwB,aAA0B,YAAwB,WAAW,kBAAkB,EAAE,aAAa,UAAU,CAAC,GAAI,GAAG,OAAO;AACzJ;","names":[]}

package/dist/stat.d.ts

@@ -0,0 +1,75 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const stat: tailwind_variants.TVReturnType<{
+    trend: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        flat: {
+            trend: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    meta: string;
+    trend: string;
+    hint: string;
+}, undefined, {
+    trend: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        flat: {
+            trend: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    meta: string;
+    trend: string;
+    hint: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    trend: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        flat: {
+            trend: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    meta: string;
+    trend: string;
+    hint: string;
+}>>;
+type StatTrend = "up" | "down" | "flat";
+type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** A line under the value: the period, the comparison. */
+    hint?: React.ReactNode;
+    /** The direction of the change; its arrow is decorative. */
+    trend?: StatTrend;
+    /** The change, in words, as read and shown (e.g. "+12 % vs last week") — the arrow alone says nothing. */
+    trendLabel?: React.ReactNode;
+};
+declare function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps): React.JSX.Element;
+
+export { Stat, type StatProps, type StatTrend, stat };

package/dist/stat.js

@@ -0,0 +1,42 @@
+// src/stat/stat.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var stat = tv({
+  slots: {
+    root: "flex min-w-0 flex-col gap-1",
+    label: "text-xs font-semibold uppercase tracking-wider text-fg-secondary",
+    value: "font-display text-2xl font-black tabular-nums text-fg",
+    meta: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs",
+    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries
+    // the direction's colour.
+    trend: "inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0",
+    hint: "text-fg-secondary"
+  },
+  variants: {
+    trend: {
+      up: { trend: "[&>svg]:text-success" },
+      down: { trend: "[&>svg]:text-danger" },
+      flat: { trend: "[&>svg]:text-fg-secondary" }
+    }
+  }
+});
+var ARROW = { up: "M7 17 17 7M8 7h9v9", down: "M7 7l10 10M17 8v9H8", flat: "M5 12h14M13 6l6 6-6 6" };
+function Stat({ label, value, hint, trend, trendLabel, className, ...props }) {
+  const s = stat({ trend });
+  return /* @__PURE__ */ jsxs("div", { "data-trend": trend, className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsx("p", { className: s.label(), children: label }),
+    /* @__PURE__ */ jsx("p", { className: s.value(), children: value }),
+    (trendLabel || hint) && /* @__PURE__ */ jsxs("p", { className: s.meta(), children: [
+      trend && trendLabel && /* @__PURE__ */ jsxs("span", { className: s.trend(), 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: ARROW[trend] }) }),
+        trendLabel
+      ] }),
+      hint && /* @__PURE__ */ jsx("span", { className: s.hint(), children: hint })
+    ] })
+  ] });
+}
+export {
+  Stat,
+  stat
+};
+//# sourceMappingURL=stat.js.map

package/dist/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AAyCb,cAKM,YALN;AAvCC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAazH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,WAAW,GAAG,MAAM,GAAc;AAC9F,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/theme.js

@@ -1,32 +1,11 @@
 "use client";
+import {
+  buttonVariants
+} from "./chunk-QRG5RYEI.js";
 
 // src/theme/theme.tsx
 import * as React from "react";
-
-// src/button/button.tsx
-import { Slot } from "radix-ui";
-import { tv } from "tailwind-variants";
-import { jsx } from "react/jsx-runtime";
-var buttonVariants = tv({
-  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]",
-  variants: {
-    variant: {
-      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
-      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
-      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent",
-      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
-      // The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a
-      // text role, the border and the tint carry the danger.
-      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
-    },
-    size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
-    shape: { rounded: "rounded-lg", pill: "rounded-full" }
-  },
-  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
-});
-
-// src/theme/theme.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MODE_KEY = "kz-theme";
 var NAME_KEY = "kz-theme-name";
 var MODES = ["dark", "light", "system"];
@@ -70,7 +49,7 @@ function applyName(previous, next) {
 }
 function ThemeScript({ nonce }) {
   const js = `(function(){try{var m=localStorage.getItem("${MODE_KEY}")||"system";var n=localStorage.getItem("${NAME_KEY}");var d=matchMedia("${DARK_QUERY}").matches;var c=document.documentElement.classList;c.toggle("light",m==="light"||(m==="system"&&!d));if(n)c.add("theme-"+n)}catch(e){}})()`;
-  return /* @__PURE__ */ jsx2("script", { nonce, dangerouslySetInnerHTML: { __html: js } });
+  return /* @__PURE__ */ jsx("script", { nonce, dangerouslySetInnerHTML: { __html: js } });
 }
 var ThemeContext = React.createContext(null);
 function ThemeProvider({ children, defaultMode = "system" }) {
@@ -95,7 +74,7 @@ function ThemeProvider({ children, defaultMode = "system" }) {
     notify();
   }, []);
   const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);
-  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
   const context = React.useContext(ThemeContext);
@@ -103,21 +82,21 @@ function useTheme() {
   return context;
 }
 var ICONS = {
-  dark: /* @__PURE__ */ jsx2("path", { d: "M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" }),
+  dark: /* @__PURE__ */ jsx("path", { d: "M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" }),
   light: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "4" }),
-    /* @__PURE__ */ jsx2("path", { d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" })
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" })
   ] }),
   system: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "M8 20h8M12 16v4" })
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 20h8M12 16v4" })
   ] })
 };
 function ThemeToggle({ label, variant = "ghost", shape, className, ...props }) {
   const { mode, setMode } = useTheme();
   const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length];
   const name = typeof label === "function" ? label(mode) : label;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -127,7 +106,7 @@ function ThemeToggle({ label, variant = "ghost", shape, className, ...props }) {
       onClick: () => setMode(next),
       className: buttonVariants({ variant, shape, size: "icon", className }),
       ...props,
-      children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: ICONS[mode] })
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: ICONS[mode] })
     }
   );
 }

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme/theme.tsx","../src/button/button.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\n/**\n * In <head>, before anything renders: applies the persisted mode and named theme, so the page never flashes.\n * `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce }: { nonce?: string }) {\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\")||\"system\";var n=localStorage.getItem(\"${NAME_KEY}\");` +\n    `var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /** The mode before anything is persisted. */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n","// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const buttonVariants = tv({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a\n      // text role, the border and the tint carry the danger.\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one. */\n    loading?: boolean;\n  };\n\nexport function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({ variant, size, shape, className })}\n      {...props}\n    />\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. */\nexport function IconButton({ label, size = \"icon\", ...props }: IconButtonProps) {\n  return <Button aria-label={label} title={label} size={size} {...props} />;\n}\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../src/theme/theme.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\n/**\n * In <head>, before anything renders: applies the persisted mode and named theme, so the page never flashes.\n * `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce }: { nonce?: string }) {\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\")||\"system\";var n=localStorage.getItem(\"${NAME_KEY}\");` +\n    `var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /** The mode before anything is persisted. */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/toast.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ToasterProps as ToasterProps$1 } from 'sonner';
+export { ExternalToast, toast } from 'sonner';
+
+declare const toastClassNames: {
+    toast: string;
+    default: string;
+    title: string;
+    description: string;
+    content: string;
+    icon: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    loading: string;
+    actionButton: string;
+    cancelButton: string;
+    closeButton: string;
+};
+type ToasterProps = Omit<ToasterProps$1, "richColors" | "theme" | "containerAriaLabel" | "toastOptions"> & {
+    /** The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated. */
+    label: string;
+    /** The accessible name of each toast's close button — passed translated. */
+    closeLabel: string;
+    /** Extra options for every toast (duration, a className); the class names are merged with the platform's. */
+    toastOptions?: Omit<NonNullable<ToasterProps$1["toastOptions"]>, "unstyled" | "closeButtonAriaLabel">;
+};
+/** Mount once, in the root layout. Then call `toast()`, `toast.success/warning/error/info`, `toast.custom(…)`. */
+declare function Toaster({ label, closeLabel, position, closeButton, toastOptions, ...props }: ToasterProps): React.JSX.Element;
+
+export { Toaster, type ToasterProps, toastClassNames };

package/dist/toast.js

@@ -0,0 +1,49 @@
+"use client";
+import {
+  cn
+} from "./chunk-RLOXWF2G.js";
+
+// src/toast/toast.tsx
+import { Toaster as Sonner } from "sonner";
+import { toast } from "sonner";
+import { jsx } from "react/jsx-runtime";
+var tone = (color) => cn("border-l-4", color);
+var toastClassNames = {
+  toast: "group pointer-events-auto relative flex w-full items-start gap-3 rounded-xl border border-border-default bg-surface-2 p-4 pr-10 text-sm text-fg shadow-lg",
+  default: "",
+  title: "font-semibold text-fg",
+  description: "mt-0.5 text-xs text-fg-secondary",
+  content: "flex min-w-0 flex-1 flex-col",
+  icon: "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+  success: tone("border-l-success [&_[data-icon]]:text-success"),
+  warning: tone("border-l-warning [&_[data-icon]]:text-warning"),
+  error: tone("border-l-danger [&_[data-icon]]:text-danger"),
+  info: tone("border-l-info [&_[data-icon]]:text-info"),
+  loading: "",
+  actionButton: "ml-auto shrink-0 self-center rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+  cancelButton: "shrink-0 self-center rounded-lg px-3 py-1.5 text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+  closeButton: "absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&>svg]:h-3.5 [&>svg]:w-3.5"
+};
+function Toaster({ label, closeLabel, position = "bottom-right", closeButton = true, toastOptions, ...props }) {
+  const extra = toastOptions?.classNames ?? {};
+  const classNames = Object.fromEntries(
+    Object.entries(toastClassNames).map(([key, value]) => [key, cn(value, extra[key])])
+  );
+  return /* @__PURE__ */ jsx(
+    Sonner,
+    {
+      position,
+      closeButton,
+      containerAriaLabel: label,
+      richColors: false,
+      toastOptions: { ...toastOptions, unstyled: true, closeButtonAriaLabel: closeLabel, classNames },
+      ...props
+    }
+  );
+}
+export {
+  Toaster,
+  toast,
+  toastClassNames
+};
+//# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toast/toast.tsx"],"sourcesContent":["// Client. sonner does the queue, the stacking, the swipe, the timers, the live region and the hotkey; the look is\n// ours: sonner's own styling is off (`unstyled`) and every part reads a role. The status tones are soft (a tinted\n// border and a coloured icon, the text stays `text-fg`): the invariant status tokens are too light for small text.\nimport { Toaster as Sonner, type ToasterProps as SonnerProps } from \"sonner\";\n\nimport { cn } from \"../cn\";\n\nexport type { ExternalToast } from \"sonner\";\nexport { toast } from \"sonner\";\n\nconst tone = (color: string) => cn(\"border-l-4\", color);\n\nexport const toastClassNames = {\n  toast:\n    \"group pointer-events-auto relative flex w-full items-start gap-3 rounded-xl border border-border-default bg-surface-2 p-4 pr-10 \" +\n    \"text-sm text-fg shadow-lg\",\n  default: \"\",\n  title: \"font-semibold text-fg\",\n  description: \"mt-0.5 text-xs text-fg-secondary\",\n  content: \"flex min-w-0 flex-1 flex-col\",\n  icon: \"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4\",\n  success: tone(\"border-l-success [&_[data-icon]]:text-success\"),\n  warning: tone(\"border-l-warning [&_[data-icon]]:text-warning\"),\n  error: tone(\"border-l-danger [&_[data-icon]]:text-danger\"),\n  info: tone(\"border-l-info [&_[data-icon]]:text-info\"),\n  loading: \"\",\n  actionButton:\n    \"ml-auto shrink-0 self-center rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-hover \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  cancelButton:\n    \"shrink-0 self-center rounded-lg px-3 py-1.5 text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  closeButton:\n    \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&>svg]:h-3.5 [&>svg]:w-3.5\",\n} satisfies NonNullable<NonNullable<SonnerProps[\"toastOptions\"]>[\"classNames\"]>;\n\nexport type ToasterProps = Omit<SonnerProps, \"richColors\" | \"theme\" | \"containerAriaLabel\" | \"toastOptions\"> & {\n  /** The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated. */\n  label: string;\n  /** The accessible name of each toast's close button — passed translated. */\n  closeLabel: string;\n  /** Extra options for every toast (duration, a className); the class names are merged with the platform's. */\n  toastOptions?: Omit<NonNullable<SonnerProps[\"toastOptions\"]>, \"unstyled\" | \"closeButtonAriaLabel\">;\n};\n\n/** Mount once, in the root layout. Then call `toast()`, `toast.success/warning/error/info`, `toast.custom(…)`. */\nexport function Toaster({ label, closeLabel, position = \"bottom-right\", closeButton = true, toastOptions, ...props }: ToasterProps) {\n  const extra = toastOptions?.classNames ?? {};\n  const classNames = Object.fromEntries(\n    Object.entries(toastClassNames).map(([key, value]) => [key, cn(value, extra[key as keyof typeof extra])]),\n  ) as typeof toastClassNames;\n  return (\n    <Sonner\n      position={position}\n      closeButton={closeButton}\n      containerAriaLabel={label}\n      richColors={false}\n      toastOptions={{ ...toastOptions, unstyled: true, closeButtonAriaLabel: closeLabel, classNames }}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAGA,SAAS,WAAW,cAAgD;AAKpE,SAAS,aAAa;AA6ClB;AA3CJ,IAAM,OAAO,CAAC,UAAkB,GAAG,cAAc,KAAK;AAE/C,IAAM,kBAAkB;AAAA,EAC7B,OACE;AAAA,EAEF,SAAS;AAAA,EACT,OAAO;AAAA,EACP,aAAa;AAAA,EACb,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS,KAAK,+CAA+C;AAAA,EAC7D,SAAS,KAAK,+CAA+C;AAAA,EAC7D,OAAO,KAAK,6CAA6C;AAAA,EACzD,MAAM,KAAK,yCAAyC;AAAA,EACpD,SAAS;AAAA,EACT,cACE;AAAA,EAEF,cACE;AAAA,EAEF,aACE;AAEJ;AAYO,SAAS,QAAQ,EAAE,OAAO,YAAY,WAAW,gBAAgB,cAAc,MAAM,cAAc,GAAG,MAAM,GAAiB;AAClI,QAAM,QAAQ,cAAc,cAAc,CAAC;AAC3C,QAAM,aAAa,OAAO;AAAA,IACxB,OAAO,QAAQ,eAAe,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,GAAG,OAAO,MAAM,GAAyB,CAAC,CAAC,CAAC;AAAA,EAC1G;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,YAAY;AAAA,MACZ,cAAc,EAAE,GAAG,cAAc,UAAU,MAAM,sBAAsB,YAAY,WAAW;AAAA,MAC7F,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/tooltip.d.ts

@@ -0,0 +1,21 @@
+import { Tooltip as Tooltip$1 } from 'radix-ui';
+import * as React from 'react';
+
+/** Optional, once near the root: shares `delayDuration` and the skip delay between tooltips. */
+declare const TooltipProvider: React.FC<Tooltip$1.TooltipProviderProps>;
+type TooltipProps = Omit<React.ComponentProps<typeof Tooltip$1.Content>, "content" | "children"> & {
+    /** What the tooltip says — passed translated. */
+    content: React.ReactNode;
+    /** The trigger, rendered as is (`asChild`): a focusable element. */
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Hover delay in ms before it opens (300 by default). */
+    delayDuration?: number;
+    /** The element the portal renders into (default: document.body). */
+    container?: HTMLElement | null;
+};
+declare function Tooltip({ content, children, open, defaultOpen, onOpenChange, delayDuration, container, sideOffset, collisionPadding, className, ...props }: TooltipProps): React.JSX.Element;
+
+export { Tooltip, type TooltipProps, TooltipProvider };

package/dist/tooltip.js

@@ -0,0 +1,44 @@
+"use client";
+import {
+  floating
+} from "./chunk-J3NC6ER4.js";
+import {
+  cn
+} from "./chunk-RLOXWF2G.js";
+
+// src/tooltip/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  content,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 300,
+  container,
+  sideOffset = 6,
+  collisionPadding = 8,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+      TooltipPrimitive.Content,
+      {
+        sideOffset,
+        collisionPadding,
+        className: cn(floating, "max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)", className),
+        ...props,
+        children: content
+      }
+    ) })
+  ] }) });
+}
+export {
+  Tooltip,
+  TooltipProvider
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/tooltip.tsx"],"sourcesContent":["// Client (a portal). A short label for a control, on hover after `delayDuration` and on keyboard focus at once;\n// Escape dismisses it. It names nothing: the control keeps its own accessible name (an IconButton's `label`).\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\n/** Optional, once near the root: shares `delayDuration` and the skip delay between tooltips. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport type TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, \"content\" | \"children\"> & {\n  /** What the tooltip says — passed translated. */\n  content: React.ReactNode;\n  /** The trigger, rendered as is (`asChild`): a focusable element. */\n  children: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Hover delay in ms before it opens (300 by default). */\n  delayDuration?: number;\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function Tooltip({\n  content,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration = 300,\n  container,\n  sideOffset = 6,\n  collisionPadding = 8,\n  className,\n  ...props\n}: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            className={cn(floating, \"max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)\", className)}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;AAEA,SAAS,WAAW,wBAAwB;AAsCtC,SACE,KADF;AA/BC,IAAM,kBAAkB,iBAAiB;AAgBzC,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,eACzB,+BAAC,iBAAiB,MAAjB,EAAsB,MAAY,aAA0B,cAC3D;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,SAAO,MAAE,UAAS;AAAA,IAC5C,oBAAC,iBAAiB,QAAjB,EAAwB,WACvB;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,UAAU,gGAAgG,SAAS;AAAA,QAChI,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}