@pagopa/io-app-design-system 4.5.4 → 4.5.6

package/src/components/tabs/TabItem.tsx

@@ -1,27 +1,29 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
-  SharedValue,
   interpolateColor,
   useAnimatedStyle,
   useDerivedValue,
   useReducedMotion,
-  useSharedValue,
   withSpring
 } from "react-native-reanimated";
 import {
   IOColors,
   IOSpringValues,
   hexToRgba,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { BodySmall } from "../typography";
+import { IOText } from "../typography";
 
 type ColorMode = "light" | "dark";
 
+type TabItemState = "default" | "selected" | "disabled";
+
 export type TabItem = WithTestID<{
   label: string;
   color?: ColorMode;
@@ -42,12 +44,10 @@ type ColorStates = {
   border: {
     default: string;
     selected: string;
-    disabled: string;
   };
   background: {
     default: string;
     selected: string;
-    pressed: string;
   };
   foreground: {
     default: IOColors;
@@ -56,42 +56,7 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
-  light: {
-    border: {
-      default: IOColors["grey-300"],
-      selected: IOColors["blueIO-500"],
-      disabled: IOColors["grey-300"]
-    },
-    background: {
-      default: IOColors.white,
-      selected: IOColors["blueIO-50"],
-      pressed: IOColors.white
-    },
-    foreground: {
-      default: "black",
-      selected: "blueIO-500",
-      disabled: "grey-700"
-    }
-  },
-  dark: {
-    border: {
-      default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
-    },
-    background: {
-      default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      pressed: IOColors.white
-    },
-    foreground: {
-      default: "white",
-      selected: "black",
-      disabled: "white"
-    }
-  }
-};
+const DISABLED_OPACITY = 0.5;
 
 const mapLegacyColorStates: Record<
   NonNullable<TabItem["color"]>,
@@ -99,14 +64,12 @@ const mapLegacyColorStates: Record<
 > = {
   light: {
     border: {
-      default: IOColors["grey-300"],
-      selected: IOColors["blue-500"],
-      disabled: hexToRgba(IOColors.white)
+      default: IOColors["grey-450"],
+      selected: IOColors["blue-500"]
     },
     background: {
       default: IOColors.white,
-      selected: hexToRgba(IOColors["blue-500"], 0.1),
-      pressed: IOColors.white
+      selected: hexToRgba(IOColors["blue-500"], 0.1)
     },
     foreground: {
       default: "black",
@@ -117,13 +80,11 @@ const mapLegacyColorStates: Record<
   dark: {
     border: {
       default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
+      selected: IOColors.white
     },
     background: {
-      default: "#ffffff00",
-      selected: IOColors.white,
-      pressed: IOColors.white
+      default: hexToRgba(IOColors.white, 0.1),
+      selected: IOColors.white
     },
     foreground: {
       default: "white",
@@ -146,77 +107,113 @@ const TabItem = ({
   icon,
   iconSelected
 }: TabItem) => {
-  const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-    useScaleAnimation();
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
+  const theme = useIOTheme();
   const reducedMotion = useReducedMotion();
 
   const { isExperimental } = useIOExperimentalDesign();
-  const colors = useMemo(
-    () =>
-      isExperimental ? mapColorStates[color] : mapLegacyColorStates[color],
-    [isExperimental, color]
-  );
 
-  const foregroundColor = useMemo(
-    () =>
-      colors.foreground[
-        selected ? "selected" : disabled ? "disabled" : "default"
-      ],
-    [colors.foreground, selected, disabled]
+  const mapColorStates: Record<
+    NonNullable<TabItem["color"]>,
+    ColorStates
+  > = useMemo(
+    () => ({
+      light: {
+        border: {
+          default: IOColors[theme["tab-item-border-default"]],
+          selected: hexToRgba(
+            IOColors[theme["tab-item-foreground-selected"]],
+            0.5
+          )
+        },
+        background: {
+          default: hexToRgba(
+            IOColors[theme["tab-item-background-selected"]],
+            0
+          ),
+          selected: hexToRgba(
+            IOColors[theme["tab-item-background-selected"]],
+            0.25
+          ),
+          pressed: IOColors[theme["appBackground-primary"]]
+        },
+        foreground: {
+          default: theme["tab-item-foreground-default"],
+          selected: theme["tab-item-foreground-selected"],
+          disabled: "grey-700"
+        }
+      },
+      dark: {
+        border: {
+          default: hexToRgba(IOColors.white, 0),
+          selected: IOColors.white
+        },
+        background: {
+          default: hexToRgba(IOColors.white, 0.1),
+          selected: IOColors.white,
+          pressed: IOColors.white
+        },
+        foreground: {
+          default: "white",
+          selected: "black",
+          disabled: "white"
+        }
+      }
+    }),
+    [theme]
   );
 
-  const borderColor = useMemo(
+  const colors = useMemo(
     () =>
-      colors.border[selected ? "selected" : disabled ? "disabled" : "default"],
-    [colors.border, selected, disabled]
+      isExperimental ? mapColorStates[color] : mapLegacyColorStates[color],
+    [isExperimental, mapColorStates, color]
   );
 
-  const opaquePressedBackgroundColor = hexToRgba(
-    colors.background.pressed,
-    0.1
-  );
+  const itemState: TabItemState = selected
+    ? "selected"
+    : disabled
+    ? "disabled"
+    : "default";
 
-  const isSelected: SharedValue<number> = useSharedValue(0);
-  const progressSelected = useDerivedValue(() =>
-    withSpring(isSelected.value, IOSpringValues.selection)
+  const foregroundColor = useMemo(
+    () => colors.foreground[itemState],
+    [colors.foreground, itemState]
   );
 
-  useEffect(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isSelected.value = selected ? 1 : 0;
-  }, [isSelected, selected]);
+  const selectedStateTransition = useDerivedValue(() =>
+    withSpring(selected ? 1 : 0, IOSpringValues.selection)
+  );
 
   // Interpolate animation values from `pressed` values
-  const animatedStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
-    const pressedBackgroundColor = interpolateColor(
-      progress.value,
-      [0, 1],
-      [colors.background.default, opaquePressedBackgroundColor]
-    );
-
-    const selectedBackgroundColor = interpolateColor(
-      progressSelected.value,
-      [0, 1],
-      [opaquePressedBackgroundColor, colors.background.selected]
-    );
-
-    const selectedBorderColor = interpolateColor(
-      progressSelected.value,
-      [0, 1],
-      [colors.border.default, colors.border.selected]
-    );
-
-    return {
-      backgroundColor: selected
-        ? selectedBackgroundColor
-        : pressedBackgroundColor,
-      borderColor: selected ? selectedBorderColor : borderColor
-    };
-  }, [progress, progressSelected, selected]);
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        selectedStateTransition.value,
+        [0, 1],
+        [colors.background.default, colors.background.selected]
+      ),
+      borderColor: interpolateColor(
+        selectedStateTransition.value,
+        [0, 1],
+        [colors.border.default, colors.border.selected]
+      )
+    }),
+    [selectedStateTransition]
+  );
 
   const activeIcon = selected ? iconSelected ?? icon : icon;
 
+  const handleOnPress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (onPress) {
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      }
+    },
+    [onPress]
+  );
+
   return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
@@ -224,7 +221,7 @@ const TabItem = ({
       accessibilityRole={"button"}
       accessibilityState={{ selected }}
       testID={testID}
-      onPress={onPress}
+      onPress={handleOnPress}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       accessible={true}
@@ -234,18 +231,23 @@ const TabItem = ({
         style={[
           styles.container,
           { columnGap: 4 },
-          !reducedMotion && scaleAnimatedStyle,
+          !disabled && !reducedMotion && scaleAnimatedStyle,
           animatedStyle,
           fullWidth && styles.fullWidth,
-          disabled && styles.disabled
+          disabled && { opacity: DISABLED_OPACITY }
         ]}
       >
         {activeIcon && (
           <Icon name={activeIcon} color={foregroundColor} size={16} />
         )}
-        <BodySmall weight="Semibold" color={foregroundColor}>
+        <IOText
+          size={14}
+          font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+          weight="Semibold"
+          color={foregroundColor}
+        >
           {label}
-        </BodySmall>
+        </IOText>
       </Animated.View>
     </Pressable>
   );
@@ -265,8 +267,7 @@ const styles = StyleSheet.create({
   },
   fullWidth: {
     alignSelf: "auto"
-  },
-  disabled: { opacity: 0.5 }
+  }
 });
 
 export { TabItem };

package/src/components/textInput/TextInputValidation.tsx

@@ -86,12 +86,12 @@ export const TextInputValidation = ({
   }, [onFocus]);
 
   const labelError = useMemo(
-    () => (!isValid && errMessage ? errMessage : bottomMessage),
+    () => (isValid === false && errMessage ? errMessage : bottomMessage),
     [isValid, errMessage, bottomMessage]
   );
 
   const labelErrorColor: IOColors | undefined = useMemo(
-    () => (!isValid && errMessage ? theme.errorText : undefined),
+    () => (isValid === false && errMessage ? theme.errorText : undefined),
     [isValid, errMessage, theme.errorText]
   );
 

package/src/core/IOColors.ts

@@ -40,7 +40,7 @@ export const IOColors = asIOColors({
   "blueIO-600": "#0932B6",
   "blueIO-500": "#0B3EE3",
   "blueIO-400": "#3C65E9",
-  "blueIO-450": "#2351E6" /* Dark mode */,
+  "blueIO-300": "#6D8BEE",
   "blueIO-200": "#9DB2F4",
   "blueIO-150": "#B6C5F7",
   "blueIO-100": "#CED8F9",
@@ -153,7 +153,8 @@ export const IOColorsTints = asIOColors({
   "blueIO-850": IOColors["blueIO-850"],
   "blueIO-600": IOColors["blueIO-600"],
   "blueIO-500": IOColors["blueIO-500"],
-  "blueIO-450": IOColors["blueIO-450"],
+  "blueIO-400": IOColors["blueIO-400"],
+  "blueIO-300": IOColors["blueIO-300"],
   "blueIO-200": IOColors["blueIO-200"],
   "blueIO-150": IOColors["blueIO-150"],
   "blueIO-100": IOColors["blueIO-100"],
@@ -229,6 +230,7 @@ const themeKeys = [
   "neutralButton-pressed",
   "neutralButton-disabled",
   "buttonText-default",
+  "buttonText-danger",
   "buttonText-disabled",
   "listItem-pressed",
   // Typography
@@ -248,11 +250,24 @@ const themeKeys = [
   "textInputLabel-default",
   "textInputValue-default",
   "textInputValue-disabled",
+  // Selection (Radio, Checkbox, Switch)
+  "switch-background-off",
+  "switch-background-on",
+  "switch-thumb-color",
+  "selection-border-off",
+  "selection-background-on",
+  "selection-tick",
   // Layout
   "divider-header",
   "divider-default",
   "divider-bottomBar",
   "pdfViewer-background",
+  // Tab Item
+  "tab-item-border-default",
+  "tab-item-foreground-default",
+  "tab-item-foreground-selected",
+  "tab-item-background-selected",
+
   // Status
   "errorIcon",
   "errorText",
@@ -285,6 +300,7 @@ export const IOThemeLight: IOTheme = {
   "neutralButton-pressed": "grey-850",
   "neutralButton-disabled": "grey-450",
   "buttonText-default": "white",
+  "buttonText-danger": "white",
   "buttonText-disabled": "grey-700",
   "listItem-pressed": "grey-50",
   // Typography
@@ -303,11 +319,23 @@ export const IOThemeLight: IOTheme = {
   "textInputLabel-default": "grey-700",
   "textInputValue-default": "black",
   "textInputValue-disabled": "grey-850",
+  // Selection (Radio, Checkbox, Switch)
+  "switch-background-off": "grey-700",
+  "switch-background-on": "blueIO-500",
+  "switch-thumb-color": "white",
+  "selection-border-off": "grey-650",
+  "selection-background-on": "blueIO-500",
+  "selection-tick": "white",
   // Layout
   "divider-header": "grey-100",
   "divider-default": "grey-200",
   "divider-bottomBar": "grey-200",
   "pdfViewer-background": "grey-700",
+  // Tab Item
+  "tab-item-border-default": "grey-300",
+  "tab-item-foreground-default": "black",
+  "tab-item-foreground-selected": "blueIO-500",
+  "tab-item-background-selected": "blueIO-200",
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
@@ -326,7 +354,8 @@ export const IOThemeLightLegacy: IOTheme = {
   ...IOThemeLight,
   "appBackground-accent": "blue-500",
   "interactiveElem-default": "blue-500",
-  "pictogram-hands": "blue-500"
+  "pictogram-hands": "blue-500",
+  "selection-tick": "white"
 };
 
 export const IOThemeDark: IOTheme = {
@@ -335,14 +364,15 @@ export const IOThemeDark: IOTheme = {
   "appBackground-primary": "black",
   "appBackground-secondary": "grey-850",
   "appBackground-tertiary": "grey-700",
-  "interactiveElem-default": "blueIO-450",
-  "interactiveElem-pressed": "blueIO-500",
+  "interactiveElem-default": "blueIO-300",
+  "interactiveElem-pressed": "blueIO-400",
   "interactiveElem-disabled": "grey-700",
   "interactiveOutline-disabled": "grey-450",
   "neutralButton-default": "white",
   "neutralButton-pressed": "grey-100",
   "neutralButton-disabled": "grey-850",
-  "buttonText-default": "white",
+  "buttonText-default": "black",
+  "buttonText-danger": "white",
   "buttonText-disabled": "grey-300",
   "listItem-pressed": "grey-850",
   // Typography
@@ -361,6 +391,18 @@ export const IOThemeDark: IOTheme = {
   "textInputLabel-default": "grey-450",
   "textInputValue-default": "white",
   "textInputValue-disabled": "grey-100",
+  // Selection (Radio, Checkbox, Switch)
+  "switch-background-off": "grey-850",
+  "switch-background-on": "blueIO-300",
+  "switch-thumb-color": "white",
+  "selection-border-off": "grey-450",
+  "selection-background-on": "blueIO-300",
+  "selection-tick": "black",
+  // Tab Item
+  "tab-item-border-default": "grey-700",
+  "tab-item-foreground-default": "grey-200",
+  "tab-item-foreground-selected": "blueIO-200",
+  "tab-item-background-selected": "blueIO-400",
   // Layout
   "divider-header": "grey-850",
   "divider-default": "grey-850",

package/src/core/IOStyles.ts

@@ -311,19 +311,6 @@ export const IOModuleStyles = StyleSheet.create({
 interface IOSelectionTickVisualParams {
   size: IOIconSizeScale;
   borderWidth: number;
-  borderColorOffState: IOColors;
-  bgColorOnState: IOColors;
-  tickColor: IOColors;
-}
-
-interface IOSwitchVisualParams {
-  width: number;
-  height: number;
-  bgColorOffState: IOColors;
-  bgColorOnState: IOColors;
-  tickColor: IOColors;
-  bgCircle: IOColors;
-  padding: number;
 }
 
 interface IOSelectionTickLegacyVisualParams {
@@ -333,21 +320,7 @@ interface IOSelectionTickLegacyVisualParams {
 
 export const IOSelectionTickVisualParams: IOSelectionTickVisualParams = {
   size: 24,
-  borderWidth: 2,
-  borderColorOffState: "grey-650",
-  bgColorOnState: "blueIO-500",
-  tickColor: "white"
-};
-
-export const IOSwitchVisualParams: IOSwitchVisualParams = {
-  width: 40,
-  height: 28,
-  bgColorOffState: "grey-700",
-  bgColorOnState: "blueIO-500",
-  tickColor: "blueIO-500",
-  bgCircle: "white",
-  // Space between the circle and the main shape
-  padding: 2
+  borderWidth: 2
 };
 
 export const IOSelectionTickLegacyVisualParams: IOSelectionTickLegacyVisualParams =

package/lib/commonjs/components/switch/AnimatedSwitch.js

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AnimatedSwitch = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-var _IOAnimations = require("../../core/IOAnimations");
-var _IOColors = require("../../core/IOColors");
-var _IOStyles = require("../../core/IOStyles");
-var _AnimatedTick = require("../common/AnimatedTick");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const SWITCH_CIRCLE_SIZE = _IOStyles.IOSwitchVisualParams.height - _IOStyles.IOSwitchVisualParams.padding * 2;
-const styles = _reactNative.StyleSheet.create({
-  switchWrapper: {
-    width: _IOStyles.IOSwitchVisualParams.width,
-    height: _IOStyles.IOSwitchVisualParams.height
-  },
-  switchBackground: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    borderRadius: _IOStyles.IOSwitchVisualParams.width,
-    backgroundColor: _IOColors.IOColors[_IOStyles.IOSwitchVisualParams.bgColorOffState]
-  },
-  switchCircle: {
-    position: "absolute",
-    left: _IOStyles.IOSwitchVisualParams.padding,
-    top: _IOStyles.IOSwitchVisualParams.padding,
-    backgroundColor: _IOColors.IOColors[_IOStyles.IOSwitchVisualParams.bgCircle],
-    width: SWITCH_CIRCLE_SIZE,
-    height: SWITCH_CIRCLE_SIZE,
-    borderRadius: _IOStyles.IOSwitchVisualParams.width
-  }
-});
-
-/**
- * An animated checkbox. This can be used to implement a
- * standard {@link CheckBox} or other composite components.
- */
-const AnimatedSwitch = ({
-  checked,
-  onPress,
-  disabled
-}) => {
-  const squareAnimationProgress = (0, _reactNativeReanimated.useSharedValue)(checked ? 1 : 0);
-  const tickAnimationProgress = (0, _reactNativeReanimated.useSharedValue)(checked ? 1 : 0);
-  (0, _react.useEffect)(() => {
-    // eslint-disable-next-line functional/immutable-data
-    squareAnimationProgress.value = (0, _reactNativeReanimated.withSpring)(checked ? 1 : 0, _IOAnimations.IOSpringValues.selection);
-    // eslint-disable-next-line functional/immutable-data
-    tickAnimationProgress.value = (0, _reactNativeReanimated.withTiming)(checked ? 1 : 0, {
-      duration: 400,
-      easing: _reactNativeReanimated.Easing.elastic(1)
-    });
-  }, [checked, squareAnimationProgress, tickAnimationProgress]);
-  const animatedSwitchBg = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    backgroundColor: (0, _reactNativeReanimated.interpolateColor)(squareAnimationProgress.value, [0, 1], [_IOColors.IOColors[_IOStyles.IOSwitchVisualParams.bgColorOffState], _IOColors.IOColors[_IOStyles.IOSwitchVisualParams.bgColorOnState]])
-  }), [squareAnimationProgress]);
-  const animatedSwitchCircle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const translateX = (0, _reactNativeReanimated.interpolate)(squareAnimationProgress.value, [0, 1], [0, _IOStyles.IOSwitchVisualParams.width - SWITCH_CIRCLE_SIZE - 2 * _IOStyles.IOSwitchVisualParams.padding]);
-    return {
-      transform: [{
-        translateX
-      }]
-    };
-  });
-  const animatedSwitchTick = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    opacity: tickAnimationProgress.value
-  }));
-  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
-    accessibilityRole: "switch",
-    disabled: disabled,
-    testID: "AnimatedSwitch",
-    onPress: onPress,
-    style: styles.switchWrapper
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [styles.switchBackground, animatedSwitchBg]
-  }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [styles.switchCircle, animatedSwitchCircle]
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: animatedSwitchTick
-  }, /*#__PURE__*/_react.default.createElement(_AnimatedTick.AnimatedTick, {
-    progress: tickAnimationProgress,
-    stroke: _IOColors.IOColors[_IOStyles.IOSwitchVisualParams.tickColor]
-  }))));
-};
-exports.AnimatedSwitch = AnimatedSwitch;
-//# sourceMappingURL=AnimatedSwitch.js.map

package/lib/commonjs/components/switch/AnimatedSwitch.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_IOAnimations","_IOColors","_IOStyles","_AnimatedTick","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SWITCH_CIRCLE_SIZE","IOSwitchVisualParams","height","padding","styles","StyleSheet","create","switchWrapper","width","switchBackground","position","left","top","borderRadius","backgroundColor","IOColors","bgColorOffState","switchCircle","bgCircle","AnimatedSwitch","checked","onPress","disabled","squareAnimationProgress","useSharedValue","tickAnimationProgress","useEffect","value","withSpring","IOSpringValues","selection","withTiming","duration","easing","Easing","elastic","animatedSwitchBg","useAnimatedStyle","interpolateColor","bgColorOnState","animatedSwitchCircle","translateX","interpolate","transform","animatedSwitchTick","opacity","createElement","Pressable","accessibilityRole","testID","style","View","AnimatedTick","progress","stroke","tickColor","exports"],"sourceRoot":"../../../../src","sources":["components/switch/AnimatedSwitch.tsx"],"mappings":"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"}