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

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

@@ -1,4 +1,4 @@
-import { useContext, createContext, forwardRef, cloneElement, useState, useRef, useEffect, useMemo, Children, useReducer, useCallback, Fragment as Fragment$1 } from 'react';
+import { useContext, createContext, forwardRef, useMemo, cloneElement, useState, useRef, useEffect, Children, useReducer, useCallback, Fragment as Fragment$1 } 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 } from 'native-base';
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -2681,8 +2681,129 @@ const VStack = VStack$1;
 const HStack = HStack$1;
 const Center = Center$1;
 
+const 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
+};
+const 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
+};
+let 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
-const useBreakpointValue = useBreakpointValue$1;
+const 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({
+  children
+}) {
+  const breakpoint = useBreakpointValue$1({
+    base: KittBreakpointNameEnum.BASE,
+    small: KittBreakpointNameEnum.SMALL,
+    medium: KittBreakpointNameEnum.MEDIUM,
+    large: KittBreakpointNameEnum.LARGE,
+    wide: KittBreakpointNameEnum.WIDE
+  });
+  const value = useMemo(() => ({
+    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() {
+  const 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, {
+  base,
+  small,
+  medium,
+  large,
+  wide
+}) {
+  switch (breakpoint) {
+    case KittBreakpointNameEnum.WIDE:
+      return wide ?? large ?? medium ?? small ?? base;
+    case KittBreakpointNameEnum.LARGE:
+      return large ?? medium ?? small ?? base;
+    case KittBreakpointNameEnum.MEDIUM:
+      return medium ?? small ?? base;
+    case KittBreakpointNameEnum.SMALL:
+      return 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) {
+  const {
+    breakpoint
+  } = useCurrentBreakpointName();
+  return useMemo(() => {
+    return getValueForBreakpoint(breakpoint, values);
+  }, [breakpoint, values]);
+}
 
 function createResponsiveStyleFromProp(responsiveBooleanValue, valueIfTrue, valueIfFalse) {
   // Handles simple boolean values
@@ -2798,55 +2919,6 @@ function AnimatedContainer$2({
   });
 }
 
-const 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
-};
-const 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
-};
-let KittBreakpointNameEnum = /*#__PURE__*/function (KittBreakpointNameEnum) {
-  KittBreakpointNameEnum["BASE"] = "base";
-  KittBreakpointNameEnum["SMALL"] = "small";
-  KittBreakpointNameEnum["MEDIUM"] = "medium";
-  KittBreakpointNameEnum["LARGE"] = "large";
-  KittBreakpointNameEnum["WIDE"] = "wide";
-  return KittBreakpointNameEnum;
-}({});
-
 const typographyColors = ['black', 'black-anthracite', 'black-disabled', 'black-light', 'white', 'white-light', 'primary', 'primary-light', 'accent', 'success', 'danger', 'warning'];
 
 function getNBThemeColorFromColorProps(colorName) {
@@ -4050,6 +4122,9 @@ function CardModal({
   header,
   body,
   footer,
+  contentContainer: ContentContainer = ({
+    children: originalChildren
+  }) => originalChildren,
   ...props
 }) {
   return /*#__PURE__*/jsx(View, {
@@ -4062,8 +4137,10 @@ function CardModal({
     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]
+      })
     })
   });
 }
@@ -7137,25 +7214,30 @@ function FullscreenModal({
   body,
   header,
   footer,
-  backgroundColor
+  backgroundColor,
+  contentContainer: ContentContainer = ({
+    children
+  }) => children
 }) {
-  return /*#__PURE__*/jsxs(FullscreenModalContainer, {
+  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;
@@ -10588,7 +10670,9 @@ function KittNativeBaseProvider({
     isSSR: isSSR,
     children: /*#__PURE__*/jsx(KittThemeContext.Provider, {
       value: kittInternalTheme,
-      children: children
+      children: /*#__PURE__*/jsx(CurrentBreakpointProvider, {
+        children: children
+      })
     })
   });
 }
@@ -12680,21 +12764,15 @@ function MatchWindowSize({
 }
 /**
  * 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) {
+  const {
+    breakpoint
+  } = useCurrentBreakpointName();
+  return getValueForBreakpoint(breakpoint, values);
 }
 
 function useStepAnimations({
@@ -12955,5 +13033,5 @@ function VerticalSteps({
 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, 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, 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-node-20.10.es.web.mjs.map