@erquhart/heroui-native 1.0.0-beta.10.1

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,245 @@
+import { forwardRef, useCallback, useMemo } from 'react';
+import { View, type GestureResponderEvent } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { CheckIcon } from '../../helpers/components';
+import { AnimatedCheckIcon } from '../../helpers/components/animated-check-icon';
+import { AnimationSettingsProvider } from '../../helpers/contexts/animation-settings-context';
+import { useIsOnSurface, useThemeColor } from '../../helpers/theme';
+import * as CheckboxPrimitives from '../../primitives/checkbox';
+import * as CheckboxPrimitivesTypes from '../../primitives/checkbox/checkbox.types';
+import {
+  CheckboxAnimationProvider,
+  useCheckboxIndicatorAnimation,
+  useCheckboxRootAnimation,
+} from './checkbox.animation';
+import { DEFAULT_HIT_SLOP, DISPLAY_NAME } from './checkbox.constants';
+import checkboxStyles, { styleSheet } from './checkbox.styles';
+import type {
+  CheckboxIndicatorProps,
+  CheckboxProps,
+  CheckboxRenderProps,
+} from './checkbox.types';
+
+const AnimatedRootView = Animated.createAnimatedComponent(
+  CheckboxPrimitives.Root
+);
+
+const AnimatedIndicatorView = Animated.createAnimatedComponent(
+  CheckboxPrimitives.Indicator
+);
+
+const useCheckbox = CheckboxPrimitives.useCheckboxContext;
+
+// --------------------------------------------------
+
+const CheckboxRoot = forwardRef<CheckboxPrimitivesTypes.RootRef, CheckboxProps>(
+  (props, ref) => {
+    const {
+      children,
+      isSelected,
+      onSelectedChange,
+      isDisabled = false,
+      isInvalid = false,
+      isOnSurface: isOnSurfaceProp,
+      hitSlop = DEFAULT_HIT_SLOP,
+      className,
+      style,
+      onPressIn,
+      onPressOut,
+      animation,
+      isAnimatedStyleActive = true,
+      ...restProps
+    } = props;
+
+    const isOnSurfaceAutoDetected = useIsOnSurface();
+    const isOnSurface = isOnSurfaceProp ?? isOnSurfaceAutoDetected;
+
+    const rootClassName = checkboxStyles.root({
+      isOnSurface,
+      isSelected,
+      isDisabled,
+      isInvalid,
+      className,
+    });
+
+    const { rContainerStyle, isCheckboxPressed, isAllAnimationsDisabled } =
+      useCheckboxRootAnimation({
+        animation,
+      });
+
+    const rootStyle = isAnimatedStyleActive
+      ? [rContainerStyle, styleSheet.root, style]
+      : [styleSheet.root, style];
+
+    const animationContextValue = useMemo(
+      () => ({
+        isCheckboxPressed,
+      }),
+      [isCheckboxPressed]
+    );
+
+    const animationSettingsContextValue = useMemo(
+      () => ({
+        isAllAnimationsDisabled,
+      }),
+      [isAllAnimationsDisabled]
+    );
+
+    const handlePressIn = useCallback(
+      (event: GestureResponderEvent) => {
+        isCheckboxPressed.set(true);
+        onPressIn?.(event);
+      },
+      [isCheckboxPressed, onPressIn]
+    );
+
+    const handlePressOut = useCallback(
+      (event: GestureResponderEvent) => {
+        isCheckboxPressed.set(false);
+        onPressOut?.(event);
+      },
+      [isCheckboxPressed, onPressOut]
+    );
+
+    const renderProps: CheckboxRenderProps = {
+      isSelected,
+      isInvalid,
+      isDisabled,
+    };
+
+    const content =
+      typeof children === 'function'
+        ? children(renderProps)
+        : (children ?? <CheckboxIndicator />);
+
+    return (
+      <AnimationSettingsProvider value={animationSettingsContextValue}>
+        <CheckboxAnimationProvider value={animationContextValue}>
+          <AnimatedRootView
+            ref={ref}
+            className={rootClassName}
+            isSelected={isSelected}
+            onSelectedChange={onSelectedChange}
+            isDisabled={isDisabled}
+            isInvalid={isInvalid}
+            isOnSurface={isOnSurface}
+            hitSlop={hitSlop}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            style={rootStyle}
+            {...restProps}
+          >
+            {content}
+          </AnimatedRootView>
+        </CheckboxAnimationProvider>
+      </AnimationSettingsProvider>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const CheckboxIndicator = forwardRef<
+  CheckboxPrimitivesTypes.IndicatorRef,
+  CheckboxIndicatorProps
+>((props, ref) => {
+  const {
+    children,
+    iconProps,
+    className,
+    style,
+    animation,
+    isAnimatedStyleActive = true,
+    ...restProps
+  } = props;
+
+  const { isSelected, isDisabled, isInvalid } = useCheckbox();
+
+  const themeColorAccentForeground = useThemeColor('accent-foreground');
+
+  const iconSize = iconProps?.size;
+  const iconStrokeWidth = iconProps?.strokeWidth;
+  const iconColor = iconProps?.color ?? themeColorAccentForeground;
+  const iconEnterDuration = iconProps?.enterDuration;
+  const iconExitDuration = iconProps?.exitDuration;
+
+  const indicatorClassName = checkboxStyles.indicator({
+    isInvalid,
+    className,
+  });
+
+  const { rContainerStyle, isAnimationDisabled } =
+    useCheckboxIndicatorAnimation({
+      animation,
+      isSelected,
+    });
+
+  const indicatorStyle = isAnimatedStyleActive
+    ? [rContainerStyle, style]
+    : style;
+
+  const renderProps: CheckboxRenderProps = {
+    isSelected,
+    isInvalid: isInvalid ?? false,
+    isDisabled: isDisabled ?? false,
+  };
+
+  const content =
+    typeof children === 'function'
+      ? children(renderProps)
+      : (children ??
+        (isAnimationDisabled ? (
+          <View className="translate-y-px">
+            <CheckIcon size={iconSize} color={iconColor} />
+          </View>
+        ) : (
+          <AnimatedCheckIcon
+            size={iconSize}
+            strokeWidth={iconStrokeWidth}
+            color={iconColor}
+            isSelected={isSelected}
+            enterDuration={iconEnterDuration}
+            exitDuration={iconExitDuration}
+          />
+        )));
+
+  return (
+    <AnimatedIndicatorView
+      ref={ref}
+      className={indicatorClassName}
+      style={indicatorStyle}
+      {...restProps}
+    >
+      {content}
+    </AnimatedIndicatorView>
+  );
+});
+
+// --------------------------------------------------
+
+CheckboxRoot.displayName = DISPLAY_NAME.CHECKBOX_ROOT;
+CheckboxIndicator.displayName = DISPLAY_NAME.CHECKBOX_INDICATOR;
+
+/**
+ * Compound Checkbox component with sub-components
+ *
+ * @component Checkbox - Main container that handles selection state and user interaction.
+ * Renders default indicator with checkmark if no children provided.
+ * Animates background and border color based on selection state.
+ *
+ * @component Checkbox.Indicator - Optional checkmark container that scales in when selected.
+ * Renders default check icon if no children provided. Handles enter/exit animations
+ * and can be replaced with custom indicators.
+ *
+ * Props flow from Checkbox to sub-components via context (isSelected).
+ * The checkbox supports controlled and uncontrolled modes through isSelected/onSelectedChange.
+ *
+ * @see Full documentation: https://heroui.com/components/checkbox
+ */
+const CompoundCheckbox = Object.assign(CheckboxRoot, {
+  /** @optional Custom indicator with scale animations */
+  Indicator: CheckboxIndicator,
+});
+
+export { useCheckbox };
+export default CompoundCheckbox;

package/src/components/checkbox/checkbox.types.ts

@@ -0,0 +1,211 @@
+import type {
+  AnimatedProps,
+  SharedValue,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+import type {
+  Animation,
+  AnimationRoot,
+  AnimationValue,
+} from '../../helpers/types';
+import * as CheckboxPrimitivesTypes from '../../primitives/checkbox/checkbox.types';
+
+/**
+ * Context value for checkbox animation state
+ */
+export interface CheckboxAnimationContextValue {
+  /** Shared value tracking if the checkbox is pressed */
+  isCheckboxPressed: SharedValue<boolean>;
+}
+
+/**
+ * Checkbox Indicator Icon Props
+ */
+export interface CheckboxIndicatorIconProps {
+  /** Indicator size */
+  size?: number;
+  /** Indicator stroke width */
+  strokeWidth?: number;
+  /** Indicator color */
+  color?: string;
+  /** Enter duration */
+  enterDuration?: number;
+  /** Exit duration */
+  exitDuration?: number;
+}
+
+/**
+ * Render function props for checkbox children
+ */
+export interface CheckboxRenderProps {
+  /** Whether the checkbox is selected */
+  isSelected?: boolean;
+  /** Whether the checkbox is invalid */
+  isInvalid: boolean;
+  /** Whether the checkbox is disabled */
+  isDisabled: boolean;
+}
+
+/**
+ * Animation configuration for checkbox root component
+ */
+export type CheckboxRootAnimation = AnimationRoot<{
+  scale?: AnimationValue<{
+    /**
+     * Scale values [unpressed, pressed]
+     * @default [1, 0.95]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for the main Checkbox component
+ */
+export interface CheckboxProps
+  extends Omit<CheckboxPrimitivesTypes.RootProps, 'children'> {
+  /** Child elements to render inside the checkbox, or a render function */
+  children?:
+    | React.ReactNode
+    | ((props: CheckboxRenderProps) => React.ReactNode);
+
+  /** Custom class name for the checkbox
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `transform` (specifically `scale`) - Animated for press feedback transitions (unpressed: 1, pressed: 0.96)
+   *
+   * To customize this property, use the `animation` prop:
+   * ```tsx
+   * <Checkbox
+   *   animation={{
+   *     scale: { value: [1, 0.96], timingConfig: { duration: 150 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+
+  /** Animation configuration for checkbox scale animation */
+  animation?: CheckboxRootAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * Animation configuration for checkbox indicator component
+ */
+export type CheckboxIndicatorAnimation = Animation<{
+  opacity?: AnimationValue<{
+    /**
+     * Opacity values [unselected, selected]
+     * @default [0, 1]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 100 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  borderRadius?: AnimationValue<{
+    /**
+     * Border radius values [unselected, selected]
+     * @default [99, 0]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 50 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  translateX?: AnimationValue<{
+    /**
+     * TranslateX values [unselected, selected]
+     * @default [-4, 0]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 100 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  scale?: AnimationValue<{
+    /**
+     * Scale values [unselected, selected]
+     * @default [0.8, 1]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 100 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for the CheckboxIndicator component
+ */
+export interface CheckboxIndicatorProps
+  extends AnimatedProps<
+    Omit<CheckboxPrimitivesTypes.IndicatorProps, 'children'>
+  > {
+  /** Child elements to render inside the indicator, or a render function */
+  children?:
+    | React.ReactNode
+    | ((props: CheckboxRenderProps) => React.ReactNode);
+
+  /** Custom class name for the indicator
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `opacity` - Animated for selection transitions (unselected: 0, selected: 1)
+   * - `borderRadius` - Animated for selection transitions (unselected: 8, selected: 0)
+   * - `transform` (specifically `translateX` and `scale`) - Animated for selection transitions (translateX: unselected: -4, selected: 0; scale: unselected: 0.8, selected: 1)
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Checkbox.Indicator
+   *   animation={{
+   *     opacity: { value: [0, 1], timingConfig: { duration: 100 } },
+   *     borderRadius: { value: [8, 0], timingConfig: { duration: 50 } },
+   *     translateX: { value: [-4, 0], timingConfig: { duration: 100 } },
+   *     scale: { value: [0.8, 1], timingConfig: { duration: 100 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+
+  /** Custom icon props for the indicator */
+  iconProps?: CheckboxIndicatorIconProps;
+
+  /**
+   * Animation configuration
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: CheckboxIndicatorAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}

package/src/components/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox, useCheckbox } from './checkbox';
+export type * from './checkbox.types';

package/src/components/chip/chip.animation.ts

@@ -0,0 +1,18 @@
+import { useCombinedAnimationDisabledState } from '../../helpers/hooks';
+import type { AnimationRootDisableAll } from '../../helpers/types/animation';
+
+/**
+ * Animation hook for Chip root component
+ * Handles root-level animation configuration and provides context for child components
+ */
+export function useChipRootAnimation(options: {
+  animation: AnimationRootDisableAll | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  return {
+    isAllAnimationsDisabled,
+  };
+}

package/src/components/chip/chip.constants.ts

@@ -0,0 +1,7 @@
+/**
+ * Display names for chip components
+ */
+export const DISPLAY_NAME = {
+  CHIP_ROOT: 'HeroUINative.Chip.Root',
+  CHIP_LABEL_CONTENT: 'HeroUINative.Chip.Label',
+} as const;

package/src/components/chip/chip.md

@@ -0,0 +1,190 @@
+# Chip
+
+Displays a compact element in a capsule shape.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { Chip } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+The Chip component displays text or custom content in a capsule shape.
+
+```tsx
+<Chip>Basic Chip</Chip>
+```
+
+### Sizes
+
+Control the chip size with the `size` prop.
+
+```tsx
+<Chip size="sm">Small</Chip>
+<Chip size="md">Medium</Chip>
+<Chip size="lg">Large</Chip>
+```
+
+### Variants
+
+Choose between different visual styles with the `variant` prop.
+
+```tsx
+<Chip variant="primary">Primary</Chip>
+<Chip variant="secondary">Secondary</Chip>
+<Chip variant="tertiary">Tertiary</Chip>
+<Chip variant="soft">Soft</Chip>
+```
+
+### Colors
+
+Apply different color themes with the `color` prop.
+
+```tsx
+<Chip color="accent">Accent</Chip>
+<Chip color="default">Default</Chip>
+<Chip color="success">Success</Chip>
+<Chip color="warning">Warning</Chip>
+<Chip color="danger">Danger</Chip>
+```
+
+### With Icons
+
+Add icons or custom content alongside text using compound components.
+
+```tsx
+<Chip>
+  <Icon name="star" size={12} />
+  <Chip.Label>Featured</Chip.Label>
+</Chip>
+
+<Chip>
+  <Chip.Label>Close</Chip.Label>
+  <Icon name="close" size={12} />
+</Chip>
+```
+
+### Custom Styling
+
+Apply custom styles using className or style props.
+
+```tsx
+<Chip className="bg-purple-600 px-6">
+  <Chip.Label className="text-white">Custom</Chip.Label>
+</Chip>
+```
+
+### Disable All Animations
+
+Disable all animations including children by using the `"disable-all"` value for the `animation` prop.
+
+```tsx
+{
+  /* Disable all animations including children */
+}
+<Chip animation="disable-all">No Animations</Chip>;
+```
+
+## Example
+
+```tsx
+import { Chip } from 'heroui-native';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function ChipExample() {
+  return (
+    <View className="gap-4 p-4">
+      <View className="flex-row flex-wrap gap-2">
+        <Chip size="sm">Small</Chip>
+        <Chip size="md">Medium</Chip>
+        <Chip size="lg">Large</Chip>
+      </View>
+
+      <View className="flex-row flex-wrap gap-2">
+        <Chip variant="primary" color="accent">
+          Primary
+        </Chip>
+        <Chip variant="secondary" color="success">
+          <View className="size-1.5 rounded-full bg-success" />
+          <Chip.Label>Success</Chip.Label>
+        </Chip>
+        <Chip variant="tertiary" color="warning">
+          <Ionicons name="star" size={12} color="#F59E0B" />
+          <Chip.Label>Premium</Chip.Label>
+        </Chip>
+      </View>
+
+      <View className="flex-row gap-2">
+        <Chip variant="secondary">
+          <Chip.Label>Remove</Chip.Label>
+          <Ionicons name="close" size={14} color="#6B7280" />
+        </Chip>
+        <Chip className="bg-purple-600">
+          <Chip.Label className="text-white font-semibold">Custom</Chip.Label>
+        </Chip>
+      </View>
+    </View>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<Chip>
+  <Chip.Label>...</Chip.Label>
+</Chip>
+```
+
+- **Chip**: Main container that displays a compact element
+- **Chip.Label**: Text content of the chip
+
+## API Reference
+
+### Chip
+
+| prop                | type                                                          | default     | description                                                                               |
+| ------------------- | ------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| `children`          | `React.ReactNode`                                             | -           | Content to render inside the chip                                                         |
+| `size`              | `'sm' \| 'md' \| 'lg'`                                        | `'md'`      | Size of the chip                                                                          |
+| `variant`           | `'primary' \| 'secondary' \| 'tertiary' \| 'soft'`            | `'primary'` | Visual variant of the chip                                                                |
+| `color`             | `'accent' \| 'default' \| 'success' \| 'warning' \| 'danger'` | `'accent'`  | Color theme of the chip                                                                   |
+| `className`         | `string`                                                      | -           | Additional CSS classes to apply                                                           |
+| `animation`         | `"disable-all" \| undefined`                                  | `undefined` | Animation configuration. Use `"disable-all"` to disable all animations including children |
+| `...PressableProps` | `PressableProps`                                              | -           | All Pressable props are supported                                                         |
+
+### Chip.Label
+
+| prop           | type              | default | description                            |
+| -------------- | ----------------- | ------- | -------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Text or content to render as the label |
+| `className`    | `string`          | -       | Additional CSS classes to apply        |
+| `...TextProps` | `TextProps`       | -       | All standard Text props are supported  |
+
+## Hooks
+
+### useChip
+
+Hook to access the Chip context values. Returns the chip's size, variant, and color.
+
+```tsx
+import { useChip } from 'heroui-native';
+
+const { size, variant, color } = useChip();
+```
+
+#### Return Value
+
+| property  | type                                                          | description                |
+| --------- | ------------------------------------------------------------- | -------------------------- |
+| `size`    | `'sm' \| 'md' \| 'lg'`                                        | Size of the chip           |
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'soft'`            | Visual variant of the chip |
+| `color`   | `'accent' \| 'default' \| 'success' \| 'warning' \| 'danger'` | Color theme of the chip    |
+
+**Note:** This hook must be used within a `Chip` component. It will throw an error if called outside of the chip context.