@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/examples/card/native/body.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/card/native/body.tsx
+import { Button, Card } from "@krizaka/ui/native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeCardBody() {
+  return /* @__PURE__ */ jsx(Card.Root, { radius: "lg", style: { width: 300 }, children: /* @__PURE__ */ jsxs(Card.Body, { padding: "lg", children: [
+    /* @__PURE__ */ jsx(Card.Title, { children: "Your wallet" }),
+    /* @__PURE__ */ jsx(Card.Description, { children: "Top up to support the creators you follow." }),
+    /* @__PURE__ */ jsx(Button, { variant: "primary", label: "Top up" })
+  ] }) });
+}
+export {
+  NativeCardBody as default
+};

package/registry/examples/card/native/body.tsx

@@ -0,0 +1,13 @@
+import { Button, Card } from "@krizaka/ui/native";
+
+export default function NativeCardBody() {
+  return (
+    <Card.Root radius="lg" style={{ width: 300 }}>
+      <Card.Body padding="lg">
+        <Card.Title>Your wallet</Card.Title>
+        <Card.Description>Top up to support the creators you follow.</Card.Description>
+        <Button variant="primary" label="Top up" />
+      </Card.Body>
+    </Card.Root>
+  );
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/card/native/default.tsx
+import { Badge, Card, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeCardDefault() {
+  return /* @__PURE__ */ jsxs(Card.Root, { style: { width: 300 }, children: [
+    /* @__PURE__ */ jsxs(Card.Media, { children: [
+      /* @__PURE__ */ jsx(Card.Image, { src: null }),
+      /* @__PURE__ */ jsx(Card.Overlay, { corner: "top-left", children: /* @__PURE__ */ jsx(Badge, { tone: "scrim", dot: true, children: "Tonight" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Card.Body, { children: [
+      /* @__PURE__ */ jsxs(View, { children: [
+        /* @__PURE__ */ jsx(Card.Title, { children: "Night set \u2014 vol. 4" }),
+        /* @__PURE__ */ jsx(Card.Description, { children: "Forty minutes of deep house, recorded live." })
+      ] }),
+      /* @__PURE__ */ jsx(Card.Footer, { children: /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "@maya \xB7 2 h ago" }) })
+    ] })
+  ] });
+}
+export {
+  NativeCardDefault as default
+};

package/registry/examples/card/native/default.tsx

@@ -0,0 +1,28 @@
+import { Badge, Card, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+export default function NativeCardDefault() {
+  return (
+    <Card.Root style={{ width: 300 }}>
+      <Card.Media>
+        <Card.Image src={null} />
+        <Card.Overlay corner="top-left">
+          <Badge tone="scrim" dot>
+            Tonight
+          </Badge>
+        </Card.Overlay>
+      </Card.Media>
+      <Card.Body>
+        <View>
+          <Card.Title>Night set — vol. 4</Card.Title>
+          <Card.Description>Forty minutes of deep house, recorded live.</Card.Description>
+        </View>
+        <Card.Footer>
+          <Txt variant="caption" tone="secondary">
+            @maya · 2 h ago
+          </Txt>
+        </Card.Footer>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/registry/examples/card/native/elevated.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/card/native/elevated.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/card/native/elevated.tsx
+import { Badge, Card, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeCardElevated() {
+  return /* @__PURE__ */ jsxs(Card.Root, { tone: "elevated", style: { width: 300 }, children: [
+    /* @__PURE__ */ jsxs(Card.Media, { children: [
+      /* @__PURE__ */ jsx(Card.Image, { src: null }),
+      /* @__PURE__ */ jsx(Card.Overlay, { corner: "top-left", children: /* @__PURE__ */ jsx(Badge, { tone: "scrim", dot: true, children: "Tonight" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Card.Body, { children: [
+      /* @__PURE__ */ jsxs(View, { children: [
+        /* @__PURE__ */ jsx(Card.Title, { children: "Night set \u2014 vol. 4" }),
+        /* @__PURE__ */ jsx(Card.Description, { children: "Forty minutes of deep house, recorded live." })
+      ] }),
+      /* @__PURE__ */ jsx(Card.Footer, { children: /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "@maya \xB7 2 h ago" }) })
+    ] })
+  ] });
+}
+export {
+  NativeCardElevated as default
+};

package/registry/examples/card/native/elevated.tsx

@@ -0,0 +1,28 @@
+import { Badge, Card, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+export default function NativeCardElevated() {
+  return (
+    <Card.Root tone="elevated" style={{ width: 300 }}>
+      <Card.Media>
+        <Card.Image src={null} />
+        <Card.Overlay corner="top-left">
+          <Badge tone="scrim" dot>
+            Tonight
+          </Badge>
+        </Card.Overlay>
+      </Card.Media>
+      <Card.Body>
+        <View>
+          <Card.Title>Night set — vol. 4</Card.Title>
+          <Card.Description>Forty minutes of deep house, recorded live.</Card.Description>
+        </View>
+        <Card.Footer>
+          <Txt variant="caption" tone="secondary">
+            @maya · 2 h ago
+          </Txt>
+        </Card.Footer>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/registry/examples/card/native/pressable.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/card/native/pressable.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/card/native/pressable.tsx
+import { Card } from "@krizaka/ui/native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeCardPressable() {
+  return /* @__PURE__ */ jsx(Card.Root, { onPress: () => {
+  }, style: { width: 300 }, children: /* @__PURE__ */ jsxs(Card.Body, { children: [
+    /* @__PURE__ */ jsx(Card.Title, { children: "Night set \u2014 vol. 4" }),
+    /* @__PURE__ */ jsx(Card.Description, { children: "Tap anywhere on the card." })
+  ] }) });
+}
+export {
+  NativeCardPressable as default
+};

package/registry/examples/card/native/pressable.tsx

@@ -0,0 +1,13 @@
+import { Card } from "@krizaka/ui/native";
+
+// `onPress`: the whole card is a button, named by its content.
+export default function NativeCardPressable() {
+  return (
+    <Card.Root onPress={() => {}} style={{ width: 300 }}>
+      <Card.Body>
+        <Card.Title>Night set — vol. 4</Card.Title>
+        <Card.Description>Tap anywhere on the card.</Card.Description>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/registry/examples/card/reveal-grid.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/card/reveal-grid.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/card/reveal-grid.tsx
+import { MotionObserver } from "@krizaka/ui";
+import { Card } from "@krizaka/ui/card";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var COVER = "data:image/svg+xml;utf8," + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90"><rect width="160" height="90" fill="#4338ca"/><circle cx="118" cy="30" r="14" fill="#fde68a"/></svg>'
+);
+function CardRevealGrid() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MotionObserver, {}),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3", children: ["Enter", "Reveal", "Open", "Lift", "Glow", "Roll"].map((word, index) => /* @__PURE__ */ jsxs(Card.Root, { reveal: index, interactive: true, radius: "lg", children: [
+      /* @__PURE__ */ jsx(Card.Media, { aspect: "video", children: /* @__PURE__ */ jsx(Card.Image, { src: index % 2 ? null : COVER }) }),
+      /* @__PURE__ */ jsxs(Card.Body, { padding: "sm", children: [
+        /* @__PURE__ */ jsx(Card.Title, { children: word }),
+        /* @__PURE__ */ jsxs(Card.Description, { children: [
+          "Step ",
+          index + 1,
+          " of the signature."
+        ] })
+      ] })
+    ] }, word)) })
+  ] });
+}
+export {
+  CardRevealGrid as default
+};

package/registry/examples/card/reveal-grid.tsx

@@ -0,0 +1,31 @@
+import { MotionObserver } from "@krizaka/ui";
+import { Card } from "@krizaka/ui/card";
+
+const COVER =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90"><rect width="160" height="90" fill="#4338ca"/>' +
+      '<circle cx="118" cy="30" r="14" fill="#fde68a"/></svg>',
+  );
+
+// `reveal={index}` + one `MotionObserver` per page: the cards enter in cascade (at once under reduced motion).
+export default function CardRevealGrid() {
+  return (
+    <>
+      <MotionObserver />
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+        {["Enter", "Reveal", "Open", "Lift", "Glow", "Roll"].map((word, index) => (
+          <Card.Root key={word} reveal={index} interactive radius="lg">
+            <Card.Media aspect="video">
+              <Card.Image src={index % 2 ? null : COVER} />
+            </Card.Media>
+            <Card.Body padding="sm">
+              <Card.Title>{word}</Card.Title>
+              <Card.Description>Step {index + 1} of the signature.</Card.Description>
+            </Card.Body>
+          </Card.Root>
+        ))}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/card/stat-card.tsx
+import { Card } from "@krizaka/ui/card";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CardStatCard() {
+  return /* @__PURE__ */ jsx(Card.Root, { tone: "elevated", children: /* @__PURE__ */ jsxs(Card.Body, { children: [
+    /* @__PURE__ */ jsx(Card.Title, { children: "This month" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(Card.Stat, { label: "Revenue", children: "\u20AC4,812" }),
+      /* @__PURE__ */ jsx(Card.Stat, { label: "Supporters", children: "318" })
+    ] }),
+    /* @__PURE__ */ jsx(Card.Footer, { children: "Updated 5 minutes ago" })
+  ] }) });
+}
+export {
+  CardStatCard as default
+};

package/registry/examples/card/stat-card.tsx

@@ -0,0 +1,17 @@
+import { Card } from "@krizaka/ui/card";
+
+// `Card.Stat`: the label in capitals, the value in tabular digits.
+export default function CardStatCard() {
+  return (
+    <Card.Root tone="elevated">
+      <Card.Body>
+        <Card.Title>This month</Card.Title>
+        <div className="grid grid-cols-2 gap-4">
+          <Card.Stat label="Revenue">€4,812</Card.Stat>
+          <Card.Stat label="Supporters">318</Card.Stat>
+        </div>
+        <Card.Footer>Updated 5 minutes ago</Card.Footer>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/registry/examples/checkbox/checked.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/checkbox/checked.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/checkbox/checked.tsx
+import { Checkbox } from "@krizaka/ui/checkbox";
+import { jsx } from "react/jsx-runtime";
+function CheckboxChecked() {
+  return /* @__PURE__ */ jsx(Checkbox, { defaultChecked: true, children: "I accept the terms of use" });
+}
+export {
+  CheckboxChecked as default
+};

package/registry/examples/checkbox/checked.tsx

@@ -0,0 +1,5 @@
+import { Checkbox } from "@krizaka/ui/checkbox";
+
+export default function CheckboxChecked() {
+  return <Checkbox defaultChecked>I accept the terms of use</Checkbox>;
+}

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

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/checkbox/disabled.tsx
+import { Checkbox } from "@krizaka/ui/checkbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CheckboxDisabled() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(Checkbox, { disabled: true, children: "Email me the receipts" }),
+    /* @__PURE__ */ jsx(Checkbox, { disabled: true, defaultChecked: true, children: "Keep me signed in" })
+  ] });
+}
+export {
+  CheckboxDisabled as default
+};

package/registry/examples/checkbox/disabled.tsx

@@ -0,0 +1,12 @@
+import { Checkbox } from "@krizaka/ui/checkbox";
+
+export default function CheckboxDisabled() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Checkbox disabled>Email me the receipts</Checkbox>
+      <Checkbox disabled defaultChecked>
+        Keep me signed in
+      </Checkbox>
+    </div>
+  );
+}

package/registry/examples/checkbox/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/checkbox/indeterminate.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/checkbox/indeterminate.tsx
+import { Checkbox } from "@krizaka/ui/checkbox";
+import { jsx } from "react/jsx-runtime";
+function CheckboxIndeterminate() {
+  return /* @__PURE__ */ jsx(Checkbox, { checked: "indeterminate", children: "Select all videos" });
+}
+export {
+  CheckboxIndeterminate as default
+};

package/registry/examples/checkbox/indeterminate.tsx

@@ -0,0 +1,6 @@
+import { Checkbox } from "@krizaka/ui/checkbox";
+
+// `checked="indeterminate"`: some of a list are selected.
+export default function CheckboxIndeterminate() {
+  return <Checkbox checked="indeterminate">Select all videos</Checkbox>;
+}

package/registry/examples/checkbox/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/checkbox/invalid.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/checkbox/invalid.tsx
+import { Checkbox } from "@krizaka/ui/checkbox";
+import { Field } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CheckboxInvalid() {
+  return /* @__PURE__ */ jsxs(Field.Root, { className: "w-80", children: [
+    /* @__PURE__ */ jsx(Checkbox, { invalid: true, "aria-describedby": "age-error", children: "I am 18 or older" }),
+    /* @__PURE__ */ jsx(Field.Error, { id: "age-error", children: "You must be 18 or older to continue." })
+  ] });
+}
+export {
+  CheckboxInvalid as default
+};

package/registry/examples/checkbox/invalid.tsx

@@ -0,0 +1,14 @@
+import { Checkbox } from "@krizaka/ui/checkbox";
+import { Field } from "@krizaka/ui/field";
+
+// In a `Field`: `invalid` and its error, wired by `aria-describedby`.
+export default function CheckboxInvalid() {
+  return (
+    <Field.Root className="w-80">
+      <Checkbox invalid aria-describedby="age-error">
+        I am 18 or older
+      </Checkbox>
+      <Field.Error id="age-error">You must be 18 or older to continue.</Field.Error>
+    </Field.Root>
+  );
+}

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

@@ -1,11 +1,11 @@
 "use client";
 
-// registry/demos/checkbox.tsx
+// registry/examples/checkbox/unchecked.tsx
 import { Checkbox } from "@krizaka/ui/checkbox";
 import { jsx } from "react/jsx-runtime";
-function CheckboxDemo() {
+function CheckboxUnchecked() {
   return /* @__PURE__ */ jsx(Checkbox, { children: "I accept the terms of use" });
 }
 export {
-  CheckboxDemo as default
+  CheckboxUnchecked as default
 };

package/registry/{demos/checkbox.tsx → examples/checkbox/unchecked.tsx}

@@ -1,5 +1,6 @@
 import { Checkbox } from "@krizaka/ui/checkbox";
 
-export default function CheckboxDemo() {
+// Its words as children: one clickable label.
+export default function CheckboxUnchecked() {
   return <Checkbox>I accept the terms of use</Checkbox>;
 }

package/registry/examples/chip/multiple.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/chip/multiple.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/chip/multiple.tsx
+import { Chip } from "@krizaka/ui/chip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChipMultiple() {
+  return /* @__PURE__ */ jsxs(Chip.Group, { type: "multiple", label: "Tags", defaultValue: ["night", "rain"], children: [
+    /* @__PURE__ */ jsx(Chip, { value: "night", children: "#night" }),
+    /* @__PURE__ */ jsx(Chip, { value: "city", children: "#city" }),
+    /* @__PURE__ */ jsx(Chip, { value: "rain", children: "#rain" }),
+    /* @__PURE__ */ jsx(Chip, { value: "neon", children: "#neon" })
+  ] });
+}
+export {
+  ChipMultiple as default
+};

package/registry/examples/chip/multiple.tsx

@@ -0,0 +1,12 @@
+import { Chip } from "@krizaka/ui/chip";
+
+export default function ChipMultiple() {
+  return (
+    <Chip.Group type="multiple" label="Tags" defaultValue={["night", "rain"]}>
+      <Chip value="night">#night</Chip>
+      <Chip value="city">#city</Chip>
+      <Chip value="rain">#rain</Chip>
+      <Chip value="neon">#neon</Chip>
+    </Chip.Group>
+  );
+}

package/registry/examples/chip/native/multiple.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/chip/native/multiple.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/chip/native/multiple.tsx
+import { Chip } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeChipMultiple() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsxs(Chip.Group, { type: "multiple", defaultValue: ["house", "techno"], "aria-label": "Genres", scrollable: true, children: [
+    /* @__PURE__ */ jsx(Chip, { value: "house", children: "House" }),
+    /* @__PURE__ */ jsx(Chip, { value: "techno", children: "Techno" }),
+    /* @__PURE__ */ jsx(Chip, { value: "ambient", children: "Ambient" }),
+    /* @__PURE__ */ jsx(Chip, { value: "jazz", children: "Jazz" }),
+    /* @__PURE__ */ jsx(Chip, { value: "soul", children: "Soul" })
+  ] }) });
+}
+export {
+  NativeChipMultiple as default
+};

package/registry/examples/chip/native/multiple.tsx

@@ -0,0 +1,17 @@
+import { Chip } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// `scrollable`: one horizontal row, a filter bar.
+export default function NativeChipMultiple() {
+  return (
+    <View style={{ width: 320 }}>
+      <Chip.Group type="multiple" defaultValue={["house", "techno"]} aria-label="Genres" scrollable>
+        <Chip value="house">House</Chip>
+        <Chip value="techno">Techno</Chip>
+        <Chip value="ambient">Ambient</Chip>
+        <Chip value="jazz">Jazz</Chip>
+        <Chip value="soul">Soul</Chip>
+      </Chip.Group>
+    </View>
+  );
+}

package/registry/examples/chip/native/removable.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/chip/native/removable.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/chip/native/removable.tsx
+import { Chip } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeChipRemovable() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Chip, { removable: true, removeLabel: "Remove #night", onRemove: () => {
+    }, children: "#night" }),
+    /* @__PURE__ */ jsx(Chip, { removable: true, removeLabel: "Remove #live", onRemove: () => {
+    }, children: "#live" })
+  ] });
+}
+export {
+  NativeChipRemovable as default
+};

package/registry/examples/chip/native/removable.tsx

@@ -0,0 +1,15 @@
+import { Chip } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+export default function NativeChipRemovable() {
+  return (
+    <View style={{ flexDirection: "row", gap: 8 }}>
+      <Chip removable removeLabel="Remove #night" onRemove={() => {}}>
+        #night
+      </Chip>
+      <Chip removable removeLabel="Remove #live" onRemove={() => {}}>
+        #live
+      </Chip>
+    </View>
+  );
+}

package/registry/examples/chip/native/single.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;