@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/{demos/countdown.js → examples/countdown/hours.js}

@@ -1,13 +1,13 @@
 "use client";
 
-// registry/demos/countdown.tsx
+// registry/examples/countdown/hours.tsx
 import { Countdown } from "@krizaka/ui/countdown";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
-function CountdownDemo() {
+function CountdownHours() {
   const [target] = useState(() => Date.now() + 3723e3);
   return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in" });
 }
 export {
-  CountdownDemo as default
+  CountdownHours as default
 };

package/registry/{demos/countdown.tsx → examples/countdown/hours.tsx}

@@ -3,7 +3,7 @@
 import { Countdown } from "@krizaka/ui/countdown";
 import { useState } from "react";
 
-export default function CountdownDemo() {
+export default function CountdownHours() {
   // One hour, two minutes and three seconds from the first render.
   const [target] = useState(() => Date.now() + 3_723_000);
   return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" />;

package/registry/examples/countdown/native/days.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/countdown/native/days.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/countdown/native/days.tsx
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeCountdownDays() {
+  const [target] = useState(() => Date.now() + ((2 * 24 + 4) * 3600 + 13 * 60) * 1e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in" });
+}
+export {
+  NativeCountdownDays as default
+};

package/registry/examples/countdown/native/days.tsx

@@ -0,0 +1,7 @@
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+
+export default function NativeCountdownDays() {
+  const [target] = useState(() => Date.now() + ((2 * 24 + 4) * 3600 + 13 * 60) * 1000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" />;
+}

package/registry/examples/countdown/native/hours.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/countdown/native/hours.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/countdown/native/hours.tsx
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeCountdownHours() {
+  const [target] = useState(() => Date.now() + 3723e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in" });
+}
+export {
+  NativeCountdownHours as default
+};

package/registry/examples/countdown/native/hours.tsx

@@ -0,0 +1,7 @@
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+
+export default function NativeCountdownHours() {
+  const [target] = useState(() => Date.now() + 3_723_000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" />;
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/countdown/native/sizes.tsx
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var units = { d: "d", h: "h", m: "m", s: "s" };
+function NativeCountdownSizes() {
+  const [target] = useState(() => Date.now() + 3723e3);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Countdown, { target, units, label: "Ends in", size: "sm" }),
+    /* @__PURE__ */ jsx(Countdown, { target, units, label: "Ends in", size: "md" }),
+    /* @__PURE__ */ jsx(Countdown, { target, units, label: "Ends in", size: "lg" })
+  ] });
+}
+export {
+  NativeCountdownSizes as default
+};

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

@@ -0,0 +1,15 @@
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+
+const units = { d: "d", h: "h", m: "m", s: "s" };
+
+export default function NativeCountdownSizes() {
+  const [target] = useState(() => Date.now() + 3_723_000);
+  return (
+    <>
+      <Countdown target={target} units={units} label="Ends in" size="sm" />
+      <Countdown target={target} units={units} label="Ends in" size="md" />
+      <Countdown target={target} units={units} label="Ends in" size="lg" />
+    </>
+  );
+}

package/registry/examples/countdown/native/urgent.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/countdown/native/urgent.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/countdown/native/urgent.tsx
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeCountdownUrgent() {
+  const [target] = useState(() => Date.now() + 42e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in", size: "lg" });
+}
+export {
+  NativeCountdownUrgent as default
+};

package/registry/examples/countdown/native/urgent.tsx

@@ -0,0 +1,7 @@
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+
+export default function NativeCountdownUrgent() {
+  const [target] = useState(() => Date.now() + 42_000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" size="lg" />;
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/countdown/native/with-label.tsx
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeCountdownWithLabel() {
+  const [target] = useState(() => Date.now() + 3723e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in", showLabel: true });
+}
+export {
+  NativeCountdownWithLabel as default
+};

package/registry/examples/countdown/native/with-label.tsx

@@ -0,0 +1,7 @@
+import { Countdown } from "@krizaka/ui/native";
+import { useState } from "react";
+
+export default function NativeCountdownWithLabel() {
+  const [target] = useState(() => Date.now() + 3_723_000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" showLabel />;
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/countdown/sizes.tsx
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var units = { d: "d", h: "h", m: "m", s: "s" };
+function CountdownSizes() {
+  const [target] = useState(() => Date.now() + 3723e3);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3", children: [
+    /* @__PURE__ */ jsx(Countdown, { target, units, label: "Ends in", size: "sm" }),
+    /* @__PURE__ */ jsx(Countdown, { target, units, label: "Ends in", size: "md" }),
+    /* @__PURE__ */ jsx(Countdown, { target, units, label: "Ends in", size: "lg" })
+  ] });
+}
+export {
+  CountdownSizes as default
+};

package/registry/examples/countdown/sizes.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+
+const units = { d: "d", h: "h", m: "m", s: "s" };
+
+export default function CountdownSizes() {
+  const [target] = useState(() => Date.now() + 3_723_000);
+  return (
+    <div className="flex flex-col items-start gap-3">
+      <Countdown target={target} units={units} label="Ends in" size="sm" />
+      <Countdown target={target} units={units} label="Ends in" size="md" />
+      <Countdown target={target} units={units} label="Ends in" size="lg" />
+    </div>
+  );
+}

package/registry/examples/countdown/urgent.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/countdown/urgent.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/countdown/urgent.tsx
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function CountdownUrgent() {
+  const [target] = useState(() => Date.now() + 42e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in" });
+}
+export {
+  CountdownUrgent as default
+};

package/registry/examples/countdown/urgent.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+
+// Under `urgentBelowMs` (one minute by default): the danger role, the last segment pulses.
+export default function CountdownUrgent() {
+  const [target] = useState(() => Date.now() + 42_000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" />;
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/countdown/with-label.tsx
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function CountdownWithLabel() {
+  const [target] = useState(() => Date.now() + 3723e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in", showLabel: true });
+}
+export {
+  CountdownWithLabel as default
+};

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

@@ -0,0 +1,10 @@
+"use client";
+
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+
+// `showLabel` writes the label before the segments (it stays the accessible name).
+export default function CountdownWithLabel() {
+  const [target] = useState(() => Date.now() + 3_723_000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" showLabel />;
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/dialog/alert-destructive.tsx
+import { Button } from "@krizaka/ui/button";
+import { AlertDialog } from "@krizaka/ui/dialog";
+import { jsx } from "react/jsx-runtime";
+function DialogAlertDestructive({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog,
+    {
+      defaultOpen,
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "danger", children: "Delete the video" }),
+      title: "Delete this video?",
+      description: "Its views, comments and earnings history go with it. This cannot be undone.",
+      confirmLabel: "Delete",
+      cancelLabel: "Keep it",
+      tone: "danger",
+      onConfirm: () => new Promise((resolve) => setTimeout(resolve, 1200))
+    }
+  );
+}
+export {
+  DialogAlertDestructive as default
+};

package/registry/examples/dialog/alert-destructive.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { AlertDialog } from "@krizaka/ui/dialog";
+
+// An async `onConfirm`: the button loads until it settles; the dialog closes when it resolves, stays open when it rejects.
+export default function DialogAlertDestructive({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <AlertDialog
+      defaultOpen={defaultOpen}
+      trigger={<Button variant="danger">Delete the video</Button>}
+      title="Delete this video?"
+      description="Its views, comments and earnings history go with it. This cannot be undone."
+      confirmLabel="Delete"
+      cancelLabel="Keep it"
+      tone="danger"
+      onConfirm={() => new Promise((resolve) => setTimeout(resolve, 1200))}
+    />
+  );
+}

package/registry/examples/dialog/bottom.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/dialog/bottom.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/dialog/bottom.tsx
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+import { Field, Input } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DialogBottom({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { defaultOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Open" }) }),
+    /* @__PURE__ */ jsxs(Dialog.Content, { closeLabel: "Close", placement: "bottom", children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { children: "Invite a collaborator" }),
+        /* @__PURE__ */ jsx(Dialog.Description, { children: "They get access to the drafts of this channel." })
+      ] }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { htmlFor: "invite-email-bottom", children: "Email" }),
+        /* @__PURE__ */ jsx(Input, { id: "invite-email-bottom", type: "email", placeholder: "name@example.com" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Send the invitation" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DialogBottom as default
+};

package/registry/examples/dialog/bottom.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+import { Field, Input } from "@krizaka/ui/field";
+
+// `placement="bottom"`: a sheet on a phone, centred from `sm` up.
+export default function DialogBottom({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Dialog.Root defaultOpen={defaultOpen}>
+      <Dialog.Trigger asChild>
+        <Button>Open</Button>
+      </Dialog.Trigger>
+      <Dialog.Content closeLabel="Close" placement="bottom">
+        <Dialog.Header>
+          <Dialog.Title>Invite a collaborator</Dialog.Title>
+          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Field.Root>
+            <Field.Label htmlFor="invite-email-bottom">Email</Field.Label>
+            <Input id="invite-email-bottom" type="email" placeholder="name@example.com" />
+          </Field.Root>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close asChild>
+            <Button variant="ghost">Cancel</Button>
+          </Dialog.Close>
+          <Button variant="primary">Send the invitation</Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

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

@@ -1,11 +1,11 @@
 "use client";
 
-// registry/demos/dialog.tsx
+// registry/examples/dialog/center.tsx
 import { Button } from "@krizaka/ui/button";
 import { Dialog } from "@krizaka/ui/dialog";
 import { Field, Input } from "@krizaka/ui/field";
 import { jsx, jsxs } from "react/jsx-runtime";
-function DialogDemo({ defaultOpen = false }) {
+function DialogCenter({ defaultOpen = false }) {
   return /* @__PURE__ */ jsxs(Dialog.Root, { defaultOpen, children: [
     /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Open" }) }),
     /* @__PURE__ */ jsxs(Dialog.Content, { closeLabel: "Close", children: [
@@ -25,5 +25,5 @@ function DialogDemo({ defaultOpen = false }) {
   ] });
 }
 export {
-  DialogDemo as default
+  DialogCenter as default
 };

package/registry/{demos/dialog.tsx → examples/dialog/center.tsx}

@@ -2,7 +2,7 @@ import { Button } from "@krizaka/ui/button";
 import { Dialog } from "@krizaka/ui/dialog";
 import { Field, Input } from "@krizaka/ui/field";
 
-export default function DialogDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+export default function DialogCenter({ defaultOpen = false }: { defaultOpen?: boolean }) {
   return (
     <Dialog.Root defaultOpen={defaultOpen}>
       <Dialog.Trigger asChild>

package/registry/examples/dialog/gate.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/dialog/gate.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/dialog/gate.tsx
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DialogGate({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { defaultOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Enter the channel" }) }),
+    /* @__PURE__ */ jsxs(Dialog.Content, { hideClose: true, dismissible: false, size: "sm", children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { className: "pr-5", children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { children: "Are you 18 or older?" }),
+        /* @__PURE__ */ jsx(Dialog.Description, { children: "This channel shows content for adults only." })
+      ] }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Leave" }) }),
+        /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "primary", children: "I am 18 or older" }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DialogGate as default
+};

package/registry/examples/dialog/gate.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+
+// A question the user must answer: no close button, Escape and the overlay do nothing — it closes through its actions.
+export default function DialogGate({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Dialog.Root defaultOpen={defaultOpen}>
+      <Dialog.Trigger asChild>
+        <Button>Enter the channel</Button>
+      </Dialog.Trigger>
+      <Dialog.Content hideClose dismissible={false} size="sm">
+        <Dialog.Header className="pr-5">
+          <Dialog.Title>Are you 18 or older?</Dialog.Title>
+          <Dialog.Description>This channel shows content for adults only.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Footer>
+          <Dialog.Close asChild>
+            <Button variant="ghost">Leave</Button>
+          </Dialog.Close>
+          <Dialog.Close asChild>
+            <Button variant="primary">I am 18 or older</Button>
+          </Dialog.Close>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

package/registry/examples/dialog/right.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/dialog/right.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/dialog/right.tsx
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+import { Field, Input } from "@krizaka/ui/field";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DialogRight({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { defaultOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Open" }) }),
+    /* @__PURE__ */ jsxs(Dialog.Content, { closeLabel: "Close", placement: "right", children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { children: "Invite a collaborator" }),
+        /* @__PURE__ */ jsx(Dialog.Description, { children: "They get access to the drafts of this channel." })
+      ] }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { htmlFor: "invite-email-right", children: "Email" }),
+        /* @__PURE__ */ jsx(Input, { id: "invite-email-right", type: "email", placeholder: "name@example.com" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Send the invitation" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DialogRight as default
+};

package/registry/examples/dialog/right.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@krizaka/ui/button";
+import { Dialog } from "@krizaka/ui/dialog";
+import { Field, Input } from "@krizaka/ui/field";
+
+// `placement="right"`: a side panel, full height.
+export default function DialogRight({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Dialog.Root defaultOpen={defaultOpen}>
+      <Dialog.Trigger asChild>
+        <Button>Open</Button>
+      </Dialog.Trigger>
+      <Dialog.Content closeLabel="Close" placement="right">
+        <Dialog.Header>
+          <Dialog.Title>Invite a collaborator</Dialog.Title>
+          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Field.Root>
+            <Field.Label htmlFor="invite-email-right">Email</Field.Label>
+            <Input id="invite-email-right" type="email" placeholder="name@example.com" />
+          </Field.Root>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close asChild>
+            <Button variant="ghost">Cancel</Button>
+          </Dialog.Close>
+          <Button variant="primary">Send the invitation</Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

package/registry/examples/dialog/sheet-form.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;