@utilitywarehouse/hearth-react-native 0.3.0 → 0.3.1

package/src/components/Alert/AlertIcon.tsx

@@ -19,6 +19,7 @@ const AlertIcon = (props: IconProps) => {
     }
     return InfoMediumIcon;
   })();
+  styles.useVariants({ colorScheme });
   return <Icon {...props} as={props.as ?? asProp} style={styles.icon} />;
 };
 
@@ -31,7 +32,22 @@ const styles = StyleSheet.create(theme => ({
     minWidth: 24,
     minHeight: 24,
     alignSelf: 'flex-start',
-    color: theme.color.icon.primary,
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
   },
 }));
 

package/src/components/Alert/AlertIconButton.tsx

@@ -1,15 +1,48 @@
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { ComponentType } from 'react';
 import { ViewStyle } from 'react-native';
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton, UnstyledIconButtonProps } from '../UnstyledIconButton';
+import { useAlertContext } from './Alert.context';
 
 const AlertIconButton = ({
   style,
   icon = ChevronRightSmallIcon,
   ...props
-}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => (
-  <UnstyledIconButton {...props} size="sm" style={style as ViewStyle} icon={icon} />
-);
+}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
+  return (
+    <UnstyledIconButton
+      {...props}
+      size="sm"
+      style={style as ViewStyle}
+      icon={icon}
+      iconStyle={styles.icon as ViewStyle}
+    />
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+}));
 
 AlertIconButton.displayName = 'AlertIconButton';
 

package/src/components/Alert/AlertLink.tsx

@@ -1,9 +1,60 @@
+import { StyleSheet } from 'react-native-unistyles';
 import { Link, LinkProps } from '../Link';
+import { useAlertContext } from './Alert.context';
 
 const AlertLink = ({ children, ...props }: LinkProps) => {
-  return <Link {...props}>{children}</Link>;
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
+  return (
+    <Link {...props} textStyle={styles.text} iconStyle={styles.icon}>
+      {children}
+    </Link>
+  );
 };
 
+const styles = StyleSheet.create(theme => ({
+  text: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+          textDecorationColor: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+          textDecorationColor: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+          textDecorationColor: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+          textDecorationColor: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+  icon: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+}));
+
 AlertLink.displayName = 'AlertLink';
 
 export default AlertLink;

package/src/components/Alert/AlertText.tsx

@@ -1,14 +1,39 @@
-import { TextProps } from 'react-native';
+import { TextProps, TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { useAlertContext } from './Alert.context';
 
-const AlertText = ({ children, ...props }: TextProps & { semibold?: boolean }) => {
+const AlertText = ({ children, style, ...props }: TextProps & { semibold?: boolean }) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
   return (
-    <BodyText size="md" {...props}>
+    <BodyText size="md" style={[styles.text as TextStyle, style]} {...props}>
       {children}
     </BodyText>
   );
 };
 
+const styles = StyleSheet.create(theme => ({
+  text: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+}));
+
 AlertText.displayName = 'AlertText';
 
 export default AlertText;

package/src/components/Alert/AlertTitle.tsx

@@ -1,14 +1,39 @@
-import type { TextProps } from 'react-native';
+import type { TextProps, TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../DetailText';
+import { useAlertContext } from './Alert.context';
 
-const AlertTitle = ({ children, ...props }: TextProps) => {
+const AlertTitle = ({ children, style, ...props }: TextProps) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
   return (
-    <DetailText size="md" {...props}>
+    <DetailText size="md" style={[styles.title as TextStyle, style]} {...props}>
       {children}
     </DetailText>
   );
 };
 
+const styles = StyleSheet.create(theme => ({
+  title: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground,
+        },
+      },
+    },
+  },
+}));
+
 AlertTitle.displayName = 'AlertTitle';
 
 export default AlertTitle;

package/src/components/Badge/BadgeIcon.tsx

@@ -43,6 +43,78 @@ const styles = StyleSheet.create(theme => ({
       },
     },
     compoundVariants: [
+      // Emphasis
+      {
+        colorScheme: 'info',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'danger',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'positive',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'warning',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'functional',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.functional.foreground.default,
+        },
+      },
+      // Subtle
+      {
+        colorScheme: 'info',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'danger',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'positive',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'warning',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'functional',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.functional.foreground.default,
+        },
+      },
       // Outline
       {
         colorScheme: 'info',

package/src/components/Badge/BadgeText.tsx

@@ -43,6 +43,78 @@ const styles = StyleSheet.create(theme => ({
       },
     },
     compoundVariants: [
+      // Emphasis
+      {
+        colorScheme: 'info',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'danger',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'positive',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'warning',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'functional',
+        variant: 'emphasis',
+        styles: {
+          color: theme.color.feedback.functional.foreground.default,
+        },
+      },
+      // Subtle
+      {
+        colorScheme: 'info',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'danger',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'positive',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'warning',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+      {
+        colorScheme: 'functional',
+        variant: 'subtle',
+        styles: {
+          color: theme.color.feedback.functional.foreground.default,
+        },
+      },
       // Outline
       {
         colorScheme: 'info',

package/src/components/Button/ButtonRoot.tsx

@@ -201,6 +201,7 @@ const styles = StyleSheet.create(theme => ({
         colorScheme: 'affirmative',
         styles: {
           backgroundColor: theme.color.interactive.affirmative.surface.strong.default,
+          borderColor: theme.color.interactive.affirmative.border.strong,
           _web: {
             _hover: {
               backgroundColor: theme.color.interactive.affirmative.surface.strong.hover,

package/src/components/Checkbox/Checkbox.docs.mdx

@@ -1,17 +1,17 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './Checkbox.stories';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import {
+  Box,
+  Center,
   Checkbox,
   CheckboxGroup,
-  CheckboxTile,
   CheckboxIndicator,
   CheckboxLabel,
-  Center,
-  Box,
+  CheckboxTile,
   FormField,
 } from '../../';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Checkbox.stories';
 
 <Meta title="Forms / Checkbox" />
 
@@ -33,10 +33,12 @@ Whether you're building a simple form or a complex data collection system, the C
   - [`CheckboxIcon`](#checkboxicon)
   - [`CheckboxLabel`](#checkboxlabel)
   - [`CheckboxGroup`](#checkboxgroup)
+  - [`CheckboxImage`](#checkboximage)
 - [Variants](#variants)
 - [Advanced Usage](#advanced-usage)
 - [Examples](#examples)
   - [`CheckboxTile` component](#checkboxtile-component)
+  - [`CheckboxImage` component](#checkboximage-component)
   - [`CheckboxGroup` component](#checkboxgroup-component)
 
 ## Playground
@@ -89,6 +91,7 @@ const MyComponent = () => {
 | `validText`          | `string`                            | -         | The valid text to be displayed below the checkbox.                                                                   |
 | `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                                 |
 | `type`               | `'default' \| 'tile'`               | `default` | The type of the checkbox.                                                                                            |
+| `image`              | `ImageProps`                        | -         | The image to be displayed next to the label.                                                                         |
 
 ## Components
 
@@ -205,6 +208,10 @@ const MyComponent = () => {
 | `disabled`         | `bool`                              | `false` | To manually set disable to the checkbox.                               |
 | `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | -       | The validation status of the checkbox group.                           |
 
+### `CheckboxImage`
+
+The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
+
 ## Variants
 
 <Canvas of={Stories.Variants} />
@@ -322,6 +329,37 @@ const MyComponent = () => {
 };
 ```
 
+### `CheckboxImage` component
+
+The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
+
+<Canvas of={Stories.WithImage} />
+
+```tsx
+import { Checkbox } from '@utilitywarehouse/native-ui';
+import visaLogo from '../../../assets/visa.png';
+import mastercardLogo from '../../../assets/mastercard.png';
+
+const MyComponent = () => {
+  return (
+    <CheckboxGroup>
+      <Checkbox
+        value="visa"
+        aria-label="Visa"
+        label="Visa"
+        image={{ source: visaLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+      />
+      <Checkbox
+        value="mastercard"
+        aria-label="Mastercard"
+        label="Mastercard"
+        image={{ source: mastercardLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+      />
+    </CheckboxGroup>
+  );
+};
+```
+
 ### `CheckboxGroup` component
 
 The `CheckboxGroup` component is used to group multiple `Checkbox` components together.

package/src/components/Checkbox/Checkbox.props.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
+import type { ImageProps, PressableProps, ViewProps } from 'react-native';
 
 type CheckboxBaseProps = {
   onChange?: (isSelected: boolean) => void;
@@ -26,6 +26,7 @@ type CheckboxWithChildrenProps = {
   invalidText?: never;
   validText?: never;
   showValidationIcon?: never;
+  image?: never;
 } & CheckboxBaseProps;
 
 type CheckboxWithoutChildrenProps = {
@@ -36,6 +37,7 @@ type CheckboxWithoutChildrenProps = {
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;
+  image?: ImageProps;
 } & CheckboxBaseProps;
 
 type CheckboxProps = CheckboxWithChildrenProps | CheckboxWithoutChildrenProps;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
+import { ImageSourcePropType } from 'react-native';
 import { Checkbox, CheckboxGroup } from '.';
-import { Meta, StoryObj } from '@storybook/react-vite';
+import bankLogo from '../../../docs/assets/bank-logo.png';
+import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
 
 const meta = {
@@ -91,6 +94,39 @@ export const Playground: Story = {
   },
 };
 
+export const WithImage: Story = {
+  render: ({ children, ...args }) => (
+    <CheckboxGroup aria-label="Checkbox Group" nativeID="checkbox-group">
+      <Checkbox
+        aria-label="Visa"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="checkbox-1"
+        {...args}
+        value="visa"
+        label="Visa"
+        image={{ source: bankLogo1 as ImageSourcePropType, style: { width: 40, height: 24 } }}
+      />
+      <Checkbox
+        aria-label="Mastercard"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="checkbox-2"
+        {...args}
+        value="mastercard"
+        label="Mastercard"
+        image={{
+          source: bankLogo as ImageSourcePropType,
+          style: { width: 40, height: 24 },
+          resizeMode: 'contain',
+        }}
+      />
+    </CheckboxGroup>
+  ),
+};
+
 export const Variants: Story = {
   render: () => {
     const [values, setValues] = React.useState(['Label 1']);

package/src/components/Checkbox/Checkbox.tsx

@@ -1,15 +1,16 @@
 import { createCheckbox } from '@gluestack-ui/checkbox';
-import StyledCheckbox from './CheckboxRoot';
-import StyledCheckboxIndicator from './CheckboxIndicator';
-import StyledCheckboxIcon from './CheckboxIcon';
-import StyledCheckboxLabel from './CheckboxLabel';
-import StyledCheckboxGroup from './CheckboxGroupRoot';
-import CheckboxProps from './Checkbox.props';
+import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
+import CheckboxProps from './Checkbox.props';
 import { useCheckboxGroupContext } from './CheckboxGroup.context';
-import { useFormFieldContext } from '../FormField';
-import CheckboxTileRoot from './CheckboxTileRoot';
+import StyledCheckboxGroup from './CheckboxGroupRoot';
+import StyledCheckboxIcon from './CheckboxIcon';
+import CheckboxImage from './CheckboxImage';
+import StyledCheckboxIndicator from './CheckboxIndicator';
+import StyledCheckboxLabel from './CheckboxLabel';
+import StyledCheckbox from './CheckboxRoot';
 import CheckboxTextContent from './CheckboxTextContent';
+import CheckboxTileRoot from './CheckboxTileRoot';
 
 const CheckboxComponent = createCheckbox({
   Root: StyledCheckbox,
@@ -41,6 +42,7 @@ const Checkbox = ({
   validationStatus: validation,
   showValidationIcon,
   type = 'default',
+  image,
   ...props
 }: CheckboxProps) => {
   const { validationStatus: fieldValidationStatus } = useFormFieldContext();
@@ -55,6 +57,7 @@ const Checkbox = ({
       <CheckboxIndicator>
         <CheckboxIcon />
       </CheckboxIndicator>
+      {image ? <CheckboxImage {...image} /> : null}
       <CheckboxTextContent>
         {!!label && <CheckboxLabel>{label}</CheckboxLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
@@ -96,6 +99,6 @@ CheckboxTile.displayName = 'CheckboxTile';
 
 Checkbox.displayName = 'Checkbox';
 
-export { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, CheckboxTile };
+export { Checkbox, CheckboxGroup, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile };
 
 export default Checkbox;

package/src/components/Checkbox/CheckboxIcon.tsx

@@ -20,7 +20,7 @@ const CheckboxIcon = ({ style, ...props }: IconProps) => {
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.color.icon.inverted,
+    color: theme.components.checkbox.checked.icon.color,
   },
 }));
 

package/src/components/Checkbox/CheckboxImage.tsx

@@ -0,0 +1,9 @@
+import { Image, ImageProps } from 'react-native';
+
+const CheckboxImage = ({ source, style, ...props }: ImageProps) => (
+  <Image source={source} style={style} {...props} />
+);
+
+CheckboxImage.displayName = 'CheckboxImage';
+
+export default CheckboxImage;

package/src/components/Checkbox/CheckboxTileRoot.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create(theme => ({
     gap: theme.components.checkbox.gap,
     padding: theme.components.checkbox.tile.padding,
     borderWidth: theme.components.checkbox.tile.borderWidth,
-    borderColor: theme.color.border.subtle,
+    borderColor: theme.color.border.strong,
     borderRadius: theme.components.checkbox.tile.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
     variants: {

package/src/components/Checkbox/index.ts

@@ -1,11 +1,12 @@
 export {
   default as Checkbox,
+  CheckboxIcon,
   CheckboxIndicator,
   CheckboxLabel,
-  CheckboxIcon,
   CheckboxTile,
 } from './Checkbox';
+export type { default as CheckboxProps } from './Checkbox.props';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as CheckboxGroupTextContent } from './CheckboxGroupTextContent';
+export { default as CheckboxImage } from './CheckboxImage';
 export { default as CheckboxTextContent } from './CheckboxTextContent';
-export type { default as CheckboxProps } from './Checkbox.props';