@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/build/components/RadioCard/RadioCard.js

@@ -15,10 +15,14 @@ const RadioCardComponent = createRadio({
     Icon: StyledRadioCardIcon,
     Label: StyledRadioCardLabel,
 });
-const RadioCardGroup = RadioCardComponent.Group;
+const RadioCardGroupComponent = RadioCardComponent.Group;
 const RadioCardIndicator = RadioCardComponent.Indicator;
 const RadioCardIcon = RadioCardComponent.Icon;
 const RadioCardLabel = RadioCardComponent.Label;
+const RadioCardGroup = ({ onChange, onValueChange, ...props }) => (_jsx(RadioCardGroupComponent, { ...props, onChange: (value) => {
+        onChange?.(value);
+        onValueChange?.(value);
+    } }));
 RadioCardGroup.displayName = 'RadioCardGroup';
 RadioCardIndicator.displayName = 'RadioCardIndicator';
 RadioCardIcon.displayName = 'RadioCardIcon';

package/build/components/RadioCard/RadioCardGroup.props.d.ts

@@ -4,6 +4,10 @@ import { GridProps } from '../Grid';
 import { Ref } from 'react';
 type RadioCardGroupBaseProps = {
     value?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string) => void;
     gap?: keyof typeof space;
     ref?: Ref<View>;

package/build/components/Rating/Rating.d.ts

@@ -1,6 +1,6 @@
 import type RatingProps from './Rating.props';
 declare const Rating: {
-    ({ variant, value, defaultValue, onChange, disabled, labels, rangeLabels, hideLabel, style, accessibilityLabel, ...props }: RatingProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, value, defaultValue, onChange, onValueChange, disabled, labels, rangeLabels, hideLabel, style, accessibilityLabel, ...props }: RatingProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Rating;

package/build/components/Rating/Rating.js

@@ -27,7 +27,7 @@ const DEFAULT_LABELS = {
     5: 'Great!',
 };
 const clampRating = (value) => Math.min(MAX_RATING, Math.max(0, Math.round(value)));
-const Rating = ({ variant = 'stars', value, defaultValue = 0, onChange, disabled = false, labels, rangeLabels = DEFAULT_RANGE_LABELS, hideLabel = false, style, accessibilityLabel, ...props }) => {
+const Rating = ({ variant = 'stars', value, defaultValue = 0, onChange, onValueChange, disabled = false, labels, rangeLabels = DEFAULT_RANGE_LABELS, hideLabel = false, style, accessibilityLabel, ...props }) => {
     const isControlled = value !== undefined;
     const [internalValue, setInternalValue] = useState(clampRating(defaultValue));
     useEffect(() => {
@@ -46,7 +46,8 @@ const Rating = ({ variant = 'stars', value, defaultValue = 0, onChange, disabled
             setInternalValue(nextValue);
         }
         onChange?.(nextValue);
-    }, [disabled, isControlled, onChange]);
+        onValueChange?.(nextValue);
+    }, [disabled, isControlled, onChange, onValueChange]);
     styles.useVariants({ disabled });
     const isEmojis = variant === 'emojis';
     const hasSelection = resolvedValue > 0;

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

@@ -10,6 +10,11 @@ export interface RatingProps extends Omit<ViewProps, 'children'> {
     /** Initial rating value when uncontrolled. */
     defaultValue?: RatingValue;
     /** Called when a rating is selected. */
+    onValueChange?: (value: RatingValue) => void;
+    /**
+     * Called when a rating is selected.
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: RatingValue) => void;
     /** Disables the rating input. */
     disabled?: boolean;

package/build/components/SegmentedControl/SegmentedControl.js

@@ -171,11 +171,11 @@ const styles = StyleSheet.create(theme => ({
             size: {
                 sm: {
                     height: 32,
-                    padding: 2,
+                    padding: theme.components.segmentedControl.group.padding,
                 },
                 md: {
                     height: theme.components.segmentedControl.group.height,
-                    padding: 2,
+                    padding: theme.components.segmentedControl.group.padding,
                 },
             },
             disabled: {

package/build/components/Select/Select.js

@@ -12,6 +12,7 @@ import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
 import { SelectContext } from './Select.context';
+import { filterOptionsByLabel } from './Select.utils';
 import SelectOption from './SelectOption';
 const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', testID, ...rest }) => {
     const formFieldContext = useFormFieldContext();
@@ -46,9 +47,7 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
         readonly: isReadonly,
         hasValue: !!selectedLabel || !!selectedOption?.label,
     });
-    const filteredOptions = searchable
-        ? options.filter(option => option.label.toLowerCase().includes(search.toLowerCase()))
-        : options;
+    const filteredOptions = searchable ? filterOptionsByLabel(options, search) : options;
     const handleClose = useCallback((index) => {
         if (index === -1) {
             setSearch('');

package/build/components/Select/Select.utils.d.ts

@@ -0,0 +1,2 @@
+import type { SelectOptionItemProps } from './Select.props';
+export declare const filterOptionsByLabel: (options: SelectOptionItemProps[], search: string) => SelectOptionItemProps[];

package/build/components/Select/Select.utils.js

@@ -0,0 +1 @@
+export const filterOptionsByLabel = (options, search) => options.filter(option => option.label.toLowerCase().includes(search.toLowerCase()));

package/build/components/Select/Select.utils.test.d.ts

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

package/build/components/Select/Select.utils.test.js

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { filterOptionsByLabel } from './Select.utils';
+const options = [
+    { label: 'Broadband', value: 'broadband' },
+    { label: 'Mobile', value: 'mobile' },
+    { label: 'Home Insurance', value: 'insurance' },
+];
+describe('filterOptionsByLabel', () => {
+    it('returns all options for an empty search', () => {
+        expect(filterOptionsByLabel(options, '')).toEqual(options);
+    });
+    it('filters by a case-insensitive label substring', () => {
+        expect(filterOptionsByLabel(options, 'mob')).toEqual([{ label: 'Mobile', value: 'mobile' }]);
+        expect(filterOptionsByLabel(options, 'INSUR')).toEqual([
+            { label: 'Home Insurance', value: 'insurance' },
+        ]);
+    });
+    it('returns an empty array when nothing matches', () => {
+        expect(filterOptionsByLabel(options, 'energy')).toEqual([]);
+    });
+});

package/build/components/StepperInput/StepperInput.js

@@ -7,68 +7,7 @@ import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import { InputComponent, InputField } from '../Input/Input';
 import StepperButton from './StepperButton';
-const normalizeValue = (value) => {
-    if (value === undefined || value === null || value === '') {
-        return '';
-    }
-    return `${value}`;
-};
-const getDecimalPlaces = (value) => {
-    if (value === undefined || value === null || value === '') {
-        return 0;
-    }
-    const normalizedValue = `${value}`;
-    const decimalPart = normalizedValue.split('.')[1];
-    return decimalPart ? decimalPart.length : 0;
-};
-const formatNumber = (value, precision) => {
-    if (precision <= 0) {
-        return `${Math.trunc(value)}`;
-    }
-    return value
-        .toFixed(precision)
-        .replace(/\.0+$/, '')
-        .replace(/(\.\d*?)0+$/, '$1');
-};
-const sanitizeValue = (value, allowNegative, allowDecimal) => {
-    const strippedValue = value.replace(allowDecimal ? /[^\d,.-]/g : allowNegative ? /[^\d-]/g : /\D/g, '');
-    const normalizedValue = allowDecimal ? strippedValue.replace(/,/g, '.') : strippedValue;
-    if (!allowNegative) {
-        const unsignedValue = normalizedValue.replace(/-/g, '');
-        if (!allowDecimal) {
-            return unsignedValue;
-        }
-        const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
-        const decimalPart = decimalParts.join('');
-        return decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
-    }
-    const hasLeadingMinus = normalizedValue.startsWith('-');
-    const unsignedValue = normalizedValue.replace(/-/g, '');
-    if (!allowDecimal) {
-        return `${hasLeadingMinus ? '-' : ''}${unsignedValue}`;
-    }
-    const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
-    const decimalPart = decimalParts.join('');
-    const composedValue = decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
-    return `${hasLeadingMinus ? '-' : ''}${composedValue}`;
-};
-const parseValue = (value) => {
-    if (!value || value === '-' || value === '.' || value === '-.') {
-        return null;
-    }
-    const parsedValue = Number(value);
-    return Number.isNaN(parsedValue) ? null : parsedValue;
-};
-const clampValue = (value, min, max) => {
-    let nextValue = value;
-    if (typeof min === 'number') {
-        nextValue = Math.max(min, nextValue);
-    }
-    if (typeof max === 'number') {
-        nextValue = Math.min(max, nextValue);
-    }
-    return nextValue;
-};
+import { clampValue, formatNumber, getDecimalPlaces, normalizeValue, parseValue, sanitizeValue, } from './StepperInput.utils';
 const StepperInput = ({ value, defaultValue, onChangeText, onChangeValue, min, max, step = 1, focusInputOnStepPress = false, validationStatus = 'initial', disabled = false, readonly = false, focused = false, inBottomSheet = false, required = true, label, labelVariant = 'body', helperText, helperIcon, validText, invalidText, style, decrementAccessibilityLabel = 'Decrease value', incrementAccessibilityLabel = 'Increase value', onFocus, onBlur, ref, ...props }) => {
     const inputRef = useRef(null);
     const isControlled = value !== undefined;

package/build/components/StepperInput/StepperInput.utils.d.ts

@@ -0,0 +1,6 @@
+export declare const normalizeValue: (value?: string | number) => string;
+export declare const getDecimalPlaces: (value?: number | string) => number;
+export declare const formatNumber: (value: number, precision: number) => string;
+export declare const sanitizeValue: (value: string, allowNegative: boolean, allowDecimal: boolean) => string;
+export declare const parseValue: (value: string) => number | null;
+export declare const clampValue: (value: number, min?: number, max?: number) => number;

package/build/components/StepperInput/StepperInput.utils.js

@@ -0,0 +1,62 @@
+export const normalizeValue = (value) => {
+    if (value === undefined || value === null || value === '') {
+        return '';
+    }
+    return `${value}`;
+};
+export const getDecimalPlaces = (value) => {
+    if (value === undefined || value === null || value === '') {
+        return 0;
+    }
+    const normalizedValue = `${value}`;
+    const decimalPart = normalizedValue.split('.')[1];
+    return decimalPart ? decimalPart.length : 0;
+};
+export const formatNumber = (value, precision) => {
+    if (precision <= 0) {
+        return `${Math.trunc(value)}`;
+    }
+    return value
+        .toFixed(precision)
+        .replace(/\.0+$/, '')
+        .replace(/(\.\d*?)0+$/, '$1');
+};
+export const sanitizeValue = (value, allowNegative, allowDecimal) => {
+    const strippedValue = value.replace(allowDecimal ? /[^\d,.-]/g : allowNegative ? /[^\d-]/g : /\D/g, '');
+    const normalizedValue = allowDecimal ? strippedValue.replace(/,/g, '.') : strippedValue;
+    if (!allowNegative) {
+        const unsignedValue = normalizedValue.replace(/-/g, '');
+        if (!allowDecimal) {
+            return unsignedValue;
+        }
+        const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
+        const decimalPart = decimalParts.join('');
+        return decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
+    }
+    const hasLeadingMinus = normalizedValue.startsWith('-');
+    const unsignedValue = normalizedValue.replace(/-/g, '');
+    if (!allowDecimal) {
+        return `${hasLeadingMinus ? '-' : ''}${unsignedValue}`;
+    }
+    const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
+    const decimalPart = decimalParts.join('');
+    const composedValue = decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
+    return `${hasLeadingMinus ? '-' : ''}${composedValue}`;
+};
+export const parseValue = (value) => {
+    if (!value || value === '-' || value === '.' || value === '-.') {
+        return null;
+    }
+    const parsedValue = Number(value);
+    return Number.isNaN(parsedValue) ? null : parsedValue;
+};
+export const clampValue = (value, min, max) => {
+    let nextValue = value;
+    if (typeof min === 'number') {
+        nextValue = Math.max(min, nextValue);
+    }
+    if (typeof max === 'number') {
+        nextValue = Math.min(max, nextValue);
+    }
+    return nextValue;
+};

package/build/components/StepperInput/StepperInput.utils.test.d.ts

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

package/build/components/StepperInput/StepperInput.utils.test.js

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { clampValue, formatNumber, getDecimalPlaces, normalizeValue, parseValue, sanitizeValue, } from './StepperInput.utils';
+describe('normalizeValue', () => {
+    it('returns an empty string for missing values', () => {
+        expect(normalizeValue()).toBe('');
+        expect(normalizeValue('')).toBe('');
+    });
+    it('stringifies numbers', () => {
+        expect(normalizeValue(5)).toBe('5');
+        expect(normalizeValue(-2.5)).toBe('-2.5');
+        expect(normalizeValue(0)).toBe('0');
+    });
+    it('passes strings through', () => {
+        expect(normalizeValue('12')).toBe('12');
+    });
+});
+describe('getDecimalPlaces', () => {
+    it('returns 0 for missing values', () => {
+        expect(getDecimalPlaces()).toBe(0);
+        expect(getDecimalPlaces('')).toBe(0);
+    });
+    it('returns 0 for integers', () => {
+        expect(getDecimalPlaces(5)).toBe(0);
+        expect(getDecimalPlaces('42')).toBe(0);
+    });
+    it('counts decimal places', () => {
+        expect(getDecimalPlaces(1.5)).toBe(1);
+        expect(getDecimalPlaces('3.141')).toBe(3);
+        expect(getDecimalPlaces('2.')).toBe(0);
+    });
+});
+describe('formatNumber', () => {
+    it('truncates when precision is zero', () => {
+        expect(formatNumber(3.7, 0)).toBe('3');
+        expect(formatNumber(-3.7, 0)).toBe('-3');
+    });
+    it('formats to the given precision', () => {
+        expect(formatNumber(1.25, 2)).toBe('1.25');
+    });
+    it('trims trailing zeros from the decimal part', () => {
+        expect(formatNumber(1.5, 2)).toBe('1.5');
+        expect(formatNumber(2, 2)).toBe('2');
+    });
+});
+describe('sanitizeValue', () => {
+    it('strips non-digits when negatives and decimals are not allowed', () => {
+        expect(sanitizeValue('a1b2-3.4', false, false)).toBe('1234');
+    });
+    it('keeps a leading minus when negatives are allowed', () => {
+        expect(sanitizeValue('-12', true, false)).toBe('-12');
+        expect(sanitizeValue('1-2', true, false)).toBe('12');
+    });
+    it('drops the minus when negatives are not allowed', () => {
+        expect(sanitizeValue('-12.5', false, true)).toBe('12.5');
+    });
+    it('keeps only the first decimal separator', () => {
+        expect(sanitizeValue('1.2.3', false, true)).toBe('1.23');
+    });
+    it('converts commas to decimal points', () => {
+        expect(sanitizeValue('1,5', false, true)).toBe('1.5');
+    });
+    it('handles negatives with decimals', () => {
+        expect(sanitizeValue('-1.25', true, true)).toBe('-1.25');
+    });
+    it('preserves a bare trailing decimal point while typing', () => {
+        expect(sanitizeValue('12.', false, true)).toBe('12.');
+    });
+});
+describe('parseValue', () => {
+    it('returns null for incomplete input', () => {
+        expect(parseValue('')).toBeNull();
+        expect(parseValue('-')).toBeNull();
+        expect(parseValue('.')).toBeNull();
+        expect(parseValue('-.')).toBeNull();
+    });
+    it('parses numeric strings', () => {
+        expect(parseValue('12')).toBe(12);
+        expect(parseValue('-1.5')).toBe(-1.5);
+        expect(parseValue('0')).toBe(0);
+    });
+    it('returns null for non-numeric strings', () => {
+        expect(parseValue('1.2.3')).toBeNull();
+    });
+});
+describe('clampValue', () => {
+    it('returns the value when no bounds are set', () => {
+        expect(clampValue(5)).toBe(5);
+    });
+    it('clamps to the minimum', () => {
+        expect(clampValue(2, 5)).toBe(5);
+        expect(clampValue(-10, 0)).toBe(0);
+    });
+    it('clamps to the maximum', () => {
+        expect(clampValue(20, undefined, 10)).toBe(10);
+    });
+    it('leaves in-range values unchanged', () => {
+        expect(clampValue(7, 0, 10)).toBe(7);
+    });
+});

package/build/components/Switch/Switch.js

@@ -7,14 +7,16 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
-const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
+const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'md', ...accessibilityProps }) => {
     const { components } = useTheme();
     const theme = useAnimatedTheme();
-    const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
-    const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
+    // 'small' | 'medium' are deprecated aliases for 'sm' | 'md'
+    const resolvedSize = size === 'small' ? 'sm' : size === 'medium' ? 'md' : size;
+    const SWITCH_WIDTH = resolvedSize === 'md' ? components.switch.md.width : components.switch.sm.width;
+    const THUMB_SIZE = resolvedSize === 'md' ? components.switch.md.circle.size : components.switch.sm.circle.size;
     const PADDING = components.switch.padding;
     const isReducedMotion = useReducedMotion();
-    styles.useVariants({ size, disabled, value });
+    styles.useVariants({ size: resolvedSize, disabled, value });
     const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
     const progress = useSharedValue(value ? 1 : 0);
     const animatedThumbStyle = useAnimatedStyle(() => ({
@@ -79,13 +81,13 @@ const styles = StyleSheet.create(theme => ({
         justifyContent: 'center',
         variants: {
             size: {
-                medium: {
+                md: {
                     width: theme.components.switch.md.width,
                     height: theme.components.switch.md.height,
                     borderRadius: theme.components.switch.radius,
                     padding: theme.components.switch.padding,
                 },
-                small: {
+                sm: {
                     width: theme.components.switch.sm.width,
                     height: theme.components.switch.sm.height,
                     borderRadius: theme.components.switch.radius,
@@ -113,12 +115,12 @@ const styles = StyleSheet.create(theme => ({
         justifyContent: 'center',
         variants: {
             size: {
-                medium: {
+                md: {
                     width: theme.components.switch.md.circle.size,
                     height: theme.components.switch.md.circle.size,
                     borderRadius: theme.components.switch.radius,
                 },
-                small: {
+                sm: {
                     width: theme.components.switch.sm.circle.size,
                     height: theme.components.switch.sm.circle.size,
                     borderRadius: theme.components.switch.radius,

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

@@ -1,8 +1,18 @@
 import type { AccessibilityProps, PressableProps } from 'react-native';
+type SwitchSize = 'sm' | 'md';
+/**
+ * @deprecated Use `'sm' | 'md'` instead. These values will be removed in a
+ * future release.
+ */
+type DeprecatedSwitchSize = 'small' | 'medium';
 interface SwitchProps extends PressableProps, AccessibilityProps {
     value: boolean;
     onValueChange?: (value: boolean) => void;
     disabled?: boolean;
-    size?: 'small' | 'medium';
+    /**
+     * The size of the switch.
+     * @default 'md'
+     */
+    size?: SwitchSize | DeprecatedSwitchSize;
 }
 export default SwitchProps;

package/build/components/Switch/Switch.web.js

@@ -7,13 +7,15 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 const AnimatedView = Animated.createAnimatedComponent(View);
-const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
+const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'md', ...accessibilityProps }) => {
     const { components, color } = useTheme();
-    const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
-    const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
+    // 'small' | 'medium' are deprecated aliases for 'sm' | 'md'
+    const resolvedSize = size === 'small' ? 'sm' : size === 'medium' ? 'md' : size;
+    const SWITCH_WIDTH = resolvedSize === 'md' ? components.switch.md.width : components.switch.sm.width;
+    const THUMB_SIZE = resolvedSize === 'md' ? components.switch.md.circle.size : components.switch.sm.circle.size;
     const PADDING = components.switch.padding;
     const isReducedMotion = useReducedMotion();
-    styles.useVariants({ size, disabled, value });
+    styles.useVariants({ size: resolvedSize, disabled, value });
     const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
     const progress = useSharedValue(value ? 1 : 0);
     const animatedThumbStyle = useAnimatedStyle(() => ({
@@ -78,13 +80,13 @@ const styles = StyleSheet.create(theme => ({
         justifyContent: 'center',
         variants: {
             size: {
-                medium: {
+                md: {
                     width: theme.components.switch.md.width,
                     height: theme.components.switch.md.height,
                     borderRadius: theme.components.switch.radius,
                     padding: theme.components.switch.padding,
                 },
-                small: {
+                sm: {
                     width: theme.components.switch.sm.width,
                     height: theme.components.switch.sm.height,
                     borderRadius: theme.components.switch.radius,
@@ -112,12 +114,12 @@ const styles = StyleSheet.create(theme => ({
         justifyContent: 'center',
         variants: {
             size: {
-                medium: {
+                md: {
                     width: theme.components.switch.md.circle.size,
                     height: theme.components.switch.md.circle.size,
                     borderRadius: theme.components.switch.radius,
                 },
-                small: {
+                sm: {
                     width: theme.components.switch.sm.circle.size,
                     height: theme.components.switch.sm.circle.size,
                     borderRadius: theme.components.switch.radius,

package/build/components/TimePickerInput/TimePickerInput.js

@@ -9,16 +9,9 @@ import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
 import { TimePicker } from '../TimePicker';
 import { UnstyledIconButton } from '../UnstyledIconButton';
+import { DEFAULT_FORMAT_12, DEFAULT_FORMAT_24, maskDefaultFormat } from './TimePickerInput.utils';
 import TimePickerInputDoneButton from './TimePickerInputDoneButton';
 dayjs.extend(customParseFormat);
-const DEFAULT_FORMAT_24 = 'HH:mm';
-const DEFAULT_FORMAT_12 = 'hh:mm A';
-const maskDefaultFormat = (value) => {
-    const digitsOnly = value.replace(/\D/g, '').slice(0, 4);
-    const hours = digitsOnly.slice(0, 2);
-    const minutes = digitsOnly.slice(2, 4);
-    return [hours, minutes].filter(Boolean).join(':');
-};
 const TimePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder = '--:--', inBottomSheet = false, format, openButtonLabel = 'Open time picker', autoCloseOnSelect = true, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const isDisabled = formFieldContext?.disabled ?? disabled;

package/build/components/TimePickerInput/TimePickerInput.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_FORMAT_24 = "HH:mm";
+export declare const DEFAULT_FORMAT_12 = "hh:mm A";
+export declare const maskDefaultFormat: (value: string) => string;

package/build/components/TimePickerInput/TimePickerInput.utils.js

@@ -0,0 +1,8 @@
+export const DEFAULT_FORMAT_24 = 'HH:mm';
+export const DEFAULT_FORMAT_12 = 'hh:mm A';
+export const maskDefaultFormat = (value) => {
+    const digitsOnly = value.replace(/\D/g, '').slice(0, 4);
+    const hours = digitsOnly.slice(0, 2);
+    const minutes = digitsOnly.slice(2, 4);
+    return [hours, minutes].filter(Boolean).join(':');
+};

package/build/components/TimePickerInput/TimePickerInput.utils.test.d.ts

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

package/build/components/TimePickerInput/TimePickerInput.utils.test.js

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { maskDefaultFormat } from './TimePickerInput.utils';
+describe('maskDefaultFormat', () => {
+    it('returns an empty string for empty input', () => {
+        expect(maskDefaultFormat('')).toBe('');
+    });
+    it('masks progressively while typing', () => {
+        expect(maskDefaultFormat('1')).toBe('1');
+        expect(maskDefaultFormat('14')).toBe('14');
+        expect(maskDefaultFormat('143')).toBe('14:3');
+        expect(maskDefaultFormat('1430')).toBe('14:30');
+    });
+    it('strips non-digit characters before masking', () => {
+        expect(maskDefaultFormat('14:30')).toBe('14:30');
+        expect(maskDefaultFormat('1a4b30')).toBe('14:30');
+    });
+    it('truncates input beyond four digits', () => {
+        expect(maskDefaultFormat('143059')).toBe('14:30');
+    });
+});

package/build/components/Toast/ToastItem.js

@@ -106,8 +106,8 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.toast.gap,
     },
     iconWrap: {
-        width: 24,
-        height: 24,
+        width: theme.components.icon.md.width,
+        height: theme.components.icon.md.height,
         justifyContent: 'center',
         alignSelf: 'flex-start',
         alignItems: 'flex-start',

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -13,7 +13,7 @@ const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props })
             onToggle(!toggled);
         }
     };
-    return (_jsx(Pressable, { ...props, style: [styles.container, props.style], onPress: handlePress, children: children }));
+    return (_jsx(Pressable, { ...props, accessibilityState: { selected: toggled, ...props.accessibilityState }, style: [styles.container, props.style], onPress: handlePress, children: children }));
 };
 ButtonRoot.displayName = 'ButtonRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/ToggleButtonCard/ToggleButtonCard.d.ts

@@ -1,5 +1,9 @@
 import ToggleButtonCardProps from './ToggleButtonCard.props';
-declare const ToggleButtonCardGroup: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("./ToggleButtonCardGroup.props").default> & (import("./ToggleButtonCardGroup.props").default & import("@gluestack-ui/radio/lib/typescript/types").IRadioGroupProps)>;
+import ToggleButtonCardGroupProps from './ToggleButtonCardGroup.props';
+declare const ToggleButtonCardGroup: {
+    ({ onChange, onValueChange, ...props }: ToggleButtonCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const ToggleButtonCard: {
     ({ children, contentStyle, ...props }: ToggleButtonCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/ToggleButtonCard/ToggleButtonCard.js

@@ -11,7 +11,11 @@ const ToggleButtonCardComponent = createRadio({
     Icon: () => null,
     Label: () => null,
 });
-const ToggleButtonCardGroup = ToggleButtonCardComponent.Group;
+const ToggleButtonCardGroupComponent = ToggleButtonCardComponent.Group;
+const ToggleButtonCardGroup = ({ onChange, onValueChange, ...props }) => (_jsx(ToggleButtonCardGroupComponent, { ...props, onChange: (value) => {
+        onChange?.(value);
+        onValueChange?.(value);
+    } }));
 ToggleButtonCardGroup.displayName = 'ToggleButtonCardGroup';
 const ToggleButtonCard = ({ children, contentStyle, ...props }) => {
     const { computedStyles } = useStyleProps(props);

package/build/components/ToggleButtonCard/ToggleButtonCardGroup.props.d.ts

@@ -3,6 +3,10 @@ import { space } from '../../tokens';
 import { GridProps } from '../Grid';
 type ToggleButtonCardGroupBaseProps = {
     value?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string) => void;
     gap?: keyof typeof space;
 } & ViewProps;

package/build/tokens/components/dark/chip.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly borderRadius: 9999;
+    readonly borderWidth: 1;
+    readonly gap: 4;
+    readonly group: {
+        readonly gap: 8;
+    };
+    readonly paddingHorizontal: 12;
+    readonly paddingVertical: 2;
+};
+export default _default;