@platform-blocks/ui 0.7.2 → 0.8.0

package/lib/esm/index.js

@@ -466,8 +466,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 = createContext(null);
+const ThemeVisualsContext = createContext(null);
+const ThemeLayoutContext = createContext(null);
 function PlatformBlocksThemeProvider({ theme, inherit = true, children }) {
     const parentTheme = useTheme();
     const mergedTheme = useMemo(() => {
@@ -487,11 +489,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 = 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 = 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 (jsx(PlatformBlocksThemeContext.Provider, { value: mergedTheme, children: children }));
+    return (jsx(PlatformBlocksThemeContext.Provider, { value: mergedTheme, children: jsx(ThemeVisualsContext.Provider, { value: visuals, children: 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 = useContext(PlatformBlocksThemeContext);
@@ -501,6 +537,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 = 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 = 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
@@ -1506,6 +1581,58 @@ function useKeyboardManagerOptional() {
     return 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 = createContext(null);
+function computeBreakpoint() {
+    let width;
+    if (Platform.OS === 'web') {
+        width = window.innerWidth;
+    }
+    else {
+        width = 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] = useState(computeBreakpoint);
+    useEffect(() => {
+        const update = () => {
+            setBreakpoint(computeBreakpoint());
+        };
+        if (Platform.OS === 'web') {
+            window.addEventListener('resize', update);
+            return () => window.removeEventListener('resize', update);
+        }
+        else {
+            const subscription = Dimensions.addEventListener('change', update);
+            return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+        }
+    }, []);
+    return React__default.createElement(BreakpointContext.Provider, { value: breakpoint }, children);
+}
+
 /**
  * Global Spotlight Hook for Direct State Access
  *
@@ -1866,26 +1993,33 @@ function useSpotlightStoreInstance() {
         query: '',
         selectedIndex: -1
     });
-    const store = {
+    const open = useCallback(() => setState(prev => ({ ...prev, opened: true })), []);
+    const close = useCallback(() => setState(prev => ({ ...prev, opened: false, query: '', selectedIndex: -1 })), []);
+    const toggle = useCallback(() => setState(prev => ({ ...prev, opened: !prev.opened })), []);
+    const setQuery = useCallback((query) => setState(prev => ({ ...prev, query })), []);
+    const setSelectedIndex = useCallback((selectedIndex) => setState(prev => ({ ...prev, selectedIndex })), []);
+    const navigateUp = useCallback(() => setState(prev => ({ ...prev, selectedIndex: prev.selectedIndex > 0 ? prev.selectedIndex - 1 : -1 })), []);
+    const navigateDown = useCallback((maxIndex = 0) => setState(prev => ({ ...prev, selectedIndex: prev.selectedIndex < maxIndex - 1 ? prev.selectedIndex + 1 : maxIndex - 1 })), []);
+    const store = 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 = useMemo(() => ({
+        state,
+        open,
+        close,
+        toggle,
+        setQuery,
+        setSelectedIndex,
+        navigateUp,
+        navigateDown,
+    }), [state, open, close, toggle, setQuery, setSelectedIndex, navigateUp, navigateDown]);
     return [store, actions];
 }
 const createSpotlightStore = useSpotlightStoreInstance;
@@ -3754,13 +3888,27 @@ function factory(ui, options = {}) {
 /**
  * Factory function for creating polymorphic PlatformBlocks components
  */
-function polymorphicFactory(ui) {
-    const Component = forwardRef(ui);
+function polymorphicFactory(ui, options = {}) {
+    const { displayName, memo: shouldMemo = true, arePropsEqual } = options;
+    const ForwardComponent = forwardRef(ui);
+    if (displayName) {
+        ForwardComponent.displayName = displayName;
+    }
+    const MemoizedComponent = shouldMemo
+        ? memo(ForwardComponent, arePropsEqual)
+        : ForwardComponent;
+    const Component = MemoizedComponent;
     Component.withProps = (fixedProps) => {
-        const Extended = forwardRef((props, ref) => (jsx(Component, { ...fixedProps, ...props, ref: ref })));
-        Extended.extend = Component.extend;
-        Extended.displayName = `WithProps(${Component.displayName})`;
-        return Extended;
+        const Extended = forwardRef((props, ref) => (jsx(ForwardComponent, { ...fixedProps, ...props, ref: ref })));
+        const baseName = ForwardComponent.displayName || ui.name || 'PolymorphicComponent';
+        Extended.displayName = `WithProps(${baseName})`;
+        const ExtendedComponent = shouldMemo
+            ? memo(Extended, arePropsEqual)
+            : Extended;
+        const Result = ExtendedComponent;
+        Result.extend = Component.extend;
+        Result.withProps = Component.withProps;
+        return Result;
     };
     Component.extend = ((input) => input);
     return Component;
@@ -6939,10 +7087,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 = StyleSheet.create({
+    const dynamicStyles = useMemo(() => StyleSheet.create({
         backdrop: {
             ...StyleSheet.absoluteFillObject,
             backgroundColor: variant === 'fullscreen' ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
@@ -7052,7 +7200,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 = useAnimatedStyle(() => {
         const opacity = backdropOpacity.value;
@@ -7820,12 +7970,13 @@ const TitleRegistryProvider = ({ children }) => {
     const clearTitles = useCallback(() => {
         setTitles([]);
     }, []);
-    return (jsx(TitleRegistryContext.Provider, { value: {
-            titles,
-            registerTitle,
-            unregisterTitle,
-            clearTitles
-        }, children: children }));
+    const value = useMemo(() => ({
+        titles,
+        registerTitle,
+        unregisterTitle,
+        clearTitles
+    }), [titles, registerTitle, unregisterTitle, clearTitles]);
+    return (jsx(TitleRegistryContext.Provider, { value: value, children: children }));
 };
 
 const DEFAULT_SELECTOR = 'h1, h2, h3, h4, h5, h6';
@@ -8152,14 +8303,97 @@ function createMask(definition) {
     })
 });
 
+function useMaskedInput(options) {
+    const { mask: maskDefinition, initialValue = '', onValueChange, onUnmaskedValueChange } = options;
+    // Create mask function if needed
+    const maskRef = useRef(typeof maskDefinition === 'function' || 'applyMask' in maskDefinition
+        ? maskDefinition
+        : createMask(maskDefinition));
+    const mask = maskRef.current;
+    // Initialize state
+    const initialResult = mask.applyMask(initialValue);
+    const [state, setState] = useState({
+        value: initialResult.value,
+        unmaskedValue: initialResult.unmaskedValue,
+        isComplete: initialResult.isComplete,
+        cursorPosition: initialResult.cursorPosition,
+        previousValue: initialResult.value
+    });
+    const selectionRef = useRef({ start: 0, end: 0 });
+    const updateState = 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 = useRef(state.unmaskedValue);
+    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 = useCallback((text) => {
+        const result = mask.processInput(text, state.previousValue, selectionRef.current.start);
+        updateState(result);
+    }, [mask, state.previousValue, updateState]);
+    const handleSelectionChange = useCallback((selection) => {
+        selectionRef.current = selection;
+    }, []);
+    const reset = useCallback(() => {
+        const result = mask.applyMask(initialValue);
+        updateState(result);
+    }, [mask, initialValue, updateState]);
+    const setValue = useCallback((value) => {
+        const result = mask.applyMask(value);
+        updateState(result);
+    }, [mask, updateState]);
+    const setUnmaskedValue = 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 = 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;
     useEffect(() => {
-        if (!registry || !autoRegister || !text)
+        if (!registerTitle || !unregisterTitle || !autoRegister || !text)
             return;
         const titleItem = {
             id,
@@ -8167,11 +8401,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 };
 };
 
@@ -9440,7 +9674,7 @@ shortcut = ['cmd+k', 'ctrl+k'], searchProps = {}, store, variant = 'modal', widt
     // Reset selection when query changes
     useEffect(() => {
         currentStore.setSelectedIndex(-1);
-    }, [query, currentStore]);
+    }, [query, currentStore.setSelectedIndex]);
     const handleNavigateUp = () => {
         if (!flatActions.length)
             return;
@@ -10007,7 +10241,7 @@ function PlatformBlocksProvider({ children, theme, inherit = true, withCSSVariab
     if (directionConfig) {
         enhancedTree = (jsx(DirectionProvider, { ...directionConfig, children: enhancedTree }));
     }
-    return (jsx(I18nBoundary, { locale: locale, fallbackLocale: fallbackLocale, resources: i18nStore, children: enhancedTree }));
+    return (jsx(I18nBoundary, { locale: locale, fallbackLocale: fallbackLocale, resources: i18nStore, children: jsx(BreakpointProvider, { children: enhancedTree }) }));
 }
 PlatformBlocksProvider.displayName = 'PlatformBlocksProvider';
 
@@ -10742,7 +10976,9 @@ function resolveResponsiveProp(value, width, breakpoints = DEFAULT_BREAKPOINTS)
 const DEFAULT_EXTRA_SCROLL_HEIGHT = 24;
 const KeyboardAwareLayout = 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();
@@ -10780,7 +11016,7 @@ const KeyboardAwareLayout = forwardRef((props, ref) => {
         }
         return stylesArray;
     }, [spacingStyles, style]);
-    return (jsx(KeyboardAvoidingView, { ref: ref, behavior: resolvedBehavior, keyboardVerticalOffset: keyboardVerticalOffset, enabled: enabled, style: containerStyles, ...otherProps, children: scrollable ? (jsx(ScrollView, { ref: scrollRef, contentContainerStyle: contentStyles, keyboardShouldPersistTaps: keyboardShouldPersistTaps, showsVerticalScrollIndicator: false, overScrollMode: "never", ...restScrollViewProps, children: children })) : (jsx(View, { style: contentStyles, children: children })) }));
+    return (jsx(KeyboardAvoidingView, { ref: ref, behavior: resolvedBehavior, keyboardVerticalOffset: keyboardVerticalOffset, enabled: enabled, style: containerStyles, ...otherProps, children: scrollable ? (jsx(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 })) : (jsx(View, { style: contentStyles, children: children })) }));
 });
 KeyboardAwareLayout.displayName = 'KeyboardAwareLayout';
 const styles$d = StyleSheet.create({
@@ -10833,18 +11069,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__default.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 (jsx(View, { children: renderItem(item, index) }));
@@ -13758,12 +14017,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
+    useEffect(() => {
+        if (!hasMeasuredRef.current || contentHeight === 0)
+            return;
+        heightAnimation.setValue(isCollapsed ? contentHeight : Math.min(contentHeight, collapsedHeight));
+    }, [contentHeight, isCollapsed, collapsedHeight, heightAnimation]);
     return (jsx(Animated$1.View, { style: [
             {
                 overflow: 'hidden',
@@ -14546,7 +14810,7 @@ const CodeBlock = (props) => {
 
 const createDefaultComponents = (theme, handleLinkPress) => ({
     heading: ({ level, children }) => (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 }) => (jsx(Text, { variant: "p", style: { marginBottom: 12 }, children: children })),
+    paragraph: ({ children }) => (jsx(Text, { variant: "p", as: "div", style: { marginBottom: 12 }, children: children })),
     strong: ({ children }) => (jsx(Text, { variant: "strong", children: children })),
     em: ({ children }) => (jsx(Text, { variant: "em", children: children })),
     codeInline: ({ children }) => (jsx(Text, { variant: "code", style: {
@@ -17038,7 +17302,7 @@ const TextInputBase = factory((props, ref) => {
                                             height: styles.input.fontSize || 16,
                                             backgroundColor: textColor,
                                             marginLeft: 1,
-                                        } }))] }))] }), (showClearButton || endSection) && (jsxs(View, { style: styles.endSection, children: [showClearButton && (jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsx(Text$1, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsx(Text$1, { style: styles.helperText, children: helperText }))] }));
+                                        } }))] }))] }), (showClearButton || endSection) && (jsxs(View, { style: styles.endSection, children: [showClearButton && (jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error ? (jsx(Text$1, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })) : null, helperText && !error ? (jsx(Text$1, { style: styles.helperText, children: helperText })) : null] }));
 });
 
 const getInputTypeConfig = (type) => {
@@ -17090,7 +17354,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] = useState(false);
@@ -17137,8 +17403,39 @@ const Input = factory((props, ref) => {
     }, [numberOfLines, multiline, currentLines]);
     // Merge type config with explicit props
     const mergedTextInputProps = 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,
@@ -17182,7 +17479,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 (jsx(Fragment, { children: 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
@@ -18582,7 +18893,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 = useRef([]);
     const [focusedIndex, setFocusedIndex] = useState(-1);
@@ -18781,15 +19094,15 @@ const PinInput = factory((props, ref) => {
                         inputRefs.current[index] = ref;
                     }, style: getInputStyle(index), value: mask && digit ? maskChar : digit, onChangeText: (text) => handleChangeText(text, index), onKeyPress: 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 && (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 ? (jsx(Text, { style: {
                     marginTop: 4,
                     fontSize: 12,
                     color: theme.colors.error[5]
-                }, children: error })), helperText && !error && (jsx(Text, { style: {
+                }, children: error })) : null, helperText && !error ? (jsx(Text, { style: {
                     marginTop: 4,
                     fontSize: 12,
                     color: theme.text.muted
-                }, children: helperText }))] }));
+                }, children: helperText })) : null] }));
 });
 PinInput.displayName = 'PinInput';
 
@@ -18960,7 +19273,7 @@ const Checkbox = React__default.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 = (jsx(View, { style: styles.checkboxContainer, children: jsx(Pressable, { ref: ref, style: [styles.checkbox, style], onPress: handlePress, disabled: disabled, testID: testID, hitSlop: 12, accessibilityRole: "checkbox", accessibilityState: {
@@ -24325,7 +24638,7 @@ const Select = factory((allProps, ref) => {
         close();
     }, [disabled, valueProp, onChange, onClear, close]);
     const fieldContent = selectedOption ? (jsx(Text$1, { style: { color: disabled ? theme.text.disabled : theme.text.primary }, children: selectedOption.label })) : (jsx(Text$1, { style: { color: disabled ? theme.text.disabled : theme.text.muted }, children: placeholder }));
-    return (jsxs(View, { style: [defaultMinWidthStyle, fullWidthStyle, spacingStyles, layoutStyles], children: [jsx(FieldHeader, { label: label, description: description, disabled: disabled, error: !!error, size: size }), jsxs(Pressable, { ref: setTriggerNode, onPress: toggle, accessibilityRole: "button", accessibilityLabel: label || placeholder, disabled: disabled, style: [
+    return (jsxs(View, { style: [defaultMinWidthStyle, fullWidthStyle, spacingStyles, layoutStyles], children: [jsx(FieldHeader, { label: label, description: description, disabled: disabled, error: !!error, size: size }), jsxs(Pressable, { ref: setTriggerNode, onPress: toggle, ...(Platform.OS === 'web' ? { role: 'combobox' } : { accessibilityRole: 'button' }), accessibilityLabel: label || placeholder, disabled: disabled, style: [
                     inputStyles.inputContainer,
                     {
                         flexDirection: isRTL ? 'row-reverse' : 'row',
@@ -27641,7 +27954,7 @@ const TimePickerInput = ({ value, defaultValue, onChange, format = 24, withSecon
                 color: active ? 'white' : theme.colors.gray[8],
                 fontSize: 16,
             }, children: pad(n) }) }, n));
-    return (jsxs(View, { ref: containerRef, style: [containerStyles, inputWidth != null ? { width: inputWidth } : null, style], children: [jsx(Pressable, { onPress: handleOpen, disabled: disabled, accessibilityRole: "button", children: jsx(Input, { value: display, onChangeText: (text) => {
+    return (jsxs(View, { ref: containerRef, style: [containerStyles, inputWidth != null ? { width: inputWidth } : null, style], children: [jsx(Pressable, { onPress: handleOpen, disabled: disabled, ...(Platform.OS === 'web' ? { role: 'group' } : { accessibilityRole: 'button' }), children: jsx(Input, { value: display, onChangeText: (text) => {
                         var _a, _b;
                         if (!allowInput)
                             return;
@@ -30797,7 +31110,10 @@ const StepperStep = forwardRef(({ children, label, description, icon, completedI
 });
 // Completed Component
 const StepperCompleted = ({ children }) => {
-    return jsx(View, { children: children });
+    const content = typeof children === 'string' || typeof children === 'number'
+        ? jsx(Text$1, { children: children })
+        : children;
+    return jsx(View, { children: content });
 };
 // Main Stepper Component
 const Stepper = forwardRef(({ active, onStepClick, orientation = 'horizontal', iconPosition = 'left', iconSize, size = 'md', color, completedIcon, allowNextStepsSelect = true, children, 'aria-label': ariaLabel, ...props }, ref) => {
@@ -30866,7 +31182,10 @@ const Stepper = forwardRef(({ active, onStepClick, orientation = 'horizontal', i
             return completedContent;
         }
         if (currentStepContent) {
-            return jsx(View, { style: getContentStyles(), children: currentStepContent });
+            const content = typeof currentStepContent === 'string' || typeof currentStepContent === 'number'
+                ? jsx(Text$1, { children: currentStepContent })
+                : currentStepContent;
+            return jsx(View, { style: getContentStyles(), children: content });
         }
         return null;
     };
@@ -32950,8 +33269,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
     const [editValue, setEditValue] = useState('');
     // Uncontrolled column filters state (used when onFilterChange not provided)
     const [internalFilters, setInternalFilters] = useState([]);
-    // Force re-render counter for portal components
-    const [forceUpdateCounter, setForceUpdateCounter] = useState(0);
     const [tempHeaderEdits, setTempHeaderEdits] = useState({});
     const [columnWidths, setColumnWidths] = useState(() => {
         const initial = {};
@@ -33179,7 +33496,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                                                 paddingBottom: DESIGN_TOKENS.spacing.sm,
                                             }, children: jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.xs, children: [jsx(Text, { variant: "small", weight: "semibold", children: "Search" }), jsx(Input, { placeholder: searchPlaceholder, value: searchValue, onChangeText: handleSearchChange, startSection: jsx(Icon, { name: "menu", size: 16 }), size: "sm" })] }) })), columns.some(c => c.filterable) && (jsxs(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", children: [jsx(Text, { variant: "small", weight: "semibold", children: "Filters" }), activeFilters.length > 0 && (jsx(Button, { variant: "ghost", size: "xs", onPress: () => {
                                                                 setInternalFilters([]);
-                                                                setForceUpdateCounter(c => c + 1);
                                                             }, children: "Clear all" }))] }), activeFilters.length > 0 && (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 (jsxs(View, { style: {
@@ -33192,7 +33508,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                                                                 gap: DESIGN_TOKENS.spacing.xs
                                                             }, children: [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, "\""] }), jsx(Pressable, { onPress: () => {
                                                                         setInternalFilters(filters => filters.filter((_, i) => i !== idx));
-                                                                        setForceUpdateCounter(c => c + 1);
                                                                     }, children: jsx(Icon, { name: "x", size: 12, color: theme.colors.primary[6] }) })] }, idx));
                                                     }) })), jsx(Flex, { direction: "column", gap: DESIGN_TOKENS.spacing.sm, children: columns.filter(c => c.filterable).map(column => {
                                                         const currentFilter = getColumnFilter(column.key);
@@ -33248,7 +33563,6 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                 return next;
             });
         }
-        setForceUpdateCounter(c => c + 1);
     }, [onFilterChange, filters]);
     const clearFilter = useCallback((columnKey) => {
         updateFilter(columnKey, undefined);
@@ -39691,7 +40005,7 @@ function VideoControls({ config, state, onPlay, onPause, onSeek, onVolumeChange,
     const displayTime = isScrubbing
         ? (scrubbingValue / 100) * state.duration
         : state.currentTime;
-    const styles = StyleSheet.create({
+    const styles = useMemo(() => StyleSheet.create({
         activeRate: {
             backgroundColor: theme.colors.primary[5],
         },
@@ -39772,7 +40086,7 @@ function VideoControls({ config, state, onPlay, onPause, onSeek, onVolumeChange,
             padding: 8,
             width: 120,
         },
-    });
+    }), [theme.colors.primary, isRTL]);
     return (jsxs(View, { style: [styles.container, style], children: [config.progress && (jsx(View, { style: styles.topRow, children: jsx(View, { style: styles.progressContainer, children: 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] }) }) })), jsxs(View, { style: styles.bottomRow, children: [jsxs(View, { style: styles.leftControls, children: [(config.play || config.pause) && (jsx(TouchableOpacity, { style: styles.playPauseButton, onPress: state.playing ? onPause : onPlay, accessible: true, accessibilityLabel: state.playing ? 'Pause' : 'Play', children: jsx(Icon, { name: state.playing ? 'pause' : 'play', size: 24, color: "white" }) })), config.time && (jsxs(Text, { style: styles.timeText, children: [formatTime(displayTime), " / ", formatTime(state.duration)] }))] }), jsxs(View, { style: styles.rightControls, children: [config.playbackRate && (jsxs(View, { style: { position: 'relative' }, children: [jsx(TouchableOpacity, { style: styles.controlButton, onPress: () => setShowRateMenu(!showRateMenu), accessible: true, accessibilityLabel: "Playback speed", children: jsxs(Text, { style: styles.timeText, children: [state.playbackRate, "x"] }) }), showRateMenu && (jsx(View, { style: styles.rateMenu, children: PLAYBACK_RATES.map(rate => (jsx(TouchableOpacity, { style: [
                                                 styles.rateMenuItem,
                                                 state.playbackRate === rate && styles.activeRate
@@ -39797,13 +40111,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 = StyleSheet.create({
+    const styles = useMemo(() => StyleSheet.create({
         activeMarker: {
             borderRadius: 2,
             height: 8,
@@ -39838,7 +40149,10 @@ function VideoTimeline({ timeline, duration, currentTime, onSeek, style }) {
             fontSize: 10,
             textAlign: 'center',
         },
-    });
+    }), []);
+    if (duration === 0 || timeline.length === 0) {
+        return null;
+    }
     return (jsx(View, { style: [styles.container, style], children: timeline.map((event, index) => {
             var _a;
             const position = (event.time / duration) * 100;
@@ -40950,5 +41264,5 @@ function withPressAnimation(Component, animationProps) {
  */
 const AnimatedPressable = PressAnimation;
 
-export { AccessibilityProvider, Accordion, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, COMPONENT_SIZE_ORDER, Calendar, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, Collapse, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_COMPONENT_SIZE, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, Ring, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePickerInput as TimePicker, TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPositionEnhanced, clampComponentSize, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAppLayout, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, onDialogsRequested, onSpotlightRequested, onToastsRequested, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDeviceInfo, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withDisclaimer, withPressAnimation };
+export { AccessibilityProvider, Accordion, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, BreakpointProvider, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, COMPONENT_SIZE_ORDER, Calendar, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, Collapse, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_COMPONENT_SIZE, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, Ring, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePickerInput as TimePicker, TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPositionEnhanced, clampComponentSize, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAppLayout, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, onDialogsRequested, onSpotlightRequested, onToastsRequested, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useClipboard, useColorScheme, useDeviceInfo, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useMaskedInput, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlayMode, useOverlays, usePopoverPositioning, useScrollSpy, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeLayout, useThemeMode, useThemeVisuals, useTitleRegistration, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withDisclaimer, withPressAnimation };
 //# sourceMappingURL=index.js.map