@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

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;

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly item: {
+        readonly icon: {
+            readonly colorActive: "#af90de";
+        };
+    };
+    readonly checked: {
+        readonly icon: {
+            readonly color: "#101010";
+        };
+    };
+    readonly md: {
+        readonly height: 24;
+        readonly width: 24;
+    };
+    readonly sm: {
+        readonly height: 20;
+        readonly width: 20;
+    };
+    readonly inverted: "#fcfbf2";
+    readonly primary: "#ebebeb";
+};
+export default _default;

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

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    item: {
+        icon: {
+            colorActive: '#af90de',
+        },
+    },
+    checked: {
+        icon: {
+            color: '#101010',
+        },
+    },
+    md: {
+        height: 24,
+        width: 24,
+    },
+    sm: {
+        height: 20,
+        width: 20,
+    },
+    inverted: '#fcfbf2',
+    primary: '#ebebeb',
+};

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

@@ -16,12 +16,14 @@ export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
+export { default as chip } from './chip';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
+export { default as icon } from './icon';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
 export { default as illustrations } from './illustrations';

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

@@ -16,12 +16,14 @@ export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
+export { default as chip } from './chip';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
+export { default as icon } from './icon';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
 export { default as illustrations } from './illustrations';

package/build/tokens/components/light/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;

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly item: {
+        readonly icon: {
+            readonly colorActive: "#7a42c8";
+        };
+    };
+    readonly checked: {
+        readonly icon: {
+            readonly color: "#fcfbf2";
+        };
+    };
+    readonly md: {
+        readonly height: 24;
+        readonly width: 24;
+    };
+    readonly sm: {
+        readonly height: 20;
+        readonly width: 20;
+    };
+    readonly inverted: "#fcfbf2";
+    readonly primary: "#101010";
+};
+export default _default;

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

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    item: {
+        icon: {
+            colorActive: '#7a42c8',
+        },
+    },
+    checked: {
+        icon: {
+            color: '#fcfbf2',
+        },
+    },
+    md: {
+        height: 24,
+        width: 24,
+    },
+    sm: {
+        height: 20,
+        width: 20,
+    },
+    inverted: '#fcfbf2',
+    primary: '#101010',
+};

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

@@ -16,12 +16,14 @@ export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
+export { default as chip } from './chip';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
+export { default as icon } from './icon';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
 export { default as illustrations } from './illustrations';

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

@@ -16,12 +16,14 @@ export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
+export { default as chip } from './chip';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
+export { default as icon } from './icon';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
 export { default as illustrations } from './illustrations';

package/build/tokens/semantic-dark.d.ts

@@ -2,6 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly icon: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#ebebeb";
+    };
     readonly background: {
         readonly brand: "#442484";
         readonly loading: "#30302c";
@@ -73,10 +77,6 @@ declare const _default: {
         readonly inverted: "#fcfbf2";
         readonly primary: "#ebebeb";
     };
-    readonly icon: {
-        readonly inverted: "#fcfbf2";
-        readonly primary: "#ebebeb";
-    };
     readonly interactive: {
         readonly affirmative: {
             readonly border: {

package/build/tokens/semantic-dark.js

@@ -2,6 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    icon: {
+        inverted: '#fcfbf2',
+        primary: '#ebebeb',
+    },
     background: {
         brand: '#442484',
         loading: '#30302c',
@@ -73,10 +77,6 @@ export default {
         inverted: '#fcfbf2',
         primary: '#ebebeb',
     },
-    icon: {
-        inverted: '#fcfbf2',
-        primary: '#ebebeb',
-    },
     interactive: {
         affirmative: {
             border: {

package/build/tokens/semantic-light.d.ts

@@ -2,6 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly icon: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#101010";
+    };
     readonly background: {
         readonly brand: "#7a42c8";
         readonly loading: "#f1efe4";
@@ -73,10 +77,6 @@ declare const _default: {
         readonly inverted: "#fcfbf2";
         readonly primary: "#101010";
     };
-    readonly icon: {
-        readonly inverted: "#fcfbf2";
-        readonly primary: "#101010";
-    };
     readonly interactive: {
         readonly affirmative: {
             readonly border: {

package/build/tokens/semantic-light.js

@@ -2,6 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    icon: {
+        inverted: '#fcfbf2',
+        primary: '#101010',
+    },
     background: {
         brand: '#7a42c8',
         loading: '#f1efe4',
@@ -73,10 +77,6 @@ export default {
         inverted: '#fcfbf2',
         primary: '#101010',
     },
-    icon: {
-        inverted: '#fcfbf2',
-        primary: '#101010',
-    },
     interactive: {
         affirmative: {
             border: {

package/build/utils/formatThousands.test.d.ts

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

package/build/utils/formatThousands.test.js

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import formatThousands from './formatThousands';
+describe('formatThousands', () => {
+    it('returns the value unchanged when it is empty', () => {
+        expect(formatThousands('')).toBe('');
+    });
+    it('leaves values below one thousand unchanged', () => {
+        expect(formatThousands('999')).toBe('999');
+    });
+    it('inserts commas every three digits', () => {
+        expect(formatThousands('1000')).toBe('1,000');
+        expect(formatThousands('1234567')).toBe('1,234,567');
+    });
+    it('preserves the decimal part', () => {
+        expect(formatThousands('1234.56')).toBe('1,234.56');
+    });
+    it('preserves a leading minus sign', () => {
+        expect(formatThousands('-1234567.89')).toBe('-1,234,567.89');
+    });
+    it('reformats values that already contain commas', () => {
+        expect(formatThousands('1,23,4567')).toBe('1,234,567');
+    });
+    it('returns partial input while the user is still typing', () => {
+        expect(formatThousands('-')).toBe('-');
+        expect(formatThousands('.')).toBe('.');
+        expect(formatThousands('1234.')).toBe('1,234.');
+    });
+    it('returns non-numeric input unchanged', () => {
+        expect(formatThousands('12a4')).toBe('12a4');
+    });
+});

package/build/utils/getFlattenedColorValue.test.d.ts

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

package/build/utils/getFlattenedColorValue.test.js

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import getFlattenedColorValue from './getFlattenedColorValue';
+describe('getFlattenedColorValue', () => {
+    const colors = {
+        primary: '#111',
+        broadbandBlue: { 100: '#00f' },
+    };
+    it('returns undefined when no value is provided', () => {
+        expect(getFlattenedColorValue(undefined, colors)).toBeUndefined();
+        expect(getFlattenedColorValue('', colors)).toBeUndefined();
+    });
+    it('resolves a direct colour key', () => {
+        expect(getFlattenedColorValue('primary', colors)).toBe('#111');
+    });
+    it('resolves a shade suffix key', () => {
+        expect(getFlattenedColorValue('broadbandBlue100', colors)).toBe('#00f');
+    });
+    it('returns the raw value when it is not a theme colour', () => {
+        expect(getFlattenedColorValue('#123456', colors)).toBe('#123456');
+    });
+});

package/build/utils/getInitials.test.d.ts

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

package/build/utils/getInitials.test.js

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { getInitials } from './getInitials';
+describe('getInitials', () => {
+    it('returns undefined when no name is provided', () => {
+        expect(getInitials()).toBeUndefined();
+        expect(getInitials('')).toBeUndefined();
+    });
+    it('returns first and last initials for a two-part name', () => {
+        expect(getInitials('John Smith')).toBe('JS');
+    });
+    it('uses the first and last parts of a longer name', () => {
+        expect(getInitials('John Adam Smith')).toBe('JS');
+    });
+    it('returns a single initial for a single name', () => {
+        expect(getInitials('John')).toBe('J');
+    });
+    it('uppercases lowercase names', () => {
+        expect(getInitials('john smith')).toBe('JS');
+    });
+    it('handles unicode letters', () => {
+        expect(getInitials('Álvaro Ñunez')).toBe('ÁÑ');
+    });
+});

package/build/utils/hexWithOpacity.test.d.ts

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

package/build/utils/hexWithOpacity.test.js

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import hexWithOpacity from './hexWithOpacity';
+describe('hexWithOpacity', () => {
+    it('converts a hex colour with a leading hash to rgba', () => {
+        expect(hexWithOpacity('#FF0000', 0.5)).toBe('rgba(255, 0, 0, 0.5)');
+    });
+    it('converts a hex colour without a leading hash', () => {
+        expect(hexWithOpacity('00FF00', 1)).toBe('rgba(0, 255, 0, 1)');
+    });
+    it('accepts lowercase hex digits', () => {
+        expect(hexWithOpacity('#a1b2c3', 0.25)).toBe('rgba(161, 178, 195, 0.25)');
+    });
+    it('throws for shorthand hex colours', () => {
+        expect(() => hexWithOpacity('#fff', 1)).toThrow('Invalid hex color format');
+    });
+    it('throws for non-hex characters', () => {
+        expect(() => hexWithOpacity('#GGGGGG', 1)).toThrow('Invalid hex color format');
+    });
+    it('throws for empty input', () => {
+        expect(() => hexWithOpacity('', 1)).toThrow('Invalid hex color format');
+    });
+});

package/build/utils/isEqual.test.d.ts

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

package/build/utils/isEqual.test.js

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import isEqual from './isEqual';
+describe('isEqual', () => {
+    it('returns true for identical primitives', () => {
+        expect(isEqual(1, 1)).toBe(true);
+        expect(isEqual('a', 'a')).toBe(true);
+        expect(isEqual(true, true)).toBe(true);
+        expect(isEqual(null, null)).toBe(true);
+        expect(isEqual(undefined, undefined)).toBe(true);
+    });
+    it('returns false for different primitives', () => {
+        expect(isEqual(1, 2)).toBe(false);
+        expect(isEqual('a', 'b')).toBe(false);
+        expect(isEqual(1, '1')).toBe(false);
+    });
+    it('returns false when only one value is null', () => {
+        expect(isEqual(null, {})).toBe(false);
+        expect(isEqual({}, null)).toBe(false);
+    });
+    it('compares flat objects by value', () => {
+        expect(isEqual({ a: 1, b: 2 }, { a: 1, b: 2 })).toBe(true);
+        expect(isEqual({ a: 1 }, { a: 2 })).toBe(false);
+    });
+    it('returns false when objects have different keys', () => {
+        expect(isEqual({ a: 1 }, { b: 1 })).toBe(false);
+        expect(isEqual({ a: 1 }, { a: 1, b: 2 })).toBe(false);
+    });
+    it('compares nested objects deeply', () => {
+        expect(isEqual({ a: { b: { c: 1 } } }, { a: { b: { c: 1 } } })).toBe(true);
+        expect(isEqual({ a: { b: { c: 1 } } }, { a: { b: { c: 2 } } })).toBe(false);
+    });
+    it('compares arrays by element', () => {
+        expect(isEqual([1, 2, 3], [1, 2, 3])).toBe(true);
+        expect(isEqual([1, 2, 3], [1, 2, 4])).toBe(false);
+        expect(isEqual([1, 2], [1, 2, 3])).toBe(false);
+    });
+    it('distinguishes arrays from objects', () => {
+        expect(isEqual([], {})).toBe(false);
+    });
+    it('compares arrays of objects deeply', () => {
+        expect(isEqual([{ a: 1 }, { b: 2 }], [{ a: 1 }, { b: 2 }])).toBe(true);
+        expect(isEqual([{ a: 1 }], [{ a: 2 }])).toBe(false);
+    });
+});

package/build/utils/themeValueHelpers.test.d.ts

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