@ornikar/kitt-universal 32.2.1-canary.b6a558c2a534e5d22cad1dfac7725ddeca489e44.0 → 32.3.1-canary.e5e3462569f2f32f91e8d06437eb0642c84cb55f.0

package/dist/index.es.js

@@ -8,7 +8,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withTiming, Easing as Easing$1, runOnJS, useDerivedValue, useAnimatedProps, withDelay, withRepeat, interpolate, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
-import { Platform, Animated as Animated$1, Easing, StyleSheet, Modal, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, Keyboard, Text as Text$1, useWindowDimensions, PixelRatio } from 'react-native';
+import { Platform, Animated as Animated$1, Easing, StyleSheet, Modal, Linking, Pressable as Pressable$2, Keyboard, Text as Text$1, useWindowDimensions, ScrollView as ScrollView$2, PixelRatio } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
@@ -875,15 +875,15 @@ var card = {
   }
 };
 
-var webAnimationContentDuration$2 = 400;
-var webAnimationContentEasing$2 = {
+var webAnimationContentDuration$1 = 400;
+var webAnimationContentEasing$1 = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-var webAnimationOverlayDuration$2 = 250;
-var webAnimationOverlayEasing$2 = {
+var webAnimationOverlayDuration$1 = 250;
+var webAnimationOverlayEasing$1 = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -918,12 +918,12 @@ var cardModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration$2,
-      easing: webAnimationOverlayEasing$2
+      duration: webAnimationOverlayDuration$1,
+      easing: webAnimationOverlayEasing$1
     },
     content: {
-      duration: webAnimationContentDuration$2,
-      easing: webAnimationContentEasing$2
+      duration: webAnimationContentDuration$1,
+      easing: webAnimationContentEasing$1
     }
   }
 };
@@ -979,15 +979,15 @@ var choices = {
   }
 };
 
-var webAnimationContentDuration$1 = 400;
-var webAnimationContentEasing$1 = {
+var webAnimationContentDuration = 400;
+var webAnimationContentEasing = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-var webAnimationOverlayDuration$1 = 250;
-var webAnimationOverlayEasing$1 = {
+var webAnimationOverlayDuration = 250;
+var webAnimationOverlayEasing = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -1009,12 +1009,12 @@ var dialogModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration$1,
-      easing: webAnimationOverlayEasing$1
+      duration: webAnimationOverlayDuration,
+      easing: webAnimationOverlayEasing
     },
     content: {
-      duration: webAnimationContentDuration$1,
-      easing: webAnimationContentEasing$1
+      duration: webAnimationContentDuration,
+      easing: webAnimationContentEasing
     }
   }
 };
@@ -1072,10 +1072,10 @@ var autocomplete = {
 };
 
 var checkbox = {
-  borderWidth: 1,
-  borderRadius: 4,
-  height: 24,
-  width: 24,
+  borderWidth: 2,
+  borderRadius: 5,
+  height: 20,
+  width: 20,
   iconSize: 14,
   markColor: colors.uiBackgroundLight,
   textSpacing: 10,
@@ -1923,20 +1923,6 @@ var forms = {
   timePicker: timePicker
 };
 
-var webAnimationContentDuration = 600;
-var webAnimationContentEasing = {
-  x1: 0.77,
-  y1: 0,
-  x2: 0.175,
-  y2: 1
-};
-var webAnimationOverlayDuration = 250;
-var webAnimationOverlayEasing = {
-  x1: 0.42,
-  y1: 0,
-  x2: 1,
-  y2: 1
-};
 var fullscreenModal = {
   header: {
     height: 56
@@ -1950,12 +1936,22 @@ var fullscreenModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration,
-      easing: webAnimationOverlayEasing
+      duration: 250,
+      easing: {
+        x1: 0.42,
+        y1: 0,
+        x2: 1,
+        y2: 1
+      }
     },
     content: {
-      duration: webAnimationContentDuration,
-      easing: webAnimationContentEasing
+      duration: 600,
+      easing: {
+        x1: 0.77,
+        y1: 0,
+        x2: 0.175,
+        y2: 1
+      }
     }
   }
 };
@@ -4861,6 +4857,8 @@ function AnimatedChoiceItemView(_ref) {
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     hasError = _ref.hasError,
+    _ref$shouldExpand = _ref.shouldExpand,
+    shouldExpand = _ref$shouldExpand === void 0 ? false : _ref$shouldExpand,
     animatedStyles = _ref.animatedStyles;
   var sx = useSx();
   var style = sx({
@@ -4878,7 +4876,9 @@ function AnimatedChoiceItemView(_ref) {
       isHovered: isHovered,
       isPressed: isPressed
     }),
-    padding: size === 'small' ? 'kitt.2' : 'kitt.4'
+    padding: size === 'small' ? 'kitt.2' : 'kitt.4',
+    flexGrow: shouldExpand ? 1 : undefined,
+    flexShrink: shouldExpand ? 1 : undefined
   });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [style, animatedStyles],
@@ -4941,6 +4941,8 @@ function ChoiceItem(_ref) {
     value = _ref.value,
     selected = _ref.selected,
     disabled = _ref.disabled,
+    _ref$shouldExpand = _ref.shouldExpand,
+    shouldExpand = _ref$shouldExpand === void 0 ? false : _ref$shouldExpand,
     _children = _ref.children,
     isPressedInternal = _ref.isPressedInternal,
     isHoveredInternal = _ref.isHoveredInternal,
@@ -4978,6 +4980,8 @@ function ChoiceItem(_ref) {
       checked: selected
     },
     style: style,
+    flexGrow: shouldExpand ? 1 : undefined,
+    flexShrink: shouldExpand ? 1 : undefined,
     onBlur: onBlur,
     onFocus: onFocus,
     onPress: function (e) {
@@ -4996,6 +5000,8 @@ function ChoiceItem(_ref) {
       });
       return /*#__PURE__*/jsxs(VStack, {
         space: "kitt.2",
+        flexGrow: shouldExpand ? 1 : undefined,
+        flexShrink: shouldExpand ? 1 : undefined,
         children: [/*#__PURE__*/jsxs(AnimatedChoiceItemView, {
           animatedStyles: backgroundStyles,
           isHovered: isHovered || isHoveredInternal,
@@ -5003,10 +5009,13 @@ function ChoiceItem(_ref) {
           isSelected: selected,
           isPressed: isPressed || isPressedInternal,
           hasError: hasError,
+          shouldExpand: shouldExpand,
           size: size,
           children: [/*#__PURE__*/jsxs(Stack, {
             alignItems: "center",
             space: "kitt.2",
+            flexGrow: shouldExpand ? 1 : undefined,
+            flexShrink: shouldExpand ? 1 : undefined,
             children: [icon ? /*#__PURE__*/jsx(TypographyIcon, {
               color: textColor,
               icon: icon
@@ -5035,33 +5044,43 @@ function ChoiceItem(_ref) {
 function ChoiceItemContainer(_ref) {
   var children = _ref.children,
     direction = _ref.direction,
+    shouldExpand = _ref.shouldExpand,
     isLast = _ref.isLast;
   var currentItemMarginValue = isLast ? undefined : 'kitt.3';
-  var flexProps = direction === 'row' ? {
+  var directionFlexProps = direction === 'row' ? {
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: 0
   } : {};
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+  var shouldExpandFlexProps = shouldExpand ? {
+    flexGrow: 1,
+    flexShrink: 1
+  } : {};
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread(_objectSpread({
     marginRight: direction === 'row' ? currentItemMarginValue : undefined,
     marginBottom: direction === 'column' ? currentItemMarginValue : undefined
-  }, flexProps), {}, {
+  }, directionFlexProps), shouldExpandFlexProps), {}, {
     children: children
   }));
 }
 
-var _excluded$G = ["direction", "contentContainerStyle"];
+var _excluded$G = ["direction", "shouldExpand", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
+    shouldExpand = _ref.shouldExpand,
     contentContainerStyle = _ref.contentContainerStyle,
     props = _objectWithoutProperties(_ref, _excluded$G);
+  var shouldExpandFlexProps = shouldExpand ? {
+    flexGrow: 1,
+    flexShrink: 1
+  } : {};
   if (direction === 'row') {
-    return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
+    return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
       horizontal: true,
-      contentContainerStyle: contentContainerStyle
-    }, props));
+      contentContainerStyle: shouldExpand ? shouldExpandFlexProps : contentContainerStyle
+    }, props), shouldExpandFlexProps));
   }
-  return /*#__PURE__*/jsx(View$2, _objectSpread({}, props));
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), shouldExpandFlexProps));
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -5073,6 +5092,8 @@ function Choices(_ref2) {
     _ref2$direction = _ref2.direction,
     direction = _ref2$direction === void 0 ? 'column' : _ref2$direction,
     disabled = _ref2.disabled,
+    _ref2$shouldExpand = _ref2.shouldExpand,
+    shouldExpand = _ref2$shouldExpand === void 0 ? false : _ref2$shouldExpand,
     children = _ref2.children,
     value = _ref2.value,
     onPress = _ref2.onPress,
@@ -5091,6 +5112,7 @@ function Choices(_ref2) {
   var sharedProps = {
     type: type,
     disabled: disabled,
+    shouldExpand: shouldExpand,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? function (newValue) {
       setCurrentValue(newValue);
@@ -5102,6 +5124,7 @@ function Choices(_ref2) {
   };
   return /*#__PURE__*/jsx(ChoicesContainer, {
     direction: direction,
+    shouldExpand: shouldExpand,
     testID: testID,
     id: id,
     style: style,
@@ -5112,6 +5135,7 @@ function Choices(_ref2) {
       }, sharedProps));
       return /*#__PURE__*/jsx(ChoiceItemContainer, {
         direction: direction,
+        shouldExpand: shouldExpand,
         isLast: index === childrenArray.length - 1,
         children: element
       }, child.key);