@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/empty-state.json

@@ -1,7 +1,166 @@
 {
   "name": "empty-state",
   "type": "primitive",
-  "description": "`EmptyState`. Server-safe.",
+  "title": "Empty state",
+  "summary": "What a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.",
+  "description": "What a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.",
+  "status": "stable",
+  "category": "feedback",
+  "platforms": "both",
+  "whenToUse": [
+    "When a list is empty for the first time: say what will appear here and how to start.",
+    "When a search or a filter returns nothing: say so, and how to widen it."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "While the content is loading.",
+      "use": "skeleton"
+    },
+    {
+      "when": "When loading failed: say what went wrong.",
+      "use": "alert"
+    }
+  ],
+  "bestPractices": [
+    "Title: what is empty, in a few words (“No videos yet”); description: why, or what will fill it.",
+    "One action at most, the one that fills the list."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "`role=\"status\"`: announced politely when it appears after a search.",
+      "The icon is decorative and hidden from assistive technology."
+    ]
+  },
+  "related": [
+    "skeleton",
+    "alert",
+    "spinner"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/empty-state",
+    "import": "import { EmptyState } from \"@krizaka/ui/empty-state\";",
+    "props": [
+      {
+        "component": "EmptyState",
+        "description": "",
+        "props": [
+          {
+            "name": "title",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What is empty, in a few words (\"No videos yet\").",
+            "required": true
+          },
+          {
+            "name": "action",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What to do next: a Button, a link.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Why, or what will fill it.",
+            "required": false
+          },
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A decorative icon (hidden from assistive technology).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "default",
+        "title": "Default",
+        "description": "An icon, a title and a line.",
+        "path": "examples/empty-state/default.tsx",
+        "module": "@krizaka/ui/registry/examples/empty-state/default",
+        "code": "import { EmptyState } from \"@krizaka/ui/empty-state\";\n\nconst ICON = (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"m10 9 5 3-5 3z\" />\n  </svg>\n);\n\nexport default function EmptyStateDefault() {\n  return <EmptyState icon={ICON} title=\"No videos yet\" description=\"The videos you publish appear here.\" />;\n}\n"
+      },
+      {
+        "name": "with-action",
+        "title": "With an action",
+        "description": "What to do next.",
+        "path": "examples/empty-state/with-action.tsx",
+        "module": "@krizaka/ui/registry/examples/empty-state/with-action",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { EmptyState } from \"@krizaka/ui/empty-state\";\n\nconst ICON = (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"m10 9 5 3-5 3z\" />\n  </svg>\n);\n\n// With what to do next.\nexport default function EmptyStateWithAction() {\n  return (\n    <EmptyState\n      icon={ICON}\n      title=\"No videos yet\"\n      description=\"The videos you publish appear here.\"\n      action={\n        <Button variant=\"primary\" size=\"sm\">\n          Publish a video\n        </Button>\n      }\n    />\n  );\n}\n"
+      },
+      {
+        "name": "title-only",
+        "title": "Title only",
+        "description": "A search without result.",
+        "path": "examples/empty-state/title-only.tsx",
+        "module": "@krizaka/ui/registry/examples/empty-state/title-only",
+        "code": "import { EmptyState } from \"@krizaka/ui/empty-state\";\n\nexport default function EmptyStateTitleOnly() {\n  return <EmptyState title=\"No results\" />;\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { EmptyState } from \"@krizaka/ui/native\";",
+    "differences": [
+      "The action is a native `Button` (with `label`).",
+      "Style with `style`, not `className`."
+    ],
+    "props": [
+      {
+        "component": "EmptyState",
+        "description": "What a list, a search or a screen says when it has nothing to show — every word is a prop.",
+        "props": [
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What is empty, in a few words (\"No notifications yet\").",
+            "required": true
+          },
+          {
+            "name": "action",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What to do next: a Button.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "string",
+            "default": null,
+            "description": "Why, or what will fill it.",
+            "required": false
+          },
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A decorative icon (hidden from screen readers).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "default",
+        "title": "Default",
+        "description": "An icon, a header, a line and an action.",
+        "path": "examples/empty-state/native/default.tsx",
+        "module": "@krizaka/ui/registry/examples/empty-state/native/default",
+        "code": "import { Button, EmptyState, useTheme } from \"@krizaka/ui/native\";\nimport { View } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nfunction BellIcon({ color }: { color: string }) {\n  return (\n    <Svg width={24} height={24} viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <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\" />\n    </Svg>\n  );\n}\n\nexport default function NativeEmptyStateDefault() {\n  const { theme } = useTheme();\n  return (\n    <View style={{ width: 320 }}>\n      <EmptyState\n        icon={<BellIcon color={theme.textPrimary} />}\n        title=\"No notifications yet\"\n        description=\"Follow a creator to hear when they go on stage.\"\n        action={<Button variant=\"primary\" label=\"Explore\" />}\n      />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/empty-state/native/default.dark.png",
+          "light": "examples/empty-state/native/default.light.png"
+        }
+      }
+    ]
+  },
   "files": [
     {
       "path": "empty-state/empty-state.tsx",
@@ -10,6 +169,14 @@
     {
       "path": "empty-state/index.ts",
       "content": "/** @krizaka/ui/empty-state — `EmptyState`. Server-safe. */\nexport { EmptyState, emptyState, type EmptyStateProps } from \"./empty-state\";\n"
+    },
+    {
+      "path": "empty-state/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Empty state\",\n  summary: \"What a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.\",\n  status: \"stable\",\n  category: \"feedback\",\n  platforms: \"both\",\n  whenToUse: [\n    \"When a list is empty for the first time: say what will appear here and how to start.\",\n    \"When a search or a filter returns nothing: say so, and how to widen it.\",\n  ],\n  whenNotToUse: [\n    { when: \"While the content is loading.\", use: \"skeleton\" },\n    { when: \"When loading failed: say what went wrong.\", use: \"alert\" },\n  ],\n  bestPractices: [\n    \"Title: what is empty, in a few words (“No videos yet”); description: why, or what will fill it.\",\n    \"One action at most, the one that fills the list.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\"`role=\\\"status\\\"`: announced politely when it appears after a search.\", \"The icon is decorative and hidden from assistive technology.\"],\n  },\n  related: [\"skeleton\", \"alert\", \"spinner\"],\n  web: {\n    imports: [\"EmptyState\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"An icon, a title and a line.\" },\n      { name: \"with-action\", title: \"With an action\", description: \"What to do next.\" },\n      { name: \"title-only\", title: \"Title only\", description: \"A search without result.\" },\n    ],\n  },\n  native: {\n    imports: [\"EmptyState\"],\n    differences: [\"The action is a native `Button` (with `label`).\", \"Style with `style`, not `className`.\"],\n    examples: [{ name: \"default\", title: \"Default\", description: \"An icon, a header, a line and an action.\" }],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"cn\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"kbd\"\n  | \"page-header\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"switch\"\n  | \"tabs\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [
@@ -17,8 +184,8 @@
   ],
   "registryDependencies": [],
   "demo": {
-    "path": "demos/empty-state.tsx",
-    "content": "import { EmptyState } from \"@krizaka/ui/empty-state\";\n\nconst ICON = (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"m10 9 5 3-5 3z\" />\n  </svg>\n);\n\nexport default function EmptyStateDemo() {\n  return <EmptyState icon={ICON} title=\"No videos yet\" description=\"The videos you publish appear here.\" />;\n}\n"
+    "path": "examples/empty-state/default.tsx",
+    "content": "import { EmptyState } from \"@krizaka/ui/empty-state\";\n\nconst ICON = (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"m10 9 5 3-5 3z\" />\n  </svg>\n);\n\nexport default function EmptyStateDefault() {\n  return <EmptyState icon={ICON} title=\"No videos yet\" description=\"The videos you publish appear here.\" />;\n}\n"
   },
   "props": [
     {

package/registry/examples/alert/danger.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/alert/danger.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/alert/danger.tsx
+import { Alert } from "@krizaka/ui/alert";
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+var WARN = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }) });
+function AlertDanger() {
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      tone: "danger",
+      icon: WARN,
+      title: "Payment failed",
+      action: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", children: "Retry" }),
+      children: "The card was declined. Try another one."
+    }
+  );
+}
+export {
+  AlertDanger as default
+};

package/registry/examples/alert/danger.tsx

@@ -0,0 +1,25 @@
+import { Alert } from "@krizaka/ui/alert";
+import { Button } from "@krizaka/ui/button";
+
+const WARN = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+  </svg>
+);
+
+export default function AlertDanger() {
+  return (
+    <Alert
+      tone="danger"
+      icon={WARN}
+      title="Payment failed"
+      action={
+        <Button size="sm" variant="danger">
+          Retry
+        </Button>
+      }
+    >
+      The card was declined. Try another one.
+    </Alert>
+  );
+}

package/registry/examples/alert/info.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/alert.js → examples/alert/info.js}

@@ -1,12 +1,12 @@
 "use client";
 
-// registry/demos/alert.tsx
+// registry/examples/alert/info.tsx
 import { Alert } from "@krizaka/ui/alert";
 import { jsx } from "react/jsx-runtime";
 var INFO = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z" }) });
-function AlertDemo() {
+function AlertInfo() {
   return /* @__PURE__ */ jsx(Alert, { title: "New payout schedule", icon: INFO, children: "Payouts now arrive every Monday." });
 }
 export {
-  AlertDemo as default
+  AlertInfo as default
 };

package/registry/{demos/alert.tsx → examples/alert/info.tsx}

@@ -6,7 +6,7 @@ const INFO = (
   </svg>
 );
 
-export default function AlertDemo() {
+export default function AlertInfo() {
   return (
     <Alert title="New payout schedule" icon={INFO}>
       Payouts now arrive every Monday.

package/registry/examples/alert/success.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/alert/success.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/alert/success.tsx
+import { Alert } from "@krizaka/ui/alert";
+import { jsx } from "react/jsx-runtime";
+var CHECK = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+function AlertSuccess() {
+  return /* @__PURE__ */ jsx(Alert, { tone: "success", icon: CHECK, title: "Account verified", children: "You can now receive payouts." });
+}
+export {
+  AlertSuccess as default
+};

package/registry/examples/alert/success.tsx

@@ -0,0 +1,15 @@
+import { Alert } from "@krizaka/ui/alert";
+
+const CHECK = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+export default function AlertSuccess() {
+  return (
+    <Alert tone="success" icon={CHECK} title="Account verified">
+      You can now receive payouts.
+    </Alert>
+  );
+}

package/registry/examples/alert/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/alert/title-only.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/alert/title-only.tsx
+import { Alert } from "@krizaka/ui/alert";
+import { jsx } from "react/jsx-runtime";
+function AlertTitleOnly() {
+  return /* @__PURE__ */ jsx(Alert, { title: "New payout schedule" });
+}
+export {
+  AlertTitleOnly as default
+};

package/registry/examples/alert/title-only.tsx

@@ -0,0 +1,5 @@
+import { Alert } from "@krizaka/ui/alert";
+
+export default function AlertTitleOnly() {
+  return <Alert title="New payout schedule" />;
+}

package/registry/examples/alert/warning.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/alert/warning.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/alert/warning.tsx
+import { Alert } from "@krizaka/ui/alert";
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+var WARN = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }) });
+function AlertWarning() {
+  return /* @__PURE__ */ jsx(Alert, { tone: "warning", icon: WARN, title: "Low balance", action: /* @__PURE__ */ jsx(Button, { size: "sm", children: "Top up" }), children: "Two tips left before a top-up." });
+}
+export {
+  AlertWarning as default
+};

package/registry/examples/alert/warning.tsx

@@ -0,0 +1,17 @@
+import { Alert } from "@krizaka/ui/alert";
+import { Button } from "@krizaka/ui/button";
+
+const WARN = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+  </svg>
+);
+
+// `warning` and `danger` are announced at once (role="alert").
+export default function AlertWarning() {
+  return (
+    <Alert tone="warning" icon={WARN} title="Low balance" action={<Button size="sm">Top up</Button>}>
+      Two tips left before a top-up.
+    </Alert>
+  );
+}

package/registry/examples/avatar/fallback.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/avatar/fallback.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/avatar/fallback.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { jsx } from "react/jsx-runtime";
+function AvatarFallback() {
+  return /* @__PURE__ */ jsx(Avatar, { fallback: "OA" });
+}
+export {
+  AvatarFallback as default
+};

package/registry/examples/avatar/fallback.tsx

@@ -0,0 +1,6 @@
+import { Avatar } from "@krizaka/ui/avatar";
+
+// No image (or while it loads, or when it fails): the initials.
+export default function AvatarFallback() {
+  return <Avatar fallback="OA" />;
+}

package/registry/examples/avatar/group.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/avatar/group.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/avatar/group.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PORTRAIT = "data:image/svg+xml;utf8," + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/><circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>'
+);
+function AvatarGroup() {
+  return /* @__PURE__ */ jsxs(Avatar.Group, { max: 3, size: "sm", children: [
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", src: PORTRAIT, alt: "Oussama" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "LM" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "SK" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "JD" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AR" })
+  ] });
+}
+export {
+  AvatarGroup as default
+};

package/registry/examples/avatar/group.tsx

@@ -0,0 +1,21 @@
+import { Avatar } from "@krizaka/ui/avatar";
+
+const PORTRAIT =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/>' +
+      '<circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>',
+  );
+
+// `max={3}`: the others become `+n`.
+export default function AvatarGroup() {
+  return (
+    <Avatar.Group max={3} size="sm">
+      <Avatar size="sm" src={PORTRAIT} alt="Oussama" />
+      <Avatar size="sm" fallback="LM" />
+      <Avatar size="sm" fallback="SK" />
+      <Avatar size="sm" fallback="JD" />
+      <Avatar size="sm" fallback="AR" />
+    </Avatar.Group>
+  );
+}

package/registry/examples/avatar/native/group.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/avatar/native/group.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/avatar/native/group.tsx
+import { Avatar } from "@krizaka/ui/native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeAvatarGroup() {
+  return /* @__PURE__ */ jsxs(Avatar.Group, { max: 3, size: "md", children: [
+    /* @__PURE__ */ jsx(Avatar, { alt: "Maya" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Noor" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Ines" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Theo" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Lou" })
+  ] });
+}
+export {
+  NativeAvatarGroup as default
+};

package/registry/examples/avatar/native/group.tsx

@@ -0,0 +1,13 @@
+import { Avatar } from "@krizaka/ui/native";
+
+export default function NativeAvatarGroup() {
+  return (
+    <Avatar.Group max={3} size="md">
+      <Avatar alt="Maya" />
+      <Avatar alt="Noor" />
+      <Avatar alt="Ines" />
+      <Avatar alt="Theo" />
+      <Avatar alt="Lou" />
+    </Avatar.Group>
+  );
+}

package/registry/examples/avatar/native/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/avatar/native/sizes.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/avatar/native/sizes.tsx
+import { Avatar } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeAvatarSizes() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Avatar, { alt: "Maya", size: "xs" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Maya", size: "sm" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Maya", size: "md" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Maya", size: "lg" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Maya", size: "xl" })
+  ] });
+}
+export {
+  NativeAvatarSizes as default
+};

package/registry/examples/avatar/native/sizes.tsx

@@ -0,0 +1,15 @@
+import { Avatar } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Without an image: the initial of `alt`.
+export default function NativeAvatarSizes() {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+      <Avatar alt="Maya" size="xs" />
+      <Avatar alt="Maya" size="sm" />
+      <Avatar alt="Maya" size="md" />
+      <Avatar alt="Maya" size="lg" />
+      <Avatar alt="Maya" size="xl" />
+    </View>
+  );
+}

package/registry/examples/avatar/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/avatar/sizes.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/avatar/sizes.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AvatarSizes() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(Avatar, { size: "xs", fallback: "OA" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "OA" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "md", fallback: "OA" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "lg", fallback: "OA" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "xl", fallback: "OA" })
+  ] });
+}
+export {
+  AvatarSizes as default
+};

package/registry/examples/avatar/sizes.tsx

@@ -0,0 +1,13 @@
+import { Avatar } from "@krizaka/ui/avatar";
+
+export default function AvatarSizes() {
+  return (
+    <div className="flex items-center gap-3">
+      <Avatar size="xs" fallback="OA" />
+      <Avatar size="sm" fallback="OA" />
+      <Avatar size="md" fallback="OA" />
+      <Avatar size="lg" fallback="OA" />
+      <Avatar size="xl" fallback="OA" />
+    </div>
+  );
+}

package/registry/examples/avatar/with-image.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/avatar.js → examples/avatar/with-image.js}

@@ -1,14 +1,14 @@
 "use client";
 
-// registry/demos/avatar.tsx
+// registry/examples/avatar/with-image.tsx
 import { Avatar } from "@krizaka/ui/avatar";
 import { jsx } from "react/jsx-runtime";
 var PORTRAIT = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/><circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>'
 );
-function AvatarDemo() {
+function AvatarWithImage() {
   return /* @__PURE__ */ jsx(Avatar, { src: PORTRAIT, alt: "Oussama", fallback: "OA" });
 }
 export {
-  AvatarDemo as default
+  AvatarWithImage as default
 };