@platform-blocks/ui 0.7.2 → 0.8.0

package/lib/cjs/index.js

@@ -486,8 +486,10 @@ function createTheme(themeOverride) {
 
 // Debug flag (only logs when in dev mode AND explicit debug env flag is set)
 typeof __DEV__ !== 'undefined' && __DEV__ && !!process.env.EXPO_PUBLIC_DEBUG;
-// Theme Context
+// Full theme context (backwards compatible)
 const PlatformBlocksThemeContext = React.createContext(null);
+const ThemeVisualsContext = React.createContext(null);
+const ThemeLayoutContext = React.createContext(null);
 function PlatformBlocksThemeProvider({ theme, inherit = true, children }) {
     const parentTheme = useTheme();
     const mergedTheme = React.useMemo(() => {
@@ -507,11 +509,45 @@ function PlatformBlocksThemeProvider({ theme, inherit = true, children }) {
         // debugLog('[PlatformBlocksThemeProvider] Creating merged theme with override, colorScheme:', result.colorScheme);
         return result;
     }, [theme, parentTheme, inherit]);
+    // Derive stable sub-context values — only create new objects when the
+    // relevant subset of the theme actually changes.
+    const visuals = React.useMemo(() => ({
+        colorScheme: mergedTheme.colorScheme,
+        primaryColor: mergedTheme.primaryColor,
+        colors: mergedTheme.colors,
+        text: mergedTheme.text,
+        backgrounds: mergedTheme.backgrounds,
+        states: mergedTheme.states,
+    }), [
+        mergedTheme.colorScheme,
+        mergedTheme.primaryColor,
+        mergedTheme.colors,
+        mergedTheme.text,
+        mergedTheme.backgrounds,
+        mergedTheme.states,
+    ]);
+    const layout = React.useMemo(() => ({
+        fontFamily: mergedTheme.fontFamily,
+        fontSizes: mergedTheme.fontSizes,
+        spacing: mergedTheme.spacing,
+        radii: mergedTheme.radii,
+        shadows: mergedTheme.shadows,
+        breakpoints: mergedTheme.breakpoints,
+        designTokens: mergedTheme.designTokens,
+    }), [
+        mergedTheme.fontFamily,
+        mergedTheme.fontSizes,
+        mergedTheme.spacing,
+        mergedTheme.radii,
+        mergedTheme.shadows,
+        mergedTheme.breakpoints,
+        mergedTheme.designTokens,
+    ]);
     // debugLog('[PlatformBlocksThemeProvider] Rendering with theme colorScheme:', mergedTheme.colorScheme);
-    return (jsxRuntime.jsx(PlatformBlocksThemeContext.Provider, { value: mergedTheme, children: children }));
+    return (jsxRuntime.jsx(PlatformBlocksThemeContext.Provider, { value: mergedTheme, children: jsxRuntime.jsx(ThemeVisualsContext.Provider, { value: visuals, children: jsxRuntime.jsx(ThemeLayoutContext.Provider, { value: layout, children: children }) }) }));
 }
 /**
- * Hook to access the current theme
+ * Hook to access the current theme (full object — backwards compatible)
  */
 function useTheme() {
     const theme = React.useContext(PlatformBlocksThemeContext);
@@ -521,6 +557,45 @@ function useTheme() {
     }
     return theme;
 }
+/**
+ * Granular hook: subscribe only to visual / color-related properties.
+ * Components using this will NOT re-render when layout tokens change.
+ */
+function useThemeVisuals() {
+    const visuals = React.useContext(ThemeVisualsContext);
+    if (!visuals) {
+        const t = DEFAULT_THEME;
+        return {
+            colorScheme: t.colorScheme,
+            primaryColor: t.primaryColor,
+            colors: t.colors,
+            text: t.text,
+            backgrounds: t.backgrounds,
+            states: t.states,
+        };
+    }
+    return visuals;
+}
+/**
+ * Granular hook: subscribe only to layout / token properties.
+ * Components using this will NOT re-render when colors change.
+ */
+function useThemeLayout() {
+    const layout = React.useContext(ThemeLayoutContext);
+    if (!layout) {
+        const t = DEFAULT_THEME;
+        return {
+            fontFamily: t.fontFamily,
+            fontSizes: t.fontSizes,
+            spacing: t.spacing,
+            radii: t.radii,
+            shadows: t.shadows,
+            breakpoints: t.breakpoints,
+            designTokens: t.designTokens,
+        };
+    }
+    return layout;
+}
 
 /**
  * Component that injects CSS variables based on the current theme
@@ -1526,6 +1601,58 @@ function useKeyboardManagerOptional() {
     return React.useContext(KeyboardManagerContext);
 }
 
+const BREAKPOINTS = {
+    xs: 480, // Extra small devices
+    sm: 576, // Small devices (landscape phones)
+    md: 768, // Medium devices (tablets)
+    lg: 992, // Large devices (desktops)
+    xl: 1200, // Extra large devices (large desktops)
+};
+// Shared breakpoint context — a single resize listener feeds all consumers
+const BreakpointContext = React.createContext(null);
+function computeBreakpoint() {
+    let width;
+    if (reactNative.Platform.OS === 'web') {
+        width = window.innerWidth;
+    }
+    else {
+        width = reactNative.Dimensions.get('window').width;
+    }
+    if (width >= BREAKPOINTS.xl)
+        return 'xl';
+    if (width >= BREAKPOINTS.lg)
+        return 'lg';
+    if (width >= BREAKPOINTS.md)
+        return 'md';
+    if (width >= BREAKPOINTS.sm)
+        return 'sm';
+    if (width >= BREAKPOINTS.xs)
+        return 'xs';
+    return 'base';
+}
+/**
+ * Provider that maintains a single resize / Dimensions listener and shares
+ * the current breakpoint with all descendants via context.
+ * Mount once near the root of the app (PlatformBlocksProvider does this automatically).
+ */
+function BreakpointProvider({ children }) {
+    const [breakpoint, setBreakpoint] = React.useState(computeBreakpoint);
+    React.useEffect(() => {
+        const update = () => {
+            setBreakpoint(computeBreakpoint());
+        };
+        if (reactNative.Platform.OS === 'web') {
+            window.addEventListener('resize', update);
+            return () => window.removeEventListener('resize', update);
+        }
+        else {
+            const subscription = reactNative.Dimensions.addEventListener('change', update);
+            return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+        }
+    }, []);
+    return React.createElement(BreakpointContext.Provider, { value: breakpoint }, children);
+}
+
 /**
  * Global Spotlight Hook for Direct State Access
  *
@@ -1886,26 +2013,33 @@ function useSpotlightStoreInstance() {
         query: '',
         selectedIndex: -1
     });
-    const store = {
+    const open = React.useCallback(() => setState(prev => ({ ...prev, opened: true })), []);
+    const close = React.useCallback(() => setState(prev => ({ ...prev, opened: false, query: '', selectedIndex: -1 })), []);
+    const toggle = React.useCallback(() => setState(prev => ({ ...prev, opened: !prev.opened })), []);
+    const setQuery = React.useCallback((query) => setState(prev => ({ ...prev, query })), []);
+    const setSelectedIndex = React.useCallback((selectedIndex) => setState(prev => ({ ...prev, selectedIndex })), []);
+    const navigateUp = React.useCallback(() => setState(prev => ({ ...prev, selectedIndex: prev.selectedIndex > 0 ? prev.selectedIndex - 1 : -1 })), []);
+    const navigateDown = React.useCallback((maxIndex = 0) => setState(prev => ({ ...prev, selectedIndex: prev.selectedIndex < maxIndex - 1 ? prev.selectedIndex + 1 : maxIndex - 1 })), []);
+    const store = React.useMemo(() => ({
         state,
-        open: () => setState(prev => ({ ...prev, opened: true })),
-        close: () => setState(prev => ({ ...prev, opened: false, query: '', selectedIndex: -1 })),
-        toggle: () => setState(prev => ({ ...prev, opened: !prev.opened })),
-        setQuery: (query) => setState(prev => ({ ...prev, query })),
-        setSelectedIndex: (selectedIndex) => setState(prev => ({ ...prev, selectedIndex })),
-        navigateUp: () => setState(prev => ({ ...prev, selectedIndex: prev.selectedIndex > 0 ? prev.selectedIndex - 1 : -1 })),
-        navigateDown: (maxIndex = 0) => setState(prev => ({ ...prev, selectedIndex: prev.selectedIndex < maxIndex - 1 ? prev.selectedIndex + 1 : maxIndex - 1 })),
-    };
-    const actions = {
-        state: store.state,
-        open: store.open,
-        close: store.close,
-        toggle: store.toggle,
-        setQuery: store.setQuery,
-        setSelectedIndex: store.setSelectedIndex,
-        navigateUp: store.navigateUp,
-        navigateDown: store.navigateDown,
-    };
+        open,
+        close,
+        toggle,
+        setQuery,
+        setSelectedIndex,
+        navigateUp,
+        navigateDown,
+    }), [state, open, close, toggle, setQuery, setSelectedIndex, navigateUp, navigateDown]);
+    const actions = React.useMemo(() => ({
+        state,
+        open,
+        close,
+        toggle,
+        setQuery,
+        setSelectedIndex,
+        navigateUp,
+        navigateDown,
+    }), [state, open, close, toggle, setQuery, setSelectedIndex, navigateUp, navigateDown]);
     return [store, actions];
 }
 const createSpotlightStore = useSpotlightStoreInstance;
@@ -3774,13 +3908,27 @@ function factory(ui, options = {}) {
 /**
  * Factory function for creating polymorphic PlatformBlocks components
  */
-function polymorphicFactory(ui) {
-    const Component = React.forwardRef(ui);
+function polymorphicFactory(ui, options = {}) {
+    const { displayName, memo: shouldMemo = true, arePropsEqual } = options;
+    const ForwardComponent = React.forwardRef(ui);
+    if (displayName) {
+        ForwardComponent.displayName = displayName;
+    }
+    const MemoizedComponent = shouldMemo
+        ? React.memo(ForwardComponent, arePropsEqual)
+        : ForwardComponent;
+    const Component = MemoizedComponent;
     Component.withProps = (fixedProps) => {
-        const Extended = React.forwardRef((props, ref) => (jsxRuntime.jsx(Component, { ...fixedProps, ...props, ref: ref })));
-        Extended.extend = Component.extend;
-        Extended.displayName = `WithProps(${Component.displayName})`;
-        return Extended;
+        const Extended = React.forwardRef((props, ref) => (jsxRuntime.jsx(ForwardComponent, { ...fixedProps, ...props, ref: ref })));
+        const baseName = ForwardComponent.displayName || ui.name || 'PolymorphicComponent';
+        Extended.displayName = `WithProps(${baseName})`;
+        const ExtendedComponent = shouldMemo
+            ? React.memo(Extended, arePropsEqual)
+            : Extended;
+        const Result = ExtendedComponent;
+        Result.extend = Component.extend;
+        Result.withProps = Component.withProps;
+        return Result;
     };
     Component.extend = ((input) => input);
     return Component;
@@ -6959,10 +7107,10 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     }, [shouldClose]);
     const isDark = theme.colorScheme === 'dark';
     const surfaceColor = isDark ? theme.backgrounds.surface : '#FFFFFF';
-    isDark ? theme.colors.gray[6] : '#E1E3E6';
+    const borderColor = isDark ? theme.colors.gray[6] : '#E1E3E6';
     const headerBg = surfaceColor;
     const contentBg = surfaceColor;
-    const dynamicStyles = reactNative.StyleSheet.create({
+    const dynamicStyles = React.useMemo(() => reactNative.StyleSheet.create({
         backdrop: {
             ...reactNative.StyleSheet.absoluteFillObject,
             backgroundColor: variant === 'fullscreen' ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
@@ -7072,7 +7220,9 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
                 msUserSelect: 'none',
             }),
         },
-    });
+    }), [variant, contentBg, resolvedRadius, resolvedMaxHeight, bottomSheetMaxWidth, defaultModalMaxWidth,
+        modalEffectiveWidth, screenWidth, horizontalMargin, insets.top, insets.bottom,
+        headerBg, borderColor, isRTL, isDark, theme.colors.gray, title]);
     // Animated styles using reanimated
     const backdropAnimatedStyle = Animated.useAnimatedStyle(() => {
         const opacity = backdropOpacity.value;
@@ -7840,12 +7990,13 @@ const TitleRegistryProvider = ({ children }) => {
     const clearTitles = React.useCallback(() => {
         setTitles([]);
     }, []);
-    return (jsxRuntime.jsx(TitleRegistryContext.Provider, { value: {
-            titles,
-            registerTitle,
-            unregisterTitle,
-            clearTitles
-        }, children: children }));
+    const value = React.useMemo(() => ({
+        titles,
+        registerTitle,
+        unregisterTitle,
+        clearTitles
+    }), [titles, registerTitle, unregisterTitle, clearTitles]);
+    return (jsxRuntime.jsx(TitleRegistryContext.Provider, { value: value, children: children }));
 };
 
 const DEFAULT_SELECTOR = 'h1, h2, h3, h4, h5, h6';
@@ -8172,14 +8323,97 @@ function createMask(definition) {
     })
 });
 
+function useMaskedInput(options) {
+    const { mask: maskDefinition, initialValue = '', onValueChange, onUnmaskedValueChange } = options;
+    // Create mask function if needed
+    const maskRef = React.useRef(typeof maskDefinition === 'function' || 'applyMask' in maskDefinition
+        ? maskDefinition
+        : createMask(maskDefinition));
+    const mask = maskRef.current;
+    // Initialize state
+    const initialResult = mask.applyMask(initialValue);
+    const [state, setState] = React.useState({
+        value: initialResult.value,
+        unmaskedValue: initialResult.unmaskedValue,
+        isComplete: initialResult.isComplete,
+        cursorPosition: initialResult.cursorPosition,
+        previousValue: initialResult.value
+    });
+    const selectionRef = React.useRef({ start: 0, end: 0 });
+    const updateState = React.useCallback((newResult) => {
+        setState(prevState => {
+            if (prevState.value === newResult.value &&
+                prevState.unmaskedValue === newResult.unmaskedValue &&
+                prevState.isComplete === newResult.isComplete &&
+                prevState.cursorPosition === newResult.cursorPosition) {
+                return prevState;
+            }
+            return {
+                value: newResult.value,
+                unmaskedValue: newResult.unmaskedValue,
+                isComplete: newResult.isComplete,
+                cursorPosition: newResult.cursorPosition,
+                previousValue: prevState.value
+            };
+        });
+    }, []);
+    // Handle callbacks in useEffect to avoid calling them during render
+    const prevUnmaskedValueRef = React.useRef(state.unmaskedValue);
+    React.useEffect(() => {
+        if (state.unmaskedValue !== prevUnmaskedValueRef.current) {
+            prevUnmaskedValueRef.current = state.unmaskedValue;
+            const result = {
+                value: state.value,
+                unmaskedValue: state.unmaskedValue,
+                isComplete: state.isComplete,
+                cursorPosition: state.cursorPosition
+            };
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(result);
+            onUnmaskedValueChange === null || onUnmaskedValueChange === void 0 ? void 0 : onUnmaskedValueChange(state.unmaskedValue, result);
+        }
+    }, [state.value, state.unmaskedValue, state.isComplete, state.cursorPosition, onValueChange, onUnmaskedValueChange]);
+    const handleChangeText = React.useCallback((text) => {
+        const result = mask.processInput(text, state.previousValue, selectionRef.current.start);
+        updateState(result);
+    }, [mask, state.previousValue, updateState]);
+    const handleSelectionChange = React.useCallback((selection) => {
+        selectionRef.current = selection;
+    }, []);
+    const reset = React.useCallback(() => {
+        const result = mask.applyMask(initialValue);
+        updateState(result);
+    }, [mask, initialValue, updateState]);
+    const setValue = React.useCallback((value) => {
+        const result = mask.applyMask(value);
+        updateState(result);
+    }, [mask, updateState]);
+    const setUnmaskedValue = React.useCallback((unmaskedValue) => {
+        const result = mask.applyMask(unmaskedValue);
+        updateState(result);
+    }, [mask, updateState]);
+    return {
+        value: state.value,
+        unmaskedValue: state.unmaskedValue,
+        isComplete: state.isComplete,
+        handleChangeText,
+        handleSelectionChange,
+        cursorPosition: state.cursorPosition,
+        reset,
+        setValue,
+        setUnmaskedValue
+    };
+}
+
 const useTitleRegistration = (options) => {
     const registry = useTitleRegistryOptional();
     const elementRef = React.useRef(null);
     const { text, order, id: providedId, autoRegister = true } = options;
     // Generate ID from text if not provided
     const id = providedId || text.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
+    const registerTitle = registry === null || registry === void 0 ? void 0 : registry.registerTitle;
+    const unregisterTitle = registry === null || registry === void 0 ? void 0 : registry.unregisterTitle;
     React.useEffect(() => {
-        if (!registry || !autoRegister || !text)
+        if (!registerTitle || !unregisterTitle || !autoRegister || !text)
             return;
         const titleItem = {
             id,
@@ -8187,11 +8421,11 @@ const useTitleRegistration = (options) => {
             order,
             ref: elementRef,
         };
-        registry.registerTitle(titleItem);
+        registerTitle(titleItem);
         return () => {
-            registry.unregisterTitle(id);
+            unregisterTitle(id);
         };
-    }, [registry, id, text, order, autoRegister]);
+    }, [registerTitle, unregisterTitle, id, text, order, autoRegister]);
     return { elementRef, id };
 };
 
@@ -9460,7 +9694,7 @@ shortcut = ['cmd+k', 'ctrl+k'], searchProps = {}, store, variant = 'modal', widt
     // Reset selection when query changes
     React.useEffect(() => {
         currentStore.setSelectedIndex(-1);
-    }, [query, currentStore]);
+    }, [query, currentStore.setSelectedIndex]);
     const handleNavigateUp = () => {
         if (!flatActions.length)
             return;
@@ -10027,7 +10261,7 @@ function PlatformBlocksProvider({ children, theme, inherit = true, withCSSVariab
     if (directionConfig) {
         enhancedTree = (jsxRuntime.jsx(DirectionProvider, { ...directionConfig, children: enhancedTree }));
     }
-    return (jsxRuntime.jsx(I18nBoundary, { locale: locale, fallbackLocale: fallbackLocale, resources: i18nStore, children: enhancedTree }));
+    return (jsxRuntime.jsx(I18nBoundary, { locale: locale, fallbackLocale: fallbackLocale, resources: i18nStore, children: jsxRuntime.jsx(BreakpointProvider, { children: enhancedTree }) }));
 }
 PlatformBlocksProvider.displayName = 'PlatformBlocksProvider';
 
@@ -10762,7 +10996,9 @@ function resolveResponsiveProp(value, width, breakpoints = DEFAULT_BREAKPOINTS)
 const DEFAULT_EXTRA_SCROLL_HEIGHT = 24;
 const KeyboardAwareLayout = React.forwardRef((props, ref) => {
     var _a, _b;
-    const { children, behavior, keyboardVerticalOffset = 0, enabled = true, scrollable = true, extraScrollHeight = DEFAULT_EXTRA_SCROLL_HEIGHT, style, contentContainerStyle, keyboardShouldPersistTaps = 'handled', scrollRef, scrollViewProps, ...rest } = props;
+    const { children, behavior, keyboardVerticalOffset = 0, enabled = true, scrollable = true, extraScrollHeight = DEFAULT_EXTRA_SCROLL_HEIGHT, style, contentContainerStyle, keyboardShouldPersistTaps = 'handled', scrollRef, scrollViewProps, 
+    // Native ScrollView passthrough props
+    scrollEnabled, bounces, onScroll, scrollEventThrottle, onMomentumScrollBegin, onMomentumScrollEnd, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, decelerationRate, overScrollMode: overScrollModeProp, refreshControl, ...rest } = props;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
     const keyboard = useKeyboardManagerOptional();
@@ -10800,7 +11036,7 @@ const KeyboardAwareLayout = React.forwardRef((props, ref) => {
         }
         return stylesArray;
     }, [spacingStyles, style]);
-    return (jsxRuntime.jsx(reactNative.KeyboardAvoidingView, { ref: ref, behavior: resolvedBehavior, keyboardVerticalOffset: keyboardVerticalOffset, enabled: enabled, style: containerStyles, ...otherProps, children: scrollable ? (jsxRuntime.jsx(reactNative.ScrollView, { ref: scrollRef, contentContainerStyle: contentStyles, keyboardShouldPersistTaps: keyboardShouldPersistTaps, showsVerticalScrollIndicator: false, overScrollMode: "never", ...restScrollViewProps, children: children })) : (jsxRuntime.jsx(reactNative.View, { style: contentStyles, children: children })) }));
+    return (jsxRuntime.jsx(reactNative.KeyboardAvoidingView, { ref: ref, behavior: resolvedBehavior, keyboardVerticalOffset: keyboardVerticalOffset, enabled: enabled, style: containerStyles, ...otherProps, children: scrollable ? (jsxRuntime.jsx(reactNative.ScrollView, { ref: scrollRef, contentContainerStyle: contentStyles, keyboardShouldPersistTaps: keyboardShouldPersistTaps, showsVerticalScrollIndicator: showsVerticalScrollIndicator !== null && showsVerticalScrollIndicator !== void 0 ? showsVerticalScrollIndicator : false, showsHorizontalScrollIndicator: showsHorizontalScrollIndicator, overScrollMode: overScrollModeProp !== null && overScrollModeProp !== void 0 ? overScrollModeProp : 'never', scrollEnabled: scrollEnabled, bounces: bounces, onScroll: onScroll, scrollEventThrottle: scrollEventThrottle, onMomentumScrollBegin: onMomentumScrollBegin, onMomentumScrollEnd: onMomentumScrollEnd, decelerationRate: decelerationRate, refreshControl: refreshControl, ...restScrollViewProps, children: children })) : (jsxRuntime.jsx(reactNative.View, { style: contentStyles, children: children })) }));
 });
 KeyboardAwareLayout.displayName = 'KeyboardAwareLayout';
 const styles$d = reactNative.StyleSheet.create({
@@ -10853,18 +11089,41 @@ const DefaultItemRenderer = ({ item, index, gap }) => {
 const Masonry = factory((props, ref) => {
     // const { width } = useWindowDimensions();
     const { spacingProps, otherProps } = extractSpacingProps(props);
-    const { data = [], numColumns = 2, gap = 'sm', optimizeItemArrangement = true, renderItem, contentContainerStyle, style, testID, loading = false, emptyContent, flashListProps = {}, ...restProps } = otherProps;
+    const { data = [], numColumns = 2, gap = 'sm', optimizeItemArrangement = true, renderItem, contentContainerStyle, style, testID, loading = false, emptyContent, flashListProps = {}, 
+    // Native FlashList passthrough props
+    onEndReached, onEndReachedThreshold, onViewableItemsChanged, scrollEnabled, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, estimatedItemSize, refreshControl, onScroll, scrollEventThrottle, ...restProps } = otherProps;
     const resolvedGap = getSpacing(gap);
     const spacingStyle = getSpacingStyles(spacingProps);
     // FlashList performance hints (overridable via flashListProps). Use loose typing to avoid version/type mismatches.
     const finalFlashListProps = React.useMemo(() => {
         const p = { ...flashListProps };
         if (p.estimatedItemSize == null)
-            p.estimatedItemSize = 180;
+            p.estimatedItemSize = estimatedItemSize !== null && estimatedItemSize !== void 0 ? estimatedItemSize : 180;
         if (p.keyExtractor == null)
             p.keyExtractor = (item) => item.id;
+        // Merge first-class passthrough props (explicit flashListProps overrides these)
+        if (onEndReached !== undefined && p.onEndReached == null)
+            p.onEndReached = onEndReached;
+        if (onEndReachedThreshold !== undefined && p.onEndReachedThreshold == null)
+            p.onEndReachedThreshold = onEndReachedThreshold;
+        if (onViewableItemsChanged !== undefined && p.onViewableItemsChanged == null)
+            p.onViewableItemsChanged = onViewableItemsChanged;
+        if (scrollEnabled !== undefined && p.scrollEnabled == null)
+            p.scrollEnabled = scrollEnabled;
+        if (ListEmptyComponent !== undefined && p.ListEmptyComponent == null)
+            p.ListEmptyComponent = ListEmptyComponent;
+        if (ListFooterComponent !== undefined && p.ListFooterComponent == null)
+            p.ListFooterComponent = ListFooterComponent;
+        if (ListHeaderComponent !== undefined && p.ListHeaderComponent == null)
+            p.ListHeaderComponent = ListHeaderComponent;
+        if (refreshControl !== undefined && p.refreshControl == null)
+            p.refreshControl = refreshControl;
+        if (onScroll !== undefined && p.onScroll == null)
+            p.onScroll = onScroll;
+        if (scrollEventThrottle !== undefined && p.scrollEventThrottle == null)
+            p.scrollEventThrottle = scrollEventThrottle;
         return p;
-    }, [flashListProps]);
+    }, [flashListProps, estimatedItemSize, onEndReached, onEndReachedThreshold, onViewableItemsChanged, scrollEnabled, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, refreshControl, onScroll, scrollEventThrottle]);
     const renderMasonryItem = ({ item, index }) => {
         if (renderItem) {
             return (jsxRuntime.jsx(reactNative.View, { children: renderItem(item, index) }));
@@ -13778,12 +14037,17 @@ const Collapse = ({ isCollapsed, children, duration = 300, timing = 'ease-out',
         }
         setContentHeight(prev => {
             if (Math.abs(prev - height) > 0.5) {
-                heightAnimation.setValue(isCollapsed ? height : Math.min(height, collapsedHeight));
                 return height;
             }
             return prev;
         });
     };
+    // Sync animated value when contentHeight changes outside of initial measurement
+    React.useEffect(() => {
+        if (!hasMeasuredRef.current || contentHeight === 0)
+            return;
+        heightAnimation.setValue(isCollapsed ? contentHeight : Math.min(contentHeight, collapsedHeight));
+    }, [contentHeight, isCollapsed, collapsedHeight, heightAnimation]);
     return (jsxRuntime.jsx(reactNative.Animated.View, { style: [
             {
                 overflow: 'hidden',
@@ -14566,7 +14830,7 @@ const CodeBlock = (props) => {
 
 const createDefaultComponents = (theme, handleLinkPress) => ({
     heading: ({ level, children }) => (jsxRuntime.jsx(Text, { variant: `h${Math.min(level, 6)}`, style: { marginTop: level === 1 ? 24 : 16, marginBottom: 8 }, weight: level <= 2 ? '700' : '600', children: children })),
-    paragraph: ({ children }) => (jsxRuntime.jsx(Text, { variant: "p", style: { marginBottom: 12 }, children: children })),
+    paragraph: ({ children }) => (jsxRuntime.jsx(Text, { variant: "p", as: "div", style: { marginBottom: 12 }, children: children })),
     strong: ({ children }) => (jsxRuntime.jsx(Text, { variant: "strong", children: children })),
     em: ({ children }) => (jsxRuntime.jsx(Text, { variant: "em", children: children })),
     codeInline: ({ children }) => (jsxRuntime.jsx(Text, { variant: "code", style: {
@@ -17058,7 +17322,7 @@ const TextInputBase = factory((props, ref) => {
                                             height: styles.input.fontSize || 16,
                                             backgroundColor: textColor,
                                             marginLeft: 1,
-                                        } }))] }))] }), (showClearButton || endSection) && (jsxRuntime.jsxs(reactNative.View, { style: styles.endSection, children: [showClearButton && (jsxRuntime.jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsxRuntime.jsx(reactNative.Text, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsxRuntime.jsx(reactNative.Text, { style: styles.helperText, children: helperText }))] }));
+                                        } }))] }))] }), (showClearButton || endSection) && (jsxRuntime.jsxs(reactNative.View, { style: styles.endSection, children: [showClearButton && (jsxRuntime.jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error ? (jsxRuntime.jsx(reactNative.Text, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })) : null, helperText && !error ? (jsxRuntime.jsx(reactNative.Text, { style: styles.helperText, children: helperText })) : null] }));
 });
 
 const getInputTypeConfig = (type) => {
@@ -17110,7 +17374,9 @@ const getInputTypeConfig = (type) => {
     return configs[type || 'text'];
 };
 const Input = factory((props, ref) => {
-    const { type = 'text', validation, autoComplete, keyboardType, multiline, numberOfLines, minLines = 1, maxLines, maxLength, secureTextEntry, textInputProps, required, withAsterisk, endSection, inputRef, value, onChangeText, ...baseProps } = props;
+    const { type = 'text', validation, autoComplete, keyboardType, multiline, numberOfLines, minLines = 1, maxLines, maxLength, secureTextEntry, textInputProps, required, withAsterisk, endSection, inputRef, value, onChangeText, 
+    // Native TextInput passthrough props
+    autoCapitalize, autoCorrect, autoFocus, returnKeyType, blurOnSubmit, selectTextOnFocus, textContentType, textAlign, spellCheck, inputMode, enterKeyHint, selectionColor, showSoftInputOnFocus, editable, ...baseProps } = props;
     const theme = useTheme();
     // State for password visibility
     const [showPassword, setShowPassword] = React.useState(false);
@@ -17157,8 +17423,39 @@ const Input = factory((props, ref) => {
     }, [numberOfLines, multiline, currentLines]);
     // Merge type config with explicit props
     const mergedTextInputProps = React.useMemo(() => {
+        // Collect native passthrough props (only include if explicitly set)
+        const nativePassthrough = {};
+        if (autoCapitalize !== undefined)
+            nativePassthrough.autoCapitalize = autoCapitalize;
+        if (autoCorrect !== undefined)
+            nativePassthrough.autoCorrect = autoCorrect;
+        if (autoFocus !== undefined)
+            nativePassthrough.autoFocus = autoFocus;
+        if (returnKeyType !== undefined)
+            nativePassthrough.returnKeyType = returnKeyType;
+        if (blurOnSubmit !== undefined)
+            nativePassthrough.blurOnSubmit = blurOnSubmit;
+        if (selectTextOnFocus !== undefined)
+            nativePassthrough.selectTextOnFocus = selectTextOnFocus;
+        if (textContentType !== undefined)
+            nativePassthrough.textContentType = textContentType;
+        if (textAlign !== undefined)
+            nativePassthrough.textAlign = textAlign;
+        if (spellCheck !== undefined)
+            nativePassthrough.spellCheck = spellCheck;
+        if (inputMode !== undefined)
+            nativePassthrough.inputMode = inputMode;
+        if (enterKeyHint !== undefined)
+            nativePassthrough.enterKeyHint = enterKeyHint;
+        if (selectionColor !== undefined)
+            nativePassthrough.selectionColor = selectionColor;
+        if (showSoftInputOnFocus !== undefined)
+            nativePassthrough.showSoftInputOnFocus = showSoftInputOnFocus;
+        if (editable !== undefined)
+            nativePassthrough.editable = editable;
         const baseProps = {
             ...typeConfig,
+            ...nativePassthrough,
             ...textInputProps,
             // Override secureTextEntry for password visibility toggle
             secureTextEntry: actualSecureTextEntry,
@@ -17202,7 +17499,21 @@ const Input = factory((props, ref) => {
         effectiveNumberOfLines,
         maxLength,
         isPasswordType,
-        showPassword
+        showPassword,
+        autoCapitalize,
+        autoCorrect,
+        autoFocus,
+        returnKeyType,
+        blurOnSubmit,
+        selectTextOnFocus,
+        textContentType,
+        textAlign,
+        spellCheck,
+        inputMode,
+        enterKeyHint,
+        selectionColor,
+        showSoftInputOnFocus,
+        editable,
     ]);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TextInputBase, { ...baseProps, value: value, onChangeText: handleChangeText, inputRef: inputRef || ref, required: required, withAsterisk: finalWithAsterisk, endSection: finalRightSection, textInputProps: mergedTextInputProps, secureTextEntry: 
             // Ensure secureTextEntry is only passed when not controlled by password toggle
@@ -18602,7 +18913,9 @@ const NumberInput = factory((props, ref) => {
 NumberInput.displayName = 'NumberInput';
 
 const PinInput = factory((props, ref) => {
-    const { length = 4, value = '', onChange, mask = false, maskChar = '•', manageFocus = true, type = 'numeric', placeholder = '', allowPaste = true, oneTimeCode = false, spacing = 8, disabled = false, error, size = 'md', onComplete, textInputProps, label, helperText, style, keyboardFocusId, name, testID, ...spacingProps } = props;
+    const { length = 4, value = '', onChange, mask = false, maskChar = '•', manageFocus = true, type = 'numeric', placeholder = '', allowPaste = true, oneTimeCode = false, spacing = 8, disabled = false, error, size = 'md', onComplete, textInputProps, label, helperText, style, keyboardFocusId, name, testID, 
+    // Native TextInput passthrough props
+    autoCapitalize, autoCorrect, autoFocus, selectTextOnFocus: selectTextOnFocusProp, textContentType: textContentTypeProp, textAlign, spellCheck, selectionColor, showSoftInputOnFocus, ...spacingProps } = props;
     const theme = useTheme();
     const inputRefs = React.useRef([]);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
@@ -18801,15 +19114,15 @@ const PinInput = factory((props, ref) => {
                         inputRefs.current[index] = ref;
                     }, style: getInputStyle(index), value: mask && digit ? maskChar : digit, onChangeText: (text) => handleChangeText(text, index), onKeyPress: reactNative.Platform.OS === 'web' ? ({ nativeEvent }) => {
                         handleKeyPress(nativeEvent.key, index);
-                    } : undefined, onFocus: () => handleFocus(index), onBlur: handleBlur, maxLength: allowPaste ? undefined : 1, keyboardType: type === 'numeric' ? 'number-pad' : 'default', textContentType: oneTimeCode ? 'oneTimeCode' : undefined, autoComplete: oneTimeCode ? 'one-time-code' : 'off', selectTextOnFocus: true, editable: !disabled, placeholder: placeholder, placeholderTextColor: theme.text.muted, ...textInputProps }, index))) }), error && (jsxRuntime.jsx(Text, { style: {
+                    } : undefined, onFocus: () => handleFocus(index), onBlur: handleBlur, maxLength: allowPaste ? undefined : 1, keyboardType: type === 'numeric' ? 'number-pad' : 'default', textContentType: oneTimeCode ? 'oneTimeCode' : (textContentTypeProp !== null && textContentTypeProp !== void 0 ? textContentTypeProp : undefined), autoComplete: oneTimeCode ? 'one-time-code' : 'off', selectTextOnFocus: selectTextOnFocusProp !== null && selectTextOnFocusProp !== void 0 ? selectTextOnFocusProp : true, editable: !disabled, placeholder: placeholder, placeholderTextColor: theme.text.muted, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoFocus: autoFocus && index === 0, textAlign: textAlign, spellCheck: spellCheck, selectionColor: selectionColor, showSoftInputOnFocus: showSoftInputOnFocus, ...textInputProps }, index))) }), error ? (jsxRuntime.jsx(Text, { style: {
                     marginTop: 4,
                     fontSize: 12,
                     color: theme.colors.error[5]
-                }, children: error })), helperText && !error && (jsxRuntime.jsx(Text, { style: {
+                }, children: error })) : null, helperText && !error ? (jsxRuntime.jsx(Text, { style: {
                     marginTop: 4,
                     fontSize: 12,
                     color: theme.text.muted
-                }, children: helperText }))] }));
+                }, children: helperText })) : null] }));
 });
 PinInput.displayName = 'PinInput';
 
@@ -18980,7 +19293,7 @@ const Checkbox = React.forwardRef((props, ref) => {
         }
         return null;
     };
-    const labelContent = children || label;
+    const labelContent = children || label || undefined;
     // Determine layout direction based on label position
     const isVertical = labelPosition === 'top' || labelPosition === 'bottom';
     const checkboxElement = (jsxRuntime.jsx(reactNative.View, { style: styles.checkboxContainer, children: jsxRuntime.jsx(reactNative.Pressable, { ref: ref, style: [styles.checkbox, style], onPress: handlePress, disabled: disabled, testID: testID, hitSlop: 12, accessibilityRole: "checkbox", accessibilityState: {
@@ -24345,7 +24658,7 @@ const Select = factory((allProps, ref) => {
         close();
     }, [disabled, valueProp, onChange, onClear, close]);
     const fieldContent = selectedOption ? (jsxRuntime.jsx(reactNative.Text, { style: { color: disabled ? theme.text.disabled : theme.text.primary }, children: selectedOption.label })) : (jsxRuntime.jsx(reactNative.Text, { style: { color: disabled ? theme.text.disabled : theme.text.muted }, children: placeholder }));
-    return (jsxRuntime.jsxs(reactNative.View, { style: [defaultMinWidthStyle, fullWidthStyle, spacingStyles, layoutStyles], children: [jsxRuntime.jsx(FieldHeader, { label: label, description: description, disabled: disabled, error: !!error, size: size }), jsxRuntime.jsxs(reactNative.Pressable, { ref: setTriggerNode, onPress: toggle, accessibilityRole: "button", accessibilityLabel: label || placeholder, disabled: disabled, style: [
+    return (jsxRuntime.jsxs(reactNative.View, { style: [defaultMinWidthStyle, fullWidthStyle, spacingStyles, layoutStyles], children: [jsxRuntime.jsx(FieldHeader, { label: label, description: description, disabled: disabled, error: !!error, size: size }), jsxRuntime.jsxs(reactNative.Pressable, { ref: setTriggerNode, onPress: toggle, ...(reactNative.Platform.OS === 'web' ? { role: 'combobox' } : { accessibilityRole: 'button' }), accessibilityLabel: label || placeholder, disabled: disabled, style: [
                     inputStyles.inputContainer,
                     {
                         flexDirection: isRTL ? 'row-reverse' : 'row',
@@ -27661,7 +27974,7 @@ const TimePickerInput = ({ value, defaultValue, onChange, format = 24, withSecon
                 color: active ? 'white' : theme.colors.gray[8],
                 fontSize: 16,
             }, children: pad(n) }) }, n));
-    return (jsxRuntime.jsxs(reactNative.View, { ref: containerRef, style: [containerStyles, inputWidth != null ? { width: inputWidth } : null, style], children: [jsxRuntime.jsx(reactNative.Pressable, { onPress: handleOpen, disabled: disabled, accessibilityRole: "button", children: jsxRuntime.jsx(Input, { value: display, onChangeText: (text) => {
+    return (jsxRuntime.jsxs(reactNative.View, { ref: containerRef, style: [containerStyles, inputWidth != null ? { width: inputWidth } : null, style], children: [jsxRuntime.jsx(reactNative.Pressable, { onPress: handleOpen, disabled: disabled, ...(reactNative.Platform.OS === 'web' ? { role: 'group' } : { accessibilityRole: 'button' }), children: jsxRuntime.jsx(Input, { value: display, onChangeText: (text) => {
                         var _a, _b;
                         if (!allowInput)
                             return;
@@ -30817,7 +31130,10 @@ const StepperStep = React.forwardRef(({ children, label, description, icon, comp
 });
 // Completed Component
 const StepperCompleted = ({ children }) => {
-    return jsxRuntime.jsx(reactNative.View, { children: children });
+    const content = typeof children === 'string' || typeof children === 'number'
+        ? jsxRuntime.jsx(reactNative.Text, { children: children })
+        : children;
+    return jsxRuntime.jsx(reactNative.View, { children: content });
 };
 // Main Stepper Component
 const Stepper = React.forwardRef(({ active, onStepClick, orientation = 'horizontal', iconPosition = 'left', iconSize, size = 'md', color, completedIcon, allowNextStepsSelect = true, children, 'aria-label': ariaLabel, ...props }, ref) => {
@@ -30886,7 +31202,10 @@ const Stepper = React.forwardRef(({ active, onStepClick, orientation = 'horizont
             return completedContent;
         }
         if (currentStepContent) {
-            return jsxRuntime.jsx(reactNative.View, { style: getContentStyles(), children: currentStepContent });
+            const content = typeof currentStepContent === 'string' || typeof currentStepContent === 'number'
+                ? jsxRuntime.jsx(reactNative.Text, { children: currentStepContent })
+                : currentStepContent;
+            return jsxRuntime.jsx(reactNative.View, { style: getContentStyles(), children: content });
         }
         return null;
     };
@@ -32970,8 +33289,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
     const [editValue, setEditValue] = React.useState('');
     // Uncontrolled column filters state (used when onFilterChange not provided)
     const [internalFilters, setInternalFilters] = React.useState([]);
-    // Force re-render counter for portal components
-    const [forceUpdateCounter, setForceUpdateCounter] = React.useState(0);
     const [tempHeaderEdits, setTempHeaderEdits] = React.useState({});
     const [columnWidths, setColumnWidths] = React.useState(() => {
         const initial = {};
@@ -33199,7 +33516,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                                                 paddingBottom: DESIGN_TOKENS.spacing.sm,
                                             }, children: jsxRuntime.jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.xs, children: [jsxRuntime.jsx(Text, { variant: "small", weight: "semibold", children: "Search" }), jsxRuntime.jsx(Input, { placeholder: searchPlaceholder, value: searchValue, onChangeText: handleSearchChange, startSection: jsxRuntime.jsx(Icon, { name: "menu", size: 16 }), size: "sm" })] }) })), columns.some(c => c.filterable) && (jsxRuntime.jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: [jsxRuntime.jsxs(Flex, { direction: "row", justify: "space-between", align: "center", children: [jsxRuntime.jsx(Text, { variant: "small", weight: "semibold", children: "Filters" }), activeFilters.length > 0 && (jsxRuntime.jsx(Button, { variant: "ghost", size: "xs", onPress: () => {
                                                                 setInternalFilters([]);
-                                                                setForceUpdateCounter(c => c + 1);
                                                             }, children: "Clear all" }))] }), activeFilters.length > 0 && (jsxRuntime.jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.xs, style: { marginBottom: DESIGN_TOKENS.spacing.sm }, children: activeFilters.map((filter, idx) => {
                                                         const column = columns.find(c => c.key === filter.column);
                                                         return (jsxRuntime.jsxs(reactNative.View, { style: {
@@ -33212,7 +33528,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                                                                 gap: DESIGN_TOKENS.spacing.xs
                                                             }, children: [jsxRuntime.jsxs(Text, { variant: "small", style: { color: theme.colors.primary[7] }, children: [(column === null || column === void 0 ? void 0 : column.header) || filter.column, ": ", filter.operator, " \"", filter.value, "\""] }), jsxRuntime.jsx(reactNative.Pressable, { onPress: () => {
                                                                         setInternalFilters(filters => filters.filter((_, i) => i !== idx));
-                                                                        setForceUpdateCounter(c => c + 1);
                                                                     }, children: jsxRuntime.jsx(Icon, { name: "x", size: 12, color: theme.colors.primary[6] }) })] }, idx));
                                                     }) })), jsxRuntime.jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: columns.filter(c => c.filterable).map(column => {
                                                         const currentFilter = getColumnFilter(column.key);
@@ -33268,7 +33583,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                 return next;
             });
         }
-        setForceUpdateCounter(c => c + 1);
     }, [onFilterChange, filters]);
     const clearFilter = React.useCallback((columnKey) => {
         updateFilter(columnKey, undefined);
@@ -39711,7 +40025,7 @@ function VideoControls({ config, state, onPlay, onPause, onSeek, onVolumeChange,
     const displayTime = isScrubbing
         ? (scrubbingValue / 100) * state.duration
         : state.currentTime;
-    const styles = reactNative.StyleSheet.create({
+    const styles = React.useMemo(() => reactNative.StyleSheet.create({
         activeRate: {
             backgroundColor: theme.colors.primary[5],
         },
@@ -39792,7 +40106,7 @@ function VideoControls({ config, state, onPlay, onPause, onSeek, onVolumeChange,
             padding: 8,
             width: 120,
         },
-    });
+    }), [theme.colors.primary, isRTL]);
     return (jsxRuntime.jsxs(reactNative.View, { style: [styles.container, style], children: [config.progress && (jsxRuntime.jsx(reactNative.View, { style: styles.topRow, children: jsxRuntime.jsx(reactNative.View, { style: styles.progressContainer, children: jsxRuntime.jsx(Slider, { value: progressPercentage, min: 0, max: 100, step: 0.1, onChange: handleProgressChange, trackColor: "rgba(255, 255, 255, 0.3)", thumbColor: "white", activeTrackColor: theme.colors.primary[5] }) }) })), jsxRuntime.jsxs(reactNative.View, { style: styles.bottomRow, children: [jsxRuntime.jsxs(reactNative.View, { style: styles.leftControls, children: [(config.play || config.pause) && (jsxRuntime.jsx(reactNative.TouchableOpacity, { style: styles.playPauseButton, onPress: state.playing ? onPause : onPlay, accessible: true, accessibilityLabel: state.playing ? 'Pause' : 'Play', children: jsxRuntime.jsx(Icon, { name: state.playing ? 'pause' : 'play', size: 24, color: "white" }) })), config.time && (jsxRuntime.jsxs(Text, { style: styles.timeText, children: [formatTime(displayTime), " / ", formatTime(state.duration)] }))] }), jsxRuntime.jsxs(reactNative.View, { style: styles.rightControls, children: [config.playbackRate && (jsxRuntime.jsxs(reactNative.View, { style: { position: 'relative' }, children: [jsxRuntime.jsx(reactNative.TouchableOpacity, { style: styles.controlButton, onPress: () => setShowRateMenu(!showRateMenu), accessible: true, accessibilityLabel: "Playback speed", children: jsxRuntime.jsxs(Text, { style: styles.timeText, children: [state.playbackRate, "x"] }) }), showRateMenu && (jsxRuntime.jsx(reactNative.View, { style: styles.rateMenu, children: PLAYBACK_RATES.map(rate => (jsxRuntime.jsx(reactNative.TouchableOpacity, { style: [
                                                 styles.rateMenuItem,
                                                 state.playbackRate === rate && styles.activeRate
@@ -39817,13 +40131,10 @@ const EVENT_TYPE_COLORS = {
 function VideoTimeline({ timeline, duration, currentTime, onSeek, style }) {
     useTheme();
     const { isRTL } = useDirection();
-    if (duration === 0 || timeline.length === 0) {
-        return null;
-    }
     const handleMarkerPress = (event) => {
         onSeek(event.time);
     };
-    const styles = reactNative.StyleSheet.create({
+    const styles = React.useMemo(() => reactNative.StyleSheet.create({
         activeMarker: {
             borderRadius: 2,
             height: 8,
@@ -39858,7 +40169,10 @@ function VideoTimeline({ timeline, duration, currentTime, onSeek, style }) {
             fontSize: 10,
             textAlign: 'center',
         },
-    });
+    }), []);
+    if (duration === 0 || timeline.length === 0) {
+        return null;
+    }
     return (jsxRuntime.jsx(reactNative.View, { style: [styles.container, style], children: timeline.map((event, index) => {
             var _a;
             const position = (event.time / duration) * 100;
@@ -41005,6 +41319,7 @@ exports.BottomAppBar = BottomAppBar;
 exports.BrandButton = BrandButton;
 exports.BrandIcon = BrandIcon;
 exports.Breadcrumbs = Breadcrumbs;
+exports.BreakpointProvider = BreakpointProvider;
 exports.Button = Button;
 exports.COMPONENT_SIZES = COMPONENT_SIZES$1;
 exports.COMPONENT_SIZE_ORDER = COMPONENT_SIZE_ORDER;
@@ -41222,6 +41537,7 @@ exports.useAppShell = useAppShell;
 exports.useAppShellApi = useAppShellApi;
 exports.useAppShellLayout = useAppShellLayout;
 exports.useBreakpoint = useBreakpoint;
+exports.useClipboard = useClipboard;
 exports.useColorScheme = useColorScheme;
 exports.useDeviceInfo = useDeviceInfo;
 exports.useDialog = useDialog;
@@ -41241,19 +41557,25 @@ exports.useHotkeys = useHotkeys;
 exports.useI18n = useI18n;
 exports.useKeyboardManager = useKeyboardManager;
 exports.useKeyboardManagerOptional = useKeyboardManagerOptional;
+exports.useMaskedInput = useMaskedInput;
 exports.useNavbarHover = useNavbarHover;
 exports.useOptionalFormContext = useOptionalFormContext;
 exports.useOverlay = useOverlay;
 exports.useOverlayApi = useOverlayApi;
+exports.useOverlayMode = useOverlayMode;
 exports.useOverlays = useOverlays;
 exports.usePopoverPositioning = usePopoverPositioning;
+exports.useScrollSpy = useScrollSpy;
 exports.useSimpleDialog = useSimpleDialog;
 exports.useSound = useSound;
 exports.useSpotlightStore = useSpotlightStore;
 exports.useSpotlightStoreInstance = useSpotlightStoreInstance;
 exports.useSpotlightToggle = useSpotlightToggle;
 exports.useTheme = useTheme;
+exports.useThemeLayout = useThemeLayout;
 exports.useThemeMode = useThemeMode;
+exports.useThemeVisuals = useThemeVisuals;
+exports.useTitleRegistration = useTitleRegistration;
 exports.useTitleRegistry = useTitleRegistry;
 exports.useTitleRegistryOptional = useTitleRegistryOptional;
 exports.useToast = useToast;