@utilitywarehouse/hearth-react-native 0.35.2 → 0.35.4

package/build/components/RadioCard/RadioCard.d.ts

@@ -6,7 +6,7 @@ declare const RadioCardIcon: import("react").ForwardRefExoticComponent<import("r
 }>;
 declare const RadioCardLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const RadioCardGroup: {
-    ({ onChange, onValueChange, ...props }: RadioCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ onChange, onValueChange, disabled, ...props }: RadioCardGroupProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const RadioCard: {

package/build/components/RadioCard/RadioCard.js

@@ -19,7 +19,7 @@ const RadioCardGroupComponent = RadioCardComponent.Group;
 const RadioCardIndicator = RadioCardComponent.Indicator;
 const RadioCardIcon = RadioCardComponent.Icon;
 const RadioCardLabel = RadioCardComponent.Label;
-const RadioCardGroup = ({ onChange, onValueChange, ...props }) => (_jsx(RadioCardGroupComponent, { ...props, onChange: (value) => {
+const RadioCardGroup = ({ onChange, onValueChange, disabled, ...props }) => (_jsx(RadioCardGroupComponent, { ...props, disabled: disabled, isDisabled: disabled, onChange: (value) => {
         onChange?.(value);
         onValueChange?.(value);
     } }));

package/build/components/RadioCard/RadioCardGroup.context.d.ts

@@ -3,10 +3,12 @@ export declare const RadioCardGroupContext: import("react").Context<{
     flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
     justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
     alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    disabled?: boolean;
 }>;
 export declare const useRadioCardGroupContext: () => {
     flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
     flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
     justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
     alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    disabled?: boolean;
 };

package/build/components/RadioCard/RadioCardGroup.d.ts

@@ -1,6 +1,8 @@
 import RadioCardGroupProps from './RadioCardGroup.props';
 declare const RadioCardGroup: {
-    ({ children, gap, style, flexDirection, flexWrap, justifyContent, alignItems, columns, ...props }: RadioCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, gap, style, flexDirection, flexWrap, justifyContent, alignItems, columns, disabled, isDisabled, ...props }: RadioCardGroupProps & {
+        isDisabled?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default RadioCardGroup;

package/build/components/RadioCard/RadioCardGroup.js

@@ -4,10 +4,12 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Grid } from '../Grid';
 import { RadioCardGroupContext } from './RadioCardGroup.context';
-const RadioCardGroup = ({ children, gap = '200', style, flexDirection = 'row', flexWrap, justifyContent, alignItems, columns, ...props }) => {
+const RadioCardGroup = ({ children, gap = '200', style, flexDirection = 'row', flexWrap, justifyContent, alignItems, columns, disabled, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+isDisabled, ...props }) => {
     const context = useMemo(() => {
-        return { flexDirection, flexWrap, justifyContent, alignItems };
-    }, [flexDirection, flexWrap, justifyContent, alignItems]);
+        return { flexDirection, flexWrap, justifyContent, alignItems, disabled };
+    }, [flexDirection, flexWrap, justifyContent, alignItems, disabled]);
     return columns ? (_jsx(RadioCardGroupContext.Provider, { value: context, children: _jsx(Grid, { ...props, gap: gap, columns: columns, style: style, children: children }) })) : (_jsx(RadioCardGroupContext.Provider, { value: context, children: _jsx(View, { ...props, style: [
                 styles.containerGap(gap),
                 {

package/build/components/RadioCard/RadioCardGroup.props.d.ts

@@ -10,6 +10,7 @@ type RadioCardGroupBaseProps = {
      */
     onChange?: (value: string) => void;
     gap?: keyof typeof space;
+    disabled?: boolean;
     ref?: Ref<View>;
 } & ViewProps;
 type RadioCardGroupFlexProps = {

package/build/components/RadioCard/RadioCardRoot.d.ts

@@ -1,6 +1,6 @@
 import type RadioCardProps from './RadioCard.props';
 declare const RadioCardRoot: {
-    ({ children, style, states, ...props }: RadioCardProps & {
+    ({ children, style, states, disabled, ...props }: RadioCardProps & {
         states?: {
             disabled?: boolean;
             checked?: boolean;

package/build/components/RadioCard/RadioCardRoot.js

@@ -4,9 +4,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Pressable } from 'react-native';
 import { RadioCardContext } from './RadioCard.context';
 import { useRadioCardGroupContext } from './RadioCardGroup.context';
-const RadioCardRoot = ({ children, style, states, ...props }) => {
+const RadioCardRoot = ({ children, style, states, disabled, ...props }) => {
     const { checked, active } = states ?? {};
-    const { flexDirection } = useRadioCardGroupContext() ?? {};
+    const { flexDirection, disabled: groupDisabled } = useRadioCardGroupContext() ?? {};
+    const isDisabled = groupDisabled ?? disabled ?? undefined;
     const value = useMemo(() => ({
         checked,
         active,
@@ -14,8 +15,9 @@ const RadioCardRoot = ({ children, style, states, ...props }) => {
     styles.useVariants({
         selected: checked,
         flexDirection,
+        disabled: isDisabled,
     });
-    return (_jsx(RadioCardContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, style], children: children }) }));
+    return (_jsx(RadioCardContext.Provider, { value: value, children: _jsx(Pressable, { ...props, disabled: isDisabled, style: [styles.container, style], children: children }) }));
 };
 RadioCardRoot.displayName = 'RadioCardRoot';
 const styles = StyleSheet.create(theme => ({
@@ -50,6 +52,11 @@ const styles = StyleSheet.create(theme => ({
                     width: '100%',
                 },
             },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
         },
         _web: {
         // '_focus-visible': {

package/build/core/themes.d.ts

@@ -113,6 +113,7 @@ export declare const lightTheme: {
         readonly '700': 56;
         readonly '800': 64;
         readonly '900': 72;
+        readonly '1000': 80;
     };
     readonly borderWidth: {
         readonly '1': 1;
@@ -120,6 +121,7 @@ export declare const lightTheme: {
     };
     readonly borderRadius: {
         readonly full: 9999;
+        readonly lg: 12;
         readonly md: 8;
         readonly none: 0;
         readonly sm: 6;
@@ -153,6 +155,7 @@ export declare const lightTheme: {
         readonly '600': 28;
         readonly '700': 32;
         readonly '800': 36;
+        readonly '900': 40;
         readonly '950': 48;
         readonly '975': 52;
         readonly '1050': 62;
@@ -1185,6 +1188,7 @@ export declare const lightTheme: {
         };
         readonly cashbackLilac: {
             readonly '300': "#dfbdf5";
+            readonly '400': "#ce9cf0";
             readonly '500': "#be7aeb";
             readonly '700': "#8b2bc9";
             readonly '900': "#7429b5";
@@ -1233,6 +1237,7 @@ export declare const lightTheme: {
         };
         readonly mobileRose: {
             readonly '200': "#fad0e9";
+            readonly '300': "#f49fd2";
             readonly '400': "#ee6dbb";
             readonly '800': "#a7266d";
             readonly '900': "#8a3260";
@@ -1409,6 +1414,7 @@ export declare const darkTheme: {
         readonly '700': 56;
         readonly '800': 64;
         readonly '900': 72;
+        readonly '1000': 80;
     };
     readonly borderWidth: {
         readonly '1': 1;
@@ -1416,6 +1422,7 @@ export declare const darkTheme: {
     };
     readonly borderRadius: {
         readonly full: 9999;
+        readonly lg: 12;
         readonly md: 8;
         readonly none: 0;
         readonly sm: 6;
@@ -1449,6 +1456,7 @@ export declare const darkTheme: {
         readonly '600': 28;
         readonly '700': 32;
         readonly '800': 36;
+        readonly '900': 40;
         readonly '950': 48;
         readonly '975': 52;
         readonly '1050': 62;
@@ -2492,6 +2500,7 @@ export declare const darkTheme: {
         };
         readonly cashbackLilac: {
             readonly '300': "#dfbdf5";
+            readonly '400': "#ce9cf0";
             readonly '500': "#be7aeb";
             readonly '700': "#8b2bc9";
             readonly '900': "#7429b5";
@@ -2540,6 +2549,7 @@ export declare const darkTheme: {
         };
         readonly mobileRose: {
             readonly '200': "#fad0e9";
+            readonly '300': "#f49fd2";
             readonly '400': "#ee6dbb";
             readonly '800': "#a7266d";
             readonly '900': "#8a3260";
@@ -2717,6 +2727,7 @@ export declare const themes: {
             readonly '700': 56;
             readonly '800': 64;
             readonly '900': 72;
+            readonly '1000': 80;
         };
         readonly borderWidth: {
             readonly '1': 1;
@@ -2724,6 +2735,7 @@ export declare const themes: {
         };
         readonly borderRadius: {
             readonly full: 9999;
+            readonly lg: 12;
             readonly md: 8;
             readonly none: 0;
             readonly sm: 6;
@@ -2757,6 +2769,7 @@ export declare const themes: {
             readonly '600': 28;
             readonly '700': 32;
             readonly '800': 36;
+            readonly '900': 40;
             readonly '950': 48;
             readonly '975': 52;
             readonly '1050': 62;
@@ -3789,6 +3802,7 @@ export declare const themes: {
             };
             readonly cashbackLilac: {
                 readonly '300': "#dfbdf5";
+                readonly '400': "#ce9cf0";
                 readonly '500': "#be7aeb";
                 readonly '700': "#8b2bc9";
                 readonly '900': "#7429b5";
@@ -3837,6 +3851,7 @@ export declare const themes: {
             };
             readonly mobileRose: {
                 readonly '200': "#fad0e9";
+                readonly '300': "#f49fd2";
                 readonly '400': "#ee6dbb";
                 readonly '800': "#a7266d";
                 readonly '900': "#8a3260";
@@ -4013,6 +4028,7 @@ export declare const themes: {
             readonly '700': 56;
             readonly '800': 64;
             readonly '900': 72;
+            readonly '1000': 80;
         };
         readonly borderWidth: {
             readonly '1': 1;
@@ -4020,6 +4036,7 @@ export declare const themes: {
         };
         readonly borderRadius: {
             readonly full: 9999;
+            readonly lg: 12;
             readonly md: 8;
             readonly none: 0;
             readonly sm: 6;
@@ -4053,6 +4070,7 @@ export declare const themes: {
             readonly '600': 28;
             readonly '700': 32;
             readonly '800': 36;
+            readonly '900': 40;
             readonly '950': 48;
             readonly '975': 52;
             readonly '1050': 62;
@@ -5096,6 +5114,7 @@ export declare const themes: {
             };
             readonly cashbackLilac: {
                 readonly '300': "#dfbdf5";
+                readonly '400': "#ce9cf0";
                 readonly '500': "#be7aeb";
                 readonly '700': "#8b2bc9";
                 readonly '900': "#7429b5";
@@ -5144,6 +5163,7 @@ export declare const themes: {
             };
             readonly mobileRose: {
                 readonly '200': "#fad0e9";
+                readonly '300': "#f49fd2";
                 readonly '400': "#ee6dbb";
                 readonly '800': "#a7266d";
                 readonly '900': "#8a3260";

package/build/tokens/border-radius.d.ts

@@ -3,6 +3,7 @@
  */
 declare const _default: {
     readonly full: 9999;
+    readonly lg: 12;
     readonly md: 8;
     readonly none: 0;
     readonly sm: 6;

package/build/tokens/border-radius.js

@@ -3,6 +3,7 @@
  */
 export default {
     full: 9999,
+    lg: 12,
     md: 8,
     none: 0,
     sm: 6,

package/build/tokens/color.d.ts

@@ -16,6 +16,7 @@ export declare const broadbandGreen: {
 };
 export declare const cashbackLilac: {
     readonly '300': "#dfbdf5";
+    readonly '400': "#ce9cf0";
     readonly '500': "#be7aeb";
     readonly '700': "#8b2bc9";
     readonly '900': "#7429b5";
@@ -64,6 +65,7 @@ export declare const insuranceOrange: {
 };
 export declare const mobileRose: {
     readonly '200': "#fad0e9";
+    readonly '300': "#f49fd2";
     readonly '400': "#ee6dbb";
     readonly '800': "#a7266d";
     readonly '900': "#8a3260";
@@ -636,6 +638,7 @@ declare const color: {
     };
     readonly cashbackLilac: {
         readonly '300': "#dfbdf5";
+        readonly '400': "#ce9cf0";
         readonly '500': "#be7aeb";
         readonly '700': "#8b2bc9";
         readonly '900': "#7429b5";
@@ -684,6 +687,7 @@ declare const color: {
     };
     readonly mobileRose: {
         readonly '200': "#fad0e9";
+        readonly '300': "#f49fd2";
         readonly '400': "#ee6dbb";
         readonly '800': "#a7266d";
         readonly '900': "#8a3260";

package/build/tokens/color.js

@@ -16,6 +16,7 @@ export const broadbandGreen = {
 };
 export const cashbackLilac = {
     '300': '#dfbdf5',
+    '400': '#ce9cf0',
     '500': '#be7aeb',
     '700': '#8b2bc9',
     '900': '#7429b5',
@@ -64,6 +65,7 @@ export const insuranceOrange = {
 };
 export const mobileRose = {
     '200': '#fad0e9',
+    '300': '#f49fd2',
     '400': '#ee6dbb',
     '800': '#a7266d',
     '900': '#8a3260',

package/build/tokens/line-height.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
     readonly '600': 28;
     readonly '700': 32;
     readonly '800': 36;
+    readonly '900': 40;
     readonly '950': 48;
     readonly '975': 52;
     readonly '1050': 62;

package/build/tokens/line-height.js

@@ -9,6 +9,7 @@ export default {
     '600': 28,
     '700': 32,
     '800': 36,
+    '900': 40,
     '950': 48,
     '975': 52,
     '1050': 62,

package/build/tokens/primitive.d.ts

@@ -4,6 +4,7 @@
 declare const _default: {
     readonly borderRadius: {
         readonly full: 9999;
+        readonly lg: 12;
         readonly md: 8;
         readonly none: 0;
         readonly sm: 6;
@@ -56,6 +57,7 @@ declare const _default: {
         readonly '600': 28;
         readonly '700': 32;
         readonly '800': 36;
+        readonly '900': 40;
         readonly '950': 48;
         readonly '975': 52;
         readonly '1050': 62;
@@ -97,6 +99,7 @@ declare const _default: {
         readonly '700': 56;
         readonly '800': 64;
         readonly '900': 72;
+        readonly '1000': 80;
     };
 };
 export default _default;

package/build/tokens/primitive.js

@@ -4,6 +4,7 @@
 export default {
     borderRadius: {
         full: 9999,
+        lg: 12,
         md: 8,
         none: 0,
         sm: 6,
@@ -56,6 +57,7 @@ export default {
         '600': 28,
         '700': 32,
         '800': 36,
+        '900': 40,
         '950': 48,
         '975': 52,
         '1050': 62,
@@ -97,5 +99,6 @@ export default {
         '700': 56,
         '800': 64,
         '900': 72,
+        '1000': 80,
     },
 };

package/build/tokens/space.d.ts

@@ -19,5 +19,6 @@ declare const _default: {
     readonly '700': 56;
     readonly '800': 64;
     readonly '900': 72;
+    readonly '1000': 80;
 };
 export default _default;

package/build/tokens/space.js

@@ -19,4 +19,5 @@ export default {
     '700': 56,
     '800': 64,
     '900': 72,
+    '1000': 80,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.2",
+  "version": "0.35.4",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -78,10 +78,10 @@
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
-    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
-    "@utilitywarehouse/hearth-tokens": "^0.4.3"
+    "@utilitywarehouse/hearth-tokens": "^0.4.4"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/public/llms/components/radio-card.md

@@ -89,6 +89,7 @@ Contains all Group related layout style props and actions. It inherits all the p
 | `onChange`       | `(value: string) => void`                                                                                | -        | **Deprecated** — use `onValueChange` instead.                                                              |
 | `gap`            | `keyof typeof space`                                                                                     | -        | The gap between the `RadioCard` items.                                                                     |
 | `columns`        | `GridProps['columns']`                                                                                   | -        | If set, the group will use a grid layout with the specified number of columns. Otherwise, it uses flexbox. |
+| `disabled`       | `boolean`                                                                                                | -        | If `true`, disables all `RadioCard`s in the group.                                                         |
 | `flexDirection`  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                 | `'row'`  | (Flexbox only) Sets the direction of the flex items.                                                       |
 | `flexWrap`       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                   | `'wrap'` | (Flexbox only) Sets whether flex items are forced onto one line or can wrap.                               |
 | `alignItems`     | `'flex-start' \| 'flex-end' \| 'center' \| `<br />`'stretch' \| 'baseline'`                              | -        | (Flexbox only) Sets the alignment of flex items on the cross axis.                                         |

package/public/llms/docs/introduction.md

@@ -1,7 +1,7 @@
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v0.35.2
+Current version: v0.35.4
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.