@krizaka/ui 3.1.0 → 3.2.0

package/dist/native.d.ts

@@ -29,6 +29,28 @@ declare function composeDate(parts: Readonly<Record<DatePart, string>>): string;
 declare function isRealDate(value: string): boolean;
 /** The latest date of birth of someone `age` years old today (`YYYY-MM-DD`): an age gate's `max`, `value <= latestBirthDate(18)`. */
 declare function latestBirthDate(age: number, today?: Date): string;
+/** The days of a month (`month` 1–12). */
+declare function daysInMonth(year: number, month: number): number;
+/** The ISO date of today on this device (or of the `Date` given). */
+declare function todayIso(now?: Date): string;
+/** The age in whole years on `today` of someone born on `birth` (both ISO). */
+declare function ageOn(birth: string, today?: string): number;
+/** The month names of a locale, January first (`long` · `short` · `narrow`). */
+declare function monthNames(locale: string, style?: "long" | "short" | "narrow"): string[];
+/** A time of day, `HH:mm` on 24 hours (`"09:30"`, `"18:00"`): the value of every time picker. */
+type TimeValue = string;
+/** `"9:5"` / `"09:05"` → minutes since midnight; `null` when it is not a time. */
+declare function timeToMinutes(value: string | null | undefined): number | null;
+/** The slots of a day from `start` to `end` (excluded) every `step` minutes: `timeSlots("09:00", "12:00", 30)`. */
+declare function timeSlots(start: TimeValue, end: TimeValue, step?: number): TimeValue[];
+/** True when the locale writes the time on 12 hours with a day period (`en-US` → true, `fr-CA` → false). */
+declare function uses12Hours(locale: string): boolean;
+/** A time written the locale's way (`"18:30"` → `"6:30 PM"` in en-US, `"18 h 30"` in fr-CA). */
+declare function formatTime(locale: string, value: TimeValue): string;
+/** The ISO date `days` later (or earlier). */
+declare const addDays: (iso: string, days: number) => string;
+/** The ISO date `months` later (or earlier), the day kept inside the shorter months (`01-31` + 1 → `02-28`). */
+declare const addMonths: (iso: string, months: number) => string;
 
 type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia" | "yororis";
 
@@ -376,6 +398,162 @@ type DateFieldProps = {
  */
 declare function DateField({ label, hint, error, value, defaultValue, onValueChange, onBlur, locale, labels: given, autoComplete, disabled, inputRef, onSubmitEditing, returnKeyType, style }: DateFieldProps): React.JSX.Element;
 
+type CalendarLabels = {
+    /** The previous-month button ("Previous month"). */
+    previousMonth: string;
+    /** The next-month button ("Next month"). */
+    nextMonth: string;
+};
+declare const calendarLabels: CalendarLabels;
+type CalendarProps = {
+    /** The BCP 47 locale of the names: always explicit. */
+    locale: string;
+    /** The chosen date (one-date mode). */
+    value?: string | null;
+    /** The chosen range (range mode): its ends lit, the days between one band. */
+    range?: {
+        start: string;
+        end: string | null;
+    } | null;
+    /** Called with the day pressed. */
+    onSelect?: (date: string) => void;
+    /** The month shown at first (any day of it). Default: the value's, or today's. */
+    defaultMonth?: string;
+    /** The earliest date that can be picked. */
+    min?: string;
+    /** The latest date that can be picked. */
+    max?: string;
+    /** Refuses some dates. */
+    isDateDisabled?: (date: string) => boolean;
+    /** The first day of the week, 0 = Sunday. Default: the locale's. */
+    weekStartsOn?: number;
+    /** Today (marked by the node). Default: the device's date. */
+    today?: string;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<CalendarLabels>;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** A month to pick a day or the ends of a period — the web `Calendar`: 44-pt days, today's node, the range as a band. */
+declare function Calendar({ locale, value, range, onSelect, defaultMonth, min, max, isDateDisabled, weekStartsOn, today: todayProp, labels: given, style }: CalendarProps): React.JSX.Element;
+type MonthPickerProps = {
+    /** The BCP 47 locale of the month names: always explicit. */
+    locale: string;
+    /** The chosen month, `YYYY-MM` (controlled); `null` for none. */
+    value?: string | null;
+    /** Called with the month pressed. */
+    onValueChange?: (value: string) => void;
+    /** The earliest month, `YYYY-MM`. */
+    min?: string;
+    /** The latest month, `YYYY-MM`. */
+    max?: string;
+    /** The words of the year buttons, passed translated. */
+    labels?: {
+        previousYear?: string;
+        nextYear?: string;
+    };
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** A month of a year: the twelve months in a grid, the year above them — the web `MonthPicker`. */
+declare function MonthPicker({ locale, value, onValueChange, min, max, labels, style }: MonthPickerProps): React.JSX.Element;
+type DayStripProps = {
+    /** The group's accessible name ("Delivery day"), passed translated. */
+    label: string;
+    /** The BCP 47 locale: always explicit. */
+    locale: string;
+    /** The chosen day, ISO (controlled); `null` for none. */
+    value?: string | null;
+    /** The chosen day at first, uncontrolled. */
+    defaultValue?: string | null;
+    /** Called with the day pressed. */
+    onValueChange?: (value: string) => void;
+    /** The first day. Default: today. */
+    start?: string;
+    /** How many days. Default 14. */
+    days?: number;
+    /** Refuses some days (closed, full). */
+    isDateDisabled?: (date: string) => boolean;
+    /** Marks the days that have something: a dot, and `markedLabel` in their name. */
+    isDateMarked?: (date: string) => boolean;
+    /** Added to the name of a marked day ("has events"), passed translated. */
+    markedLabel?: string;
+    /** Today (the node). Default: the device's date. */
+    today?: string;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** The days ahead in a row that scrolls sideways — the web `DayStrip`: a radio group of 56×72-pt days. */
+declare function DayStrip({ label, locale, value: valueProp, defaultValue, onValueChange, start, days, isDateDisabled, isDateMarked, markedLabel, today: todayProp, style }: DayStripProps): React.JSX.Element;
+type TimePickerLabels = {
+    /** The hours' wheel ("Hours"). */
+    hours: string;
+    /** The minutes' wheel ("Minutes"). */
+    minutes: string;
+    /** The day period's wheel ("AM/PM"). */
+    period: string;
+};
+type TimePickerProps = {
+    /** The accessible name ("Pick-up time"), passed translated. */
+    label: string;
+    /** The BCP 47 locale: how times are written, 12 or 24 hours. */
+    locale: string;
+    /** The time, `HH:mm` on 24 hours (controlled); `null` for none. */
+    value?: TimeValue | null;
+    /** The time at first, uncontrolled. */
+    defaultValue?: TimeValue | null;
+    /** Called with the time chosen. */
+    onValueChange?: (value: TimeValue) => void;
+    /** `wheel` (default: hours, minutes and the period as wheels) or `slots` (the free times as buttons). */
+    variant?: "wheel" | "slots";
+    /** Wheels: the minutes' step. Default 5. */
+    minuteStep?: number;
+    /** Wheels: forces 12 or 24 hours. Default: the locale's. */
+    hour12?: boolean;
+    /** Wheels: the names of the wheels, passed translated. */
+    labels?: Partial<TimePickerLabels>;
+    /** Slots: the times offered, `HH:mm` (`timeSlots("09:00", "17:00", 30)`). */
+    slots?: readonly TimeValue[];
+    /** Slots: refuses some (taken). */
+    isTimeDisabled?: (time: TimeValue) => boolean;
+    /** Not available. */
+    disabled?: boolean;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** A time of day: wheels to set one, or slots to book one — the web `TimePicker`. */
+declare function TimePicker({ label, locale, value: valueProp, defaultValue, onValueChange, variant, minuteStep, hour12, labels: given, slots, isTimeDisabled, disabled, style }: TimePickerProps): React.JSX.Element;
+type DateWheelProps = {
+    /** The visible label, passed translated (the group's name). */
+    label: string;
+    /** The BCP 47 locale: the order of the wheels, the month names. */
+    locale: string;
+    /** The date, `YYYY-MM-DD` (controlled); `""` or `null` for none. */
+    value?: string | null;
+    /** The date at first, uncontrolled. */
+    defaultValue?: string | null;
+    /** Called with the date under the band: always a real date within `min` / `max`. */
+    onValueChange?: (value: string) => void;
+    /** The earliest date (ISO). Default: 120 years ago. */
+    min?: string;
+    /** The latest date (ISO): `latestBirthDate(18)` for an age gate. Default: today. */
+    max?: string;
+    /** Where the wheels rest while there is no value. Default: `max`. */
+    defaultView?: string;
+    /** A help text under the wheels. */
+    hint?: string;
+    /** An error under the wheels: a danger edge, read and announced. Replaces the hint. */
+    error?: string;
+    /** The names of the wheels (`day`, `month`, `year`), passed translated. */
+    labels?: Partial<Record<"day" | "month" | "year", string>>;
+    /** Not available. */
+    disabled?: boolean;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** 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 EmptyStateProps = Omit<ViewProps, "children"> & {
     /** A decorative icon (hidden from screen readers). */
     icon?: React.ReactNode;
@@ -828,6 +1006,11 @@ type ThemeFonts = {
     readonly display?: string;
     readonly mono?: string;
 };
+/**
+ * A touch the hand feels: `selection` (a wheel's value, a slider's step, a radio picked), `impact` (a tactile button
+ * pressed in), `success` / `warning` (an outcome).
+ */
+type HapticKind = "selection" | "impact" | "success" | "warning";
 type ThemeContextValue = {
     /** The chosen mode: dark, light or follow the system. */
     mode: Mode;
@@ -839,6 +1022,8 @@ type ThemeContextValue = {
     radius: Radius;
     motion: Motion;
     fonts: ThemeFonts;
+    /** Plays a haptic (the app's `haptics`, through expo-haptics or another module); nothing without one. */
+    haptic: (kind: HapticKind) => void;
 };
 type ThemeProviderProps = {
     children: React.ReactNode;
@@ -852,9 +1037,15 @@ type ThemeProviderProps = {
     overrides?: ThemeOverrides;
     /** Font families the app has loaded (`expo-font`…); absent: the system font. */
     fonts?: ThemeFonts;
+    /**
+     * Plays the haptics of the controls (a wheel's tick, a slider's step, a tactile button). The platform has no module:
+     * the app passes one — `(kind) => kind === "selection" ? Haptics.selectionAsync() : Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)`
+     * with expo-haptics. Absent: no haptics.
+     */
+    haptics?: (kind: HapticKind) => void;
 };
 /** Once, at the root of the app. Without it, `useTheme()` follows the system with the platform's roles. */
-declare function ThemeProvider({ children, mode: controlled, defaultMode, onModeChange, overrides, fonts }: ThemeProviderProps): React.JSX.Element;
+declare function ThemeProvider({ children, mode: controlled, defaultMode, onModeChange, overrides, fonts, haptics }: ThemeProviderProps): React.JSX.Element;
 /** The current theme: `{ mode, setMode, scheme, theme, radius, motion, fonts }`. */
 declare function useTheme(): ThemeContextValue;
 /** True while the system asks to reduce motion: every loop and transition of /native stops. */
@@ -911,6 +1102,52 @@ type ToasterProps = {
 /** Mount once, at the root (inside `ThemeProvider`). Then call `toast()` from anywhere. */
 declare function Toaster({ closeLabel, position, offset, duration, max }: ToasterProps): React.JSX.Element | null;
 
+/** A value of a wheel: what is stored, and its words (passed translated or formatted for the locale). */
+type WheelOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type WheelPickerProps = {
+    /** The group's accessible name ("Departure time"), passed translated. */
+    label: string;
+    /** The wheels (`Wheel`), and dividers (`WheelDivider`) between them. */
+    children: React.ReactNode;
+    /** How many values are visible: 3, 5 (default) or 7. */
+    visible?: 3 | 5 | 7;
+    /** Marks the group invalid (a danger edge). */
+    invalid?: 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;
+/** A divider between two wheels (`:` between the hours and the minutes). */
+declare function WheelDivider({ children }: {
+    children: string;
+}): React.JSX.Element;
+type WheelProps = {
+    /** The column's accessible name ("Hour", "Month"), passed translated. */
+    label: string;
+    /** The values, in order. */
+    options: readonly WheelOption[];
+    /** The chosen value (controlled). */
+    value?: string | null;
+    /** The chosen value at first, uncontrolled. Default: the first one. */
+    defaultValue?: string;
+    /** Called with the value that comes to rest under the band. */
+    onValueChange?: (value: string) => void;
+    /** Not available. */
+    disabled?: boolean;
+    /** Styles merged last, on the column (a width). */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * One column of a `WheelPicker`: values that snap under the band, a tick of the hand (`selection` haptic) at each one
+ * passed. For VoiceOver and TalkBack it is an adjustable control: swipe up or down to change it, its value read as words.
+ */
+declare function Wheel({ label, options, value: valueProp, defaultValue, onValueChange, disabled, style }: WheelProps): React.JSX.Element;
+
 /**
  * The Yazakia mark for React Native — the geometry of the web mark (marks/yazakia-geometry.ts): two voices, two
  * speech bubbles that overlap; the orbit and the pair turn slowly around them, the lens where they overlap breathes;
@@ -925,4 +1162,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, 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, EmptyState, type EmptyStateProps, ErrorState, GoalGauge, type GoalGaugeProps, IconButton, type IconButtonProps, KrizakaMark, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, type Mode, 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, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, WelcomeState, YazakiaMark, YororisMark, alpha, composeDate, dateFieldLabels, datePartsOrder, isRealDate, latestBirthDate, splitDuration, textStyles, toast, useCountdown, useReducedMotion, useTheme };
+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 };