@krizaka/ui 3.2.0 → 3.3.0

package/dist/native.d.ts

@@ -325,6 +325,71 @@ declare const Chip: typeof ChipBase & {
     Group: typeof ChipGroup;
 };
 
+/** An option: the value stored and its words (passed translated), a line under them. */
+type SelectOption = {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+type FieldShared = {
+    /** The visible label, passed translated (the field's name). */
+    label: string;
+    /** Shown while nothing is chosen ("Choose a category"), passed translated. */
+    placeholder?: string;
+    /** A help text under the field. */
+    hint?: string;
+    /** An error under the field: a danger edge, read and announced. Replaces the hint. */
+    error?: string;
+    /** Not available. */
+    disabled?: boolean;
+    /** Called when the sheet closes (the field is left). */
+    onBlur?: () => void;
+    /** Styles merged last, on the field. */
+    style?: StyleProp<ViewStyle>;
+};
+type SelectProps = FieldShared & {
+    /** The choices. */
+    options: readonly SelectOption[];
+    /** The chosen value (controlled); `null` or `""` for none. */
+    value?: string | null;
+    /** The chosen value at first, uncontrolled. */
+    defaultValue?: string | null;
+    /** Called with the value picked. */
+    onValueChange?: (value: string) => void;
+    /** The sheet's title. Default: the label. */
+    sheetTitle?: string;
+};
+/** One choice among many — the web `<select>`: a field that opens a sheet of options; picking one closes it. */
+declare function Select({ options, value: valueProp, defaultValue, onValueChange, sheetTitle, ...shared }: SelectProps): React.JSX.Element;
+type ComboboxLabels = {
+    /** The search box's name and placeholder ("Search"). */
+    search: string;
+    /** While a search runs ("Searching…"). */
+    loading: string;
+    /** When nothing matches ("No results"). */
+    empty: string;
+    /** The button that closes a multiple choice ("Done"). */
+    done: string;
+};
+declare const comboboxLabels: ComboboxLabels;
+type ComboboxProps = FieldShared & {
+    /** The options, filtered by what is typed. */
+    options?: readonly SelectOption[];
+    /** Fetches the options for a query (debounced 250 ms, aborted by a newer one). */
+    onSearch?: (query: string, signal: AbortSignal) => Promise<readonly SelectOption[]>;
+    /** Several values (`string[]`, checkboxes, a Done button); one by default. */
+    multiple?: boolean;
+    /** The chosen value(s) (controlled): a string, or strings with `multiple`. */
+    value?: string | readonly string[] | null;
+    /** Called with the value — or the values — chosen. */
+    onValueChange?: (value: string | string[]) => void;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<ComboboxLabels>;
+};
+/** A choice among many, searched: a field that opens a sheet with a search box and the matching options. */
+declare function Combobox({ options, onSearch, multiple, value, onValueChange, labels: given, ...shared }: ComboboxProps): React.JSX.Element;
+
 type CountdownProps = {
     /** The moment it counts down to: a Date, an ISO string or epoch milliseconds. */
     target: Date | string | number;
@@ -554,6 +619,27 @@ type DateWheelProps = {
 /** Day, month and year as three wheels in the locale's order, bounded by `min` and `max` — the web `DateWheel`. */
 declare function DateWheel({ label, locale, value: valueProp, defaultValue, onValueChange, min, max, defaultView, hint, error, labels: given, disabled, style }: DateWheelProps): React.JSX.Element;
 
+type SheetProps = {
+    /** Open (controlled). */
+    open: boolean;
+    /** Called to close it: the scrim pressed, the back button, a choice made. */
+    onOpenChange: (open: boolean) => void;
+    /** The title at the top of the sheet (its accessible name), passed translated. */
+    title?: string;
+    /** The name of the close action read by screen readers ("Close"), passed translated. */
+    closeLabel?: string;
+    /** The content: a list, details, a form. */
+    children: React.ReactNode;
+    /** Styles merged last, on the sheet. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * A bottom sheet: it rises over a dimmed screen, its grip on top, the scrim closes it. The web `Dialog` on a phone —
+ * a choice (`Select`, `Combobox`), the details of a pin on a map, a short form. React Native's `Modal`: focus stays
+ * inside, the back button closes it. Rises with the theme's ease; still under reduced motion.
+ */
+declare function Sheet({ open, onOpenChange, title, closeLabel, children, style }: SheetProps): React.JSX.Element;
+
 type EmptyStateProps = Omit<ViewProps, "children"> & {
     /** A decorative icon (hidden from screen readers). */
     icon?: React.ReactNode;
@@ -843,6 +929,44 @@ type ProgressProps = {
  */
 declare function Progress({ variant, size, value, max, label, valueText, children, style }: ProgressProps): React.JSX.Element;
 
+/** A choice: the value stored and its words (passed translated), a line under them, a second line on a key. */
+type RadioOption = {
+    value: string;
+    label: string;
+    description?: string;
+    hint?: string;
+    disabled?: boolean;
+};
+type RadioGroupProps = {
+    /** The group's accessible name (the question), passed translated. */
+    label: string;
+    /** The choices, all visible (two to five, a few more for `buttons`). */
+    options: readonly RadioOption[];
+    /** The chosen value (controlled). */
+    value?: string | null;
+    /** The chosen value at first, uncontrolled. */
+    defaultValue?: string | null;
+    /** Called with the value pressed. */
+    onValueChange?: (value: string) => void;
+    /**
+     * `list` (a dot and its words, 44-pt rows), `cards` (whole cards, the check lit), `buttons` (tactile keys that press
+     * in: an `impact` haptic), `segmented` (a track of equal segments).
+     * @default "list"
+     */
+    variant?: "list" | "cards" | "buttons" | "segmented";
+    /** An error under the group, read and announced. */
+    error?: string;
+    /** Not available. */
+    disabled?: boolean;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * One choice among a few, all visible — the web `RadioGroup` in its four looks. A radio group for VoiceOver and
+ * TalkBack; each press plays a haptic (`selection`, `impact` for a tactile key) when the app passes `haptics`.
+ */
+declare function RadioGroup({ label, options, value: valueProp, defaultValue, onValueChange, variant, error, disabled, style }: RadioGroupProps): React.JSX.Element;
+
 type SearchFieldProps = Omit<TextInputProps, "value" | "defaultValue" | "onChangeText" | "style" | "onSubmitEditing"> & {
     /** The accessible name of the input ("Search videos"), passed translated. */
     label: string;
@@ -909,6 +1033,55 @@ type SkeletonProps = {
 /** A pulsing placeholder the size of what is loading — hidden from screen readers; still when the system reduces motion. */
 declare function Skeleton({ shape, width, height, style, testID }: SkeletonProps): React.JSX.Element;
 
+type SliderValue = number | [number, number];
+type SliderProps<V extends SliderValue = number> = {
+    /** The accessible name of the thumb (or of both thumbs of a range), passed translated. */
+    label: string;
+    /** For a range: each thumb's own name (["Minimum", "Maximum"]), passed translated. */
+    thumbLabels?: [string, string];
+    /** One number (a thumb) or two (a range), controlled. */
+    value?: V;
+    /** The value at first, uncontrolled. */
+    defaultValue?: V;
+    /** Called on every step the thumb passes. */
+    onValueChange?: (value: V) => void;
+    /** Called once the thumb is released (or an accessibility action is done). */
+    onValueCommit?: (value: V) => void;
+    /** The lowest value. Default 0. */
+    min?: number;
+    /** The highest value. Default 100. */
+    max?: number;
+    /** The step. Default 1. */
+    step?: number;
+    /** The value as words (read, and shown): "1.5×", "15 %". */
+    formatValue?: (value: number) => string;
+    /** Shows the label and the value above the track. */
+    showLabel?: boolean;
+    /** Shows the value floating over the thumb while it is dragged (`"always"`: at all times). */
+    floatingValue?: boolean | "always";
+    /** A graduation at every step (`true`, up to 40) or at the values given. */
+    ticks?: boolean | readonly number[];
+    /** Words under the track at some values. Horizontal only. */
+    marks?: readonly {
+        value: number;
+        label: string;
+    }[];
+    /** `gradient` (accent → accent-2, default) or `solid`. */
+    tone?: "gradient" | "solid";
+    /** `horizontal` (default) or `vertical` (give the slider a height). */
+    orientation?: "horizontal" | "vertical";
+    /** Not available. */
+    disabled?: boolean;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * A slider for React Native — the web `Slider`: one value or a range, drawn by the theme, dragged anywhere on the track.
+ * Each step the thumb passes ticks under the thumb (`selection` haptic); for VoiceOver and TalkBack each thumb is an
+ * adjustable control (swipe up or down by a step), its value read as words.
+ */
+declare function Slider<V extends SliderValue = number>({ label, thumbLabels, value, defaultValue, onValueChange, onValueCommit, min, max, step, formatValue, showLabel, floatingValue, ticks, marks, tone, orientation, disabled, style, }: SliderProps<V>): React.JSX.Element;
+
 type SpinnerProps = Omit<ActivityIndicatorProps, "size" | "color"> & {
     /** The accessible name of the wait, e.g. "Loading" — passed translated. */
     label: string;
@@ -918,6 +1091,35 @@ type SpinnerProps = Omit<ActivityIndicatorProps, "size" | "color"> & {
 /** An indeterminate wait: the platform's activity indicator in the accent, named by `label`. */
 declare function Spinner({ label, size, ...props }: SpinnerProps): React.JSX.Element;
 
+type SwitchProps = {
+    /** The accessible name ("Push notifications"), passed translated — also the visible words when `children` is not given and `showLabel` is set. */
+    label: string;
+    /** On (controlled). */
+    checked?: boolean;
+    /** On at first, uncontrolled. */
+    defaultChecked?: boolean;
+    /** Called with the new state. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** A line under the label, read with the switch ("Auctions you follow, new messages"). Shown with `showLabel`. */
+    description?: string;
+    /** Draws the label (and the description) beside the switch, the whole row pressable: a settings row. */
+    showLabel?: boolean;
+    /** sm · md (default). */
+    size?: "sm" | "md";
+    /** An error under the row, read and announced. */
+    error?: string;
+    /** Not available. */
+    disabled?: boolean;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * An on/off switch for React Native — the web `Switch`, drawn by the theme (the accent when on, the material's knob),
+ * not the system's: the same look on iOS and Android, a `selection` haptic when it flips. `showLabel` makes it a
+ * settings row (the label and its description beside it, all pressable).
+ */
+declare function Switch({ label, checked, defaultChecked, onCheckedChange, description, showLabel, size, error, disabled, style }: SwitchProps): React.JSX.Element;
+
 type ThemeName = "dark" | "light";
 /** The colour roles of one theme (the @krizaka/tokens roles). */
 type Theme = {
@@ -1117,11 +1319,13 @@ type WheelPickerProps = {
     visible?: 3 | 5 | 7;
     /** Marks the group invalid (a danger edge). */
     invalid?: boolean;
+    /** Nothing is chosen yet: the values under the band stay quiet (secondary) until a wheel is turned. */
+    unset?: boolean;
     /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /** The frame of one or several wheels: a raised surface, the lit band across them — the web `WheelPicker`. */
-declare function WheelPicker({ label, children, visible, invalid, style }: WheelPickerProps): React.JSX.Element;
+declare function WheelPicker({ label, children, visible, invalid, unset, style }: WheelPickerProps): React.JSX.Element;
 /** A divider between two wheels (`:` between the hours and the minutes). */
 declare function WheelDivider({ children }: {
     children: string;
@@ -1162,4 +1366,4 @@ declare function YazakiaMark({ size, animated, title, neutral }: NativeMarkProps
  */
 declare function YororisMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, EmptyState, type EmptyStateProps, ErrorState, GoalGauge, type GoalGaugeProps, type HapticKind, IconButton, type IconButtonProps, KrizakaMark, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, Pagination, type PaginationLabels, type PaginationProps, Phoenix, type PhoenixProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, type Radius, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, SuccessState, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YazakiaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, formatTime, isRealDate, latestBirthDate, monthNames, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCountdown, useReducedMotion, useTheme, uses12Hours };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, EmptyState, type EmptyStateProps, ErrorState, GoalGauge, type GoalGaugeProps, type HapticKind, IconButton, type IconButtonProps, KrizakaMark, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, Pagination, type PaginationLabels, type PaginationProps, Phoenix, type PhoenixProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SuccessState, Switch, type SwitchProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YazakiaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, formatTime, isRealDate, latestBirthDate, monthNames, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCountdown, useReducedMotion, useTheme, uses12Hours };