@krizaka/ui 3.2.0 → 3.3.0

package/registry/examples/dialog/native/sheet.tsx

@@ -0,0 +1,18 @@
+import { Button, Sheet, Txt } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+// A bottom sheet: it rises over the dimmed screen, the scrim or the back button closes it.
+export default function NativeDialogSheet({ defaultOpen }: { defaultOpen?: boolean }) {
+  const [open, setOpen] = React.useState(Boolean(defaultOpen));
+  return (
+    <View>
+      <Button label="Show the pick-up point" onPress={() => setOpen(true)} />
+      <Sheet open={open} onOpenChange={setOpen} title="Café Olimpico">
+        <Txt tone="secondary">124 Rue Saint-Viateur O, Montréal · 350 m away</Txt>
+        <Txt>Open until 10 pm. Ask for the order under your name at the counter.</Txt>
+        <Button label="Get directions" variant="primary" onPress={() => setOpen(false)} />
+      </Sheet>
+    </View>
+  );
+}

package/registry/examples/field/native/select.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/field/native/select.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/field/native/select.tsx
+import { Select } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeFieldSelect() {
+  const [category, setCategory] = React.useState(null);
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      label: "Category",
+      placeholder: "Choose a category",
+      value: category,
+      onValueChange: setCategory,
+      hint: "Where your video is listed.",
+      options: [
+        { value: "music", label: "Music" },
+        { value: "sport", label: "Sport", description: "Training, matches, challenges" },
+        { value: "art", label: "Art" },
+        { value: "talk", label: "Talk" }
+      ]
+    }
+  ) });
+}
+export {
+  NativeFieldSelect as default
+};

package/registry/examples/field/native/select.tsx

@@ -0,0 +1,25 @@
+import { Select } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+// One choice among many: the field opens a sheet of options; picking one closes it.
+export default function NativeFieldSelect() {
+  const [category, setCategory] = React.useState<string | null>(null);
+  return (
+    <View style={{ width: 300 }}>
+      <Select
+        label="Category"
+        placeholder="Choose a category"
+        value={category}
+        onValueChange={setCategory}
+        hint="Where your video is listed."
+        options={[
+          { value: "music", label: "Music" },
+          { value: "sport", label: "Sport", description: "Training, matches, challenges" },
+          { value: "art", label: "Art" },
+          { value: "talk", label: "Talk" },
+        ]}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/radio-group/buttons.tsx
+import { RadioGroup } from "@krizaka/ui/radio-group";
+import { jsx } from "react/jsx-runtime";
+var TIPS = [
+  ["10", "10 %", "$4.20"],
+  ["15", "15 %", "$6.30"],
+  ["20", "20 %", "$8.40"],
+  ["0", "No tip", "\u2014"]
+];
+function RadioGroupButtons() {
+  return /* @__PURE__ */ jsx(RadioGroup.Root, { label: "Tip", defaultValue: "15", variant: "buttons", children: TIPS.map(([value, label, amount]) => /* @__PURE__ */ jsx(RadioGroup.Button, { value, hint: amount, className: "w-24", children: label }, value)) });
+}
+export {
+  RadioGroupButtons as default
+};

package/registry/examples/radio-group/buttons.tsx

@@ -0,0 +1,21 @@
+import { RadioGroup } from "@krizaka/ui/radio-group";
+
+const TIPS = [
+  ["10", "10 %", "$4.20"],
+  ["15", "15 %", "$6.30"],
+  ["20", "20 %", "$8.40"],
+  ["0", "No tip", "—"],
+];
+
+// Tactile keys: raised on their ledge, pressed in while held — the chosen one stays sunk, lit in the accent.
+export default function RadioGroupButtons() {
+  return (
+    <RadioGroup.Root label="Tip" defaultValue="15" variant="buttons">
+      {TIPS.map(([value, label, amount]) => (
+        <RadioGroup.Button key={value} value={value} hint={amount} className="w-24">
+          {label}
+        </RadioGroup.Button>
+      ))}
+    </RadioGroup.Root>
+  );
+}

package/registry/examples/radio-group/cards.js

@@ -9,7 +9,7 @@ var AMOUNTS = [
   ["50", "$50", "A night out"]
 ];
 function RadioGroupCards() {
-  return /* @__PURE__ */ jsx(RadioGroup.Root, { label: "Amount", defaultValue: "20", className: "grid w-[30rem] max-w-full grid-cols-3 gap-3", children: AMOUNTS.map(([value, amount, hint]) => /* @__PURE__ */ jsxs(RadioGroup.Card, { value, children: [
+  return /* @__PURE__ */ jsx(RadioGroup.Root, { label: "Amount", defaultValue: "20", variant: "cards", className: "w-[30rem] max-w-full grid-cols-3", children: AMOUNTS.map(([value, amount, hint]) => /* @__PURE__ */ jsxs(RadioGroup.Card, { value, children: [
     /* @__PURE__ */ jsx("span", { className: "font-display text-lg font-bold", children: amount }),
     /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-secondary", children: hint })
   ] }, value)) });

package/registry/examples/radio-group/cards.tsx

@@ -6,10 +6,10 @@ const AMOUNTS = [
   ["50", "$50", "A night out"],
 ];
 
-// Whole cards: the chosen one carries the accent border and tint.
+// Whole cards: the chosen one carries the accent border, its tint and its lit check.
 export default function RadioGroupCards() {
   return (
-    <RadioGroup.Root label="Amount" defaultValue="20" className="grid w-[30rem] max-w-full grid-cols-3 gap-3">
+    <RadioGroup.Root label="Amount" defaultValue="20" variant="cards" className="w-[30rem] max-w-full grid-cols-3">
       {AMOUNTS.map(([value, amount, hint]) => (
         <RadioGroup.Card key={value} value={value}>
           <span className="font-display text-lg font-bold">{amount}</span>

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

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/radio-group/native/buttons.tsx
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeRadioGroupButtons() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      label: "Tip",
+      variant: "buttons",
+      defaultValue: "15",
+      options: [
+        { value: "10", label: "10 %", hint: "$4.20" },
+        { value: "15", label: "15 %", hint: "$6.30" },
+        { value: "20", label: "20 %", hint: "$8.40" },
+        { value: "0", label: "None" }
+      ]
+    }
+  ) });
+}
+export {
+  NativeRadioGroupButtons as default
+};

package/registry/examples/radio-group/native/buttons.tsx

@@ -0,0 +1,21 @@
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Tactile keys: raised on their ledge, sunk while pressed and once chosen — an impact haptic under the thumb.
+export default function NativeRadioGroupButtons() {
+  return (
+    <View style={{ width: 340 }}>
+      <RadioGroup
+        label="Tip"
+        variant="buttons"
+        defaultValue="15"
+        options={[
+          { value: "10", label: "10 %", hint: "$4.20" },
+          { value: "15", label: "15 %", hint: "$6.30" },
+          { value: "20", label: "20 %", hint: "$8.40" },
+          { value: "0", label: "None" },
+        ]}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/radio-group/native/cards.tsx
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeRadioGroupCards() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      label: "Credit pack",
+      variant: "cards",
+      defaultValue: "pro",
+      options: [
+        { value: "starter", label: "100 credits", description: "$4.99" },
+        { value: "pro", label: "500 credits", description: "$19.99 \xB7 save 20 %" }
+      ]
+    }
+  ) });
+}
+export {
+  NativeRadioGroupCards as default
+};

package/registry/examples/radio-group/native/cards.tsx

@@ -0,0 +1,19 @@
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Whole cards: the chosen one tinted, its check lit.
+export default function NativeRadioGroupCards() {
+  return (
+    <View style={{ width: 340 }}>
+      <RadioGroup
+        label="Credit pack"
+        variant="cards"
+        defaultValue="pro"
+        options={[
+          { value: "starter", label: "100 credits", description: "$4.99" },
+          { value: "pro", label: "500 credits", description: "$19.99 · save 20 %" },
+        ]}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/radio-group/native/list.tsx
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeRadioGroupList() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      label: "Notification frequency",
+      defaultValue: "daily",
+      options: [
+        { value: "instant", label: "Instantly" },
+        { value: "daily", label: "Once a day", description: "At 6 pm, a summary." },
+        { value: "weekly", label: "Once a week" },
+        { value: "never", label: "Never", disabled: true }
+      ]
+    }
+  ) });
+}
+export {
+  NativeRadioGroupList as default
+};

package/registry/examples/radio-group/native/list.tsx

@@ -0,0 +1,20 @@
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Dots and their words in 44-pt rows; one option disabled.
+export default function NativeRadioGroupList() {
+  return (
+    <View style={{ width: 300 }}>
+      <RadioGroup
+        label="Notification frequency"
+        defaultValue="daily"
+        options={[
+          { value: "instant", label: "Instantly" },
+          { value: "daily", label: "Once a day", description: "At 6 pm, a summary." },
+          { value: "weekly", label: "Once a week" },
+          { value: "never", label: "Never", disabled: true },
+        ]}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/radio-group/native/segmented.tsx
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeRadioGroupSegmented() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      label: "Billing",
+      variant: "segmented",
+      defaultValue: "yearly",
+      options: [
+        { value: "monthly", label: "Monthly" },
+        { value: "yearly", label: "Yearly" },
+        { value: "lifetime", label: "Lifetime" }
+      ]
+    }
+  ) });
+}
+export {
+  NativeRadioGroupSegmented as default
+};

package/registry/examples/radio-group/native/segmented.tsx

@@ -0,0 +1,20 @@
+import { RadioGroup } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A segmented control that is a form's choice (a radio group), not a view switch.
+export default function NativeRadioGroupSegmented() {
+  return (
+    <View style={{ width: 300 }}>
+      <RadioGroup
+        label="Billing"
+        variant="segmented"
+        defaultValue="yearly"
+        options={[
+          { value: "monthly", label: "Monthly" },
+          { value: "yearly", label: "Yearly" },
+          { value: "lifetime", label: "Lifetime" },
+        ]}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/radio-group/segmented.tsx
+import { RadioGroup } from "@krizaka/ui/radio-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RadioGroupSegmented() {
+  return /* @__PURE__ */ jsxs(RadioGroup.Root, { label: "Billing", defaultValue: "yearly", variant: "segmented", children: [
+    /* @__PURE__ */ jsx(RadioGroup.Segment, { value: "monthly", children: "Monthly" }),
+    /* @__PURE__ */ jsx(RadioGroup.Segment, { value: "yearly", children: "Yearly" }),
+    /* @__PURE__ */ jsx(RadioGroup.Segment, { value: "lifetime", children: "Lifetime" })
+  ] });
+}
+export {
+  RadioGroupSegmented as default
+};

package/registry/examples/radio-group/segmented.tsx

@@ -0,0 +1,12 @@
+import { RadioGroup } from "@krizaka/ui/radio-group";
+
+// A segmented control that is a choice (a form's value), not a view switch: one light glides to the chosen segment.
+export default function RadioGroupSegmented() {
+  return (
+    <RadioGroup.Root label="Billing" defaultValue="yearly" variant="segmented">
+      <RadioGroup.Segment value="monthly">Monthly</RadioGroup.Segment>
+      <RadioGroup.Segment value="yearly">Yearly</RadioGroup.Segment>
+      <RadioGroup.Segment value="lifetime">Lifetime</RadioGroup.Segment>
+    </RadioGroup.Root>
+  );
+}

package/registry/examples/slider/floating.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/slider/floating.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/slider/floating.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderFloating() {
+  return /* @__PURE__ */ jsx("div", { className: "pt-10", children: /* @__PURE__ */ jsx(Slider, { label: "Creator's share", size: "lg", defaultValue: 70, step: 5, floatingValue: "always", formatValue: (v) => `${v} %` }) });
+}
+export {
+  SliderFloating as default
+};

package/registry/examples/slider/floating.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// The value floats over the thumb while it is touched (`"always"` here, to be seen at rest); a thicker track.
+export default function SliderFloating() {
+  return (
+    <div className="pt-10">
+      <Slider label="Creator's share" size="lg" defaultValue={70} step={5} floatingValue="always" formatValue={(v) => `${v} %`} />
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/slider/native/default.tsx
+import { Slider } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSliderDefault() {
+  const [share, setShare] = React.useState(70);
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(Slider, { label: "Creator's share", showLabel: true, floatingValue: true, value: share, onValueChange: setShare, step: 5, formatValue: (v) => `${v} %` }) });
+}
+export {
+  NativeSliderDefault as default
+};

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

@@ -0,0 +1,13 @@
+import { Slider } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+// One value, its label and value above the track; the value floats over the thumb while it is dragged.
+export default function NativeSliderDefault() {
+  const [share, setShare] = React.useState(70);
+  return (
+    <View style={{ width: 300 }}>
+      <Slider label="Creator's share" showLabel floatingValue value={share} onValueChange={setShare} step={5} formatValue={(v) => `${v} %`} />
+    </View>
+  );
+}

package/registry/examples/slider/native/range.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/slider/native/range.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/slider/native/range.tsx
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSliderRange() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 300, paddingTop: 36 }, children: /* @__PURE__ */ jsx(Slider, { label: "Price", thumbLabels: ["Minimum price", "Maximum price"], defaultValue: [40, 160], max: 250, step: 10, floatingValue: "always", formatValue: (v) => `$${v}` }) });
+}
+export {
+  NativeSliderRange as default
+};

package/registry/examples/slider/native/range.tsx

@@ -0,0 +1,11 @@
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A price range in the brand's gradient: two named thumbs, their values floating.
+export default function NativeSliderRange() {
+  return (
+    <View style={{ width: 300, paddingTop: 36 }}>
+      <Slider<[number, number]> label="Price" thumbLabels={["Minimum price", "Maximum price"]} defaultValue={[40, 160]} max={250} step={10} floatingValue="always" formatValue={(v) => `$${v}`} />
+    </View>
+  );
+}

package/registry/examples/slider/native/stepped.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/slider/native/stepped.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/slider/native/stepped.tsx
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSliderStepped() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(
+    Slider,
+    {
+      label: "Playback speed",
+      showLabel: true,
+      defaultValue: 1,
+      min: 0.5,
+      max: 2,
+      step: 0.25,
+      ticks: true,
+      marks: [
+        { value: 0.5, label: "0.5\xD7" },
+        { value: 2, label: "2\xD7" }
+      ],
+      formatValue: (v) => `${v}\xD7`
+    }
+  ) });
+}
+export {
+  NativeSliderStepped as default
+};

package/registry/examples/slider/native/stepped.tsx

@@ -0,0 +1,24 @@
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Steps you feel: a graduation at each one, a selection haptic as the thumb passes it, words under the track.
+export default function NativeSliderStepped() {
+  return (
+    <View style={{ width: 300 }}>
+      <Slider
+        label="Playback speed"
+        showLabel
+        defaultValue={1}
+        min={0.5}
+        max={2}
+        step={0.25}
+        ticks
+        marks={[
+          { value: 0.5, label: "0.5×" },
+          { value: 2, label: "2×" },
+        ]}
+        formatValue={(v) => `${v}×`}
+      />
+    </View>
+  );
+}