@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/components/date-time-picker/date-time-picker-sheet.d.ts

@@ -0,0 +1,39 @@
+import type { DateTimePickerCalendarProps, DateTimePickerClockProps, DateTimePickerSheetProps } from './date-time-picker.type';
+/**
+ * The month and the clock `DateTimePicker.Trigger` opens.
+ *
+ * With no children it is the two steps and whichever half they are on. Children replace all
+ * of it, and `DateTimePicker.Steps`, `.Calendar` and `.Clock` are the three pieces to build
+ * your own from.
+ *
+ * **A sheet, and the `TimePicker`'s reason.** A month is three hundred points wide and a
+ * clock face is three hundred square; either one beside a field on a phone is the screen.
+ */
+export declare function DateTimePickerSheet({ children, stepLabels, previousLabel, nextLabel, ...props }: DateTimePickerSheetProps): import("react").JSX.Element;
+export declare namespace DateTimePickerSheet {
+    var displayName: string;
+}
+/**
+ * The month, already bound.
+ *
+ * It **is** a `Calendar` — the same component, rendered as itself — and choosing a day keeps
+ * whatever time the value already had, then moves to the clock.
+ */
+export declare function DateTimePickerCalendar({ previousLabel, nextLabel, ...props }: DateTimePickerCalendarProps): import("react").JSX.Element;
+export declare namespace DateTimePickerCalendar {
+    var displayName: string;
+}
+/**
+ * The dial, already bound.
+ *
+ * It **is** a `TimePicker` with its own sheet left out: the display and the clock are the two
+ * pieces that component publishes for exactly this, and rendering them here is what makes a
+ * date-and-time field and a time field behave identically on their second step.
+ *
+ * `closeOnSelect` is the outer picker's, not this one's — the minutes close the sheet the
+ * trigger opened, and this `TimePicker` has no sheet of its own to close.
+ */
+export declare function DateTimePickerClock(props: DateTimePickerClockProps): import("react").JSX.Element;
+export declare namespace DateTimePickerClock {
+    var displayName: string;
+}

package/dist/components/date-time-picker/date-time-picker-steps.d.cts

@@ -0,0 +1,27 @@
+import type { View } from 'react-native';
+import type { DateTimePickerStep } from './date-time-picker.type';
+/**
+ * The two steps, as a `Tabs`.
+ *
+ * **A tab bar and not a stepper**, because either half can be changed at any time: a reader
+ * who set the day, then the time, then wants the day again should press "date" rather than
+ * start over. Choosing a day still moves to the clock on its own, so the common path is one
+ * gesture and the tabs are the way back.
+ *
+ * Each tab reads the half it stands for once there is one — the date under "date", the time
+ * under "time" — so the sheet says what has been decided without a header of its own.
+ *
+ * The labels are the caller's: the words are a language's, and this library does not pick one.
+ *
+ * **The pair sits in the middle, and holds the month off.** A `Tabs.List` hugs its content
+ * from the leading edge, which is right for a page — a tab bar starts where the text under it
+ * starts. In a sheet there is no text to line up with and the month below is centred by its
+ * own grid, so a left-hung pill reads as a pill that slipped. The margin is the same reason
+ * the other way round: the sheet's gap spaces things that are the same width, and two
+ * hundred-point tabs above a three-hundred-point month need the seam said louder than that.
+ */
+export declare const DateTimePickerSteps: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & {
+    labels?: Record<DateTimePickerStep, string>;
+} & import("react").RefAttributes<View>>;

package/dist/components/date-time-picker/date-time-picker-steps.d.ts

@@ -0,0 +1,27 @@
+import type { View } from 'react-native';
+import type { DateTimePickerStep } from './date-time-picker.type';
+/**
+ * The two steps, as a `Tabs`.
+ *
+ * **A tab bar and not a stepper**, because either half can be changed at any time: a reader
+ * who set the day, then the time, then wants the day again should press "date" rather than
+ * start over. Choosing a day still moves to the clock on its own, so the common path is one
+ * gesture and the tabs are the way back.
+ *
+ * Each tab reads the half it stands for once there is one — the date under "date", the time
+ * under "time" — so the sheet says what has been decided without a header of its own.
+ *
+ * The labels are the caller's: the words are a language's, and this library does not pick one.
+ *
+ * **The pair sits in the middle, and holds the month off.** A `Tabs.List` hugs its content
+ * from the leading edge, which is right for a page — a tab bar starts where the text under it
+ * starts. In a sheet there is no text to line up with and the month below is centred by its
+ * own grid, so a left-hung pill reads as a pill that slipped. The margin is the same reason
+ * the other way round: the sheet's gap spaces things that are the same width, and two
+ * hundred-point tabs above a three-hundred-point month need the seam said louder than that.
+ */
+export declare const DateTimePickerSteps: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & {
+    labels?: Record<DateTimePickerStep, string>;
+} & import("react").RefAttributes<View>>;

package/dist/components/date-time-picker/date-time-picker-trigger.d.cts

@@ -0,0 +1,14 @@
+import type { View } from 'react-native';
+/**
+ * The field: what a reader sees, and the only node of this component a caller can hold a ref
+ * to — the root renders none.
+ *
+ * It **is** a `Select`'s trigger, so the four field levels, the focus and the invalid
+ * treatment are the ones already written. It publishes the indicator's size and colour
+ * through `IconContext`.
+ */
+export declare const DateTimePickerTrigger: import("react").ForwardRefExoticComponent<Omit<import("../..").PressableFeedbackProps, "isPressed" | "style" | "children"> & {
+    children?: import("react").ReactNode;
+    asChild?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
+} & import("react").RefAttributes<View>>;

package/dist/components/date-time-picker/date-time-picker-trigger.d.ts

@@ -0,0 +1,14 @@
+import type { View } from 'react-native';
+/**
+ * The field: what a reader sees, and the only node of this component a caller can hold a ref
+ * to — the root renders none.
+ *
+ * It **is** a `Select`'s trigger, so the four field levels, the focus and the invalid
+ * treatment are the ones already written. It publishes the indicator's size and colour
+ * through `IconContext`.
+ */
+export declare const DateTimePickerTrigger: import("react").ForwardRefExoticComponent<Omit<import("../..").PressableFeedbackProps, "isPressed" | "style" | "children"> & {
+    children?: import("react").ReactNode;
+    asChild?: boolean;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
+} & import("react").RefAttributes<View>>;

package/dist/components/date-time-picker/date-time-picker-value.d.cts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+/**
+ * The moment the field reads, through `Intl`.
+ *
+ * `formatOptions` on the root is `Intl.DateTimeFormatOptions`, so a caller asks for
+ * `{ dateStyle: 'medium', timeStyle: 'short' }` — the default — or their own combination, and
+ * gets the locale's own order, punctuation and hour cycle. None of which a template in here
+ * would know.
+ */
+export declare const DateTimePickerValue: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+    children?: import("react").ReactNode;
+} & {
+    placeholder?: string;
+} & import("react").RefAttributes<Text>>;

package/dist/components/date-time-picker/date-time-picker-value.d.ts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+/**
+ * The moment the field reads, through `Intl`.
+ *
+ * `formatOptions` on the root is `Intl.DateTimeFormatOptions`, so a caller asks for
+ * `{ dateStyle: 'medium', timeStyle: 'short' }` — the default — or their own combination, and
+ * gets the locale's own order, punctuation and hour cycle. None of which a template in here
+ * would know.
+ */
+export declare const DateTimePickerValue: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+    children?: import("react").ReactNode;
+} & {
+    placeholder?: string;
+} & import("react").RefAttributes<Text>>;

package/dist/components/date-time-picker/date-time-picker.context.d.cts

@@ -0,0 +1,3 @@
+import type { DateTimePickerContextValue } from './date-time-picker.type';
+/** R10 — the field's resolved styles, the moment, and the step the sheet is on. */
+export declare const DateTimePickerProvider: import("react").Provider<DateTimePickerContextValue | null>, useDateTimePicker: () => DateTimePickerContextValue;

package/dist/components/date-time-picker/date-time-picker.context.d.ts

@@ -0,0 +1,3 @@
+import type { DateTimePickerContextValue } from './date-time-picker.type';
+/** R10 — the field's resolved styles, the moment, and the step the sheet is on. */
+export declare const DateTimePickerProvider: import("react").Provider<DateTimePickerContextValue | null>, useDateTimePicker: () => DateTimePickerContextValue;

package/dist/components/date-time-picker/date-time-picker.d.cts

@@ -0,0 +1,34 @@
+import type { DateTimePickerProps } from './date-time-picker.type';
+/**
+ * A field that opens a month, and then a clock.
+ *
+ * ```tsx
+ * <DateTimePicker value={moment} onValueChange={setMoment}>
+ *   <DateTimePicker.Trigger>
+ *     <DateTimePicker.Value placeholder="Choisir un moment" />
+ *     <DateTimePicker.Indicator />
+ *   </DateTimePicker.Trigger>
+ *   <DateTimePicker.Sheet />
+ * </DateTimePicker>
+ * ```
+ *
+ * **It owns nothing at all, and that is the design.** The trigger is a `Select`'s trigger,
+ * the two steps are a `Tabs`, the month is a `Calendar` and the dial is a `TimePicker` — four
+ * components rendered as themselves rather than four tables restated. It has no recipe of its
+ * own: the only style it touches is the field's, and that one belongs to the `Select`.
+ *
+ * **Two steps rather than two fields.** A moment is one value, so it is one control — and a
+ * calendar and a clock will not fit on a phone at the same time, which is why the two take
+ * turns. Choosing a day moves to the clock, exactly as the `TimePicker`'s hours move to its
+ * minutes, and choosing the minutes closes the sheet.
+ *
+ * **Each half keeps the other.** A day chosen after a time keeps the time, and a time chosen
+ * after a day keeps the day: the value is one moment being narrowed rather than two values
+ * being collected.
+ *
+ * For a moment **typed** rather than chosen, that is `DateTimeField`.
+ */
+export declare function DateTimePicker({ children, variant, size, radius, color, value: controlledValue, defaultValue, onValueChange, isOpen: controlledOpen, defaultOpen, onOpenChange, step: controlledStep, defaultStep, onStepChange, hourCycle, minuteStep, minValue, maxValue, locale, formatOptions, closeOnSelect, isDisabled, isInvalid, }: DateTimePickerProps): import("react").JSX.Element;
+export declare namespace DateTimePicker {
+    var displayName: string;
+}

package/dist/components/date-time-picker/date-time-picker.d.ts

@@ -0,0 +1,34 @@
+import type { DateTimePickerProps } from './date-time-picker.type';
+/**
+ * A field that opens a month, and then a clock.
+ *
+ * ```tsx
+ * <DateTimePicker value={moment} onValueChange={setMoment}>
+ *   <DateTimePicker.Trigger>
+ *     <DateTimePicker.Value placeholder="Choisir un moment" />
+ *     <DateTimePicker.Indicator />
+ *   </DateTimePicker.Trigger>
+ *   <DateTimePicker.Sheet />
+ * </DateTimePicker>
+ * ```
+ *
+ * **It owns nothing at all, and that is the design.** The trigger is a `Select`'s trigger,
+ * the two steps are a `Tabs`, the month is a `Calendar` and the dial is a `TimePicker` — four
+ * components rendered as themselves rather than four tables restated. It has no recipe of its
+ * own: the only style it touches is the field's, and that one belongs to the `Select`.
+ *
+ * **Two steps rather than two fields.** A moment is one value, so it is one control — and a
+ * calendar and a clock will not fit on a phone at the same time, which is why the two take
+ * turns. Choosing a day moves to the clock, exactly as the `TimePicker`'s hours move to its
+ * minutes, and choosing the minutes closes the sheet.
+ *
+ * **Each half keeps the other.** A day chosen after a time keeps the time, and a time chosen
+ * after a day keeps the day: the value is one moment being narrowed rather than two values
+ * being collected.
+ *
+ * For a moment **typed** rather than chosen, that is `DateTimeField`.
+ */
+export declare function DateTimePicker({ children, variant, size, radius, color, value: controlledValue, defaultValue, onValueChange, isOpen: controlledOpen, defaultOpen, onOpenChange, step: controlledStep, defaultStep, onStepChange, hourCycle, minuteStep, minValue, maxValue, locale, formatOptions, closeOnSelect, isDisabled, isInvalid, }: DateTimePickerProps): import("react").JSX.Element;
+export declare namespace DateTimePicker {
+    var displayName: string;
+}

package/dist/components/date-time-picker/date-time-picker.type.d.cts

@@ -0,0 +1,130 @@
+import type { ReactNode } from 'react';
+import type { PressableStateCallbackType, StyleProp, TextProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { BottomSheetProps } from '../bottom-sheet';
+import type { CalendarProps } from '../calendar';
+import type { TimePickerProps } from '../time-picker';
+import type { PressableFeedbackProps } from '../../system/pressable-feedback';
+import type { TextStyleProps, ViewStyleProps } from '../../system/style-props';
+import type { RadiusKey, Size } from '../../theme/theme.type';
+import type { HourCycle } from '../../utils/time-mask';
+/** The `Select`'s four field levels, because the trigger **is** a select's trigger. */
+export type DateTimePickerVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type DateTimePickerSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+/** Which half of the moment is being chosen. */
+export type DateTimePickerStep = 'date' | 'time';
+type DateTimePickerOwnProps = {
+    /** Dresses the **field**. The calendar and the dial take their own. */
+    variant?: DateTimePickerVariant;
+    size?: DateTimePickerSize;
+    radius?: RadiusKey;
+    /** A raw tint (R7). It reaches the chosen day and the dial's mark. */
+    color?: string;
+    /** The moment chosen. Controlled — leave it out and the picker holds its own. */
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (value: Date) => void;
+    /** Whether the sheet is open. Present means controlled. */
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Which half is on screen. Present means controlled. @default 'date' */
+    step?: DateTimePickerStep;
+    defaultStep?: DateTimePickerStep;
+    onStepChange?: (step: DateTimePickerStep) => void;
+    /** Twelve hours and a period, or twenty-four. Unset, it is `locale`'s. */
+    hourCycle?: HourCycle;
+    minuteStep?: number;
+    minValue?: Date;
+    maxValue?: Date;
+    /** Names the months, the weekdays and the field's text. @default the device's */
+    locale?: string;
+    /** How the field reads the moment. @default `{ dateStyle: 'medium', timeStyle: 'short' }` */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** Whether choosing the minutes closes the sheet. @default true */
+    closeOnSelect?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    children?: ReactNode;
+};
+/** The root renders no node, so it carries no style and no ref — the trigger does. */
+export type DateTimePickerProps = DateTimePickerOwnProps;
+/** R14 — the trigger renders a `PressableFeedback`, so it carries that node's props. */
+export type DateTimePickerTriggerProps = Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'> & {
+    children?: ReactNode;
+    asChild?: boolean;
+    /** R9 — `Pressable`'s function form as much as an object or an array. */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+};
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+export type DateTimePickerTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
+    children?: ReactNode;
+};
+export type DateTimePickerValueProps = DateTimePickerTextProps & {
+    /** What the field says with no moment chosen. */
+    placeholder?: string;
+};
+/** `View`'s own props win over the `ViewStyle` keys of the same name (R14). */
+export type DateTimePickerViewProps = ViewProps & Omit<ViewStyleProps, keyof ViewProps> & {
+    children?: ReactNode;
+};
+/** The sheet's own props, less the three the picker drives. */
+export type DateTimePickerSheetProps = Omit<BottomSheetProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'> & {
+    /** What the two steps are called. The words are a language's, so they are given. */
+    stepLabels?: Record<DateTimePickerStep, string>;
+    /** The calendar's two arrows, as on the `Calendar` itself. */
+    previousLabel?: string;
+    nextLabel?: string;
+};
+/** The `Calendar`'s props, less the ones the picker drives. */
+export type DateTimePickerCalendarProps = Omit<CalendarProps, 'value' | 'onValueChange' | 'locale' | 'minValue' | 'maxValue' | 'children'> & {
+    previousLabel?: string;
+    nextLabel?: string;
+};
+/** The `TimePicker`'s props, less the ones the picker drives. */
+export type DateTimePickerClockProps = Omit<TimePickerProps, 'value' | 'onValueChange' | 'locale' | 'hourCycle' | 'minuteStep' | 'isOpen' | 'children'>;
+/** R5 — resolved styles for the field, and the state the slots read. */
+export type DateTimePickerContextValue = {
+    triggerStyle: StyleProp<ViewStyle>;
+    triggerPressedStyle: StyleProp<ViewStyle>;
+    valueStyle: StyleProp<TextStyle>;
+    placeholderStyle: StyleProp<TextStyle>;
+    /** Values, not a style — an indicator is an `Icon`, which takes props. */
+    glyph: {
+        size: number | undefined;
+        color: string | undefined;
+    };
+    value: Date | undefined;
+    /** The text the field reads. */
+    text: string | undefined;
+    /** What the two steps show while the sheet is open. */
+    dateText: string | undefined;
+    timeText: string | undefined;
+    step: DateTimePickerStep;
+    setStep: (step: DateTimePickerStep) => void;
+    /** A day chosen in the calendar: it keeps the time and moves to the clock. */
+    onPickDate: (day: Date) => void;
+    /** A time chosen on the dial: it keeps the day and closes the sheet. */
+    onPickTime: (moment: Date) => void;
+    /** Passed straight through to the two components this composes. */
+    calendar: {
+        variant: CalendarProps['variant'];
+        size: CalendarProps['size'];
+        color: string | undefined;
+        minValue: Date | undefined;
+        maxValue: Date | undefined;
+        locale: string | undefined;
+    };
+    clock: {
+        size: DateTimePickerSize;
+        color: string | undefined;
+        hourCycle: HourCycle | undefined;
+        minuteStep: number;
+        locale: string | undefined;
+    };
+    isOpen: boolean;
+    setOpen: (isOpen: boolean) => void;
+    toggle: () => void;
+    isDisabled: boolean;
+    isInvalid: boolean;
+};
+export {};

package/dist/components/date-time-picker/date-time-picker.type.d.ts

@@ -0,0 +1,130 @@
+import type { ReactNode } from 'react';
+import type { PressableStateCallbackType, StyleProp, TextProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { BottomSheetProps } from '../bottom-sheet';
+import type { CalendarProps } from '../calendar';
+import type { TimePickerProps } from '../time-picker';
+import type { PressableFeedbackProps } from '../../system/pressable-feedback';
+import type { TextStyleProps, ViewStyleProps } from '../../system/style-props';
+import type { RadiusKey, Size } from '../../theme/theme.type';
+import type { HourCycle } from '../../utils/time-mask';
+/** The `Select`'s four field levels, because the trigger **is** a select's trigger. */
+export type DateTimePickerVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type DateTimePickerSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+/** Which half of the moment is being chosen. */
+export type DateTimePickerStep = 'date' | 'time';
+type DateTimePickerOwnProps = {
+    /** Dresses the **field**. The calendar and the dial take their own. */
+    variant?: DateTimePickerVariant;
+    size?: DateTimePickerSize;
+    radius?: RadiusKey;
+    /** A raw tint (R7). It reaches the chosen day and the dial's mark. */
+    color?: string;
+    /** The moment chosen. Controlled — leave it out and the picker holds its own. */
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (value: Date) => void;
+    /** Whether the sheet is open. Present means controlled. */
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Which half is on screen. Present means controlled. @default 'date' */
+    step?: DateTimePickerStep;
+    defaultStep?: DateTimePickerStep;
+    onStepChange?: (step: DateTimePickerStep) => void;
+    /** Twelve hours and a period, or twenty-four. Unset, it is `locale`'s. */
+    hourCycle?: HourCycle;
+    minuteStep?: number;
+    minValue?: Date;
+    maxValue?: Date;
+    /** Names the months, the weekdays and the field's text. @default the device's */
+    locale?: string;
+    /** How the field reads the moment. @default `{ dateStyle: 'medium', timeStyle: 'short' }` */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** Whether choosing the minutes closes the sheet. @default true */
+    closeOnSelect?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    children?: ReactNode;
+};
+/** The root renders no node, so it carries no style and no ref — the trigger does. */
+export type DateTimePickerProps = DateTimePickerOwnProps;
+/** R14 — the trigger renders a `PressableFeedback`, so it carries that node's props. */
+export type DateTimePickerTriggerProps = Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'> & {
+    children?: ReactNode;
+    asChild?: boolean;
+    /** R9 — `Pressable`'s function form as much as an object or an array. */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+};
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+export type DateTimePickerTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
+    children?: ReactNode;
+};
+export type DateTimePickerValueProps = DateTimePickerTextProps & {
+    /** What the field says with no moment chosen. */
+    placeholder?: string;
+};
+/** `View`'s own props win over the `ViewStyle` keys of the same name (R14). */
+export type DateTimePickerViewProps = ViewProps & Omit<ViewStyleProps, keyof ViewProps> & {
+    children?: ReactNode;
+};
+/** The sheet's own props, less the three the picker drives. */
+export type DateTimePickerSheetProps = Omit<BottomSheetProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'> & {
+    /** What the two steps are called. The words are a language's, so they are given. */
+    stepLabels?: Record<DateTimePickerStep, string>;
+    /** The calendar's two arrows, as on the `Calendar` itself. */
+    previousLabel?: string;
+    nextLabel?: string;
+};
+/** The `Calendar`'s props, less the ones the picker drives. */
+export type DateTimePickerCalendarProps = Omit<CalendarProps, 'value' | 'onValueChange' | 'locale' | 'minValue' | 'maxValue' | 'children'> & {
+    previousLabel?: string;
+    nextLabel?: string;
+};
+/** The `TimePicker`'s props, less the ones the picker drives. */
+export type DateTimePickerClockProps = Omit<TimePickerProps, 'value' | 'onValueChange' | 'locale' | 'hourCycle' | 'minuteStep' | 'isOpen' | 'children'>;
+/** R5 — resolved styles for the field, and the state the slots read. */
+export type DateTimePickerContextValue = {
+    triggerStyle: StyleProp<ViewStyle>;
+    triggerPressedStyle: StyleProp<ViewStyle>;
+    valueStyle: StyleProp<TextStyle>;
+    placeholderStyle: StyleProp<TextStyle>;
+    /** Values, not a style — an indicator is an `Icon`, which takes props. */
+    glyph: {
+        size: number | undefined;
+        color: string | undefined;
+    };
+    value: Date | undefined;
+    /** The text the field reads. */
+    text: string | undefined;
+    /** What the two steps show while the sheet is open. */
+    dateText: string | undefined;
+    timeText: string | undefined;
+    step: DateTimePickerStep;
+    setStep: (step: DateTimePickerStep) => void;
+    /** A day chosen in the calendar: it keeps the time and moves to the clock. */
+    onPickDate: (day: Date) => void;
+    /** A time chosen on the dial: it keeps the day and closes the sheet. */
+    onPickTime: (moment: Date) => void;
+    /** Passed straight through to the two components this composes. */
+    calendar: {
+        variant: CalendarProps['variant'];
+        size: CalendarProps['size'];
+        color: string | undefined;
+        minValue: Date | undefined;
+        maxValue: Date | undefined;
+        locale: string | undefined;
+    };
+    clock: {
+        size: DateTimePickerSize;
+        color: string | undefined;
+        hourCycle: HourCycle | undefined;
+        minuteStep: number;
+        locale: string | undefined;
+    };
+    isOpen: boolean;
+    setOpen: (isOpen: boolean) => void;
+    toggle: () => void;
+    isDisabled: boolean;
+    isInvalid: boolean;
+};
+export {};

package/dist/components/date-time-picker/index.cjs

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+
+
+
+var _chunk4XZWVJZLcjs = require('../../chunk-4XZWVJZL.cjs');
+require('../../chunk-5YEMZL4C.cjs');
+require('../../chunk-YSTLHVQV.cjs');
+require('../../chunk-A2JNZMDJ.cjs');
+require('../../chunk-GBTNFQXN.cjs');
+require('../../chunk-D2UYBAGB.cjs');
+require('../../chunk-SDLDRTT7.cjs');
+require('../../chunk-ISHMSP6P.cjs');
+require('../../chunk-J5COSALO.cjs');
+require('../../chunk-WDDXU3OH.cjs');
+require('../../chunk-EKS3W46M.cjs');
+require('../../chunk-WFEMJCXO.cjs');
+require('../../chunk-7EIHHOHP.cjs');
+require('../../chunk-PIU3JONR.cjs');
+require('../../chunk-7DPL3ZDS.cjs');
+require('../../chunk-GSZDN6EZ.cjs');
+require('../../chunk-FHNIGHN5.cjs');
+require('../../chunk-SL3V7R2Y.cjs');
+require('../../chunk-TVJXC4HY.cjs');
+require('../../chunk-CDRGTUYF.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-IIAQISBG.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+
+
+
+
+
+
+
+exports.DateTimePicker = _chunk4XZWVJZLcjs.DateTimePicker2; exports.DateTimePickerCalendar = _chunk4XZWVJZLcjs.DateTimePickerCalendar; exports.DateTimePickerClock = _chunk4XZWVJZLcjs.DateTimePickerClock; exports.DateTimePickerIndicator = _chunk4XZWVJZLcjs.DateTimePickerIndicator; exports.DateTimePickerRoot = _chunk4XZWVJZLcjs.DateTimePicker; exports.DateTimePickerSheet = _chunk4XZWVJZLcjs.DateTimePickerSheet; exports.DateTimePickerSteps = _chunk4XZWVJZLcjs.DateTimePickerSteps; exports.DateTimePickerTrigger = _chunk4XZWVJZLcjs.DateTimePickerTrigger; exports.DateTimePickerValue = _chunk4XZWVJZLcjs.DateTimePickerValue; exports.useDateTimePicker = _chunk4XZWVJZLcjs.useDateTimePicker;

package/dist/components/date-time-picker/index.d.cts

@@ -0,0 +1,32 @@
+import { DateTimePicker as DateTimePickerRoot } from './date-time-picker';
+import { DateTimePickerCalendar, DateTimePickerClock, DateTimePickerSheet } from './date-time-picker-sheet';
+import { DateTimePickerIndicator } from './date-time-picker-indicator';
+export declare const DateTimePicker: typeof DateTimePickerRoot & {
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("../..").PressableFeedbackProps, "isPressed" | "style" | "children"> & {
+        children?: import("react").ReactNode;
+        asChild?: boolean;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
+    } & import("react").RefAttributes<import("react-native").View>>;
+    Value: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & {
+        placeholder?: string;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Indicator: typeof DateTimePickerIndicator;
+    Sheet: typeof DateTimePickerSheet;
+    Steps: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+        children?: import("react").ReactNode;
+    } & {
+        labels?: Record<import("./date-time-picker.type").DateTimePickerStep, string>;
+    } & import("react").RefAttributes<import("react-native").View>>;
+    Calendar: typeof DateTimePickerCalendar;
+    Clock: typeof DateTimePickerClock;
+};
+export { DateTimePicker as DateTimePickerRoot } from './date-time-picker';
+export { DateTimePickerCalendar, DateTimePickerClock, DateTimePickerSheet, } from './date-time-picker-sheet';
+export { DateTimePickerIndicator } from './date-time-picker-indicator';
+export { DateTimePickerSteps } from './date-time-picker-steps';
+export { DateTimePickerTrigger } from './date-time-picker-trigger';
+export { DateTimePickerValue } from './date-time-picker-value';
+export { useDateTimePicker } from './date-time-picker.context';
+export type { DateTimePickerCalendarProps, DateTimePickerClockProps, DateTimePickerContextValue, DateTimePickerProps, DateTimePickerSheetProps, DateTimePickerSize, DateTimePickerStep, DateTimePickerTextProps, DateTimePickerTriggerProps, DateTimePickerValueProps, DateTimePickerVariant, DateTimePickerViewProps, } from './date-time-picker.type';

package/dist/components/date-time-picker/index.d.ts

@@ -0,0 +1,32 @@
+import { DateTimePicker as DateTimePickerRoot } from './date-time-picker';
+import { DateTimePickerCalendar, DateTimePickerClock, DateTimePickerSheet } from './date-time-picker-sheet';
+import { DateTimePickerIndicator } from './date-time-picker-indicator';
+export declare const DateTimePicker: typeof DateTimePickerRoot & {
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("../..").PressableFeedbackProps, "isPressed" | "style" | "children"> & {
+        children?: import("react").ReactNode;
+        asChild?: boolean;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
+    } & import("react").RefAttributes<import("react-native").View>>;
+    Value: import("react").ForwardRefExoticComponent<import("react-native").TextProps & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & {
+        children?: import("react").ReactNode;
+    } & {
+        placeholder?: string;
+    } & import("react").RefAttributes<import("react-native").Text>>;
+    Indicator: typeof DateTimePickerIndicator;
+    Sheet: typeof DateTimePickerSheet;
+    Steps: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+        children?: import("react").ReactNode;
+    } & {
+        labels?: Record<import("./date-time-picker.type").DateTimePickerStep, string>;
+    } & import("react").RefAttributes<import("react-native").View>>;
+    Calendar: typeof DateTimePickerCalendar;
+    Clock: typeof DateTimePickerClock;
+};
+export { DateTimePicker as DateTimePickerRoot } from './date-time-picker';
+export { DateTimePickerCalendar, DateTimePickerClock, DateTimePickerSheet, } from './date-time-picker-sheet';
+export { DateTimePickerIndicator } from './date-time-picker-indicator';
+export { DateTimePickerSteps } from './date-time-picker-steps';
+export { DateTimePickerTrigger } from './date-time-picker-trigger';
+export { DateTimePickerValue } from './date-time-picker-value';
+export { useDateTimePicker } from './date-time-picker.context';
+export type { DateTimePickerCalendarProps, DateTimePickerClockProps, DateTimePickerContextValue, DateTimePickerProps, DateTimePickerSheetProps, DateTimePickerSize, DateTimePickerStep, DateTimePickerTextProps, DateTimePickerTriggerProps, DateTimePickerValueProps, DateTimePickerVariant, DateTimePickerViewProps, } from './date-time-picker.type';