@ornikar/kitt-universal 9.5.0 → 9.6.0

package/dist/index-browser-all.es.js

@@ -1049,6 +1049,88 @@ function Card(_ref6) {
   });
 }
 
+var useNativeAnimation = function (_ref) {
+  var selected = _ref.selected,
+      disabled = _ref.disabled,
+      isPressedInternal = _ref.isPressedInternal;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(Boolean(isPressedInternal));
+  var progress = useDerivedValue(function () {
+    var _f = function () {
+      return withTiming(pressed.value ? 1 : 0, {
+        duration: theme.kitt.choices.item.transition.duration
+      });
+    };
+
+    _f._closure = {
+      withTiming: withTiming,
+      pressed: 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;
+  }());
+  var backgroundStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      var _theme$kitt$choices$i = theme.kitt.choices.item.backgroundColor,
+          defaultBg = _theme$kitt$choices$i["default"],
+          pressedBg = _theme$kitt$choices$i.pressed,
+          selectedBg = _theme$kitt$choices$i.selected,
+          disabledBg = _theme$kitt$choices$i.disabled;
+      if (disabled) return {
+        backgroundColor: disabledBg
+      };
+      if (selected) return {
+        backgroundColor: selectedBg
+      };
+      return {
+        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      };
+    };
+
+    _f._closure = {
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              backgroundColor: theme.kitt.choices.item.backgroundColor
+            }
+          }
+        }
+      },
+      disabled: disabled,
+      selected: selected,
+      interpolateColor: interpolateColor,
+      progress: 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: function onPressIn() {
+      pressed.value = true;
+    },
+    onPressOut: function onPressOut() {
+      pressed.value = false;
+    },
+    backgroundStyles: backgroundStyles
+  };
+};
+
 function getCurrentTextColor(_ref) {
   var isDisabled = _ref.isDisabled,
       isSelected = _ref.isSelected,
@@ -1080,7 +1162,7 @@ var DisabledBorder = /*#__PURE__*/styled(View$2).withConfig({
       color = _theme$kitt$choices$i.color;
   return css(["border:", "px solid ", ";"], width, color);
 });
-var ChoiceItemView = /*#__PURE__*/styled(Animated.View).withConfig({
+var ChoiceItemView = /*#__PURE__*/styled(Platform.OS === 'web' ? View$2 : Animated.View).withConfig({
   displayName: "ChoiceItem__ChoiceItemView"
 })(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], function (_ref4) {
   var theme = _ref4.theme,
@@ -1136,73 +1218,15 @@ function ChoiceItem(_ref8) {
       onChange = _ref8.onChange,
       onBlur = _ref8.onBlur,
       onFocus = _ref8.onFocus;
-  var theme = /*#__PURE__*/useTheme();
-  var pressed = useSharedValue(Boolean(isPressedInternal));
-  var progress = useDerivedValue(function () {
-    var _f = function () {
-      return withTiming(pressed.value ? 1 : 0, {
-        duration: theme.kitt.choices.item.transition.duration
-      });
-    };
-
-    _f._closure = {
-      withTiming: withTiming,
-      pressed: 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;
-  }());
-  var backgroundStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      var _theme$kitt$choices$i5 = theme.kitt.choices.item.backgroundColor,
-          defaultBg = _theme$kitt$choices$i5["default"],
-          pressedBg = _theme$kitt$choices$i5.pressed,
-          selectedBg = _theme$kitt$choices$i5.selected,
-          disabledBg = _theme$kitt$choices$i5.disabled;
-      if (disabled) return {
-        backgroundColor: disabledBg
-      };
-      if (selected) return {
-        backgroundColor: selectedBg
-      };
-      return {
-        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
-      };
-    };
 
-    _f._closure = {
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              backgroundColor: theme.kitt.choices.item.backgroundColor
-            }
-          }
-        }
-      },
-      disabled: disabled,
-      selected: selected,
-      interpolateColor: interpolateColor,
-      progress: 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;
-  }());
+  var _useNativeAnimation = useNativeAnimation({
+    selected: selected,
+    disabled: disabled,
+    isPressedInternal: isPressedInternal
+  }),
+      onPressIn = _useNativeAnimation.onPressIn,
+      onPressOut = _useNativeAnimation.onPressOut,
+      backgroundStyles = _useNativeAnimation.backgroundStyles;
 
   var handleChange = function () {
     if (!onChange) return; // Checkbox can be toggled
@@ -1229,12 +1253,8 @@ function ChoiceItem(_ref8) {
       handleChange();
       if (onBlur) onBlur(e);
     },
-    onPressIn: function onPressIn() {
-      pressed.value = true;
-    },
-    onPressOut: function onPressOut() {
-      pressed.value = false;
-    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
     children: function children(_ref9) {
       var isHovered = _ref9.isHovered,
           isPressed = _ref9.isPressed;
@@ -1948,8 +1968,14 @@ var input = {
 };
 
 var inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 var inputTag = {
@@ -3261,40 +3287,25 @@ function InputFeedback(_ref) {
   });
 }
 
-var FieldContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldContainer"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FeedbackContainer"
-})(["", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, 'padding-top: 10px', 'padding-top: 5px');
-});
-var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldLabelContainer"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
-});
-var LabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__LabelContainer"
-})(["margin-right:", "px;"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.inputField.iconMarginLeft;
-});
-function InputField(_ref4) {
-  var label = _ref4.label,
-      labelFeedback = _ref4.labelFeedback,
-      input = _ref4.input,
-      feedback = _ref4.feedback;
-  return /*#__PURE__*/jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsx(LabelContainer, {
+function InputField(_ref) {
+  var label = _ref.label,
+      labelFeedback = _ref.labelFeedback,
+      input = _ref.input,
+      feedback = _ref.feedback;
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });