@krizaka/ui 1.3.0 → 2.0.0-beta.1

package/dist/empty-state.js

@@ -0,0 +1,26 @@
+// src/empty-state/empty-state.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var emptyState = tv({
+  slots: {
+    root: "flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-default px-6 py-10 text-center",
+    icon: "flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-fg-secondary [&>svg]:h-6 [&>svg]:w-6",
+    title: "text-sm font-semibold text-fg",
+    description: "max-w-sm text-sm text-fg-secondary",
+    action: "mt-1 flex flex-wrap items-center justify-center gap-2"
+  }
+});
+var s = emptyState();
+function EmptyState({ icon, title, description, action, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: s.root({ className }), ...props, children: [
+    icon && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.icon(), children: icon }),
+    /* @__PURE__ */ jsx("p", { className: s.title(), children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: s.description(), children: description }),
+    action && /* @__PURE__ */ jsx("div", { className: s.action(), children: action })
+  ] });
+}
+export {
+  EmptyState,
+  emptyState
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/empty-state/empty-state.tsx"],"sourcesContent":["// Server-safe. What a list, a search or a panel says when it has nothing to show — every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const emptyState = tv({\n  slots: {\n    root: \"flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-default px-6 py-10 text-center\",\n    icon: \"flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-fg-secondary [&>svg]:h-6 [&>svg]:w-6\",\n    title: \"text-sm font-semibold text-fg\",\n    description: \"max-w-sm text-sm text-fg-secondary\",\n    action: \"mt-1 flex flex-wrap items-center justify-center gap-2\",\n  },\n});\nconst s = emptyState();\n\nexport type EmptyStateProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** A decorative icon (hidden from assistive technology). */\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** What to do next: a Button, a link. */\n  action?: React.ReactNode;\n};\n\nexport function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps) {\n  return (\n    <div role=\"status\" className={s.root({ className })} {...props}>\n      {icon && (\n        <div aria-hidden className={s.icon()}>\n          {icon}\n        </div>\n      )}\n      <p className={s.title()}>{title}</p>\n      {description && <p className={s.description()}>{description}</p>}\n      {action && <div className={s.action()}>{action}</div>}\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AAwBf,SAEI,KAFJ;AAtBG,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ;AAAA,EACV;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAWd,SAAS,WAAW,EAAE,MAAM,OAAO,aAAa,QAAQ,WAAW,GAAG,MAAM,GAAoB;AACrG,SACE,qBAAC,SAAI,MAAK,UAAS,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACtD;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAC/B,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,IAC3D,UAAU,oBAAC,SAAI,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,KACjD;AAEJ;","names":[]}

package/dist/field.d.ts

@@ -0,0 +1,80 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const field: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            selectWrap?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            selectWrap?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    control: string;
+    hint: string;
+    error: string;
+    selectWrap: string;
+    chevron: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            selectWrap?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    control: string;
+    hint: string;
+    error: string;
+    selectWrap: string;
+    chevron: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    label: string;
+    control: string;
+    hint: string;
+    error: string;
+    selectWrap: string;
+    chevron: string;
+}>>;
+declare const Field: {
+    Root: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+    Label: ({ className, ...props }: React.ComponentProps<"label">) => React.JSX.Element;
+    Hint: ({ className, ...props }: React.ComponentProps<"p">) => React.JSX.Element;
+    Error: ({ className, ...props }: React.ComponentProps<"p">) => React.JSX.Element;
+};
+type ControlProps = {
+    /** Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */
+    invalid?: boolean;
+};
+declare function Input({ invalid, className, ...props }: React.ComponentProps<"input"> & ControlProps): React.JSX.Element;
+declare function Textarea({ invalid, className, ...props }: React.ComponentProps<"textarea"> & ControlProps): React.JSX.Element;
+/** A native <select>, styled like the other controls (the platform's menu: accessible and right on phones). */
+declare function Select({ invalid, className, ...props }: React.ComponentProps<"select"> & ControlProps): React.JSX.Element;
+
+export { Field, Input, Select, Textarea, field };

package/dist/field.js

@@ -0,0 +1,47 @@
+import {
+  cn
+} from "./chunk-CPMZS4XA.js";
+
+// src/field/field.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var field = tv({
+  slots: {
+    root: "flex flex-col gap-1.5",
+    label: "text-xs font-semibold text-fg-secondary",
+    control: "flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30",
+    hint: "text-xs text-fg-secondary",
+    // The danger token is too light for small text on a light surface: the message is a text role, the dot says danger.
+    error: "flex items-center gap-1.5 text-xs font-medium text-fg before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger",
+    selectWrap: "relative flex w-full",
+    chevron: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary"
+  }
+});
+var s = field();
+var Field = {
+  Root: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: s.root({ className }), ...props }),
+  Label: ({ className, ...props }) => /* @__PURE__ */ jsx("label", { className: s.label({ className }), ...props }),
+  Hint: ({ className, ...props }) => /* @__PURE__ */ jsx("p", { className: s.hint({ className }), ...props }),
+  Error: ({ className, ...props }) => /* @__PURE__ */ jsx("p", { role: "alert", className: s.error({ className }), ...props })
+};
+var invalidProps = (invalid) => invalid ? { "aria-invalid": true, "data-invalid": "" } : {};
+function Input({ invalid, className, ...props }) {
+  return /* @__PURE__ */ jsx("input", { ...invalidProps(invalid), className: s.control({ className }), ...props });
+}
+function Textarea({ invalid, className, ...props }) {
+  return /* @__PURE__ */ jsx("textarea", { ...invalidProps(invalid), className: s.control({ className: cn("h-auto min-h-24 py-2", className) }), ...props });
+}
+function Select({ invalid, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: s.selectWrap(), children: [
+    /* @__PURE__ */ jsx("select", { ...invalidProps(invalid), className: s.control({ className: cn("appearance-none pr-9", className) }), ...props }),
+    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, className: s.chevron(), children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) })
+  ] });
+}
+export {
+  Field,
+  Input,
+  Select,
+  Textarea,
+  field
+};
+//# sourceMappingURL=field.js.map

package/dist/field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/field.tsx"],"sourcesContent":["// Server-safe. The label ↔ control wiring is HTML (htmlFor / id, aria-describedby): no context.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\n\nexport const field = tv({\n  slots: {\n    root: \"flex flex-col gap-1.5\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    control:\n      \"flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted \" +\n      \"transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    hint: \"text-xs text-fg-secondary\",\n    // The danger token is too light for small text on a light surface: the message is a text role, the dot says danger.\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n    selectWrap: \"relative flex w-full\",\n    chevron: \"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary\",\n  },\n});\nconst s = field();\n\nexport const Field = {\n  Root: ({ className, ...props }: React.ComponentProps<\"div\">) => <div className={s.root({ className })} {...props} />,\n  Label: ({ className, ...props }: React.ComponentProps<\"label\">) => <label className={s.label({ className })} {...props} />,\n  Hint: ({ className, ...props }: React.ComponentProps<\"p\">) => <p className={s.hint({ className })} {...props} />,\n  Error: ({ className, ...props }: React.ComponentProps<\"p\">) => <p role=\"alert\" className={s.error({ className })} {...props} />,\n};\n\ntype ControlProps = {\n  /** Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n};\n\nconst invalidProps = (invalid?: boolean) => (invalid ? { \"aria-invalid\": true as const, \"data-invalid\": \"\" } : {});\n\nexport function Input({ invalid, className, ...props }: React.ComponentProps<\"input\"> & ControlProps) {\n  return <input {...invalidProps(invalid)} className={s.control({ className })} {...props} />;\n}\n\nexport function Textarea({ invalid, className, ...props }: React.ComponentProps<\"textarea\"> & ControlProps) {\n  return <textarea {...invalidProps(invalid)} className={s.control({ className: cn(\"h-auto min-h-24 py-2\", className) })} {...props} />;\n}\n\n/** A native <select>, styled like the other controls (the platform's menu: accessible and right on phones). */\nexport function Select({ invalid, className, ...props }: React.ComponentProps<\"select\"> & ControlProps) {\n  return (\n    <span className={s.selectWrap()}>\n      <select {...invalidProps(invalid)} className={s.control({ className: cn(\"appearance-none pr-9\", className) })} {...props} />\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={s.chevron()}>\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </span>\n  );\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AAsB+C,cAwB9D,YAxB8D;AAlB3D,IAAM,QAAQ,GAAG;AAAA,EACtB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SACE;AAAA,IAGF,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,MAAM;AAET,IAAM,QAAQ;AAAA,EACnB,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,MAAmC,oBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EAClH,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,MAAqC,oBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EACxH,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,MAAiC,oBAAC,OAAE,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EAC9G,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,MAAiC,oBAAC,OAAE,MAAK,SAAQ,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC/H;AAOA,IAAM,eAAe,CAAC,YAAuB,UAAU,EAAE,gBAAgB,MAAe,gBAAgB,GAAG,IAAI,CAAC;AAEzG,SAAS,MAAM,EAAE,SAAS,WAAW,GAAG,MAAM,GAAiD;AACpG,SAAO,oBAAC,WAAO,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3F;AAEO,SAAS,SAAS,EAAE,SAAS,WAAW,GAAG,MAAM,GAAoD;AAC1G,SAAO,oBAAC,cAAU,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,wBAAwB,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AACrI;AAGO,SAAS,OAAO,EAAE,SAAS,WAAW,GAAG,MAAM,GAAkD;AACtG,SACE,qBAAC,UAAK,WAAW,EAAE,WAAW,GAC5B;AAAA,wBAAC,YAAQ,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,wBAAwB,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AAAA,IAC1H,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MAAC,WAAW,EAAE,QAAQ,GACvJ,8BAAC,UAAK,GAAE,gBAAe,GACzB;AAAA,KACF;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 
 /** Joins class names, skipping the falsy ones. */
 declare function cx(...parts: Array<string | false | null | undefined>): string;
@@ -14,22 +14,22 @@ interface MarkProps {
 }
 
 /** The Krizaka mark: a hexagonal shield with a neural core, inside slow orbits. Blue accent: `--kz-accent`. */
-declare function KrizakaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+declare function KrizakaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
 /** The Orazaka mark: three shards orbiting slowly around an amber core that breathes. */
-declare function OrazakaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+declare function OrazakaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
 /**
  * The Orochia mark: the serpent (Orochi) coiled into an "O" around the flame it guards. The orbit turns, scales slide
  * along the body, the eye and the flame breathe. Below 48 px it crops to the serpent: the orbits would be hairlines.
  */
-declare function OrochiaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+declare function OrochiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
 type BrandId = "krizaka" | "orazaka" | "orochia";
 /** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */
 declare function ProductLogo({ id, ...props }: MarkProps & {
     id: BrandId;
-}): react.JSX.Element;
+}): React.JSX.Element;
 
 /**
  * Mount once at the root of the app. It reveals every `[data-reveal]` element as it enters the viewport — including
@@ -48,6 +48,6 @@ declare function RotatingWord({ words, interval, className }: {
     words: readonly string[];
     interval?: number;
     className?: string;
-}): react.JSX.Element;
+}): React.JSX.Element;
 
 export { type BrandId, KrizakaLogo, type MarkProps, MotionObserver, OrazakaLogo, OrochiaLogo, ProductLogo, RotatingWord, cx };

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

@@ -0,0 +1,28 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const skeletonVariants: tailwind_variants.TVReturnType<{
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined, "block bg-surface-3 motion-safe:animate-pulse", {
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined>>;
+type SkeletonProps = React.ComponentProps<"span"> & VariantProps<typeof skeletonVariants>;
+/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */
+declare function Skeleton({ shape, className, ...props }: SkeletonProps): React.JSX.Element;
+
+export { Skeleton, type SkeletonProps, skeletonVariants };

package/dist/skeleton.js

@@ -0,0 +1,18 @@
+// src/skeleton/skeleton.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var skeletonVariants = tv({
+  base: "block bg-surface-3 motion-safe:animate-pulse",
+  variants: {
+    shape: { text: "h-3 w-full rounded-sm", circle: "aspect-square h-10 rounded-full", rect: "h-24 w-full rounded-lg" }
+  },
+  defaultVariants: { shape: "text" }
+});
+function Skeleton({ shape, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-shape": shape ?? "text", className: skeletonVariants({ shape, className }), ...props });
+}
+export {
+  Skeleton,
+  skeletonVariants
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"block bg-surface-3 motion-safe:animate-pulse\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & VariantProps<typeof skeletonVariants>;\n\n/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAc7B;AAZF,IAAM,mBAAmB,GAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO,EAAE,MAAM,yBAAyB,QAAQ,mCAAmC,MAAM,yBAAyB;AAAA,EACpH;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAKM,SAAS,SAAS,EAAE,OAAO,WAAW,GAAG,MAAM,GAAkB;AACtE,SAAO,oBAAC,UAAK,eAAW,MAAC,cAAY,SAAS,QAAQ,WAAW,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACtH;","names":[]}

package/dist/slot.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from 'react';
+import { VisuallyHidden as VisuallyHidden$1 } from 'radix-ui';
+
+/** Merges its props, `className` and `ref` into its only child: the engine of every `asChild`. */
+declare const Slot: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+} & React$1.RefAttributes<HTMLElement>>;
+/** Hidden on screen, read by assistive technology. */
+declare const VisuallyHidden: React$1.ForwardRefExoticComponent<VisuallyHidden$1.VisuallyHiddenProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+export { Slot, VisuallyHidden };

package/dist/slot.js

@@ -0,0 +1,9 @@
+// src/slot/index.ts
+import { Slot as SlotPrimitive, VisuallyHidden as VisuallyHiddenPrimitive } from "radix-ui";
+var Slot = SlotPrimitive.Root;
+var VisuallyHidden = VisuallyHiddenPrimitive.Root;
+export {
+  Slot,
+  VisuallyHidden
+};
+//# sourceMappingURL=slot.js.map

package/dist/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slot/index.ts"],"sourcesContent":["/** @krizaka/ui/slot — `Slot` (what `asChild` renders) and `VisuallyHidden` (a name for assistive technology only), from Radix. */\nimport { Slot as SlotPrimitive, VisuallyHidden as VisuallyHiddenPrimitive } from \"radix-ui\";\n\n/** Merges its props, `className` and `ref` into its only child: the engine of every `asChild`. */\nexport const Slot = SlotPrimitive.Root;\n/** Hidden on screen, read by assistive technology. */\nexport const VisuallyHidden = VisuallyHiddenPrimitive.Root;\n"],"mappings":";AACA,SAAS,QAAQ,eAAe,kBAAkB,+BAA+B;AAG1E,IAAM,OAAO,cAAc;AAE3B,IAAM,iBAAiB,wBAAwB;","names":[]}

package/dist/spinner.d.ts

@@ -0,0 +1,31 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const spinnerVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined, "shrink-0 text-accent motion-safe:animate-spin", {
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined>>;
+type SpinnerProps = Omit<React.ComponentProps<"svg">, "children"> & VariantProps<typeof spinnerVariants> & {
+    /** The accessible name of the wait, e.g. "Loading" — passed translated. */
+    label: string;
+};
+/** A turning ring with `role="status"` (it stops turning under prefers-reduced-motion). */
+declare function Spinner({ label, size, className, ...props }: SpinnerProps): React.JSX.Element;
+
+export { Spinner, type SpinnerProps, spinnerVariants };

package/dist/spinner.js

@@ -0,0 +1,31 @@
+// src/spinner/spinner.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var spinnerVariants = tv({
+  base: "shrink-0 text-accent motion-safe:animate-spin",
+  variants: { size: { sm: "h-4 w-4", md: "h-6 w-6", lg: "h-10 w-10" } },
+  defaultVariants: { size: "md" }
+});
+function Spinner({ label, size, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      role: "status",
+      "aria-label": label,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "data-size": size ?? "md",
+      className: spinnerVariants({ size, className }),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+export {
+  Spinner,
+  spinnerVariants
+};
+//# sourceMappingURL=spinner.js.map