@ornikar/kitt-universal 25.45.4-canary.1fa8dd864c345808028f3e3165c5c7fcf9bc9e2a.0 → 25.46.1-canary.9950f4eb84cbfcf1d45de4e6c9ad226210c5404f.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback } from 'react';
+import React, { useContext, createContext, forwardRef, useMemo, cloneElement, useRef, useEffect, useState, Children, useReducer, Fragment as Fragment$1, useCallback } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useBreakpointValue as useBreakpointValue$1, useSx, Text, Input, NativeBaseProvider, extendTheme, useMediaQuery } from 'native-base';
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -2716,8 +2716,129 @@ var VStack = VStack$1;
 var HStack = HStack$1;
 var Center = Center$1;
 
+var KittBreakpoints = {
+  /**
+   * min-width: 0
+   */
+  BASE: 0,
+  /**
+   * min-width: 480px
+   */
+  SMALL: 480,
+  /**
+   * min-width: 768px
+   */
+  MEDIUM: 768,
+  /**
+   * min-width: 1024px
+   */
+  LARGE: 1024,
+  /**
+   * min-width: 1280px
+   */
+  WIDE: 1280
+};
+var KittBreakpointsMax = {
+  /**
+   * max-width: 479px
+   */
+  BASE: KittBreakpoints.SMALL - 1,
+  /**
+   * max-width: 767px
+   */
+  SMALL: KittBreakpoints.MEDIUM - 1,
+  /**
+   * max-width: 1023px
+   */
+  MEDIUM: KittBreakpoints.LARGE - 1,
+  /**
+   * max-width: 1279px
+   */
+  LARGE: KittBreakpoints.WIDE - 1
+};
+var KittBreakpointNameEnum = /*#__PURE__*/function (KittBreakpointNameEnum) {
+  KittBreakpointNameEnum["BASE"] = "base";
+  KittBreakpointNameEnum["SMALL"] = "small";
+  KittBreakpointNameEnum["MEDIUM"] = "medium";
+  KittBreakpointNameEnum["LARGE"] = "large";
+  KittBreakpointNameEnum["WIDE"] = "wide";
+  return KittBreakpointNameEnum;
+}({});
+
 // eslint-disable-next-line no-restricted-imports
-var useBreakpointValue = useBreakpointValue$1;
+var CurrentBreakpointContext = /*#__PURE__*/createContext(undefined);
+/**
+ * Provider that uses the native-base breakpoint system to detect the current viewport size and maps it to Kitt's breakpoint names.
+ */
+function CurrentBreakpointProvider(_ref) {
+  var children = _ref.children;
+  var breakpoint = useBreakpointValue$1({
+    base: KittBreakpointNameEnum.BASE,
+    small: KittBreakpointNameEnum.SMALL,
+    medium: KittBreakpointNameEnum.MEDIUM,
+    large: KittBreakpointNameEnum.LARGE,
+    wide: KittBreakpointNameEnum.WIDE
+  });
+  var value = useMemo(function () {
+    return {
+      breakpoint: breakpoint
+    };
+  }, [breakpoint]);
+  return /*#__PURE__*/jsx(CurrentBreakpointContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+/**
+ * React hook that provides information about the current breakpoint.
+ * Unlike the native-base counterpart, this hook does not trigger a re-render on every viewport size change.
+ */
+function useCurrentBreakpointName() {
+  var context = useContext(CurrentBreakpointContext);
+  if (context === undefined) {
+    throw new Error('useCurrentBreakpoint must be used within an CurrentBreakpointProvider');
+  }
+  return context;
+}
+
+/**
+ * Retrieves the appropriate value for the given breakpoint with fallback to smaller breakpoints.
+ * Mimics Native Base's logic.
+ */
+function getValueForBreakpoint(breakpoint, _ref) {
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7;
+  var base = _ref.base,
+    small = _ref.small,
+    medium = _ref.medium,
+    large = _ref.large,
+    wide = _ref.wide;
+  switch (breakpoint) {
+    case KittBreakpointNameEnum.WIDE:
+      return (_ref2 = (_ref3 = (_ref4 = wide !== null && wide !== void 0 ? wide : large) !== null && _ref4 !== void 0 ? _ref4 : medium) !== null && _ref3 !== void 0 ? _ref3 : small) !== null && _ref2 !== void 0 ? _ref2 : base;
+    case KittBreakpointNameEnum.LARGE:
+      return (_ref5 = (_ref6 = large !== null && large !== void 0 ? large : medium) !== null && _ref6 !== void 0 ? _ref6 : small) !== null && _ref5 !== void 0 ? _ref5 : base;
+    case KittBreakpointNameEnum.MEDIUM:
+      return (_ref7 = medium !== null && medium !== void 0 ? medium : small) !== null && _ref7 !== void 0 ? _ref7 : base;
+    case KittBreakpointNameEnum.SMALL:
+      return small !== null && small !== void 0 ? small : base;
+    case KittBreakpointNameEnum.BASE:
+    default:
+      return base;
+  }
+}
+
+/**
+ * A hook that returns a value based on the current breakpoint.
+ * Mimics the behavior of Native Base's useBreakpointValue, but uses our custom context for better performance.
+ */
+function useBreakpointValue(values) {
+  var _useCurrentBreakpoint = useCurrentBreakpointName(),
+    breakpoint = _useCurrentBreakpoint.breakpoint;
+  return useMemo(function () {
+    return getValueForBreakpoint(breakpoint, values);
+  }, [breakpoint, values]);
+}
 
 function createResponsiveStyleFromProp(responsiveBooleanValue, valueIfTrue, valueIfFalse) {
   // Handles simple boolean values
@@ -2787,55 +2908,6 @@ function AnimatedContainer$2(_ref) {
   });
 }
 
-var KittBreakpoints = {
-  /**
-   * min-width: 0
-   */
-  BASE: 0,
-  /**
-   * min-width: 480px
-   */
-  SMALL: 480,
-  /**
-   * min-width: 768px
-   */
-  MEDIUM: 768,
-  /**
-   * min-width: 1024px
-   */
-  LARGE: 1024,
-  /**
-   * min-width: 1280px
-   */
-  WIDE: 1280
-};
-var KittBreakpointsMax = {
-  /**
-   * max-width: 479px
-   */
-  BASE: KittBreakpoints.SMALL - 1,
-  /**
-   * max-width: 767px
-   */
-  SMALL: KittBreakpoints.MEDIUM - 1,
-  /**
-   * max-width: 1023px
-   */
-  MEDIUM: KittBreakpoints.LARGE - 1,
-  /**
-   * max-width: 1279px
-   */
-  LARGE: KittBreakpoints.WIDE - 1
-};
-var KittBreakpointNameEnum = /*#__PURE__*/function (KittBreakpointNameEnum) {
-  KittBreakpointNameEnum["BASE"] = "base";
-  KittBreakpointNameEnum["SMALL"] = "small";
-  KittBreakpointNameEnum["MEDIUM"] = "medium";
-  KittBreakpointNameEnum["LARGE"] = "large";
-  KittBreakpointNameEnum["WIDE"] = "wide";
-  return KittBreakpointNameEnum;
-}({});
-
 var typographyColors = ['black', 'black-anthracite', 'black-disabled', 'black-light', 'white', 'white-light', 'primary', 'primary-light', 'accent', 'success', 'danger', 'warning'];
 
 function getNBThemeColorFromColorProps(colorName) {
@@ -3769,7 +3841,7 @@ function Avatar(_ref2) {
   });
 }
 
-var _excluded$M = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints"];
+var _excluded$M = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints", "contentContainer"];
 function BottomSheetComp(_ref, ref) {
   var Content = _ref.children,
     _ref$hasScrollView = _ref.hasScrollView,
@@ -3782,6 +3854,11 @@ function BottomSheetComp(_ref, ref) {
     enableDynamicSizing = _ref$enableDynamicSiz === void 0 ? true : _ref$enableDynamicSiz,
     _ref$snapPoints = _ref.snapPoints,
     snapPoints = _ref$snapPoints === void 0 ? ['100%'] : _ref$snapPoints,
+    _ref$contentContainer = _ref.contentContainer,
+    ContentContainer = _ref$contentContainer === void 0 ? function (_ref2) {
+      var children = _ref2.children;
+      return children;
+    } : _ref$contentContainer,
     rest = _objectWithoutProperties(_ref, _excluded$M);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
@@ -3814,7 +3891,9 @@ function BottomSheetComp(_ref, ref) {
     topInset: top,
     children: function children(props) {
       return /*#__PURE__*/jsx(Wrapper, {
-        children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, _objectSpread({}, props === null || props === void 0 ? void 0 : props.data)) : Content
+        children: /*#__PURE__*/jsx(ContentContainer, {
+          children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, _objectSpread({}, props === null || props === void 0 ? void 0 : props.data)) : Content
+        })
       });
     }
   }));
@@ -4219,7 +4298,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$H = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+var _excluded$H = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer", "contentContainer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -4230,6 +4309,11 @@ function CardModal(_ref) {
     header = _ref.header,
     body = _ref.body,
     footer = _ref.footer,
+    _ref$contentContainer = _ref.contentContainer,
+    ContentContainer = _ref$contentContainer === void 0 ? function (_ref2) {
+      var originalChildren = _ref2.children;
+      return originalChildren;
+    } : _ref$contentContainer,
     props = _objectWithoutProperties(_ref, _excluded$H);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
@@ -4240,8 +4324,10 @@ function CardModal(_ref) {
     maxHeight: "100%",
     maxWidth: maxWidth,
     minHeight: "kitt.cardModal.minHeight",
-    children: children || /*#__PURE__*/jsxs(Fragment, {
-      children: [header || null, body || null, footer || null]
+    children: /*#__PURE__*/jsx(ContentContainer, {
+      children: children || /*#__PURE__*/jsxs(Fragment, {
+        children: [header || null, body || null, footer || null]
+      })
     })
   }));
 }
@@ -8239,24 +8325,31 @@ function FullscreenModal(_ref) {
   var body = _ref.body,
     header = _ref.header,
     footer = _ref.footer,
-    backgroundColor = _ref.backgroundColor;
-  return /*#__PURE__*/jsxs(FullscreenModalContainer, {
+    backgroundColor = _ref.backgroundColor,
+    _ref$contentContainer = _ref.contentContainer,
+    ContentContainer = _ref$contentContainer === void 0 ? function (_ref2) {
+      var children = _ref2.children;
+      return children;
+    } : _ref$contentContainer;
+  return /*#__PURE__*/jsx(FullscreenModalContainer, {
     backgroundColor: backgroundColor,
-    children: [header ? /*#__PURE__*/jsx(View, {
-      children: header
-    }) : null, /*#__PURE__*/jsxs(View, {
-      flexGrow: 1,
-      flexShrink: 1,
-      justifyContent: "space-between",
-      children: [/*#__PURE__*/jsx(ScrollView$2, {
-        bounces: false,
-        contentContainerStyle: {
-          flexGrow: 1,
-          position: 'relative'
-        },
-        children: body
-      }), footer || null]
-    })]
+    children: /*#__PURE__*/jsxs(ContentContainer, {
+      children: [header ? /*#__PURE__*/jsx(View, {
+        children: header
+      }) : null, /*#__PURE__*/jsxs(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/jsx(ScrollView$2, {
+          bounces: false,
+          contentContainerStyle: {
+            flexGrow: 1,
+            position: 'relative'
+          },
+          children: body
+        }), footer || null]
+      })]
+    })
   });
 }
 FullscreenModal.Header = FullscreenModalHeader;
@@ -11623,7 +11716,9 @@ function KittNativeBaseProvider(_ref) {
     isSSR: isSSR,
     children: /*#__PURE__*/jsx(KittThemeContext.Provider, {
       value: kittInternalTheme,
-      children: children
+      children: /*#__PURE__*/jsx(CurrentBreakpointProvider, {
+        children: children
+      })
     })
   });
 }
@@ -13561,13 +13656,6 @@ function Tooltip(_ref) {
     placement = _useFloating.placement;
   var tooltipY = Math.round(y !== null && y !== void 0 ? y : 0) || 0;
   var tooltipX = Math.round(x !== null && x !== void 0 ? x : 0) || 0;
-  console.log({
-    tooltipY: tooltipY,
-    tooltipX: tooltipX,
-    placement: placement,
-    currentFloatingPadding: currentFloatingPadding,
-    floatingWidth: floatingWidth
-  });
   useEffect(function () {
     if (!onUpdate) return;
     onUpdate({
@@ -13603,7 +13691,6 @@ function Tooltip(_ref) {
       children: renderPressable({
         ref: getPressableRect,
         onPress: function handlePress() {
-          console.log('handlePress', pressed.value);
           if (onToggle) onToggle(!!pressed.value);
           pressed.value = !pressed.value;
         },
@@ -13854,21 +13941,14 @@ function MatchWindowSize(_ref) {
 }
 /**
  * Display based on current breakpoint
+ * Mimics the behavior of Native Base's SwitchBreakpoints, but uses our custom context for better performance.
  *
  * WARNING: Currently not SSR friendly (but could be).
  */
-function SwitchBreakpoints(breakpoints) {
-  return useBreakpointValue(breakpoints);
-}
-
-function useCurrentBreakpointName() {
-  return useBreakpointValue({
-    base: KittBreakpointNameEnum.BASE,
-    small: KittBreakpointNameEnum.SMALL,
-    medium: KittBreakpointNameEnum.MEDIUM,
-    large: KittBreakpointNameEnum.LARGE,
-    wide: KittBreakpointNameEnum.WIDE
-  });
+function SwitchBreakpoints(values) {
+  var _useCurrentBreakpoint = useCurrentBreakpointName(),
+    breakpoint = _useCurrentBreakpoint.breakpoint;
+  return getValueForBreakpoint(breakpoint, values);
 }
 
 function useStepAnimations(_ref) {
@@ -14130,5 +14210,5 @@ function VerticalSteps(_ref) {
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index.es.js.map