@impulse-ui-native/switch 2.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ImpulseUI Native contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+# @impulse-ui-native/switch
+
+Accessible, token-aware animated switch controls for React Native and React Native Web.
+
+## Installation
+
+```sh
+pnpm add @impulse-ui-native/switch react-native-reanimated react-native-worklets
+```
+
+Complete the platform setup required by Reanimated and Worklets, rebuild the native application when necessary, and render the component inside `ThemeProvider` from `@impulse-ui-native/theme`.
+
+## Main exports
+
+- `Switch` supports controlled and uncontrolled on/off state.
+- `SwitchProps` describes the component API.
+
+## Usage
+
+```tsx
+import { useState } from "react";
+
+import { Switch } from "@impulse-ui-native/switch";
+
+export function NotificationsSwitch() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Switch
+      accessibilityLabel="Notifications"
+      checked={checked}
+      onCheckedChange={setChecked}
+      size="medium"
+      variant="filled"
+    />
+  );
+}
+```
+
+Use `defaultChecked` for uncontrolled state. The thumb position and track colors animate when the state changes. System reduced-motion preferences disable the transition while preserving the state change.
+
+Set `loading` while an update is pending. Loading switches expose a busy accessibility state, show an activity indicator, and block further presses until loading ends. Disabled switches also block interaction.
+
+The standalone switch does not render a label, so provide `accessibilityLabel` unless a surrounding labelled control supplies an accessible name.

package/dist/components/index.d.mts

@@ -0,0 +1,6 @@
+export { Switch } from './switch.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import '../types/switch.types.mjs';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';

package/dist/components/index.js

@@ -0,0 +1,5 @@
+import { Switch } from "./switch";
+export {
+  Switch
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export { Switch } from \"./switch\";\n"],"mappings":"AAAA,SAAS,cAAc;","names":[]}

package/dist/components/switch.d.mts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SwitchProps } from '../types/switch.types.mjs';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';
+
+declare const Switch: react.MemoExoticComponent<({ accessibilityState, checked: checkedProp, defaultChecked, disabled, hitSlop, loading, onCheckedChange, onPress, size, style, variant, ...props }: SwitchProps) => react_jsx_runtime.JSX.Element>;
+
+export { Switch };

package/dist/components/switch.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from "react";
+import { ActivityIndicator, StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import { useControllableState } from "@impulse-ui-native/core";
+import { Pressable } from "@impulse-ui-native/primitives";
+import { useThemedStyles } from "@impulse-ui-native/theme";
+import { useSwitchAnimation, useSwitchTokens } from "../hooks";
+import { switchStyles } from "./switch.styles";
+const Switch = memo(function Switch2({
+  accessibilityState,
+  checked: checkedProp,
+  defaultChecked = false,
+  disabled,
+  hitSlop,
+  loading = false,
+  onCheckedChange,
+  onPress,
+  size = "medium",
+  style,
+  variant = "filled",
+  ...props
+}) {
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked,
+    onChange: onCheckedChange
+  });
+  const interactionDisabled = disabled === true || loading;
+  const {
+    animationDuration,
+    borderWidth,
+    colors,
+    loadingIndicatorColor,
+    sizeTokens
+  } = useSwitchTokens({ disabled: interactionDisabled, size, variant });
+  const styles = useThemedStyles(switchStyles, { size }, [size]);
+  const { thumbStyle, trackStyle } = useSwitchAnimation({
+    animationDuration,
+    borderWidth,
+    checked,
+    colors,
+    sizeTokens
+  });
+  const resolvedAccessibilityState = useMemo(
+    () => ({
+      ...accessibilityState,
+      busy: loading,
+      checked,
+      disabled: interactionDisabled
+    }),
+    [accessibilityState, checked, interactionDisabled, loading]
+  );
+  const switchStyle = useCallback(
+    (state) => StyleSheet.flatten([
+      styles.root,
+      typeof style === "function" ? style(state) : style
+    ]),
+    [style, styles.root]
+  );
+  const handlePress = useCallback(
+    (event) => {
+      setChecked((current) => !current);
+      onPress?.(event);
+    },
+    [onPress, setChecked]
+  );
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...props,
+      accessibilityRole: "switch",
+      accessibilityState: resolvedAccessibilityState,
+      disabled: interactionDisabled,
+      hitSlop: hitSlop ?? sizeTokens.hitSlop,
+      onPress: handlePress,
+      style: switchStyle,
+      children: /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: [styles.track, trackStyle], children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.thumb, thumbStyle], children: loading ? /* @__PURE__ */ jsx(
+        ActivityIndicator,
+        {
+          color: loadingIndicatorColor,
+          size: "small",
+          style: styles.loadingIndicator
+        }
+      ) : null }) })
+    }
+  );
+});
+export {
+  Switch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import type {\n  AccessibilityState,\n  GestureResponderEvent,\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from \"react-native\";\nimport { memo, useCallback, useMemo } from \"react\";\nimport { ActivityIndicator, StyleSheet } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\nimport { Pressable } from \"@impulse-ui-native/primitives\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { SwitchProps } from \"../types\";\nimport { useSwitchAnimation, useSwitchTokens } from \"../hooks\";\nimport { switchStyles } from \"./switch.styles\";\n\nexport const Switch = memo(function Switch({\n  accessibilityState,\n  checked: checkedProp,\n  defaultChecked = false,\n  disabled,\n  hitSlop,\n  loading = false,\n  onCheckedChange,\n  onPress,\n  size = \"medium\",\n  style,\n  variant = \"filled\",\n  ...props\n}: SwitchProps) {\n  const [checked, setChecked] = useControllableState<boolean>({\n    prop: checkedProp,\n    defaultProp: defaultChecked,\n    onChange: onCheckedChange,\n  });\n  const interactionDisabled = disabled === true || loading;\n  const {\n    animationDuration,\n    borderWidth,\n    colors,\n    loadingIndicatorColor,\n    sizeTokens,\n  } = useSwitchTokens({ disabled: interactionDisabled, size, variant });\n  const styles = useThemedStyles(switchStyles, { size }, [size]);\n  const { thumbStyle, trackStyle } = useSwitchAnimation({\n    animationDuration,\n    borderWidth,\n    checked,\n    colors,\n    sizeTokens,\n  });\n\n  const resolvedAccessibilityState = useMemo<AccessibilityState>(\n    () => ({\n      ...accessibilityState,\n      busy: loading,\n      checked,\n      disabled: interactionDisabled,\n    }),\n    [accessibilityState, checked, interactionDisabled, loading],\n  );\n\n  const switchStyle = useCallback(\n    (state: PressableStateCallbackType): StyleProp<ViewStyle> =>\n      StyleSheet.flatten([\n        styles.root,\n        typeof style === \"function\" ? style(state) : style,\n      ]),\n    [style, styles.root],\n  );\n\n  const handlePress = useCallback(\n    (event: GestureResponderEvent) => {\n      setChecked((current) => !current);\n      onPress?.(event);\n    },\n    [onPress, setChecked],\n  );\n\n  return (\n    <Pressable\n      {...props}\n      accessibilityRole=\"switch\"\n      accessibilityState={resolvedAccessibilityState}\n      disabled={interactionDisabled}\n      hitSlop={hitSlop ?? sizeTokens.hitSlop}\n      onPress={handlePress}\n      style={switchStyle}\n    >\n      <Animated.View pointerEvents=\"none\" style={[styles.track, trackStyle]}>\n        <Animated.View style={[styles.thumb, thumbStyle]}>\n          {loading ? (\n            <ActivityIndicator\n              color={loadingIndicatorColor}\n              size=\"small\"\n              style={styles.loadingIndicator}\n            />\n          ) : null}\n        </Animated.View>\n      </Animated.View>\n    </Pressable>\n  );\n});\n"],"mappings":"AA+FY;AAxFZ,SAAS,MAAM,aAAa,eAAe;AAC3C,SAAS,mBAAmB,kBAAkB;AAC9C,OAAO,cAAc;AAErB,SAAS,4BAA4B;AACrC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAGhC,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,oBAAoB;AAEtB,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAgB;AACd,QAAM,CAAC,SAAS,UAAU,IAAI,qBAA8B;AAAA,IAC1D,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,sBAAsB,aAAa,QAAQ;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB,EAAE,UAAU,qBAAqB,MAAM,QAAQ,CAAC;AACpE,QAAM,SAAS,gBAAgB,cAAc,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAC7D,QAAM,EAAE,YAAY,WAAW,IAAI,mBAAmB;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,oBAAoB,SAAS,qBAAqB,OAAO;AAAA,EAC5D;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,UACC,WAAW,QAAQ;AAAA,MACjB,OAAO;AAAA,MACP,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C,CAAC;AAAA,IACH,CAAC,OAAO,OAAO,IAAI;AAAA,EACrB;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,UAAiC;AAChC,iBAAW,CAAC,YAAY,CAAC,OAAO;AAChC,gBAAU,KAAK;AAAA,IACjB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,SAAS,WAAW,WAAW;AAAA,MAC/B,SAAS;AAAA,MACT,OAAO;AAAA,MAEP,8BAAC,SAAS,MAAT,EAAc,eAAc,QAAO,OAAO,CAAC,OAAO,OAAO,UAAU,GAClE,8BAAC,SAAS,MAAT,EAAc,OAAO,CAAC,OAAO,OAAO,UAAU,GAC5C,oBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,MAAK;AAAA,UACL,OAAO,OAAO;AAAA;AAAA,MAChB,IACE,MACN,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Switch"]}

package/dist/components/switch.styles.d.mts

@@ -0,0 +1,35 @@
+import { AppTheme } from '@impulse-ui-native/theme';
+import { SwitchThemeProps } from '../types/switch.types.mjs';
+import '@impulse-ui-native/primitives';
+
+declare function switchStyles(theme: AppTheme, props: SwitchThemeProps): {
+    root: {
+        width: number;
+        height: number;
+    };
+    track: {
+        position: "relative";
+        justifyContent: "center";
+        width: number;
+        height: number;
+        borderWidth: number;
+        borderRadius: number;
+    };
+    thumb: {
+        position: "absolute";
+        alignItems: "center";
+        justifyContent: "center";
+        left: number | undefined;
+        right: number | undefined;
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    loadingIndicator: {
+        transform: {
+            scale: number;
+        }[];
+    };
+};
+
+export { switchStyles };

package/dist/components/switch.styles.js

@@ -0,0 +1,38 @@
+import { I18nManager, StyleSheet } from "react-native";
+function switchStyles(theme, props) {
+  const { size } = props;
+  const switchTokens = theme.components.switch;
+  const sizeTokens = switchTokens.sizes[size];
+  const thumbInset = sizeTokens.trackPadding;
+  return StyleSheet.create({
+    root: {
+      width: sizeTokens.width,
+      height: sizeTokens.height
+    },
+    track: {
+      position: "relative",
+      justifyContent: "center",
+      width: sizeTokens.width,
+      height: sizeTokens.height,
+      borderWidth: switchTokens.borderWidth,
+      borderRadius: switchTokens.borderRadius
+    },
+    thumb: {
+      position: "absolute",
+      alignItems: "center",
+      justifyContent: "center",
+      left: I18nManager.isRTL ? void 0 : thumbInset,
+      right: I18nManager.isRTL ? thumbInset : void 0,
+      width: sizeTokens.thumbSize,
+      height: sizeTokens.thumbSize,
+      borderRadius: switchTokens.thumbBorderRadius
+    },
+    loadingIndicator: {
+      transform: [{ scale: sizeTokens.loadingIndicatorScale }]
+    }
+  });
+}
+export {
+  switchStyles
+};
+//# sourceMappingURL=switch.styles.js.map

package/dist/components/switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/switch.styles.ts"],"sourcesContent":["import { I18nManager, StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport type { SwitchThemeProps } from \"../types\";\n\nexport function switchStyles(theme: AppTheme, props: SwitchThemeProps) {\n  const { size } = props;\n\n  const switchTokens = theme.components.switch;\n  const sizeTokens = switchTokens.sizes[size];\n  const thumbInset = sizeTokens.trackPadding;\n\n  return StyleSheet.create({\n    root: {\n      width: sizeTokens.width,\n      height: sizeTokens.height,\n    },\n\n    track: {\n      position: \"relative\",\n      justifyContent: \"center\",\n\n      width: sizeTokens.width,\n      height: sizeTokens.height,\n\n      borderWidth: switchTokens.borderWidth,\n      borderRadius: switchTokens.borderRadius,\n    },\n\n    thumb: {\n      position: \"absolute\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      left: I18nManager.isRTL ? undefined : thumbInset,\n      right: I18nManager.isRTL ? thumbInset : undefined,\n\n      width: sizeTokens.thumbSize,\n      height: sizeTokens.thumbSize,\n\n      borderRadius: switchTokens.thumbBorderRadius,\n    },\n\n    loadingIndicator: {\n      transform: [{ scale: sizeTokens.loadingIndicatorScale }],\n    },\n  });\n}\n"],"mappings":"AAAA,SAAS,aAAa,kBAAkB;AAMjC,SAAS,aAAa,OAAiB,OAAyB;AACrE,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,aAAa,WAAW;AAE9B,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,IACrB;AAAA,IAEA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,gBAAgB;AAAA,MAEhB,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,MAEnB,aAAa,aAAa;AAAA,MAC1B,cAAc,aAAa;AAAA,IAC7B;AAAA,IAEA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,MAAM,YAAY,QAAQ,SAAY;AAAA,MACtC,OAAO,YAAY,QAAQ,aAAa;AAAA,MAExC,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,MAEnB,cAAc,aAAa;AAAA,IAC7B;AAAA,IAEA,kBAAkB;AAAA,MAChB,WAAW,CAAC,EAAE,OAAO,WAAW,sBAAsB,CAAC;AAAA,IACzD;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/hooks/index.d.mts

@@ -0,0 +1,4 @@
+export { useSwitchAnimation } from './use-switch-animation.hook.mjs';
+export { useSwitchTokens } from './use-switch-tokens.hook.mjs';
+import 'react-native-reanimated/lib/typescript/hook/commonTypes';
+import '@impulse-ui-native/theme';

package/dist/hooks/index.js

@@ -0,0 +1,7 @@
+import { useSwitchAnimation } from "./use-switch-animation.hook";
+import { useSwitchTokens } from "./use-switch-tokens.hook";
+export {
+  useSwitchAnimation,
+  useSwitchTokens
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useSwitchAnimation } from \"./use-switch-animation.hook\";\nexport { useSwitchTokens } from \"./use-switch-tokens.hook\";\n"],"mappings":"AAAA,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;","names":[]}

package/dist/hooks/use-switch-animation.hook.d.mts

@@ -0,0 +1,25 @@
+import * as react_native_reanimated_lib_typescript_hook_commonTypes from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+import { SwitchSizeTokens } from '@impulse-ui-native/theme';
+import { SwitchAnimationColors } from './use-switch-tokens.hook.mjs';
+
+interface UseSwitchAnimationOptions {
+    animationDuration: number;
+    borderWidth: number;
+    checked: boolean;
+    colors: SwitchAnimationColors;
+    sizeTokens: SwitchSizeTokens[keyof SwitchSizeTokens];
+}
+declare function useSwitchAnimation({ animationDuration, borderWidth, checked, colors, sizeTokens, }: UseSwitchAnimationOptions): {
+    thumbStyle: react_native_reanimated_lib_typescript_hook_commonTypes.AnimatedStyleHandle<{
+        backgroundColor: string;
+        transform: {
+            translateX: number;
+        }[];
+    }>;
+    trackStyle: react_native_reanimated_lib_typescript_hook_commonTypes.AnimatedStyleHandle<{
+        backgroundColor: string;
+        borderColor: string;
+    }>;
+};
+
+export { useSwitchAnimation };

package/dist/hooks/use-switch-animation.hook.js

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { I18nManager } from "react-native";
+import {
+  Easing,
+  interpolateColor,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+function useSwitchAnimation({
+  animationDuration,
+  borderWidth,
+  checked,
+  colors,
+  sizeTokens
+}) {
+  const reduceMotion = useReducedMotion();
+  const progress = useSharedValue(checked ? 1 : 0);
+  const thumbTravel = sizeTokens.width - sizeTokens.thumbSize - sizeTokens.trackPadding * 2 - borderWidth * 2;
+  const direction = I18nManager.isRTL ? -1 : 1;
+  const trackStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        progress.value,
+        [0, 1],
+        [colors.inactiveBackgroundColor, colors.activeBackgroundColor]
+      ),
+      borderColor: interpolateColor(
+        progress.value,
+        [0, 1],
+        [colors.inactiveBorderColor, colors.activeBorderColor]
+      )
+    }),
+    [colors]
+  );
+  const thumbStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        progress.value,
+        [0, 1],
+        [colors.inactiveThumbColor, colors.activeThumbColor]
+      ),
+      transform: [
+        {
+          translateX: progress.value * thumbTravel * direction
+        }
+      ]
+    }),
+    [colors, direction, thumbTravel]
+  );
+  useEffect(() => {
+    progress.value = withTiming(checked ? 1 : 0, {
+      duration: reduceMotion ? 0 : animationDuration,
+      easing: Easing.out(Easing.cubic)
+    });
+  }, [animationDuration, checked, progress, reduceMotion]);
+  return { thumbStyle, trackStyle };
+}
+export {
+  useSwitchAnimation
+};
+//# sourceMappingURL=use-switch-animation.hook.js.map

package/dist/hooks/use-switch-animation.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-switch-animation.hook.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { I18nManager } from \"react-native\";\nimport {\n  Easing,\n  interpolateColor,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from \"react-native-reanimated\";\n\nimport type { SwitchSizeTokens } from \"@impulse-ui-native/theme\";\n\nimport type { SwitchAnimationColors } from \"./use-switch-tokens.hook\";\n\ninterface UseSwitchAnimationOptions {\n  animationDuration: number;\n  borderWidth: number;\n  checked: boolean;\n  colors: SwitchAnimationColors;\n  sizeTokens: SwitchSizeTokens[keyof SwitchSizeTokens];\n}\n\nexport function useSwitchAnimation({\n  animationDuration,\n  borderWidth,\n  checked,\n  colors,\n  sizeTokens,\n}: UseSwitchAnimationOptions) {\n  const reduceMotion = useReducedMotion();\n  const progress = useSharedValue(checked ? 1 : 0);\n\n  const thumbTravel =\n    sizeTokens.width -\n    sizeTokens.thumbSize -\n    sizeTokens.trackPadding * 2 -\n    borderWidth * 2;\n  const direction = I18nManager.isRTL ? -1 : 1;\n\n  const trackStyle = useAnimatedStyle(\n    () => ({\n      backgroundColor: interpolateColor(\n        progress.value,\n        [0, 1],\n        [colors.inactiveBackgroundColor, colors.activeBackgroundColor],\n      ),\n      borderColor: interpolateColor(\n        progress.value,\n        [0, 1],\n        [colors.inactiveBorderColor, colors.activeBorderColor],\n      ),\n    }),\n    [colors],\n  );\n\n  const thumbStyle = useAnimatedStyle(\n    () => ({\n      backgroundColor: interpolateColor(\n        progress.value,\n        [0, 1],\n        [colors.inactiveThumbColor, colors.activeThumbColor],\n      ),\n      transform: [\n        {\n          translateX: progress.value * thumbTravel * direction,\n        },\n      ],\n    }),\n    [colors, direction, thumbTravel],\n  );\n\n  useEffect(() => {\n    // Reanimated shared values are mutable handles updated from React effects.\n    // eslint-disable-next-line react-hooks/immutability\n    progress.value = withTiming(checked ? 1 : 0, {\n      duration: reduceMotion ? 0 : animationDuration,\n      easing: Easing.out(Easing.cubic),\n    });\n  }, [animationDuration, checked, progress, reduceMotion]);\n\n  return { thumbStyle, trackStyle };\n}\n"],"mappings":"AAAA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcA,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,eAAe,iBAAiB;AACtC,QAAM,WAAW,eAAe,UAAU,IAAI,CAAC;AAE/C,QAAM,cACJ,WAAW,QACX,WAAW,YACX,WAAW,eAAe,IAC1B,cAAc;AAChB,QAAM,YAAY,YAAY,QAAQ,KAAK;AAE3C,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL,iBAAiB;AAAA,QACf,SAAS;AAAA,QACT,CAAC,GAAG,CAAC;AAAA,QACL,CAAC,OAAO,yBAAyB,OAAO,qBAAqB;AAAA,MAC/D;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,CAAC,GAAG,CAAC;AAAA,QACL,CAAC,OAAO,qBAAqB,OAAO,iBAAiB;AAAA,MACvD;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL,iBAAiB;AAAA,QACf,SAAS;AAAA,QACT,CAAC,GAAG,CAAC;AAAA,QACL,CAAC,OAAO,oBAAoB,OAAO,gBAAgB;AAAA,MACrD;AAAA,MACA,WAAW;AAAA,QACT;AAAA,UACE,YAAY,SAAS,QAAQ,cAAc;AAAA,QAC7C;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,WAAW,WAAW;AAAA,EACjC;AAEA,YAAU,MAAM;AAGd,aAAS,QAAQ,WAAW,UAAU,IAAI,GAAG;AAAA,MAC3C,UAAU,eAAe,IAAI;AAAA,MAC7B,QAAQ,OAAO,IAAI,OAAO,KAAK;AAAA,IACjC,CAAC;AAAA,EACH,GAAG,CAAC,mBAAmB,SAAS,UAAU,YAAY,CAAC;AAEvD,SAAO,EAAE,YAAY,WAAW;AAClC;","names":[]}

package/dist/hooks/use-switch-tokens.hook.d.mts

@@ -0,0 +1,31 @@
+import { ComponentSize, ComponentVariant } from '@impulse-ui-native/theme';
+
+interface SwitchAnimationColors {
+    activeBackgroundColor: string;
+    activeBorderColor: string;
+    activeThumbColor: string;
+    inactiveBackgroundColor: string;
+    inactiveBorderColor: string;
+    inactiveThumbColor: string;
+}
+interface UseSwitchTokensOptions {
+    disabled: boolean;
+    size: ComponentSize;
+    variant: ComponentVariant;
+}
+declare function useSwitchTokens({ disabled, size, variant, }: UseSwitchTokensOptions): {
+    animationDuration: number;
+    borderWidth: number;
+    colors: SwitchAnimationColors;
+    loadingIndicatorColor: string;
+    sizeTokens: {
+        width: number;
+        height: number;
+        thumbSize: number;
+        trackPadding: number;
+        loadingIndicatorScale: number;
+        hitSlop: number;
+    };
+};
+
+export { type SwitchAnimationColors, useSwitchTokens };

package/dist/hooks/use-switch-tokens.hook.js

@@ -0,0 +1,29 @@
+import { useComponentsTokens } from "@impulse-ui-native/theme";
+function useSwitchTokens({
+  disabled,
+  size,
+  variant
+}) {
+  const tokens = useComponentsTokens().switch;
+  const sizeTokens = tokens.sizes[size];
+  const variantTokens = tokens.variants[variant];
+  const colors = {
+    activeBackgroundColor: disabled ? tokens.disabledBackgroundColor : variantTokens.backgroundColor,
+    activeBorderColor: disabled ? tokens.disabledBorderColor : variantTokens.borderColor,
+    activeThumbColor: disabled ? tokens.disabledThumbColor : variantTokens.color,
+    inactiveBackgroundColor: disabled ? tokens.disabledBackgroundColor : tokens.uncheckedBackgroundColor,
+    inactiveBorderColor: disabled ? tokens.disabledBorderColor : tokens.uncheckedBorderColor,
+    inactiveThumbColor: disabled ? tokens.disabledThumbColor : tokens.uncheckedThumbColor
+  };
+  return {
+    animationDuration: tokens.animationDuration,
+    borderWidth: tokens.borderWidth,
+    colors,
+    loadingIndicatorColor: tokens.loadingIndicatorColor,
+    sizeTokens
+  };
+}
+export {
+  useSwitchTokens
+};
+//# sourceMappingURL=use-switch-tokens.hook.js.map

package/dist/hooks/use-switch-tokens.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-switch-tokens.hook.ts"],"sourcesContent":["import type { ComponentSize, ComponentVariant } from \"@impulse-ui-native/theme\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nexport interface SwitchAnimationColors {\n  activeBackgroundColor: string;\n  activeBorderColor: string;\n  activeThumbColor: string;\n  inactiveBackgroundColor: string;\n  inactiveBorderColor: string;\n  inactiveThumbColor: string;\n}\n\ninterface UseSwitchTokensOptions {\n  disabled: boolean;\n  size: ComponentSize;\n  variant: ComponentVariant;\n}\n\nexport function useSwitchTokens({\n  disabled,\n  size,\n  variant,\n}: UseSwitchTokensOptions) {\n  const tokens = useComponentsTokens().switch;\n  const sizeTokens = tokens.sizes[size];\n  const variantTokens = tokens.variants[variant];\n\n  const colors: SwitchAnimationColors = {\n    activeBackgroundColor: disabled\n      ? tokens.disabledBackgroundColor\n      : variantTokens.backgroundColor,\n    activeBorderColor: disabled\n      ? tokens.disabledBorderColor\n      : variantTokens.borderColor,\n    activeThumbColor: disabled\n      ? tokens.disabledThumbColor\n      : variantTokens.color,\n    inactiveBackgroundColor: disabled\n      ? tokens.disabledBackgroundColor\n      : tokens.uncheckedBackgroundColor,\n    inactiveBorderColor: disabled\n      ? tokens.disabledBorderColor\n      : tokens.uncheckedBorderColor,\n    inactiveThumbColor: disabled\n      ? tokens.disabledThumbColor\n      : tokens.uncheckedThumbColor,\n  };\n\n  return {\n    animationDuration: tokens.animationDuration,\n    borderWidth: tokens.borderWidth,\n    colors,\n    loadingIndicatorColor: tokens.loadingIndicatorColor,\n    sizeTokens,\n  };\n}\n"],"mappings":"AACA,SAAS,2BAA2B;AAiB7B,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,OAAO,MAAM,IAAI;AACpC,QAAM,gBAAgB,OAAO,SAAS,OAAO;AAE7C,QAAM,SAAgC;AAAA,IACpC,uBAAuB,WACnB,OAAO,0BACP,cAAc;AAAA,IAClB,mBAAmB,WACf,OAAO,sBACP,cAAc;AAAA,IAClB,kBAAkB,WACd,OAAO,qBACP,cAAc;AAAA,IAClB,yBAAyB,WACrB,OAAO,0BACP,OAAO;AAAA,IACX,qBAAqB,WACjB,OAAO,sBACP,OAAO;AAAA,IACX,oBAAoB,WAChB,OAAO,qBACP,OAAO;AAAA,EACb;AAEA,SAAO;AAAA,IACL,mBAAmB,OAAO;AAAA,IAC1B,aAAa,OAAO;AAAA,IACpB;AAAA,IACA,uBAAuB,OAAO;AAAA,IAC9B;AAAA,EACF;AACF;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+export { Switch } from './components/switch.mjs';
+export { SwitchProps, SwitchThemeProps } from './types/switch.types.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./types";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/types/index.d.mts

@@ -0,0 +1,3 @@
+export { SwitchProps, SwitchThemeProps } from './switch.types.mjs';
+import '@impulse-ui-native/primitives';
+import '@impulse-ui-native/theme';

package/dist/types/index.js

@@ -0,0 +1,2 @@
+export * from "./switch.types";
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./switch.types\";\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/types/switch.types.d.mts

@@ -0,0 +1,15 @@
+import { PressableCoreProps } from '@impulse-ui-native/primitives';
+import { ComponentSize, ComponentVariant } from '@impulse-ui-native/theme';
+
+interface SwitchProps extends Omit<PressableCoreProps, "children"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: ComponentSize;
+    variant?: ComponentVariant;
+}
+interface SwitchThemeProps {
+    size: ComponentSize;
+}
+
+export type { SwitchProps, SwitchThemeProps };

package/dist/types/switch.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=switch.types.js.map

package/dist/types/switch.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@impulse-ui-native/switch",
+  "version": "2.7.0",
+  "description": "Animated switch controls for ImpulseUI Native applications.",
+  "keywords": [
+    "react-native",
+    "switch",
+    "toggle",
+    "form",
+    "components",
+    "impulse-ui-native"
+  ],
+  "license": "MIT",
+  "source": "src/index.ts",
+  "module": "dist/index.js",
+  "types": "dist/index.d.mts",
+  "react-native": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "react-native": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@impulse-ui-native/primitives": "2.7.0",
+    "@impulse-ui-native/core": "2.7.0",
+    "@impulse-ui-native/theme": "2.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.14",
+    "eslint": "^9.38.0",
+    "prettier": "^3.6.2",
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "react-native-reanimated": "4.5.1",
+    "react-native-worklets": "0.10.1",
+    "typescript": "~6.0.3",
+    "@impulse-ui-native/eslint-config": "1.0.0",
+    "@impulse-ui-native/prettier-config": "1.0.0",
+    "@impulse-ui-native/tsconfig": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "react-native-reanimated": ">=3.6.0",
+    "react-native-worklets": ">=0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "prettier": "@impulse-ui-native/prettier-config",
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "pnpm exec eslint . --fix",
+    "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path ../../.prettierignore"
+  }
+}