@krizaka/ui 3.2.0 → 3.4.0

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/search-field/native/cancel.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/search-field/native/cancel.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/search-field/native/cancel.tsx
+import { SearchField } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSearchFieldCancel() {
+  const [query, setQuery] = useState("acoustic");
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(SearchField, { label: "Search creators", placeholder: "Search creators", value: query, onValueChange: setQuery, clearLabel: "Clear search", cancelLabel: "Cancel", onCancel: () => void 0 }) });
+}
+export {
+  NativeSearchFieldCancel as default
+};

package/registry/examples/search-field/native/cancel.tsx

@@ -0,0 +1,13 @@
+import { SearchField } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// A search bar with its Cancel button: shown while there is a query, it clears it and closes the keyboard.
+export default function NativeSearchFieldCancel() {
+  const [query, setQuery] = useState("acoustic");
+  return (
+    <View style={{ width: 340 }}>
+      <SearchField label="Search creators" placeholder="Search creators" value={query} onValueChange={setQuery} clearLabel="Clear search" cancelLabel="Cancel" onCancel={() => undefined} />
+    </View>
+  );
+}

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

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

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/slider/native/vertical.tsx
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSliderVertical() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 24, height: 180 }, children: [
+    /* @__PURE__ */ jsx(Slider, { label: "Voice", orientation: "vertical", tone: "solid", defaultValue: 70, step: 10, ticks: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Music", orientation: "vertical", tone: "solid", defaultValue: 40, step: 10, ticks: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Effects", orientation: "vertical", defaultValue: 55, step: 10, ticks: true })
+  ] });
+}
+export {
+  NativeSliderVertical as default
+};

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

@@ -0,0 +1,13 @@
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Vertical faders, the accent alone, steps marked.
+export default function NativeSliderVertical() {
+  return (
+    <View style={{ flexDirection: "row", gap: 24, height: 180 }}>
+      <Slider label="Voice" orientation="vertical" tone="solid" defaultValue={70} step={10} ticks />
+      <Slider label="Music" orientation="vertical" tone="solid" defaultValue={40} step={10} ticks />
+      <Slider label="Effects" orientation="vertical" defaultValue={55} step={10} ticks />
+    </View>
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/slider/price-range.tsx
+import { Slider } from "@krizaka/ui/slider";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function SliderPriceRange() {
+  const [price, setPrice] = React.useState([40, 160]);
+  return /* @__PURE__ */ jsx("div", { className: "pt-10", children: /* @__PURE__ */ jsx(
+    Slider,
+    {
+      label: "Price",
+      thumbLabels: ["Minimum price", "Maximum price"],
+      value: price,
+      onValueChange: setPrice,
+      max: 250,
+      step: 10,
+      floatingValue: "always",
+      marks: [
+        { value: 0, label: "$0" },
+        { value: 250, label: "$250+" }
+      ],
+      formatValue: (v) => `$${v}`
+    }
+  ) });
+}
+export {
+  SliderPriceRange as default
+};

package/registry/examples/slider/price-range.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+import * as React from "react";
+
+// A price range in the brand's gradient: two floating values, the bounds written under the track.
+export default function SliderPriceRange() {
+  const [price, setPrice] = React.useState<[number, number]>([40, 160]);
+  return (
+    <div className="pt-10">
+      <Slider<[number, number]>
+        label="Price"
+        thumbLabels={["Minimum price", "Maximum price"]}
+        value={price}
+        onValueChange={setPrice}
+        max={250}
+        step={10}
+        floatingValue="always"
+        marks={[
+          { value: 0, label: "$0" },
+          { value: 250, label: "$250+" },
+        ]}
+        formatValue={(v) => `$${v}`}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/slider/stepped.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderStepped() {
+  return /* @__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: 1, label: "1\xD7" },
+        { value: 2, label: "2\xD7" }
+      ],
+      formatValue: (v) => `${v}\xD7`
+    }
+  );
+}
+export {
+  SliderStepped as default
+};

package/registry/examples/slider/stepped.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// Steps you can feel: a graduation at each one, their words under the track.
+export default function SliderStepped() {
+  return (
+    <Slider
+      label="Playback speed"
+      showLabel
+      defaultValue={1}
+      min={0.5}
+      max={2}
+      step={0.25}
+      ticks
+      marks={[
+        { value: 0.5, label: "0.5×" },
+        { value: 1, label: "1×" },
+        { value: 2, label: "2×" },
+      ]}
+      formatValue={(v) => `${v}×`}
+    />
+  );
+}

package/registry/examples/slider/vertical.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;