@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

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 {};

package/build/utils/themeValueHelpers.test.js

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { camelCaseToPath, getNestedValue, resolveThemeKey, resolveThemeValue, resolveThemeValueWithFallback, } from './themeValueHelpers';
+describe('camelCaseToPath', () => {
+    it('splits a camelCase string into lowercase path segments', () => {
+        expect(camelCaseToPath('feedbackDangerSurfaceDefault')).toEqual([
+            'feedback',
+            'danger',
+            'surface',
+            'default',
+        ]);
+    });
+    it('returns a single segment for a plain lowercase string', () => {
+        expect(camelCaseToPath('feedback')).toEqual(['feedback']);
+    });
+});
+describe('getNestedValue', () => {
+    const obj = { feedback: { danger: { surface: { default: '#f00' } } } };
+    it('resolves a nested path', () => {
+        expect(getNestedValue(obj, ['feedback', 'danger', 'surface', 'default'])).toBe('#f00');
+    });
+    it('returns undefined for a missing path', () => {
+        expect(getNestedValue(obj, ['feedback', 'missing'])).toBeUndefined();
+    });
+    it('returns undefined when traversing through a non-object', () => {
+        expect(getNestedValue(obj, ['feedback', 'danger', 'surface', 'default', 'extra'])).toBeUndefined();
+    });
+});
+describe('resolveThemeValue', () => {
+    const mapping = {
+        primary: '#111',
+        feedback: { danger: { surface: { default: '#f00' } } },
+        broadbandBlue: { 100: '#00f' },
+    };
+    it('resolves a direct key', () => {
+        expect(resolveThemeValue('primary', mapping)).toBe('#111');
+    });
+    it('resolves a camelCase key to a nested path', () => {
+        expect(resolveThemeValue('feedbackDangerSurfaceDefault', mapping)).toBe('#f00');
+    });
+    it('resolves a numeric suffix to a shade', () => {
+        expect(resolveThemeValue('broadbandBlue100', mapping)).toBe('#00f');
+    });
+    it('returns the original value when nothing matches', () => {
+        expect(resolveThemeValue('unknownValue', mapping)).toBe('unknownValue');
+        expect(resolveThemeValue('broadbandBlue900', mapping)).toBe('broadbandBlue900');
+    });
+    it('passes through non-string values', () => {
+        expect(resolveThemeValue(42, mapping)).toBe(42);
+        expect(resolveThemeValue(undefined, mapping)).toBeUndefined();
+    });
+    it('passes through when the mapping is missing', () => {
+        expect(resolveThemeValue('primary', undefined)).toBe('primary');
+    });
+});
+describe('resolveThemeKey', () => {
+    const theme = { space: { 1: 4 }, semanticColor: { text: '#000' } };
+    it('resolves a simple key', () => {
+        expect(resolveThemeKey(theme, 'space')).toEqual({ 1: 4 });
+    });
+    it('resolves a dot-notation key', () => {
+        expect(resolveThemeKey(theme, 'semanticColor.text')).toBe('#000');
+    });
+    it('returns undefined for a missing dot-notation path', () => {
+        expect(resolveThemeKey(theme, 'semanticColor.missing.deeper')).toBeUndefined();
+    });
+});
+describe('resolveThemeValueWithFallback', () => {
+    const primary = { background: '#fff' };
+    const fallback = { legacyBlue: '#00f' };
+    it('resolves from the primary mapping first', () => {
+        expect(resolveThemeValueWithFallback('background', primary, fallback)).toBe('#fff');
+    });
+    it('falls back to the secondary mapping when the primary misses', () => {
+        expect(resolveThemeValueWithFallback('legacyBlue', primary, fallback)).toBe('#00f');
+    });
+    it('returns the original value when neither mapping resolves', () => {
+        expect(resolveThemeValueWithFallback('unknown', primary, fallback)).toBe('unknown');
+    });
+    it('returns the original value when no fallback is provided and the primary misses', () => {
+        expect(resolveThemeValueWithFallback('legacyBlue', primary)).toBe('legacyBlue');
+    });
+});

package/package.json

@@ -1,12 +1,27 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.34.5",
+  "version": "0.35.0",
   "description": "Utility Warehouse React Native UI library",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/utilitywarehouse/hearth.git"
+  },
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
   "type": "module",
   "sideEffects": false,
+  "bin": {
+    "hearth-react-native": "./scripts/init-ai.js"
+  },
+  "files": [
+    "build/**",
+    "scripts/init-ai.js",
+    "SKILL.md",
+    "public/llms/**",
+    "public/llms.txt"
+  ],
   "dependencies": {
     "@gluestack-ui/accordion": "1.0.14",
     "@gluestack-ui/alert": "0.1.15",
@@ -31,6 +46,7 @@
     "@gorhom/bottom-sheet": "5.2.6",
     "@storybook/addon-a11y": "^10.2.1",
     "@storybook/addon-docs": "^10.2.1",
+    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-vitest": "^10.2.1",
     "@storybook/react-native-web-vite": "^10.2.1",
     "@types/prismjs": "^1.26.5",
@@ -60,11 +76,11 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
+    "@utilitywarehouse/hearth-fonts": "^0.1.1",
     "@utilitywarehouse/hearth-react-icons": "^0.8.6",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.5",
-    "@utilitywarehouse/hearth-fonts": "^0.1.1",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.4",
-    "@utilitywarehouse/hearth-tokens": "^0.4.1"
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
+    "@utilitywarehouse/hearth-tokens": "^0.4.2"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",
@@ -83,6 +99,7 @@
     "generateColours": "node ./scripts/generateColours.js",
     "copyTokens": "node ./scripts/copyTokens.js",
     "copy:changelog": "node ./scripts/copyChangelog.js",
+    "generate:llm-docs": "rm -rf public && node scripts/generate-llm-docs.js && prettier --write \"public/**/*.md\"",
     "lint:fix": "TIMING=1 eslint --fix .",
     "lint": "TIMING=1 eslint .",
     "build": "tsc",
@@ -94,7 +111,6 @@
     "dev": "storybook dev -p 6006",
     "dev:docs": "storybook dev -p 6002 --no-open",
     "build:storybook": "storybook build",
-    "build:storybook:docs": "storybook build --docs",
-    "chromatic": "npx chromatic --project-token=chpt_cce0fb1ebd95d2a --build-script-name build:storybook"
+    "build:storybook:docs": "storybook build --docs"
   }
 }