@krizaka/ui 3.1.0 → 3.3.0

package/registry/examples/date-picker/native/time-slots.tsx

@@ -0,0 +1,15 @@
+import { TimePicker, timeSlots } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+const taken = new Set(["10:00", "11:30"]);
+
+// The free times of an agenda as buttons; taken ones dashed and struck through.
+export default function NativeDatePickerTimeSlots() {
+  const [time, setTime] = React.useState<string | null>("10:30");
+  return (
+    <View style={{ width: 320 }}>
+      <TimePicker variant="slots" label="Appointment time" locale="en-US" slots={timeSlots("09:00", "12:00", 30)} isTimeDisabled={(t) => taken.has(t)} value={time} onValueChange={setTime} />
+    </View>
+  );
+}

package/registry/examples/date-picker/native/time-wheel.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/date-picker/native/time-wheel.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/native/time-wheel.tsx
+import { TimePicker } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeDatePickerTimeWheel() {
+  const [time, setTime] = React.useState("19:30");
+  return /* @__PURE__ */ jsx(TimePicker, { label: "Remind me at", locale: "en-US", value: time, onValueChange: setTime });
+}
+export {
+  NativeDatePickerTimeWheel as default
+};

package/registry/examples/date-picker/native/time-wheel.tsx

@@ -0,0 +1,8 @@
+import { TimePicker } from "@krizaka/ui/native";
+import * as React from "react";
+
+// A reminder set by the thumb: hours, minutes by 5, the period of a 12-hour locale. The value is "HH:mm".
+export default function NativeDatePickerTimeWheel() {
+  const [time, setTime] = React.useState<string | null>("19:30");
+  return <TimePicker label="Remind me at" locale="en-US" value={time} onValueChange={setTime} />;
+}

package/registry/examples/date-picker/time-slots.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/date-picker/time-slots.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/date-picker/time-slots.tsx
+import { TimePicker, timeSlots } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var taken = /* @__PURE__ */ new Set(["10:00", "13:30", "14:00"]);
+function DatePickerTimeSlots() {
+  const [time, setTime] = React.useState("11:00");
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    TimePicker,
+    {
+      variant: "slots",
+      label: "Appointment time",
+      locale: "en-US",
+      slots: timeSlots("09:00", "17:00", 30),
+      isTimeDisabled: (t) => taken.has(t),
+      groupLabels: { morning: "Morning", afternoon: "Afternoon", evening: "Evening" },
+      value: time,
+      onValueChange: setTime
+    }
+  ) });
+}
+export {
+  DatePickerTimeSlots as default
+};

package/registry/examples/date-picker/time-slots.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { TimePicker, timeSlots } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+const taken = new Set(["10:00", "13:30", "14:00"]);
+
+// The free times of an agenda, by part of the day; taken slots are struck through and skipped by the arrows.
+export default function DatePickerTimeSlots() {
+  const [time, setTime] = React.useState<string | null>("11:00");
+  return (
+    <div className="w-full max-w-md">
+      <TimePicker
+        variant="slots"
+        label="Appointment time"
+        locale="en-US"
+        slots={timeSlots("09:00", "17:00", 30)}
+        isTimeDisabled={(t) => taken.has(t)}
+        groupLabels={{ morning: "Morning", afternoon: "Afternoon", evening: "Evening" }}
+        value={time}
+        onValueChange={setTime}
+      />
+    </div>
+  );
+}

package/registry/examples/date-picker/time-wheel.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/date-picker/time-wheel.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/date-picker/time-wheel.tsx
+import { TimePicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function DatePickerTimeWheel() {
+  const [time, setTime] = React.useState("19:30");
+  return /* @__PURE__ */ jsx(TimePicker, { label: "Remind me at", locale: "en-US", value: time, onValueChange: setTime, minuteStep: 5 });
+}
+export {
+  DatePickerTimeWheel as default
+};

package/registry/examples/date-picker/time-wheel.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { TimePicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+// A reminder set by the thumb: hours, minutes by 5 and the period, as the locale writes them. The value is "HH:mm".
+export default function DatePickerTimeWheel() {
+  const [time, setTime] = React.useState<string | null>("19:30");
+  return <TimePicker label="Remind me at" locale="en-US" value={time} onValueChange={setTime} minuteStep={5} />;
+}

package/registry/examples/date-picker/wheel.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/date-picker/wheel.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/date-picker/wheel.tsx
+import { Wheel, WheelPicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var sizes = Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: i === 0 ? "1 guest" : `${i + 1} guests` }));
+function DatePickerWheel() {
+  const [size, setSize] = React.useState("4");
+  return /* @__PURE__ */ jsx(WheelPicker, { label: "Party size", children: /* @__PURE__ */ jsx(Wheel, { label: "Guests", options: sizes, value: size, onValueChange: setSize, className: "w-36" }) });
+}
+export {
+  DatePickerWheel as default
+};

package/registry/examples/date-picker/wheel.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Wheel, WheelPicker } from "@krizaka/ui/date-picker";
+import * as React from "react";
+
+const sizes = Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: i === 0 ? "1 guest" : `${i + 1} guests` }));
+
+// Any short list turned by the thumb: a party size. The keyboard moves it too (↑ ↓, Page Up / Down, Home / End).
+export default function DatePickerWheel() {
+  const [size, setSize] = React.useState("4");
+  return (
+    <WheelPicker label="Party size">
+      <Wheel label="Guests" options={sizes} value={size} onValueChange={setSize} className="w-36" />
+    </WheelPicker>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/dialog/native/sheet.tsx
+import { Button, Sheet, Txt } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeDialogSheet({ defaultOpen }) {
+  const [open, setOpen] = React.useState(Boolean(defaultOpen));
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsx(Button, { label: "Show the pick-up point", onPress: () => setOpen(true) }),
+    /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, title: "Caf\xE9 Olimpico", children: [
+      /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "124 Rue Saint-Viateur O, Montr\xE9al \xB7 350 m away" }),
+      /* @__PURE__ */ jsx(Txt, { children: "Open until 10 pm. Ask for the order under your name at the counter." }),
+      /* @__PURE__ */ jsx(Button, { label: "Get directions", variant: "primary", onPress: () => setOpen(false) })
+    ] })
+  ] });
+}
+export {
+  NativeDialogSheet as default
+};

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>
+  );
+}