@erquhart/heroui-native 1.0.0-beta.10.1

package/src/components/switch/switch.tsx

@@ -0,0 +1,280 @@
+import { forwardRef, useCallback, useMemo } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import { View, type ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { AnimationSettingsProvider } from '../../helpers/contexts/animation-settings-context';
+import { createContext } from '../../helpers/utils';
+import * as SwitchPrimitives from '../../primitives/switch';
+import * as SwitchPrimitivesTypes from '../../primitives/switch/switch.types';
+import {
+  SwitchAnimationProvider,
+  useSwitchRootAnimation,
+  useSwitchThumbAnimation,
+} from './switch.animation';
+import { DISPLAY_NAME } from './switch.constants';
+import switchStyles, { styleSheet } from './switch.styles';
+import type {
+  SwitchContentProps,
+  SwitchContextValue,
+  SwitchProps,
+  SwitchRenderProps,
+  SwitchThumbProps,
+} from './switch.types';
+
+const AnimatedSwitchRoot = Animated.createAnimatedComponent(
+  SwitchPrimitives.Root
+);
+
+const AnimatedSwitchThumb = Animated.createAnimatedComponent(
+  SwitchPrimitives.Thumb
+);
+
+const [SwitchProvider, useSwitch] = createContext<SwitchContextValue>({
+  name: 'SwitchContext',
+});
+
+// --------------------------------------------------
+
+const Switch = forwardRef<SwitchPrimitivesTypes.RootRef, SwitchProps>(
+  (props, ref) => {
+    const {
+      children,
+      isDisabled,
+      isSelected,
+      onSelectedChange,
+      className,
+      style,
+      animation,
+      isAnimatedStyleActive = true,
+      onPressIn,
+      onPressOut,
+      ...restProps
+    } = props;
+
+    const rootClassName = switchStyles.root({
+      isDisabled,
+      className,
+    });
+
+    const {
+      rContainerStyle,
+      isSwitchPressed,
+      contentContainerWidth,
+      isAllAnimationsDisabled,
+    } = useSwitchRootAnimation({
+      animation,
+      isSelected,
+    });
+
+    const rootStyle = isAnimatedStyleActive
+      ? [styleSheet.borderCurve, rContainerStyle, style]
+      : [styleSheet.borderCurve, style];
+
+    const contextValue = useMemo(
+      () => ({
+        isSelected,
+        isDisabled,
+      }),
+      [isSelected, isDisabled]
+    );
+
+    const animationContextValue = useMemo(
+      () => ({
+        isSwitchPressed,
+        contentContainerWidth,
+      }),
+      [isSwitchPressed, contentContainerWidth]
+    );
+
+    const animationSettingsContextValue = useMemo(
+      () => ({
+        isAllAnimationsDisabled,
+      }),
+      [isAllAnimationsDisabled]
+    );
+
+    const handlePressIn = useCallback(
+      (event: GestureResponderEvent) => {
+        isSwitchPressed.set(true);
+        onPressIn?.(event);
+      },
+      [isSwitchPressed, onPressIn]
+    );
+
+    const handlePressOut = useCallback(
+      (event: GestureResponderEvent) => {
+        isSwitchPressed.set(false);
+        onPressOut?.(event);
+      },
+      [isSwitchPressed, onPressOut]
+    );
+
+    const renderProps: SwitchRenderProps = {
+      isSelected,
+      isDisabled: isDisabled ?? false,
+    };
+
+    const content =
+      typeof children === 'function'
+        ? children(renderProps)
+        : (children ?? <SwitchThumb />);
+
+    return (
+      <SwitchProvider value={contextValue}>
+        <AnimationSettingsProvider value={animationSettingsContextValue}>
+          <SwitchAnimationProvider value={animationContextValue}>
+            <AnimatedSwitchRoot
+              ref={ref}
+              className={rootClassName}
+              style={rootStyle}
+              isSelected={isSelected}
+              onSelectedChange={onSelectedChange}
+              isDisabled={isDisabled}
+              onPressIn={handlePressIn}
+              onPressOut={handlePressOut}
+              onLayout={(e) => {
+                contentContainerWidth.set(e.nativeEvent.layout.width);
+              }}
+              {...restProps}
+            >
+              {content}
+            </AnimatedSwitchRoot>
+          </SwitchAnimationProvider>
+        </AnimationSettingsProvider>
+      </SwitchProvider>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const SwitchThumb = forwardRef<
+  SwitchPrimitivesTypes.ThumbRef,
+  SwitchThumbProps
+>((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    animation,
+    isAnimatedStyleActive = true,
+    ...restProps
+  } = props;
+
+  const { isSelected, isDisabled } = useSwitch();
+
+  const thumbClassName = switchStyles.thumb({
+    className,
+  });
+
+  const { rContainerStyle } = useSwitchThumbAnimation({
+    animation,
+    style: style as ViewStyle | undefined,
+    className: thumbClassName,
+    isSelected,
+  });
+
+  const thumbStyle = isAnimatedStyleActive
+    ? [styleSheet.borderCurve, rContainerStyle, style]
+    : [styleSheet.borderCurve, style];
+
+  const renderProps: SwitchRenderProps = {
+    isSelected,
+    isDisabled: isDisabled ?? false,
+  };
+
+  const content =
+    typeof children === 'function' ? children(renderProps) : children;
+
+  return (
+    <AnimatedSwitchThumb
+      ref={ref}
+      className={thumbClassName}
+      style={thumbStyle}
+      {...restProps}
+    >
+      {content}
+    </AnimatedSwitchThumb>
+  );
+});
+
+// --------------------------------------------------
+
+const SwitchStartContent = forwardRef<View, SwitchContentProps>(
+  (props, ref) => {
+    const { children, className, ...restProps } = props;
+
+    const tvStyles = switchStyles.startContent({
+      className,
+    });
+
+    return (
+      <View ref={ref} className={tvStyles} {...restProps}>
+        {children}
+      </View>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const SwitchEndContent = forwardRef<View, SwitchContentProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const tvStyles = switchStyles.endContent({
+    className,
+  });
+
+  return (
+    <View ref={ref} className={tvStyles} {...restProps}>
+      {children}
+    </View>
+  );
+});
+
+// --------------------------------------------------
+
+Switch.displayName = DISPLAY_NAME.SWITCH_ROOT;
+SwitchThumb.displayName = DISPLAY_NAME.SWITCH_THUMB;
+SwitchStartContent.displayName = DISPLAY_NAME.SWITCH_START_CONTENT;
+SwitchEndContent.displayName = DISPLAY_NAME.SWITCH_END_CONTENT;
+
+/**
+ * Compound Switch component with sub-components
+ *
+ * @component Switch - Main container that handles toggle state and user interaction.
+ * Renders default thumb if no children provided. Animates scale (on press) and background
+ * color based on selection state. Acts as a pressable area for toggling. Supports render
+ * function children for dynamic content.
+ *
+ * @component Switch.Thumb - Optional sliding thumb element that moves between positions.
+ * Uses spring animation for smooth transitions. Can contain custom content like icons
+ * or be customized with different styles and animations. Supports render function children.
+ *
+ * @component Switch.StartContent - Optional content displayed on the left side of the switch.
+ * Typically used for icons or text that appear when switch is off. Positioned absolutely
+ * within the switch container.
+ *
+ * @component Switch.EndContent - Optional content displayed on the right side of the switch.
+ * Typically used for icons or text that appear when switch is on. Positioned absolutely
+ * within the switch container.
+ *
+ * Props flow from Switch to sub-components via context (isSelected, isDisabled).
+ * The switch supports controlled and uncontrolled modes through isSelected/onSelectedChange.
+ * Animations can be customized or disabled at both root and component levels.
+ * Content components provide visual feedback without affecting the toggle functionality.
+ * Integrates with FormField for press state sharing and larger touch targets.
+ *
+ * @see Full documentation: https://heroui.com/components/switch
+ */
+const CompoundSwitch = Object.assign(Switch, {
+  /** @optional Sliding thumb with spring animations */
+  Thumb: SwitchThumb,
+  /** @optional Content shown when switch is off (left side) */
+  StartContent: SwitchStartContent,
+  /** @optional Content shown when switch is on (right side) */
+  EndContent: SwitchEndContent,
+});
+
+export { useSwitch };
+export default CompoundSwitch;

package/src/components/switch/switch.types.ts

@@ -0,0 +1,208 @@
+import type {
+  AnimatedProps,
+  SharedValue,
+  WithSpringConfig,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+import type {
+  Animation,
+  AnimationRoot,
+  AnimationValue,
+} from '../../helpers/types/animation';
+import * as SwitchPrimitivesTypes from '../../primitives/switch/switch.types';
+
+/**
+ * Render function props for switch children
+ */
+export interface SwitchRenderProps {
+  /** Whether the switch is selected */
+  isSelected?: boolean;
+  /** Whether the switch is disabled */
+  isDisabled: boolean;
+}
+
+/**
+ * Animation configuration for switch root component
+ */
+export type SwitchRootAnimation = AnimationRoot<{
+  scale?: AnimationValue<{
+    /**
+     * Scale values [unpressed, pressed]
+     * @default [1, 0.95]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 150 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  backgroundColor?: AnimationValue<{
+    /**
+     * Background color values [unselected, selected]
+     * @default Uses theme colors (surface-quaternary, accent)
+     */
+    value?: [string, string];
+    /**
+     * Animation timing configuration
+     * @default { duration: 175, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for the main Switch component
+ */
+export interface SwitchProps
+  extends Omit<SwitchPrimitivesTypes.RootProps, 'children'> {
+  /** Content to render inside the switch, or a render function */
+  children?: React.ReactNode | ((props: SwitchRenderProps) => React.ReactNode);
+
+  /** Whether the switch is disabled @default false */
+  isDisabled?: boolean;
+
+  /** Custom class name for the switch
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `backgroundColor` - Animated for selection transitions (unselected: surface-quaternary, selected: accent)
+   * - `transform` (specifically `scale`) - Animated for press feedback transitions (unpressed: 1, pressed: 0.96)
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Switch
+   *   animation={{
+   *     backgroundColor: { value: ['#e5e5e5', '#007AFF'], timingConfig: { duration: 175 } },
+   *     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 switch
+   * - `false` or `"disabled"`: Disable only root animations
+   * - `"disable-all"`: Disable all animations including children
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: SwitchRootAnimation;
+  /**
+   * 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 switch thumb component
+ */
+export type SwitchThumbAnimation = Animation<{
+  /**
+   * Animates the `left` position of the thumb between left and right sides.
+   * The `value` property specifies the offset from the edges (left/right).
+   * When you provide a single value (e.g., `value: 2`), it applies the same offset
+   * to both sides: `2px` from the left when unselected, and `2px` from the right when selected.
+   */
+  left?: AnimationValue<{
+    /**
+     * Offset value from the edges (left when unselected, right when selected)
+     * @default 2
+     * @example value: 4 // 4px offset from both left and right edges
+     */
+    value?: number;
+    /**
+     * Spring animation configuration for thumb position
+     * @default { damping: 120, stiffness: 1600, mass: 2 }
+     */
+    springConfig?: WithSpringConfig;
+  }>;
+  backgroundColor?: AnimationValue<{
+    /**
+     * Background color values [unselected, selected]
+     * @default ['white', theme accent-foreground color]
+     */
+    value?: [string, string];
+    /**
+     * Animation timing configuration
+     * @default { duration: 175, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for the SwitchThumb component
+ */
+export interface SwitchThumbProps
+  extends Omit<AnimatedProps<SwitchPrimitivesTypes.ThumbProps>, 'children'> {
+  /** Content to render inside the thumb, or a render function */
+  children?: React.ReactNode | ((props: SwitchRenderProps) => React.ReactNode);
+
+  /** Custom class name for the thumb element
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `left` - Animated for thumb position transitions (unselected: left edge offset, selected: right edge offset)
+   * - `backgroundColor` - Animated for selection transitions (unselected: white, selected: accent-foreground)
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Switch.Thumb
+   *   animation={{
+   *     left: { value: 2, springConfig: { damping: 120, stiffness: 1600, mass: 2 } },
+   *     backgroundColor: { value: ['white', '#ffffff'], timingConfig: { duration: 175 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+
+  /**
+   * Animation configuration for thumb
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: SwitchThumbAnimation;
+  /**
+   * 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;
+}
+
+/**
+ * Props for the SwitchContent component
+ */
+export interface SwitchContentProps {
+  /** Content to render inside the switch content */
+  children?: React.ReactNode;
+
+  /** Custom class name for the content element */
+  className?: string;
+}
+
+/**
+ * Context value for switch components
+ */
+export interface SwitchContextValue
+  extends Pick<SwitchProps, 'isSelected' | 'isDisabled'> {}
+
+/**
+ * Context value for switch animation state
+ */
+export interface SwitchAnimationContextValue {
+  /** Shared value tracking if the switch is pressed */
+  isSwitchPressed: SharedValue<boolean>;
+  /** Width of the content container */
+  contentContainerWidth: SharedValue<number>;
+}

package/src/components/tabs/index.ts

@@ -0,0 +1,7 @@
+export {
+  default as Tabs,
+  useTabs,
+  useTabsMeasurements,
+  useTabsTrigger,
+} from './tabs';
+export type * from './tabs.types';

package/src/components/tabs/tabs.animation.ts

@@ -0,0 +1,167 @@
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+  type WithSpringConfig,
+  type WithTimingConfig,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../../helpers/contexts/animation-settings-context';
+import { useCombinedAnimationDisabledState } from '../../helpers/hooks';
+import type { AnimationRootDisableAll } from '../../helpers/types/animation';
+import {
+  getAnimationState,
+  getIsAnimationDisabledValue,
+} from '../../helpers/utils/animation';
+import * as TabsPrimitives from '../../primitives/tabs';
+import { DEFAULT_INDICATOR_SPRING_CONFIG } from './tabs.constants';
+import { useTabsMeasurements } from './tabs.context';
+import type { TabsIndicatorAnimation } from './tabs.types';
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Tabs root component
+ * Handles cascading animation disabled state to child components
+ */
+export function useTabsRootAnimation(options: {
+  animation: AnimationRootDisableAll | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  return {
+    isAllAnimationsDisabled,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Tabs Indicator component
+ * Handles width, height, left position, and opacity animations
+ */
+export function useTabsIndicatorAnimation(options: {
+  animation: TabsIndicatorAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  // Get active measurements from tabs context
+  const { value } = TabsPrimitives.useRootContext();
+  const { measurements } = useTabsMeasurements();
+  const activeMeasurements = measurements[value];
+
+  // Read from global animation context (always available in compound parts)
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  // IMPORTANT: Use getIsAnimationDisabledValue to respect both own and parent states
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  const hasMeasured = useSharedValue(false);
+
+  // Helper function to get animation config for a property
+  const getPropertyConfig = (
+    propertyAnimation:
+      | { type: 'spring'; config?: WithSpringConfig }
+      | { type: 'timing'; config?: WithTimingConfig }
+      | undefined
+  ) => {
+    if (!propertyAnimation) {
+      return {
+        type: 'spring' as const,
+        springConfig: DEFAULT_INDICATOR_SPRING_CONFIG,
+        timingConfig: { duration: 200 },
+      };
+    }
+
+    if (propertyAnimation.type === 'spring') {
+      return {
+        type: 'spring' as const,
+        springConfig:
+          propertyAnimation.config ?? DEFAULT_INDICATOR_SPRING_CONFIG,
+        timingConfig: { duration: 200 },
+      };
+    }
+
+    return {
+      type: 'timing' as const,
+      springConfig: DEFAULT_INDICATOR_SPRING_CONFIG,
+      timingConfig: propertyAnimation.config ?? { duration: 200 },
+    };
+  };
+
+  // Get animation configs for each property
+  const widthConfig = getPropertyConfig(animationConfig?.width);
+  const heightConfig = getPropertyConfig(animationConfig?.height);
+  const leftConfig = getPropertyConfig(animationConfig?.left);
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (!activeMeasurements) {
+      return {
+        width: 0,
+        height: 0,
+        left: 0,
+        opacity: 0,
+      };
+    }
+
+    if (!hasMeasured.value) {
+      hasMeasured.value = true;
+      return {
+        width: activeMeasurements.width,
+        height: activeMeasurements.height,
+        left: activeMeasurements.x,
+        opacity: 1,
+      };
+    }
+
+    // Handle disabled state
+    if (isAnimationDisabledValue) {
+      return {
+        width: activeMeasurements.width,
+        height: activeMeasurements.height,
+        left: activeMeasurements.x,
+        opacity: 1,
+      };
+    }
+
+    // Animated state
+    const widthAnimation =
+      widthConfig.type === 'timing'
+        ? withTiming(activeMeasurements.width, widthConfig.timingConfig)
+        : withSpring(activeMeasurements.width, widthConfig.springConfig);
+
+    const heightAnimation =
+      heightConfig.type === 'timing'
+        ? withTiming(activeMeasurements.height, heightConfig.timingConfig)
+        : withSpring(activeMeasurements.height, heightConfig.springConfig);
+
+    const leftAnimation =
+      leftConfig.type === 'timing'
+        ? withTiming(activeMeasurements.x, leftConfig.timingConfig)
+        : withSpring(activeMeasurements.x, leftConfig.springConfig);
+
+    return {
+      width: widthAnimation,
+      height: heightAnimation,
+      left: leftAnimation,
+      opacity: 1,
+    };
+  }, [
+    activeMeasurements,
+    isAnimationDisabledValue,
+    widthConfig,
+    heightConfig,
+    leftConfig,
+  ]);
+
+  return {
+    rContainerStyle,
+  };
+}

package/src/components/tabs/tabs.constants.ts

@@ -0,0 +1,16 @@
+import type { WithSpringConfig } from 'react-native-reanimated';
+
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Tabs.Root',
+  LIST: 'HeroUINative.Tabs.List',
+  SCROLL_VIEW: 'HeroUINative.Tabs.ScrollView',
+  TRIGGER: 'HeroUINative.Tabs.Trigger',
+  LABEL: 'HeroUINative.Tabs.Label',
+  INDICATOR: 'HeroUINative.Tabs.Indicator',
+  CONTENT: 'HeroUINative.Tabs.Content',
+} as const;
+
+export const DEFAULT_INDICATOR_SPRING_CONFIG: WithSpringConfig = {
+  stiffness: 1200,
+  damping: 120,
+};

package/src/components/tabs/tabs.context.ts

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+import type { MeasurementsContextValue } from './tabs.types';
+
+// --------------------------------------------------
+
+/**
+ * Context for managing tab item measurements
+ * Used to track width, height, and position of each tab trigger
+ */
+const MeasurementsContext = createContext<MeasurementsContextValue | null>(
+  null
+);
+
+/**
+ * Hook to access tab measurements context
+ * @throws Error if used outside of Tabs component
+ */
+function useTabsMeasurements() {
+  const context = useContext(MeasurementsContext);
+  if (!context) {
+    throw new Error(
+      'Tabs measurement components must be used within Tabs component'
+    );
+  }
+  return context;
+}
+
+export { MeasurementsContext, useTabsMeasurements };