@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/build/components/DatePicker/utils.js

@@ -0,0 +1,391 @@
+import dayjs from 'dayjs';
+import { useRef } from 'react';
+import { isEqual } from '../../utils';
+export const CALENDAR_FORMAT = 'YYYY-MM-DD HH:mm';
+export const DATE_FORMAT = 'YYYY-MM-DD';
+export const YEAR_PAGE_SIZE = 12;
+export const getMonths = () => dayjs.months();
+export const getMonthName = (month) => dayjs.months()[month];
+/**
+ * Get months array
+ *
+ * @returns months array
+ */
+export const getMonthsArray = () => {
+    const monthNames = dayjs.months();
+    const monthShortNames = dayjs.monthsShort();
+    return monthNames.map((name, index) => ({
+        index,
+        name: {
+            full: name,
+            short: monthShortNames[index] || '',
+        },
+        isSelected: false,
+    }));
+};
+/**
+ * Get weekdays
+ *
+ * @param locale - locale
+ * @param firstDayOfWeek - first day of week
+ * @param format - format short, min or full
+ *
+ * @returns weekdays
+ */
+export const getWeekdays = (firstDayOfWeek) => {
+    dayjs.locale('en');
+    const weekdayNames = dayjs.weekdays();
+    const weekdayShortNames = dayjs.weekdaysShort();
+    const weekdayMinNames = dayjs.weekdaysMin();
+    let weekdays = weekdayNames.map((name, index) => ({
+        index,
+        name: {
+            full: name,
+            short: weekdayShortNames[index] || '',
+            min: weekdayMinNames[index][0] || '',
+        },
+    }));
+    if (firstDayOfWeek > 0) {
+        weekdays = [
+            ...weekdays.slice(firstDayOfWeek, weekdays.length),
+            ...weekdays.slice(0, firstDayOfWeek),
+        ];
+    }
+    return weekdays;
+};
+export const getFormated = (date) => dayjs(date).format(CALENDAR_FORMAT);
+export const getDateMonth = (date) => dayjs(date).month();
+export const getDateYear = (date) => dayjs(date).year();
+/**
+ * Check if two dates are on the same day
+ *
+ * @param a - date to check
+ * @param b - date to check
+ *
+ * @returns true if dates are on the same day, false otherwise
+ */
+export function areDatesOnSameDay(a, b) {
+    if (!a || !b) {
+        return false;
+    }
+    const date_a = dayjs(a).format(DATE_FORMAT);
+    const date_b = dayjs(b).format(DATE_FORMAT);
+    return date_a === date_b;
+}
+/**
+ * Check if date is between two dates
+ *
+ * @param date - date to check
+ * @param options - options
+ *
+ * @returns true if date is between two dates, false otherwise
+ */
+export function isDateBetween(date, { startDate, endDate, }) {
+    if (!startDate || !endDate) {
+        return false;
+    }
+    return dayjs(date) <= endDate && dayjs(date) >= startDate;
+}
+/**
+ * Check if date is disabled
+ *
+ * @param date - date to check
+ * @param options - options
+ *
+ * @returns true if date is disabled, false otherwise
+ */
+export function isDateDisabled(date, { minDate, maxDate, enabledDates, disabledDates, }) {
+    if (minDate && date.isBefore(dayjs(minDate).startOf('day'))) {
+        return true;
+    }
+    if (maxDate && date.isAfter(dayjs(maxDate).endOf('day'))) {
+        return true;
+    }
+    if (enabledDates) {
+        if (Array.isArray(enabledDates)) {
+            const isEnabled = enabledDates.some(enabledDate => areDatesOnSameDay(date, enabledDate));
+            return !isEnabled;
+        }
+        else if (enabledDates instanceof Function) {
+            return !enabledDates(date);
+        }
+    }
+    else if (disabledDates) {
+        if (Array.isArray(disabledDates)) {
+            const isDisabled = disabledDates.some(disabledDate => areDatesOnSameDay(date, disabledDate));
+            return isDisabled;
+        }
+        else if (disabledDates instanceof Function) {
+            return disabledDates(date);
+        }
+    }
+    return false;
+}
+/**
+ * Check if year is disabled
+ *
+ * @param year - year to check
+ * @param options - options
+ *
+ * @returns true if year is disabled, false otherwise
+ */
+export function isYearDisabled(year, { minDate, maxDate, }) {
+    if (minDate && year < getDateYear(minDate))
+        return true;
+    if (maxDate && year > getDateYear(maxDate))
+        return true;
+    return false;
+}
+/**
+ * Check if month is disabled
+ *
+ * @param month - month to check
+ * @param date - date to check
+ * @param options - options
+ *
+ * @returns true if month is disabled, false otherwise
+ */
+export function isMonthDisabled(month, date, { minDate, maxDate, }) {
+    if (minDate && month < getDateMonth(minDate) && getDateYear(date) === getDateYear(minDate))
+        return true;
+    if (maxDate && month > getDateMonth(maxDate) && getDateYear(date) === getDateYear(maxDate))
+        return true;
+    return false;
+}
+/**
+ * Get formated date
+ *
+ * @param date - date to get formated date from
+ * @param format - format to get formated date from
+ *
+ * @returns formated date
+ */
+export const getFormatedDate = (date, format) => dayjs(date).format(format);
+/**
+ * Get date
+ *
+ * @param date - date to get
+ *
+ * @returns date
+ */
+export const getDate = (date) => dayjs(date);
+/**
+ * Get year range
+ *
+ * @param year - year to get year range from
+ *
+ * @returns year range
+ */
+export const getYearRange = (year) => {
+    const endYear = YEAR_PAGE_SIZE * Math.ceil(year / YEAR_PAGE_SIZE);
+    let startYear = endYear === year ? endYear : endYear - YEAR_PAGE_SIZE;
+    if (startYear < 0) {
+        startYear = 0;
+    }
+    return Array.from({ length: YEAR_PAGE_SIZE }, (_, i) => startYear + i);
+};
+/**
+ * Get days in month
+ *
+ * @param date - date to get days in month from
+ * @param showOutsideDays - whether to show outside days
+ * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
+ *
+ * @returns days in month
+ */
+export function getDaysInMonth(date, showOutsideDays, firstDayOfWeek) {
+    const daysInCurrentMonth = dayjs(date).daysInMonth();
+    const prevMonthDays = dayjs(date).add(-1, 'month').daysInMonth();
+    const firstDay = dayjs(date).date(1 - firstDayOfWeek);
+    const prevMonthOffset = firstDay.day() % 7;
+    const daysInPrevMonth = showOutsideDays ? prevMonthOffset : 0;
+    const monthDaysOffset = prevMonthOffset + daysInCurrentMonth;
+    const daysInNextMonth = showOutsideDays
+        ? monthDaysOffset > 35
+            ? 42 - monthDaysOffset
+            : 35 - monthDaysOffset
+        : 0;
+    const fullDaysInMonth = daysInPrevMonth + daysInCurrentMonth + daysInNextMonth;
+    return {
+        prevMonthDays,
+        prevMonthOffset,
+        daysInCurrentMonth,
+        daysInNextMonth,
+        fullDaysInMonth,
+    };
+}
+/**
+ * Get first day of month
+ *
+ * @param date - date to get first day of month from
+ * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
+ *
+ * @returns first day of month
+ */
+export function getFirstDayOfMonth(date, firstDayOfWeek) {
+    const d = getDate(date);
+    return d.date(1 - firstDayOfWeek).day();
+}
+/**
+ * Get start of day
+ *
+ * @param date - date to get start of day from
+ *
+ * @returns start of day
+ */
+export function getStartOfDay(date) {
+    return dayjs(date).startOf('day');
+}
+/**
+ * Get end of day
+ *
+ * @param date - date to get end of day from
+ *
+ * @returns end of day
+ */
+export function getEndOfDay(date) {
+    return dayjs(date).endOf('day');
+}
+/**
+ * Convert date to unix timestamp
+ *
+ * @param date - date to convert
+ *
+ * @returns unix timestamp
+ */
+export function dateToUnix(date) {
+    return dayjs(date).unix();
+}
+/**
+ * Remove time from date
+ *
+ * @param date - date to remove time from
+ *
+ * @returns date with time removed
+ */
+export function removeTime(date, timeZone) {
+    return date ? dayjs.tz(date, timeZone).startOf('day') : undefined;
+}
+/**
+ * Get detailed date object
+ *
+ * @param date Get detailed date object
+ *
+ * @returns parsed date object
+ */
+export const getParsedDate = (date) => {
+    return {
+        year: dayjs(date).year(),
+        month: dayjs(date).month(),
+        hour: dayjs(date).hour(),
+        hour12: parseInt(dayjs(date).format('hh')),
+        minute: dayjs(date).minute(),
+        period: dayjs(date).format('A'),
+    };
+};
+/**
+ * Calculate month days array based on current date
+ *
+ * @param datetime - The current date that selected
+ * @param showOutsideDays
+ * @param minDate - min selectable date
+ * @param maxDate - max selectable date
+ * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
+ * @param enabledDates - array of enabled dates, or a function that returns true for a given date (takes precedence over disabledDates)
+ * @param disabledDates - array of disabled dates, or a function that returns true for a given date
+ * @param prevMonthDays - number of days in the previous month
+ * @param prevMonthOffset - number of days to offset the previous month
+ * @param daysInCurrentMonth - number of days in the current month
+ * @param daysInNextMonth - number of days in the next month
+ *
+ * @returns days array based on current date
+ */
+export const getMonthDays = (datetime, showOutsideDays, minDate, maxDate, firstDayOfWeek, enabledDates, disabledDates, prevMonthDays, prevMonthOffset, daysInCurrentMonth, daysInNextMonth, numerals) => {
+    const date = dayjs(datetime);
+    const prevDays = showOutsideDays
+        ? Array.from({ length: prevMonthOffset }, (_, index) => {
+            const number = index + (prevMonthDays - prevMonthOffset + 1);
+            const thisDay = date.add(-1, 'month').date(number);
+            return generateCalendarDay(number, thisDay, minDate, maxDate, enabledDates, disabledDates, false, index + 1, firstDayOfWeek, numerals);
+        })
+        : Array(prevMonthOffset).fill(null);
+    const currentDays = Array.from({ length: daysInCurrentMonth }, (_, index) => {
+        const day = index + 1;
+        const thisDay = date.date(day);
+        return generateCalendarDay(day, thisDay, minDate, maxDate, enabledDates, disabledDates, true, prevMonthOffset + day, firstDayOfWeek, numerals);
+    });
+    const nextDays = Array.from({ length: daysInNextMonth }, (_, index) => {
+        const day = index + 1;
+        const thisDay = date.add(1, 'month').date(day);
+        return generateCalendarDay(day, thisDay, minDate, maxDate, enabledDates, disabledDates, false, daysInCurrentMonth + prevMonthOffset + day, firstDayOfWeek, numerals);
+    });
+    return [...prevDays, ...currentDays, ...nextDays];
+};
+/**
+ * Generate day object for displaying inside day cell
+ *
+ * @param number - number of day
+ * @param date - calculated date based on day, month, and year
+ * @param minDate - min selectable date
+ * @param maxDate - max selectable date
+ * @param enabledDates - array of enabled dates, or a function that returns true for a given date (takes precedence over disabledDates)
+ * @param disabledDates - array of disabled dates, or a function that returns true for a given date
+ * @param isCurrentMonth - define the day is in the current month
+ * @param dayOfMonth - number the day in the current month
+ * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
+ *
+ * @returns days object based on current date
+ */
+const generateCalendarDay = (number, date, minDate, maxDate, enabledDates, disabledDates, isCurrentMonth, dayOfMonth, firstDayOfWeek, numerals) => {
+    const startOfWeek = dayjs(date).startOf('week').add(firstDayOfWeek, 'day');
+    return {
+        text: formatNumber(number, numerals),
+        number,
+        date: date,
+        isDisabled: isDateDisabled(date, {
+            minDate,
+            maxDate,
+            enabledDates,
+            disabledDates,
+        }),
+        isCurrentMonth,
+        dayOfMonth,
+        isStartOfWeek: date.isSame(startOfWeek, 'day'),
+        isEndOfWeek: date.day() === (firstDayOfWeek + 6) % 7,
+    };
+};
+/**
+ * Deep compare memo
+ *
+ * @param value - value to compare
+ * @param deps - dependencies
+ *
+ * @returns memoized value
+ */
+export function useDeepCompareMemo(value, deps) {
+    const ref = useRef(null);
+    const depsRef = useRef(null);
+    if (!depsRef.current || !deps.every((dep, i) => isEqual(dep, depsRef.current[i]))) {
+        ref.current = value;
+        depsRef.current = deps;
+    }
+    return ref.current;
+}
+export const numeralSystems = {
+    latn: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+};
+function getDigitMap(numerals) {
+    const digitMap = {};
+    const numeralDigits = numeralSystems[numerals];
+    for (let i = 0; i < 10; i++) {
+        digitMap[i.toString()] = numeralDigits[i];
+    }
+    return digitMap;
+}
+function replaceDigits(input, numerals) {
+    const digitMap = getDigitMap(numerals);
+    return input.replace(/\d/g, digit => digitMap[digit] || digit);
+}
+export function formatNumber(value, numerals) {
+    return replaceDigits(value.toString(), numerals);
+}

package/build/components/DatePickerInput/DatePickerInput.d.ts

@@ -0,0 +1,6 @@
+import type DatePickerInputProps from './DatePickerInput.props';
+declare const DatePickerInput: {
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DatePickerInput;

package/build/components/DatePickerInput/DatePickerInput.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CalendarSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Keyboard, Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { DatePicker } from '../DatePicker';
+import { useFormFieldContext } from '../FormField';
+import { Input, InputField, InputSlot } from '../Input';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import DatePickerInputDoneButton from './DatePickerInputDoneButton';
+dayjs.extend(customParseFormat);
+const DEFAULT_FORMAT = 'DD/MM/YYYY';
+const maskDefaultFormat = (value) => {
+    const digitsOnly = value.replace(/\D/g, '').slice(0, 8);
+    const day = digitsOnly.slice(0, 2);
+    const month = digitsOnly.slice(2, 4);
+    const year = digitsOnly.slice(4, 8);
+    return [day, month, year].filter(Boolean).join('/');
+};
+const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
+    const formFieldContext = useFormFieldContext();
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const isDisabled = formFieldContext?.disabled ?? disabled;
+    const isReadonly = formFieldContext?.readonly ?? readonly;
+    const pickerRef = useRef(null);
+    const accessoryViewID = useMemo(() => {
+        if (Platform.OS !== 'ios')
+            return undefined;
+        return `datepicker-input-${Math.random().toString(36).slice(2)}`;
+    }, []);
+    const formatDate = useCallback((dateValue) => {
+        if (!dateValue)
+            return '';
+        const parsed = dayjs(dateValue);
+        return parsed.isValid() ? parsed.format(format) : '';
+    }, [format]);
+    const isDefaultFormat = format === DEFAULT_FORMAT;
+    const [inputValue, setInputValue] = useState(() => formatDate(value));
+    useEffect(() => {
+        setInputValue(formatDate(value));
+    }, [value, formatDate]);
+    const handleTextChange = useCallback((text) => {
+        const nextValue = isDefaultFormat ? maskDefaultFormat(text) : text;
+        setInputValue(nextValue);
+        onChangeText?.(nextValue);
+        if (!nextValue) {
+            onChange?.({ date: undefined });
+            return;
+        }
+        const parsed = dayjs(nextValue, format, true);
+        if (parsed.isValid()) {
+            onChange?.({ date: parsed.toDate() });
+        }
+        else {
+            onChange?.({ date: undefined });
+        }
+    }, [format, isDefaultFormat, onChange, onChangeText]);
+    const handleClear = useCallback(() => {
+        setInputValue('');
+        onChange?.({ date: undefined });
+        onClear?.();
+    }, [onChange, onClear]);
+    const closeKeyboard = useCallback(() => {
+        Keyboard.dismiss();
+    }, []);
+    const openPicker = useCallback(() => {
+        if (isDisabled || isReadonly)
+            return;
+        closeKeyboard();
+        pickerRef.current?.present();
+    }, [closeKeyboard, isDisabled, isReadonly]);
+    const selectedDate = useMemo(() => {
+        if (value) {
+            return value;
+        }
+        const parsed = dayjs(inputValue, format, true);
+        return parsed.isValid() ? parsed.toDate() : undefined;
+    }, [value, inputValue, format]);
+    const handlePickerChange = useCallback(({ date }) => {
+        if (!date) {
+            handleClear();
+            return;
+        }
+        const formatted = formatDate(date);
+        setInputValue(formatted);
+        onChange?.({ date });
+        if (autoCloseOnSelect) {
+            pickerRef.current?.close?.();
+        }
+    }, [autoCloseOnSelect, formatDate, handleClear, onChange]);
+    const handleBlur = useCallback((event) => {
+        onBlur?.(event);
+    }, [onBlur]);
+    const handleFocus = useCallback((event) => {
+        onFocus?.(event);
+    }, [onFocus]);
+    const { onCancel: pickerOnCancel, ...restDatePickerProps } = datePickerProps ?? {};
+    const { style: inputStyle, keyboardType: keyboardTypeProp, inputMode: inputModeProp, accessibilityHint: accessibilityHintProp, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, accessibilityRole: accessibilityRoleProp, importantForAccessibility: importantForAccessibilityProp, ...textInputProps } = rest;
+    const resolvedKeyboardType = keyboardTypeProp ?? (isDefaultFormat ? 'number-pad' : undefined);
+    const resolvedInputMode = inputModeProp ?? (isDefaultFormat ? 'numeric' : undefined);
+    const resolvedAccessibilityHint = accessibilityHintProp ?? `Enter the date in ${format} format`;
+    const resolvedAccessibilityLabel = accessibilityLabelProp ?? 'Date input';
+    const resolvedAccessible = accessibleProp ?? true;
+    const resolvedImportantForAccessibility = importantForAccessibilityProp ?? 'yes';
+    const handleCancel = useCallback(() => {
+        pickerOnCancel?.();
+        pickerRef.current?.close?.();
+    }, [pickerOnCancel]);
+    const placeholderValue = placeholder ?? format;
+    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: isDisabled, readonly: isReadonly, focused: focused, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Date input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
+                            disabled: isDisabled || isReadonly,
+                        }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, style: [styles.input, inputStyle] }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear date", accessibilityHint: "Removes the current date", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the date picker calendar", icon: CalendarSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(DatePicker, { ref: pickerRef, mode: "single", date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restDatePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(DatePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
+};
+DatePickerInput.displayName = 'DatePickerInput';
+const styles = StyleSheet.create(theme => ({
+    wrap: {
+        gap: theme.components.input.date.gap,
+    },
+    input: {
+        paddingLeft: 0,
+        paddingRight: 0,
+    },
+}));
+export default DatePickerInput;

package/build/components/DatePickerInput/DatePickerInput.props.d.ts

@@ -0,0 +1,47 @@
+import type { TextInputProps, ViewProps } from 'react-native';
+import type { DatePickerSingleProps } from '../DatePicker/DatePicker';
+import type { DateType } from '../DatePicker/DatePicker.props';
+export interface DatePickerInputBaseProps {
+    disabled?: boolean;
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    placeholder?: string;
+    inBottomSheet?: boolean;
+    required?: boolean;
+    /**
+     * Controls how the selected date is formatted when displayed inside the input.
+     * Accepts any Day.js format string. When left as the default `DD/MM/YYYY`,
+     * the input automatically inserts separators as people type.
+     */
+    format?: string;
+    /**
+     * Accessible label announced when activating the calendar trigger button.
+     */
+    openButtonLabel?: string;
+    /**
+     * When true (default), the calendar sheet is dismissed as soon as a date is picked.
+     */
+    autoCloseOnSelect?: boolean;
+    /**
+     * Additional props forwarded to the underlying DatePicker instance.
+     */
+    datePickerProps?: Omit<DatePickerSingleProps, 'mode' | 'date' | 'onChange' | 'ref'>;
+    /**
+     * Handles cleared input values.
+     */
+    onClear?: () => void;
+}
+export type DatePickerInputProps = DatePickerInputBaseProps & Omit<TextInputProps, 'value' | 'onChange' | 'children'> & ViewProps & {
+    /**
+     * Controlled date value. Accepts Date, string, number or Day.js instances.
+     */
+    value?: DateType;
+    /**
+     * Fired after a valid date is parsed either from typing or the picker selection.
+     */
+    onChange?: (params: {
+        date: DateType;
+    }) => void;
+};
+export default DatePickerInputProps;

package/build/components/DatePickerInput/DatePickerInput.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/DatePickerInput/DatePickerInputDoneButton.d.ts

@@ -0,0 +1,8 @@
+declare const DatePickerInputDoneButton: {
+    ({ accessoryViewID, closeKeyboard, }: {
+        accessoryViewID: string;
+        closeKeyboard: () => void;
+    }): import("react/jsx-runtime").JSX.Element;
+    DisplayName: string;
+};
+export default DatePickerInputDoneButton;

package/build/components/DatePickerInput/DatePickerInputDoneButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputAccessoryView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../Button';
+const DatePickerInputDoneButton = ({ accessoryViewID, closeKeyboard, }) => {
+    return (_jsx(InputAccessoryView, { nativeID: accessoryViewID, children: _jsx(View, { style: styles.accessory, children: _jsx(Button, { accessibilityRole: "button", accessibilityLabel: "Done", onPress: closeKeyboard, variant: "ghost", colorScheme: "functional", children: "Done" }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    accessory: {
+        paddingHorizontal: 16,
+        paddingVertical: 2,
+        alignItems: 'flex-end',
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderTopWidth: theme.borderWidth[1],
+        borderTopColor: theme.color.border.subtle,
+    },
+}));
+DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
+export default DatePickerInputDoneButton;

package/build/components/DatePickerInput/DatePickerInputDoneButton.web.d.ts

@@ -0,0 +1,5 @@
+declare const DatePickerInputDoneButton: {
+    (): null;
+    DisplayName: string;
+};
+export default DatePickerInputDoneButton;

package/build/components/DatePickerInput/DatePickerInputDoneButton.web.js

@@ -0,0 +1,5 @@
+const DatePickerInputDoneButton = () => {
+    return null;
+};
+DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
+export default DatePickerInputDoneButton;

package/build/components/DatePickerInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatePickerInput } from './DatePickerInput';
+export type { default as DatePickerInputProps } from './DatePickerInput.props';

package/build/components/DatePickerInput/index.js

@@ -0,0 +1 @@
+export { default as DatePickerInput } from './DatePickerInput';

package/build/components/Input/InputField.d.ts

@@ -1,6 +1,6 @@
 import { TextInputProps } from 'react-native';
 declare const InputField: {
-    ({ style, onFocus, onBlur, inBottomSheet, ...props }: TextInputProps & {
+    ({ style, inBottomSheet, ...props }: TextInputProps & {
         inBottomSheet?: boolean;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/Input/InputField.js

@@ -4,7 +4,7 @@ import { TextInput as RNTextInput } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { useInputContext } from './Input.context';
-const InputField = ({ style, onFocus, onBlur, inBottomSheet = false, ...props }) => {
+const InputField = ({ style, inBottomSheet = false, ...props }) => {
     const { disabled, focused = false, type } = useInputContext();
     styles.useVariants({ focused, type });
     const { color } = useTheme();

package/build/components/Input/InputSlot.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'react-native';
 declare const InputSlot: {
-    ({ children, style, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, accessible, importantForAccessibility, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default InputSlot;

package/build/components/Input/InputSlot.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
-const InputSlot = ({ children, style, ...props }) => {
-    return (_jsx(View, { ...props, style: [styles.container, style], children: children }));
+import { StyleSheet } from 'react-native-unistyles';
+const InputSlot = ({ children, style, accessible, importantForAccessibility, ...props }) => {
+    return (_jsx(View, { ...props, accessible: accessible ?? false, importantForAccessibility: importantForAccessibility ?? 'auto', style: [styles.container, style], children: children }));
 };
 InputSlot.displayName = 'InputSlot';
 const styles = StyleSheet.create({

package/build/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
 import type { LinkProps } from './Link.props';
 export declare const LinkText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
 declare const Link: {
-    ({ children, icon, disabled, target, iconPosition, showIcon, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, icon, disabled, target, iconPosition, showIcon, textStyle, iconStyle, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Link;