@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.0

package/build/tokens/semantic-dark.js

@@ -15,56 +15,56 @@ export default {
         danger: {
             border: '#ff7964',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#ff7964',
             },
             surface: {
-                default: '#de2612',
-                subtle: '#521a16',
+                default: '#ff634a',
+                subtle: '#ffa89d',
             },
         },
         functional: {
             border: '#b2afae',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#b2afae',
             },
             surface: {
-                default: '#888888',
-                subtle: '#232323',
+                default: '#919191',
+                subtle: '#d3d3d3',
             },
         },
         info: {
             border: '#6bb0ff',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#6bb0ff',
             },
             surface: {
-                default: '#1c6cd4',
-                subtle: '#042455',
+                default: '#6bb0ff',
+                subtle: '#bcddff',
             },
         },
         positive: {
             border: '#58ca93',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#58ca93',
             },
             surface: {
-                default: '#0f834a',
-                subtle: '#033d21',
+                default: '#36bf7d',
+                subtle: '#a2e2c3',
             },
         },
         warning: {
             border: '#ff9639',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#ff9639',
             },
             surface: {
-                default: '#cb5b00',
-                subtle: '#6b2d00',
+                default: '#ff8010',
+                subtle: '#ffcca8',
             },
         },
     },
@@ -136,14 +136,14 @@ export default {
         },
         functional: {
             border: {
+                inverted: '#f7f7f7',
                 strong: '#ebebeb',
                 subtle: '#ebebeb',
-                inverted: '#f7f7f7',
             },
             foreground: {
+                inverted: '#f7f7f7',
                 strong: '#fcfbf2',
                 subtle: '#ebebeb',
-                inverted: '#f7f7f7',
             },
             surface: {
                 strong: {
@@ -155,8 +155,8 @@ export default {
                     active: '#4c4c4c',
                     hover: '#3a3837',
                     inverted: {
-                        active: '#d3d3d3',
-                        hover: '#ebebeb',
+                        active: '#3a3837',
+                        hover: '#3f3f3f',
                     },
                 },
             },
@@ -244,6 +244,8 @@ export default {
         },
     },
     text: {
+        affirmative: '#58ca93',
+        brand: '#af90de',
         inverted: '#191917',
         primary: '#ebebeb',
         secondary: '#b2afae',

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

@@ -15,55 +15,55 @@ declare const _default: {
         readonly danger: {
             readonly border: "#de2612";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#de2612";
             };
             readonly surface: {
-                readonly default: "#de2612";
-                readonly subtle: "#ffccc5";
+                readonly default: "#ff634a";
+                readonly subtle: "#ffa89d";
             };
         };
         readonly functional: {
-            readonly border: "#888888";
+            readonly border: "#5b5b5b";
             readonly foreground: {
-                readonly default: "#fcfbf2";
-                readonly subtle: "#888888";
+                readonly default: "#101010";
+                readonly subtle: "#5b5b5b";
             };
             readonly surface: {
-                readonly default: "#888888";
+                readonly default: "#919191";
                 readonly subtle: "#d3d3d3";
             };
         };
         readonly info: {
             readonly border: "#1c6cd4";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#1c6cd4";
             };
             readonly surface: {
-                readonly default: "#1c6cd4";
+                readonly default: "#6bb0ff";
                 readonly subtle: "#bcddff";
             };
         };
         readonly positive: {
             readonly border: "#0f834a";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#0f834a";
             };
             readonly surface: {
-                readonly default: "#0f834a";
+                readonly default: "#36bf7d";
                 readonly subtle: "#a2e2c3";
             };
         };
         readonly warning: {
             readonly border: "#be5400";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#be5400";
             };
             readonly surface: {
-                readonly default: "#be5400";
+                readonly default: "#ff8010";
                 readonly subtle: "#ffcca8";
             };
         };
@@ -136,14 +136,14 @@ declare const _default: {
         };
         readonly functional: {
             readonly border: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#101010";
                 readonly subtle: "#101010";
-                readonly inverted: "#f7f7f7";
             };
             readonly foreground: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#fcfbf2";
                 readonly subtle: "#101010";
-                readonly inverted: "#f7f7f7";
             };
             readonly surface: {
                 readonly strong: {
@@ -244,6 +244,8 @@ declare const _default: {
         };
     };
     readonly text: {
+        readonly affirmative: "#0f834a";
+        readonly brand: "#7a42c8";
         readonly inverted: "#fcfbf2";
         readonly primary: "#101010";
         readonly secondary: "#888888";

package/build/tokens/semantic-light.js

@@ -15,55 +15,55 @@ export default {
         danger: {
             border: '#de2612',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#de2612',
             },
             surface: {
-                default: '#de2612',
-                subtle: '#ffccc5',
+                default: '#ff634a',
+                subtle: '#ffa89d',
             },
         },
         functional: {
-            border: '#888888',
+            border: '#5b5b5b',
             foreground: {
-                default: '#fcfbf2',
-                subtle: '#888888',
+                default: '#101010',
+                subtle: '#5b5b5b',
             },
             surface: {
-                default: '#888888',
+                default: '#919191',
                 subtle: '#d3d3d3',
             },
         },
         info: {
             border: '#1c6cd4',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#1c6cd4',
             },
             surface: {
-                default: '#1c6cd4',
+                default: '#6bb0ff',
                 subtle: '#bcddff',
             },
         },
         positive: {
             border: '#0f834a',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#0f834a',
             },
             surface: {
-                default: '#0f834a',
+                default: '#36bf7d',
                 subtle: '#a2e2c3',
             },
         },
         warning: {
             border: '#be5400',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#be5400',
             },
             surface: {
-                default: '#be5400',
+                default: '#ff8010',
                 subtle: '#ffcca8',
             },
         },
@@ -136,14 +136,14 @@ export default {
         },
         functional: {
             border: {
+                inverted: '#f7f7f7',
                 strong: '#101010',
                 subtle: '#101010',
-                inverted: '#f7f7f7',
             },
             foreground: {
+                inverted: '#f7f7f7',
                 strong: '#fcfbf2',
                 subtle: '#101010',
-                inverted: '#f7f7f7',
             },
             surface: {
                 strong: {
@@ -244,6 +244,8 @@ export default {
         },
     },
     text: {
+        affirmative: '#0f834a',
+        brand: '#7a42c8',
         inverted: '#fcfbf2',
         primary: '#101010',
         secondary: '#888888',

package/build/types/values.d.ts

@@ -1,5 +1,5 @@
 import { AnimatableNumericValue, DimensionValue } from 'react-native';
-import { lightTheme } from '../core/themes';
+import { lightTheme, themes } from '../core/themes';
 import color from '../tokens/color';
 export type addPrefixToObject<T, P extends string> = {
     [K in keyof T as K extends string | number ? `${P}${K}` : never]: T[K];
@@ -26,4 +26,5 @@ export type ColorValue = 'currentColor' | 'transparent' | FlattenColorKeys<Omit<
 export type BorderRadiusValue = `${keyof (typeof lightTheme)['borderRadius'] & (string | number)}` | AnimatableNumericValue | undefined;
 export type BordeWidthValue = `${keyof (typeof lightTheme)['borderWidth'] & (string | number)}` | number | undefined;
 export type OpacityValue = AnimatableNumericValue | undefined;
+export type SpacingValues = keyof (typeof themes)['light']['globalStyle']['variants']['space'];
 export {};

package/build/utils/formatThousands.d.ts

@@ -0,0 +1,2 @@
+declare const formatThousands: (value: string) => string;
+export default formatThousands;

package/build/utils/formatThousands.js

@@ -0,0 +1,16 @@
+const formatThousands = (value) => {
+    if (!value)
+        return value;
+    // Remove existing commas first
+    const cleaned = value.replace(/,/g, '');
+    // Allow leading minus, digits, optional decimal part
+    const match = cleaned.match(/^(-)?(\d*)(\.\d*)?$/);
+    if (!match)
+        return value; // If it doesn't match a numeric pattern, return original (lets user continue typing)
+    const [, sign = '', intPart = '', decimalPart = ''] = match;
+    if (!intPart)
+        return sign + intPart + decimalPart; // nothing to format yet
+    const withCommas = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return sign + withCommas + (decimalPart || '');
+};
+export default formatThousands;

package/build/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
+export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';

package/build/utils/index.js

@@ -1,4 +1,5 @@
 export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
+export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';

package/docs/components/AllComponents.web.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import {
   BroadbandMediumIcon,
+  CashbackCardMediumIcon,
   ChevronRightMediumIcon,
   ElectricityMediumIcon,
   InsuranceMediumIcon,
@@ -24,6 +25,9 @@ import {
   Card,
   Center,
   Checkbox,
+  CurrencyInput,
+  DescriptionList,
+  DescriptionListItem,
   DetailText,
   Divider,
   Flex,
@@ -32,6 +36,7 @@ import {
   Heading,
   Icon,
   IconButton,
+  IconContainer,
   InlineLink,
   Input,
   LI,
@@ -49,12 +54,17 @@ import {
   Skeleton,
   Spinner,
   Switch,
+  Tab,
+  TabPanel,
+  Tabs,
+  TabsList,
   Textarea,
   ToggleButtonCard,
   ToggleButtonCardGroup,
   UL,
   useColorMode,
 } from '../../src';
+import { addReactNativePrefix } from '../heplers';
 
 const ComponentWrapper = ({
   name,
@@ -66,8 +76,15 @@ const ComponentWrapper = ({
   children?: ViewProps['children'];
 }) => {
   const navigate = () => {
+    let target = link;
+    if (
+      typeof window !== 'undefined' &&
+      window.top?.location.href.includes('hearth.prod.uw.systems/?path=')
+    ) {
+      target = addReactNativePrefix(link);
+    }
     if (window.top) {
-      window.top.location.href = link;
+      window.top.location.href = target;
     }
   };
   return (
@@ -203,6 +220,22 @@ const AllComponents: React.FC = () => {
               </View>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Currency Input" link="/?path=/docs/forms-currency-input--docs">
+            <Center flex={1} padding="200">
+              <CurrencyInput />
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Description List"
+            link="/?path=/docs/components-description-list--docs"
+          >
+            <Center flex={1} padding="200">
+              <DescriptionList>
+                <DescriptionListItem heading="This is a" description="Description list" />
+                <DescriptionListItem heading="So is this" description="12-34-56" />
+              </DescriptionList>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Detail Text" link="/?path=/docs/typography-detail-text--docs">
             <Center flex={1}>
               <DetailText>This is some Detail Text</DetailText>
@@ -255,11 +288,51 @@ const AllComponents: React.FC = () => {
               <Heading>This is a Heading</Heading>
             </Center>
           </ComponentWrapper>
-          <ComponentWrapper name="Icon Button" link="/?path=/docs/components-iconbutton--docs">
+          <ComponentWrapper name="Icon Button" link="/?path=/docs/components-icon-button--docs">
             <Center flex={1}>
               <IconButton icon={ChevronRightMediumIcon} size="md" onPress={() => null} />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Icon Container"
+            link="/?path=/docs/components-icon-container--docs"
+          >
+            <Center flex={1}>
+              <Flex direction="row" space="sm">
+                <IconContainer
+                  icon={ElectricityMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="energy"
+                />
+                <IconContainer
+                  icon={BroadbandMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="broadband"
+                />
+                <IconContainer
+                  icon={MobileMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="mobile"
+                />
+                <IconContainer
+                  icon={InsuranceMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="insurance"
+                />
+                <IconContainer
+                  icon={CashbackCardMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="cashback"
+                />
+              </Flex>
+            </Center>
+          </ComponentWrapper>
+
           <ComponentWrapper name="Icons" link="/?path=/docs/components-icons--docs">
             <Center flex={1}>
               <Flex direction="row" space="lg">
@@ -353,7 +426,7 @@ const AllComponents: React.FC = () => {
             name="Section Header"
             link="/?path=/docs/components-section-header--docs"
           >
-            <Center flex={1}>
+            <Center flex={1} p="300">
               <SectionHeader heading="Heading" helperText="Supporting text" linkText="More" />
             </Center>
           </ComponentWrapper>
@@ -395,7 +468,26 @@ const AllComponents: React.FC = () => {
               <Switch value={switchEnabled} onValueChange={toggleSwitch} />
             </Center>
           </ComponentWrapper>
-
+          <ComponentWrapper name="Tabs" link="/?path=/docs/components-tabs--docs">
+            <Center flex={1}>
+              <Tabs defaultValue="tab-1">
+                <TabsList>
+                  <Tab value="tab-1">Tab 1</Tab>
+                  <Tab value="tab-2">Tab 2</Tab>
+                  <Tab value="tab-3">Tab 3</Tab>
+                </TabsList>
+                <TabPanel value="tab-1">
+                  <BodyText>I'm the first tab's content</BodyText>
+                </TabPanel>
+                <TabPanel value="tab-2">
+                  <BodyText>I'm the second tab's content</BodyText>
+                </TabPanel>
+                <TabPanel value="tab-3">
+                  <BodyText>I'm the third tab's content</BodyText>
+                </TabPanel>
+              </Tabs>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Textarea" link="/?path=/docs/forms-textarea--docs">
             <Center flex={1}>
               <Textarea numberOfLines={3} placeholder="This is a textarea" />
@@ -441,9 +533,7 @@ const AllComponents: React.FC = () => {
 };
 
 const styles = StyleSheet.create(theme => ({
-  container: {
-    gap: theme.space['2'],
-  },
+  container: {},
   component: {
     borderColor: theme.color.warmWhite[300],
     borderWidth: theme.borderWidth['1'],
@@ -457,7 +547,6 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   componentWrap: {
-    padding: theme.space['4'],
     flexGrow: 1,
     flex: 1,
   },

package/docs/components/NextPrevPage.tsx

@@ -1,6 +1,7 @@
-import { View, StyleSheet } from 'react-native';
-import { Card, CardAction, Heading, Link } from '../../src';
 import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet, View } from 'react-native';
+import { Card, CardAction, Heading, Link } from '../../src';
+import { addReactNativePrefix } from '../heplers';
 
 type NextPrevPageProps = {
   nextLink?: string;
@@ -16,8 +17,15 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
   prevTitle,
 }) => {
   const openLink = (link: string) => {
+    let target = link;
+    if (
+      typeof window !== 'undefined' &&
+      window.top?.location.href.includes('hearth.prod.uw.systems/?path=')
+    ) {
+      target = addReactNativePrefix(link);
+    }
     if (window.top) {
-      window.top.location.href = link;
+      window.top.location.href = target;
     }
   };
   return (

package/docs/components/UsageWrap.tsx

@@ -8,10 +8,10 @@ const UsageWrap: FC<PropsWithChildren> = ({ children }) => {
       <Box
         mt="300"
         p="200"
-        bg={colorMode === 'dark' ? 'background' : 'white'}
+        bg="backgroundPrimary"
         borderRadius="md"
         borderWidth="1"
-        borderColor="grey1000"
+        borderColor="borderSubtle"
         width="100%"
         position="relative"
       >

package/docs/heplers/addReactNativePrefix.ts

@@ -0,0 +1,8 @@
+const addReactNativePrefix = (url: string) => {
+  if (!url.startsWith('/?path=/docs/')) return url;
+  return url.replace(/(\/\?path=\/docs\/)([^/]+)/, (full, prefix, slug) => {
+    if (slug.startsWith('react-native_')) return full; // already prefixed
+    return `${prefix}react-native_${slug}`;
+  });
+};
+export default addReactNativePrefix;

package/docs/heplers/index.ts

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

package/docs/theme-tokens.mdx

@@ -429,6 +429,48 @@ Available spacing values:
 | `900` | 72px | Maximum spacing |
 | `1000` | 80px | Hero spacing |
 
+There is also responsive layout spacing for different screen sizes:
+
+| Token  | Mobile (base) | Tablet (md) | Desktop (lg) | Usage (guideline)                     |
+| ------ | ------------- | ----------- | ------------ | ------------------------------------- |
+| `none` | 0px           | 0px         | 0px          | Reset / collapse spacing              |
+| `2xs`  | 2px           | 2px         | 2px          | Hairline gaps, separators             |
+| `xs`   | 4px           | 4px         | 4px          | Tight padding, icon nudge             |
+| `sm`   | 8px           | 8px         | 8px          | Compact component gap                 |
+| `md`   | 12px          | 12px        | 12px         | Dense layouts, inline stacks          |
+| `lg`   | 16px          | 16px        | 16px         | Base section spacing                  |
+| `xl`   | 20px          | 24px        | 24px         | Larger grouping / outer padding       |
+| `2xl`  | 28px          | 28px        | 40px         | Major vertical rhythm / page sections |
+
+There are built in responsive layout spacings for mobile, tablet and desktop. They live under `theme.space.xs` etc,
+which are responsive values that adapt based on screen size. For example, `theme.space.xl` is `20px` on mobile, and `24px` on tablet and desktop.
+
+These responsive layout spacings live under `theme.layout.[mobile|tablet|desktop].spacing` and are intended for macro
+layout structure (page/frame scaffolding) rather than component-level internal spacing (which should prefer the core `space` scale).
+
+```tsx
+const styles = StyleSheet.create(theme => ({
+  pageSection: {
+    padding: theme.space.xl, // 20px on mobile, 24px on tablet/desktop
+  },
+}));
+
+// or using the layout tokens directly:
+const styles = StyleSheet.create(theme => ({
+  pageSection: {
+    // Example: use responsive spacing tokens
+    paddingHorizontal: theme.layout.mobile.spacing.lg,
+    paddingTop: theme.layout.mobile.spacing.xl,
+    // Or use responsive object syntax
+    gap: {
+      base: theme.layout.mobile.spacing.md,
+      md: theme.layout.tablet.spacing.lg,
+      lg: theme.layout.desktop.spacing.xl,
+    },
+  },
+}));
+```
+
 Percentage-based spacing is also available:
 
 - `1/2`, `1/3`, `2/3`, `1/4`, `3/4`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -75,11 +75,10 @@
     "lint": "TIMING=1 eslint --max-warnings 0",
     "build": "tsc",
     "watch": "tsc --watch",
-    "watch:lab": "tsc --p tsconfig.lab.json  --watch",
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
+    "dev": "storybook dev -p 6006",
     "build:storybook": "storybook build"
   }
 }