@ornikar/kitt-universal 9.5.0 → 9.6.0

package/dist/index-node-14.17.cjs.js

@@ -1008,6 +1008,90 @@ function Card({
   });
 }
 
+const useNativeAnimation = ({
+  selected,
+  disabled,
+  isPressedInternal
+}) => {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const pressed = Animated.useSharedValue(Boolean(isPressedInternal));
+  const progress = Animated.useDerivedValue(function () {
+    const _f = function () {
+      return Animated.withTiming(pressed.value ? 1 : 0, {
+        duration: theme.kitt.choices.item.transition.duration
+      });
+    };
+
+    _f._closure = {
+      withTiming: Animated.withTiming,
+      pressed,
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              transition: {
+                duration: theme.kitt.choices.item.transition.duration
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
+    _f.__workletHash = 1120030177160;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (31:35)";
+    return _f;
+  }());
+  const backgroundStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      const {
+        default: defaultBg,
+        pressed: pressedBg,
+        selected: selectedBg,
+        disabled: disabledBg
+      } = theme.kitt.choices.item.backgroundColor;
+      if (disabled) return {
+        backgroundColor: disabledBg
+      };
+      if (selected) return {
+        backgroundColor: selectedBg
+      };
+      return {
+        backgroundColor: Animated.interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      };
+    };
+
+    _f._closure = {
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              backgroundColor: theme.kitt.choices.item.backgroundColor
+            }
+          }
+        }
+      },
+      disabled,
+      selected,
+      interpolateColor: Animated.interpolateColor,
+      progress
+    };
+    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
+    _f.__workletHash = 15506726129309;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (35:44)";
+    return _f;
+  }());
+  return {
+    onPressIn: () => {
+      pressed.value = true;
+    },
+    onPressOut: () => {
+      pressed.value = false;
+    },
+    backgroundStyles
+  };
+};
+
 function getCurrentTextColor({
   isDisabled,
   isSelected,
@@ -1042,7 +1126,7 @@ const DisabledBorder = /*#__PURE__*/styled__default(reactNative.View).withConfig
   } = theme.kitt.choices.item.disabled.border;
   return styled.css(["border:", "px solid ", ";"], width, color);
 });
-const ChoiceItemView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+const ChoiceItemView = /*#__PURE__*/styled__default(reactNative.Platform.OS === 'web' ? reactNative.View : Animated__default.View).withConfig({
   displayName: "ChoiceItem__ChoiceItemView",
   componentId: "kitt-universal__sc-wuv3y6-1"
 })(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], ({
@@ -1104,74 +1188,15 @@ function ChoiceItem({
   onBlur,
   onFocus
 }) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const pressed = Animated.useSharedValue(Boolean(isPressedInternal));
-  const progress = Animated.useDerivedValue(function () {
-    const _f = function () {
-      return Animated.withTiming(pressed.value ? 1 : 0, {
-        duration: theme.kitt.choices.item.transition.duration
-      });
-    };
-
-    _f._closure = {
-      withTiming: Animated.withTiming,
-      pressed,
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              transition: {
-                duration: theme.kitt.choices.item.transition.duration
-              }
-            }
-          }
-        }
-      }
-    };
-    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
-    _f.__workletHash = 1120030177160;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (180:35)";
-    return _f;
-  }());
-  const backgroundStyles = Animated.useAnimatedStyle(function () {
-    const _f = function () {
-      const {
-        default: defaultBg,
-        pressed: pressedBg,
-        selected: selectedBg,
-        disabled: disabledBg
-      } = theme.kitt.choices.item.backgroundColor;
-      if (disabled) return {
-        backgroundColor: disabledBg
-      };
-      if (selected) return {
-        backgroundColor: selectedBg
-      };
-      return {
-        backgroundColor: Animated.interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
-      };
-    };
-
-    _f._closure = {
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              backgroundColor: theme.kitt.choices.item.backgroundColor
-            }
-          }
-        }
-      },
-      disabled,
-      selected,
-      interpolateColor: Animated.interpolateColor,
-      progress
-    };
-    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
-    _f.__workletHash = 15506726129309;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (184:44)";
-    return _f;
-  }());
+  const {
+    onPressIn,
+    onPressOut,
+    backgroundStyles
+  } = useNativeAnimation({
+    selected,
+    disabled,
+    isPressedInternal
+  });
 
   const handleChange = () => {
     if (!onChange) return; // Checkbox can be toggled
@@ -1198,12 +1223,8 @@ function ChoiceItem({
       handleChange();
       if (onBlur) onBlur(e);
     },
-    onPressIn: () => {
-      pressed.value = true;
-    },
-    onPressOut: () => {
-      pressed.value = false;
-    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
     children: ({
       isHovered,
       isPressed
@@ -1853,8 +1874,14 @@ const input = {
 };
 
 const inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 const inputTag = {
@@ -3129,42 +3156,26 @@ function InputFeedback({
   });
 }
 
-const FieldContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputField__FeedbackContainer",
-  componentId: "kitt-universal__sc-13fkixs-1"
-})(["", ";"], ({
-  theme
-}) => theme.responsive.ifWindowSizeMatches({
-  minWidth: KittBreakpoints.SMALL
-}, 'padding-top: 10px', 'padding-top: 5px'));
-const FieldLabelContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputField__FieldLabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-2"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
-const LabelContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputField__LabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-3"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.iconMarginLeft);
 function InputField({
   label,
   labelFeedback,
   input,
   feedback
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });