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

package/dist/index-node-20.10.cjs.web.js

@@ -2688,8 +2688,129 @@ const VStack = nativeBase.VStack;
 const HStack = nativeBase.HStack;
 const Center = nativeBase.Center;
 
+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 = nativeBase.useBreakpointValue;
+const CurrentBreakpointContext = /*#__PURE__*/react.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 = nativeBase.useBreakpointValue({
+    base: KittBreakpointNameEnum.BASE,
+    small: KittBreakpointNameEnum.SMALL,
+    medium: KittBreakpointNameEnum.MEDIUM,
+    large: KittBreakpointNameEnum.LARGE,
+    wide: KittBreakpointNameEnum.WIDE
+  });
+  const value = react.useMemo(() => ({
+    breakpoint
+  }), [breakpoint]);
+  return /*#__PURE__*/jsxRuntime.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 = react.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 react.useMemo(() => {
+    return getValueForBreakpoint(breakpoint, values);
+  }, [breakpoint, values]);
+}
 
 function createResponsiveStyleFromProp(responsiveBooleanValue, valueIfTrue, valueIfFalse) {
   // Handles simple boolean values
@@ -2805,55 +2926,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) {
@@ -4057,6 +4129,9 @@ function CardModal({
   header,
   body,
   footer,
+  contentContainer: ContentContainer = ({
+    children: originalChildren
+  }) => originalChildren,
   ...props
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
@@ -4069,8 +4144,10 @@ function CardModal({
     maxHeight: "100%",
     maxWidth: maxWidth,
     minHeight: "kitt.cardModal.minHeight",
-    children: children || /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [header || null, body || null, footer || null]
+    children: /*#__PURE__*/jsxRuntime.jsx(ContentContainer, {
+      children: children || /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [header || null, body || null, footer || null]
+      })
     })
   });
 }
@@ -7144,25 +7221,30 @@ function FullscreenModal({
   body,
   header,
   footer,
-  backgroundColor
+  backgroundColor,
+  contentContainer: ContentContainer = ({
+    children
+  }) => children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(FullscreenModalContainer, {
+  return /*#__PURE__*/jsxRuntime.jsx(FullscreenModalContainer, {
     backgroundColor: backgroundColor,
-    children: [header ? /*#__PURE__*/jsxRuntime.jsx(View, {
-      children: header
-    }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
-      flexGrow: 1,
-      flexShrink: 1,
-      justifyContent: "space-between",
-      children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
-        bounces: false,
-        contentContainerStyle: {
-          flexGrow: 1,
-          position: 'relative'
-        },
-        children: body
-      }), footer || null]
-    })]
+    children: /*#__PURE__*/jsxRuntime.jsxs(ContentContainer, {
+      children: [header ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        children: header
+      }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+          bounces: false,
+          contentContainerStyle: {
+            flexGrow: 1,
+            position: 'relative'
+          },
+          children: body
+        }), footer || null]
+      })]
+    })
   });
 }
 FullscreenModal.Header = FullscreenModalHeader;
@@ -10595,7 +10677,9 @@ function KittNativeBaseProvider({
     isSSR: isSSR,
     children: /*#__PURE__*/jsxRuntime.jsx(KittThemeContext.Provider, {
       value: kittInternalTheme,
-      children: children
+      children: /*#__PURE__*/jsxRuntime.jsx(CurrentBreakpointProvider, {
+        children: children
+      })
     })
   });
 }
@@ -12687,21 +12771,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({
@@ -13069,6 +13147,7 @@ exports.View = View;
 exports.createChoicesComponent = createChoicesComponent;
 exports.createResponsiveStyleFromProp = createResponsiveStyleFromProp;
 exports.getStaticMapImageUrl = getStaticMapImageUrl;
+exports.getValueForBreakpoint = getValueForBreakpoint;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;
 exports.storyPadding = storyPadding;