@utilitywarehouse/hearth-react-native 0.8.1 → 0.9.0

package/src/components/RadioCard/RadioCardLabel.tsx

@@ -1,7 +1,18 @@
+import { StyleSheet } from 'react-native-unistyles';
 import { Label } from '../Label';
 import LabelProps from '../Label/Label.props';
 
-const RadioCardLabel = ({ children, ...props }: LabelProps) => <Label {...props}>{children}</Label>;
+const RadioCardLabel = ({ children, style, ...props }: LabelProps) => (
+  <Label {...props} style={[styles.label, style]}>
+    {children}
+  </Label>
+);
+
+const styles = StyleSheet.create({
+  label: {
+    flexShrink: 1,
+  },
+});
 
 RadioCardLabel.displayName = 'RadioCardLabel';
 

package/src/components/RadioCard/RadioCardRoot.tsx

@@ -4,6 +4,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Pressable, ViewStyle } from 'react-native';
 import { RadioCardContext } from './RadioCard.context';
 import type RadioCardProps from './RadioCard.props';
+import { useRadioCardGroupContext } from './RadioCardGroup.context';
 
 const RadioCardRoot = ({
   children,
@@ -13,6 +14,8 @@ const RadioCardRoot = ({
 }: RadioCardProps & { states?: { disabled?: boolean; checked?: boolean; active?: boolean } }) => {
   const { checked, active } = states ?? {};
 
+  const { flexDirection } = useRadioCardGroupContext() ?? {};
+
   const value = useMemo(
     () => ({
       checked,
@@ -23,6 +26,7 @@ const RadioCardRoot = ({
 
   styles.useVariants({
     selected: checked,
+    flexDirection,
   });
 
   return (
@@ -39,6 +43,7 @@ RadioCardRoot.displayName = 'RadioCardRoot';
 const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'column',
+
     gap: theme.components.card.selectable.gap,
     borderRadius: theme.components.card.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
@@ -58,6 +63,16 @@ const styles = StyleSheet.create(theme => ({
           margin: -theme.components.card.selectable.borderWidthSelected / 2,
         },
       },
+      flexDirection: {
+        row: {},
+        column: {
+          width: '100%',
+        },
+        'row-reverse': {},
+        'column-reverse': {
+          width: '100%',
+        },
+      },
     },
     _web: {
       '_focus-visible': {

package/src/components/index.ts

@@ -36,6 +36,7 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Menu';
 export * from './Modal';
 export * from './ProgressStepper';
 export * from './Radio';

package/src/core/themes.ts

@@ -269,6 +269,16 @@ const shared = {
 
 const lightHelpers = {
   ...shared.helpers,
+  shadow: {
+    functional: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.default}`,
+    brand: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.brand}`,
+    energy: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.energy}`,
+    broadband: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.broadband}`,
+    mobile: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.mobile}`,
+    insurance: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.insurance}`,
+    cashback: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.cashback}`,
+    pig: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.pig}`,
+  },
   focusVisible: {
     outlineStyle: 'solid',
     outlineWidth: 2,
@@ -303,6 +313,16 @@ export const lightTheme = {
 
 const darkHelpers = {
   ...shared.helpers,
+  shadow: {
+    functional: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.default}`,
+    brand: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.brand}`,
+    energy: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.energy}`,
+    broadband: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.broadband}`,
+    mobile: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.mobile}`,
+    insurance: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.insurance}`,
+    cashback: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.cashback}`,
+    pig: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.pig}`,
+  },
   focusVisible: {
     outlineStyle: 'solid',
     outlineWidth: 2,

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

@@ -18,7 +18,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -41,6 +40,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -49,6 +49,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

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

@@ -22,6 +22,9 @@ export default {
   minWidth: 152,
   paddingHorizontal: 16,
   paddingVertical: 12,
+  stepper: {
+    gap: 4,
+  },
   textArea: {
     height: 96,
   },

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

@@ -11,17 +11,20 @@ export default {
     gap: 12,
   },
   gap: 24,
-  padding: 48,
+  heading: {
+    gap: 24,
+  },
+  illustration: {
+    padding: 48,
+  },
+  padding: 24,
   mobile: {
-    padding: 16,
     width: 360,
   },
   tablet: {
-    padding: 48,
     width: 504,
   },
   desktop: {
-    padding: 48,
     width: 680,
   },
 } as const;

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  borderWidth: 2,
+  gap: 4,
+} as const;

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

@@ -14,9 +14,6 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
-    neutral: {
-      backgroundColor: '#30302c',
-    },
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/components/dark/time-picker.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gap: 6,
+  gapContainer: 4,
+  minWidth: 288,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  time: {
+    columnGap: 4,
+    content: {
+      gap: 8,
+      item: {
+        gap: 2,
+      },
+    },
+    footer: {
+      gap: 8,
+    },
+    gap: 16,
+    item: {
+      height: 40,
+      width: 64,
+    },
+    rowGap: 2,
+  },
+} as const;

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

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  bar: {
+    width: 2,
+  },
+  content: {
+    gap: 8,
+    paddingBottom: 24,
+    paddingTop: 2,
+  },
+  gap: 12,
+  progress: {
+    circle: {
+      height: 24,
+      width: 24,
+    },
+  },
+  static: {
+    circle: {
+      height: 12,
+      width: 12,
+    },
+  },
+} as const;

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

@@ -18,7 +18,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -41,6 +40,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -49,6 +49,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

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

@@ -22,6 +22,9 @@ export default {
   minWidth: 120,
   paddingHorizontal: 16,
   paddingVertical: 12,
+  stepper: {
+    gap: 4,
+  },
   textArea: {
     height: 96,
   },

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

@@ -11,17 +11,20 @@ export default {
     gap: 12,
   },
   gap: 24,
-  padding: 16,
+  heading: {
+    gap: 24,
+  },
+  illustration: {
+    padding: 48,
+  },
+  padding: 24,
   mobile: {
-    padding: 16,
     width: 360,
   },
   tablet: {
-    padding: 48,
     width: 504,
   },
   desktop: {
-    padding: 48,
     width: 680,
   },
 } as const;

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  borderWidth: 2,
+  gap: 4,
+} as const;

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

@@ -14,9 +14,6 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
-    neutral: {
-      backgroundColor: '#f1efe4',
-    },
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/components/light/time-picker.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gap: 6,
+  gapContainer: 4,
+  minWidth: 288,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  time: {
+    columnGap: 4,
+    content: {
+      gap: 8,
+      item: {
+        gap: 2,
+      },
+    },
+    footer: {
+      gap: 8,
+    },
+    gap: 16,
+    item: {
+      height: 40,
+      width: 64,
+    },
+    rowGap: 2,
+  },
+} as const;

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

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  bar: {
+    width: 2,
+  },
+  content: {
+    gap: 8,
+    paddingBottom: 24,
+    paddingTop: 2,
+  },
+  gap: 12,
+  progress: {
+    circle: {
+      height: 28,
+      width: 28,
+    },
+  },
+  static: {
+    circle: {
+      height: 12,
+      width: 12,
+    },
+  },
+} as const;

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

@@ -1,25 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-declare const _default: {
-    readonly action: {
-        readonly gap: 12;
-    };
-    readonly borderRadius: 16;
-    readonly content: {
-        readonly gap: 12;
-        readonly paddingBottom: 12;
-    };
-    readonly gap: 24;
-    readonly padding: 24;
-    readonly mobile: {
-        readonly width: 360;
-    };
-    readonly tablet: {
-        readonly width: 504;
-    };
-    readonly desktop: {
-        readonly width: 680;
-    };
-};
-export default _default;

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

@@ -1,24 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-export default {
-    action: {
-        gap: 12,
-    },
-    borderRadius: 16,
-    content: {
-        gap: 12,
-        paddingBottom: 12,
-    },
-    gap: 24,
-    padding: 24,
-    mobile: {
-        width: 360,
-    },
-    tablet: {
-        width: 504,
-    },
-    desktop: {
-        width: 680,
-    },
-};

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

@@ -1,25 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-declare const _default: {
-    readonly action: {
-        readonly gap: 12;
-    };
-    readonly borderRadius: 16;
-    readonly content: {
-        readonly gap: 12;
-        readonly paddingBottom: 12;
-    };
-    readonly gap: 24;
-    readonly padding: 24;
-    readonly mobile: {
-        readonly width: 360;
-    };
-    readonly tablet: {
-        readonly width: 504;
-    };
-    readonly desktop: {
-        readonly width: 680;
-    };
-};
-export default _default;

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

@@ -1,24 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-export default {
-    action: {
-        gap: 12,
-    },
-    borderRadius: 16,
-    content: {
-        gap: 12,
-        paddingBottom: 12,
-    },
-    gap: 24,
-    padding: 24,
-    mobile: {
-        width: 360,
-    },
-    tablet: {
-        width: 504,
-    },
-    desktop: {
-        width: 680,
-    },
-};

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

@@ -1,25 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export default {
-  action: {
-    gap: 12,
-  },
-  borderRadius: 16,
-  content: {
-    gap: 12,
-    paddingBottom: 12,
-  },
-  gap: 24,
-  padding: 24,
-  mobile: {
-    width: 360,
-  },
-  tablet: {
-    width: 504,
-  },
-  desktop: {
-    width: 680,
-  },
-} as const;

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

@@ -1,25 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export default {
-  action: {
-    gap: 12,
-  },
-  borderRadius: 16,
-  content: {
-    gap: 12,
-    paddingBottom: 12,
-  },
-  gap: 24,
-  padding: 24,
-  mobile: {
-    width: 360,
-  },
-  tablet: {
-    width: 504,
-  },
-  desktop: {
-    width: 680,
-  },
-} as const;