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

package/registry/demos/chip.tsx

@@ -0,0 +1,11 @@
+import { Chip } from "@krizaka/ui/chip";
+
+export default function ChipDemo() {
+  return (
+    <div className="flex gap-2">
+      <Chip>Subtitles</Chip>
+      <Chip defaultSelected>HD</Chip>
+      <Chip disabled>4K</Chip>
+    </div>
+  );
+}

package/registry/demos/cn.d.ts

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

package/registry/demos/cn.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/demos/cn.tsx
+import { cn } from "@krizaka/ui/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CnDemo({ selected = true }) {
+  return /* @__PURE__ */ jsxs("p", { className: cn("rounded-lg border border-border-default px-3 py-2 text-sm text-fg-secondary", selected && "border-accent text-fg", "px-4"), children: [
+    "The last class wins: ",
+    /* @__PURE__ */ jsx("code", { children: "px-4" }),
+    " replaces ",
+    /* @__PURE__ */ jsx("code", { children: "px-3" }),
+    ", and the selected colours replace the idle ones."
+  ] });
+}
+export {
+  CnDemo as default
+};

package/registry/demos/cn.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@krizaka/ui/cn";
+
+export default function CnDemo({ selected = true }: { selected?: boolean }) {
+  return (
+    <p className={cn("rounded-lg border border-border-default px-3 py-2 text-sm text-fg-secondary", selected && "border-accent text-fg", "px-4")}>
+      The last class wins: <code>px-4</code> replaces <code>px-3</code>, and the selected colours replace the idle ones.
+    </p>
+  );
+}

package/registry/demos/command.d.ts

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

package/registry/demos/command.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/demos/command.tsx
+import { Command } from "@krizaka/ui/command";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CommandDemo() {
+  return /* @__PURE__ */ jsxs(Command.Root, { label: "Commands", className: "w-[28rem] max-w-full rounded-xl border border-border-default shadow-lg", children: [
+    /* @__PURE__ */ jsx(Command.Input, { placeholder: "Type a command or search" }),
+    /* @__PURE__ */ jsxs(Command.List, { label: "Suggestions", children: [
+      /* @__PURE__ */ jsx(Command.Empty, { emptyLabel: "Nothing matches." }),
+      /* @__PURE__ */ jsxs(Command.Group, { heading: "Pages", children: [
+        /* @__PURE__ */ jsxs(Command.Item, { children: [
+          "Home",
+          /* @__PURE__ */ jsx(Command.Shortcut, { children: "G H" })
+        ] }),
+        /* @__PURE__ */ jsxs(Command.Item, { children: [
+          "Wallet",
+          /* @__PURE__ */ jsx(Command.Shortcut, { children: "G W" })
+        ] }),
+        /* @__PURE__ */ jsx(Command.Item, { disabled: true, children: "Studio" })
+      ] }),
+      /* @__PURE__ */ jsx(Command.Separator, {}),
+      /* @__PURE__ */ jsxs(Command.Group, { heading: "Actions", children: [
+        /* @__PURE__ */ jsx(Command.Item, { keywords: ["video", "new"], children: "Upload a video" }),
+        /* @__PURE__ */ jsx(Command.Item, { children: "Switch the theme" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  CommandDemo as default
+};

package/registry/demos/command.tsx

@@ -0,0 +1,28 @@
+import { Command } from "@krizaka/ui/command";
+
+export default function CommandDemo() {
+  return (
+    <Command.Root label="Commands" className="w-[28rem] max-w-full rounded-xl border border-border-default shadow-lg">
+      <Command.Input placeholder="Type a command or search" />
+      <Command.List label="Suggestions">
+        <Command.Empty emptyLabel="Nothing matches." />
+        <Command.Group heading="Pages">
+          <Command.Item>
+            Home
+            <Command.Shortcut>G H</Command.Shortcut>
+          </Command.Item>
+          <Command.Item>
+            Wallet
+            <Command.Shortcut>G W</Command.Shortcut>
+          </Command.Item>
+          <Command.Item disabled>Studio</Command.Item>
+        </Command.Group>
+        <Command.Separator />
+        <Command.Group heading="Actions">
+          <Command.Item keywords={["video", "new"]}>Upload a video</Command.Item>
+          <Command.Item>Switch the theme</Command.Item>
+        </Command.Group>
+      </Command.List>
+    </Command.Root>
+  );
+}

package/registry/demos/confirm-button.d.ts

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

package/registry/demos/confirm-button.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/demos/confirm-button.tsx
+import { ConfirmButton } from "@krizaka/ui/confirm-button";
+import { jsx } from "react/jsx-runtime";
+function ConfirmButtonDemo() {
+  return /* @__PURE__ */ jsx(ConfirmButton, { label: "Delete the comment", confirmLabel: "Delete?", size: "sm", onConfirm: () => {
+  }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" }) }) });
+}
+export {
+  ConfirmButtonDemo as default
+};

package/registry/demos/confirm-button.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { ConfirmButton } from "@krizaka/ui/confirm-button";
+
+export default function ConfirmButtonDemo() {
+  return (
+    <ConfirmButton label="Delete the comment" confirmLabel="Delete?" size="sm" onConfirm={() => {}}>
+      <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+        <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
+      </svg>
+    </ConfirmButton>
+  );
+}

package/registry/demos/countdown.d.ts

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

package/registry/demos/countdown.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/demos/countdown.tsx
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function CountdownDemo() {
+  const [target] = useState(() => Date.now() + 3723e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in" });
+}
+export {
+  CountdownDemo as default
+};

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 };