@utilitywarehouse/hearth-react-native 0.35.3 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.3",
+  "version": "0.35.4",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -78,8 +78,8 @@
     "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.4"
   },

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.3
+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.