@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/{demos/avatar.tsx → examples/avatar/with-image.tsx}

@@ -8,6 +8,6 @@ const PORTRAIT =
       '<circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>',
   );
 
-export default function AvatarDemo() {
+export default function AvatarWithImage() {
   return <Avatar src={PORTRAIT} alt="Oussama" fallback="OA" />;
 }

package/registry/examples/badge/accent.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/badge/accent.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/badge/accent.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { jsx } from "react/jsx-runtime";
+function BadgeAccent() {
+  return /* @__PURE__ */ jsx(Badge, { tone: "accent", dot: true, children: "New" });
+}
+export {
+  BadgeAccent as default
+};

package/registry/examples/badge/accent.tsx

@@ -0,0 +1,9 @@
+import { Badge } from "@krizaka/ui/badge";
+
+export default function BadgeAccent() {
+  return (
+    <Badge tone="accent" dot>
+      New
+    </Badge>
+  );
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/badge/danger.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { jsx } from "react/jsx-runtime";
+function BadgeDanger() {
+  return /* @__PURE__ */ jsx(Badge, { tone: "danger", dot: true, pulse: true, children: "Ends soon" });
+}
+export {
+  BadgeDanger as default
+};

package/registry/examples/badge/danger.tsx

@@ -0,0 +1,9 @@
+import { Badge } from "@krizaka/ui/badge";
+
+export default function BadgeDanger() {
+  return (
+    <Badge tone="danger" dot pulse>
+      Ends soon
+    </Badge>
+  );
+}

package/registry/examples/badge/medium.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/badge/medium.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/badge/medium.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { jsx } from "react/jsx-runtime";
+function BadgeMedium() {
+  return /* @__PURE__ */ jsx(Badge, { tone: "accent", size: "md", children: "Featured" });
+}
+export {
+  BadgeMedium as default
+};

package/registry/examples/badge/medium.tsx

@@ -0,0 +1,9 @@
+import { Badge } from "@krizaka/ui/badge";
+
+export default function BadgeMedium() {
+  return (
+    <Badge tone="accent" size="md">
+      Featured
+    </Badge>
+  );
+}

package/registry/examples/badge/native/dot.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/badge/native/dot.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/badge/native/dot.tsx
+import { Badge } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeBadgeDot() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Badge, { tone: "danger", dot: true, pulse: true, children: "Live" }),
+    /* @__PURE__ */ jsx(Badge, { tone: "danger", size: "md", dot: true, pulse: true, children: "Live" })
+  ] });
+}
+export {
+  NativeBadgeDot as default
+};

package/registry/examples/badge/native/dot.tsx

@@ -0,0 +1,16 @@
+import { Badge } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// `pulse` stops under reduced motion.
+export default function NativeBadgeDot() {
+  return (
+    <View style={{ flexDirection: "row", gap: 8 }}>
+      <Badge tone="danger" dot pulse>
+        Live
+      </Badge>
+      <Badge tone="danger" size="md" dot pulse>
+        Live
+      </Badge>
+    </View>
+  );
+}

package/registry/examples/badge/native/scrim.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/badge/native/scrim.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/badge/native/scrim.tsx
+import { Badge, useTheme } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeBadgeScrim() {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx(View, { style: { backgroundColor: theme.media, padding: 24, borderRadius: 12 }, children: /* @__PURE__ */ jsx(Badge, { tone: "scrim", dot: true, children: "Ending soon" }) });
+}
+export {
+  NativeBadgeScrim as default
+};

package/registry/examples/badge/native/scrim.tsx

@@ -0,0 +1,14 @@
+import { Badge, useTheme } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// `scrim`: on a media, identical in both themes.
+export default function NativeBadgeScrim() {
+  const { theme } = useTheme();
+  return (
+    <View style={{ backgroundColor: theme.media, padding: 24, borderRadius: 12 }}>
+      <Badge tone="scrim" dot>
+        Ending soon
+      </Badge>
+    </View>
+  );
+}

package/registry/examples/badge/native/tones.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/badge/native/tones.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/badge/native/tones.tsx
+import { Badge } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeBadgeTones() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Badge, { tone: "neutral", children: "Live" }),
+    /* @__PURE__ */ jsx(Badge, { tone: "accent", children: "Live" }),
+    /* @__PURE__ */ jsx(Badge, { tone: "success", children: "Live" }),
+    /* @__PURE__ */ jsx(Badge, { tone: "warning", children: "Live" }),
+    /* @__PURE__ */ jsx(Badge, { tone: "danger", children: "Live" })
+  ] });
+}
+export {
+  NativeBadgeTones as default
+};

package/registry/examples/badge/native/tones.tsx

@@ -0,0 +1,14 @@
+import { Badge } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+export default function NativeBadgeTones() {
+  return (
+    <View style={{ flexDirection: "row", gap: 8 }}>
+      <Badge tone="neutral">Live</Badge>
+      <Badge tone="accent">Live</Badge>
+      <Badge tone="success">Live</Badge>
+      <Badge tone="warning">Live</Badge>
+      <Badge tone="danger">Live</Badge>
+    </View>
+  );
+}

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

@@ -1,11 +1,11 @@
 "use client";
 
-// registry/demos/badge.tsx
+// registry/examples/badge/neutral.tsx
 import { Badge } from "@krizaka/ui/badge";
 import { jsx } from "react/jsx-runtime";
-function BadgeDemo() {
+function BadgeNeutral() {
   return /* @__PURE__ */ jsx(Badge, { children: "New" });
 }
 export {
-  BadgeDemo as default
+  BadgeNeutral as default
 };

package/registry/{demos/badge.tsx → examples/badge/neutral.tsx}

@@ -1,5 +1,5 @@
 import { Badge } from "@krizaka/ui/badge";
 
-export default function BadgeDemo() {
+export default function BadgeNeutral() {
   return <Badge>New</Badge>;
 }

package/registry/examples/badge/scrim.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/badge/scrim.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/badge/scrim.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { jsx } from "react/jsx-runtime";
+function BadgeScrim() {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-24 w-40 items-start bg-media p-2.5", children: /* @__PURE__ */ jsx(Badge, { tone: "scrim", children: "4K" }) });
+}
+export {
+  BadgeScrim as default
+};

package/registry/examples/badge/scrim.tsx

@@ -0,0 +1,10 @@
+import { Badge } from "@krizaka/ui/badge";
+
+// On a media: the veil and the text are invariant, identical in both themes.
+export default function BadgeScrim() {
+  return (
+    <div className="flex h-24 w-40 items-start bg-media p-2.5">
+      <Badge tone="scrim">4K</Badge>
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/badge/success.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { jsx } from "react/jsx-runtime";
+function BadgeSuccess() {
+  return /* @__PURE__ */ jsx(Badge, { tone: "success", dot: true, children: "Paid" });
+}
+export {
+  BadgeSuccess as default
+};

package/registry/examples/badge/success.tsx

@@ -0,0 +1,9 @@
+import { Badge } from "@krizaka/ui/badge";
+
+export default function BadgeSuccess() {
+  return (
+    <Badge tone="success" dot>
+      Paid
+    </Badge>
+  );
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/badge/warning.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { jsx } from "react/jsx-runtime";
+function BadgeWarning() {
+  return /* @__PURE__ */ jsx(Badge, { tone: "warning", dot: true, children: "Pending" });
+}
+export {
+  BadgeWarning as default
+};

package/registry/examples/badge/warning.tsx

@@ -0,0 +1,9 @@
+import { Badge } from "@krizaka/ui/badge";
+
+export default function BadgeWarning() {
+  return (
+    <Badge tone="warning" dot>
+      Pending
+    </Badge>
+  );
+}

package/registry/examples/button/as-child-link.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/button/as-child-link.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/button/as-child-link.tsx
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+function ButtonAsChildLink() {
+  return /* @__PURE__ */ jsx(Button, { variant: "outline", asChild: true, children: /* @__PURE__ */ jsx("a", { href: "#docs", children: "Read the docs" }) });
+}
+export {
+  ButtonAsChildLink as default
+};

package/registry/examples/button/as-child-link.tsx

@@ -0,0 +1,10 @@
+import { Button } from "@krizaka/ui/button";
+
+// `asChild`: the `<a>` is rendered, with the button's classes and props merged into it.
+export default function ButtonAsChildLink() {
+  return (
+    <Button variant="outline" asChild>
+      <a href="#docs">Read the docs</a>
+    </Button>
+  );
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/button/danger.tsx
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+function ButtonDanger() {
+  return /* @__PURE__ */ jsx(Button, { variant: "danger", children: "Delete" });
+}
+export {
+  ButtonDanger as default
+};

package/registry/examples/button/danger.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@krizaka/ui/button";
+
+export default function ButtonDanger() {
+  return <Button variant="danger">Delete</Button>;
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/button/disabled.tsx
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+function ButtonDisabled() {
+  return /* @__PURE__ */ jsx(Button, { variant: "primary", disabled: true, children: "Continue" });
+}
+export {
+  ButtonDisabled as default
+};

package/registry/examples/button/disabled.tsx

@@ -0,0 +1,9 @@
+import { Button } from "@krizaka/ui/button";
+
+export default function ButtonDisabled() {
+  return (
+    <Button variant="primary" disabled>
+      Continue
+    </Button>
+  );
+}

package/registry/examples/button/ghost.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/button/ghost.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/button/ghost.tsx
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+function ButtonGhost() {
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Continue" });
+}
+export {
+  ButtonGhost as default
+};

package/registry/examples/button/ghost.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@krizaka/ui/button";
+
+export default function ButtonGhost() {
+  return <Button variant="ghost">Continue</Button>;
+}

package/registry/examples/button/gradient.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/button/gradient.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/button/gradient.tsx
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+function ButtonGradient() {
+  return /* @__PURE__ */ jsx(Button, { variant: "gradient", children: "Start free" });
+}
+export {
+  ButtonGradient as default
+};

package/registry/examples/button/gradient.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@krizaka/ui/button";
+
+export default function ButtonGradient() {
+  return <Button variant="gradient">Start free</Button>;
+}

package/registry/examples/button/icon.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/button/icon.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/button/icon.tsx
+import { IconButton } from "@krizaka/ui/button";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ButtonIcon() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(IconButton, { label: "Close", variant: "ghost", 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(IconButton, { label: "Add", variant: "primary", shape: "pill", 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: "M12 5v14M5 12h14" }) }) })
+  ] });
+}
+export {
+  ButtonIcon as default
+};

package/registry/examples/button/icon.tsx

@@ -0,0 +1,18 @@
+import { IconButton } from "@krizaka/ui/button";
+
+export default function ButtonIcon() {
+  return (
+    <div className="flex items-center gap-3">
+      <IconButton label="Close" variant="ghost">
+        <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>
+      </IconButton>
+      <IconButton label="Add" variant="primary" shape="pill">
+        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+          <path d="M12 5v14M5 12h14" />
+        </svg>
+      </IconButton>
+    </div>
+  );
+}

package/registry/examples/button/loading.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/button/loading.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/button/loading.tsx
+import { Button } from "@krizaka/ui/button";
+import { jsx } from "react/jsx-runtime";
+function ButtonLoading() {
+  return /* @__PURE__ */ jsx(Button, { variant: "primary", loading: true, children: "Saving\u2026" });
+}
+export {
+  ButtonLoading as default
+};

package/registry/examples/button/loading.tsx

@@ -0,0 +1,10 @@
+import { Button } from "@krizaka/ui/button";
+
+// Disabled, `aria-busy` and `data-loading`: add your own spinner if you want one.
+export default function ButtonLoading() {
+  return (
+    <Button variant="primary" loading>
+      Saving…
+    </Button>
+  );
+}

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

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/button/native/danger.tsx
+import { Button } from "@krizaka/ui/native";
+import { jsx } from "react/jsx-runtime";
+function NativeButtonDanger() {
+  return /* @__PURE__ */ jsx(Button, { variant: "danger", label: "Delete", onPress: () => {
+  } });
+}
+export {
+  NativeButtonDanger as default
+};

package/registry/examples/button/native/danger.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@krizaka/ui/native";
+
+export default function NativeButtonDanger() {
+  return <Button variant="danger" label="Delete" onPress={() => {}} />;
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/button/native/disabled.tsx
+import { Button } from "@krizaka/ui/native";
+import { jsx } from "react/jsx-runtime";
+function NativeButtonDisabled() {
+  return /* @__PURE__ */ jsx(Button, { variant: "primary", label: "Continue", disabled: true });
+}
+export {
+  NativeButtonDisabled as default
+};

package/registry/examples/button/native/disabled.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@krizaka/ui/native";
+
+export default function NativeButtonDisabled() {
+  return <Button variant="primary" label="Continue" disabled />;
+}