@krizaka/ui 3.2.0 → 3.3.0

package/dist/marquee.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-2FRWNSRO.js";
 
 // src/marquee/marquee.tsx
 import * as React from "react";

package/dist/native/form.d.ts

@@ -1,6 +1,6 @@
 import { AnyFieldApi, StandardSchemaV1, DeepKeys, AnyFormApi } from '@tanstack/react-form';
 import * as React from 'react';
-import { DateFieldLabels, BrandId, TextFieldProps as TextFieldProps$1 } from '@krizaka/ui/native';
+import { ComboboxLabels, DateFieldLabels, BrandId, TextFieldProps as TextFieldProps$1 } from '@krizaka/ui/native';
 import { StyleProp, ViewStyle } from 'react-native';
 
 /** A value a message placeholder takes (`{minimum}`, `{suggestion}`). */
@@ -294,32 +294,75 @@ type CheckboxProps = Omit<Base, "label" | "hint"> & {
 };
 /** A box of the form (`boolean`): terms to accept, an option. */
 declare function Checkbox({ name, label, accessibleLabel, disabled, style }: CheckboxProps): React.JSX.Element;
-/** An on/off setting of the form (`boolean`): its label and hint beside the system's switch. */
+/** An on/off setting of the form (`boolean`): a settings row — the label and its hint beside the switch, all pressable. */
 declare function Switch({ name, label, hint, disabled, style }: Base): React.JSX.Element;
-/** A choice of the form: the value stored and its words (passed translated). */
+/** A choice of the form: the value stored and its words (passed translated), a line under them. */
 type FormOption = {
     value: string;
     label: string;
+    description?: string;
     disabled?: boolean;
 };
 type RadioGroupProps = Base & {
-    /** The choices, as chips (one chosen). */
+    /** The choices, all visible (two to five). */
     options: readonly FormOption[];
-    /** Scrolls the chips sideways instead of wrapping them (many choices). */
-    scrollable?: boolean;
+    /** `list` (dots, default), `cards`, `buttons` (tactile keys) or `segmented` — the native `RadioGroup`'s looks. */
+    variant?: "list" | "cards" | "buttons" | "segmented";
 };
-/** One choice among a few, as chips (a radio group). On native, `Select` is the same control. */
-declare function RadioGroup({ name, label, hint, disabled, style, options, scrollable }: RadioGroupProps): React.JSX.Element;
-/** One choice among several (the web's `<select>`): chips on native, scrolled sideways when they are many. */
-declare function Select(props: RadioGroupProps): React.JSX.Element;
+/** One choice among a few, all visible: the native `RadioGroup` (a haptic on each choice). */
+declare function RadioGroup({ name, label, hint, disabled, style, options, variant }: RadioGroupProps): React.JSX.Element;
+type SelectProps = Base & {
+    /** The choices, in a sheet. */
+    options: readonly FormOption[];
+    /** Shown while nothing is chosen ("Choose a category"), passed translated. */
+    placeholder?: string;
+};
+/** One choice among many (the web's `<select>`): a field that opens a sheet of options. */
+declare function Select({ name, label, hint, disabled, style, options, placeholder }: SelectProps): React.JSX.Element;
+type ComboboxProps = Base & {
+    /** The options, filtered as the person types. */
+    options?: readonly FormOption[];
+    /** Fetches the options for a query (debounced, aborted by a newer one). */
+    onSearch?: (query: string, signal: AbortSignal) => Promise<readonly FormOption[]>;
+    /** Several values (`string[]`); one (`string`) by default. */
+    multiple?: boolean;
+    /** Shown while nothing is chosen, passed translated. */
+    placeholder?: string;
+    /** The words of the control, passed translated. */
+    labels?: Partial<ComboboxLabels>;
+};
+/** A choice among many, searched in a sheet: one value (`string`) or several (`string[]`). */
+declare function Combobox({ name, label, hint, disabled, style, options, onSearch, multiple, placeholder, labels }: ComboboxProps): React.JSX.Element;
 type DateFieldProps = Base & {
-    /** The names of the boxes (`day`, `month`, `year`), passed translated. */
+    /** `wheel` (default: day, month and year as wheels) or `parts` (typed on the numeric keypad). */
+    entry?: "wheel" | "parts";
+    /** The earliest date (ISO) of the wheels. */
+    min?: string;
+    /** The latest date (ISO) of the wheels: `latestBirthDate(18)` for an age gate. */
+    max?: string;
+    /** The names of the wheels or boxes (`day`, `month`, `year`), passed translated. */
     labels?: Partial<DateFieldLabels>;
-    /** `bday` for a date of birth. */
+    /** `bday` for a date of birth: the wheels rest on 1 January 2000 until turned; typed boxes are autofilled. */
     autoComplete?: "bday" | "off";
 };
-/** A date of the form (`YYYY-MM-DD`): day, month and year typed in the locale's order — the schema checks it. */
-declare function DateField({ name, label, hint, disabled, style, labels, autoComplete }: DateFieldProps): React.JSX.Element;
+/** A date of the form (`YYYY-MM-DD`): wheels in the locale's order (or day · month · year typed) — the schema checks it. */
+declare function DateField({ name, label, hint, disabled, style, labels, autoComplete, entry, min, max }: DateFieldProps): React.JSX.Element;
+type SliderProps = Base & {
+    /** The lowest value. Default 0. */
+    min?: number;
+    /** The highest value. Default 100. */
+    max?: number;
+    /** The step. Default 1. */
+    step?: number;
+    /** The value as words ("15 %", "3 min"), shown and read. */
+    formatValue?: (value: number) => string;
+    /** For a range (`[number, number]`): each thumb's name, passed translated. */
+    thumbLabels?: [string, string];
+    /** A graduation per step (`true`) or at the values given. */
+    ticks?: boolean | readonly number[];
+};
+/** A number (or a range) of the form, chosen by feel: a share, a volume, a price range. */
+declare function Slider({ name, label, hint, disabled, style, min, max, step, formatValue, thumbLabels, ticks }: SliderProps): React.JSX.Element;
 type MoneyProps = Base & {
     /** The currency (ISO 4217): its sign beside the amount, its decimals. */
     currency: string;
@@ -364,8 +407,10 @@ declare const createKrizakaForm: <S extends FormSchema>(definition: KrizakaFormD
     Switch: typeof Switch;
     RadioGroup: typeof RadioGroup;
     Select: typeof Select;
+    Combobox: typeof Combobox;
     DateField: typeof DateField;
     Money: typeof Money;
+    Slider: typeof Slider;
     Field: typeof FormField;
     FieldArray: typeof FieldArray;
     Watch: typeof Watch;
@@ -373,4 +418,4 @@ declare const createKrizakaForm: <S extends FormSchema>(definition: KrizakaFormD
     FormError: typeof FormError;
 }, FormProps>;
 
-export { Checkbox, type CheckboxProps, DateField, type DateFieldProps, FieldArray, type FieldArrayProps, type FieldCheck, type FormActionResult, FormError, type FormErrorProps, FormField, type FormFieldError, type FormFieldProps, type FormI18n, type FormOption, type FormOutput, type FormProblem, type FormProps, type FormSchema, type FormValues, type KrizakaField, type KrizakaFieldArray, type KrizakaFormFactory, type KrizakaFormInstance, Money, type MoneyProps, RadioGroup, type RadioGroupProps, Select, Submit, type SubmitProps, Switch, TextArea, type TextAreaProps, TextField, type TextFieldProps, Watch, type WatchProps, createKrizakaForm, formMessage, formMessages, isRealDate, latestBirthDate, useFormContext, useFormStatus, useFormValue, useKrizakaField, useKrizakaFieldArray };
+export { Checkbox, type CheckboxProps, Combobox, type ComboboxProps, DateField, type DateFieldProps, FieldArray, type FieldArrayProps, type FieldCheck, type FormActionResult, FormError, type FormErrorProps, FormField, type FormFieldError, type FormFieldProps, type FormI18n, type FormOption, type FormOutput, type FormProblem, type FormProps, type FormSchema, type FormValues, type KrizakaField, type KrizakaFieldArray, type KrizakaFormFactory, type KrizakaFormInstance, Money, type MoneyProps, RadioGroup, type RadioGroupProps, Select, type SelectProps, Slider, type SliderProps, Submit, type SubmitProps, Switch, TextArea, type TextAreaProps, TextField, type TextFieldProps, Watch, type WatchProps, createKrizakaForm, formMessage, formMessages, isRealDate, latestBirthDate, useFormContext, useFormStatus, useFormValue, useKrizakaField, useKrizakaFieldArray };

package/dist/native/form.js

@@ -1,7 +1,22 @@
 // src/native/form.tsx
-import { Button, Checkbox as CheckboxControl, Chip, DateField as DateFieldControl, ProductMark, Spinner, TextField as TextFieldControl, Txt, useTheme } from "@krizaka/ui/native";
+import {
+  Button,
+  Checkbox as CheckboxControl,
+  Combobox as ComboboxControl,
+  DateField as DateFieldControl,
+  DateWheel,
+  ProductMark,
+  RadioGroup as RadioGroupControl,
+  Select as SelectControl,
+  Slider as SliderControl,
+  Spinner,
+  Switch as SwitchControl,
+  TextField as TextFieldControl,
+  Txt,
+  useTheme
+} from "@krizaka/ui/native";
 import * as React2 from "react";
-import { AccessibilityInfo, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Switch as SwitchControl, View } from "react-native";
+import { AccessibilityInfo, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, View } from "react-native";
 
 // src/form/core.tsx
 import { useField, useForm, useStore } from "@tanstack/react-form";
@@ -420,12 +435,12 @@ function useChain(ctx) {
     };
   }, [ctx]);
 }
-function useChained(override) {
+function useChained(override, skip = false) {
   const chain = React2.useContext(ChainContext);
   const key = React2.useId();
   const ref = React2.useRef(null);
   const [last, setLast] = React2.useState(false);
-  React2.useLayoutEffect(() => chain?.register({ key, focus: () => ref.current?.focus(), setLast }), [chain, key]);
+  React2.useLayoutEffect(() => skip ? void 0 : chain?.register({ key, focus: () => ref.current?.focus(), setLast }), [chain, key, skip]);
   if (!chain || override.returnKeyType !== void 0 || override.onSubmitEditing !== void 0) return { inputRef: ref };
   return {
     inputRef: ref,
@@ -512,61 +527,107 @@ function Checkbox({ name, label, accessibleLabel, disabled, style }) {
 }
 function Switch({ name, label, hint, disabled, style }) {
   const f = useKrizakaField(name);
-  const { theme } = useTheme();
-  return /* @__PURE__ */ jsxs(View, { style: [styles.switchRow, style], children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.switchText, children: [
-      /* @__PURE__ */ jsx2(Txt, { variant: "label", children: label }),
-      f.error ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "danger", role: "alert", children: f.error }) : hint ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", children: hint }) : null
-    ] }),
-    /* @__PURE__ */ jsx2(
-      SwitchControl,
-      {
-        "aria-label": label,
-        accessibilityHint: f.error ?? hint,
-        value: f.value === true,
-        disabled,
-        onValueChange: (on) => {
-          f.setValue(on);
-          f.onBlur();
-        },
-        trackColor: { false: theme.surface3, true: theme.accent },
-        thumbColor: theme.textOnMedia,
-        ...{ activeThumbColor: theme.textOnMedia },
-        ios_backgroundColor: theme.surface3
+  return /* @__PURE__ */ jsx2(
+    SwitchControl,
+    {
+      label,
+      description: hint,
+      showLabel: true,
+      error: f.error,
+      checked: f.value === true,
+      disabled,
+      style,
+      onCheckedChange: (on) => {
+        f.setValue(on);
+        f.onBlur();
       }
-    )
-  ] });
+    }
+  );
+}
+function Caption({ field, hint }) {
+  if (field.error)
+    return /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "danger", role: "alert", children: field.error });
+  return hint ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", children: hint }) : null;
 }
-function RadioGroup({ name, label, hint, disabled, style, options, scrollable }) {
+function RadioGroup({ name, label, hint, disabled, style, options, variant = "list" }) {
   const f = useKrizakaField(name);
   return /* @__PURE__ */ jsxs(View, { style: [styles.field, style], children: [
     /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", style: styles.groupLabel, children: label }),
     /* @__PURE__ */ jsx2(
-      Chip.Group,
+      RadioGroupControl,
       {
-        type: "single",
-        "aria-label": label,
+        label,
+        variant,
+        options,
         value: f.value ?? "",
         disabled,
-        scrollable,
         onValueChange: (v) => {
           f.setValue(v);
           f.onBlur();
-        },
-        children: options.map((o) => /* @__PURE__ */ jsx2(Chip, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+        }
       }
     ),
-    f.error ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "danger", role: "alert", children: f.error }) : hint ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", children: hint }) : null
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
   ] });
 }
-function Select(props) {
-  return /* @__PURE__ */ jsx2(RadioGroup, { scrollable: props.options.length > 4, ...props });
+function Select({ name, label, hint, disabled, style, options, placeholder }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsx2(SelectControl, { label, hint, error: f.error, disabled, style, options, placeholder, value: f.value ?? "", onValueChange: (v) => f.setValue(v), onBlur: f.onBlur });
 }
-function DateField({ name, label, hint, disabled, style, labels, autoComplete }) {
+function Combobox({ name, label, hint, disabled, style, options, onSearch, multiple, placeholder, labels }) {
   const f = useKrizakaField(name);
-  const chained = useChained({});
+  return /* @__PURE__ */ jsx2(
+    ComboboxControl,
+    {
+      label,
+      hint,
+      error: f.error,
+      disabled,
+      style,
+      options,
+      onSearch,
+      multiple,
+      placeholder,
+      labels,
+      value: f.value ?? (multiple ? [] : ""),
+      onValueChange: (v) => f.setValue(v),
+      onBlur: f.onBlur
+    }
+  );
+}
+function DateField({ name, label, hint, disabled, style, labels, autoComplete, entry = "wheel", min, max }) {
+  const f = useKrizakaField(name);
+  const chained = useChained({}, entry === "wheel");
+  if (entry === "wheel")
+    return /* @__PURE__ */ jsx2(
+      DateWheel,
+      {
+        label,
+        hint,
+        error: f.error,
+        disabled,
+        style,
+        labels,
+        locale: f.locale,
+        min,
+        max,
+        defaultView: autoComplete === "bday" ? "2000-01-01" : void 0,
+        value: f.value ?? "",
+        onValueChange: (v) => {
+          f.setValue(v);
+          f.onBlur();
+        }
+      }
+    );
   return /* @__PURE__ */ jsx2(DateFieldControl, { ...chained, returnKeyType: chained.returnKeyType, label, hint, error: f.error, disabled, style, labels, autoComplete, locale: f.locale, value: f.value ?? "", onValueChange: (v) => f.setValue(v), onBlur: f.onBlur });
 }
+function Slider({ name, label, hint, disabled, style, min, max, step, formatValue, thumbLabels, ticks }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.field, style], children: [
+    /* @__PURE__ */ jsx2(SliderControl, { label, showLabel: true, floatingValue: true, value: f.value, min, max, step, disabled, formatValue, thumbLabels, ticks, onValueChange: (v) => f.setValue(v), onValueCommit: () => f.onBlur() }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
 function Money({ name, label, hint, disabled, style, currency, placeholder }) {
   const f = useKrizakaField(name);
   const [text, setText] = React2.useState(() => moneyInputText(f.value, currency, f.locale));
@@ -610,7 +671,7 @@ function FieldArray({ name, children }) {
 function Watch({ name, children }) {
   return /* @__PURE__ */ jsx2(Fragment, { children: children(useFormValue(name)) });
 }
-var fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, DateField, Money, Field: FormField, FieldArray, Watch, Submit, FormError };
+var fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, Combobox, DateField, Money, Slider, Field: FormField, FieldArray, Watch, Submit, FormError };
 var createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);
 var styles = StyleSheet.create({
   form: { gap: 16, alignSelf: "stretch" },
@@ -618,12 +679,11 @@ var styles = StyleSheet.create({
   field: { gap: 6, alignSelf: "stretch" },
   suggestion: { alignSelf: "flex-start", minHeight: 32, justifyContent: "center" },
   alert: { borderWidth: 1, padding: 12, gap: 4 },
-  switchRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 16, minHeight: 44 },
-  switchText: { flex: 1, gap: 2 },
   groupLabel: { fontWeight: "600" }
 });
 export {
   Checkbox,
+  Combobox,
   DateField,
   FieldArray,
   FormError,
@@ -631,6 +691,7 @@ export {
   Money,
   RadioGroup,
   Select,
+  Slider,
   Submit,
   Switch,
   TextArea,