@utilitywarehouse/hearth-react-native 0.5.0 → 0.6.0

package/.storybook/main.ts

@@ -1,4 +1,5 @@
 import remarkGfm from 'remark-gfm';
+import svgr from 'vite-plugin-svgr';
 
 const unistylesPluginOptions = {
   autoProcessImports: ['@utilitywarehouse/hearth-react-native'],
@@ -39,7 +40,22 @@ const config = {
       },
     },
   },
-  viteFinal: config => {
+  viteFinal: async (config: any) => {
+    // Add SVGR plugin for web SVG imports as React components
+    config.plugins = [
+      ...(config.plugins || []),
+      svgr({
+        include: '**/*.svg',
+        svgrOptions: {
+          exportType: 'default',
+          ref: true,
+          svgo: false,
+          titleProp: true,
+          icon: true,
+        },
+      }),
+    ];
+
     return {
       ...config,
       resolve: {
@@ -49,6 +65,10 @@ const config = {
           '@utilitywarehouse/hearth-react-native-icons': '@utilitywarehouse/hearth-react-icons',
         },
       },
+      optimizeDeps: {
+        ...config.optimizeDeps,
+        exclude: [...(config.optimizeDeps?.exclude || []), '@utilitywarehouse/hearth-svg-assets'],
+      },
     };
   },
 };

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.5.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.6.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.5.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.6.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.6.0
+
+### Minor Changes
+
+- [#603](https://github.com/utilitywarehouse/hearth/pull/603) [`3f292e9`](https://github.com/utilitywarehouse/hearth/commit/3f292e9960dc708dd6932cff04671dd7ef375c1a) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Container` component
+
+- [#605](https://github.com/utilitywarehouse/hearth/pull/605) [`f52e0f5`](https://github.com/utilitywarehouse/hearth/commit/f52e0f57eff5f1cfa36dacc45576c08771ca12df) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `ThemedImage` component
+
 ## 0.5.0
 
 ### Minor Changes

package/build/components/Container/Container.d.ts

@@ -0,0 +1,6 @@
+import type ContainerProps from './Container.props';
+declare const Container: {
+    ({ style, children, space, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Container;

package/build/components/Container/Container.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
+const Container = ({ style, children, space = 'md', ...props }) => {
+    const { computedStyles, remainingProps } = useStyleProps(props);
+    styles.useVariants({ space });
+    return (_jsx(View, { style: [styles.container(computedStyles), style], ...remainingProps, children: children }));
+};
+Container.displayName = 'Container';
+const styles = StyleSheet.create(theme => ({
+    container: extra => ({
+        paddingTop: typeof extra.padding === 'undefined' && typeof extra.paddingVertical === 'undefined'
+            ? {
+                base: theme.layout.mobile.container.paddingTop,
+                md: theme.layout.tablet.container.paddingTop,
+                lg: theme.layout.desktop.container.paddingTop,
+            }
+            : undefined,
+        paddingBottom: typeof extra.padding === 'undefined' && typeof extra.paddingVertical === 'undefined'
+            ? {
+                base: theme.layout.mobile.container.paddingBottom,
+                md: theme.layout.tablet.container.paddingBottom,
+                lg: theme.layout.desktop.container.paddingBottom,
+            }
+            : undefined,
+        marginHorizontal: typeof extra.margin === 'undefined' && typeof extra.marginHorizontal === 'undefined'
+            ? {
+                base: theme.layout.mobile.container.margin,
+                md: theme.layout.tablet.container.margin,
+                lg: theme.layout.desktop.container.margin,
+            }
+            : undefined,
+        ...extra,
+        variants: {
+            space: theme.globalStyle.variants.space,
+        },
+    }),
+}));
+export default Container;

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

@@ -0,0 +1,85 @@
+import type { ViewProps } from 'react-native';
+import { SpaceValue, SpacingValues } from '../../types';
+interface ContainerProps extends ViewProps {
+    /**
+     * The padding of the container.
+     */
+    padding?: SpaceValue;
+    /**
+     * The horizontal padding of the container.
+     */
+    paddingHorizontal?: SpaceValue;
+    /**
+     * The vertical padding of the container.
+     */
+    paddingVertical?: SpaceValue;
+    /**
+     * The top padding of the container.
+     */
+    paddingTop?: SpaceValue;
+    /**
+     * The bottom padding of the container.
+     */
+    paddingBottom?: SpaceValue;
+    /**
+     * The left padding of the container.
+     */
+    paddingLeft?: SpaceValue;
+    /**
+     * The right padding of the container.
+     */
+    paddingRight?: SpaceValue;
+    /**
+     * The margin of the container.
+     */
+    margin?: SpaceValue;
+    /**
+     * The horizontal margin of the container.
+     */
+    marginHorizontal?: SpaceValue;
+    /**
+     * The vertical margin of the container.
+     */
+    marginVertical?: SpaceValue;
+    /**
+     * The top margin of the container.
+     */
+    marginTop?: SpaceValue;
+    /**
+     * The bottom margin of the container.
+     */
+    marginBottom?: SpaceValue;
+    /**
+     * The left margin of the container.
+     */
+    marginLeft?: SpaceValue;
+    /**
+     * The right margin of the container.
+     */
+    marginRight?: SpaceValue;
+    p?: SpaceValue;
+    px?: SpaceValue;
+    py?: SpaceValue;
+    pt?: SpaceValue;
+    pb?: SpaceValue;
+    pl?: SpaceValue;
+    pr?: SpaceValue;
+    m?: SpaceValue;
+    mx?: SpaceValue;
+    my?: SpaceValue;
+    mt?: SpaceValue;
+    mb?: SpaceValue;
+    ml?: SpaceValue;
+    mr?: SpaceValue;
+    /**
+     * The space between child elements (gap).
+     */
+    space?: SpacingValues;
+    /**
+     * The space between child elements.
+     */
+    gap?: SpaceValue;
+    backgroundColor?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
+    bg?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
+}
+export default ContainerProps;

package/build/components/Container/Container.props.js

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

package/build/components/Container/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Container } from './Container';
+export type { default as ContainerProps } from './Container.props';

package/build/components/Container/index.js

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

package/build/components/ProgressStepper/ProgressStep.d.ts

@@ -4,7 +4,7 @@ interface ProgressStepInternalProps extends ProgressStepProps {
     isLast?: boolean;
 }
 declare const ProgressStep: {
-    ({ state, index, isLast, ...rest }: ProgressStepInternalProps): import("react/jsx-runtime").JSX.Element;
+    ({ status, index, isLast, ...rest }: ProgressStepInternalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ProgressStep;

package/build/components/ProgressStepper/ProgressStep.js

@@ -4,12 +4,12 @@ import { StyleSheet } from 'react-native-unistyles';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Icon } from '../Icon';
 import { BodyText } from '../BodyText';
-const ProgressStep = ({ state, index = 0, isLast = false, ...rest }) => {
-    styles.useVariants({ state, isLast });
+const ProgressStep = ({ status, index = 0, isLast = false, ...rest }) => {
+    styles.useVariants({ status, isLast });
     const renderStepNumber = () => {
         return (_jsx(BodyText, { size: "md", weight: "semibold", style: styles.text, children: index + 1 }));
     };
-    return (_jsxs(View, { style: styles.container, accessible: true, "aria-label": `Step ${index + 1}, ${rest.id}, ${state}`, ...rest, children: [_jsx(View, { style: styles.step, children: state === 'complete' ? (_jsx(Icon, { as: TickSmallIcon, width: 20, height: 20, style: styles.text })) : state === 'active' ? (_jsx(View, { style: styles.inner, children: renderStepNumber() })) : (renderStepNumber()) }), !isLast && _jsx(View, { style: styles.connector })] }));
+    return (_jsxs(View, { style: styles.container, accessible: true, "aria-label": `Step ${index + 1}, ${rest.id}, ${status}`, ...rest, children: [_jsx(View, { style: styles.step, children: status === 'complete' ? (_jsx(Icon, { as: TickSmallIcon, width: 20, height: 20, style: styles.text })) : status === 'active' ? (_jsx(View, { style: styles.inner, children: renderStepNumber() })) : (renderStepNumber()) }), !isLast && _jsx(View, { style: styles.connector })] }));
 };
 ProgressStep.displayName = 'ProgressStep';
 const styles = StyleSheet.create(theme => ({
@@ -37,7 +37,7 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         justifyContent: 'center',
         variants: {
-            state: {
+            status: {
                 complete: {
                     backgroundColor: theme.color.surface.brand.default,
                 },
@@ -64,7 +64,7 @@ const styles = StyleSheet.create(theme => ({
     },
     text: {
         variants: {
-            state: {
+            status: {
                 complete: {
                     color: theme.color.text.inverted,
                 },
@@ -83,7 +83,7 @@ const styles = StyleSheet.create(theme => ({
         flex: 1,
         height: theme.components.progressStepper.bar.height,
         variants: {
-            state: {
+            status: {
                 complete: {
                     backgroundColor: theme.components.progressStepper.bar.complete.backgroundColor,
                 },

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

@@ -1,5 +1,5 @@
 import { ViewProps } from 'react-native';
-export type StepState = 'complete' | 'active' | 'incomplete';
+export type StepStatus = 'complete' | 'active' | 'incomplete';
 export interface ProgressStepperProps extends ViewProps {
     /**
      * Child ProgressStep components
@@ -12,9 +12,9 @@ export interface ProgressStepProps extends ViewProps {
      */
     id: string;
     /**
-     * Current state of the step
+     * Current status of the step
      */
-    state: StepState;
+    status: StepStatus;
 }
 export interface ProgressStepperRootProps extends ViewProps {
     children: React.ReactNode;

package/build/components/ProgressStepper/index.d.ts

@@ -1,3 +1,3 @@
 export { default as ProgressStepper } from './ProgressStepper';
 export { default as ProgressStep } from './ProgressStep';
-export type { ProgressStepperProps, ProgressStepProps, StepState } from './ProgressStepper.props';
+export type { ProgressStepperProps, ProgressStepProps, StepStatus } from './ProgressStepper.props';

package/build/components/ThemedImage/ThemedImage.d.ts

@@ -0,0 +1,12 @@
+import type ThemedImageProps from './ThemedImage.props';
+/**
+ * ThemedImage component that displays different images or components based on the current theme
+ * @param light - Image source or SVG component to display in light mode
+ * @param dark - Image source or SVG component to display in dark mode
+ * @param ...rest - All other Image props including width/height for SVG components
+ */
+declare const ThemedImage: {
+    ({ light, dark, ...props }: ThemedImageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ThemedImage;

package/build/components/ThemedImage/ThemedImage.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { Image } from 'react-native';
+import useColorMode from '../../hooks/useColorMode';
+/**
+ * ThemedImage component that displays different images or components based on the current theme
+ * @param light - Image source or SVG component to display in light mode
+ * @param dark - Image source or SVG component to display in dark mode
+ * @param ...rest - All other Image props including width/height for SVG components
+ */
+const ThemedImage = ({ light, dark, ...props }) => {
+    const [colorMode] = useColorMode();
+    const source = colorMode === 'light' ? light : dark;
+    // If the source is a React element (like an SVG component), render it directly
+    if (isValidElement(source)) {
+        return source;
+    }
+    // If the source is a component type (function/class), instantiate it with props
+    if (typeof source === 'function') {
+        const Source = source;
+        return _jsx(Source, { ...props });
+    }
+    // Otherwise, render as a regular Image with the source
+    return _jsx(Image, { source: source, ...props });
+};
+ThemedImage.displayName = 'ThemedImage';
+export default ThemedImage;

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

@@ -0,0 +1,13 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { ImageProps, ImageSourcePropType } from 'react-native';
+interface ThemedImageProps extends Omit<ImageProps, 'source'> {
+    /**
+     * Image source or component to display in light mode
+     */
+    light: ImageSourcePropType | ReactElement | ComponentType<any>;
+    /**
+     * Image source or component to display in dark mode
+     */
+    dark: ImageSourcePropType | ReactElement | ComponentType<any>;
+}
+export default ThemedImageProps;

package/build/components/ThemedImage/ThemedImage.props.js

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

package/build/components/ThemedImage/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThemedImage } from './ThemedImage';
+export type { default as ThemedImageProps } from './ThemedImage.props';

package/build/components/ThemedImage/index.js

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

package/build/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Container';
 export * from './CurrencyInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
@@ -41,6 +42,7 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
+export * from './ThemedImage';
 export * from './ToggleButtonCard';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
 export { Pressable } from 'react-native';

package/build/components/index.js

@@ -10,6 +10,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Container';
 export * from './CurrencyInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
@@ -42,6 +43,7 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
+export * from './ThemedImage';
 export * from './ToggleButtonCard';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
 export { Pressable } from 'react-native';

package/build/hooks/useStyleProps.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import useTheme from './useTheme';
 import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import useTheme from './useTheme';
 /**
  * Hook to process utility style props and resolve theme values
  * @param props Component props to process

package/docs/components/AllComponents.web.tsx

@@ -10,6 +10,10 @@ import {
   InsuranceMediumIcon,
   MobileMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
+// @ts-ignore
+import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
+// @ts-ignore
+import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
 import { Pressable, ScrollView, View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import {
@@ -29,6 +33,7 @@ import {
   CarouselItem,
   Center,
   Checkbox,
+  Container,
   CurrencyInput,
   DatePicker,
   DatePickerInput,
@@ -53,8 +58,8 @@ import {
   ListItem,
   Modal,
   OL,
-  ProgressStepper,
   ProgressStep,
+  ProgressStepper,
   Radio,
   RadioCard,
   RadioCardGroup,
@@ -69,6 +74,7 @@ import {
   Tabs,
   TabsList,
   Textarea,
+  ThemedImage,
   ToggleButtonCard,
   ToggleButtonCardGroup,
   UL,
@@ -154,7 +160,7 @@ const AllComponents: React.FC = () => {
   return (
     <div className="sb-unstyled">
       <ScrollView contentContainerStyle={styles.container}>
-        <Flex direction="row" wrap="wrap" space="md">
+        <Flex direction="row" wrap="wrap" space="md" style={styles.grid}>
           <ComponentWrapper name="Accordion" link="/?path=/docs/components-accordion--docs">
             <Center flex={1} p="200">
               <Accordion type="single">
@@ -294,6 +300,13 @@ const AllComponents: React.FC = () => {
               </View>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Container" link="/?path=/docs/primitives-container--docs">
+            <Container space="md" backgroundColor="backgroundSecondary">
+              <Box h={20} bg="blue300" />
+              <Box h={20} bg="blue400" />
+              <Box h={20} bg="blue500" />
+            </Container>
+          </ComponentWrapper>
           <ComponentWrapper name="Currency Input" link="/?path=/docs/forms-currency-input--docs">
             <Center flex={1} padding="200">
               <CurrencyInput />
@@ -514,7 +527,7 @@ const AllComponents: React.FC = () => {
             name="Progress Stepper"
             link="/?path=/docs/components-progress-stepper--docs"
           >
-            <Center flex={1}>
+            <Center flex={1} px="300">
               <ProgressStepper>
                 <ProgressStep id="customer-data" state="complete" />
                 <ProgressStep id="shipping-data" state="complete" />
@@ -617,6 +630,17 @@ const AllComponents: React.FC = () => {
               <Textarea numberOfLines={3} placeholder="This is a textarea" />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Themed Image"
+            link="/?path=/docs/utility-components-themed-image--docs"
+          >
+            <Center flex={1} p="300">
+              <ThemedImage
+                light={<SpotBillingLight width={160} height={160} />}
+                dark={<SpotBillingDark width={160} height={160} />}
+              />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Toggle Button Card"
             link="/?path=/docs/components-toggle-button-card--docs"
@@ -658,6 +682,17 @@ const AllComponents: React.FC = () => {
 
 const styles = StyleSheet.create(theme => ({
   container: {},
+  grid: {
+    _web: {
+      display: 'grid',
+      gridTemplateColumns: {
+        xs: '1fr',
+        md: 'repeat(3, 1fr)',
+        lg: 'repeat(auto-fit, minmax(300px, 1fr))',
+      },
+      gap: theme.space['200'],
+    },
+  },
   component: {
     borderColor: theme.color.warmWhite[300],
     borderWidth: theme.borderWidth['1'],

package/docs/layout-components.docs.mdx

@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as BoxStories from '../src/components/Box/Box.stories';
+import * as ContainerStories from '../src/components/Container/Container.stories';
 import * as FlexStories from '../src/components/Flex/Flex.stories';
 import * as GridStories from '../src/components/Grid/Grid.stories';
 import { BackToTopButton, NextPrevPage } from './components';
@@ -15,6 +16,7 @@ upon our design tokens, and providing styling options which make it easier to
 apply design decisions coherently.
 
 - [Box](#box)
+- [Container](#container)
 - [Flex](#flex)
 - [Grid](#grid)
 
@@ -36,6 +38,34 @@ elements within `Flex` and `Grid` containers.
 </Box>
 ```
 
+## Container
+
+<Canvas of={ContainerStories.Playground} sourceState="none" />
+
+`Container` is a specialised layout component that provides consistent page-level
+spacing using the design system's responsive layout tokens. It automatically applies
+appropriate margin and padding based on the current breakpoint, making it ideal for
+wrapping page content or major sections.
+
+```tsx
+<Container space="lg">
+  <Box>{...}</Box>
+  <Box>{...}</Box>
+</Container>
+```
+
+When you need custom spacing, you can override the defaults while maintaining
+the convenience of the component:
+
+```tsx
+<Container
+  marginHorizontal="none"
+  space="xl"
+>
+  {...}
+</Container>
+```
+
 ## Flex
 
 <Canvas of={FlexStories.Playground} sourceState="none" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -52,10 +52,12 @@
     "storybook": "^9.1.6",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
+    "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.7.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.0",
+    "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
     "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },
   "peerDependencies": {