@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/Button/ButtonGroupRoot.tsx

@@ -0,0 +1,70 @@
+import { type StyleProp, type ViewStyle, type ViewProps, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+const ButtonGroupRoot = ({
+  children,
+  attached = false,
+  flexDirection = 'row',
+  reversed = false,
+  space = 'md',
+  ...props
+}: ViewProps & {
+  flexDirection?: ViewStyle['flexDirection'];
+  reversed?: boolean;
+  attached?: boolean;
+  space?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}) => {
+  let direction = flexDirection;
+  if (reversed) {
+    if (flexDirection === 'row') direction = 'row-reverse';
+    if (flexDirection === 'column') direction = 'column-reverse';
+    if (flexDirection === 'row-reverse') direction = 'row';
+    if (flexDirection === 'column-reverse') direction = 'column';
+  }
+  styles.useVariants({
+    attached,
+    space,
+  });
+  return (
+    <View
+      {...props}
+      style={[styles.text, styles.extraStyles(direction) as StyleProp<ViewStyle>, props.style]}
+    >
+      {children}
+    </View>
+  );
+};
+
+ButtonGroupRoot.displayName = 'ButtonGroupRoot';
+
+const styles = StyleSheet.create(theme => ({
+  text: {
+    variants: {
+      space: {
+        xs: {
+          gap: theme.layout.mobile.spacing.xs,
+        },
+        sm: {
+          gap: theme.layout.mobile.spacing.sm,
+        },
+        md: {
+          gap: theme.layout.mobile.spacing.md,
+        },
+        lg: {
+          gap: theme.layout.mobile.spacing.lg,
+        },
+        xl: {
+          gap: theme.layout.mobile.spacing.xl,
+        },
+      },
+      attached: {
+        true: {
+          gap: 0,
+        },
+      },
+    },
+  },
+  extraStyles: (flexDirection: ViewStyle['flexDirection']) => ({ flexDirection }),
+}));
+
+export default ButtonGroupRoot;

package/src/components/Button/ButtonIcon.tsx

@@ -0,0 +1,140 @@
+import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { useButtonContext } from './Button.context';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+import IconProps from '../Icon/Icon.props';
+
+const ButtonIcon = ({ children, ...props }: IconProps) => {
+  const { colorScheme, variant, inverted, disabled } = useButtonContext();
+  styles.useVariants({ colorScheme, variant, inverted, disabled });
+
+  return (
+    <Icon
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          : [styles.icon as StyleProp<ViewStyle>, props.style]
+      }
+    >
+      {children}
+    </Icon>
+  );
+};
+
+ButtonIcon.displayName = 'ButtonIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    variants: {
+      variant: {
+        emphasis: {},
+        solid: {},
+        outline: {},
+        ghost: {},
+      },
+      colorScheme: {
+        yellow: {},
+        red: {},
+        green: {},
+        grey: {},
+      },
+      inverted: {
+        true: {},
+      },
+      disabled: {
+        true: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'emphasis',
+        colorScheme: 'yellow',
+        styles: {
+          color: theme.components.button.emphasis.yellow.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'yellow',
+        styles: {
+          color: theme.components.button.solid.yellow.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.solid.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.solid.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.outline.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.outline.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        styles: {
+          color: theme.components.button.outline.grey.foregroundColor,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        inverted: true,
+        styles: {
+          color: theme.components.button.outline.grey.inverted.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'red',
+        styles: {
+          color: theme.components.button.ghost.red.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'green',
+        styles: {
+          color: theme.components.button.ghost.green.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        styles: {
+          color: theme.components.button.outline.grey.foregroundColor,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        inverted: true,
+        styles: {
+          color: theme.components.button.outline.grey.inverted.foregroundColor,
+        },
+      },
+    ],
+  },
+}));
+
+export default ButtonIcon;

package/src/components/Button/ButtonRoot.tsx

@@ -0,0 +1,452 @@
+import { useMemo } from 'react';
+import { Pressable, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useCardActionContext } from '../Card';
+import { ButtonContext } from './Button.context';
+import type { BaseButtonProps } from './Button.props';
+
+const ButtonRoot = ({
+  children,
+  colorScheme = 'yellow',
+  variant = 'solid',
+  size = 'md',
+  inverted = false,
+  states,
+  onPress,
+  paddingNone = false,
+  ...props
+}: BaseButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+  const { active, disabled = false } = states || {};
+  const { pressed } = useCardActionContext();
+
+  styles.useVariants({
+    variant,
+    size,
+    colorScheme,
+    disabled,
+    inverted,
+    active: active || pressed,
+    paddingNone,
+  });
+
+  const value = useMemo(
+    () => ({ colorScheme, variant, size, inverted, disabled, active }),
+    [colorScheme, variant, size, inverted, disabled, active]
+  );
+  return (
+    <ButtonContext.Provider value={value}>
+      <Pressable {...props} style={[styles.container, props.style as ViewStyle]} onPress={onPress}>
+        {children}
+      </Pressable>
+    </ButtonContext.Provider>
+  );
+};
+
+ButtonRoot.displayName = 'ButtonRoot';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: theme.components.button.borderWidth,
+    borderRadius: theme.components.button.borderRadius,
+    gap: theme.components.button.gap,
+    minWidth: theme.components.button.minWidth,
+    _web: {
+      '_focus-visible': {
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineColor: theme.components.focus.border,
+        outlineOffset: 1,
+        boxShadow: 'none',
+      },
+    },
+    variants: {
+      colorScheme: {
+        yellow: {},
+        green: {},
+        red: {},
+        grey: {},
+      },
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      inverted: {
+        true: {
+          _web: {
+            '_focus-visible': {
+              outlineColor: theme.components.focus.borderInverted,
+            },
+          },
+        },
+      },
+      active: {
+        true: {},
+      },
+      variant: {
+        emphasis: {
+          borderColor: theme.components.button.emphasis.borderColor,
+          boxShadow: `${theme.shadow.mobile.sm.x}px ${theme.shadow.mobile.sm.y}px ${theme.shadow.mobile.sm.spread}px ${theme.components.button.emphasis.shadowColor}`,
+        },
+        solid: {
+          borderColor: theme.components.button.solid.borderColor,
+        },
+        outline: {
+          backgroundColor: 'transparent',
+          borderWidth: 2,
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+        },
+      },
+      size: {
+        sm: {
+          paddingVertical: theme.components.button.sm.paddingVertical,
+          paddingHorizontal: theme.components.button.sm.paddingHorizontal,
+          minHeight: 32,
+        },
+        md: {
+          paddingVertical: theme.components.button.md.paddingVertical,
+          paddingHorizontal: theme.components.button.md.paddingHorizontal,
+          minHeight: 48,
+        },
+      },
+      paddingNone: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      // Padding None
+      {
+        size: 'sm',
+        paddingNone: true,
+        variant: 'ghost',
+        styles: {
+          paddingHorizontal: 0,
+        },
+      },
+      // Variant Color Schemes
+      // Emphasis
+      // Emphasis Yellow
+      {
+        variant: 'emphasis',
+        active: true,
+        styles: {
+          marginTop: 4,
+          marginLeft: 4,
+          marginBottom: -4,
+          marginRight: -4,
+          boxShadow: 'none',
+        },
+      },
+      {
+        variant: 'emphasis',
+        colorScheme: 'yellow',
+        styles: {
+          backgroundColor: theme.components.button.emphasis.yellow.backgroundColor,
+          borderColor: theme.components.button.emphasis.borderColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.emphasis.yellow.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.emphasis.yellow.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'emphasis',
+        colorScheme: 'yellow',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.emphasis.yellow.backgroundColorActive,
+        },
+      },
+      // Solid
+      // Solid Yellow
+      {
+        variant: 'solid',
+        colorScheme: 'yellow',
+        styles: {
+          backgroundColor: theme.components.button.solid.yellow.backgroundColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.solid.yellow.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.solid.yellow.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'yellow',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.solid.yellow.backgroundColorActive,
+        },
+      },
+      // Solid Green
+      {
+        variant: 'solid',
+        colorScheme: 'green',
+        styles: {
+          backgroundColor: theme.components.button.solid.green.backgroundColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.solid.green.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.solid.green.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'green',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.solid.green.backgroundColorActive,
+        },
+      },
+      // Solid Red
+      {
+        variant: 'solid',
+        colorScheme: 'red',
+        styles: {
+          backgroundColor: theme.components.button.solid.red.backgroundColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.solid.red.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.solid.red.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'solid',
+        colorScheme: 'red',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.solid.red.backgroundColorActive,
+        },
+      },
+      // Outline
+      // Outline Grey
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        styles: {
+          borderColor: theme.components.button.outline.grey.borderColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.outline.grey.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.outline.grey.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.outline.grey.backgroundColorActive,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        inverted: true,
+        styles: {
+          borderColor: theme.components.button.outline.grey.inverted.borderColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        inverted: true,
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'grey',
+        inverted: true,
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
+        },
+      },
+      // Outline Green
+
+      {
+        variant: 'outline',
+        colorScheme: 'green',
+        styles: {
+          borderColor: theme.components.button.outline.green.borderColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.outline.green.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.outline.green.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'green',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.outline.green.backgroundColorActive,
+        },
+      },
+      // Outline Red
+      {
+        variant: 'outline',
+        colorScheme: 'red',
+        styles: {
+          borderColor: theme.components.button.outline.red.borderColor,
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.outline.red.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.outline.red.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'outline',
+        colorScheme: 'red',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.outline.red.backgroundColorActive,
+        },
+      },
+      // Ghost
+      // Ghost Grey
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        styles: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.ghost.grey.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.ghost.grey.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.ghost.grey.backgroundColorActive,
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        inverted: true,
+        styles: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'grey',
+        inverted: true,
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorActive,
+        },
+      },
+      // Ghost Green
+      {
+        variant: 'ghost',
+        colorScheme: 'green',
+        styles: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.ghost.green.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.ghost.green.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'green',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.ghost.green.backgroundColorActive,
+        },
+      },
+      // Ghost Red
+      {
+        variant: 'ghost',
+        colorScheme: 'red',
+        styles: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.components.button.ghost.red.backgroundColorHover,
+            },
+            _active: {
+              backgroundColor: theme.components.button.ghost.red.backgroundColorActive,
+            },
+          },
+        },
+      },
+      {
+        variant: 'ghost',
+        colorScheme: 'red',
+        active: true,
+        styles: {
+          backgroundColor: theme.components.button.ghost.red.backgroundColorActive,
+        },
+      },
+    ],
+  },
+}));
+
+export default ButtonRoot;