@utilitywarehouse/hearth-react-native 0.19.1 → 0.21.0

package/src/components/Tabs/Tabs.figma.tsx

@@ -1,29 +1,20 @@
-import React from "react"
-import Tabs from "./Tabs"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { TabPanel, Tabs, TabsList } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  Tabs,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6464%3A8744",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      size: figma.enum("Size", {
-        "MD-56": "md",
-        "LG-64": "lg",
-      }),
-      // No matching props could be found for these Figma properties:
-      // "arrowLeft": figma.boolean('Arrow left?'),
-      // "arrowRight": figma.boolean('Arrow right?'),
-      // "condensed": figma.boolean('Condensed?')
-    },
-    example: (props) => <Tabs size={props.size} />,
+figma.connect(Tabs, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6464%3A8744', {
+  props: {
+    size: figma.enum('Size', {
+      'LG-64': 'lg',
+    }),
+    tabs: figma.children('Tab item'),
   },
-)
+  example: props => (
+    <Tabs size={props.size}>
+      <TabsList>{props.tabs}</TabsList>
+      {/* Example TabPanel content, make sure they match the value of your Tab items */}
+      <TabPanel value="account">Account content</TabPanel>
+      <TabPanel value="billing">Billing content</TabPanel>
+      <TabPanel value="usage">Usage content</TabPanel>
+    </Tabs>
+  ),
+});

package/src/components/Textarea/Textarea.figma.tsx

@@ -0,0 +1,64 @@
+import figma from '@figma/code-connect';
+import { Textarea } from '..';
+
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  readonly: figma.enum('State', {
+    'Read-only': true,
+  }),
+  placeholder: figma.enum('Value type', {
+    Placeholder: figma.string('Value'),
+  }),
+  value: figma.enum('Value type', {
+    Filled: figma.string('Value'),
+  }),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+  validText: figma.enum('State', {
+    Valid: figma.string('Validation'),
+  }),
+};
+
+figma.connect(
+  Textarea,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2356-5180&m=dev',
+  {
+    props: {
+      ...props,
+      required: figma.boolean('Optional?', {
+        true: false,
+        false: true,
+      }),
+    },
+    example: props => (
+      <Textarea
+        disabled={props.disabled}
+        readonly={props.readonly}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        required={props.required}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+      />
+    ),
+  }
+);

package/src/components/Toast/ToastItem.figma.tsx

@@ -1,13 +1,6 @@
 import figma from '@figma/code-connect';
 import ToastItem from './ToastItem';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
 
 figma.connect(ToastItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7072%3A913', {
   props: {
@@ -18,5 +11,5 @@ figma.connect(ToastItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?no
     // "icon24": figma.instance('Icon-24'),
     // "dismiss": figma.boolean('Dismiss?')
   },
-  example: props => <ToastItem toast={null} onClose={null} />,
+  example: props => <ToastItem  />,
 });

package/src/components/ToggleButtonCard/ToggleButtonCard.figma.tsx

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { ToggleButtonCard } from '../';
+
+figma.connect(
+  ToggleButtonCard,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2164-727&t=Uq6QfQcygdNGv5lM-4',
+  {
+    variant: {
+      Variant: 'Toggle Button',
+    },
+    props: {
+      radio: figma.nestedProps('Radio', {
+        label: figma.string('Label'),
+      }),
+      content: figma.instance('Content'),
+    },
+    example: props => (
+      // This should be wrapped in a ToggleButtonCardGroup, see docs
+      <ToggleButtonCard label={props.radio.label} value="someValue">
+        {props.content}
+      </ToggleButtonCard>
+    ),
+  }
+);

package/src/components/VerificationInput/VerificationInput.figma.tsx

@@ -0,0 +1,53 @@
+import figma from '@figma/code-connect';
+import { VerificationInput } from '..';
+
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  placeholder: figma.enum('Value type', {
+    Placeholder: figma.string('Value'),
+  }),
+  value: figma.enum('Value type', {
+    Filled: figma.string('Value 1'),
+  }),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+  validText: figma.enum('State', {
+    Valid: figma.string('Validation'),
+  }),
+};
+
+figma.connect(
+  VerificationInput,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4049-3615&m=dev',
+  {
+    props,
+    example: props => (
+      <VerificationInput
+        disabled={props.disabled}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+      />
+    ),
+  }
+);

package/src/core/themes.ts

@@ -306,9 +306,18 @@ export const lightTheme = {
     white: '#ffffff',
     black: '#000000',
   } as const,
+
   components: components.light,
   ...shared,
-  helpers: lightHelpers,
+  helpers: {
+    ...lightHelpers /** Simplified semantic color tokens grouped by category */,
+    semanticColor: {
+      background: light.background,
+      border: light.border,
+      text: light.text,
+      icon: light.icon,
+    },
+  },
 } as const;
 
 const darkHelpers = {
@@ -364,7 +373,15 @@ export const darkTheme = {
   },
   components: components.dark,
   ...shared,
-  helpers: darkHelpers,
+  helpers: {
+    ...darkHelpers /** Simplified semantic color tokens grouped by category */,
+    semanticColor: {
+      background: dark.background,
+      border: dark.border,
+      text: dark.text,
+      icon: dark.icon,
+    },
+  },
 } as const;
 
 export const themes = {

package/src/hooks/useStyleProps.ts

@@ -1,6 +1,14 @@
 import { useMemo } from 'react';
 import { ViewStyle } from 'react-native';
-import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import {
+  propStyleMapping,
+  resolveThemeKey,
+  resolveThemeValueWithFallback,
+  semanticPropMapping,
+  themeStyleFallbackMapping,
+  themeStyleMapping,
+  viewStyleProps,
+} from '../utils';
 import useTheme from './useTheme';
 
 /**
@@ -28,8 +36,23 @@ export const useStyleProps = (props: Record<string, any>): StylePropsResult => {
     Object.entries(props).forEach(([propName, propValue]) => {
       if (propValue === undefined) return;
 
+      // Check for semantic prop mappings first (e.g., iconColor, color)
+      const semanticMapping = semanticPropMapping[propName];
+      if (semanticMapping) {
+        const { styleProp, themeKey } = semanticMapping;
+        const themeMapping = resolveThemeKey(theme, themeKey);
+        const fallbackKey = themeStyleFallbackMapping[themeKey];
+        const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
+
+        computedStyles[styleProp] = resolveThemeValueWithFallback(
+          propValue,
+          themeMapping,
+          fallbackMapping
+        );
+        return;
+      }
+
       let stylePropName: keyof ViewStyle | undefined;
-      let themeKey: keyof typeof theme | undefined;
 
       // Handle shorthand props
       if (propStyleMapping[propName]) {
@@ -42,10 +65,22 @@ export const useStyleProps = (props: Record<string, any>): StylePropsResult => {
 
       if (stylePropName) {
         // Resolve theme value if needed
-        themeKey = themeStyleMapping[stylePropName] as keyof typeof theme;
+        const themeKey = themeStyleMapping[stylePropName as string];
+
+        if (themeKey) {
+          const themeObj = resolveThemeKey(theme, themeKey);
+          const fallbackKey = themeStyleFallbackMapping[themeKey];
+          const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
 
-        if (themeKey && theme[themeKey]) {
-          computedStyles[stylePropName] = resolveThemeValue(propValue, theme[themeKey]);
+          if (themeObj) {
+            computedStyles[stylePropName] = resolveThemeValueWithFallback(
+              propValue,
+              themeObj,
+              fallbackMapping
+            );
+          } else {
+            computedStyles[stylePropName] = propValue;
+          }
         } else {
           computedStyles[stylePropName] = propValue;
         }

package/src/tokens/color.ts

@@ -232,6 +232,7 @@ export const yellow = {
 export const light = {
   background: {
     brand: '#7a42c8',
+    loading: '#f1efe4',
     primary: '#fcfbf2',
     secondary: '#ffffff',
   },
@@ -480,6 +481,7 @@ export const light = {
 export const dark = {
   background: {
     brand: '#7a42c8',
+    loading: '#30302c',
     primary: '#191917',
     secondary: '#232323',
   },

package/src/tokens/components/dark/modal.ts

@@ -9,8 +9,14 @@ export default {
   borderRadius: 16,
   content: {
     gap: 12,
+    mobile: {
+      paddingBottom: 16,
+    },
   },
   gap: 24,
+  handle: {
+    paddingBottom: 16,
+  },
   heading: {
     gap: 24,
   },

package/src/tokens/components/dark/navigation.ts

@@ -7,6 +7,7 @@ export default {
     borderRadiusNone: 0,
     borderRadiusRounded: 4,
   },
+  borderBottom: '#5c2ca9',
   borderRadius: 6,
   desktop: {
     height: 88,

package/src/tokens/components/light/modal.ts

@@ -9,8 +9,14 @@ export default {
   borderRadius: 16,
   content: {
     gap: 12,
+    mobile: {
+      paddingBottom: 16,
+    },
   },
   gap: 24,
+  handle: {
+    paddingBottom: 16,
+  },
   heading: {
     gap: 24,
   },

package/src/tokens/components/light/navigation.ts

@@ -7,6 +7,7 @@ export default {
     borderRadiusNone: 0,
     borderRadiusRounded: 4,
   },
+  borderBottom: '#5c2ca9',
   borderRadius: 6,
   desktop: {
     height: 88,

package/src/tokens/components/light/skeleton.ts

@@ -3,5 +3,5 @@
  */
 
 export default {
-  loadingColor: '#f7f6eb',
+  loadingColor: '#f1efe4',
 } as const;

package/src/tokens/font.ts

@@ -19,7 +19,9 @@ export default {
     '400': 30,
     '500': 36,
     '550': 40,
+    '575': 44,
     '600': 48,
+    '650': 54,
     '700': 60,
     '800': 72,
     '900': 96,

package/src/tokens/line-height.ts

@@ -15,7 +15,9 @@ export default {
   '800': 36,
   '900': 40,
   '950': 48,
+  '975': 52,
   '1000': 56,
+  '1050': 62,
   '1100': 72,
   '1200': 90,
 } as const;

package/src/tokens/primitive.ts

@@ -33,7 +33,9 @@ export default {
       '400': 30,
       '500': 36,
       '550': 40,
+      '575': 44,
       '600': 48,
+      '650': 54,
       '700': 60,
       '800': 72,
       '900': 96,
@@ -78,7 +80,9 @@ export default {
     '800': 36,
     '900': 40,
     '950': 48,
+    '975': 52,
     '1000': 56,
+    '1050': 62,
     '1100': 72,
     '1200': 90,
   },

package/src/tokens/semantic-dark.ts

@@ -5,6 +5,7 @@
 export default {
   background: {
     brand: '#7a42c8',
+    loading: '#30302c',
     primary: '#191917',
     secondary: '#232323',
   },

package/src/tokens/semantic-light.ts

@@ -5,6 +5,7 @@
 export default {
   background: {
     brand: '#7a42c8',
+    loading: '#f1efe4',
     primary: '#fcfbf2',
     secondary: '#ffffff',
   },

package/src/tokens/typography.ts

@@ -64,6 +64,11 @@ export const mobile = {
     },
   },
   heading: {
+    '2xl': {
+      fontSize: 44,
+      fontWeight: 700,
+      lineHeight: 52,
+    },
     fontFamily: 'Comic Hams',
     lg: {
       fontSize: 24,
@@ -151,6 +156,11 @@ export const tablet = {
     },
   },
   heading: {
+    '2xl': {
+      fontSize: 44,
+      fontWeight: 700,
+      lineHeight: 52,
+    },
     fontFamily: 'Comic Hams',
     lg: {
       fontSize: 24,
@@ -238,6 +248,11 @@ export const desktop = {
     },
   },
   heading: {
+    '2xl': {
+      fontSize: 54,
+      fontWeight: 700,
+      lineHeight: 62,
+    },
     fontFamily: 'Comic Hams',
     lg: {
       fontSize: 30,

package/src/types/index.ts

@@ -1,4 +1,6 @@
-export * from './states';
 export * from './refs';
-export * from './values';
+export * from './semanticColorValues';
+export * from './states';
 export * from './unistyles';
+export * from './utilityProps';
+export * from './values';

package/src/types/semanticColorValues.ts

@@ -0,0 +1,26 @@
+import type semanticLight from '../tokens/semantic-light';
+
+/**
+ * Simplified background color values derived from the semantic token `background` keys.
+ * e.g., 'brand' | 'primary' | 'secondary'
+ */
+export type BackgroundColorValue = keyof typeof semanticLight.background;
+
+/**
+ * Simplified border color values derived from the semantic token `border` keys.
+ * e.g., 'strong' | 'subtle'
+ */
+export type BorderColorValue = keyof typeof semanticLight.border;
+
+/**
+ * Simplified text color values derived from the semantic token `text` keys.
+ * e.g., 'affirmative' | 'brand' | 'inverted' | 'primary' | 'secondary'
+ * Also accepts any raw color value or undefined.
+ */
+export type TextColorValue = keyof typeof semanticLight.text;
+
+/**
+ * Simplified icon color values derived from the semantic token `icon` keys.
+ * e.g., 'inverted' | 'primary'
+ */
+export type IconColorValue = keyof typeof semanticLight.icon;