@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/switch/switch.animation.js

@@ -0,0 +1,183 @@
+"use strict";
+
+import { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useAnimationSettings } from "../../helpers/contexts/index.js";
+import { useCombinedAnimationDisabledState, useResolvedStyleProperty } from "../../helpers/hooks/index.js";
+import { useThemeColor } from "../../helpers/theme/index.js";
+import { createContext } from "../../helpers/utils/index.js";
+import { getAnimationState, getAnimationValueMergedConfig, getAnimationValueProperty, getIsAnimationDisabledValue, getRootAnimationState } from "../../helpers/utils/animation.js";
+import { useFormField } from "../form-field/form-field.context.js";
+import { DEFAULT_SPRING_CONFIG, DEFAULT_THUMB_LEFT, DEFAULT_THUMB_WIDTH, DEFAULT_TIMING_CONFIG } from "./switch.constants.js";
+const [SwitchAnimationProvider, useSwitchAnimation] = createContext({
+  name: 'SwitchAnimationContext'
+});
+export { SwitchAnimationProvider, useSwitchAnimation };
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Switch root component
+ * Handles scale and background color animations and provides context for child components
+ */
+export function useSwitchRootAnimation(options) {
+  const {
+    animation,
+    isSelected
+  } = options;
+  const [themeColorAccent, themeColorSurfaceQuaternary] = useThemeColor(['accent', 'surface-quaternary']);
+  const formFieldContext = useFormField();
+  const isSwitchPressed = useSharedValue(false);
+  const contentContainerWidth = useSharedValue(0);
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getRootAnimationState(animation);
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+
+  // Scale animation
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'value',
+    defaultValue: [1, 0.96]
+  });
+  const scaleTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.scale,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: 150
+    }
+  });
+
+  // Background color animation
+  const backgroundColorValue = getAnimationValueProperty({
+    animationValue: animationConfig?.backgroundColor,
+    property: 'value',
+    defaultValue: [themeColorSurfaceQuaternary, themeColorAccent]
+  });
+  const backgroundColorTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.backgroundColor,
+    property: 'timingConfig',
+    defaultValue: DEFAULT_TIMING_CONFIG
+  });
+  const rContainerStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {
+        backgroundColor: isSelected ? backgroundColorValue[1] : backgroundColorValue[0]
+      };
+    }
+    const pressed = isSwitchPressed.get() || (formFieldContext?.isPressed.get() ?? false);
+    return {
+      backgroundColor: withTiming(isSelected ? backgroundColorValue[1] : backgroundColorValue[0], backgroundColorTimingConfig),
+      transform: [{
+        scale: withTiming(pressed ? scaleValue[1] : scaleValue[0], scaleTimingConfig)
+      }]
+    };
+  });
+  return {
+    rContainerStyle,
+    isSwitchPressed,
+    contentContainerWidth,
+    isAllAnimationsDisabled
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Switch thumb component
+ * Handles thumb position (left) and background color animations
+ */
+export function useSwitchThumbAnimation(options) {
+  const {
+    animation,
+    style,
+    className,
+    isSelected
+  } = options;
+  const themeColorAccentForeground = useThemeColor('accent-foreground');
+  const [width, left] = useResolvedStyleProperty({
+    className,
+    style,
+    propertyNames: ['width', 'left']
+  });
+  const computedWidth = typeof width === 'number' ? width : DEFAULT_THUMB_WIDTH;
+  const computedLeft = typeof left === 'number' ? left : DEFAULT_THUMB_LEFT;
+
+  // Read from global animation context (always available in compound parts)
+  const {
+    isAllAnimationsDisabled
+  } = useAnimationSettings();
+  const {
+    contentContainerWidth
+  } = useSwitchAnimation();
+  const {
+    animationConfig,
+    isAnimationDisabled
+  } = getAnimationState(animation);
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled
+  });
+
+  // Left position animation
+  const leftValue = getAnimationValueProperty({
+    animationValue: animationConfig?.left,
+    property: 'value',
+    defaultValue: computedLeft
+  });
+  const leftSpringConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.left,
+    property: 'springConfig',
+    defaultValue: DEFAULT_SPRING_CONFIG
+  });
+
+  // Background color animation
+  const backgroundColorValue = getAnimationValueProperty({
+    animationValue: animationConfig?.backgroundColor,
+    property: 'value',
+    defaultValue: ['white', themeColorAccentForeground]
+  });
+  const backgroundColorTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.backgroundColor,
+    property: 'timingConfig',
+    defaultValue: DEFAULT_TIMING_CONFIG
+  });
+  const rContainerStyle = useAnimatedStyle(() => {
+    const isMounted = contentContainerWidth.get() > 0;
+
+    // This is done to prevent the thumb from moving from the default position to the right
+    // when the component is mounted with `isSelected` set to `true`,
+    // and the user hasn't touched the switch yet.
+    if (!isMounted) {
+      if (isSelected) {
+        return {
+          right: leftValue,
+          backgroundColor: backgroundColorValue[1]
+        };
+      }
+      return {
+        left: leftValue,
+        backgroundColor: backgroundColorValue[0]
+      };
+    }
+    const targetLeft = isSelected ? contentContainerWidth.get() - computedWidth - leftValue : leftValue;
+    if (isAnimationDisabledValue) {
+      return {
+        left: targetLeft,
+        backgroundColor: isSelected ? backgroundColorValue[1] : backgroundColorValue[0]
+      };
+    }
+    return {
+      left: withSpring(targetLeft, leftSpringConfig),
+      backgroundColor: withTiming(isSelected ? backgroundColorValue[1] : backgroundColorValue[0], backgroundColorTimingConfig)
+    };
+  });
+  return {
+    rContainerStyle
+  };
+}
+//# sourceMappingURL=switch.animation.js.map

package/lib/module/components/switch/switch.animation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAnimatedStyle","useSharedValue","withSpring","withTiming","useAnimationSettings","useCombinedAnimationDisabledState","useResolvedStyleProperty","useThemeColor","createContext","getAnimationState","getAnimationValueMergedConfig","getAnimationValueProperty","getIsAnimationDisabledValue","getRootAnimationState","useFormField","DEFAULT_SPRING_CONFIG","DEFAULT_THUMB_LEFT","DEFAULT_THUMB_WIDTH","DEFAULT_TIMING_CONFIG","SwitchAnimationProvider","useSwitchAnimation","name","useSwitchRootAnimation","options","animation","isSelected","themeColorAccent","themeColorSurfaceQuaternary","formFieldContext","isSwitchPressed","contentContainerWidth","animationConfig","isAnimationDisabled","isAllAnimationsDisabled","isAnimationDisabledValue","scaleValue","animationValue","scale","property","defaultValue","scaleTimingConfig","duration","backgroundColorValue","backgroundColor","backgroundColorTimingConfig","rContainerStyle","pressed","get","isPressed","transform","useSwitchThumbAnimation","style","className","themeColorAccentForeground","width","left","propertyNames","computedWidth","computedLeft","leftValue","leftSpringConfig","isMounted","right","targetLeft"],"sourceRoot":"../../../../src","sources":["components/switch/switch.animation.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/switch/switch.constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { Easing } from 'react-native-reanimated';
+export const DISPLAY_NAME = {
+  SWITCH_ROOT: 'HeroUINative.Switch.Root',
+  SWITCH_THUMB: 'HeroUINative.Switch.Thumb',
+  SWITCH_START_CONTENT: 'HeroUINative.Switch.StartContent',
+  SWITCH_END_CONTENT: 'HeroUINative.Switch.EndContent'
+};
+export const ANIMATION_DURATION = 175;
+export const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
+export const DEFAULT_TIMING_CONFIG = {
+  duration: ANIMATION_DURATION,
+  easing: ANIMATION_EASING
+};
+export const DEFAULT_SPRING_CONFIG = {
+  damping: 120,
+  stiffness: 1600,
+  mass: 2
+};
+export const DEFAULT_THUMB_WIDTH = 28;
+export const DEFAULT_THUMB_LEFT = 2;
+//# sourceMappingURL=switch.constants.js.map

package/lib/module/components/switch/switch.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Easing","DISPLAY_NAME","SWITCH_ROOT","SWITCH_THUMB","SWITCH_START_CONTENT","SWITCH_END_CONTENT","ANIMATION_DURATION","ANIMATION_EASING","bezier","DEFAULT_TIMING_CONFIG","duration","easing","DEFAULT_SPRING_CONFIG","damping","stiffness","mass","DEFAULT_THUMB_WIDTH","DEFAULT_THUMB_LEFT"],"sourceRoot":"../../../../src","sources":["components/switch/switch.constants.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,OAAO,MAAMC,YAAY,GAAG;EAC1BC,WAAW,EAAE,0BAA0B;EACvCC,YAAY,EAAE,2BAA2B;EACzCC,oBAAoB,EAAE,kCAAkC;EACxDC,kBAAkB,EAAE;AACtB,CAAU;AAEV,OAAO,MAAMC,kBAAkB,GAAG,GAAG;AACrC,OAAO,MAAMC,gBAAgB,GAAGP,MAAM,CAACQ,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;AAEjE,OAAO,MAAMC,qBAAqB,GAAG;EACnCC,QAAQ,EAAEJ,kBAAkB;EAC5BK,MAAM,EAAEJ;AACV,CAAC;AAED,OAAO,MAAMK,qBAAqB,GAAG;EACnCC,OAAO,EAAE,GAAG;EACZC,SAAS,EAAE,IAAI;EACfC,IAAI,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAG,EAAE;AAErC,OAAO,MAAMC,kBAAkB,GAAG,CAAC","ignoreList":[]}

package/lib/module/components/switch/switch.js

@@ -0,0 +1,223 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { AnimationSettingsProvider } from "../../helpers/contexts/animation-settings-context.js";
+import { createContext } from "../../helpers/utils/index.js";
+import * as SwitchPrimitives from "../../primitives/switch/index.js";
+import { SwitchAnimationProvider, useSwitchRootAnimation, useSwitchThumbAnimation } from "./switch.animation.js";
+import { DISPLAY_NAME } from "./switch.constants.js";
+import switchStyles, { styleSheet } from "./switch.styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedSwitchRoot = Animated.createAnimatedComponent(SwitchPrimitives.Root);
+const AnimatedSwitchThumb = Animated.createAnimatedComponent(SwitchPrimitives.Thumb);
+const [SwitchProvider, useSwitch] = createContext({
+  name: 'SwitchContext'
+});
+
+// --------------------------------------------------
+
+const Switch = /*#__PURE__*/forwardRef((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 => {
+    isSwitchPressed.set(true);
+    onPressIn?.(event);
+  }, [isSwitchPressed, onPressIn]);
+  const handlePressOut = useCallback(event => {
+    isSwitchPressed.set(false);
+    onPressOut?.(event);
+  }, [isSwitchPressed, onPressOut]);
+  const renderProps = {
+    isSelected,
+    isDisabled: isDisabled ?? false
+  };
+  const content = typeof children === 'function' ? children(renderProps) : children ?? /*#__PURE__*/_jsx(SwitchThumb, {});
+  return /*#__PURE__*/_jsx(SwitchProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+      value: animationSettingsContextValue,
+      children: /*#__PURE__*/_jsx(SwitchAnimationProvider, {
+        value: animationContextValue,
+        children: /*#__PURE__*/_jsx(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,
+          children: content
+        })
+      })
+    })
+  });
+});
+
+// --------------------------------------------------
+
+const SwitchThumb = /*#__PURE__*/forwardRef((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,
+    className: thumbClassName,
+    isSelected
+  });
+  const thumbStyle = isAnimatedStyleActive ? [styleSheet.borderCurve, rContainerStyle, style] : [styleSheet.borderCurve, style];
+  const renderProps = {
+    isSelected,
+    isDisabled: isDisabled ?? false
+  };
+  const content = typeof children === 'function' ? children(renderProps) : children;
+  return /*#__PURE__*/_jsx(AnimatedSwitchThumb, {
+    ref: ref,
+    className: thumbClassName,
+    style: thumbStyle,
+    ...restProps,
+    children: content
+  });
+});
+
+// --------------------------------------------------
+
+const SwitchStartContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...restProps
+  } = props;
+  const tvStyles = switchStyles.startContent({
+    className
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: tvStyles,
+    ...restProps,
+    children: children
+  });
+});
+
+// --------------------------------------------------
+
+const SwitchEndContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...restProps
+  } = props;
+  const tvStyles = switchStyles.endContent({
+    className
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: tvStyles,
+    ...restProps,
+    children: children
+  });
+});
+
+// --------------------------------------------------
+
+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;
+//# sourceMappingURL=switch.js.map

package/lib/module/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","View","Animated","AnimationSettingsProvider","createContext","SwitchPrimitives","SwitchAnimationProvider","useSwitchRootAnimation","useSwitchThumbAnimation","DISPLAY_NAME","switchStyles","styleSheet","jsx","_jsx","AnimatedSwitchRoot","createAnimatedComponent","Root","AnimatedSwitchThumb","Thumb","SwitchProvider","useSwitch","name","Switch","props","ref","children","isDisabled","isSelected","onSelectedChange","className","style","animation","isAnimatedStyleActive","onPressIn","onPressOut","restProps","rootClassName","root","rContainerStyle","isSwitchPressed","contentContainerWidth","isAllAnimationsDisabled","rootStyle","borderCurve","contextValue","animationContextValue","animationSettingsContextValue","handlePressIn","event","set","handlePressOut","renderProps","content","SwitchThumb","value","onLayout","e","nativeEvent","layout","width","thumbClassName","thumb","thumbStyle","SwitchStartContent","tvStyles","startContent","SwitchEndContent","endContent","displayName","SWITCH_ROOT","SWITCH_THUMB","SWITCH_START_CONTENT","SWITCH_END_CONTENT","CompoundSwitch","Object","assign","StartContent","EndContent"],"sourceRoot":"../../../../src","sources":["components/switch/switch.tsx"],"mappings":"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","ignoreList":[]}