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

package/registry/demos/countdown.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+
+export default function CountdownDemo() {
+  // One hour, two minutes and three seconds from the first render.
+  const [target] = useState(() => Date.now() + 3_723_000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" />;
+}

package/registry/demos/dialog.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+
+declare function DialogDemo({ defaultOpen }: {
+    defaultOpen?: boolean;
+}): react.JSX.Element;
+
+export { DialogDemo as default };

package/registry/demos/dialog.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/demos/dialog.tsx
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+import { Field, Input } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DialogDemo({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { defaultOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Open" }) }),
+    /* @__PURE__ */ jsxs(Dialog.Content, { closeLabel: "Close", children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { children: "Invite a collaborator" }),
+        /* @__PURE__ */ jsx(Dialog.Description, { children: "They get access to the drafts of this channel." })
+      ] }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { htmlFor: "invite-email", children: "Email" }),
+        /* @__PURE__ */ jsx(Input, { id: "invite-email", type: "email", placeholder: "name@example.com" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Send the invitation" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DialogDemo as default
+};

package/registry/demos/dialog.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+import { Field, Input } from "@krizaka/ui/field";
+
+export default function DialogDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Dialog.Root defaultOpen={defaultOpen}>
+      <Dialog.Trigger asChild>
+        <Button>Open</Button>
+      </Dialog.Trigger>
+      <Dialog.Content closeLabel="Close">
+        <Dialog.Header>
+          <Dialog.Title>Invite a collaborator</Dialog.Title>
+          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Field.Root>
+            <Field.Label htmlFor="invite-email">Email</Field.Label>
+            <Input id="invite-email" type="email" placeholder="name@example.com" />
+          </Field.Root>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close asChild>
+            <Button variant="ghost">Cancel</Button>
+          </Dialog.Close>
+          <Button variant="primary">Send the invitation</Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

package/registry/demos/dropdown-menu.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+
+declare function DropdownMenuDemo({ defaultOpen }: {
+    defaultOpen?: boolean;
+}): react.JSX.Element;
+
+export { DropdownMenuDemo as default };

package/registry/demos/dropdown-menu.js

@@ -0,0 +1,36 @@
+"use client";
+
+// registry/demos/dropdown-menu.tsx
+import { Button } from "@krizaka/ui/button";
+import { DropdownMenu } from "@krizaka/ui/dropdown-menu";
+import { jsx, jsxs } from "react/jsx-runtime";
+var icon = (d) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d }) });
+function DropdownMenuDemo({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { defaultOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Actions" }) }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "center", children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Label, { children: "Video" }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Item, { children: [
+        icon("M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"),
+        "Edit"
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Item, { children: [
+        icon("M4 12v8h16v-8M16 6l-4-4-4 4M12 2v13"),
+        "Share"
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Item, { disabled: true, children: [
+        icon("M12 3v12M7 10l5 5 5-5M5 21h14"),
+        "Download"
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenu.CheckboxItem, { checked: true, children: "Pinned to the profile" }),
+      /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+      /* @__PURE__ */ jsxs(DropdownMenu.Item, { tone: "danger", children: [
+        icon("M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"),
+        "Delete"
+      ] })
+    ] })
+  ] });
+}
+export {
+  DropdownMenuDemo as default
+};

package/registry/demos/dropdown-menu.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@krizaka/ui/button";
+import { DropdownMenu } from "@krizaka/ui/dropdown-menu";
+
+const icon = (d: string) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d={d} />
+  </svg>
+);
+
+export default function DropdownMenuDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>
+      <DropdownMenu.Trigger asChild>
+        <Button variant="outline">Actions</Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="center">
+        <DropdownMenu.Label>Video</DropdownMenu.Label>
+        <DropdownMenu.Item>{icon("M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z")}Edit</DropdownMenu.Item>
+        <DropdownMenu.Item>{icon("M4 12v8h16v-8M16 6l-4-4-4 4M12 2v13")}Share</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>{icon("M12 3v12M7 10l5 5 5-5M5 21h14")}Download</DropdownMenu.Item>
+        <DropdownMenu.CheckboxItem checked>Pinned to the profile</DropdownMenu.CheckboxItem>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item tone="danger">{icon("M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6")}Delete</DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}

package/registry/demos/empty-state.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function EmptyStateDemo(): react.JSX.Element;
+
+export { EmptyStateDemo as default };

package/registry/demos/empty-state.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/demos/empty-state.tsx
+import { EmptyState } from "@krizaka/ui/empty-state";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON = /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "m10 9 5 3-5 3z" })
+] });
+function EmptyStateDemo() {
+  return /* @__PURE__ */ jsx(EmptyState, { icon: ICON, title: "No videos yet", description: "The videos you publish appear here." });
+}
+export {
+  EmptyStateDemo as default
+};

package/registry/demos/empty-state.tsx

@@ -0,0 +1,12 @@
+import { EmptyState } from "@krizaka/ui/empty-state";
+
+const ICON = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="5" width="18" height="14" rx="2" />
+    <path d="m10 9 5 3-5 3z" />
+  </svg>
+);
+
+export default function EmptyStateDemo() {
+  return <EmptyState icon={ICON} title="No videos yet" description="The videos you publish appear here." />;
+}

package/registry/demos/field.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function FieldDemo(): react.JSX.Element;
+
+export { FieldDemo as default };

package/registry/demos/field.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/demos/field.tsx
+import { Field, Input } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldDemo() {
+  return /* @__PURE__ */ jsxs(Field.Root, { children: [
+    /* @__PURE__ */ jsx(Field.Label, { htmlFor: "email", children: "Email" }),
+    /* @__PURE__ */ jsx(Input, { id: "email", type: "email", "aria-describedby": "email-hint", placeholder: "you@example.com" }),
+    /* @__PURE__ */ jsx(Field.Hint, { id: "email-hint", children: "We never share it." })
+  ] });
+}
+export {
+  FieldDemo as default
+};

package/registry/demos/field.tsx

@@ -0,0 +1,11 @@
+import { Field, Input } from "@krizaka/ui/field";
+
+export default function FieldDemo() {
+  return (
+    <Field.Root>
+      <Field.Label htmlFor="email">Email</Field.Label>
+      <Input id="email" type="email" aria-describedby="email-hint" placeholder="you@example.com" />
+      <Field.Hint id="email-hint">We never share it.</Field.Hint>
+    </Field.Root>
+  );
+}

package/registry/demos/kbd.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function KbdDemo(): react.JSX.Element;
+
+export { KbdDemo as default };

package/registry/demos/kbd.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/kbd.tsx
+import { Kbd } from "@krizaka/ui/kbd";
+import { jsx } from "react/jsx-runtime";
+function KbdDemo() {
+  return /* @__PURE__ */ jsx(Kbd, { children: "Esc" });
+}
+export {
+  KbdDemo as default
+};

package/registry/demos/kbd.tsx

@@ -0,0 +1,5 @@
+import { Kbd } from "@krizaka/ui/kbd";
+
+export default function KbdDemo() {
+  return <Kbd>Esc</Kbd>;
+}

package/registry/demos/page-header.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function PageHeaderDemo(): react.JSX.Element;
+
+export { PageHeaderDemo as default };

package/registry/demos/page-header.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/page-header.tsx
+import { PageHeader } from "@krizaka/ui/page-header";
+import { jsx } from "react/jsx-runtime";
+function PageHeaderDemo() {
+  return /* @__PURE__ */ jsx(PageHeader, { title: "Payouts", description: "Your earnings are paid every Monday to the account on file." });
+}
+export {
+  PageHeaderDemo as default
+};

package/registry/demos/page-header.tsx

@@ -0,0 +1,5 @@
+import { PageHeader } from "@krizaka/ui/page-header";
+
+export default function PageHeaderDemo() {
+  return <PageHeader title="Payouts" description="Your earnings are paid every Monday to the account on file." />;
+}

package/registry/demos/popover.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+
+declare function PopoverDemo({ defaultOpen }: {
+    defaultOpen?: boolean;
+}): react.JSX.Element;
+
+export { PopoverDemo as default };

package/registry/demos/popover.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/demos/popover.tsx
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Popover } from "@krizaka/ui/popover";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PopoverDemo({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(Popover.Root, { defaultOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Set a goal" }) }),
+    /* @__PURE__ */ jsx(Popover.Content, { "aria-label": "Set a goal", align: "center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { htmlFor: "goal-amount", children: "Amount" }),
+        /* @__PURE__ */ jsx(Input, { id: "goal-amount", defaultValue: "250" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Popover.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", children: "Save" })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  PopoverDemo as default
+};

package/registry/demos/popover.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Popover } from "@krizaka/ui/popover";
+
+export default function PopoverDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Popover.Root defaultOpen={defaultOpen}>
+      <Popover.Trigger asChild>
+        <Button variant="outline">Set a goal</Button>
+      </Popover.Trigger>
+      <Popover.Content aria-label="Set a goal" align="center">
+        <div className="flex flex-col gap-3">
+          <Field.Root>
+            <Field.Label htmlFor="goal-amount">Amount</Field.Label>
+            <Input id="goal-amount" defaultValue="250" />
+          </Field.Root>
+          <div className="flex justify-end gap-2">
+            <Popover.Close asChild>
+              <Button size="sm" variant="ghost">
+                Cancel
+              </Button>
+            </Popover.Close>
+            <Button size="sm" variant="primary">
+              Save
+            </Button>
+          </div>
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}

package/registry/demos/progress.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function ProgressDemo(): react.JSX.Element;
+
+export { ProgressDemo as default };

package/registry/demos/progress.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/progress.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx } from "react/jsx-runtime";
+function ProgressDemo() {
+  return /* @__PURE__ */ jsx(Progress, { label: "Upload", value: 64 });
+}
+export {
+  ProgressDemo as default
+};

package/registry/demos/progress.tsx

@@ -0,0 +1,5 @@
+import { Progress } from "@krizaka/ui/progress";
+
+export default function ProgressDemo() {
+  return <Progress label="Upload" value={64} />;
+}

package/registry/demos/radio-group.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function RadioGroupDemo(): react.JSX.Element;
+
+export { RadioGroupDemo as default };

package/registry/demos/radio-group.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/demos/radio-group.tsx
+import { RadioGroup } from "@krizaka/ui/radio-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RadioGroupDemo() {
+  return /* @__PURE__ */ jsxs(RadioGroup.Root, { label: "Notification frequency", defaultValue: "daily", children: [
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: "instant", children: "Instantly" }),
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: "daily", children: "Once a day" }),
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: "weekly", children: "Once a week" }),
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: "never", disabled: true, children: "Never" })
+  ] });
+}
+export {
+  RadioGroupDemo as default
+};

package/registry/demos/radio-group.tsx

@@ -0,0 +1,14 @@
+import { RadioGroup } from "@krizaka/ui/radio-group";
+
+export default function RadioGroupDemo() {
+  return (
+    <RadioGroup.Root label="Notification frequency" defaultValue="daily">
+      <RadioGroup.Item value="instant">Instantly</RadioGroup.Item>
+      <RadioGroup.Item value="daily">Once a day</RadioGroup.Item>
+      <RadioGroup.Item value="weekly">Once a week</RadioGroup.Item>
+      <RadioGroup.Item value="never" disabled>
+        Never
+      </RadioGroup.Item>
+    </RadioGroup.Root>
+  );
+}

package/registry/demos/separator.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SeparatorDemo(): react.JSX.Element;
+
+export { SeparatorDemo as default };

package/registry/demos/separator.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/demos/separator.tsx
+import { Separator } from "@krizaka/ui/separator";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SeparatorDemo() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col gap-3 text-sm text-fg", children: [
+    /* @__PURE__ */ jsx("p", { children: "Account" }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx("p", { className: "text-fg-secondary", children: "Notifications" })
+  ] });
+}
+export {
+  SeparatorDemo as default
+};

package/registry/demos/separator.tsx

@@ -0,0 +1,11 @@
+import { Separator } from "@krizaka/ui/separator";
+
+export default function SeparatorDemo() {
+  return (
+    <div className="flex w-72 flex-col gap-3 text-sm text-fg">
+      <p>Account</p>
+      <Separator />
+      <p className="text-fg-secondary">Notifications</p>
+    </div>
+  );
+}

package/registry/demos/skeleton.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SkeletonDemo(): react.JSX.Element;
+
+export { SkeletonDemo as default };

package/registry/demos/skeleton.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/demos/skeleton.tsx
+import { Skeleton } from "@krizaka/ui/skeleton";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SkeletonDemo() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+    /* @__PURE__ */ jsx(Skeleton, { shape: "rect", className: "h-32" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { shape: "circle", className: "h-8" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, {}),
+        /* @__PURE__ */ jsx(Skeleton, { className: "w-2/3" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  SkeletonDemo as default
+};

package/registry/demos/skeleton.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "@krizaka/ui/skeleton";
+
+export default function SkeletonDemo() {
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4">
+      <Skeleton shape="rect" className="h-32" />
+      <div className="flex items-center gap-3">
+        <Skeleton shape="circle" className="h-8" />
+        <div className="flex flex-1 flex-col gap-2">
+          <Skeleton />
+          <Skeleton className="w-2/3" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/registry/demos/slider.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SliderDemo(): react.JSX.Element;
+
+export { SliderDemo as default };

package/registry/demos/slider.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/slider.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderDemo() {
+  return /* @__PURE__ */ jsx(Slider, { label: "Volume", defaultValue: 60 });
+}
+export {
+  SliderDemo as default
+};

package/registry/demos/slider.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@krizaka/ui/slider";
+
+export default function SliderDemo() {
+  return <Slider label="Volume" defaultValue={60} />;
+}

package/registry/demos/slot.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SlotDemo(): react.JSX.Element;
+
+export { SlotDemo as default };

package/registry/demos/slot.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/demos/slot.tsx
+import { Slot, VisuallyHidden } from "@krizaka/ui/slot";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SlotDemo() {
+  return /* @__PURE__ */ jsx(Slot, { className: "text-sm font-semibold text-fg underline underline-offset-4", children: /* @__PURE__ */ jsxs("a", { href: "#docs", children: [
+    "Read the docs",
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: " about Slot" })
+  ] }) });
+}
+export {
+  SlotDemo as default
+};

package/registry/demos/slot.tsx

@@ -0,0 +1,13 @@
+import { Slot, VisuallyHidden } from "@krizaka/ui/slot";
+
+export default function SlotDemo() {
+  // Slot merges its props and classes into its only child: the link is rendered, styled by the Slot.
+  return (
+    <Slot className="text-sm font-semibold text-fg underline underline-offset-4">
+      <a href="#docs">
+        Read the docs
+        <VisuallyHidden> about Slot</VisuallyHidden>
+      </a>
+    </Slot>
+  );
+}

package/registry/demos/spinner.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SpinnerDemo(): react.JSX.Element;
+
+export { SpinnerDemo as default };

package/registry/demos/spinner.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/spinner.tsx
+import { Spinner } from "@krizaka/ui/spinner";
+import { jsx } from "react/jsx-runtime";
+function SpinnerDemo() {
+  return /* @__PURE__ */ jsx(Spinner, { label: "Loading" });
+}
+export {
+  SpinnerDemo as default
+};

package/registry/demos/spinner.tsx

@@ -0,0 +1,5 @@
+import { Spinner } from "@krizaka/ui/spinner";
+
+export default function SpinnerDemo() {
+  return <Spinner label="Loading" />;
+}

package/registry/demos/stat.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function StatDemo(): react.JSX.Element;
+
+export { StatDemo as default };

package/registry/demos/stat.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/stat.tsx
+import { Stat } from "@krizaka/ui/stat";
+import { jsx } from "react/jsx-runtime";
+function StatDemo() {
+  return /* @__PURE__ */ jsx(Stat, { label: "Revenue", value: "\u20AC4,812", hint: "vs last month", trend: "up", trendLabel: "+12 %" });
+}
+export {
+  StatDemo as default
+};

package/registry/demos/stat.tsx

@@ -0,0 +1,5 @@
+import { Stat } from "@krizaka/ui/stat";
+
+export default function StatDemo() {
+  return <Stat label="Revenue" value="€4,812" hint="vs last month" trend="up" trendLabel="+12 %" />;
+}

package/registry/demos/switch.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function SwitchDemo(): react.JSX.Element;
+
+export { SwitchDemo as default };

package/registry/demos/switch.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/demos/switch.tsx
+import { Switch } from "@krizaka/ui/switch";
+import { jsx } from "react/jsx-runtime";
+function SwitchDemo() {
+  return /* @__PURE__ */ jsx(Switch, { label: "Autoplay" });
+}
+export {
+  SwitchDemo as default
+};