@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/VerificationInput/VerificationInputSlot.tsx

@@ -1,170 +0,0 @@
-import { forwardRef, useEffect } from 'react';
-import { Pressable, Text, View, ViewProps } from 'react-native';
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withTiming,
-} from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
-
-interface VerificationInputSlotProps extends ViewProps {
-  value: string;
-  isActive: boolean;
-  showCaret?: boolean;
-  validationStatus: 'initial' | 'valid' | 'invalid';
-  disabled?: boolean;
-  readonly?: boolean;
-  onPress?: () => void;
-  secureTextEntry?: boolean;
-}
-
-export const VerificationInputSlot = forwardRef<View, VerificationInputSlotProps>(
-  (
-    {
-      value,
-      isActive,
-      showCaret,
-      validationStatus,
-      disabled,
-      readonly,
-      style,
-      onPress,
-      secureTextEntry,
-      ...props
-    },
-    ref
-  ) => {
-    styles.useVariants({
-      disabled,
-      readonly,
-      validationStatus,
-      active: isActive,
-      secureTextEntry,
-    });
-
-    const caretOpacity = useSharedValue(0);
-    const animatedCaretStyle = useAnimatedStyle(() => ({
-      opacity: caretOpacity.value,
-    }));
-
-    useEffect(() => {
-      if (showCaret && !disabled && !readonly) {
-        caretOpacity.value = withRepeat(
-          withTiming(1, { duration: 500, easing: Easing.inOut(Easing.ease) }),
-          -1,
-          true
-        );
-        return;
-      }
-
-      caretOpacity.value = withTiming(0, { duration: 150, easing: Easing.out(Easing.ease) });
-    }, [caretOpacity, disabled, readonly, showCaret]);
-
-    return (
-      <Pressable
-        ref={ref}
-        onPress={onPress}
-        disabled={disabled || readonly}
-        style={[styles.slot, style]}
-        accessibilityRole="button"
-        accessible={false}
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
-        {...props}
-      >
-        <Text style={styles.slotText}>{value}</Text>
-        {showCaret && !disabled && !readonly && (
-          <Animated.View style={[styles.caret, animatedCaretStyle]} />
-        )}
-      </Pressable>
-    );
-  }
-);
-
-VerificationInputSlot.displayName = 'VerificationInputSlot';
-
-const styles = StyleSheet.create(theme => ({
-  slot: {
-    flexGrow: 0,
-    flexShrink: 0,
-    width: theme.components.input.height,
-    height: theme.components.input.height,
-    minWidth: theme.components.input.height,
-    minHeight: theme.components.input.height,
-    borderWidth: theme.components.input.borderWidth,
-    borderColor: theme.color.border.strong,
-    borderRadius: theme.components.input.borderRadius,
-    backgroundColor: theme.color.surface.neutral.strong,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 0,
-    position: 'relative',
-    variants: {
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-          color: theme.color.text.secondary,
-        },
-      },
-      readonly: {
-        true: {
-          borderColor: theme.color.border.subtle,
-          backgroundColor: theme.color.surface.neutral.subtle,
-        },
-      },
-      validationStatus: {
-        initial: {},
-        valid: {
-          borderColor: theme.color.feedback.positive.border,
-        },
-        invalid: {
-          borderColor: theme.color.feedback.danger.border,
-        },
-      },
-      active: {
-        true: {
-          borderColor: theme.color.border.strong,
-          borderWidth: theme.components.input.borderWidthFocused,
-        },
-      },
-    },
-    compoundVariants: [
-      {
-        validationStatus: 'invalid',
-        active: true,
-        styles: {
-          borderColor: theme.color.feedback.danger.border,
-        },
-      },
-      {
-        validationStatus: 'valid',
-        active: true,
-        styles: {
-          borderColor: theme.color.border.strong,
-        },
-      },
-    ],
-  },
-  slotText: {
-    color: theme.color.text.primary,
-    fontSize: theme.typography.mobile.bodyText.md.fontSize,
-    fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
-    textAlign: 'center',
-    variants: {
-      secureTextEntry: {
-        true: {
-          paddingTop: 5,
-        },
-      },
-    },
-  },
-  caret: {
-    position: 'absolute',
-    width: 2,
-    height: '55%',
-    backgroundColor: theme.color.text.brand,
-  },
-}));

package/src/components/VerificationInput/index.ts

@@ -1,7 +0,0 @@
-import VerificationInput from './VerificationInput';
-export { default as VerificationInput } from './VerificationInput';
-export type {
-  VerificationInputHandle,
-  default as VerificationInputProps,
-} from './VerificationInput.props';
-export default VerificationInput;

package/src/components/index.ts

@@ -1,77 +0,0 @@
-// Custom
-export * from './Accordion';
-export * from './Alert';
-export * from './Avatar';
-export * from './Badge';
-export * from './Banner';
-export * from './BodyText';
-export * from './BottomSheet';
-export * from './Box';
-export * from './Button';
-export * from './Card';
-export * from './Carousel';
-export * from './Center';
-export * from './Checkbox';
-export * from './Combobox';
-export * from './Container';
-export * from './CurrencyInput';
-export * from './DateInput';
-export * from './DatePicker';
-export * from './DatePickerInput';
-export * from './DescriptionList';
-export * from './DetailText';
-export * from './Divider';
-export * from './Expandable';
-export * from './ExpandableCard';
-export * from './Flex';
-export * from './FormField';
-export * from './Grid';
-export * from './Heading';
-export * from './Helper';
-export * from './HighlightBanner';
-export * from './HTMLElements';
-export * from './Icon';
-export * from './IconButton';
-export * from './IconContainer';
-export * from './IndicatorIconButton';
-export * from './InlineLink';
-export * from './Input';
-export * from './Label';
-export * from './Link';
-export * from './List';
-export * from './Menu';
-export * from './Modal';
-export * from './NavModal';
-export * from './Pagination';
-export * from './PillGroup';
-export * from './ProgressBar';
-export * from './ProgressStepper';
-export * from './Radio';
-export * from './RadioCard';
-export * from './Rating';
-export * from './Roundel';
-export * from './SectionHeader';
-export * from './SegmentedControl';
-export * from './Select';
-export * from './Skeleton';
-export * from './Spinner';
-export * from './StepperInput';
-export * from './Switch';
-export * from './Table';
-export * from './Tabs';
-export * from './Textarea';
-export * from './ThemedImage';
-export * from './Timeline';
-export * from './TimePicker';
-export * from './TimePickerInput';
-export * from './Toast';
-export * from './ToggleButtonCard';
-export * from './VerificationInput';
-
-export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
-
-export { Pressable } from 'react-native';
-
-export { SafeAreaView } from 'react-native-safe-area-context';
-
-export { createIcon } from '@gluestack-ui/icon';

package/src/core/breakpoints.ts

@@ -1,10 +0,0 @@
-export const breakpoints = {
-  base: 0,
-  xs: 320,
-  sm: 399,
-  md: 768,
-  lg: 992,
-  xl: 1280,
-  superLarge: 2000,
-  tvLike: 4000,
-} as const;

package/src/core/index.ts

@@ -1,38 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { breakpoints } from './breakpoints';
-import { themes } from './themes';
-export {
-  createUnistylesElement,
-  Display,
-  getServerUnistyles,
-  Hide,
-  hydrateServerUnistyles,
-  mq,
-  NavigationBar,
-  resetServerUnistyles,
-  ScopedTheme,
-  StatusBar,
-  StyleSheet,
-  UnistylesRuntime,
-  useServerUnistyles,
-  useUnistyles,
-  withUnistyles,
-} from 'react-native-unistyles';
-export type {
-  UnistylesBreakpoints,
-  UnistylesThemes,
-  UnistylesVariants,
-} from 'react-native-unistyles';
-export * from './breakpoints';
-export * from './themes';
-
-StyleSheet.configure({
-  breakpoints,
-  themes,
-  settings: {
-    initialTheme: 'light',
-    adaptiveThemes: false,
-  },
-});
-
-export type * from '../types/unistyles';

package/src/core/themes.ts

@@ -1,390 +0,0 @@
-import { DimensionValue, Platform } from 'react-native';
-import { colors, colorsCommon, colorsDark } from '../legacyTokens';
-import {
-  borderRadius,
-  borderWidth,
-  color,
-  components,
-  font,
-  layout,
-  letterSpacing,
-  lineHeight,
-  shadow,
-  space,
-  typography,
-} from '../tokens';
-import { breakpoints } from './breakpoints';
-
-const { light, dark, ...restOfColors } = color;
-
-const shared = {
-  platform: Platform.OS,
-  space: {
-    ...space,
-    '1/2': '50%',
-    '1/3': '33.333%',
-    '2/3': '66.666%',
-    '1/4': '25%',
-    '2/4': '50%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.666%',
-    '2/6': '33.333%',
-    '3/6': '50%',
-    '4/6': '66.666%',
-    '5/6': '83.333%',
-    full: '100%' as DimensionValue,
-    none: 0,
-    '2xs': {
-      base: layout.mobile.spacing['2xs'],
-      md: layout.tablet.spacing['2xs'],
-      lg: layout.desktop.spacing['2xs'],
-    },
-    xs: {
-      base: layout.mobile.spacing.xs,
-      md: layout.tablet.spacing.xs,
-      lg: layout.desktop.spacing.xs,
-    },
-    sm: {
-      base: layout.mobile.spacing.sm,
-      md: layout.tablet.spacing.sm,
-      lg: layout.desktop.spacing.sm,
-    },
-    md: {
-      base: layout.mobile.spacing.md,
-      md: layout.tablet.spacing.md,
-      lg: layout.desktop.spacing.md,
-    },
-    lg: {
-      base: layout.mobile.spacing.lg,
-      md: layout.tablet.spacing.lg,
-      lg: layout.desktop.spacing.lg,
-    },
-    xl: {
-      base: layout.mobile.spacing.xl,
-      md: layout.tablet.spacing.xl,
-      lg: layout.desktop.spacing.xl,
-    },
-    '2xl': {
-      base: layout.mobile.spacing['2xl'],
-      md: layout.tablet.spacing['2xl'],
-      lg: layout.desktop.spacing['2xl'],
-    },
-  },
-  borderWidth,
-  borderRadius,
-  breakpoints,
-  letterSpacing,
-  lineHeight,
-  font,
-  fontWeight: font.weight,
-  fontFamily: font.family,
-  fontSize: font.size,
-  typography,
-  layout,
-  shadow,
-  opacity: {
-    disabled: 0.5,
-  },
-  helpers: {},
-  globalStyle: {
-    variants: {
-      hardShadow: {
-        '1': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: -2,
-            height: 2,
-          },
-          shadowRadius: 8,
-          shadowOpacity: 0.5,
-          elevation: 10,
-        },
-        '2': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: 0,
-            height: 3,
-          },
-          shadowRadius: 8,
-          shadowOpacity: 0.5,
-          elevation: 10,
-        },
-        '3': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: 2,
-            height: 2,
-          },
-          shadowRadius: 8,
-          shadowOpacity: 0.5,
-          elevation: 10,
-        },
-        '4': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: 0,
-            height: -3,
-          },
-          shadowRadius: 8,
-          shadowOpacity: 0.5,
-          elevation: 10,
-        },
-        '5': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: 0,
-            height: 3,
-          },
-          shadowRadius: 8,
-          shadowOpacity: 0.2,
-          elevation: 10,
-        },
-      },
-      softShadow: {
-        '1': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: 0,
-            height: 0,
-          },
-          shadowRadius: 10,
-          shadowOpacity: 0.1,
-          _android: {
-            shadowColor: color.grey[900],
-            elevation: 5,
-            shadowOpacity: 0.05,
-          },
-        },
-        '2': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: 0,
-            height: 0,
-          },
-          shadowRadius: 20,
-          elevation: 3,
-          shadowOpacity: 0.1,
-          _android: {
-            shadowColor: color.grey[900],
-            elevation: 10,
-            shadowOpacity: 0.1,
-          },
-        },
-        '3': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: 0,
-            height: 0,
-          },
-          shadowRadius: 30,
-          shadowOpacity: 0.1,
-          elevation: 4,
-          _android: {
-            shadowColor: color.grey[900],
-            elevation: 15,
-            shadowOpacity: 0.15,
-          },
-        },
-        '4': {
-          shadowColor: color.grey[900],
-          shadowOffset: {
-            width: 0,
-            height: 0,
-          },
-          shadowRadius: 40,
-          shadowOpacity: 0.1,
-          elevation: 10,
-          _android: {
-            shadowColor: color.grey[900],
-            elevation: 20,
-            shadowOpacity: 0.2,
-          },
-        },
-      },
-      spacing: {
-        none: {
-          gap: {
-            base: layout.mobile.spacing.none,
-            md: layout.tablet.spacing.none,
-            lg: layout.desktop.spacing.none,
-          },
-        },
-        '2xs': {
-          gap: {
-            base: layout.mobile.spacing['2xs'],
-            md: layout.tablet.spacing['2xs'],
-            lg: layout.desktop.spacing['2xs'],
-          },
-        },
-        xs: {
-          gap: {
-            base: layout.mobile.spacing.xs,
-            md: layout.tablet.spacing.xs,
-            lg: layout.desktop.spacing.xs,
-          },
-        },
-        sm: {
-          gap: {
-            base: layout.mobile.spacing.sm,
-            md: layout.tablet.spacing.sm,
-            lg: layout.desktop.spacing.sm,
-          },
-        },
-        md: {
-          gap: {
-            base: layout.mobile.spacing.md,
-            md: layout.tablet.spacing.md,
-            lg: layout.desktop.spacing.md,
-          },
-        },
-        lg: {
-          gap: {
-            base: layout.mobile.spacing.lg,
-            md: layout.tablet.spacing.lg,
-            lg: layout.desktop.spacing.lg,
-          },
-        },
-        xl: {
-          gap: {
-            base: layout.mobile.spacing.xl,
-            md: layout.tablet.spacing.xl,
-            lg: layout.desktop.spacing.xl,
-          },
-        },
-        '2xl': {
-          gap: {
-            base: layout.mobile.spacing['2xl'],
-            md: layout.tablet.spacing['2xl'],
-            lg: layout.desktop.spacing['2xl'],
-          },
-        },
-      },
-    },
-  },
-} as const;
-
-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,
-    outlineColor: color.light.focus.primary,
-    outlineOffset: 1,
-  },
-};
-
-export const lightTheme = {
-  colorMode: 'light',
-  isLight: true,
-  isDark: false,
-  /**
-   * @deprecated This will be removed in the next major version. This is kept for backward compatibility
-   */
-  colors: {
-    ...colors,
-    ...colorsCommon,
-    white: '#ffffff',
-    black: '#000000',
-  },
-  color: {
-    ...restOfColors,
-    ...light,
-    white: '#ffffff',
-    black: '#000000',
-  } as const,
-
-  components: components.light,
-  ...shared,
-  helpers: {
-    ...lightHelpers /** Simplified semantic color tokens grouped by category */,
-    semanticColor: {
-      background: light.background,
-      border: light.border,
-      text: light.text,
-      icon: light.icon,
-    },
-  },
-} as const;
-
-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,
-    outlineColor: color.dark.focus.primary,
-    outlineOffset: 1,
-  },
-};
-
-export const darkTheme = {
-  colorMode: 'dark',
-  isLight: false,
-  isDark: true,
-  /**
-   * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
-   */
-  colors: {
-    ...colorsDark,
-    ...colorsCommon,
-    /**
-     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
-     */
-    white: '#ffffff',
-    /**
-     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
-     */
-    black: '#000000',
-  },
-  color: {
-    ...restOfColors,
-    ...dark,
-    /**
-     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
-     */
-    white: '#ffffff',
-    /**
-     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
-     */
-    black: '#000000',
-  },
-  components: components.dark,
-  ...shared,
-  helpers: {
-    ...darkHelpers /** Simplified semantic color tokens grouped by category */,
-    semanticColor: {
-      background: dark.background,
-      border: dark.border,
-      text: dark.text,
-      icon: dark.icon,
-    },
-  },
-} as const;
-
-export const themes = {
-  light: lightTheme,
-  dark: darkTheme,
-} as const;

package/src/hooks/index.ts

@@ -1,8 +0,0 @@
-export { default as useBreakpointValue } from './useBreakpointValue';
-export { default as useColorMode } from './useColorMode';
-export { default as useFormFieldAccessibility } from './useFormFieldAccessibility';
-export { default as useMedia } from './useMedia';
-export { usePrevious } from './usePrevious';
-export { useStyleProps } from './useStyleProps';
-export { default as useTheme } from './useTheme';
-export { default as useToken } from './useToken';