@ornikar/kitt-universal 32.0.0 → 32.1.1-canary.28d1f9f68cb643b8c67559f72df59006a88da1e9.0

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

@@ -65,6 +65,9 @@ const hex2rgba = (hex, alpha = 1) => {
 };
 
 const createColorScale = colorScale => colorScale;
+
+// WARNING
+// If you update this palette, don't forget to update the palette in @ornikar/bumper as well.
 const colorScales = {
   deepPurple: createColorScale({
     5: '#936C93',
@@ -129,9 +132,15 @@ const colorScales = {
   red: createColorScale({
     1: '#FDE4E3',
     2: '#FAB8B8',
-    6: '#F14847',
+    6: '#E2483D',
     7: '#BD100F'
   }),
+  mauve: createColorScale({
+    1: '#F8E7FF',
+    2: '#F1D0FB',
+    3: '#E4A4F9',
+    4: '#D283EC'
+  }),
   'beige-alpha': createColorScale({
     '25': '#C1B59F40',
     '40': '#C1B59F66',
@@ -241,8 +250,14 @@ const colors = {
         }
       },
       highlight: {
-        default: deepPurpleColorPalette['blue.1'],
-        pressed: deepPurpleColorPalette['blue.2']
+        mid: {
+          default: deepPurpleColorPalette['mauve.1'],
+          pressed: deepPurpleColorPalette['mauve.2']
+        },
+        hi: {
+          default: deepPurpleColorPalette['mauve.3'],
+          pressed: deepPurpleColorPalette['mauve.4']
+        }
       },
       info: {
         hi: deepPurpleColorPalette['blue.6'],
@@ -270,17 +285,19 @@ const colors = {
       base: {
         hi: deepPurpleColorPalette['grey.9'],
         mid: deepPurpleColorPalette['beige.3'],
+        low: deepPurpleColorPalette['beige.2'],
         onContrasted: {
           hi: deepPurpleColorPalette['grey.0'],
           mid: deepPurpleColorPalette['white-alpha.20']
-        }
+        },
+        accent: deepPurpleColorPalette['deepPurple.8']
       },
-      accent: deepPurpleColorPalette['deepPurple.8'],
       info: deepPurpleColorPalette['blue.6'],
       success: deepPurpleColorPalette['green.6'],
       warning: deepPurpleColorPalette['yellow.6'],
       danger: deepPurpleColorPalette['red.6'],
-      disabled: deepPurpleColorPalette['grey.2']
+      disabled: deepPurpleColorPalette['grey.2'],
+      highlight: deepPurpleColorPalette['mauve.3']
     }
   }
 };
@@ -4821,6 +4838,7 @@ function AnimatedChoiceItemView({
   isDisabled,
   isSelected,
   hasError,
+  shouldExpand = false,
   animatedStyles
 }) {
   const sx = nativeBase.useSx();
@@ -4839,7 +4857,9 @@ function AnimatedChoiceItemView({
       isHovered,
       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__*/jsxRuntime.jsx(Animated__default.View, {
     style: [style, animatedStyles],
@@ -4903,6 +4923,7 @@ function ChoiceItem({
   value,
   selected,
   disabled,
+  shouldExpand = false,
   children,
   isPressedInternal,
   isHoveredInternal,
@@ -4942,6 +4963,8 @@ function ChoiceItem({
       checked: selected
     },
     style: style,
+    flexGrow: shouldExpand ? 1 : undefined,
+    flexShrink: shouldExpand ? 1 : undefined,
     onBlur: onBlur,
     onFocus: onFocus,
     onPress: e => {
@@ -4961,6 +4984,8 @@ function ChoiceItem({
       });
       return /*#__PURE__*/jsxRuntime.jsxs(VStack, {
         space: "kitt.2",
+        flexGrow: shouldExpand ? 1 : undefined,
+        flexShrink: shouldExpand ? 1 : undefined,
         children: [/*#__PURE__*/jsxRuntime.jsxs(AnimatedChoiceItemView, {
           animatedStyles: backgroundStyles,
           isHovered: isHovered || isHoveredInternal,
@@ -4968,10 +4993,13 @@ function ChoiceItem({
           isSelected: selected,
           isPressed: isPressed || isPressedInternal,
           hasError: hasError,
+          shouldExpand: shouldExpand,
           size: size,
           children: [/*#__PURE__*/jsxRuntime.jsxs(Stack, {
             alignItems: "center",
             space: "kitt.2",
+            flexGrow: shouldExpand ? 1 : undefined,
+            flexShrink: shouldExpand ? 1 : undefined,
             children: [icon ? /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
               color: textColor,
               icon: icon
@@ -5000,36 +5028,49 @@ function ChoiceItem({
 function ChoiceItemContainer({
   children,
   direction,
+  shouldExpand,
   isLast
 }) {
   const currentItemMarginValue = isLast ? undefined : 'kitt.3';
-  const flexProps = direction === 'row' ? {
+  const directionFlexProps = direction === 'row' ? {
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: 0
   } : {};
+  const shouldExpandFlexProps = shouldExpand ? {
+    flexGrow: 1,
+    flexShrink: 1
+  } : {};
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     marginRight: direction === 'row' ? currentItemMarginValue : undefined,
     marginBottom: direction === 'column' ? currentItemMarginValue : undefined,
-    ...flexProps,
+    ...directionFlexProps,
+    ...shouldExpandFlexProps,
     children: children
   });
 }
 
 function ChoicesContainer({
   direction,
+  shouldExpand,
   contentContainerStyle,
   ...props
 }) {
+  const shouldExpandFlexProps = shouldExpand ? {
+    flexGrow: 1,
+    flexShrink: 1
+  } : {};
   if (direction === 'row') {
-    return /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+    return /*#__PURE__*/jsxRuntime.jsx(ScrollView, {
       horizontal: true,
-      contentContainerStyle: contentContainerStyle,
-      ...props
+      contentContainerStyle: shouldExpand ? shouldExpandFlexProps : contentContainerStyle,
+      ...props,
+      ...shouldExpandFlexProps
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
-    ...props
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    ...props,
+    ...shouldExpandFlexProps
   });
 }
 
@@ -5041,6 +5082,7 @@ function Choices({
   type,
   direction = 'column',
   disabled,
+  shouldExpand = false,
   children,
   value,
   onPress,
@@ -5057,6 +5099,7 @@ function Choices({
   const sharedProps = {
     type,
     disabled,
+    shouldExpand,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? newValue => {
       setCurrentValue(newValue);
@@ -5068,6 +5111,7 @@ function Choices({
   };
   return /*#__PURE__*/jsxRuntime.jsx(ChoicesContainer, {
     direction: direction,
+    shouldExpand: shouldExpand,
     testID: testID,
     id: id,
     style: style,
@@ -5079,6 +5123,7 @@ function Choices({
       });
       return /*#__PURE__*/jsxRuntime.jsx(ChoiceItemContainer, {
         direction: direction,
+        shouldExpand: shouldExpand,
         isLast: index === childrenArray.length - 1,
         children: element
       }, child.key);
@@ -5206,7 +5251,8 @@ function DialogModalAnimation({
   onEntered,
   onExit,
   onExited,
-  onClose
+  onClose,
+  testID
 }) {
   const [isModalVisible, setIsModalVisible] = React.useState(visible);
   const [isContentVisible, setIsContentVisible] = React.useState(false);
@@ -5241,6 +5287,7 @@ function DialogModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
+      testID: testID,
       children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$1, {
         visible: isContentVisible,
         onExited: handleAnimationExited,