@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.0

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/UnstyledIconButton/UnstyledIconButton.js

@@ -17,10 +17,10 @@ UnstyledIconButtonSpinner.displayName = 'UnstyledIconButtonSpinner';
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
 const UnstyledIconButton = ({ icon, disabled = false, pressed, size = 'md', inverted = false, iconStyle, ...props }) => {
     const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
-    const { loading } = props;
+    const { loading, accessibilityRole = 'button', accessible = true, focusable = true, importantForAccessibility = 'yes', ...restProps } = props;
     const isLoading = loading ?? groupLoading;
     const buttonDisabled = isLoading || (disabled ?? groupDisabled);
-    return (_jsx(UnstyledIconButtonComponent, { ...props, size: size, inverted: inverted, isDisabled: buttonDisabled, isPressed: pressed, icon: icon, children: loading ? (_jsx(UnstyledIconButtonSpinner, {})) : (_jsx(UnstyledIconButtonIcon, { as: icon, style: iconStyle })) }));
+    return (_jsx(UnstyledIconButtonComponent, { ...restProps, size: size, inverted: inverted, isDisabled: buttonDisabled, isPressed: pressed, accessibilityRole: accessibilityRole, accessible: accessible, focusable: focusable, importantForAccessibility: importantForAccessibility, icon: icon, children: loading ? (_jsx(UnstyledIconButtonSpinner, {})) : (_jsx(UnstyledIconButtonIcon, { as: icon, style: iconStyle })) }));
 };
 UnstyledIconButton.displayName = 'UnstyledIconButton';
 export default UnstyledIconButton;

package/build/components/UnstyledIconButton/UnstyledIconButtonRoot.js

@@ -7,7 +7,7 @@ const UnstyledIconButtonRoot = ({ size, inverted, states, ...props }) => {
     const { active, disabled } = states || {};
     styles.useVariants({ disabled, size });
     const value = useMemo(() => ({ disabled, active, inverted, size }), [disabled, active, inverted, size]);
-    return (_jsx(UnstyledIconButtonContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, props.style] }) }));
+    return (_jsx(UnstyledIconButtonContext.Provider, { value: value, children: _jsx(Pressable, { ...props, accessibilityState: { disabled: !!disabled, ...props.accessibilityState }, style: [styles.container, props.style] }) }));
 };
 UnstyledIconButtonRoot.displayName = 'UnstyledIconButtonRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/index.d.ts

@@ -9,6 +9,8 @@ export * from './Card';
 export * from './Center';
 export * from './Checkbox';
 export * from './CurrencyInput';
+export * from './DatePicker';
+export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';

package/build/components/index.js

@@ -10,6 +10,8 @@ export * from './Card';
 export * from './Center';
 export * from './Checkbox';
 export * from './CurrencyInput';
+export * from './DatePicker';
+export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';

package/build/hooks/index.d.ts

@@ -1,6 +1,7 @@
-export { default as useColorMode } from './useColorMode';
 export { default as useBreakpointValue } from './useBreakpointValue';
-export { default as useTheme } from './useTheme';
+export { default as useColorMode } from './useColorMode';
 export { default as useMedia } from './useMedia';
-export { default as useToken } from './useToken';
+export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';
+export { default as useTheme } from './useTheme';
+export { default as useToken } from './useToken';

package/build/hooks/index.js

@@ -1,6 +1,7 @@
-export { default as useColorMode } from './useColorMode';
 export { default as useBreakpointValue } from './useBreakpointValue';
-export { default as useTheme } from './useTheme';
+export { default as useColorMode } from './useColorMode';
 export { default as useMedia } from './useMedia';
-export { default as useToken } from './useToken';
+export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';
+export { default as useTheme } from './useTheme';
+export { default as useToken } from './useToken';

package/build/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: (value: any) => null;

package/build/hooks/usePrevious.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export const usePrevious = (value) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};

package/build/hooks/useTheme.d.ts

@@ -1,2 +1,3 @@
-declare const useTheme: () => import("react-native-unistyles/lib/typescript/src/types").UnistylesTheme;
+import { AppThemes } from '../types';
+declare const useTheme: () => AppThemes["light"] | AppThemes["dark"];
 export default useTheme;

package/build/hooks/useTheme.js

@@ -1,6 +1,6 @@
-import { UnistylesRuntime } from 'react-native-unistyles';
+import { useUnistyles } from 'react-native-unistyles';
 const useTheme = () => {
-    const theme = UnistylesRuntime.getTheme();
+    const { theme } = useUnistyles();
     return theme;
 };
 export default useTheme;

package/build/tokens/components/dark/date-picker.d.ts

@@ -20,6 +20,7 @@ declare const _default: {
         readonly item: {
             readonly borderRadius: 8;
             readonly minWidth: 32;
+            readonly rangeBackground: "#191919";
             readonly roundelBackgroundColorInverted: "#fcfbf2";
             readonly roundelHeight: 6;
             readonly roundelWidth: 6;

package/build/tokens/components/dark/date-picker.js

@@ -20,6 +20,7 @@ export default {
         item: {
             borderRadius: 8,
             minWidth: 32,
+            rangeBackground: '#191919',
             roundelBackgroundColorInverted: '#fcfbf2',
             roundelHeight: 6,
             roundelWidth: 6,

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

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly mode: "dark";
+};
+export default _default;

package/build/tokens/components/dark/illustrations.js

@@ -0,0 +1,6 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    mode: 'dark',
+};

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

@@ -21,6 +21,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';

package/build/tokens/components/dark/index.js

@@ -21,6 +21,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';

package/build/tokens/components/dark/segmented-control.d.ts

@@ -2,10 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly borderRadius: 6;
+    readonly borderRadius: 9999;
     readonly gap: 6;
     readonly group: {
-        readonly borderRadius: 8;
+        readonly borderRadius: 9999;
         readonly borderWidth: 1;
         readonly gap: 4;
         readonly height: 48;

package/build/tokens/components/dark/segmented-control.js

@@ -2,10 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    borderRadius: 6,
+    borderRadius: 9999,
     gap: 6,
     group: {
-        borderRadius: 8,
+        borderRadius: 9999,
         borderWidth: 1,
         gap: 4,
         height: 48,

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

@@ -13,6 +13,9 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
+        readonly neutral: {
+            readonly backgroundColor: "#30302c";
+        };
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

package/build/tokens/components/dark/table.js

@@ -13,6 +13,9 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
+        neutral: {
+            backgroundColor: '#30302c',
+        },
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/tokens/components/light/date-picker.d.ts

@@ -20,6 +20,7 @@ declare const _default: {
         readonly item: {
             readonly borderRadius: 8;
             readonly minWidth: 32;
+            readonly rangeBackground: "#f7f7f7";
             readonly roundelBackgroundColorInverted: "#fcfbf2";
             readonly roundelHeight: 6;
             readonly roundelWidth: 6;

package/build/tokens/components/light/date-picker.js

@@ -20,6 +20,7 @@ export default {
         item: {
             borderRadius: 8,
             minWidth: 32,
+            rangeBackground: '#f7f7f7',
             roundelBackgroundColorInverted: '#fcfbf2',
             roundelHeight: 6,
             roundelWidth: 6,

package/build/tokens/components/light/illustrations.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly mode: "light";
+};
+export default _default;

package/build/tokens/components/light/illustrations.js

@@ -0,0 +1,6 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    mode: 'light',
+};

package/build/tokens/components/light/index.d.ts

@@ -21,6 +21,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';

package/build/tokens/components/light/index.js

@@ -21,6 +21,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';

package/build/tokens/components/light/segmented-control.d.ts

@@ -2,10 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly borderRadius: 6;
+    readonly borderRadius: 9999;
     readonly gap: 6;
     readonly group: {
-        readonly borderRadius: 8;
+        readonly borderRadius: 9999;
         readonly borderWidth: 1;
         readonly gap: 4;
         readonly height: 48;

package/build/tokens/components/light/segmented-control.js

@@ -2,10 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    borderRadius: 6,
+    borderRadius: 9999,
     gap: 6,
     group: {
-        borderRadius: 8,
+        borderRadius: 9999,
         borderWidth: 1,
         gap: 4,
         height: 48,

package/build/tokens/components/light/table.d.ts

@@ -13,6 +13,9 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
+        readonly neutral: {
+            readonly backgroundColor: "#f1efe4";
+        };
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

package/build/tokens/components/light/table.js

@@ -13,6 +13,9 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
+        neutral: {
+            backgroundColor: '#f1efe4',
+        },
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/utils/index.d.ts

@@ -3,4 +3,5 @@ export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
+export { default as isEqual } from './isEqual';
 export * from './styleUtils';

package/build/utils/index.js

@@ -3,4 +3,5 @@ export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
+export { default as isEqual } from './isEqual';
 export * from './styleUtils';

package/build/utils/isEqual.d.ts

@@ -0,0 +1,2 @@
+declare const isEqual: (a: any, b: any) => boolean;
+export default isEqual;

package/build/utils/isEqual.js

@@ -0,0 +1,29 @@
+const isEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (typeof a !== typeof b)
+        return false;
+    if (typeof a !== 'object' || a === null || b === null)
+        return false;
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    if (Array.isArray(a)) {
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; i++) {
+            if (!isEqual(a[i], b[i]))
+                return false;
+        }
+        return true;
+    }
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    for (const key of keysA) {
+        if (!keysB.includes(key) || !isEqual(a[key], b[key]))
+            return false;
+    }
+    return true;
+};
+export default isEqual;

package/chromatic.config.json

@@ -0,0 +1,6 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:68e3ad5c6e80b57678cad6c6",
+  "storybookBaseDir": "packages/react-native",
+  "zip": true
+}