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

package/registry/examples/empty-state/native/default.tsx

@@ -0,0 +1,25 @@
+import { Button, EmptyState, useTheme } from "@krizaka/ui/native";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+function BellIcon({ color }: { color: string }) {
+  return (
+    <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+    </Svg>
+  );
+}
+
+export default function NativeEmptyStateDefault() {
+  const { theme } = useTheme();
+  return (
+    <View style={{ width: 320 }}>
+      <EmptyState
+        icon={<BellIcon color={theme.textPrimary} />}
+        title="No notifications yet"
+        description="Follow a creator to hear when they go on stage."
+        action={<Button variant="primary" label="Explore" />}
+      />
+    </View>
+  );
+}

package/registry/examples/empty-state/title-only.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/empty-state/title-only.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/empty-state/title-only.tsx
+import { EmptyState } from "@krizaka/ui/empty-state";
+import { jsx } from "react/jsx-runtime";
+function EmptyStateTitleOnly() {
+  return /* @__PURE__ */ jsx(EmptyState, { title: "No results" });
+}
+export {
+  EmptyStateTitleOnly as default
+};

package/registry/examples/empty-state/title-only.tsx

@@ -0,0 +1,5 @@
+import { EmptyState } from "@krizaka/ui/empty-state";
+
+export default function EmptyStateTitleOnly() {
+  return <EmptyState title="No results" />;
+}

package/registry/examples/empty-state/with-action.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/empty-state/with-action.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/empty-state/with-action.tsx
+import { Button } from "@krizaka/ui/button";
+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 EmptyStateWithAction() {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: ICON,
+      title: "No videos yet",
+      description: "The videos you publish appear here.",
+      action: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", children: "Publish a video" })
+    }
+  );
+}
+export {
+  EmptyStateWithAction as default
+};

package/registry/examples/empty-state/with-action.tsx

@@ -0,0 +1,25 @@
+import { Button } from "@krizaka/ui/button";
+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>
+);
+
+// With what to do next.
+export default function EmptyStateWithAction() {
+  return (
+    <EmptyState
+      icon={ICON}
+      title="No videos yet"
+      description="The videos you publish appear here."
+      action={
+        <Button variant="primary" size="sm">
+          Publish a video
+        </Button>
+      }
+    />
+  );
+}

package/registry/examples/field/default.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/{demos/field.js → examples/field/default.js}

@@ -1,9 +1,9 @@
 "use client";
 
-// registry/demos/field.tsx
+// registry/examples/field/default.tsx
 import { Field, Input } from "@krizaka/ui/field";
 import { jsx, jsxs } from "react/jsx-runtime";
-function FieldDemo() {
+function FieldDefault() {
   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" }),
@@ -11,5 +11,5 @@ function FieldDemo() {
   ] });
 }
 export {
-  FieldDemo as default
+  FieldDefault as default
 };

package/registry/{demos/field.tsx → examples/field/default.tsx}

@@ -1,6 +1,6 @@
 import { Field, Input } from "@krizaka/ui/field";
 
-export default function FieldDemo() {
+export default function FieldDefault() {
   return (
     <Field.Root>
       <Field.Label htmlFor="email">Email</Field.Label>

package/registry/examples/field/disabled.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/field/disabled.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/field/disabled.tsx
+import { Field, Input } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldDisabled() {
+  return /* @__PURE__ */ jsxs(Field.Root, { children: [
+    /* @__PURE__ */ jsx(Field.Label, { htmlFor: "email-disabled", children: "Email" }),
+    /* @__PURE__ */ jsx(Input, { id: "email-disabled", disabled: true, defaultValue: "you@example.com" })
+  ] });
+}
+export {
+  FieldDisabled as default
+};

package/registry/examples/field/disabled.tsx

@@ -0,0 +1,10 @@
+import { Field, Input } from "@krizaka/ui/field";
+
+export default function FieldDisabled() {
+  return (
+    <Field.Root>
+      <Field.Label htmlFor="email-disabled">Email</Field.Label>
+      <Input id="email-disabled" disabled defaultValue="you@example.com" />
+    </Field.Root>
+  );
+}

package/registry/examples/field/invalid.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/field/invalid.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/field/invalid.tsx
+import { Field, Input } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldInvalid() {
+  return /* @__PURE__ */ jsxs(Field.Root, { children: [
+    /* @__PURE__ */ jsx(Field.Label, { htmlFor: "email-invalid", children: "Email" }),
+    /* @__PURE__ */ jsx(Input, { id: "email-invalid", type: "email", invalid: true, defaultValue: "you@", "aria-describedby": "email-error" }),
+    /* @__PURE__ */ jsx(Field.Error, { id: "email-error", children: "Enter a complete address." })
+  ] });
+}
+export {
+  FieldInvalid as default
+};

package/registry/examples/field/invalid.tsx

@@ -0,0 +1,12 @@
+import { Field, Input } from "@krizaka/ui/field";
+
+// `invalid` sets `aria-invalid` and `data-invalid`; the error is read through `aria-describedby`.
+export default function FieldInvalid() {
+  return (
+    <Field.Root>
+      <Field.Label htmlFor="email-invalid">Email</Field.Label>
+      <Input id="email-invalid" type="email" invalid defaultValue="you@" aria-describedby="email-error" />
+      <Field.Error id="email-error">Enter a complete address.</Field.Error>
+    </Field.Root>
+  );
+}

package/registry/examples/field/select.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/field/select.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/field/select.tsx
+import { Field, Select } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldSelect() {
+  return /* @__PURE__ */ jsxs(Field.Root, { children: [
+    /* @__PURE__ */ jsx(Field.Label, { htmlFor: "country", children: "Country" }),
+    /* @__PURE__ */ jsxs(Select, { id: "country", defaultValue: "fr", children: [
+      /* @__PURE__ */ jsx("option", { value: "fr", children: "France" }),
+      /* @__PURE__ */ jsx("option", { value: "tn", children: "Tunisia" }),
+      /* @__PURE__ */ jsx("option", { value: "ca", children: "Canada" })
+    ] })
+  ] });
+}
+export {
+  FieldSelect as default
+};

package/registry/examples/field/select.tsx

@@ -0,0 +1,15 @@
+import { Field, Select } from "@krizaka/ui/field";
+
+// A native select: the platform's menu, accessible and right on phones.
+export default function FieldSelect() {
+  return (
+    <Field.Root>
+      <Field.Label htmlFor="country">Country</Field.Label>
+      <Select id="country" defaultValue="fr">
+        <option value="fr">France</option>
+        <option value="tn">Tunisia</option>
+        <option value="ca">Canada</option>
+      </Select>
+    </Field.Root>
+  );
+}

package/registry/examples/field/textarea.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/field/textarea.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/field/textarea.tsx
+import { Field, Textarea } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldTextarea() {
+  return /* @__PURE__ */ jsxs(Field.Root, { children: [
+    /* @__PURE__ */ jsx(Field.Label, { htmlFor: "bio", children: "Bio" }),
+    /* @__PURE__ */ jsx(Textarea, { id: "bio", placeholder: "A few words about you" })
+  ] });
+}
+export {
+  FieldTextarea as default
+};

package/registry/examples/field/textarea.tsx

@@ -0,0 +1,10 @@
+import { Field, Textarea } from "@krizaka/ui/field";
+
+export default function FieldTextarea() {
+  return (
+    <Field.Root>
+      <Field.Label htmlFor="bio">Bio</Field.Label>
+      <Textarea id="bio" placeholder="A few words about you" />
+    </Field.Root>
+  );
+}

package/registry/examples/kbd/key.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/{demos/kbd.js → examples/kbd/key.js}

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

package/registry/{demos/kbd.tsx → examples/kbd/key.tsx}

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

package/registry/examples/kbd/shortcut.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/kbd/shortcut.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/kbd/shortcut.tsx
+import { Kbd } from "@krizaka/ui/kbd";
+import { jsx, jsxs } from "react/jsx-runtime";
+function KbdShortcut() {
+  return /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-sm text-fg-secondary", children: [
+    "Search with ",
+    /* @__PURE__ */ jsx(Kbd, { children: "\u2318" }),
+    /* @__PURE__ */ jsx(Kbd, { children: "K" })
+  ] });
+}
+export {
+  KbdShortcut as default
+};

package/registry/examples/kbd/shortcut.tsx

@@ -0,0 +1,11 @@
+import { Kbd } from "@krizaka/ui/kbd";
+
+// A shortcut in a sentence: one `Kbd` per key.
+export default function KbdShortcut() {
+  return (
+    <p className="flex items-center gap-1.5 text-sm text-fg-secondary">
+      Search with <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+    </p>
+  );
+}

package/registry/examples/kbd/small.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/kbd/small.js

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

package/registry/examples/kbd/small.tsx

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

package/registry/examples/page-header/default.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/{demos/page-header.js → examples/page-header/default.js}

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

package/registry/{demos/page-header.tsx → examples/page-header/default.tsx}

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

package/registry/examples/page-header/with-actions.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/page-header/with-actions.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/page-header/with-actions.tsx
+import { Button } from "@krizaka/ui/button";
+import { PageHeader } from "@krizaka/ui/page-header";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PageHeaderWithActions() {
+  return /* @__PURE__ */ jsx(
+    PageHeader,
+    {
+      title: "Payouts",
+      description: "Your earnings are paid every Monday to the account on file.",
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Export" }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Withdraw" })
+      ] })
+    }
+  );
+}
+export {
+  PageHeaderWithActions as default
+};

package/registry/examples/page-header/with-actions.tsx

@@ -0,0 +1,17 @@
+import { Button } from "@krizaka/ui/button";
+import { PageHeader } from "@krizaka/ui/page-header";
+
+export default function PageHeaderWithActions() {
+  return (
+    <PageHeader
+      title="Payouts"
+      description="Your earnings are paid every Monday to the account on file."
+      actions={
+        <>
+          <Button variant="outline">Export</Button>
+          <Button variant="primary">Withdraw</Button>
+        </>
+      }
+    />
+  );
+}

package/registry/examples/page-header/with-breadcrumb.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/page-header/with-breadcrumb.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/page-header/with-breadcrumb.tsx
+import { Button } from "@krizaka/ui/button";
+import { PageHeader } from "@krizaka/ui/page-header";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageHeaderWithBreadcrumb() {
+  return /* @__PURE__ */ jsx(
+    PageHeader,
+    {
+      title: "Payouts",
+      description: "Your earnings are paid every Monday to the account on file.",
+      actions: /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Withdraw" }),
+      breadcrumb: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: "#studio", className: "hover:text-fg", children: "Studio" }) }),
+        /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
+        /* @__PURE__ */ jsx("li", { "aria-current": "page", children: "Payouts" })
+      ] }) })
+    }
+  );
+}
+export {
+  PageHeaderWithBreadcrumb as default
+};

package/registry/examples/page-header/with-breadcrumb.tsx

@@ -0,0 +1,26 @@
+import { Button } from "@krizaka/ui/button";
+import { PageHeader } from "@krizaka/ui/page-header";
+
+// The breadcrumb is a slot: the product's own `<nav aria-label>`.
+export default function PageHeaderWithBreadcrumb() {
+  return (
+    <PageHeader
+      title="Payouts"
+      description="Your earnings are paid every Monday to the account on file."
+      actions={<Button variant="primary">Withdraw</Button>}
+      breadcrumb={
+        <nav aria-label="Breadcrumb">
+          <ol className="flex items-center gap-1.5">
+            <li>
+              <a href="#studio" className="hover:text-fg">
+                Studio
+              </a>
+            </li>
+            <li aria-hidden>/</li>
+            <li aria-current="page">Payouts</li>
+          </ol>
+        </nav>
+      }
+    />
+  );
+}

package/registry/examples/popover/form.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/{demos/popover.js → examples/popover/form.js}

@@ -1,11 +1,11 @@
 "use client";
 
-// registry/demos/popover.tsx
+// registry/examples/popover/form.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 }) {
+function PopoverForm({ 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: [
@@ -21,5 +21,5 @@ function PopoverDemo({ defaultOpen = false }) {
   ] });
 }
 export {
-  PopoverDemo as default
+  PopoverForm as default
 };

package/registry/{demos/popover.tsx → examples/popover/form.tsx}

@@ -2,7 +2,7 @@ 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 }) {
+export default function PopoverForm({ defaultOpen = false }: { defaultOpen?: boolean }) {
   return (
     <Popover.Root defaultOpen={defaultOpen}>
       <Popover.Trigger asChild>

package/registry/examples/progress/bar-indeterminate.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/progress/bar-indeterminate.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/progress/bar-indeterminate.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx } from "react/jsx-runtime";
+function ProgressBarIndeterminate() {
+  return /* @__PURE__ */ jsx(Progress, { label: "Processing" });
+}
+export {
+  ProgressBarIndeterminate as default
+};

package/registry/examples/progress/bar-indeterminate.tsx

@@ -0,0 +1,6 @@
+import { Progress } from "@krizaka/ui/progress";
+
+// No `value`: a wait of unknown length (still under reduced motion).
+export default function ProgressBarIndeterminate() {
+  return <Progress label="Processing" />;
+}

package/registry/examples/progress/bar-sizes.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/progress/bar-sizes.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/progress/bar-sizes.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProgressBarSizes() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(Progress, { label: "Small", size: "sm", value: 30 }),
+    /* @__PURE__ */ jsx(Progress, { label: "Medium", size: "md", value: 55 }),
+    /* @__PURE__ */ jsx(Progress, { label: "Large", size: "lg", value: 80 })
+  ] });
+}
+export {
+  ProgressBarSizes as default
+};

package/registry/examples/progress/bar-sizes.tsx

@@ -0,0 +1,11 @@
+import { Progress } from "@krizaka/ui/progress";
+
+export default function ProgressBarSizes() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Progress label="Small" size="sm" value={30} />
+      <Progress label="Medium" size="md" value={55} />
+      <Progress label="Large" size="lg" value={80} />
+    </div>
+  );
+}

package/registry/examples/progress/bar.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;