@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/examples/dialog/sheet-form.js

@@ -0,0 +1,35 @@
+"use client";
+
+// registry/examples/dialog/sheet-form.tsx
+import { Button } from "@krizaka/ui/button";
+import { Dialog, Sheet } from "@krizaka/ui/dialog";
+import { Field, Input, Textarea } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DialogSheetForm({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { defaultOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Edit" }) }),
+    /* @__PURE__ */ jsxs(Sheet, { closeLabel: "Close", size: "lg", children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { children: "Edit the video" }),
+        /* @__PURE__ */ jsx(Dialog.Description, { children: "The title and the description are public." })
+      ] }),
+      /* @__PURE__ */ jsxs(Dialog.Body, { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "video-title", children: "Title" }),
+          /* @__PURE__ */ jsx(Input, { id: "video-title", defaultValue: "Night ride across the city" })
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "video-description", children: "Description" }),
+          /* @__PURE__ */ jsx(Textarea, { id: "video-description", defaultValue: "Ten minutes of neon, rain and empty avenues." })
+        ] })
+      ] }),
+      /* @__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: "Save" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DialogSheetForm as default
+};

package/registry/examples/dialog/sheet-form.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@krizaka/ui/button";
+import { Dialog, Sheet } from "@krizaka/ui/dialog";
+import { Field, Input, Textarea } from "@krizaka/ui/field";
+
+// `Sheet` = `Dialog.Content placement="bottom"`: a form, `size="lg"`.
+export default function DialogSheetForm({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Dialog.Root defaultOpen={defaultOpen}>
+      <Dialog.Trigger asChild>
+        <Button>Edit</Button>
+      </Dialog.Trigger>
+      <Sheet closeLabel="Close" size="lg">
+        <Dialog.Header>
+          <Dialog.Title>Edit the video</Dialog.Title>
+          <Dialog.Description>The title and the description are public.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body className="flex flex-col gap-4">
+          <Field.Root>
+            <Field.Label htmlFor="video-title">Title</Field.Label>
+            <Input id="video-title" defaultValue="Night ride across the city" />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label htmlFor="video-description">Description</Field.Label>
+            <Textarea id="video-description" defaultValue="Ten minutes of neon, rain and empty avenues." />
+          </Field.Root>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close asChild>
+            <Button variant="ghost">Cancel</Button>
+          </Dialog.Close>
+          <Button variant="primary">Save</Button>
+        </Dialog.Footer>
+      </Sheet>
+    </Dialog.Root>
+  );
+}

package/registry/examples/dropdown-menu/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/{demos/dropdown-menu.js → examples/dropdown-menu/actions.js}

@@ -1,11 +1,11 @@
 "use client";
 
-// registry/demos/dropdown-menu.tsx
+// registry/examples/dropdown-menu/actions.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 }) {
+function DropdownMenuActions({ 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: [
@@ -32,5 +32,5 @@ function DropdownMenuDemo({ defaultOpen = false }) {
   ] });
 }
 export {
-  DropdownMenuDemo as default
+  DropdownMenuActions as default
 };

package/registry/{demos/dropdown-menu.tsx → examples/dropdown-menu/actions.tsx}

@@ -7,7 +7,7 @@ const icon = (d: string) => (
   </svg>
 );
 
-export default function DropdownMenuDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+export default function DropdownMenuActions({ defaultOpen = false }: { defaultOpen?: boolean }) {
   return (
     <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>
       <DropdownMenu.Trigger asChild>

package/registry/examples/empty-state/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/empty-state.js → examples/empty-state/default.js}

@@ -1,15 +1,15 @@
 "use client";
 
-// registry/demos/empty-state.tsx
+// registry/examples/empty-state/default.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() {
+function EmptyStateDefault() {
   return /* @__PURE__ */ jsx(EmptyState, { icon: ICON, title: "No videos yet", description: "The videos you publish appear here." });
 }
 export {
-  EmptyStateDemo as default
+  EmptyStateDefault as default
 };

package/registry/{demos/empty-state.tsx → examples/empty-state/default.tsx}

@@ -7,6 +7,6 @@ const ICON = (
   </svg>
 );
 
-export default function EmptyStateDemo() {
+export default function EmptyStateDefault() {
   return <EmptyState icon={ICON} title="No videos yet" description="The videos you publish appear here." />;
 }

package/registry/examples/empty-state/native/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/examples/empty-state/native/default.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/empty-state/native/default.tsx
+import { Button, EmptyState, useTheme } from "@krizaka/ui/native";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx } from "react/jsx-runtime";
+function BellIcon({ color }) {
+  return /* @__PURE__ */ jsx(Svg, { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx(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" }) });
+}
+function NativeEmptyStateDefault() {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: /* @__PURE__ */ jsx(BellIcon, { color: theme.textPrimary }),
+      title: "No notifications yet",
+      description: "Follow a creator to hear when they go on stage.",
+      action: /* @__PURE__ */ jsx(Button, { variant: "primary", label: "Explore" })
+    }
+  ) });
+}
+export {
+  NativeEmptyStateDefault as default
+};

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