@platform-blocks/ui 0.4.0 → 0.6.0

package/lib/esm/index.js

@@ -1164,25 +1164,50 @@ function OverlayRenderer({ style } = {}) {
         }) }));
 }
 function OverlayContent({ overlay, isTopmost, onBackdropPress }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     useTheme();
     const DEBUG = overlay.debug === true;
     if (DEBUG) {
         console.log('Rendering overlay content:');
         console.log('- anchor:', overlay.anchor);
+        console.log('- placement:', overlay.placement);
         console.log('- strategy:', overlay.strategy);
         console.log('- zIndex:', overlay.zIndex);
     }
+    // Check if this is a top-positioned overlay
+    const isTopPlacement = (_a = overlay.placement) === null || _a === void 0 ? void 0 : _a.startsWith('top');
+    // For top placements, we need to anchor from the bottom of the overlay
+    // The anchor.y represents where the bottom of the overlay should be (top of the trigger minus offset)
+    // So we use the estimated height to calculate where the top of the overlay would be
     const overlayStyle = {
         // Use fixed positioning on web for viewport-anchored overlays
         position: (Platform.OS === 'web' && overlay.strategy === 'fixed') ? 'fixed' : 'absolute',
-        top: ((_a = overlay.anchor) === null || _a === void 0 ? void 0 : _a.y) || 0,
         left: ((_b = overlay.anchor) === null || _b === void 0 ? void 0 : _b.x) || 0,
         zIndex: overlay.zIndex,
         width: overlay.width || (((_c = overlay.anchor) === null || _c === void 0 ? void 0 : _c.width) ? overlay.anchor.width : undefined),
         maxWidth: overlay.maxWidth,
         maxHeight: overlay.maxHeight,
     };
+    if (isTopPlacement && Platform.OS === 'web') {
+        // For top placements, position from the bottom of the overlay
+        // anchor.y is where the top of the overlay should be, but we want to anchor from the bottom
+        // so the overlay can grow upward naturally
+        // The "bottom" of the anchor point is: viewport.height - (anchor.y + estimatedHeight)
+        // But since we don't know actual height, use bottom anchoring relative to the trigger
+        // Actually, anchor.y already accounts for the estimated height, so:
+        // anchor.y = trigger.y - estimatedHeight - offset
+        // We want the overlay's bottom edge to be at: trigger.y - offset
+        // Which means: bottom = viewport.height - (trigger.y - offset) = viewport.height - anchor.y - estimatedHeight
+        // Simpler: just set top and let it render, but the issue is the estimate is wrong
+        // Better approach: use the anchor.y + anchor.height as the "bottom anchor point"
+        // This is where the bottom of the overlay should be
+        const bottomAnchorPoint = (((_d = overlay.anchor) === null || _d === void 0 ? void 0 : _d.y) || 0) + (((_e = overlay.anchor) === null || _e === void 0 ? void 0 : _e.height) || 0);
+        overlayStyle.top = undefined;
+        overlayStyle.bottom = `calc(100vh - ${bottomAnchorPoint}px)`;
+    }
+    else {
+        overlayStyle.top = ((_f = overlay.anchor) === null || _f === void 0 ? void 0 : _f.y) || 0;
+    }
     if (DEBUG) {
         console.log('- overlayStyle:', overlayStyle);
     }
@@ -6153,31 +6178,29 @@ const Button = (allProps) => {
     const { getDuration } = useReducedMotion$1();
     const { announce } = useAnnouncer();
     const { ref: focusRef} = useFocus(`button-${title || 'button'}`);
+    // Track measured width for loading state preservation
+    const [measuredWidth, setMeasuredWidth] = useState(null);
+    const wasLoadingRef = useRef(loading);
+    // When loading starts, we want to preserve the current measured width
+    // When loading ends, clear the preserved width so it can resize naturally
+    useEffect(() => {
+        if (!loading && wasLoadingRef.current) {
+            // Loading just ended, allow width to be recalculated
+            setMeasuredWidth(null);
+        }
+        wasLoadingRef.current = loading;
+    }, [loading]);
+    const handleLayout = useCallback((event) => {
+        // Only update measured width when not loading, so we capture the natural content width
+        if (!loading) {
+            const { width } = event.nativeEvent.layout;
+            setMeasuredWidth(width);
+        }
+        // Call user's onLayout if provided
+        onLayout === null || onLayout === void 0 ? void 0 : onLayout(event);
+    }, [loading, onLayout]);
     // Determine button content - children takes precedence over title
     const buttonContent = children !== null && children !== void 0 ? children : title;
-    // Calculate minimum width for loading state based on content and size
-    const calculateMinWidth = () => {
-        if (!buttonContent || typeof buttonContent !== 'string')
-            return undefined;
-        // Base character width estimates based on size
-        const charWidthBySize = {
-            xs: 6,
-            sm: 7,
-            md: 8,
-            lg: 9,
-            xl: 10,
-            '2xl': 11,
-            '3xl': 12
-        };
-        const sizeKey = typeof size === 'string' ? size : 'md';
-        const charWidth = charWidthBySize[sizeKey] || 8;
-        const horizontalPadding = getSpacing(size) * 2; // Left + right padding
-        // Estimate content width: character count * average char width + padding
-        const contentWidth = buttonContent.length * charWidth + horizontalPadding;
-        // Add space for loader and gap when loading
-        const loaderWidth = getFontSize$1(size) + getSpacing(size) / 2; // Loader + margin
-        return Math.max(contentWidth, contentWidth + loaderWidth);
-    };
     // Determine what content to show based on loading state
     const displayContent = loading
         ? (loadingTitle !== undefined ? loadingTitle : '')
@@ -6216,12 +6239,12 @@ const Button = (allProps) => {
     const shadowStyles = getShadowStyles({ shadow: effectiveShadow }, theme, 'button');
     const spacingStyles = getSpacingStyles(spacingProps);
     const baseLayoutStyles = getLayoutStyles(layoutProps);
-    // Apply minimum width when loading to prevent size changes
-    const calculatedMinWidth = calculateMinWidth();
+    // Apply measured width when loading to prevent size changes
+    // Use the actual measured width instead of character-based estimates
     const layoutStyles = {
         ...baseLayoutStyles,
-        ...(loading && calculatedMinWidth && !layoutProps.width && !layoutProps.w && !layoutProps.fullWidth
-            ? { minWidth: calculatedMinWidth }
+        ...(loading && measuredWidth && !layoutProps.width && !layoutProps.w && !layoutProps.fullWidth
+            ? { width: measuredWidth, minWidth: measuredWidth }
             : {})
     };
     const iconSpacing = getSpacing(size) / 2;
@@ -6414,7 +6437,7 @@ const Button = (allProps) => {
                         ...(Platform.OS !== 'web' ? { transform: [{ translateY: 1 }] } : {})
                     } : null,
                     style,
-                ], onPress: handleInternalPress, onLayout: onLayout, onPressIn: handlePressIn, onPressOut: handlePressOut, onHoverIn: onHoverIn, onHoverOut: onHoverOut, onLongPress: onLongPress, disabled: isInteractionDisabled, children: [variant === 'gradient' && hasLinearGradient$4 && (jsx(OptionalLinearGradient$6, { colors: resolvedCustomColor
+                ], onPress: handleInternalPress, onLayout: handleLayout, onPressIn: handlePressIn, onPressOut: handlePressOut, onHoverIn: onHoverIn, onHoverOut: onHoverOut, onLongPress: onLongPress, disabled: isInteractionDisabled, children: [variant === 'gradient' && hasLinearGradient$4 && (jsx(OptionalLinearGradient$6, { colors: resolvedCustomColor
                             ? [resolvedCustomColor, theme.colors.primary[7]]
                             : [theme.colors.primary[5], theme.colors.primary[7]], style: { position: 'absolute', zIndex: -1, top: 0, left: 0, right: 0, bottom: 0, borderRadius: radiusStyles.borderRadius }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 } })), loading ? (jsxs(Fragment, { children: [jsx(Loader, { size: size, color: getLoaderColor(), style: !isIconButton ? { marginRight: iconSpacing } : undefined }), !isIconButton && renderButtonContent(displayContent)] })) : isIconButton ? (
                     // Icon-only button
@@ -9732,593 +9755,6 @@ function UniversalCSS() {
     return null;
 }
 
-/**
- * Core Ability class for managing permissions
- */
-class AbilityCore {
-    constructor(rules = []) {
-        this.rules = [];
-        this.cache = new Map();
-        this.rules = [...rules];
-    }
-    /**
-     * Check if action is allowed on subject
-     */
-    can(action, subject, field) {
-        return this.check(action, subject, field).allowed;
-    }
-    /**
-     * Check if action is forbidden on subject
-     */
-    cannot(action, subject, field) {
-        return !this.can(action, subject, field);
-    }
-    /**
-     * Get detailed permission check result
-     */
-    check(action, subject, field) {
-        const cacheKey = this.getCacheKey(action, subject, field);
-        if (this.cache.has(cacheKey)) {
-            return this.cache.get(cacheKey);
-        }
-        const result = this.performCheck(action, subject, field);
-        this.cache.set(cacheKey, result);
-        return result;
-    }
-    /**
-     * Update ability rules and clear cache
-     */
-    update(rules) {
-        this.rules = [...rules];
-        this.cache.clear();
-    }
-    /**
-     * Get all current rules
-     */
-    getRules() {
-        return [...this.rules];
-    }
-    /**
-     * Clear all rules and cache
-     */
-    clear() {
-        this.rules = [];
-        this.cache.clear();
-    }
-    /**
-     * Perform the actual permission check
-     */
-    performCheck(action, subject, field) {
-        // Start with denied by default
-        let result = {
-            allowed: false,
-            reason: 'No matching permission rule found'
-        };
-        // Check rules in order (later rules can override earlier ones)
-        for (const rule of this.rules) {
-            if (this.ruleMatches(rule, action, subject, field)) {
-                result = {
-                    allowed: !rule.inverted,
-                    reason: rule.reason || (rule.inverted ? 'Access denied by rule' : 'Access granted by rule'),
-                    rule
-                };
-            }
-        }
-        return result;
-    }
-    /**
-     * Check if a rule matches the current permission check
-     */
-    ruleMatches(rule, action, subject, field) {
-        // Check action match
-        const actions = Array.isArray(rule.action) ? rule.action : [rule.action];
-        if (!actions.includes(action) && !actions.includes('*')) {
-            return false;
-        }
-        // Check subject match
-        const subjects = Array.isArray(rule.subject) ? rule.subject : [rule.subject];
-        if (!this.subjectMatches(subjects, subject)) {
-            return false;
-        }
-        // Check field match (if specified)
-        if (field && rule.fields && !rule.fields.includes(field)) {
-            return false;
-        }
-        // Check conditions (if subject is an object)
-        if (rule.conditions && typeof subject === 'object' && subject !== null) {
-            return this.conditionsMatch(rule.conditions, subject);
-        }
-        return true;
-    }
-    /**
-     * Check if subject matches any of the rule subjects
-     */
-    subjectMatches(ruleSubjects, checkSubject) {
-        for (const ruleSubject of ruleSubjects) {
-            if (ruleSubject === '*')
-                return true;
-            if (ruleSubject === checkSubject)
-                return true;
-            // Handle class/constructor matching
-            if (typeof ruleSubject === 'function' && typeof checkSubject === 'object') {
-                if (checkSubject instanceof ruleSubject)
-                    return true;
-                if (checkSubject.constructor === ruleSubject)
-                    return true;
-            }
-            // Handle string matching for object types
-            if (typeof ruleSubject === 'string' && typeof checkSubject === 'object') {
-                if (checkSubject.__type === ruleSubject)
-                    return true;
-                if (checkSubject.type === ruleSubject)
-                    return true;
-                if (checkSubject.constructor.name === ruleSubject)
-                    return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Check if conditions match the subject object
-     */
-    conditionsMatch(conditions, subject) {
-        for (const [key, expectedValue] of Object.entries(conditions)) {
-            const actualValue = subject[key];
-            if (!this.valuesMatch(actualValue, expectedValue)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    /**
-     * Check if two values match (handles various comparison types)
-     */
-    valuesMatch(actual, expected) {
-        // Exact match
-        if (actual === expected)
-            return true;
-        // Array contains check
-        if (Array.isArray(expected) && expected.includes(actual))
-            return true;
-        if (Array.isArray(actual) && actual.includes(expected))
-            return true;
-        // Function/predicate check
-        if (typeof expected === 'function') {
-            return expected(actual);
-        }
-        // Regex match for strings
-        if (expected instanceof RegExp && typeof actual === 'string') {
-            return expected.test(actual);
-        }
-        // Object comparison (shallow)
-        if (typeof expected === 'object' && typeof actual === 'object' && expected !== null && actual !== null) {
-            return Object.keys(expected).every(key => this.valuesMatch(actual[key], expected[key]));
-        }
-        return false;
-    }
-    /**
-     * Generate cache key for permission check
-     */
-    getCacheKey(action, subject, field) {
-        const subjectKey = typeof subject === 'object'
-            ? JSON.stringify(subject)
-            : String(subject);
-        return `${action}:${subjectKey}:${field || ''}`;
-    }
-}
-/**
- * Create a new Ability instance
- */
-function createAbility(rules = []) {
-    return new AbilityCore(rules);
-}
-
-/**
- * Permission Context
- */
-const PermissionContext = createContext(null);
-/**
- * Permission Provider Component
- */
-const PermissionProvider = ({ rules = [], user, children, dev = {} }) => {
-    const [ability] = useState(() => createAbility(rules));
-    const [currentUser, setCurrentUser] = useState(user);
-    const updateAbility = useCallback((newRules) => {
-        ability.update(newRules);
-    }, [ability]);
-    const can = useCallback((action, subject, field) => {
-        const result = ability.can(action, subject, field);
-        if (dev.logChecks) {
-            console.log(`[Permissions] Can ${action} ${subject}${field ? `.${field}` : ''}:`, result);
-        }
-        return result;
-    }, [ability, dev.logChecks]);
-    const cannot = useCallback((action, subject, field) => {
-        const result = ability.cannot(action, subject, field);
-        if (dev.logChecks) {
-            console.log(`[Permissions] Cannot ${action} ${subject}${field ? `.${field}` : ''}:`, result);
-        }
-        return result;
-    }, [ability, dev.logChecks]);
-    const setUser = useCallback((newUser) => {
-        setCurrentUser(newUser);
-    }, []);
-    const contextValue = useMemo(() => ({
-        ability,
-        updateAbility,
-        can,
-        cannot,
-        user: currentUser,
-        setUser
-    }), [ability, updateAbility, can, cannot, currentUser, setUser]);
-    return React__default.createElement(PermissionContext.Provider, { value: contextValue }, children);
-};
-/**
- * Hook to access permission context
- */
-const usePermissions = (options = {}) => {
-    const context = useContext(PermissionContext);
-    if (!context) {
-        if (options.required) {
-            throw new Error('usePermissions must be used within a PermissionProvider');
-        }
-        if (options.debug) {
-            console.warn('[Permissions] usePermissions called outside of PermissionProvider');
-        }
-        // Return a fallback context that allows everything
-        return {
-            ability: createAbility([{ action: '*', subject: '*' }]),
-            updateAbility: () => { },
-            can: () => true,
-            cannot: () => false,
-            user: null,
-            setUser: () => { }
-        };
-    }
-    return context;
-};
-/**
- * Hook to get the current ability instance
- */
-const useAbility = () => {
-    const { ability } = usePermissions();
-    return ability;
-};
-
-/**
- * Can Component - Renders children if permission is granted
- */
-const Can = ({ I: action, a: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(View, { style, testID }, fallback);
-};
-/**
- * Can Component with conditions - For object-level permissions
- */
-const CanWithConditions = ({ I: action, this: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    const hasPermission = ability.can(action, subject, field);
-    if (hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(View, { style, testID }, fallback);
-};
-/**
- * Cannot Component - Renders children if permission is NOT granted
- */
-const Cannot = ({ I: action, a: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React__default.createElement(View, { style, testID }, fallback);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (!hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(View, { style, testID }, fallback);
-};
-/**
- * Permission Gate - Requires ALL permissions to pass
- */
-const PermissionGate = ({ permissions, children, fallback = null, ability: customAbility, onUnauthorized }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    const allPermissionsGranted = permissions.every(({ action, subject, field }) => ability.can(action, subject, field));
-    React__default.useEffect(() => {
-        if (!allPermissionsGranted && onUnauthorized) {
-            onUnauthorized();
-        }
-    }, [allPermissionsGranted, onUnauthorized]);
-    if (allPermissionsGranted) {
-        return React__default.createElement(React__default.Fragment, null, children);
-    }
-    return React__default.createElement(React__default.Fragment, null, fallback);
-};
-/**
- * Higher-Order Component for permission checking
- */
-function withCan(action, subject, field) {
-    return function CanHOC(Component) {
-        const WrappedComponent = (props) => {
-            const { fallback, ...componentProps } = props;
-            return React__default.createElement(Can, { I: action, a: subject, field, fallback }, React__default.createElement(Component, componentProps));
-        };
-        WrappedComponent.displayName = `withCan(${Component.displayName || Component.name})`;
-        return WrappedComponent;
-    };
-}
-/**
- * Higher-Order Component for permission denial checking
- */
-function withCannot(action, subject, field) {
-    return function CannotHOC(Component) {
-        const WrappedComponent = (props) => {
-            const { fallback, ...componentProps } = props;
-            return React__default.createElement(Cannot, { I: action, a: subject, field, fallback }, React__default.createElement(Component, componentProps));
-        };
-        WrappedComponent.displayName = `withCannot(${Component.displayName || Component.name})`;
-        return WrappedComponent;
-    };
-}
-
-/**
- * Fluent API for building permissions
- */
-class PermissionBuilder {
-    constructor() {
-        this.rules = [];
-    }
-    /**
-     * Grant permission
-     */
-    allow(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false
-        });
-        return this;
-    }
-    /**
-     * Deny permission
-     */
-    forbid(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true
-        });
-        return this;
-    }
-    /**
-     * Conditional permission
-     */
-    allowIf(action, subject, conditions, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false,
-            conditions
-        });
-        return this;
-    }
-    /**
-     * Conditional denial
-     */
-    forbidIf(action, subject, conditions, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true,
-            conditions
-        });
-        return this;
-    }
-    /**
-     * Grant all actions on a subject
-     */
-    manage(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: false
-        });
-        return this;
-    }
-    /**
-     * Forbid all actions on a subject
-     */
-    forbidAll(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: true
-        });
-        return this;
-    }
-    /**
-     * Role-based permissions
-     */
-    role(roleName, callback) {
-        const roleBuilder = new RoleBuilder(roleName);
-        callback(roleBuilder);
-        this.rules.push(...roleBuilder.getRules());
-        return this;
-    }
-    /**
-     * Build the ability with all rules
-     */
-    build() {
-        return new AbilityCore(this.rules);
-    }
-    /**
-     * Get all rules
-     */
-    getRules() {
-        return [...this.rules];
-    }
-    /**
-     * Clear all rules
-     */
-    clear() {
-        this.rules = [];
-        return this;
-    }
-    /**
-     * Merge rules from another builder
-     */
-    merge(other) {
-        this.rules.push(...other.getRules());
-        return this;
-    }
-}
-/**
- * Role-specific permission builder
- */
-class RoleBuilder {
-    constructor(roleName) {
-        this.roleName = roleName;
-        this.rules = [];
-    }
-    /**
-     * Grant permission for this role
-     */
-    can(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Deny permission for this role
-     */
-    cannot(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Manage all actions on subject for this role
-     */
-    manage(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: false,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Get all rules for this role
-     */
-    getRules() {
-        return [...this.rules];
-    }
-}
-/**
- * Common permission patterns
- */
-class PermissionPatterns {
-    /**
-     * Admin permissions - can do everything
-     */
-    static admin() {
-        return new PermissionBuilder()
-            .manage('*');
-    }
-    /**
-     * User permissions - basic CRUD on own resources
-     */
-    static user(userId) {
-        return new PermissionBuilder()
-            .allowIf('read', 'User', { id: userId })
-            .allowIf('update', 'User', { id: userId })
-            .allowIf('delete', 'User', { id: userId })
-            .allow('read', 'public');
-    }
-    /**
-     * Guest permissions - read-only public content
-     */
-    static guest() {
-        return new PermissionBuilder()
-            .allow('read', 'public');
-    }
-    /**
-     * Moderator permissions - manage content but not users
-     */
-    static moderator() {
-        return new PermissionBuilder()
-            .manage('Content')
-            .manage('Comment')
-            .allow('read', 'User')
-            .forbid('delete', 'User');
-    }
-    /**
-     * Owner permissions - full control over owned resources
-     */
-    static owner(ownerId) {
-        return new PermissionBuilder()
-            .allowIf('*', '*', { ownerId })
-            .allow('create', '*');
-    }
-}
-/**
- * Helper function to create a new permission builder
- */
-function permissions() {
-    return new PermissionBuilder();
-}
-/**
- * Helper function to create ability from rules array
- */
-function defineAbility(callback) {
-    const builder = new PermissionBuilder();
-    callback(builder);
-    return builder.build();
-}
-/**
- * Helper function to create common role-based abilities
- */
-function defineRoleAbility(role, callback) {
-    const roleBuilder = new RoleBuilder(role);
-    callback(roleBuilder);
-    return new AbilityCore(roleBuilder.getRules());
-}
-
 const ThemeModeContext = createContext(null);
 // Default persistence using localStorage (web only)
 const defaultPersistence = {
@@ -10448,7 +9884,6 @@ const OverlayBoundary = React__default.memo(function OverlayBoundary({ enabled,
 const I18nBoundary = React__default.memo(function I18nBoundary({ locale, fallbackLocale, resources, children }) {
     return (jsx(I18nProvider, { initial: { locale, fallbackLocale, resources }, children: children }));
 });
-const DEFAULT_PERMISSION_RULES = [{ action: '*', subject: '*' }];
 /**
  * Internal component that uses the enhanced theme mode when config is provided
  */
@@ -10486,30 +9921,20 @@ function PlatformBlocksContent({ children, theme, inherit = true, withCSSVariabl
             document.documentElement.setAttribute('data-platform-blocks-color-scheme', target);
         }
     }, [effectiveColorScheme, osColorScheme]);
-    const mainContent = (jsxs(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: [children, withSpotlight && jsx(SpotlightController, { config: spotlightConfig })] }));
-    return (jsx(OverlayBoundary, { enabled: withOverlays, children: mainContent }));
+    const mainContent = (jsx(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: jsxs(OverlayBoundary, { enabled: withOverlays, children: [children, withSpotlight && jsx(SpotlightController, { config: spotlightConfig })] }) }));
+    return mainContent;
 }
 /**
  * Main provider component for Platform Blocks library
  * Provides theme context and injects CSS variables
  */
-function PlatformBlocksProvider({ children, theme, inherit = true, withCSSVariables = true, cssVariablesSelector = ':root', colorSchemeMode = 'auto', withOverlays = true, withSpotlight = false, withGlobalCSS = true, themeModeConfig, spotlightConfig, locale = 'en', fallbackLocale = 'en', i18nResources, direction, haptics, permissions }) {
+function PlatformBlocksProvider({ children, theme, inherit = true, withCSSVariables = true, cssVariablesSelector = ':root', colorSchemeMode = 'auto', withOverlays = true, withSpotlight = false, withGlobalCSS = true, themeModeConfig, spotlightConfig, locale = 'en', fallbackLocale = 'en', i18nResources, direction, haptics }) {
     const i18nStore = useMemo(() => i18nResources || { en: { translation: {} } }, [i18nResources]);
     const content = (jsx(PlatformBlocksContent, { theme: theme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, colorSchemeMode: colorSchemeMode, withOverlays: withOverlays, withSpotlight: withSpotlight, withGlobalCSS: withGlobalCSS, spotlightConfig: spotlightConfig, themeModeConfig: themeModeConfig, children: children }));
     const themedTree = themeModeConfig ? (jsx(ThemeModeProvider, { config: themeModeConfig, children: content })) : (content);
     const directionConfig = direction === false ? null : (direction !== null && direction !== void 0 ? direction : {});
     const hapticsConfig = haptics === false ? null : (haptics !== null && haptics !== void 0 ? haptics : {});
-    const permissionConfig = permissions === false ? null : (() => {
-        const base = { ...(permissions !== null && permissions !== void 0 ? permissions : {}) };
-        if (base.rules === undefined) {
-            base.rules = DEFAULT_PERMISSION_RULES;
-        }
-        return base;
-    })();
     let enhancedTree = themedTree;
-    if (permissionConfig) {
-        enhancedTree = (jsx(PermissionProvider, { ...permissionConfig, children: enhancedTree }));
-    }
     if (hapticsConfig) {
         enhancedTree = (jsx(HapticsProvider, { ...hapticsConfig, children: enhancedTree }));
     }
@@ -10999,14 +10424,18 @@ function usePopoverPositioning(isOpen, options = {}) {
             // Get popover dimensions
             // Always use measureElement for robustness across platforms (RNW refs may not expose getBoundingClientRect)
             let popoverDimensions = { width: 200, height: 100 }; // sensible defaults for initial calculation
+            let hasMeasuredPopover = false;
             if (popoverRef.current) {
                 const popoverRect = await measureElement(popoverRef);
                 if (popoverRect.width > 0 && popoverRect.height > 0) {
                     popoverDimensions = { width: popoverRect.width, height: popoverRect.height };
+                    hasMeasuredPopover = true;
                 }
             }
             // Calculate optimal position
             const result = calculateOverlayPositionEnhanced(anchorRect, popoverDimensions, positioningOptionsRef.current);
+            // Mark whether this position is based on actual measurements
+            result._hasMeasuredPopover = hasMeasuredPopover;
             setPosition(result);
         }
         catch (error) {
@@ -12056,7 +11485,7 @@ function AppShellBase(props, ref) {
     const breakpoint = useBreakpoint();
     // Determine if mobile based on breakpoint and platform
     const isMobile = Platform.OS !== 'web' || breakpoint === 'xs' || breakpoint === 'sm';
-    const headerConfig = layoutVisibility.header && !isMobile ? header : undefined;
+    const headerConfig = layoutVisibility.header ? header : undefined;
     const navbarConfig = layoutVisibility.navbar ? navbar : undefined;
     const asideConfig = layoutVisibility.aside ? aside : undefined;
     const footerConfig = layoutVisibility.footer ? footer : undefined;
@@ -17148,9 +16577,7 @@ const createInputStyles = (theme, isRTL = false) => {
                     ? theme.colors.error[5]
                     : props.focused
                         ? theme.colors.primary[5]
-                        : props.disabled
-                            ? theme.backgrounds.border
-                            : 'transparent',
+                        : theme.backgrounds.border,
                 // Optional focus shadow (web only) without affecting layout
                 ...(props.focused && !props.disabled && typeof window !== 'undefined' && ((_a = theme.states) === null || _a === void 0 ? void 0 : _a.focusRing) && {
                     boxShadow: `0 0 0 2px ${theme.states.focusRing}`,
@@ -17259,6 +16686,7 @@ const TextInputBase = factory((props, ref) => {
     const { value, onChangeText, onEnter, label, description, error, helperText, disabled, required, size = 'md', withAsterisk, placeholder, startSection, endSection, focused: focusedProp, accessibilityLabel, accessibilityHint, testID, textInputProps, style, radius, secureTextEntry, clearable, clearButtonLabel, onClear, inputRef, name, keyboardFocusId, ...rest } = otherProps;
     const renderDisclaimer = useDisclaimer(disclaimerData.disclaimer, disclaimerData.disclaimerProps);
     const [focused, setFocused] = useState(false);
+    const [cursorVisible, setCursorVisible] = useState(true);
     const theme = useTheme();
     const { isRTL } = useDirection();
     const internalInputRef = useRef(null);
@@ -17330,6 +16758,16 @@ const TextInputBase = factory((props, ref) => {
             return '';
         return '•'.repeat(length);
     }, [isSecureEntry, normalizedValue]);
+    // Blinking cursor for secure entry (simple interval toggle)
+    useEffect(() => {
+        if (focused && isSecureEntry) {
+            setCursorVisible(true);
+            const interval = setInterval(() => {
+                setCursorVisible(v => !v);
+            }, 530);
+            return () => clearInterval(interval);
+        }
+    }, [focused, isSecureEntry]);
     const textColor = (_a = flattenedInputStyle === null || flattenedInputStyle === void 0 ? void 0 : flattenedInputStyle.color) !== null && _a !== void 0 ? _a : (styleProps.disabled ? theme.text.disabled : theme.text.primary);
     const resolvedInputStyle = useMemo(() => {
         const base = [styles.input];
@@ -17431,7 +16869,12 @@ const TextInputBase = factory((props, ref) => {
         }
     }, [keyboardManager, pendingFocusTarget, focusTargetId]);
     const disclaimerNode = renderDisclaimer();
-    return (jsxs(View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxs(View, { style: styles.inputContainer, children: [startSection && (jsx(View, { style: styles.startSection, children: startSection })), jsxs(View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsx(TextInput, { ref: assignInputRef, value: value, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, onSubmitEditing: handleSubmitEditing, editable: !disabled, placeholder: placeholder, placeholderTextColor: theme.text.muted, style: resolvedInputStyle, selectionColor: selectionColorProp !== null && selectionColorProp !== void 0 ? selectionColorProp : textColor, testID: testID, secureTextEntry: isSecureEntry, ...inputAccessibilityProps, ...restTextInputProps }), isSecureEntry && maskedValue.length > 0 && (jsx(Text$1, { pointerEvents: "none", accessible: false, style: overlayStyle, numberOfLines: 1, ellipsizeMode: "clip", children: maskedValue }))] }), (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 }))] }));
+    return (jsxs(View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxs(View, { style: styles.inputContainer, children: [startSection && (jsx(View, { style: styles.startSection, children: startSection })), jsxs(View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsx(TextInput, { ref: assignInputRef, value: value, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, onSubmitEditing: handleSubmitEditing, editable: !disabled, placeholder: placeholder, placeholderTextColor: theme.text.muted, style: resolvedInputStyle, selectionColor: selectionColorProp !== null && selectionColorProp !== void 0 ? selectionColorProp : textColor, testID: testID, secureTextEntry: isSecureEntry, ...inputAccessibilityProps, ...restTextInputProps }), isSecureEntry && (jsxs(View, { pointerEvents: "none", style: [overlayStyle, { flexDirection: 'row', alignItems: 'center' }], children: [jsx(Text$1, { accessible: false, style: { color: textColor, fontSize: styles.input.fontSize, fontFamily: theme.fontFamily }, numberOfLines: 1, children: maskedValue }), focused && cursorVisible && (jsx(View, { style: {
+                                            width: 1,
+                                            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 }))] }));
 });
 
 const getInputTypeConfig = (type) => {
@@ -17989,18 +17432,19 @@ const useTextAreaStyles = (props) => {
                     ? theme.colors.error[5]
                     : styleProps.focused
                         ? theme.colors.primary[5]
-                        : styleProps.disabled
-                            ? theme.backgrounds.border
-                            : 'transparent',
+                        : theme.backgrounds.border,
                 borderRadius: DESIGN_TOKENS.radius.lg,
-                borderWidth: DESIGN_TOKENS.radius.xs,
+                borderWidth: 2,
                 paddingHorizontal: DESIGN_TOKENS.spacing.sm,
                 paddingVertical: DESIGN_TOKENS.spacing.xs,
+                // Match Input focus treatment on web
                 ...(styleProps.focused && !styleProps.disabled && Platform.OS === 'web' && {
                     boxShadow: `0 0 0 2px ${((_a = theme.states) === null || _a === void 0 ? void 0 : _a.focusRing) || theme.colors.primary[2]}`,
                 }),
+                // Light elevation similar to Input
                 ...(!styleProps.disabled && theme.colorScheme === 'light' && {
                     elevation: 1,
+                    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
                 }),
                 opacity: styleProps.disabled ? DESIGN_TOKENS.opacity.disabled : 1,
             },
@@ -19682,7 +19126,7 @@ const useSwitchStyles = (props) => {
             ...(Platform.OS === 'web' && { userSelect: 'none' }),
         },
         labelContainer: {
-            flex: 1,
+            flexShrink: 1,
             justifyContent: 'center',
         },
         labelDisabled: {
@@ -19851,8 +19295,8 @@ const Switch = factory((rawProps, ref) => {
     const LayoutComponent = isVertical ? Column : Row;
     // For vertical layouts (top/bottom), we want tighter spacing and center alignment
     const layoutProps = isVertical
-        ? { gap: 'xs', style: { alignItems: 'center' } }
-        : { gap: 'sm', style: { alignItems: 'center' } };
+        ? { gap: 'xs', align: 'center' }
+        : { gap: 'sm', align: 'center' };
     const disclaimerNode = renderDisclaimer();
     return (jsxs(View, { style: spacingStyles, children: [jsxs(LayoutComponent, { ...layoutProps, children: [labelPosition === 'top' && labelElement, labelPosition === 'left' && labelElement, switchElement, labelPosition === 'right' && labelElement, labelPosition === 'bottom' && labelElement] }), disclaimerNode ? (jsx(View, { style: { width: '100%' }, children: disclaimerNode })) : null] }));
 });
@@ -21047,105 +20491,116 @@ const useSliderGesture = (min, max, step, restrictToTicks, ticks, disabled) => {
     }, [min, max, step, restrictToTicks, ticks]);
     return { calculateNewValue };
 };
-const SliderTrack = ({ disabled, theme, size, orientation, activeWidth = 0, activeLeft = SLIDER_CONSTANTS.THUMB_SIZE[size] / 2, isRange = false }) => {
+const SliderTrack = ({ disabled, theme, size, orientation, activeWidth = 0, activeLeft, isRange = false, trackColor, activeTrackColor, trackStyle, activeTrackStyle, trackHeight, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
-    const trackHeight = SLIDER_CONSTANTS.TRACK_HEIGHT[size];
-    const baseTrackStyle = {
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedTrackHeight = trackHeight !== null && trackHeight !== void 0 ? trackHeight : SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const resolvedActiveLeft = activeLeft !== null && activeLeft !== void 0 ? activeLeft : (resolvedThumbSize / 2);
+    const inactiveTrackBaseStyle = {
         position: 'absolute',
-        backgroundColor: disabled ? theme.colors.gray[2] : theme.colors.gray[3],
-        borderRadius: trackHeight / 2,
+        backgroundColor: disabled && !trackColor ? theme.colors.gray[2] : (trackColor !== null && trackColor !== void 0 ? trackColor : theme.colors.gray[3]),
+        borderRadius: resolvedTrackHeight / 2,
     };
-    const activeTrackStyle = {
+    const activeTrackBaseStyle = {
         position: 'absolute',
-        backgroundColor: disabled ? theme.colors.gray[4] : theme.colors.primary[5],
-        borderRadius: trackHeight / 2,
+        backgroundColor: disabled && !activeTrackColor ? theme.colors.gray[4] : (activeTrackColor !== null && activeTrackColor !== void 0 ? activeTrackColor : theme.colors.primary[5]),
+        borderRadius: resolvedTrackHeight / 2,
     };
     if (orientationProps.isVertical) {
-        return (jsxs(Fragment, { children: [jsx(View, { style: {
-                        ...baseTrackStyle,
-                        top: thumbSize / 2,
-                        bottom: thumbSize / 2,
-                        width: trackHeight,
-                        left: (thumbSize - trackHeight) / 2,
-                    } }), activeWidth > 0 && (jsx(View, { style: {
-                        ...activeTrackStyle,
-                        // For range sliders, use activeLeft as top position; for single sliders, start from bottom
-                        ...(isRange ? {
-                            top: activeLeft,
-                            height: activeWidth,
-                        } : {
-                            bottom: thumbSize / 2,
-                            height: activeWidth,
-                        }),
-                        width: trackHeight,
-                        left: (thumbSize - trackHeight) / 2,
-                    } }))] }));
-    }
-    return (jsxs(Fragment, { children: [jsx(View, { style: {
-                    ...baseTrackStyle,
-                    left: thumbSize / 2,
-                    right: thumbSize / 2,
-                    height: trackHeight,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2,
-                } }), activeWidth > 0 && (jsx(View, { style: {
-                    ...activeTrackStyle,
-                    left: activeLeft,
-                    width: activeWidth,
-                    height: trackHeight,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2,
-                } }))] }));
-};
-const SliderTicks = ({ ticks, disabled, theme, size, orientation, keyPrefix = 'tick' }) => {
+        return (jsxs(Fragment, { children: [jsx(View, { style: [
+                        {
+                            ...inactiveTrackBaseStyle,
+                            top: resolvedThumbSize / 2,
+                            bottom: resolvedThumbSize / 2,
+                            width: resolvedTrackHeight,
+                            left: (resolvedThumbSize - resolvedTrackHeight) / 2,
+                        },
+                        trackStyle,
+                    ] }), activeWidth > 0 && (jsx(View, { style: [
+                        {
+                            ...activeTrackBaseStyle,
+                            ...(isRange ? {
+                                top: activeLeft !== null && activeLeft !== void 0 ? activeLeft : resolvedActiveLeft,
+                                height: activeWidth,
+                            } : {
+                                bottom: resolvedThumbSize / 2,
+                                height: activeWidth,
+                            }),
+                            width: resolvedTrackHeight,
+                            left: (resolvedThumbSize - resolvedTrackHeight) / 2,
+                        },
+                        activeTrackStyle,
+                    ] }))] }));
+    }
+    return (jsxs(Fragment, { children: [jsx(View, { style: [
+                    {
+                        ...inactiveTrackBaseStyle,
+                        left: resolvedThumbSize / 2,
+                        right: resolvedThumbSize / 2,
+                        height: resolvedTrackHeight,
+                        top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2,
+                    },
+                    trackStyle,
+                ] }), activeWidth > 0 && (jsx(View, { style: [
+                    {
+                        ...activeTrackBaseStyle,
+                        left: activeLeft !== null && activeLeft !== void 0 ? activeLeft : resolvedActiveLeft,
+                        width: activeWidth,
+                        height: resolvedTrackHeight,
+                        top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2,
+                    },
+                    activeTrackStyle,
+                ] }))] }));
+};
+const SliderTicks = ({ ticks, disabled, theme, size, orientation, keyPrefix = 'tick', trackHeight, thumbSize, activeTickColor, tickColor, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
-    const trackHeight = SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedTrackHeight = trackHeight !== null && trackHeight !== void 0 ? trackHeight : SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const inactiveColor = disabled && !tickColor ? theme.colors.gray[2] : (tickColor !== null && tickColor !== void 0 ? tickColor : theme.colors.gray[4]);
+    const activeColor = disabled && !activeTickColor ? theme.colors.gray[4] : (activeTickColor !== null && activeTickColor !== void 0 ? activeTickColor : theme.colors.primary[5]);
     if (orientationProps.isVertical) {
         return (jsxs(Fragment, { children: [ticks.map((tick, index) => (jsx(View, { style: {
                         position: 'absolute',
-                        top: thumbSize / 2 + tick.position,
-                        left: (thumbSize - trackHeight) / 2 - 3,
+                        top: resolvedThumbSize / 2 + tick.position,
+                        left: (resolvedThumbSize - resolvedTrackHeight) / 2 - 3,
                         height: 2,
-                        width: trackHeight + 6,
-                        backgroundColor: tick.isActive
-                            ? (disabled ? theme.colors.gray[4] : theme.colors.primary[5])
-                            : (disabled ? theme.colors.gray[2] : theme.colors.gray[4]),
+                        width: resolvedTrackHeight + 6,
+                        backgroundColor: tick.isActive ? activeColor : inactiveColor,
                         borderRadius: 1,
                     } }, `${keyPrefix}-${tick.value}-${index}`))), ticks.map((tick, index) => (tick.label ? (jsx(View, { style: {
                         position: 'absolute',
-                        top: thumbSize / 2 + tick.position - 10,
-                        left: thumbSize + 8,
+                        top: resolvedThumbSize / 2 + tick.position - 10,
+                        left: resolvedThumbSize + 8,
                         height: 20,
                         justifyContent: 'center',
                     }, children: jsx(Text, { size: "xs", children: tick.label }) }, `${keyPrefix}-label-${tick.value}-${index}`)) : null))] }));
     }
     return (jsxs(Fragment, { children: [ticks.map((tick, index) => (jsx(View, { style: {
                     position: 'absolute',
-                    left: thumbSize / 2 + tick.position,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2 - 3,
+                    left: resolvedThumbSize / 2 + tick.position,
+                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2 - 3,
                     width: 2,
-                    height: trackHeight + 6,
-                    backgroundColor: tick.isActive
-                        ? (disabled ? theme.colors.gray[4] : theme.colors.primary[5])
-                        : (disabled ? theme.colors.gray[2] : theme.colors.gray[4]),
+                    height: resolvedTrackHeight + 6,
+                    backgroundColor: tick.isActive ? activeColor : inactiveColor,
                     borderRadius: 1,
                 } }, `${keyPrefix}-${tick.value}-${index}`))), ticks.map((tick, index) => (tick.label ? (jsx(View, { style: {
                     position: 'absolute',
-                    left: thumbSize / 2 + tick.position - 20,
+                    left: resolvedThumbSize / 2 + tick.position - 20,
                     top: SLIDER_CONSTANTS.CONTAINER_HEIGHT + 8,
                     width: 40,
                     alignItems: 'center',
                 }, children: jsx(Text, { size: "xs", style: { textAlign: 'center' }, children: tick.label }) }, `${keyPrefix}-label-${tick.value}-${index}`)) : null))] }));
 };
-const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging, zIndex = 1, panHandlers }) => {
+const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging, zIndex = 1, panHandlers, thumbColor, thumbStyle, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbColor = disabled && !thumbColor ? theme.colors.gray[4] : (thumbColor !== null && thumbColor !== void 0 ? thumbColor : theme.colors.primary[5]);
     const baseStyle = {
         position: 'absolute',
-        width: thumbSize,
-        height: thumbSize,
-        backgroundColor: disabled ? theme.colors.gray[4] : theme.colors.primary[5],
-        borderRadius: thumbSize / 2,
+        width: resolvedThumbSize,
+        height: resolvedThumbSize,
+        backgroundColor: resolvedThumbColor,
+        borderRadius: resolvedThumbSize / 2,
         borderWidth: 2,
         borderColor: 'white',
         boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
@@ -21154,36 +20609,43 @@ const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging,
         zIndex,
     };
     if (orientationProps.isVertical) {
-        return (jsx(View, { style: {
-                ...baseStyle,
-                top: position,
-                left: 0,
-            }, ...panHandlers }));
+        return (jsx(View, { style: [
+                baseStyle,
+                {
+                    top: position,
+                    left: 0,
+                },
+                thumbStyle,
+            ], ...panHandlers }));
     }
-    return (jsx(View, { style: {
-            ...baseStyle,
-            left: position,
-            top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - thumbSize) / 2,
-        }, ...panHandlers }));
+    return (jsx(View, { style: [
+            baseStyle,
+            {
+                left: position,
+                top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedThumbSize) / 2,
+            },
+            thumbStyle,
+        ], ...panHandlers }));
 };
 const SliderLabel = ({ label }) => (jsx(View, { style: { marginBottom: 8 }, children: typeof label === 'string' ? (jsx(Text, { size: "sm", weight: "medium", children: label })) : (label) }));
-const SliderValueLabel = ({ value, position, size, orientation, isCard = false }) => {
+const SliderValueLabel = ({ value, position, size, orientation, isCard = false, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
     // round number to 2 decimal places for display
     const displayValue = typeof value === 'number' ? value.toFixed(2) : value;
     if (orientationProps.isVertical) {
+        const verticalLabelOffset = resolvedThumbSize + 16; // keep label clear of the thumb
         return (jsx(View, { style: {
                 position: 'absolute',
-                top: position + (thumbSize / 2) - 10,
-                right: thumbSize + 8,
+                top: position + (resolvedThumbSize / 2) - 10,
+                right: verticalLabelOffset,
                 height: 20,
                 justifyContent: 'center',
             }, children: isCard ? (jsx(Card, { p: "xs", variant: "filled", children: jsx(Text, { size: "sm", children: displayValue }) })) : (jsx(Text, { size: "sm", children: displayValue })) }));
     }
     return (jsx(View, { style: {
             position: 'absolute',
-            left: position + (thumbSize / 2) - 50,
+            left: position + (resolvedThumbSize / 2) - 50,
             bottom: SLIDER_CONSTANTS.CONTAINER_HEIGHT - 6, // Moved closer to thumb
             width: 100,
             alignItems: 'center',
@@ -21199,9 +20661,34 @@ const SLIDER_SIZE_SCALE = {
     '2xl': 'lg',
     '3xl': 'lg',
 };
+const resolvePaletteColor = (themeColors, scheme) => {
+    if (!scheme || typeof scheme !== 'string') {
+        return undefined;
+    }
+    const palette = themeColors[scheme];
+    if (Array.isArray(palette)) {
+        return palette;
+    }
+    return undefined;
+};
+const resolveSliderColors = (theme, { colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor, }) => {
+    var _a, _b;
+    const palette = resolvePaletteColor(theme.colors, colorScheme);
+    const schemeColor = (_b = (_a = palette === null || palette === void 0 ? void 0 : palette[5]) !== null && _a !== void 0 ? _a : (typeof colorScheme === 'string' ? colorScheme : undefined)) !== null && _b !== void 0 ? _b : theme.colors.primary[5];
+    const resolvedActiveTrack = activeTrackColor !== null && activeTrackColor !== void 0 ? activeTrackColor : schemeColor;
+    const defaultTrackColor = theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[3];
+    const defaultTickColor = theme.colorScheme === 'dark' ? theme.colors.gray[5] : theme.colors.gray[4];
+    return {
+        trackColor: trackColor !== null && trackColor !== void 0 ? trackColor : defaultTrackColor,
+        activeTrackColor: resolvedActiveTrack,
+        thumbColor: thumbColor !== null && thumbColor !== void 0 ? thumbColor : resolvedActiveTrack,
+        tickColor: tickColor !== null && tickColor !== void 0 ? tickColor : defaultTickColor,
+        activeTickColor: activeTickColor !== null && activeTickColor !== void 0 ? activeTickColor : resolvedActiveTrack,
+    };
+};
 // Optimized Single Slider Component
 const Slider = factory((props, ref) => {
-    const { value, defaultValue = 0, onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, style, ...spacingProps } = props;
+    const { value, defaultValue = 0, onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, trackColor, activeTrackColor, thumbColor, trackSize, thumbSize: thumbSizeProp, colorScheme = 'primary', trackStyle, activeTrackStyle, thumbStyle, tickColor, activeTickColor, style, ...spacingProps } = props;
     const theme = useTheme();
     const [isDragging, setIsDragging] = useState(false);
     // Uncontrolled internal value
@@ -21230,14 +20717,31 @@ const Slider = factory((props, ref) => {
                 : 'md'
         : (resolvedSliderSize !== null && resolvedSliderSize !== void 0 ? resolvedSliderSize : 'md');
     const orientationProps = getOrientationProps(orientation, containerSize);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const thumbSize = thumbSizeProp !== null && thumbSizeProp !== void 0 ? thumbSizeProp : SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const trackHeight = trackSize !== null && trackSize !== void 0 ? trackSize : SLIDER_CONSTANTS.TRACK_HEIGHT[sliderSize];
     // Memoized processed value
     const clampedValue = useSliderValue(isControlled ? value : internal, min, max, step, restrictToTicks, ticks, false);
     // Memoized value label handling
+    const defaultValueFormatter = useCallback((val) => Math.round(val).toString(), []);
+    const resolvedValueLabel = useMemo(() => {
+        if (valueLabel === null)
+            return null;
+        if (valueLabel)
+            return valueLabel;
+        return defaultValueFormatter;
+    }, [valueLabel, defaultValueFormatter]);
     const labelConfig = useMemo(() => ({
-        shouldShow: valueLabel !== null && (valueLabelAlwaysOn || isDragging || (Platform.OS === 'web' && isHovering)),
-        formatter: valueLabel || ((val) => (Number.isInteger(val) ? val.toString() : val.toFixed(2)))
-    }), [valueLabel, valueLabelAlwaysOn, isDragging, isHovering]);
+        shouldShow: !!resolvedValueLabel && (valueLabelAlwaysOn || isDragging || (Platform.OS === 'web' && isHovering)),
+        formatter: resolvedValueLabel !== null && resolvedValueLabel !== void 0 ? resolvedValueLabel : defaultValueFormatter,
+    }), [resolvedValueLabel, valueLabelAlwaysOn, isDragging, isHovering, defaultValueFormatter]);
+    const sliderColors = useMemo(() => resolveSliderColors(theme, {
+        colorScheme,
+        trackColor,
+        activeTrackColor,
+        thumbColor,
+        tickColor,
+        activeTickColor,
+    }), [theme, colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor]);
     // Memoized position calculations
     const positions = useMemo(() => {
         var _a, _b;
@@ -21367,6 +20871,7 @@ const Slider = factory((props, ref) => {
                     height: fullWidth && orientation === 'vertical' ? '100%' : orientationProps.containerHeight,
                     justifyContent: 'center',
                     position: 'relative',
+                    ...(Platform.OS === 'web' && orientation === 'vertical' ? { touchAction: 'none' } : null),
                 }, onLayout: (event) => {
                     // When fullWidth is enabled, track the actual container dimensions
                     if (fullWidth) {
@@ -21380,11 +20885,11 @@ const Slider = factory((props, ref) => {
                 }, onStartShouldSetResponder: () => !isDragging, onResponderGrant: handlePress, ...(Platform.OS === 'web' && {
                     onMouseEnter: () => setIsHovering(true),
                     onMouseLeave: () => setIsHovering(false),
-                }), ...panResponder.panHandlers, children: [jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeLength }), jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation }), jsx(SliderThumb, { position: positions.thumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: isDragging }), labelConfig.shouldShow && (jsx(SliderValueLabel, { value: labelConfig.formatter(clampedValue), position: positions.thumbPosition, size: sliderSize, orientation: orientation, isCard: true }))] })] }));
+                }), ...panResponder.panHandlers, children: [jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeLength, trackColor: sliderColors.trackColor, activeTrackColor: sliderColors.activeTrackColor, trackStyle: trackStyle, activeTrackStyle: activeTrackStyle, trackHeight: trackHeight, thumbSize: thumbSize }), jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, trackHeight: trackHeight, thumbSize: thumbSize, tickColor: sliderColors.tickColor, activeTickColor: sliderColors.activeTickColor }), jsx(SliderThumb, { position: positions.thumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: isDragging, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), labelConfig.shouldShow && (jsx(SliderValueLabel, { value: labelConfig.formatter(clampedValue), position: positions.thumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize }))] })] }));
 });
 // Optimized Range Slider Component
 const RangeSlider = factory((props, ref) => {
-    const { value = [0, 100], onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, pushOnOverlap = true, style, ...spacingProps } = props;
+    const { value = [0, 100], onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, pushOnOverlap = true, trackColor, activeTrackColor, thumbColor, trackSize, thumbSize: thumbSizeProp, colorScheme = 'primary', trackStyle, activeTrackStyle, thumbStyle, tickColor, activeTickColor, style, ...spacingProps } = props;
     const theme = useTheme();
     const [dragState, setDragState] = useState({ thumb: null });
     const [isHovering, setIsHovering] = useState(false);
@@ -21404,8 +20909,17 @@ const RangeSlider = factory((props, ref) => {
                 : 'md'
         : (rangeResolvedSliderSize !== null && rangeResolvedSliderSize !== void 0 ? rangeResolvedSliderSize : 'md');
     const orientationProps = getOrientationProps(orientation, containerSize);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const thumbSize = thumbSizeProp !== null && thumbSizeProp !== void 0 ? thumbSizeProp : SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const trackHeight = trackSize !== null && trackSize !== void 0 ? trackSize : SLIDER_CONSTANTS.TRACK_HEIGHT[sliderSize];
     useRef(null);
+    const sliderColors = useMemo(() => resolveSliderColors(theme, {
+        colorScheme,
+        trackColor,
+        activeTrackColor,
+        thumbColor,
+        tickColor,
+        activeTickColor,
+    }), [theme, colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor]);
     // Memoized processed values
     const [minValue, maxValue] = useSliderValue(value, min, max, step, restrictToTicks, ticks, true);
     // Memoized backward compatibility handling
@@ -21641,6 +21155,7 @@ const RangeSlider = factory((props, ref) => {
                     height: fullWidth && orientation === 'vertical' ? '100%' : orientationProps.containerHeight,
                     justifyContent: 'center',
                     position: 'relative',
+                    ...(Platform.OS === 'web' && orientation === 'vertical' ? { touchAction: 'none' } : null),
                 }, onLayout: (event) => {
                     // When fullWidth is enabled, track the actual container dimensions
                     if (fullWidth) {
@@ -21654,7 +21169,7 @@ const RangeSlider = factory((props, ref) => {
                 }, onStartShouldSetResponder: () => true, onResponderGrant: handleTrackPress, ...(Platform.OS === 'web' && {
                     onMouseEnter: () => setIsHovering(true),
                     onMouseLeave: () => setIsHovering(false),
-                }), collapsable: false, children: [jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeWidth, activeLeft: positions.activeLeft, isRange: true }), jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, keyPrefix: "range-tick" }), jsx(SliderThumb, { position: positions.minThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'min', zIndex: dragState.thumb === 'min' ? 10 : 1, panHandlers: minThumbPanResponder.panHandlers }), jsx(SliderThumb, { position: positions.maxThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'max', zIndex: dragState.thumb === 'max' ? 10 : 2, panHandlers: maxThumbPanResponder.panHandlers }), labelConfig.shouldShow && (jsxs(Fragment, { children: [jsx(SliderValueLabel, { value: labelConfig.formatter(minValue, 0), position: positions.minThumbPosition, size: sliderSize, orientation: orientation, isCard: true }), jsx(SliderValueLabel, { value: labelConfig.formatter(maxValue, 1), position: positions.maxThumbPosition, size: sliderSize, orientation: orientation, isCard: true })] }))] })] }));
+                }), collapsable: false, children: [jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeWidth, activeLeft: positions.activeLeft, isRange: true, trackColor: sliderColors.trackColor, activeTrackColor: sliderColors.activeTrackColor, trackStyle: trackStyle, activeTrackStyle: activeTrackStyle, trackHeight: trackHeight, thumbSize: thumbSize }), jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, keyPrefix: "range-tick", trackHeight: trackHeight, thumbSize: thumbSize, tickColor: sliderColors.tickColor, activeTickColor: sliderColors.activeTickColor }), jsx(SliderThumb, { position: positions.minThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'min', zIndex: dragState.thumb === 'min' ? 10 : 1, panHandlers: minThumbPanResponder.panHandlers, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), jsx(SliderThumb, { position: positions.maxThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'max', zIndex: dragState.thumb === 'max' ? 10 : 2, panHandlers: maxThumbPanResponder.panHandlers, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), labelConfig.shouldShow && (jsxs(Fragment, { children: [jsx(SliderValueLabel, { value: labelConfig.formatter(minValue, 0), position: positions.minThumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize }), jsx(SliderValueLabel, { value: labelConfig.formatter(maxValue, 1), position: positions.maxThumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize })] }))] })] }));
 });
 
 const clampNumber$1 = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -27395,7 +26910,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(date);
     }, [isControlled, maxDate, minDate, onChange]);
-    return (jsxs(View, { children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsx(Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
+    return (jsxs(View, { style: { alignSelf: 'flex-start' }, children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsx(Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
                             {
                                 padding: 8,
                                 borderRadius: 6,
@@ -27407,7 +26922,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
                                 borderRadius: 6,
                                 backgroundColor: pressed ? theme.colors.gray[2] : 'transparent',
                             },
-                        ], ...nextControlProps, children: jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: jsx(Flex, { direction: "row", gap: 4, children: days.map((date) => {
+                        ], ...nextControlProps, children: jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { flexGrow: 0 }, style: { flexGrow: 0 }, children: jsx(Flex, { direction: "row", gap: 4, children: days.map((date) => {
                         const isSelected = selectedDate ? dateUtils$1.isSameDay(date, selectedDate) : false;
                         const isToday = dateUtils$1.isToday(date);
                         const isWeekend = dateUtils$1.isWeekend(date);
@@ -30148,6 +29663,7 @@ function MenuBase(props, ref) {
             const overlayId = openOverlay({
                 content: menuDropdown,
                 anchor: { x: positionResult.x, y: positionResult.y, width: overlaySize.width, height: overlaySize.height },
+                placement: positionResult.placement || position,
                 closeOnClickOutside,
                 closeOnEscape,
                 strategy,
@@ -31548,13 +31064,13 @@ function Indicator({ size = 'sm', color, borderColor, borderWidth = 1, placement
 
 const AVATAR_ALLOWED_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
 const AVATAR_SIZE_SCALE = {
-    xs: { avatar: 24, badge: 6, text: 'xs' },
-    sm: { avatar: 32, badge: 8, text: 'xs' },
-    md: { avatar: 40, badge: 10, text: 'sm' },
-    lg: { avatar: 48, badge: 12, text: 'md' },
-    xl: { avatar: 64, badge: 16, text: 'lg' },
-    '2xl': { avatar: 80, badge: 20, text: 'xl' },
-    '3xl': { avatar: 96, badge: 24, text: '2xl' },
+    xs: { avatar: 24, indicator: 6, text: 'xs' },
+    sm: { avatar: 32, indicator: 8, text: 'xs' },
+    md: { avatar: 40, indicator: 10, text: 'sm' },
+    lg: { avatar: 48, indicator: 12, text: 'md' },
+    xl: { avatar: 64, indicator: 16, text: 'lg' },
+    '2xl': { avatar: 80, indicator: 20, text: 'xl' },
+    '3xl': { avatar: 96, indicator: 24, text: '2xl' },
 };
 const BASE_AVATAR_METRICS = AVATAR_SIZE_SCALE.md;
 function resolveAvatarMetrics(value) {
@@ -31572,11 +31088,11 @@ function resolveAvatarMetrics(value) {
 }
 function calculateNumericMetrics$1(value) {
     const ratio = value / BASE_AVATAR_METRICS.avatar;
-    const badge = Math.max(4, Math.round(BASE_AVATAR_METRICS.badge * ratio));
+    const indicator = Math.max(4, Math.round(BASE_AVATAR_METRICS.indicator * ratio));
     const text = pickTextSize(value);
     return {
         avatar: value,
-        badge,
+        indicator,
         text,
     };
 }
@@ -31595,9 +31111,9 @@ function pickTextSize(value) {
         return 'sm';
     return 'xs';
 }
-function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'white', online, badgeColor, style, accessibilityLabel, label, description, gap = 8, showText = true, }) {
+function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'white', online, indicatorColor, style, accessibilityLabel, label, description, gap = 8, showText = true, }) {
     const theme = useTheme();
-    const { avatar: avatarSize, badge: badgeSize, text: textSize } = resolveAvatarMetrics(size);
+    const { avatar: avatarSize, indicator: indicatorSize, text: textSize } = resolveAvatarMetrics(size);
     const avatarStyle = {
         width: avatarSize,
         height: avatarSize,
@@ -31615,7 +31131,7 @@ function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'whit
                         width: avatarSize,
                         height: avatarSize,
                         borderRadius: avatarSize / 2,
-                    }, accessibilityLabel: accessibilityLabel })) : (jsx(Text, { size: textSize, color: textColor, weight: "semibold", style: { textAlign: 'center' }, children: fallback || '?' })) }), online && (jsx(Indicator, { size: badgeSize, color: badgeColor || theme.colors.success[5], borderColor: theme.colors.gray[0], placement: "bottom-right" }))] }));
+                    }, accessibilityLabel: accessibilityLabel })) : (jsx(Text, { size: textSize, color: textColor, weight: "semibold", style: { textAlign: 'center' }, children: fallback || '?' })) }), online && (jsx(Indicator, { size: indicatorSize, color: indicatorColor || theme.colors.success[5], borderColor: theme.colors.gray[0], placement: "bottom-right" }))] }));
     if (label || description) {
         return (jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [content, showText && (jsxs(View, { style: { marginLeft: gap, justifyContent: 'center' }, children: [label && (typeof label === 'string' ? (jsx(Text, { size: textSize, weight: "semibold", children: label })) : label), description && (typeof description === 'string' ? (jsx(Text, { size: textSize, color: theme.colors.gray[6], children: description })) : description)] }))] }));
     }
@@ -32117,7 +31633,7 @@ function usePopoverContext(component) {
 const DEFAULT_ARROW_SIZE = 7;
 const PopoverBase = (props, ref) => {
     var _a;
-    const { children, opened: controlledOpened, defaultOpened = false, onChange, onOpen, onClose, onDismiss, disabled = false, closeOnClickOutside = true, closeOnEscape = true, clickOutsideEvents, // currently not implemented
+    const { children, opened: controlledOpened, defaultOpened = false, onChange, onOpen, onClose, onDismiss, trigger = 'click', disabled = false, closeOnClickOutside = true, closeOnEscape = true, clickOutsideEvents, // currently not implemented
     trapFocus = false, keepMounted = false, returnFocus = false, withinPortal = true, withOverlay = false, overlayProps, width, minWidth, minHeight, maxWidth, maxHeight, radius, shadow, zIndex = 300, position = 'bottom', offset = 8, floatingStrategy = 'fixed', middlewares, preventPositionChangeWhenVisible = false, hideDetached = true, viewport, keyboardAvoidance = true, fallbackPlacements, boundary, withRoles = true, id, withArrow = false, arrowSize = DEFAULT_ARROW_SIZE, arrowRadius = 0, arrowOffset = 5, arrowPosition = 'center', onPositionChange, testID, ...rest } = props;
     const theme = useTheme();
     const { spacingProps } = extractSpacingProps(rest);
@@ -32129,9 +31645,18 @@ const PopoverBase = (props, ref) => {
     const openedRef = useRef(opened);
     const closingReasonRef = useRef(null);
     const anchorMeasurementsRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
     useEffect(() => {
         openedRef.current = opened;
     }, [opened]);
+    // Cleanup hover timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+        };
+    }, []);
     const resolvedOffset = typeof offset === 'number' ? offset : (_a = offset === null || offset === void 0 ? void 0 : offset.mainAxis) !== null && _a !== void 0 ? _a : 8;
     const resolvedFlip = preventPositionChangeWhenVisible
         ? false
@@ -32144,7 +31669,7 @@ const PopoverBase = (props, ref) => {
             ? false
             : true;
     const resolvedStrategy = floatingStrategy !== null && floatingStrategy !== void 0 ? floatingStrategy : 'fixed';
-    const { position: positioningResult, anchorRef, popoverRef, showOverlay, hideOverlay, updatePosition } = useDropdownPositioning({
+    const { position: positioningResult, anchorRef, popoverRef, showOverlay, hideOverlay, updatePosition, isPositioning } = useDropdownPositioning({
         isOpen: opened && !disabled && !!dropdownState,
         placement: position,
         offset: resolvedOffset,
@@ -32156,9 +31681,20 @@ const PopoverBase = (props, ref) => {
         fallbackPlacements,
         viewport,
         onClose: () => handleOverlayClose('dismiss'),
-        closeOnClickOutside,
+        closeOnClickOutside: trigger === 'hover' ? false : closeOnClickOutside,
         closeOnEscape,
     });
+    // Track if we've done measurement-based positioning to avoid flicker
+    const hasPositionedRef = useRef(false);
+    useEffect(() => {
+        // Only mark as positioned when we have a measurement-based position
+        if (opened && positioningResult && positioningResult._hasMeasuredPopover) {
+            hasPositionedRef.current = true;
+        }
+        if (!opened) {
+            hasPositionedRef.current = false;
+        }
+    }, [opened, positioningResult]);
     const popoverStyles = useMemo(() => createPopoverStyles(theme)({
         radius,
         shadow,
@@ -32262,6 +31798,28 @@ const PopoverBase = (props, ref) => {
             openPopover();
         }
     }, [closePopover, openPopover]);
+    // Hover-specific handlers with delay to prevent glitching when moving between target and dropdown
+    const handleHoverOpen = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        openPopover();
+    }, [openPopover]);
+    const handleHoverClose = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        hoverTimeoutRef.current = setTimeout(() => {
+            closePopover('programmatic');
+            hoverTimeoutRef.current = null;
+        }, 150); // Delay to allow mouse to move to dropdown
+    }, [closePopover]);
+    // Store hover handlers in refs to avoid causing re-renders in useEffect
+    const hoverHandlersRef = useRef({ open: handleHoverOpen, close: handleHoverClose });
+    useEffect(() => {
+        hoverHandlersRef.current = { open: handleHoverOpen, close: handleHoverClose };
+    }, [handleHoverOpen, handleHoverClose]);
     useEffect(() => {
         if (opened) {
             updateAnchorMeasurements();
@@ -32320,14 +31878,26 @@ const PopoverBase = (props, ref) => {
         if (typeof resolvedMaxHeight === 'number')
             sizeStyles.maxHeight = resolvedMaxHeight;
         const dropdownStyle = [popoverStyles.dropdown, dropdownState.style, sizeStyles];
-        const content = (jsxs(View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null], pointerEvents: dropdownState.trapFocus ? 'auto' : 'box-none', testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownState.containerProps, children: [jsx(View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsx(View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
+        // Hover handlers for the dropdown to keep it open when mouse moves from target to dropdown
+        const dropdownHoverHandlers = trigger === 'hover' && Platform.OS === 'web'
+            ? {
+                onMouseEnter: () => hoverHandlersRef.current.open(),
+                onMouseLeave: () => hoverHandlersRef.current.close(),
+            }
+            : {};
+        // Hide content until we have measurement-based positioning to prevent visual "snap"
+        const hasMeasuredPosition = (positioningResult === null || positioningResult === void 0 ? void 0 : positioningResult._hasMeasuredPopover) === true;
+        const visibilityStyle = !hasMeasuredPosition && Platform.OS === 'web'
+            ? { opacity: 0 }
+            : {};
+        const content = (jsxs(View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null, visibilityStyle], pointerEvents: trigger === 'hover' ? 'auto' : (dropdownState.trapFocus ? 'auto' : 'box-none'), testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownHoverHandlers, ...dropdownState.containerProps, children: [jsx(View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsx(View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
         showOverlay(content, {
             width: widthOverride,
             maxHeight: resolvedMaxHeight,
             zIndex,
         });
         onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(positioningResult.placement);
-    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, width, maxHeight, minWidth, minHeight, maxWidth, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate]);
+    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, width, maxHeight, minWidth, minHeight, maxWidth, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate, trigger, isPositioning]);
     useEffect(() => {
         return () => {
             hideOverlay();
@@ -32348,6 +31918,8 @@ const PopoverBase = (props, ref) => {
         open: openPopover,
         close: () => closePopover('programmatic'),
         toggle: togglePopover,
+        hoverOpen: handleHoverOpen,
+        hoverClose: handleHoverClose,
         registerDropdown,
         unregisterDropdown,
         anchorRef,
@@ -32356,7 +31928,8 @@ const PopoverBase = (props, ref) => {
         withRoles,
         disabled,
         returnFocus,
-    }), [opened, openPopover, closePopover, togglePopover, registerDropdown, unregisterDropdown, anchorRef, targetId, dropdownId, withRoles, disabled, returnFocus]);
+        trigger,
+    }), [opened, openPopover, closePopover, togglePopover, handleHoverOpen, handleHoverClose, registerDropdown, unregisterDropdown, anchorRef, targetId, dropdownId, withRoles, disabled, returnFocus, trigger]);
     const setContainerRef = useCallback((node) => {
         if (typeof ref === 'function') {
             ref(node);
@@ -32406,16 +31979,44 @@ const PopoverTargetBase = (props, ref) => {
         : { id: context.targetId };
     const composedRef = mergeRefs(children.ref, externalTargetRef);
     const triggerHandlers = {};
-    triggerHandlers.onPress = (...args) => {
-        const tgt = targetProps;
-        if (tgt && typeof tgt.onPress === 'function') {
-            tgt.onPress(...args);
-        }
-        if (typeof childProps.onPress === 'function') {
-            childProps.onPress(...args);
-        }
-        context.toggle();
-    };
+    const wrapperHoverHandlers = {};
+    // Click trigger: toggle on press
+    if (context.trigger === 'click') {
+        triggerHandlers.onPress = (...args) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onPress === 'function') {
+                tgt.onPress(...args);
+            }
+            if (typeof childProps.onPress === 'function') {
+                childProps.onPress(...args);
+            }
+            context.toggle();
+        };
+    }
+    // Hover trigger: open/close on mouse enter/leave (web only)
+    // Applied to the wrapper View for reliable hover detection
+    if (context.trigger === 'hover' && Platform.OS === 'web') {
+        wrapperHoverHandlers.onMouseEnter = (...args) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onMouseEnter === 'function') {
+                tgt.onMouseEnter(...args);
+            }
+            if (typeof childProps.onMouseEnter === 'function') {
+                childProps.onMouseEnter(...args);
+            }
+            context.hoverOpen();
+        };
+        wrapperHoverHandlers.onMouseLeave = (...args) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onMouseLeave === 'function') {
+                tgt.onMouseLeave(...args);
+            }
+            if (typeof childProps.onMouseLeave === 'function') {
+                childProps.onMouseLeave(...args);
+            }
+            context.hoverClose();
+        };
+    }
     if (Platform.OS === 'web') {
         triggerHandlers.onKeyDown = (event) => {
             const tgt = targetProps;
@@ -32437,7 +32038,14 @@ const PopoverTargetBase = (props, ref) => {
         };
     }
     const dynamicRefProp = { [refProp]: composedRef };
-    delete sanitizedTargetProps.onPress;
+    // Remove handlers that we're overriding from sanitizedTargetProps
+    if (context.trigger === 'click') {
+        delete sanitizedTargetProps.onPress;
+    }
+    if (context.trigger === 'hover') {
+        delete sanitizedTargetProps.onMouseEnter;
+        delete sanitizedTargetProps.onMouseLeave;
+    }
     delete sanitizedTargetProps.onKeyDown;
     const mergedProps = {
         ...sanitizedTargetProps,
@@ -32449,7 +32057,7 @@ const PopoverTargetBase = (props, ref) => {
         mergedProps.disabled = true;
     }
     const anchorWrapperRef = mergeRefs(context.anchorRef, ref);
-    return (jsx(View, { ref: anchorWrapperRef, collapsable: false, children: cloneElement(children, mergedProps) }));
+    return (jsx(View, { ref: anchorWrapperRef, collapsable: false, ...wrapperHoverHandlers, children: cloneElement(children, mergedProps) }));
 };
 const PopoverDropdownBase = (props, _ref) => {
     const { children, trapFocus = false, keepMounted, style, testID, ...rest } = props;
@@ -32493,8 +32101,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
     const [side, alignment] = placement.split('-');
     switch (side) {
         case 'top':
+            // Arrow points down, hide the borders that overlap with content (top-left corner after rotation)
             return {
                 ...base,
+                borderTopWidth: 0,
+                borderLeftWidth: 0,
                 bottom: -arrowSize,
                 left: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32504,8 +32115,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginLeft: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'bottom':
+            // Arrow points up, hide the borders that overlap with content (bottom-right corner after rotation)
             return {
                 ...base,
+                borderBottomWidth: 0,
+                borderRightWidth: 0,
                 top: -arrowSize,
                 left: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32515,8 +32129,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginLeft: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'left':
+            // Arrow points right, hide the borders that overlap with content (bottom-left corner after rotation)
             return {
                 ...base,
+                borderBottomWidth: 0,
+                borderLeftWidth: 0,
                 right: -arrowSize,
                 top: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32526,8 +32143,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginTop: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'right':
+            // Arrow points left, hide the borders that overlap with content (top-right corner after rotation)
             return {
                 ...base,
+                borderTopWidth: 0,
+                borderRightWidth: 0,
                 left: -arrowSize,
                 top: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -33448,7 +33068,7 @@ const filterData = (data, filters, columns, searchValue, rowFeatureToggle) => {
     return filteredData;
 };
 // DataTable component
-const DataTable = ({ id, data, columns, loading = false, error = null, emptyMessage = 'No data available', searchable = true, searchPlaceholder = 'Search...', searchValue: controlledSearchValue, onSearchChange, sortBy = [], onSortChange, filters = [], onFilterChange, pagination, onPaginationChange, selectable = false, selectedRows = [], onSelectionChange, getRowId = (_, index) => index, onRowClick, editMode = false, onEditModeChange, onCellEdit, bulkActions = [], variant = 'default', density = 'normal', height, virtual = false, style, hoverHighlight = true, enableColumnResizing = false, rowFeatureToggle, initialHiddenColumns = [], onColumnVisibilityChange, onColumnSettings, showColumnVisibilityManager = true, rowsPerPageOptions = [10, 25, 50, 100], showRowsPerPageControl = true, rowActions, actionsColumnWidth = 100, fullWidth = true, 
+const DataTable = ({ id, data, columns, loading = false, error = null, emptyMessage = 'No data available', searchable = true, searchPlaceholder = 'Search...', searchValue: controlledSearchValue, onSearchChange, sortBy = [], onSortChange, filters = [], onFilterChange, pagination, onPaginationChange, selectable = false, selectedRows = [], onSelectionChange, getRowId = (_, index) => index, onRowClick, editMode = false, onEditModeChange, onCellEdit, bulkActions = [], variant = 'default', striped: stripedProp, density = 'normal', height, virtual = false, style, hoverHighlight = true, enableColumnResizing = false, rowFeatureToggle, initialHiddenColumns = [], onColumnVisibilityChange, onColumnSettings, showColumnVisibilityManager = true, rowsPerPageOptions = [10, 25, 50, 100], showRowsPerPageControl = true, rowActions, actionsColumnWidth = 100, fullWidth = true, 
 // Border styling props
 rowBorderWidth, rowBorderColor, rowBorderStyle = 'solid', columnBorderWidth, columnBorderColor, columnBorderStyle = 'solid', showOuterBorder = false, outerBorderWidth = 1, outerBorderColor, 
 // Expandable rows props
@@ -33456,6 +33076,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
     const { spacingProps, otherProps } = extractSpacingProps(props);
     const theme = useTheme();
     const { isRTL } = useDirection();
+    const isStriped = stripedProp !== null && stripedProp !== void 0 ? stripedProp : variant === 'striped';
     // Local state
     const [internalSearchValue, setInternalSearchValue] = useState('');
     const [editingCell, setEditingCell] = useState(null);
@@ -33892,7 +33513,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
         const rowElement = (jsxs(Fragment, { children: [jsxs(TableTr, { selected: isSelected, onPress: () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, rowIndex), style: {
                         backgroundColor: isSelected
                             ? theme.colors.primary[1]
-                            : variant === 'striped' && rowIndex % 2 === 1
+                            : isStriped && rowIndex % 2 === 1
                                 ? theme.colors.gray[0]
                                 : 'transparent',
                         borderBottomWidth: rowBorderWidth || (variant === 'bordered' ? 1 : 0),
@@ -33972,7 +33593,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
         borderRadius: showOuterBorder ? 8 : 0
     };
     if (loading) {
-        return (jsxs(View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), jsxs(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: [jsxs(TableTr, { style: { backgroundColor: theme.colors.gray[0] }, children: [selectable && (jsx(TableTh, { w: 50, children: jsx(View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), expandableRowRender && (jsx(TableTh, { w: 50, children: jsx(View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), visibleColumns.map(column => (jsx(TableTh, { w: column.width || columnWidths[column.key], minWidth: column.minWidth, children: jsx(View, { style: {
+        return (jsxs(View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), jsxs(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: [jsxs(TableTr, { style: { backgroundColor: theme.colors.gray[0] }, children: [selectable && (jsx(TableTh, { w: 50, children: jsx(View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), expandableRowRender && (jsx(TableTh, { w: 50, children: jsx(View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), visibleColumns.map(column => (jsx(TableTh, { w: column.width || columnWidths[column.key], minWidth: column.minWidth, children: jsx(View, { style: {
                                             height: 20,
                                             backgroundColor: theme.colors.gray[2],
                                             borderRadius: 4,
@@ -33994,9 +33615,9 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                         borderColor: theme.colors.error[2]
                     }, children: [jsx(Icon, { name: "error", size: 32, color: theme.colors.error[5], style: { marginBottom: 12 } }), jsx(Text, { variant: "h6", color: theme.colors.error[7], style: { marginBottom: 8 }, children: "Error Loading Data" }), jsx(Text, { variant: "p", colorVariant: "muted", style: { textAlign: 'center' }, children: error })] })] }));
     }
-    return (jsxs(View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), virtual ? (jsx(View, { style: [{ width: '100%', overflow: 'hidden' }, tableBorderStyle], children: jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: Platform.OS === 'web', contentContainerStyle: minWidthValue ? { minWidth: minWidthValue } : undefined, children: jsxs(View, { style: { flex: 1 }, children: [jsx(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: headerRow }), processedData.length === 0 ? (jsx(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: emptyStateRow })) : (jsx(FlashList, { data: processedData, keyExtractor: (item, index) => String(getRowId(item, index)), renderItem: renderVirtualRow, ...flashListSizingProps, extraData: flashListExtraData, contentContainerStyle: { flexGrow: 1 }, showsVerticalScrollIndicator: Platform.OS === 'web' }))] }) }) })) : (
+    return (jsxs(View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), virtual ? (jsx(View, { style: [{ width: '100%', overflow: 'hidden' }, tableBorderStyle], children: jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: Platform.OS === 'web', contentContainerStyle: minWidthValue ? { minWidth: minWidthValue } : undefined, children: jsxs(View, { style: { flex: 1 }, children: [jsx(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: headerRow }), processedData.length === 0 ? (jsx(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: emptyStateRow })) : (jsx(FlashList, { data: processedData, keyExtractor: (item, index) => String(getRowId(item, index)), renderItem: renderVirtualRow, ...flashListSizingProps, extraData: flashListExtraData, contentContainerStyle: { flexGrow: 1 }, showsVerticalScrollIndicator: Platform.OS === 'web' }))] }) }) })) : (
             // <TableScrollContainer style={tableBorderStyle} minWidth={minWidthValue}>
-            jsxs(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth //</TableScrollContainer>={fullWidth}
+            jsxs(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth //</TableScrollContainer>={fullWidth}
                 : true, children: [headerRow, processedData.length === 0 ? emptyStateRow : nonVirtualRows] })
             // </TableScrollContainer>
             ), pagination && onPaginationChange && (jsx(View, { style: {
@@ -35661,104 +35282,6 @@ const Ring = factory((props, ref) => {
     return (jsxs(View, { ref: ref, style: [styles$8.container, spacingStyles, style], testID: testID, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : `Ring value ${Math.round(percent)} percent`, accessibilityRole: "progressbar", accessibilityValue: { min, max, now: Math.round(clampedValue) }, ...otherProps, children: [jsxs(View, { style: [styles$8.ringWrapper, { width: size, height: size }, ringStyle], children: [jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [jsx(Circle, { cx: size / 2, cy: size / 2, r: radius, stroke: defaultTrackColor, strokeWidth: thickness, fill: "transparent" }), jsx(Circle, { cx: size / 2, cy: size / 2, r: radius, stroke: resolvedProgressColor, strokeWidth: thickness, strokeLinecap: roundedCaps ? 'round' : 'butt', strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, fill: "transparent", transform: `rotate(-90 ${size / 2} ${size / 2})` })] }), jsx(View, { pointerEvents: "none", style: [styles$8.centerContent, { width: size, height: size }, contentStyle], children: centerContent })] }), caption !== undefined && caption !== null ? (React__default.isValidElement(caption) ? (caption) : (jsx(Text, { variant: "span", size: "xs", color: captionTextColor, weight: "600", style: [{ marginTop: 6, letterSpacing: 1 }, captionStyle], children: caption }))) : null] }));
 }, { displayName: 'Ring' });
 
-const NAVIGATIONPROGRESS_DEFAULTS = {
-    size: 3,
-    color: 'primary',
-    zIndex: 9999,
-    overlay: true,
-    stepInterval: 500,
-    radius: 0,
-};
-
-let subscribers = new Set();
-let internalState = { value: 0, active: false };
-let interval = null;
-function broadcast() { subscribers.forEach(cb => cb({ ...internalState })); }
-function schedule(intervalMs) {
-    clearInterval(interval);
-    interval = setInterval(() => {
-        if (!internalState.active)
-            return;
-        const remain = 100 - internalState.value;
-        const inc = Math.max(0.1, remain * 0.03);
-        internalState.value = Math.min(99, internalState.value + inc);
-        broadcast();
-    }, intervalMs);
-}
-const navigationProgress = {
-    start() { if (internalState.active)
-        return; internalState.active = true; if (internalState.value >= 100)
-        internalState.value = 0; broadcast(); schedule(NAVIGATIONPROGRESS_DEFAULTS.stepInterval); },
-    stop() { internalState.active = false; broadcast(); },
-    complete() { internalState.active = true; internalState.value = 100; broadcast(); setTimeout(() => { internalState.active = false; internalState.value = 0; broadcast(); }, 400); },
-    reset() { internalState.value = 0; internalState.active = false; broadcast(); },
-    set(v) { internalState.value = Math.max(0, Math.min(100, v)); broadcast(); },
-    increment(delta = 5) { internalState.value = Math.min(100, internalState.value + delta); broadcast(); },
-    decrement(delta = 5) { internalState.value = Math.max(0, internalState.value - delta); broadcast(); },
-    isActive() { return internalState.active; }
-};
-const NavigationProgress = ({ value, size = NAVIGATIONPROGRESS_DEFAULTS.size, color = NAVIGATIONPROGRESS_DEFAULTS.color, zIndex = NAVIGATIONPROGRESS_DEFAULTS.zIndex, overlay = NAVIGATIONPROGRESS_DEFAULTS.overlay, stepInterval = NAVIGATIONPROGRESS_DEFAULTS.stepInterval, radius = NAVIGATIONPROGRESS_DEFAULTS.radius, active = true, style }) => {
-    const theme = useTheme();
-    const scheme = useColorScheme();
-    const isDark = scheme === 'dark';
-    const progress = useSharedValue(0);
-    const opacity = useSharedValue(0);
-    useEffect(() => {
-        const sub = (s) => {
-            if (value == null) {
-                progress.value = withTiming(s.value, { duration: stepInterval });
-                opacity.value = withTiming(s.active ? 1 : 0, { duration: 150 });
-            }
-        };
-        subscribers.add(sub);
-        broadcast();
-        return () => { subscribers.delete(sub); };
-    }, [value, stepInterval, progress, opacity]);
-    useEffect(() => {
-        if (value != null) {
-            progress.value = withTiming(value, { duration: stepInterval });
-            opacity.value = withTiming(active ? 1 : 0, { duration: 150 });
-        }
-    }, [value, active, stepInterval]);
-    let resolvedColor = color;
-    if (theme.colors[color]) {
-        const bucket = theme.colors[color];
-        resolvedColor = bucket[5] || bucket[4] || bucket[0];
-    }
-    const barStyle = useAnimatedStyle(() => ({ width: `${progress.value}%` }));
-    const containerStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
-    return (jsxs(Animated.View, { style: [
-            {
-                position: overlay ? 'absolute' : 'relative',
-                top: 0,
-                left: 0,
-                right: 0,
-                height: size,
-                backgroundColor: isDark ? theme.colors.gray[3] : theme.colors.gray[2],
-                overflow: 'hidden',
-                zIndex,
-                borderRadius: radius,
-                pointerEvents: 'none'
-            },
-            containerStyle,
-            style
-        ], children: [jsx(Animated.View, { style: [{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        left: 0,
-                        backgroundColor: resolvedColor,
-                        borderRadius: radius,
-                    }, barStyle] }), jsx(Animated.View, { style: [{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        right: 0,
-                        width: 80,
-                        backgroundColor: 'rgba(255,255,255,0.2)'
-                    }, barStyle] })] }));
-};
-
 const DEFAULT_OPACITY = 0.6;
 const HEX_COLOR_REGEX = /^#?[0-9a-f]{3,8}$/i;
 const clampOpacity = (value) => {
@@ -35951,270 +35474,6 @@ const LoadingOverlay = React__default.forwardRef((props, ref) => {
 });
 LoadingOverlay.displayName = 'LoadingOverlay';
 
-// A lightweight hover-activated floating panel similar to Mantine HoverCard
-function HoverCardBase(props, ref) {
-    const { children, target, position = 'top', offset = 8, openDelay = 100, closeDelay = 150, opened: controlledOpened, shadow = 'md', radius = 'md', withinPortal = true, width, withArrow = false, closeOnEscape = true, onOpen, onClose, disabled = false, style, testID, zIndex = 3000, keepMounted = false, trigger = 'hover', } = props;
-    const [opened, setOpened] = useState(false);
-    const openTimeout = useRef(null);
-    const closeTimeout = useRef(null);
-    const containerRef = useRef(null);
-    const targetRef = useRef(null);
-    const overlayIdRef = useRef(null);
-    const overlayContentRef = useRef(null);
-    const isHoveringTargetRef = useRef(false);
-    const isHoveringOverlayRef = useRef(false);
-    const theme = useTheme();
-    const { openOverlay, closeOverlay, updateOverlay } = useOverlay();
-    const isOpened = controlledOpened !== undefined ? controlledOpened : opened;
-    const clearTimers = () => {
-        if (openTimeout.current) {
-            clearTimeout(openTimeout.current);
-            openTimeout.current = null;
-        }
-        if (closeTimeout.current) {
-            clearTimeout(closeTimeout.current);
-            closeTimeout.current = null;
-        }
-    };
-    const doOpen = useCallback(() => {
-        if (disabled)
-            return;
-        setOpened(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    }, [disabled, onOpen]);
-    const doClose = useCallback(() => {
-        setOpened(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [onClose]);
-    const scheduleOpen = useCallback(() => {
-        clearTimers();
-        openTimeout.current = setTimeout(doOpen, openDelay);
-    }, [doOpen, openDelay]);
-    const scheduleClose = useCallback(() => {
-        clearTimers();
-        closeTimeout.current = setTimeout(() => {
-            // Only close if neither target nor overlay are hovered (web)
-            if (Platform.OS === 'web') {
-                if (isHoveringTargetRef.current || isHoveringOverlayRef.current)
-                    return;
-            }
-            doClose();
-        }, closeDelay);
-    }, [doClose, closeDelay]);
-    useEffect(() => () => clearTimers(), []);
-    // Escape key (web only)
-    useEffect(() => {
-        if (!closeOnEscape || Platform.OS !== 'web')
-            return;
-        const handler = (e) => { if (e.key === 'Escape')
-            doClose(); };
-        document.addEventListener('keydown', handler);
-        return () => document.removeEventListener('keydown', handler);
-    }, [closeOnEscape, doClose]);
-    const getInlinePositionStyle = () => {
-        const base = { position: 'absolute' };
-        switch (position) {
-            case 'top': return { ...base, bottom: '100%', left: 0, marginBottom: offset };
-            case 'bottom': return { ...base, top: '100%', left: 0, marginTop: offset };
-            case 'left': return { ...base, right: '100%', top: 0, marginRight: offset };
-            case 'right': return { ...base, left: '100%', top: 0, marginLeft: offset };
-            default: return { ...base, top: '100%', left: 0, marginTop: offset };
-        }
-    };
-    const shadowStyle = (() => {
-        switch (shadow) {
-            case 'sm':
-                return { boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', elevation: 2 };
-            case 'md':
-                return { boxShadow: '0 2px 4px rgba(0, 0, 0, 0.15)', elevation: 4 };
-            case 'lg':
-                return { boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', elevation: 8 };
-            default:
-                return {};
-        }
-    })();
-    const renderArrow = (placement) => {
-        if (!withArrow)
-            return null;
-        const base = { position: 'absolute', width: 0, height: 0 };
-        const color = theme.colors.gray[0];
-        const styles = {
-            top: { top: '100%', left: 12, borderLeftWidth: 6, borderRightWidth: 6, borderTopWidth: 6, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderTopColor: color },
-            bottom: { bottom: '100%', left: 12, borderLeftWidth: 6, borderRightWidth: 6, borderBottomWidth: 6, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: color },
-            left: { left: '100%', top: 12, borderTopWidth: 6, borderBottomWidth: 6, borderLeftWidth: 6, borderTopColor: 'transparent', borderBottomColor: 'transparent', borderLeftColor: color },
-            right: { right: '100%', top: 12, borderTopWidth: 6, borderBottomWidth: 6, borderRightWidth: 6, borderTopColor: 'transparent', borderBottomColor: 'transparent', borderRightColor: color },
-        };
-        const key = placement.split('-')[0];
-        return jsx(View, { style: { ...base, ...(styles[key] || styles.top) } });
-    };
-    const openPortal = useCallback(async () => {
-        if (!withinPortal || !isOpened || overlayIdRef.current)
-            return;
-        const rect = await measureElement(targetRef);
-        const estWidth = width || 240;
-        const estHeight = 160; // rough initial height
-        const pos = calculateOverlayPositionEnhanced(rect, { width: estWidth, height: estHeight }, {
-            placement: position,
-            offset,
-            viewport: getViewport(),
-            strategy: 'fixed'
-        });
-        const overlayContent = (jsxs(View, { ref: overlayContentRef, style: [
-                {
-                    backgroundColor: theme.colors.gray[0],
-                    borderRadius: getRadius$2(radius),
-                    paddingHorizontal: getSpacing('md'),
-                    paddingVertical: getSpacing('sm'),
-                    borderWidth: 1,
-                    borderColor: theme.colors.gray[3],
-                    minWidth: width || 160,
-                    maxWidth: width || 320,
-                },
-                shadowStyle,
-            ], ...(Platform.OS === 'web' && trigger === 'hover' ? {
-                onMouseEnter: () => { isHoveringOverlayRef.current = true; clearTimers(); },
-                onMouseLeave: () => { isHoveringOverlayRef.current = false; scheduleClose(); },
-            } : {}), children: [children, renderArrow(pos.placement)] }));
-        const id = openOverlay({
-            content: overlayContent,
-            anchor: { x: pos.x, y: pos.y, width: estWidth, height: estHeight },
-            trigger: trigger,
-            // For hover-triggered overlays, do NOT render a click-outside backdrop – it steals hover
-            // and immediately fires target onMouseLeave. We rely on pointer leave timers instead.
-            closeOnClickOutside: trigger !== 'hover',
-            closeOnEscape: closeOnEscape,
-            strategy: 'fixed',
-            onClose: () => { overlayIdRef.current = null; if (opened)
-                setOpened(false); onClose === null || onClose === void 0 ? void 0 : onClose(); },
-            zIndex
-        });
-        overlayIdRef.current = id;
-    }, [withinPortal, isOpened, overlayIdRef, position, offset, width, trigger, closeOnEscape, theme, radius, shadowStyle, children, opened, onClose, getSpacing, getRadius$2]);
-    const closePortal = useCallback(() => {
-        if (overlayIdRef.current) {
-            closeOverlay(overlayIdRef.current);
-            overlayIdRef.current = null;
-        }
-    }, [closeOverlay]);
-    useEffect(() => {
-        if (withinPortal) {
-            if (isOpened)
-                openPortal();
-            else
-                closePortal();
-        }
-        return () => { if (!isOpened)
-            closePortal(); };
-    }, [isOpened, withinPortal, openPortal, closePortal]);
-    useEffect(() => {
-        if (!withinPortal || Platform.OS !== 'web' || !isOpened || !overlayIdRef.current)
-            return;
-        const handler = () => {
-            Promise.all([measureElement(targetRef)]).then(([rect]) => {
-                var _a, _b;
-                const actualWidth = ((_a = overlayContentRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || width || 240;
-                const actualHeight = ((_b = overlayContentRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 160;
-                const pos = calculateOverlayPositionEnhanced(rect, { width: actualWidth, height: actualHeight }, {
-                    placement: position,
-                    offset,
-                    viewport: getViewport(),
-                    strategy: 'fixed'
-                });
-                updateOverlay(overlayIdRef.current, { anchor: { x: pos.x, y: pos.y, width: actualWidth, height: actualHeight } });
-            });
-        };
-        window.addEventListener('resize', handler);
-        window.addEventListener('scroll', handler, true);
-        return () => {
-            window.removeEventListener('resize', handler);
-            window.removeEventListener('scroll', handler, true);
-        };
-    }, [withinPortal, isOpened, position, offset, width, updateOverlay]);
-    // Smart sizing: after content mounts, measure actual size and reposition if changed
-    useEffect(() => {
-        if (!withinPortal || !isOpened || !overlayIdRef.current)
-            return;
-        let frame;
-        const attempt = () => {
-            Promise.all([
-                measureElement(targetRef),
-                measureElement({ current: overlayContentRef.current })
-            ]).then(([targetRect, contentRect]) => {
-                if (!targetRect.width || !contentRect.width)
-                    return; // skip invalid
-                const desiredWidth = width || contentRect.width;
-                const desiredHeight = contentRect.height;
-                // Recalculate with actual content size
-                const pos = calculateOverlayPositionEnhanced(targetRect, { width: desiredWidth, height: desiredHeight }, {
-                    placement: position,
-                    offset,
-                    viewport: getViewport(),
-                    strategy: 'fixed'
-                });
-                updateOverlay(overlayIdRef.current, { anchor: { x: pos.x, y: pos.y, width: desiredWidth, height: desiredHeight } });
-            });
-        };
-        // Delay a bit to allow layout
-        frame = setTimeout(attempt, 30);
-        return () => { if (frame)
-            clearTimeout(frame); };
-    }, [withinPortal, isOpened, position, offset, width, updateOverlay]);
-    const targetProps = {};
-    if (trigger === 'hover') {
-        if (Platform.OS === 'web') {
-            targetProps.onMouseEnter = () => { isHoveringTargetRef.current = true; scheduleOpen(); };
-            targetProps.onMouseLeave = () => { isHoveringTargetRef.current = false; scheduleClose(); };
-        }
-        else {
-            // fallback: tap to toggle on native
-            targetProps.onPress = () => {
-                if (isOpened) {
-                    doClose();
-                }
-                else {
-                    doOpen();
-                }
-            };
-        }
-    }
-    else if (trigger === 'click') {
-        targetProps.onPress = () => {
-            if (isOpened) {
-                doClose();
-            }
-            else {
-                doOpen();
-            }
-        };
-    }
-    const inlineContent = (isOpened || keepMounted) && !withinPortal ? (jsxs(View, { style: [
-            getInlinePositionStyle(),
-            {
-                backgroundColor: theme.colors.gray[0],
-                borderRadius: getRadius$2(radius),
-                paddingHorizontal: getSpacing('md'),
-                paddingVertical: getSpacing('sm'),
-                borderWidth: 1,
-                borderColor: theme.colors.gray[3],
-                minWidth: width,
-                zIndex,
-            },
-            shadowStyle,
-        ], pointerEvents: "auto", ...(Platform.OS === 'web' && trigger === 'hover' ? {
-            onMouseEnter: () => { isHoveringOverlayRef.current = true; clearTimers(); },
-            onMouseLeave: () => { isHoveringOverlayRef.current = false; scheduleClose(); },
-        } : {}), children: [children, renderArrow(position)] })) : null;
-    return (jsxs(View, { ref: ref, style: [{ position: 'relative', alignSelf: 'flex-start' }, style], testID: testID, children: [jsx(Pressable, { ref: (node) => { containerRef.current = node; targetRef.current = node; }, ...targetProps, style: ({ pressed }) => {
-                    var _a;
-                    return [
-                        { opacity: pressed ? 0.85 : 1 },
-                        (_a = target === null || target === void 0 ? void 0 : target.props) === null || _a === void 0 ? void 0 : _a.style,
-                    ];
-                }, children: target }), inlineContent] }));
-}
-const HoverCard = factory(HoverCardBase);
-HoverCard.displayName = 'HoverCard';
-
 const ContextMenu = ({ children, items, closeOnSelect = true, longPressDelay = 350, maxHeight = 280, onOpen, onClose, open: controlledOpen, position: controlledPosition, portalId, style, }) => {
     var _a, _b;
     const [internalOpen, setInternalOpen] = useState(false);
@@ -37434,49 +36693,101 @@ const CarouselDot = memo(({ index, pageProgress, metrics, totalPages, loop, them
         : { marginHorizontal: metrics.margin, height: baseDotSize, justifyContent: 'center' };
     return (jsx(Pressable, { onPress: handlePress, accessibilityRole: "button", accessibilityLabel: `Go to slide ${index + 1}`, style: containerStyle, children: jsx(Animated.View, { style: [{ borderRadius: baseDotSize / 2 }, animatedStyle] }) }));
 });
+const getBreakpointName = (width) => {
+    if (width >= 1200)
+        return 'xl';
+    if (width >= 992)
+        return 'lg';
+    if (width >= 768)
+        return 'md';
+    if (width >= 576)
+        return 'sm';
+    return 'xs';
+};
+const getViewportWidth = () => {
+    if (Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.innerWidth === 'number') {
+        return window.innerWidth;
+    }
+    const dimensions = Dimensions.get('window');
+    return typeof (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) === 'number' ? dimensions.width : 0;
+};
 // Optimized breakpoint hook with debouncing
 const useOptimizedBreakpoint = () => {
-    const [breakpoint, setBreakpoint] = useState('sm');
+    const computeState = () => {
+        const width = getViewportWidth();
+        return {
+            width,
+            breakpoint: getBreakpointName(width),
+        };
+    };
+    const [state, setState] = useState(computeState);
     useEffect(() => {
         let timeoutId;
-        const compute = () => {
-            const w = Platform.OS === 'web'
-                ? window.innerWidth
-                : Dimensions.get('window').width;
-            let newBreakpoint = 'sm';
-            if (w >= 1200)
-                newBreakpoint = 'xl';
-            else if (w >= 992)
-                newBreakpoint = 'lg';
-            else if (w >= 768)
-                newBreakpoint = 'md';
-            else if (w >= 576)
-                newBreakpoint = 'sm';
-            else
-                newBreakpoint = 'xs';
-            setBreakpoint(prev => prev !== newBreakpoint ? newBreakpoint : prev);
+        const update = () => {
+            const next = computeState();
+            setState(prev => (prev.breakpoint === next.breakpoint && prev.width === next.width) ? prev : next);
         };
-        const debouncedCompute = () => {
+        const debouncedUpdate = () => {
             clearTimeout(timeoutId);
-            timeoutId = setTimeout(compute, 100); // Debounce resize events
+            timeoutId = setTimeout(update, 100); // Debounce resize events
         };
-        compute();
-        if (Platform.OS === 'web') {
-            window.addEventListener('resize', debouncedCompute, { passive: true });
+        update();
+        if (Platform.OS === 'web' && typeof window !== 'undefined') {
+            window.addEventListener('resize', debouncedUpdate, { passive: true });
             return () => {
-                window.removeEventListener('resize', debouncedCompute);
+                window.removeEventListener('resize', debouncedUpdate);
                 clearTimeout(timeoutId);
             };
         }
-        return () => clearTimeout(timeoutId);
+        const subscription = Dimensions.addEventListener('change', debouncedUpdate);
+        return () => {
+            subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+            clearTimeout(timeoutId);
+        };
     }, []);
-    return breakpoint;
+    return state;
+};
+const parseMediaQuery = (query) => {
+    const minMatch = query.match(/min-width:\s*(\d+)px/);
+    const maxMatch = query.match(/max-width:\s*(\d+)px/);
+    return {
+        min: minMatch ? parseInt(minMatch[1], 10) : undefined,
+        max: maxMatch ? parseInt(maxMatch[1], 10) : undefined,
+    };
+};
+const matchQuery = (query, width) => {
+    const { min, max } = parseMediaQuery(query);
+    if (min != null && width < min)
+        return false;
+    if (max != null && width > max)
+        return false;
+    return true;
+};
+const mergeBreakpointProps = (baseProps, breakpointProps, width) => {
+    if (!breakpointProps)
+        return baseProps;
+    const sortedEntries = Object.entries(breakpointProps).sort((a, b) => {
+        var _a, _b;
+        const aMin = (_a = parseMediaQuery(a[0]).min) !== null && _a !== void 0 ? _a : 0;
+        const bMin = (_b = parseMediaQuery(b[0]).min) !== null && _b !== void 0 ? _b : 0;
+        return aMin - bMin;
+    });
+    let resolvedProps = { ...baseProps };
+    sortedEntries.forEach(([query, value]) => {
+        const shouldApply = width != null ? matchQuery(query, width) : (Platform.OS === 'web' && typeof window !== 'undefined' ? window.matchMedia(query).matches : false);
+        if (shouldApply) {
+            resolvedProps = { ...resolvedProps, ...value };
+        }
+    });
+    return resolvedProps;
 };
-const Carousel = (props) => {
-    const { children, orientation = 'horizontal', height = 200, w = 300, showDots = true, showArrows = true, loop = true, autoPlay = false, autoPlayInterval = 3000, itemsPerPage = 1, slideSize, slideGap, itemGap = 16, onSlideChange, style, itemStyle, arrowSize = 'md', dotSize = 'md', // currently uniform size; active expands
+const Carousel = (incomingProps) => {
+    const { breakpoint, width: viewportWidth } = useOptimizedBreakpoint();
+    const mergedProps = useMemo(() => mergeBreakpointProps(incomingProps, incomingProps.breakpoints, viewportWidth), [incomingProps, viewportWidth]);
+    const { children, orientation = 'horizontal', height = 200, showDots = true, showArrows = true, loop = true, autoPlay = false, autoPlayInterval = 3000, itemsPerPage = 1, slidesToScroll, slideSize, slideGap, itemGap = 16, containScroll = 'trimSnaps', startIndex, align = 'start', dragFree = false, skipSnaps = true, dragThreshold, duration, breakpoints: _breakpoints, onSlideChange, style, itemStyle, arrowSize = 'md', dotSize = 'md', // currently uniform size; active expands
     snapToItem = true, // kept for API parity (engine handles snapping)
     windowSize = 0, // 0 means no virtualization
-    reducedMotion = false, ...rest } = props;
+    reducedMotion = false, ...rest } = mergedProps;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
     const theme = useTheme();
@@ -37488,10 +36799,9 @@ const Carousel = (props) => {
     // progress holds absolute item progress (fractional, not modulo) supplied by engine
     const progress = useSharedValue(0);
     const [currentIndex, setCurrentIndex] = useState(0);
+    const hasInitializedRef = useRef(false);
     const itemsArray = useMemo(() => React__default.Children.toArray(children), [children]);
     const totalItems = itemsArray.length;
-    // Use optimized breakpoint detection with debouncing
-    const breakpoint = useOptimizedBreakpoint();
     const resolvedGap = useMemo(() => {
         const raw = resolveResponsive(slideGap, breakpoint);
         if (raw == null)
@@ -37506,7 +36816,7 @@ const Carousel = (props) => {
     }, [slideGap, breakpoint, itemGap]);
     const isVertical = orientation === 'vertical';
     const containerSize = isVertical ? containerHeight : containerWidth;
-    const itemSize = useMemo(() => {
+    const desiredItemSize = useMemo(() => {
         if (containerSize <= 0)
             return 0;
         const rawSize = resolveResponsive(slideSize, breakpoint);
@@ -37532,28 +36842,166 @@ const Carousel = (props) => {
         }
         return (containerSize - resolvedGap * (itemsPerPage - 1)) / itemsPerPage;
     }, [slideSize, breakpoint, containerSize, itemsPerPage, resolvedGap]);
+    const hasLayout = isVertical ? containerHeight > 0 : containerWidth > 0;
+    const baseItemsPerPage = Math.max(1, itemsPerPage);
+    const slidesToScrollValue = Math.max(1, slidesToScroll !== null && slidesToScroll !== void 0 ? slidesToScroll : baseItemsPerPage);
+    const containMode = containScroll === false
+        ? 'none'
+        : containScroll === 'keepSnaps'
+            ? 'keepSnaps'
+            : 'trimSnaps';
+    const isDragFree = !!dragFree;
+    const allowSkipSnaps = skipSnaps !== null && skipSnaps !== void 0 ? skipSnaps : true;
+    const dragThresholdValue = typeof dragThreshold === 'number'
+        ? Math.max(dragThreshold, 0)
+        : undefined;
+    const visibleSlides = useMemo(() => {
+        if (!hasLayout || containerSize <= 0)
+            return baseItemsPerPage;
+        if (desiredItemSize <= 0)
+            return baseItemsPerPage;
+        const maxFit = Math.max(1, Math.floor((containerSize + resolvedGap) / (desiredItemSize + resolvedGap)));
+        if (slideSize == null) {
+            return Math.min(baseItemsPerPage, maxFit);
+        }
+        return maxFit;
+    }, [hasLayout, containerSize, desiredItemSize, resolvedGap, baseItemsPerPage, slideSize]);
+    const cardSize = useMemo(() => {
+        if (!hasLayout)
+            return desiredItemSize;
+        if (visibleSlides <= 1) {
+            if (desiredItemSize > 0)
+                return desiredItemSize;
+            return containerSize > 0 ? containerSize : desiredItemSize;
+        }
+        const totalGap = resolvedGap * (visibleSlides - 1);
+        const available = Math.max(containerSize - totalGap, 0);
+        return available / visibleSlides;
+    }, [hasLayout, desiredItemSize, visibleSlides, resolvedGap, containerSize]);
+    const slideExtent = useMemo(() => {
+        if (!hasLayout || cardSize <= 0)
+            return undefined;
+        return cardSize + resolvedGap;
+    }, [hasLayout, cardSize, resolvedGap]);
+    const scrollStep = useMemo(() => {
+        if (totalItems === 0)
+            return slidesToScrollValue;
+        return Math.min(slidesToScrollValue, Math.max(1, totalItems));
+    }, [slidesToScrollValue, totalItems]);
+    const maxScrollDistancePerSwipe = useMemo(() => {
+        if (allowSkipSnaps || slideExtent == null)
+            return undefined;
+        return slideExtent * scrollStep;
+    }, [allowSkipSnaps, slideExtent, scrollStep]);
+    const lastStart = useMemo(() => Math.max(totalItems - visibleSlides, 0), [totalItems, visibleSlides]);
+    const pageStartIndices = useMemo(() => {
+        if (totalItems === 0)
+            return [];
+        if (loop) {
+            const count = Math.max(1, Math.ceil(totalItems / scrollStep));
+            return Array.from({ length: count }, (_, idx) => (idx * scrollStep) % totalItems);
+        }
+        const starts = [];
+        const seen = new Set();
+        const limit = containMode === 'none' ? Math.max(totalItems - 1, 0) : lastStart;
+        const addStart = (value) => {
+            if (!seen.has(value)) {
+                seen.add(value);
+                starts.push(Math.max(0, value));
+            }
+        };
+        for (let start = 0; start <= limit; start += scrollStep) {
+            const value = containMode === 'trimSnaps'
+                ? Math.min(start, lastStart)
+                : start;
+            addStart(value);
+        }
+        if (containMode !== 'trimSnaps') {
+            addStart(lastStart);
+        }
+        starts.sort((a, b) => a - b);
+        return starts;
+    }, [totalItems, loop, scrollStep, containMode, lastStart]);
+    const pagedItems = useMemo(() => {
+        if (!totalItems)
+            return [];
+        return pageStartIndices.map(start => {
+            const group = [];
+            for (let offset = 0; offset < visibleSlides; offset++) {
+                const targetIndex = start + offset;
+                if (loop) {
+                    const normalized = ((targetIndex % totalItems) + totalItems) % totalItems;
+                    group.push(itemsArray[normalized]);
+                }
+                else if (targetIndex < totalItems) {
+                    group.push(itemsArray[targetIndex]);
+                }
+            }
+            return group;
+        });
+    }, [pageStartIndices, visibleSlides, loop, totalItems, itemsArray]);
+    const totalPages = pagedItems.length;
+    const normalizedStartIndex = useMemo(() => {
+        if (!totalItems)
+            return 0;
+        const rawIndex = startIndex !== null && startIndex !== void 0 ? startIndex : 0;
+        if (loop) {
+            return ((rawIndex % totalItems) + totalItems) % totalItems;
+        }
+        return Math.max(0, Math.min(rawIndex, Math.max(totalItems - 1, 0)));
+    }, [startIndex, totalItems, loop]);
+    const initialPageStart = useMemo(() => {
+        if (!totalItems)
+            return 0;
+        const base = Math.floor(normalizedStartIndex / scrollStep) * scrollStep;
+        if (loop) {
+            return totalItems ? base % totalItems : 0;
+        }
+        if (containMode === 'none') {
+            return Math.min(base, Math.max(totalItems - 1, 0));
+        }
+        if (containMode === 'keepSnaps') {
+            return Math.min(base, Math.max(totalItems - 1, 0));
+        }
+        return Math.min(base, lastStart);
+    }, [normalizedStartIndex, scrollStep, loop, totalItems, containMode, lastStart]);
+    const initialPageIndex = useMemo(() => {
+        if (!pageStartIndices.length)
+            return 0;
+        const idx = pageStartIndices.indexOf(initialPageStart);
+        return idx >= 0 ? idx : 0;
+    }, [pageStartIndices, initialPageStart]);
     const handleLayout = useCallback((e) => {
         setContainerWidth(e.nativeEvent.layout.width);
         setContainerHeight(e.nativeEvent.layout.height);
     }, []);
-    const goTo = useCallback((index) => {
-        if (!carouselRef.current)
-            return;
-        if (totalItems === 0)
+    const scrollToPage = useCallback((index, animated = true) => {
+        if (!carouselRef.current || totalPages === 0)
             return;
-        const clamped = ((index % totalItems) + totalItems) % totalItems;
+        const clamped = ((index % totalPages) + totalPages) % totalPages;
         const delta = clamped - currentIndex;
-        if (delta === 0)
+        if (delta === 0) {
+            if (!animated) {
+                progress.value = clamped;
+                setCurrentIndex(clamped);
+            }
             return;
-        // For looping choose shortest path if loop enabled
+        }
         let count = delta;
         if (loop) {
-            const alt = delta > 0 ? delta - totalItems : delta + totalItems;
+            const alt = delta > 0 ? delta - totalPages : delta + totalPages;
             if (Math.abs(alt) < Math.abs(count))
                 count = alt;
         }
-        carouselRef.current.scrollTo({ count, animated: true });
-    }, [carouselRef, totalItems, currentIndex, loop]);
+        carouselRef.current.scrollTo({ count, animated });
+        if (!animated) {
+            progress.value = clamped;
+            setCurrentIndex(clamped);
+        }
+    }, [carouselRef, totalPages, currentIndex, loop, progress]);
+    const goTo = useCallback((index) => {
+        scrollToPage(index, true);
+    }, [scrollToPage]);
     const goPrev = useCallback(() => {
         if (!carouselRef.current)
             return;
@@ -37564,13 +37012,22 @@ const Carousel = (props) => {
             return;
         carouselRef.current.next();
     }, []);
-    const totalPages = useMemo(() => totalItems, [totalItems]);
     // Page progress derived directly from absolute item progress
     const pageProgress = useDerivedValue(() => {
         return progress.value;
     }, []);
     const arrowMetrics = useMemo(() => resolveCarouselArrowMetrics(arrowSize), [arrowSize]);
     const dotMetrics = useMemo(() => resolveCarouselDotMetrics(dotSize), [dotSize]);
+    const alignJustify = useMemo(() => {
+        switch (align) {
+            case 'center':
+                return 'center';
+            case 'end':
+                return 'flex-end';
+            default:
+                return 'flex-start';
+        }
+    }, [align]);
     // Memoized render functions to prevent unnecessary re-renders
     const renderDots = useMemo(() => {
         if (!showDots || totalPages <= 1)
@@ -37586,7 +37043,7 @@ const Carousel = (props) => {
     }, [showDots, totalPages, pageProgress, dotMetrics, loop, theme, goTo, isVertical, isRTL]);
     // Arrows
     const renderArrows = () => {
-        if (!showArrows || totalItems <= 1)
+        if (!showArrows || totalPages <= 1)
             return null;
         const buttonSize = arrowMetrics.buttonSizeToken;
         const iconSize = arrowMetrics.iconSize;
@@ -37623,37 +37080,69 @@ const Carousel = (props) => {
                     }, children: jsx(Button, { size: buttonSize, variant: "secondary", icon: jsx(Icon, { name: isRTL ? 'chevron-left' : 'chevron-right', size: iconSize }), onPress: goNext, radius: "full" }) })] }));
     };
     // Autoplay: if library autoPlay not sufficient for pause logic, we can just pass through for now.
-    const enableAutoPlay = autoPlay && totalItems > 1;
+    const enableAutoPlay = autoPlay && totalPages > 1;
+    useEffect(() => {
+        if (!carouselRef.current || totalPages === 0 || !hasLayout)
+            return;
+        const controlledStart = startIndex != null;
+        if (controlledStart) {
+            scrollToPage(initialPageIndex, false);
+            return;
+        }
+        if (!hasInitializedRef.current) {
+            scrollToPage(initialPageIndex, false);
+            hasInitializedRef.current = true;
+        }
+    }, [scrollToPage, initialPageIndex, startIndex, totalPages, hasLayout]);
     return (jsxs(View, { ref: containerRef, style: [
             {
+                width: '100%',
                 position: 'relative',
                 ...(isVertical ? { flexDirection: 'row' } : {})
             },
             spacingStyles,
             style
-        ], onLayout: handleLayout, ...otherProps, children: [jsx(View, { style: { flex: 1 }, children: itemSize > 0 && (jsx(ReanimatedCarousel, { ref: carouselRef, width: isVertical ? containerWidth : itemSize, height: isVertical ? itemSize : height, style: isVertical ? { height: containerHeight } : { width: containerWidth }, vertical: isVertical, loop: loop, autoPlay: enableAutoPlay, autoPlayInterval: autoPlayInterval, data: itemsArray, pagingEnabled: snapToItem, windowSize: windowSize > 0 ? windowSize : undefined, 
+        ], onLayout: handleLayout, ...otherProps, children: [jsx(View, { style: { flex: 1 }, children: hasLayout && pagedItems.length > 0 && cardSize > 0 && (jsx(ReanimatedCarousel, { ref: carouselRef, width: isVertical ? containerWidth : containerWidth, height: isVertical ? containerHeight : height, style: isVertical ? { height: containerHeight } : { width: containerWidth }, vertical: isVertical, loop: loop, autoPlay: enableAutoPlay, autoPlayInterval: autoPlayInterval, data: pagedItems, pagingEnabled: isDragFree ? false : snapToItem, snapEnabled: isDragFree ? false : undefined, windowSize: windowSize > 0 ? windowSize : undefined, scrollAnimationDuration: duration, 
                     // Performance optimizations
                     overscrollEnabled: false, enabled: !reducedMotion, withAnimation: reducedMotion ?
                         { type: 'timing', config: { duration: 100 } } :
-                        { type: 'spring', config: { damping: 60, stiffness: 150 } }, onProgressChange: (offset, absolute) => {
+                        { type: 'spring', config: { damping: 60, stiffness: 150 } }, maxScrollDistancePerSwipe: maxScrollDistancePerSwipe, minScrollDistancePerSwipe: dragThresholdValue, onProgressChange: (offset, absolute) => {
                         // absolute may be undefined in some versions; fallback to offset
                         const val = typeof absolute === 'number' ? absolute : offset;
                         progress.value = val;
-                        const ci = ((Math.round(val) % totalItems) + totalItems) % totalItems;
+                        const ci = totalPages > 0
+                            ? ((Math.round(val) % totalPages) + totalPages) % totalPages
+                            : 0;
                         if (ci !== currentIndex) {
                             setCurrentIndex(ci);
                             onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(ci);
                         }
-                    }, renderItem: ({ item, index }) => (jsx(View, { style: [
-                            {
-                                width: isVertical ? containerWidth : itemSize,
-                                height: isVertical ? itemSize : height,
-                                ...(isVertical
-                                    ? { marginBottom: index < itemsArray.length - 1 ? resolvedGap : 0 }
-                                    : { marginRight: index < itemsArray.length - 1 ? resolvedGap : 0 }),
-                            },
-                            itemStyle,
-                        ], accessibilityLabel: `Carousel item ${index + 1} of ${totalItems}`, children: item })) })) }), renderArrows(), renderDots] }));
+                    }, renderItem: ({ item, index }) => {
+                        const pageItems = Array.isArray(item) ? item : [item];
+                        const pageWidth = isVertical ? containerWidth : containerWidth;
+                        const pageHeight = isVertical ? containerHeight : height;
+                        const justify = containMode === 'trimSnaps' ? 'flex-start' : alignJustify;
+                        return (jsx(View, { style: [
+                                {
+                                    width: pageWidth,
+                                    height: pageHeight,
+                                    justifyContent: 'center',
+                                },
+                                itemStyle,
+                            ], accessibilityLabel: `Carousel item ${index + 1} of ${totalPages}`, children: jsx(View, { style: {
+                                    flexDirection: isVertical ? 'column' : 'row',
+                                    alignItems: 'stretch',
+                                    justifyContent: justify,
+                                    flexWrap: 'nowrap',
+                                    flex: 1,
+                                }, children: pageItems.map((child, childIndex) => (jsx(View, { style: {
+                                        width: isVertical ? '100%' : cardSize,
+                                        height: isVertical ? cardSize : '100%',
+                                        marginRight: !isVertical && childIndex < pageItems.length - 1 ? resolvedGap : 0,
+                                        marginBottom: isVertical && childIndex < pageItems.length - 1 ? resolvedGap : 0,
+                                        flexShrink: 0,
+                                    }, children: child }, childIndex))) }) }));
+                    } })) }), renderArrows(), renderDots] }));
 };
 
 // Types extracted to types.ts
@@ -39574,11 +39063,14 @@ QRCodeSVG.displayName = 'QRCodeSVG';
  */
 function QRCode(props) {
     var _a;
+    const theme = useTheme();
     const { spacingProps, otherProps: propsAfterSpacing } = extractSpacingProps(props);
     const { layoutProps, otherProps } = extractLayoutProps(propsAfterSpacing);
-    const { value, size = 400, backgroundColor = 'transparent', color = '#000000', errorCorrectionLevel = 'M', quietZone = 4, logo, style, testID, accessibilityLabel, onError, onLoadStart, // deprecated noop
+    const { value, size = 400, backgroundColor = 'transparent', color, errorCorrectionLevel = 'M', quietZone = 4, logo, style, testID, accessibilityLabel, onError, onLoadStart, // deprecated noop
     onLoadEnd, // deprecated noop
     ...rest } = otherProps;
+    // Default color to theme's primary text color for dark mode support
+    const resolvedColor = color !== null && color !== void 0 ? color : theme.text.primary;
     const { copy } = useClipboard();
     const toast = useToast();
     const shouldCopyOnPress = !!otherProps.copyOnPress;
@@ -39594,7 +39086,7 @@ function QRCode(props) {
             });
         }
     }, [copy, copyValue, toast, otherProps.copyToastMessage, otherProps.copyToastTitle]);
-    const content = (jsxs(View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsx(QRCodeSVG, { value: value, size: size, maxWidth: '100%', backgroundColor: backgroundColor, color: color, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
+    const content = (jsxs(View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsx(QRCodeSVG, { value: value, size: size, maxWidth: '100%', backgroundColor: backgroundColor, color: resolvedColor, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
     if (shouldCopyOnPress) {
         return (jsx(Pressable, { onPress: handleCopy, accessibilityLabel: accessibilityLabel || 'QR code', children: content }));
     }
@@ -41667,5 +41159,5 @@ function withPressAnimation(Component, animationProps) {
  */
 const AnimatedPressable = PressAnimation;
 
-export { AbilityCore, 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, Can, CanWithConditions, Cannot, 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, HoverCard, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, Lottie, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, NavigationProgress, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PermissionBuilder, PermissionGate, PermissionPatterns, PermissionProvider, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, RichTextEditor, Ring, RoleBuilder, 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, defineAbility, defineAppLayout, defineRoleAbility, 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, navigationProgress, onDialogsRequested, onSpotlightRequested, onToastsRequested, permissions, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAbility, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePermissions, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withCan, withCannot, 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, 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, Lottie, 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, RichTextEditor, 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, 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 };
 //# sourceMappingURL=index.js.map