@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/src/components/UnstyledIconButton/UnstyledIconButton.stories.tsx

@@ -1,96 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Platform } from 'react-native';
-import { VariantTitle } from '../../../docs/components';
-import { Flex } from '../Flex';
-import UnstyledIconButton from './UnstyledIconButton';
-
-const meta = {
-  title: 'Stories / UnstyledIconButton',
-  component: UnstyledIconButton,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    size: {
-      options: ['sm', 'md'],
-      control: Platform.OS === 'android' ? 'radio' : 'select',
-      description: 'The size of the button.',
-    },
-    disabled: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To manually set disable to the button.',
-    },
-    inverted: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To set the button to be inverted. (To only be used on `purple` backgrounds)',
-    },
-    icon: {
-      options: Object.keys(Icons).filter(icon => !icon.includes('Large')),
-      control: 'select',
-      description: 'The icon component for the button.',
-      mapping: Icons,
-    },
-    loading: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To show or hide the loading spinner component for the button.',
-    },
-    pressed: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To set the button to be pressed.',
-    },
-  },
-  args: {
-    size: 'md',
-    disabled: false,
-    inverted: false,
-    loading: false,
-    icon: CloseMediumIcon,
-    pressed: false,
-  },
-} satisfies Meta<typeof UnstyledIconButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: args => {
-    // Ensure the icon prop is the component itself, not its name string
-    // The mapping in argTypes should handle this, but double-check rendering logic
-    const iconComponent =
-      typeof args.icon === 'string' ? Icons[args.icon as keyof typeof Icons] : args.icon;
-    return <UnstyledIconButton {...args} icon={iconComponent} />;
-  },
-};
-
-export const States: Story = {
-  parameters: {
-    controls: { include: ['size', 'inverted', 'icon'] },
-  },
-  render: ({ size, inverted, icon: iconProp }) => {
-    // Ensure the icon prop is the component itself
-    const iconComponent =
-      typeof iconProp === 'string' ? Icons[iconProp as keyof typeof Icons] : iconProp;
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Default" invert={inverted}>
-          <UnstyledIconButton size={size} inverted={inverted} icon={iconComponent} />
-        </VariantTitle>
-        <VariantTitle title="Pressed" invert={inverted}>
-          <UnstyledIconButton size={size} inverted={inverted} icon={iconComponent} pressed />
-        </VariantTitle>
-        <VariantTitle title="Disabled" invert={inverted}>
-          <UnstyledIconButton size={size} inverted={inverted} icon={iconComponent} disabled />
-        </VariantTitle>
-        <VariantTitle title="Loading" invert={inverted}>
-          <UnstyledIconButton size={size} inverted={inverted} icon={iconComponent} loading />
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};

package/src/components/UnstyledIconButton/UnstyledIconButton.tsx

@@ -1,68 +0,0 @@
-import { createButton } from '@gluestack-ui/button';
-import { ViewStyle } from 'react-native';
-import { useButtonGroupContext } from '../Button/ButtonGroup.context';
-import { UnstyledIconButtonProps } from './UnstyledIconButton.props';
-import UnstyledIconButtonIconComponent from './UnstyledIconButtonIcon';
-import UnstyledIconButtonRootComponent from './UnstyledIconButtonRoot';
-import UnstyledIconButtonSpinerComponent from './UnstyledIconButtonSpinner';
-
-const UnstyledIconButtonComponent = createButton({
-  Root: UnstyledIconButtonRootComponent,
-  Icon: UnstyledIconButtonIconComponent,
-  Group: () => null,
-  Text: () => null,
-  Spinner: UnstyledIconButtonSpinerComponent,
-});
-
-const UnstyledIconButtonSpinner = UnstyledIconButtonComponent.Spinner;
-const UnstyledIconButtonIcon = UnstyledIconButtonComponent.Icon;
-
-UnstyledIconButtonSpinner.displayName = 'UnstyledIconButtonSpinner';
-UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
-
-const UnstyledIconButton = ({
-  icon,
-  disabled = false,
-  pressed,
-  size = 'md',
-  inverted = false,
-  iconStyle,
-  ...props
-}: UnstyledIconButtonProps) => {
-  const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
-  const {
-    loading,
-    accessibilityRole = 'button',
-    accessible = true,
-    focusable = true,
-    importantForAccessibility = 'yes',
-    ...restProps
-  } = props;
-
-  const isLoading = loading ?? groupLoading;
-  const buttonDisabled = isLoading || (disabled ?? groupDisabled);
-
-  return (
-    <UnstyledIconButtonComponent
-      {...restProps}
-      size={size}
-      inverted={inverted}
-      isDisabled={buttonDisabled}
-      isPressed={pressed}
-      accessibilityRole={accessibilityRole}
-      accessible={accessible}
-      focusable={focusable}
-      importantForAccessibility={importantForAccessibility}
-      icon={icon}
-    >
-      {loading ? (
-        <UnstyledIconButtonSpinner />
-      ) : (
-        <UnstyledIconButtonIcon as={icon} style={iconStyle as ViewStyle} />
-      )}
-    </UnstyledIconButtonComponent>
-  );
-};
-UnstyledIconButton.displayName = 'UnstyledIconButton';
-
-export default UnstyledIconButton;

package/src/components/UnstyledIconButton/UnstyledIconButtonIcon.tsx

@@ -1,74 +0,0 @@
-import { Platform, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
-import IconProps from '../Icon/Icon.props';
-import { useUnstyledIconButtonContext } from './UnstyledIconButton.context';
-
-const UnstyledIconButtonIcon = ({ children, ...props }: IconProps) => {
-  const { active, inverted, size } = useUnstyledIconButtonContext();
-  styles.useVariants({ active, inverted, size });
-  return (
-    <Icon
-      {...props}
-      style={
-        Platform.OS === 'web'
-          ? // @ts-expect-error - Spread types may only be created from object types.
-            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
-          : [styles.icon as ViewStyle, props.style]
-      }
-    >
-      {children}
-    </Icon>
-  );
-};
-
-UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
-
-const styles = StyleSheet.create(theme => ({
-  icon: {
-    color: theme.components.iconButton.unstyled.foregroundColor,
-    _web: {
-      _hover: {
-        color: theme.components.iconButton.unstyled.foregroundColorHover,
-      },
-    },
-    variants: {
-      active: {
-        true: {
-          color: theme.components.iconButton.unstyled.foregroundColorActive,
-        },
-      },
-      inverted: {
-        true: {
-          color: theme.components.iconButton.unstyled.inverted.foregroundColor,
-          _web: {
-            _hover: {
-              color: theme.components.iconButton.unstyled.inverted.foregroundColorHover,
-            },
-          },
-        },
-      },
-      size: {
-        sm: {
-          width: theme.components.iconButton.unstyled.sm.width,
-          height: theme.components.iconButton.unstyled.sm.height,
-        },
-        md: {
-          width: theme.components.iconButton.unstyled.md.width,
-          height: theme.components.iconButton.unstyled.md.height,
-        },
-      },
-    },
-    compoundVariants: [
-      {
-        active: true,
-        inverted: true,
-        styles: {
-          color: theme.components.iconButton.unstyled.inverted.foregroundColorActive,
-        },
-      },
-    ],
-  },
-}));
-
-export default UnstyledIconButtonIcon;

package/src/components/UnstyledIconButton/UnstyledIconButtonRoot.tsx

@@ -1,61 +0,0 @@
-import { useMemo } from 'react';
-import { Pressable, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { UnstyledIconButtonContext } from './UnstyledIconButton.context';
-import type { UnstyledIconButtonProps } from './UnstyledIconButton.props';
-
-const UnstyledIconButtonRoot = ({
-  size,
-  inverted,
-  states,
-  ...props
-}: UnstyledIconButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
-  const { active, disabled } = states || {};
-  styles.useVariants({ disabled, size });
-  const value = useMemo(
-    () => ({ disabled, active, inverted, size }),
-    [disabled, active, inverted, size]
-  );
-  return (
-    <UnstyledIconButtonContext.Provider value={value}>
-      <Pressable
-        {...props}
-        accessibilityState={{ disabled: !!disabled, ...props.accessibilityState }}
-        style={[styles.container, props.style as ViewStyle]}
-      />
-    </UnstyledIconButtonContext.Provider>
-  );
-};
-
-UnstyledIconButtonRoot.displayName = 'UnstyledIconButtonRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: theme.borderRadius.sm,
-    _web: {
-      // '_focus-visible': theme.helpers.focusVisible,
-    },
-    variants: {
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-      size: {
-        sm: {
-          width: theme.components.iconButton.unstyled.sm.width,
-          height: theme.components.iconButton.unstyled.sm.height,
-        },
-        md: {
-          width: theme.components.iconButton.unstyled.md.width,
-          height: theme.components.iconButton.unstyled.md.height,
-        },
-      },
-    },
-  },
-}));
-
-export default UnstyledIconButtonRoot;

package/src/components/UnstyledIconButton/UnstyledIconButtonSpinner.tsx

@@ -1,39 +0,0 @@
-import { useMemo } from 'react';
-import { useTheme } from '../../hooks';
-import { ColorValue } from '../../types';
-import type { SpinnerProps } from '../Spinner';
-import { Spinner } from '../Spinner';
-import { useUnstyledIconButtonContext } from './UnstyledIconButton.context';
-
-const UnstyledIconButtonSpinner = ({ color, ...props }: Omit<SpinnerProps, 'size'>) => {
-  const { disabled, inverted, size } = useUnstyledIconButtonContext();
-  const { components } = useTheme();
-
-  const colorValue = useMemo(() => {
-    if (inverted) {
-      return components.iconButton.unstyled.inverted.foregroundColor;
-    }
-    return components.iconButton.unstyled.foregroundColor;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inverted, components.iconButton.unstyled.foregroundColor]);
-
-  const spinnerSize = useMemo(() => {
-    if (size === 'sm') {
-      return 'xs';
-    }
-    return 'sm';
-  }, [size]);
-
-  return (
-    <Spinner
-      {...props}
-      aria-disabled={disabled}
-      size={spinnerSize}
-      color={(color as ColorValue) || colorValue}
-    />
-  );
-};
-
-UnstyledIconButtonSpinner.displayName = 'UnstyledIconButtonSpinner';
-
-export default UnstyledIconButtonSpinner;

package/src/components/UnstyledIconButton/index.tsx

@@ -1,2 +0,0 @@
-export { default as UnstyledIconButton } from './UnstyledIconButton';
-export type { UnstyledIconButtonProps } from './UnstyledIconButton.props';

package/src/components/VerificationInput/VerificationInput.figma.tsx

@@ -1,53 +0,0 @@
-import figma from '@figma/code-connect';
-import { VerificationInput } from '..';
-
-const props = {
-  disabled: figma.enum('State', {
-    Disabled: true,
-  }),
-  placeholder: figma.enum('Value type', {
-    Placeholder: figma.string('Value'),
-  }),
-  value: figma.enum('Value type', {
-    Filled: figma.string('Value 1'),
-  }),
-  label: figma.string('Label'),
-  labelVariant: figma.enum('Label variant', {
-    Body: 'body',
-    Heading: 'heading',
-  }),
-  helperText: figma.boolean('Helper text?', {
-    true: figma.string('Helper text'),
-  }),
-  validationStatus: figma.enum('State', {
-    Invalid: 'invalid',
-    Valid: 'valid',
-  }),
-  invalidText: figma.enum('State', {
-    Invalid: figma.string('Validation'),
-  }),
-  validText: figma.enum('State', {
-    Valid: figma.string('Validation'),
-  }),
-};
-
-figma.connect(
-  VerificationInput,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4049-3615&m=dev',
-  {
-    props,
-    example: props => (
-      <VerificationInput
-        disabled={props.disabled}
-        placeholder={props.placeholder}
-        value={props.value}
-        label={props.label}
-        labelVariant={props.labelVariant}
-        helperText={props.helperText}
-        validationStatus={props.validationStatus}
-        invalidText={props.invalidText}
-        validText={props.validText}
-      />
-    ),
-  }
-);

package/src/components/VerificationInput/VerificationInput.props.ts

@@ -1,66 +0,0 @@
-import type { ComponentType } from 'react';
-import { ViewProps } from 'react-native';
-
-export interface VerificationInputHandle {
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  focusIndex: (index: number) => void;
-}
-
-export interface VerificationInputProps extends ViewProps {
-  /**
-   * The value of the input.
-   */
-  value?: string;
-  /**
-   * Callback when the value changes.
-   */
-  onChangeText?: (text: string) => void;
-  /**
-   * The label for the input.
-   */
-  label?: string;
-  /**
-   * The label variant for the input.
-   */
-  labelVariant?: 'heading' | 'body';
-  /**
-   * Helper text to display below the input.
-   */
-  helperText?: string;
-  /**
-   * Icon to display alongside the helper text.
-   */
-  helperIcon?: ComponentType;
-  /**
-   * The validation status of the input.
-   */
-  validationStatus?: 'initial' | 'valid' | 'invalid';
-  /**
-   * Text to display when validation status is 'valid'.
-   */
-  validText?: string;
-  /**
-   * Text to display when validation status is 'invalid'.
-   */
-  invalidText?: string;
-  /**
-   * Whether the input is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Whether the input is read-only.
-   */
-  readonly?: boolean;
-  /**
-   * Whether to obscure the text entry (e.g. for passwords/OTPs).
-   */
-  secureTextEntry?: boolean;
-  /**
-   * Whether the input should auto-focus when mounted.
-   */
-  autoFocus?: boolean;
-}
-
-export default VerificationInputProps;