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

package/dist/index-node-22.17.cjs.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.cjs.web.js

@@ -864,15 +864,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,
@@ -907,12 +907,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
     }
   }
 };
@@ -968,15 +968,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,
@@ -998,12 +998,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
     }
   }
 };
@@ -1912,20 +1912,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
@@ -1939,12 +1925,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
+      }
     }
   }
 };
@@ -4361,17 +4357,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,
@@ -4407,7 +4403,7 @@ function CardModalAnimation({
       ...sharedProps,
       nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$1,
+      classNames: opacityClassNames,
       children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
         ref: overlayRef,
         onPress: onClose
@@ -4710,8 +4706,7 @@ function AnimatedChoiceItemView({
   isPressed,
   isDisabled,
   isSelected,
-  hasError,
-  shouldExpand = false
+  hasError
 }) {
   const theme = useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(View, {
@@ -4730,8 +4725,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,
@@ -4767,7 +4760,6 @@ function ChoiceItem({
   value,
   selected,
   disabled,
-  shouldExpand = false,
   children,
   isPressedInternal,
   isHoveredInternal,
@@ -4803,8 +4795,6 @@ function ChoiceItem({
       checked: selected
     },
     style: style,
-    flexGrow: shouldExpand ? 1 : undefined,
-    flexShrink: shouldExpand ? 1 : undefined,
     onBlur: onBlur,
     onFocus: onFocus,
     onPress: e => {
@@ -4824,8 +4814,6 @@ 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,
@@ -4833,13 +4821,10 @@ 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
@@ -4868,49 +4853,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__*/jsxRuntime.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__*/jsxRuntime.jsx(ScrollView, {
+    return /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
       horizontal: true,
-      contentContainerStyle: shouldExpand ? shouldExpandFlexProps : contentContainerStyle,
-      ...props,
-      ...shouldExpandFlexProps
+      contentContainerStyle: contentContainerStyle,
+      ...props
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    ...shouldExpandFlexProps
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+    ...props
   });
 }
 
@@ -4922,7 +4894,6 @@ function Choices({
   type,
   direction = 'column',
   disabled,
-  shouldExpand = false,
   children,
   value,
   onPress,
@@ -4939,7 +4910,6 @@ function Choices({
   const sharedProps = {
     type,
     disabled,
-    shouldExpand,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? newValue => {
       setCurrentValue(newValue);
@@ -4951,7 +4921,6 @@ function Choices({
   };
   return /*#__PURE__*/jsxRuntime.jsx(ChoicesContainer, {
     direction: direction,
-    shouldExpand: shouldExpand,
     testID: testID,
     id: id,
     style: style,
@@ -4963,7 +4932,6 @@ function Choices({
       });
       return /*#__PURE__*/jsxRuntime.jsx(ChoiceItemContainer, {
         direction: direction,
-        shouldExpand: shouldExpand,
         isLast: index === childrenArray.length - 1,
         children: element
       }, child.key);
@@ -7774,29 +7742,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,
@@ -7824,31 +7786,44 @@ function FullscreenModalAnimation({
     appear,
     unmountOnExit
   };
-  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(View, {
     ...props,
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      ...sharedProps,
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames,
-      children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      ...sharedProps,
-      nodeRef: contentRef,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: slideInClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsxRuntime.jsx(View, {
-        ref: contentRef,
-        children: children
-      })
-    })]
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: cssVariables,
+      children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+        ...sharedProps,
+        nodeRef: overlayRef,
+        timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+        classNames: overlayClassNames,
+        children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+          ref: overlayRef,
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+        ...sharedProps,
+        nodeRef: contentRef,
+        timeout: isAnimationEnabled ? animation.content.duration : 0,
+        classNames: slideInClassNames,
+        onEnter: onEnter,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExited: onExited,
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
+          ref: contentRef,
+          children: children
+        })
+      })]
+    })
   });
 }