@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/{demos/slot.tsx → examples/slot/as-child.tsx}

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

package/registry/examples/slot/visually-hidden.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/slot/visually-hidden.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/slot/visually-hidden.tsx
+import { VisuallyHidden } from "@krizaka/ui/slot";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SlotVisuallyHidden() {
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: "inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border-default text-fg", children: [
+    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Close" })
+  ] });
+}
+export {
+  SlotVisuallyHidden as default
+};

package/registry/examples/slot/visually-hidden.tsx

@@ -0,0 +1,13 @@
+import { VisuallyHidden } from "@krizaka/ui/slot";
+
+// A name for assistive technology only: the icon is seen, the words are read.
+export default function SlotVisuallyHidden() {
+  return (
+    <button type="button" className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border-default text-fg">
+      <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+        <path d="M18 6 6 18M6 6l12 12" />
+      </svg>
+      <VisuallyHidden>Close</VisuallyHidden>
+    </button>
+  );
+}

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

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

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

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

package/registry/examples/spinner/muted.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/spinner/muted.js

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

package/registry/examples/spinner/muted.tsx

@@ -0,0 +1,6 @@
+import { Spinner } from "@krizaka/ui/spinner";
+
+// The colour follows `className` (here a text role).
+export default function SpinnerMuted() {
+  return <Spinner label="Loading" className="text-fg-secondary" />;
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/spinner/native/sizes.tsx
+import { Spinner } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSpinnerSizes() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "sm" }),
+    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "md" }),
+    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "lg" })
+  ] });
+}
+export {
+  NativeSpinnerSizes as default
+};

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

@@ -0,0 +1,13 @@
+import { Spinner } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The platform's indicator in the accent, named by `label`.
+export default function NativeSpinnerSizes() {
+  return (
+    <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
+      <Spinner label="Loading" size="sm" />
+      <Spinner label="Loading" size="md" />
+      <Spinner label="Loading" size="lg" />
+    </View>
+  );
+}

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

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/spinner/sizes.tsx
+import { Spinner } from "@krizaka/ui/spinner";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SpinnerSizes() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "sm" }),
+    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "md" }),
+    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "lg" })
+  ] });
+}
+export {
+  SpinnerSizes as default
+};

package/registry/examples/spinner/sizes.tsx

@@ -0,0 +1,11 @@
+import { Spinner } from "@krizaka/ui/spinner";
+
+export default function SpinnerSizes() {
+  return (
+    <div className="flex items-center gap-4">
+      <Spinner label="Loading" size="sm" />
+      <Spinner label="Loading" size="md" />
+      <Spinner label="Loading" size="lg" />
+    </div>
+  );
+}

package/registry/examples/stat/down.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/stat/down.js

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

package/registry/examples/stat/down.tsx

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

package/registry/examples/stat/flat.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/stat/flat.js

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

package/registry/examples/stat/flat.tsx

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

package/registry/examples/stat/plain.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/stat/plain.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/stat/plain.tsx
+import { Stat } from "@krizaka/ui/stat";
+import { jsx } from "react/jsx-runtime";
+function StatPlain() {
+  return /* @__PURE__ */ jsx(Stat, { label: "Revenue", value: "\u20AC4,812" });
+}
+export {
+  StatPlain as default
+};

package/registry/examples/stat/plain.tsx

@@ -0,0 +1,5 @@
+import { Stat } from "@krizaka/ui/stat";
+
+export default function StatPlain() {
+  return <Stat label="Revenue" value="€4,812" />;
+}

package/registry/examples/stat/row.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/stat/row.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/stat/row.tsx
+import { Stat } from "@krizaka/ui/stat";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatRow() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-8 rounded-xl border border-border-default bg-surface-1 p-6", children: [
+    /* @__PURE__ */ jsx(Stat, { label: "Views", value: "12.4k", trend: "up", trendLabel: "+8 %", hint: "7 days" }),
+    /* @__PURE__ */ jsx(Stat, { label: "Supporters", value: "318", trend: "up", trendLabel: "+21", hint: "7 days" }),
+    /* @__PURE__ */ jsx(Stat, { label: "Payouts", value: "\u20AC902", trend: "down", trendLabel: "\u22123 %", hint: "7 days" })
+  ] });
+}
+export {
+  StatRow as default
+};

package/registry/examples/stat/row.tsx

@@ -0,0 +1,12 @@
+import { Stat } from "@krizaka/ui/stat";
+
+// A row of stats, as a dashboard shows them.
+export default function StatRow() {
+  return (
+    <div className="grid grid-cols-3 gap-8 rounded-xl border border-border-default bg-surface-1 p-6">
+      <Stat label="Views" value="12.4k" trend="up" trendLabel="+8 %" hint="7 days" />
+      <Stat label="Supporters" value="318" trend="up" trendLabel="+21" hint="7 days" />
+      <Stat label="Payouts" value="€902" trend="down" trendLabel="−3 %" hint="7 days" />
+    </div>
+  );
+}

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

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

package/registry/{demos/stat.tsx → examples/stat/up.tsx}

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

package/registry/examples/switch/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/switch/disabled.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/switch/disabled.tsx
+import { Switch } from "@krizaka/ui/switch";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SwitchDisabled() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsx(Switch, { label: "Autoplay", disabled: true }),
+    /* @__PURE__ */ jsx(Switch, { label: "Loop", disabled: true, defaultChecked: true })
+  ] });
+}
+export {
+  SwitchDisabled as default
+};

package/registry/examples/switch/disabled.tsx

@@ -0,0 +1,10 @@
+import { Switch } from "@krizaka/ui/switch";
+
+export default function SwitchDisabled() {
+  return (
+    <div className="flex gap-4">
+      <Switch label="Autoplay" disabled />
+      <Switch label="Loop" disabled defaultChecked />
+    </div>
+  );
+}

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

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

package/registry/{demos/switch.tsx → examples/switch/off.tsx}

@@ -1,5 +1,5 @@
 import { Switch } from "@krizaka/ui/switch";
 
-export default function SwitchDemo() {
+export default function SwitchOff() {
   return <Switch label="Autoplay" />;
 }

package/registry/examples/switch/on.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/switch/on.js

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

package/registry/examples/switch/on.tsx

@@ -0,0 +1,5 @@
+import { Switch } from "@krizaka/ui/switch";
+
+export default function SwitchOn() {
+  return <Switch label="Autoplay" defaultChecked />;
+}

package/registry/examples/switch/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/switch/small.js

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

package/registry/examples/switch/small.tsx

@@ -0,0 +1,5 @@
+import { Switch } from "@krizaka/ui/switch";
+
+export default function SwitchSmall() {
+  return <Switch label="Autoplay" size="sm" defaultChecked />;
+}

package/registry/examples/switch/with-label.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/switch/with-label.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/switch/with-label.tsx
+import { Field } from "@krizaka/ui/field";
+import { Switch } from "@krizaka/ui/switch";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SwitchWithLabel() {
+  return /* @__PURE__ */ jsxs(Field.Root, { className: "w-80", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx(Field.Label, { htmlFor: "digest", className: "text-sm text-fg", children: "Weekly digest" }),
+      /* @__PURE__ */ jsx(Switch, { id: "digest", defaultChecked: true, "aria-describedby": "digest-hint" })
+    ] }),
+    /* @__PURE__ */ jsx(Field.Hint, { id: "digest-hint", children: "One email on Monday with what you missed." })
+  ] });
+}
+export {
+  SwitchWithLabel as default
+};

package/registry/examples/switch/with-label.tsx

@@ -0,0 +1,17 @@
+import { Field } from "@krizaka/ui/field";
+import { Switch } from "@krizaka/ui/switch";
+
+// Named by a visible label (`Field.Label htmlFor`), with a hint.
+export default function SwitchWithLabel() {
+  return (
+    <Field.Root className="w-80">
+      <div className="flex items-center justify-between gap-4">
+        <Field.Label htmlFor="digest" className="text-sm text-fg">
+          Weekly digest
+        </Field.Label>
+        <Switch id="digest" defaultChecked aria-describedby="digest-hint" />
+      </div>
+      <Field.Hint id="digest-hint">One email on Monday with what you missed.</Field.Hint>
+    </Field.Root>
+  );
+}

package/registry/examples/tabs/pills.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/tabs/pills.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/tabs/pills.tsx
+import { Tabs } from "@krizaka/ui/tabs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TabsPills() {
+  return /* @__PURE__ */ jsxs(Tabs.Root, { variant: "pills", defaultValue: "videos", children: [
+    /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Profile", children: [
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "videos", children: "Videos" }),
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "stories", children: "Stories" }),
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "collections", children: "Collections" })
+    ] }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "videos", className: "text-sm text-fg-secondary", children: "Twelve videos, newest first." }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "stories", className: "text-sm text-fg-secondary", children: "Stories of the last 24 hours." }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "collections", className: "text-sm text-fg-secondary", children: "Three public collections." })
+  ] });
+}
+export {
+  TabsPills as default
+};

package/registry/examples/tabs/pills.tsx

@@ -0,0 +1,23 @@
+import { Tabs } from "@krizaka/ui/tabs";
+
+// A feed's sections: pills that scroll sideways on a phone.
+export default function TabsPills() {
+  return (
+    <Tabs.Root variant="pills" defaultValue="videos">
+      <Tabs.List aria-label="Profile">
+        <Tabs.Trigger value="videos">Videos</Tabs.Trigger>
+        <Tabs.Trigger value="stories">Stories</Tabs.Trigger>
+        <Tabs.Trigger value="collections">Collections</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="videos" className="text-sm text-fg-secondary">
+        Twelve videos, newest first.
+      </Tabs.Content>
+      <Tabs.Content value="stories" className="text-sm text-fg-secondary">
+        Stories of the last 24 hours.
+      </Tabs.Content>
+      <Tabs.Content value="collections" className="text-sm text-fg-secondary">
+        Three public collections.
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+}

package/registry/examples/tabs/segmented.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/tabs/segmented.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/tabs/segmented.tsx
+import { Tabs } from "@krizaka/ui/tabs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TabsSegmented() {
+  return /* @__PURE__ */ jsxs(Tabs.Root, { variant: "segmented", defaultValue: "grid", children: [
+    /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "View", children: [
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "grid", children: "Grid" }),
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "list", children: "List" }),
+      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "cinema", children: "Cinema" })
+    ] }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "grid", className: "text-sm text-fg-secondary", children: "Four columns of cards." }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "list", className: "text-sm text-fg-secondary", children: "One line per video." }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "cinema", className: "text-sm text-fg-secondary", children: "One large player per video." })
+  ] });
+}
+export {
+  TabsSegmented as default
+};

package/registry/examples/tabs/segmented.tsx

@@ -0,0 +1,23 @@
+import { Tabs } from "@krizaka/ui/tabs";
+
+// A view switch: equal segments in a track, the active one filled.
+export default function TabsSegmented() {
+  return (
+    <Tabs.Root variant="segmented" defaultValue="grid">
+      <Tabs.List aria-label="View">
+        <Tabs.Trigger value="grid">Grid</Tabs.Trigger>
+        <Tabs.Trigger value="list">List</Tabs.Trigger>
+        <Tabs.Trigger value="cinema">Cinema</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="grid" className="text-sm text-fg-secondary">
+        Four columns of cards.
+      </Tabs.Content>
+      <Tabs.Content value="list" className="text-sm text-fg-secondary">
+        One line per video.
+      </Tabs.Content>
+      <Tabs.Content value="cinema" className="text-sm text-fg-secondary">
+        One large player per video.
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+}

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

@@ -1,9 +1,9 @@
 "use client";
 
-// registry/demos/tabs.tsx
+// registry/examples/tabs/underline.tsx
 import { Tabs } from "@krizaka/ui/tabs";
 import { jsx, jsxs } from "react/jsx-runtime";
-function TabsDemo() {
+function TabsUnderline() {
   return /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "videos", children: [
     /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Profile", children: [
       /* @__PURE__ */ jsx(Tabs.Trigger, { value: "videos", children: "Videos" }),
@@ -18,5 +18,5 @@ function TabsDemo() {
   ] });
 }
 export {
-  TabsDemo as default
+  TabsUnderline as default
 };

package/registry/{demos/tabs.tsx → examples/tabs/underline.tsx}

@@ -1,6 +1,6 @@
 import { Tabs } from "@krizaka/ui/tabs";
 
-export default function TabsDemo() {
+export default function TabsUnderline() {
   return (
     <Tabs.Root defaultValue="videos">
       <Tabs.List aria-label="Profile">