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

package/dist/index-node-22.17.es.web.css

@@ -7,14 +7,44 @@
 .kitt-u_opacityExit_ogyytm1{opacity:1;}
 .kitt-u_opacityExitActive_o18xvk52{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_inputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_inputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_inputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_inputTextContainer_i1encr9g > *{-webkit-transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;}
-.kitt-u_slideInFromBottomEnter_s1717rto{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
-.kitt-u_slideInFromBottomEnterActive_sux6xgc{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 600ms cubic-bezier(0.77,0,0.175,1);-webkit-transition:transform 600ms cubic-bezier(0.77,0,0.175,1);transition:transform 600ms cubic-bezier(0.77,0,0.175,1);}
-.kitt-u_slideInFromBottomExit_sl0lsxt{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
-.kitt-u_slideInFromBottomExitActive_srlzzmu{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 600ms cubic-bezier(0.77,0,0.175,1);-webkit-transition:transform 600ms cubic-bezier(0.77,0,0.175,1);transition:transform 600ms cubic-bezier(0.77,0,0.175,1);}
-.kitt-u_opacityEnter_okm44hr{opacity:0;}
-.kitt-u_opacityEnterActive_o2w8t0i{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,1,0,1);transition:opacity 250ms cubic-bezier(0.42,1,0,1);}
-.kitt-u_opacityExit_o14r8iix{opacity:1;}
-.kitt-u_opacityExitActive_oim72y2{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,1,0,1);transition:opacity 250ms cubic-bezier(0.42,1,0,1);}
+/* Overlay animation styles - uses CSS variables for theme values */
+.FullscreenModalAnimation-module_overlay-enter__L1J1X {
+  opacity: 0;
+}
+
+.FullscreenModalAnimation-module_overlay-enter-active__gDEVb {
+  opacity: 1;
+  transition: opacity var(--overlay-duration) var(--overlay-easing);
+}
+
+.FullscreenModalAnimation-module_overlay-exit__Qx1WE {
+  opacity: 1;
+}
+
+.FullscreenModalAnimation-module_overlay-exit-active__lFR3x {
+  opacity: 0;
+  transition: opacity var(--overlay-duration) var(--overlay-easing);
+}
+
+/* Content animation styles - uses CSS variables for theme values */
+.FullscreenModalAnimation-module_content-enter__JmCWa {
+  transform: translateY(100%);
+}
+
+.FullscreenModalAnimation-module_content-enter-active__iaNRs {
+  transform: translateY(0);
+  transition: transform var(--content-duration) var(--content-easing);
+}
+
+.FullscreenModalAnimation-module_content-exit__hB0wY {
+  transform: translateY(0);
+}
+
+.FullscreenModalAnimation-module_content-exit-active__BPVPo {
+  transform: translateY(100%);
+  transition: transform var(--content-duration) var(--content-easing);
+}
+
 .kitt-u_enter_ereraf{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;}
 .kitt-u_enterActive_e1jmsjrm{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
 .kitt-u_exit_e1mwnccz{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}

package/dist/index-node-22.17.es.web.mjs

@@ -3,7 +3,7 @@ import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, I
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
-import { Animated, Easing, StyleSheet, Modal, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
+import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, StyleSheet, Modal, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
@@ -855,15 +855,15 @@ const card = {
   }
 };
 
-const webAnimationContentDuration$2 = 400;
-const webAnimationContentEasing$2 = {
+const webAnimationContentDuration$1 = 400;
+const webAnimationContentEasing$1 = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-const webAnimationOverlayDuration$2 = 250;
-const webAnimationOverlayEasing$2 = {
+const webAnimationOverlayDuration$1 = 250;
+const webAnimationOverlayEasing$1 = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -898,12 +898,12 @@ const 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
     }
   }
 };
@@ -959,15 +959,15 @@ const choices = {
   }
 };
 
-const webAnimationContentDuration$1 = 400;
-const webAnimationContentEasing$1 = {
+const webAnimationContentDuration = 400;
+const webAnimationContentEasing = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-const webAnimationOverlayDuration$1 = 250;
-const webAnimationOverlayEasing$1 = {
+const webAnimationOverlayDuration = 250;
+const webAnimationOverlayEasing = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -989,12 +989,12 @@ const dialogModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration$1,
-      easing: webAnimationOverlayEasing$1
+      duration: webAnimationOverlayDuration,
+      easing: webAnimationOverlayEasing
     },
     content: {
-      duration: webAnimationContentDuration$1,
-      easing: webAnimationContentEasing$1
+      duration: webAnimationContentDuration,
+      easing: webAnimationContentEasing
     }
   }
 };
@@ -1903,20 +1903,6 @@ const forms = {
   timePicker
 };
 
-const webAnimationContentDuration = 600;
-const webAnimationContentEasing = {
-  x1: 0.77,
-  y1: 0,
-  x2: 0.175,
-  y2: 1
-};
-const webAnimationOverlayDuration = 250;
-const webAnimationOverlayEasing = {
-  x1: 0.42,
-  y1: 0,
-  x2: 1,
-  y2: 1
-};
 const fullscreenModal = {
   header: {
     height: 56
@@ -1930,12 +1916,22 @@ const 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
+      }
     }
   }
 };
@@ -4352,17 +4348,17 @@ const contentAnimationClassNames = {
   exit: contentAnimatioExit,
   exitActive: contentAnimatioExitActive
 };
-const opacityEnter$1 = "kitt-u_opacityEnter_o1ae40dx";
-const opacityEnterActive$1 = "kitt-u_opacityEnterActive_o1t4vl7b";
-const opacityExit$1 = "kitt-u_opacityExit_ogyytm1";
-const opacityExitActive$1 = "kitt-u_opacityExitActive_o18xvk52";
-const opacityClassNames$1 = {
-  appear: opacityEnter$1,
-  appearActive: opacityEnterActive$1,
-  enter: opacityEnter$1,
-  enterActive: opacityEnterActive$1,
-  exit: opacityExit$1,
-  exitActive: opacityExitActive$1
+const opacityEnter = "kitt-u_opacityEnter_o1ae40dx";
+const opacityEnterActive = "kitt-u_opacityEnterActive_o1t4vl7b";
+const opacityExit = "kitt-u_opacityExit_ogyytm1";
+const opacityExitActive = "kitt-u_opacityExitActive_o18xvk52";
+const opacityClassNames = {
+  appear: opacityEnter,
+  appearActive: opacityEnterActive,
+  enter: opacityEnter,
+  enterActive: opacityEnterActive,
+  exit: opacityExit,
+  exitActive: opacityExitActive
 };
 function CardModalAnimation({
   children,
@@ -4398,7 +4394,7 @@ function CardModalAnimation({
       ...sharedProps,
       nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$1,
+      classNames: opacityClassNames,
       children: /*#__PURE__*/jsx(Overlay, {
         ref: overlayRef,
         onPress: onClose
@@ -4701,8 +4697,7 @@ function AnimatedChoiceItemView({
   isPressed,
   isDisabled,
   isSelected,
-  hasError,
-  shouldExpand = false
+  hasError
 }) {
   const theme = useTheme();
   return /*#__PURE__*/jsx(View, {
@@ -4721,8 +4716,6 @@ function AnimatedChoiceItemView({
       isPressed
     }),
     padding: size === 'small' ? 'kitt.2' : 'kitt.4',
-    flexGrow: shouldExpand ? 1 : undefined,
-    flexShrink: shouldExpand ? 1 : undefined,
     _web: {
       style: {
         transitionProperty: theme.kitt.choices.item.transition.property,
@@ -4758,7 +4751,6 @@ function ChoiceItem({
   value,
   selected,
   disabled,
-  shouldExpand = false,
   children,
   isPressedInternal,
   isHoveredInternal,
@@ -4794,8 +4786,6 @@ function ChoiceItem({
       checked: selected
     },
     style: style,
-    flexGrow: shouldExpand ? 1 : undefined,
-    flexShrink: shouldExpand ? 1 : undefined,
     onBlur: onBlur,
     onFocus: onFocus,
     onPress: e => {
@@ -4815,8 +4805,6 @@ function ChoiceItem({
       });
       return /*#__PURE__*/jsxs(VStack, {
         space: "kitt.2",
-        flexGrow: shouldExpand ? 1 : undefined,
-        flexShrink: shouldExpand ? 1 : undefined,
         children: [/*#__PURE__*/jsxs(AnimatedChoiceItemView, {
           animatedStyles: backgroundStyles,
           isHovered: isHovered || isHoveredInternal,
@@ -4824,13 +4812,10 @@ function ChoiceItem({
           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
@@ -4859,49 +4844,36 @@ function ChoiceItem({
 function ChoiceItemContainer({
   children,
   direction,
-  shouldExpand,
   isLast
 }) {
   const currentItemMarginValue = isLast ? undefined : 'kitt.3';
-  const directionFlexProps = direction === 'row' ? {
+  const flexProps = direction === 'row' ? {
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: 0
   } : {};
-  const shouldExpandFlexProps = shouldExpand ? {
-    flexGrow: 1,
-    flexShrink: 1
-  } : {};
   return /*#__PURE__*/jsx(View, {
     marginRight: direction === 'row' ? currentItemMarginValue : undefined,
     marginBottom: direction === 'column' ? currentItemMarginValue : undefined,
-    ...directionFlexProps,
-    ...shouldExpandFlexProps,
+    ...flexProps,
     children: children
   });
 }
 
 function ChoicesContainer({
   direction,
-  shouldExpand,
   contentContainerStyle,
   ...props
 }) {
-  const shouldExpandFlexProps = shouldExpand ? {
-    flexGrow: 1,
-    flexShrink: 1
-  } : {};
   if (direction === 'row') {
-    return /*#__PURE__*/jsx(ScrollView, {
+    return /*#__PURE__*/jsx(ScrollView$2, {
       horizontal: true,
-      contentContainerStyle: shouldExpand ? shouldExpandFlexProps : contentContainerStyle,
-      ...props,
-      ...shouldExpandFlexProps
+      contentContainerStyle: contentContainerStyle,
+      ...props
     });
   }
-  return /*#__PURE__*/jsx(View, {
-    ...props,
-    ...shouldExpandFlexProps
+  return /*#__PURE__*/jsx(View$2, {
+    ...props
   });
 }
 
@@ -4913,7 +4885,6 @@ function Choices({
   type,
   direction = 'column',
   disabled,
-  shouldExpand = false,
   children,
   value,
   onPress,
@@ -4930,7 +4901,6 @@ function Choices({
   const sharedProps = {
     type,
     disabled,
-    shouldExpand,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? newValue => {
       setCurrentValue(newValue);
@@ -4942,7 +4912,6 @@ function Choices({
   };
   return /*#__PURE__*/jsx(ChoicesContainer, {
     direction: direction,
-    shouldExpand: shouldExpand,
     testID: testID,
     id: id,
     style: style,
@@ -4954,7 +4923,6 @@ function Choices({
       });
       return /*#__PURE__*/jsx(ChoiceItemContainer, {
         direction: direction,
-        shouldExpand: shouldExpand,
         isLast: index === childrenArray.length - 1,
         children: element
       }, child.key);
@@ -7765,29 +7733,23 @@ function FullscreenModalFooter({
   });
 }
 
-const slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
-const slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
-const slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
-const slideInFromBottomExitActive = "kitt-u_slideInFromBottomExitActive_srlzzmu";
-const slideInClassNames = {
-  appear: slideInFromBottomEnter,
-  appearActive: slideInFromBottomEnterActive,
-  enter: slideInFromBottomEnter,
-  enterActive: slideInFromBottomEnterActive,
-  exit: slideInFromBottomExit,
-  exitActive: slideInFromBottomExitActive
+const styles$1 = {"overlay-enter":"FullscreenModalAnimation-module_overlay-enter__L1J1X","overlay-enter-active":"FullscreenModalAnimation-module_overlay-enter-active__gDEVb","overlay-exit":"FullscreenModalAnimation-module_overlay-exit__Qx1WE","overlay-exit-active":"FullscreenModalAnimation-module_overlay-exit-active__lFR3x","content-enter":"FullscreenModalAnimation-module_content-enter__JmCWa","content-enter-active":"FullscreenModalAnimation-module_content-enter-active__iaNRs","content-exit":"FullscreenModalAnimation-module_content-exit__hB0wY","content-exit-active":"FullscreenModalAnimation-module_content-exit-active__BPVPo"};
+
+const overlayClassNames = {
+  appear: styles$1['overlay-enter'],
+  appearActive: styles$1['overlay-enter-active'],
+  enter: styles$1['overlay-enter'],
+  enterActive: styles$1['overlay-enter-active'],
+  exit: styles$1['overlay-exit'],
+  exitActive: styles$1['overlay-exit-active']
 };
-const opacityEnter = "kitt-u_opacityEnter_okm44hr";
-const opacityEnterActive = "kitt-u_opacityEnterActive_o2w8t0i";
-const opacityExit = "kitt-u_opacityExit_o14r8iix";
-const opacityExitActive = "kitt-u_opacityExitActive_oim72y2";
-const opacityClassNames = {
-  appear: opacityEnter,
-  appearActive: opacityEnterActive,
-  enter: opacityEnter,
-  enterActive: opacityEnterActive,
-  exit: opacityExit,
-  exitActive: opacityExitActive
+const slideInClassNames = {
+  appear: styles$1['content-enter'],
+  appearActive: styles$1['content-enter-active'],
+  enter: styles$1['content-enter'],
+  enterActive: styles$1['content-enter-active'],
+  exit: styles$1['content-exit'],
+  exitActive: styles$1['content-exit-active']
 };
 function FullscreenModalAnimation({
   children,
@@ -7815,31 +7777,44 @@ function FullscreenModalAnimation({
     appear,
     unmountOnExit
   };
-  return /*#__PURE__*/jsxs(View, {
+
+  // CSS custom properties for theme-based animation values
+  const overlayEasing = animation.overlay.easing;
+  const contentEasing = animation.content.easing;
+  const cssVariables = {
+    '--overlay-duration': `${animation.overlay.duration}ms`,
+    '--overlay-easing': `cubic-bezier(${overlayEasing.x1}, ${overlayEasing.y1}, ${overlayEasing.x2}, ${overlayEasing.y2})`,
+    '--content-duration': `${animation.content.duration}ms`,
+    '--content-easing': `cubic-bezier(${contentEasing.x1}, ${contentEasing.y1}, ${contentEasing.x2}, ${contentEasing.y2})`
+  };
+  return /*#__PURE__*/jsx(View, {
     ...props,
-    children: [/*#__PURE__*/jsx(CSSTransition, {
-      ...sharedProps,
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames,
-      children: /*#__PURE__*/jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsx(CSSTransition, {
-      ...sharedProps,
-      nodeRef: contentRef,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: slideInClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(View, {
-        ref: contentRef,
-        children: children
-      })
-    })]
+    children: /*#__PURE__*/jsxs("div", {
+      style: cssVariables,
+      children: [/*#__PURE__*/jsx(CSSTransition, {
+        ...sharedProps,
+        nodeRef: overlayRef,
+        timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+        classNames: overlayClassNames,
+        children: /*#__PURE__*/jsx(Overlay, {
+          ref: overlayRef,
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsx(CSSTransition, {
+        ...sharedProps,
+        nodeRef: contentRef,
+        timeout: isAnimationEnabled ? animation.content.duration : 0,
+        classNames: slideInClassNames,
+        onEnter: onEnter,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExited: onExited,
+        children: /*#__PURE__*/jsx(View, {
+          ref: contentRef,
+          children: children
+        })
+      })]
+    })
   });
 }