@mrmeg/expo-ui 0.8.0 → 0.10.0

package/LLM_USAGE.md

@@ -125,8 +125,9 @@ Token intent:
 
 Use `getShadowStyle()` for package surfaces that need elevation. It supports
 `base`, `soft`, `sharp`, `subtle`, `elevated`, `glow`, `glass`, `card`,
-`cardHover`, and `cardSubtle`, returning native shadow/elevation off web and
-CSS `boxShadow` on web. Use `getFocusRingStyle()` for web focus styling. Keep
+`cardHover`, and `cardSubtle`, returning a cross-platform `boxShadow` value
+(RN 0.85 + react-native-web 0.21 deprecate the legacy `shadow*` props). Use
+`getFocusRingStyle()` for web focus styling. Keep
 web controls compact, but preserve mobile tap comfort with package controls
 that already provide native hit slop or 44px touch rows.
 

package/dist/components/Drawer.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
 import { ViewProps, StyleProp, ViewStyle } from "react-native";
 type DrawerSide = "left" | "right";
+/**
+ * Drawer presentation mode.
+ * - `"overlay"` (default): modal drawer that slides in over content with a backdrop.
+ * - `"rail"`: docked, always-mounted collapsible sidebar (icon strip that expands to
+ *   a labeled panel). It is in-flow and pushes sibling content as it grows.
+ */
+type DrawerVariant = "overlay" | "rail";
 interface DrawerProps {
     /** Controlled open state */
     open?: boolean;
@@ -10,10 +17,30 @@ interface DrawerProps {
     defaultOpen?: boolean;
     /** Which side the drawer appears from */
     side?: DrawerSide;
-    /** Drawer width in pixels or percentage string */
+    /** Drawer width in pixels or percentage string (overlay mode only) */
     width?: number | `${number}%`;
     /** Whether to close when backdrop is pressed */
     closeOnBackdropPress?: boolean;
+    /**
+     * Presentation mode. `"overlay"` (default) is the classic modal drawer;
+     * `"rail"` is a docked collapsible sidebar. See {@link DrawerVariant}.
+     */
+    variant?: DrawerVariant;
+    /** Collapsed (icon-strip) width in pixels for rail mode. @default 72 */
+    collapsedWidth?: number;
+    /** Expanded (labeled-panel) width in pixels for rail mode. @default 240 */
+    expandedWidth?: number;
+    /**
+     * Whether the rail expands on hover (web only — native has no hover).
+     * @default true on web, false on native
+     */
+    expandOnHover?: boolean;
+    /** Default expanded state for uncontrolled rail mode. @default false */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state for rail mode */
+    expanded?: boolean;
+    /** Callback when rail expanded state changes */
+    onExpandedChange?: (expanded: boolean) => void;
     /** Children components */
     children: React.ReactNode;
 }
@@ -46,9 +73,28 @@ interface DrawerBodyProps extends ViewProps {
 interface DrawerFooterProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, children, }: DrawerProps): React.JSX.Element;
+declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, variant, collapsedWidth, expandedWidth, expandOnHover, defaultExpanded, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }: DrawerProps): React.JSX.Element;
 declare function DrawerTrigger({ asChild, children, style: styleOverride }: DrawerTriggerProps): React.JSX.Element;
-declare function DrawerContent({ swipeEnabled, swipeThreshold, velocityThreshold, style: styleOverride, children, ...props }: DrawerContentProps): React.JSX.Element | null;
+interface DrawerToggleCollapseProps {
+    /** Use child component as the toggle */
+    asChild?: boolean;
+    /** Children components */
+    children: React.ReactNode;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Toggles the rail's expanded state. Native has no hover, so a rail needs an
+ * explicit expand/collapse control; this provides it. On web it works too and
+ * coexists with `expandOnHover`.
+ */
+declare function DrawerToggleCollapse({ asChild, children, style: styleOverride }: DrawerToggleCollapseProps): React.JSX.Element;
+/**
+ * DrawerContent dispatches to the overlay or rail implementation based on the
+ * `variant` set on the Drawer root. Both implementations are separate components
+ * so their hooks never run conditionally.
+ */
+declare function DrawerContent(props: DrawerContentProps): React.JSX.Element;
 declare function DrawerHeader({ children, style, ...props }: DrawerHeaderProps): React.JSX.Element;
 declare function DrawerBody({ children, style, ...props }: DrawerBodyProps): React.JSX.Element;
 declare function DrawerFooter({ children, style, ...props }: DrawerFooterProps): React.JSX.Element;
@@ -69,6 +115,7 @@ declare const Drawer: typeof DrawerRoot & {
     Body: typeof DrawerBody;
     Footer: typeof DrawerFooter;
     Close: typeof DrawerClose;
+    ToggleCollapse: typeof DrawerToggleCollapse;
 };
-export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, useDrawerClose, };
-export type { DrawerProps, DrawerTriggerProps, DrawerContentProps, DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerCloseProps, };
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, DrawerToggleCollapse, useDrawerClose, };
+export type { DrawerProps, DrawerVariant, DrawerTriggerProps, DrawerContentProps, DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerCloseProps, DrawerToggleCollapseProps, };

package/dist/components/Drawer.js

@@ -78,11 +78,31 @@ function drawerReducer(state, action) {
 // ============================================================================
 // Drawer Root Component
 // ============================================================================
-function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, side = "left", width = 300, closeOnBackdropPress = true, children, }) {
+function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, side = "left", width = 300, closeOnBackdropPress = true, variant = "overlay", collapsedWidth = 72, expandedWidth = 240, expandOnHover = Platform.OS === "web", defaultExpanded = false, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }) {
     // Use reducer for stable state management - dispatch is stable and reducer always gets current state
     const [internalOpen, dispatch] = useReducer(drawerReducer, defaultOpen);
     const isControlled = controlledOpen !== undefined;
     const open = isControlled ? controlledOpen : internalOpen;
+    // Rail expand/collapse state (mirrors the open machinery: controlled or uncontrolled)
+    const [internalExpanded, expandedDispatch] = useReducer(drawerReducer, defaultExpanded);
+    const isExpandedControlled = controlledExpanded !== undefined;
+    const expanded = isExpandedControlled ? controlledExpanded : internalExpanded;
+    const setExpanded = (newExpanded) => {
+        if (isExpandedControlled) {
+            controlledOnExpandedChange?.(newExpanded);
+        }
+        else {
+            expandedDispatch({ type: newExpanded ? "OPEN" : "CLOSE" });
+        }
+    };
+    const toggleExpanded = () => {
+        if (isExpandedControlled) {
+            controlledOnExpandedChange?.(!controlledExpanded);
+        }
+        else {
+            expandedDispatch({ type: "TOGGLE" });
+        }
+    };
     // Stable toggle function - dispatch is stable across renders
     const toggle = () => {
         if (isControlled) {
@@ -113,6 +133,13 @@ function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange
         side,
         width: parsedWidth,
         closeOnBackdropPress,
+        variant,
+        expanded,
+        setExpanded,
+        toggleExpanded,
+        collapsedWidth,
+        expandedWidth,
+        expandOnHover,
     };
     return (_jsx(DrawerContext.Provider, { value: contextValue, children: children }));
 }
@@ -142,10 +169,50 @@ function DrawerTrigger({ asChild, children, style: styleOverride }) {
             styleOverride,
         ], children: children }));
 }
+/**
+ * Toggles the rail's expanded state. Native has no hover, so a rail needs an
+ * explicit expand/collapse control; this provides it. On web it works too and
+ * coexists with `expandOnHover`.
+ */
+function DrawerToggleCollapse({ asChild, children, style: styleOverride }) {
+    const { expanded, toggleExpanded } = useDrawerContext();
+    const accessibilityLabel = expanded ? "Collapse sidebar" : "Expand sidebar";
+    const handlePress = () => {
+        toggleExpanded();
+    };
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            onPress: handlePress,
+            accessibilityRole: "button",
+            accessibilityLabel,
+            style: [
+                children.props.style,
+                Platform.OS === "web" && { cursor: "pointer" },
+                styleOverride,
+            ],
+        });
+    }
+    return (_jsx(Pressable, { onPress: handlePress, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, style: [
+            Platform.OS === "web" && { cursor: "pointer" },
+            styleOverride,
+        ], children: children }));
+}
 // ============================================================================
 // Drawer Content Component
 // ============================================================================
-function DrawerContent({ swipeEnabled = true, swipeThreshold = 0.3, velocityThreshold = 500, style: styleOverride, children, ...props }) {
+/**
+ * DrawerContent dispatches to the overlay or rail implementation based on the
+ * `variant` set on the Drawer root. Both implementations are separate components
+ * so their hooks never run conditionally.
+ */
+function DrawerContent(props) {
+    const { variant } = useDrawerContext();
+    if (variant === "rail") {
+        return _jsx(DrawerRailContent, { ...props });
+    }
+    return _jsx(DrawerOverlayContent, { ...props });
+}
+function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, velocityThreshold = 500, style: styleOverride, children, ...props }) {
     const drawerContext = useDrawerContext();
     const { open, onOpenChange, side, width, closeOnBackdropPress } = drawerContext;
     const { theme, getShadowStyle } = useTheme();
@@ -358,6 +425,115 @@ function DrawerContent({ swipeEnabled = true, swipeThreshold = 0.3, velocityThre
     return contentElement;
 }
 // ============================================================================
+// Drawer Rail Content Component
+// ============================================================================
+/**
+ * Rail variant of DrawerContent: a docked, always-mounted collapsible sidebar.
+ *
+ * Native open model: the rail is always docked and collapsed; `Drawer.ToggleCollapse`
+ * (or hover on web) expands it. It is decoupled from the overlay `open` state — there
+ * is no slide-in/unmount.
+ *
+ * Layout model: the rail is **in-flow** and pushes sibling content. The panel itself
+ * occupies layout width (`collapsedWidth` → `expandedWidth`); animating that width
+ * reflows whatever renders beside it. Put the rail and the content in a
+ * `flexDirection: "row"` container so the content claims the remaining space.
+ */
+function DrawerRailContent({ 
+// Overlay-only props are accepted (shared DrawerContentProps) but ignored in rail mode.
+swipeEnabled: _swipeEnabled, swipeThreshold: _swipeThreshold, velocityThreshold: _velocityThreshold, style: styleOverride, children, ...props }) {
+    const { side, expanded, collapsedWidth, expandedWidth, expandOnHover } = useDrawerContext();
+    const { theme, getShadowStyle } = useTheme();
+    const insets = useSafeAreaInsets();
+    // Hover is a transient "peek" tracked locally; the pinned state comes from
+    // `expanded` (toggle / controlled prop). The rail is open when either is true,
+    // so hovering then leaving never clears a pin the toggle set — they don't
+    // share one piece of state. Hover is web-only (native has no pointer).
+    const [hovered, setHovered] = useState(false);
+    // If the rail is explicitly collapsed (toggle / controlled prop flips
+    // `expanded` true→false) while the pointer is still over it, the active hover
+    // would instantly re-expand it and the collapse would look like a no-op.
+    // Suppress the current hover session in that case; a fresh mouse-enter clears
+    // the suppression so peek-on-hover works again. Tracked in a ref, read during
+    // the re-render that the `expanded` change already triggers (same pattern as
+    // `lastExpandedRef` below).
+    const hoverSuppressedRef = useRef(false);
+    const prevExpandedRef = useRef(expanded);
+    if (prevExpandedRef.current !== expanded) {
+        const wasExpanded = prevExpandedRef.current;
+        prevExpandedRef.current = expanded;
+        if (wasExpanded && !expanded && hovered) {
+            hoverSuppressedRef.current = true;
+        }
+    }
+    const effectiveExpanded = expanded || (expandOnHover && hovered && !hoverSuppressedRef.current);
+    const textColor = theme.colors.foreground;
+    const targetWidth = effectiveExpanded ? expandedWidth : collapsedWidth;
+    // Native animates width via Animated.Value (layout prop → useNativeDriver: false).
+    // Web sets the width directly and lets the inline CSS `transition` animate it.
+    const widthRef = useRef(null);
+    if (widthRef.current === null) {
+        widthRef.current = new Animated.Value(targetWidth);
+    }
+    const widthAnim = widthRef.current;
+    // Trigger the native width animation during render when expansion changes,
+    // mirroring the overlay's lastOpenRef pattern above. Skip the first render:
+    // the Animated.Value is already initialized to the current target, so there is
+    // nothing to animate toward on mount.
+    const lastExpandedRef = useRef(null);
+    if (Platform.OS !== "web" && effectiveExpanded !== lastExpandedRef.current) {
+        const previousExpanded = lastExpandedRef.current;
+        lastExpandedRef.current = effectiveExpanded;
+        if (previousExpanded !== null) {
+            Animated.timing(widthAnim, {
+                toValue: targetWidth,
+                duration: 180,
+                useNativeDriver: false,
+            }).start();
+        }
+    }
+    const shadowStyle = effectiveExpanded
+        ? StyleSheet.flatten(getShadowStyle("elevated"))
+        : undefined;
+    // The rail is in-flow: its own width is what content sits beside, so growing it
+    // pushes that content. No absolute positioning, no spacer.
+    const panelStyle = {
+        width: Platform.OS === "web" ? targetWidth : widthAnim,
+        overflow: "hidden",
+        backgroundColor: theme.colors.background,
+        borderColor: theme.colors.border,
+        ...(side === "left" ? { borderRightWidth: 1 } : { borderLeftWidth: 1 }),
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        ...(Platform.OS === "web" && {
+            transition: "width 0.18s ease, box-shadow 0.18s ease",
+        }),
+    };
+    // Hover-to-expand is web-only; native relies on Drawer.ToggleCollapse. These
+    // only toggle the transient hover state — they never touch the pinned
+    // `expanded`, so leaving the rail can't collapse a toggle-pinned panel. A
+    // fresh mouse-enter clears any hover suppression left by an in-place collapse.
+    const hoverHandlers = Platform.OS === "web" && expandOnHover
+        ? {
+            onMouseEnter: () => {
+                hoverSuppressedRef.current = false;
+                setHovered(true);
+            },
+            onMouseLeave: () => {
+                hoverSuppressedRef.current = false;
+                setHovered(false);
+            },
+        }
+        : {};
+    return (_jsx(Animated.View, { style: [
+            panelStyle,
+            shadowStyle,
+            styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : undefined,
+        ], ...(Platform.OS === "web" && { role: "navigation", ...hoverHandlers }), ...props, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: children }) }) }));
+}
+// ============================================================================
 // Drawer Header Component
 // ============================================================================
 function DrawerHeader({ children, style, ...props }) {
@@ -430,5 +606,6 @@ const Drawer = Object.assign(DrawerRoot, {
     Body: DrawerBody,
     Footer: DrawerFooter,
     Close: DrawerClose,
+    ToggleCollapse: DrawerToggleCollapse,
 });
-export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, useDrawerClose, };
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, DrawerToggleCollapse, useDrawerClose, };

package/dist/components/Icon.d.ts

@@ -1,11 +1,14 @@
 import * as React from "react";
 import type { StyleProp, TextProps, TextStyle } from "react-native";
 import Feather from "@expo/vector-icons/Feather";
+import type { ThemeColors } from "../constants/colors";
 /**
- * Theme color names that can be used as shortcuts
- * Only includes colors that actually exist in the theme
+ * Theme color names that can be used as shortcuts.
+ *
+ * Derived from {@link ThemeColors} so it always covers every semantic token
+ * (`foreground`, `accent`, `border`, …) and can never drift from the theme.
  */
-export type ThemeColorName = "primary" | "primaryForeground" | "secondary" | "muted" | "destructive" | "success" | "warning" | "text" | "textDim";
+export type ThemeColorName = keyof ThemeColors;
 export type IconName = React.ComponentProps<typeof Feather>["name"];
 type IconBaseProps = {
     /** Size of the icon in pixels */

package/dist/components/Icon.js

@@ -1,14 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "../hooks/useTheme.js";
 import Feather from "@expo/vector-icons/Feather";
-const THEME_COLOR_KEYS = [
-    "primary", "primaryForeground", "secondary", "muted",
-    "destructive", "success", "warning", "text", "textDim",
-];
+/**
+ * Resolve an icon color against the active theme.
+ *
+ * A string that names an existing theme color resolves to that semantic color;
+ * anything else is treated as a literal color value (hex, `rgb()`, or a CSS
+ * named color). Checking the live theme object — rather than a hand-maintained
+ * list — means new tokens are usable as icon colors automatically, and a token
+ * name never silently falls through as an invalid literal.
+ */
 function resolveIconColor(color, themeColors) {
     if (!color)
         return themeColors.text;
-    if (THEME_COLOR_KEYS.includes(color)) {
+    if (Object.prototype.hasOwnProperty.call(themeColors, color)) {
         return themeColors[color];
     }
     return color;

package/dist/components/ToggleGroup.js

@@ -64,7 +64,7 @@ function useToggleGroupContext() {
  * ```
  */
 function ToggleGroup({ variant = "default", size = "default", children, ...props }) {
-    const { theme } = useTheme();
+    const { getShadowStyle } = useTheme();
     const contextValue = React.useMemo(() => ({ variant, size }), [variant, size]);
     // Count valid children for first/last detection
     const childrenArray = React.Children.toArray(children);
@@ -89,12 +89,7 @@ function ToggleGroup({ variant = "default", size = "default", children, ...props
             alignItems: "center",
             borderRadius: spacing.radiusMd,
             // No shadow on Android - causes text background artifact
-            ...(variant === "outline" && Platform.OS === "ios" && {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.05,
-                shadowRadius: 2,
-            }),
+            ...(variant === "outline" && Platform.OS === "ios" && getShadowStyle("subtle")),
             ...(Platform.OS === "web" && {
                 width: "fit-content",
             }),

package/dist/hooks/useTheme.d.ts

@@ -32,7 +32,7 @@ interface ExtendedColorScheme {
  * - getTextColorForBackground("#000") → "light"
  * - getContrastingColor("#f4f4f4", "#222", "#fff") → "#222"
  * - withAlpha("#336699", 0.6) → "rgba(51,102,153,0.6)"
- * - getShadowStyle('base') → { shadowColor, shadowOffset, ... }
+ * - getShadowStyle('base') → { boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)" }
  */
 export declare function useTheme(): ExtendedColorScheme & {
     toggleTheme: () => void;

package/dist/hooks/useTheme.js

@@ -42,7 +42,7 @@ function getCachedOrCompute(key, compute) {
  * - getTextColorForBackground("#000") → "light"
  * - getContrastingColor("#f4f4f4", "#222", "#fff") → "#222"
  * - withAlpha("#336699", 0.6) → "rgba(51,102,153,0.6)"
- * - getShadowStyle('base') → { shadowColor, shadowOffset, ... }
+ * - getShadowStyle('base') → { boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)" }
  */
 export function useTheme() {
     const userTheme = useThemeStore((s) => s.userTheme);
@@ -93,102 +93,37 @@ export function useTheme() {
     }, [setTheme, userTheme]);
     /**
      * getShadowStyle
-     * Returns platform-appropriate shadow styles
-     * - Web: uses CSS boxShadow through React Native Web
-     * - Native: uses shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation
+     * Returns a cross-platform shadow style using the `boxShadow` style prop.
+     *
+     * RN 0.85 + react-native-web 0.21 deprecate the legacy `shadow*` props in
+     * favor of `boxShadow`, which is supported on both native and web. Because
+     * `boxShadow` has no separate opacity field, each preset's opacity is folded
+     * into the color's alpha via `withAlpha`. `elevation` is dropped — `boxShadow`
+     * renders shadows on Android in 0.85+.
      */
     const getShadowStyle = useCallback((type) => {
+        // Each preset: [offsetX, offsetY, blurRadius, color, opacity].
+        // Darker themes get a stronger alpha so shadows stay visible.
+        const boost = theme.dark ? 3 : 1;
+        const overlay = theme.colors.overlay;
         const shadowConfigs = {
-            base: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.1,
-                shadowRadius: 3,
-                elevation: 3,
-            },
-            soft: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.1,
-                shadowRadius: 6,
-                elevation: 4,
-            },
-            sharp: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.15,
-                shadowRadius: 1,
-                elevation: 2,
-            },
-            subtle: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.05,
-                shadowRadius: 2,
-                elevation: 1,
-            },
-            elevated: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 20 },
-                shadowOpacity: 0.15,
-                shadowRadius: 40,
-                elevation: 16,
-            },
-            glow: {
-                shadowColor: theme.colors.primary,
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.4,
-                shadowRadius: 20,
-                elevation: 10,
-            },
-            glass: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.05,
-                shadowRadius: 30,
-                elevation: 4,
-            },
-            card: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.08,
-                shadowRadius: 8,
-                elevation: 4,
-            },
-            cardHover: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 8 },
-                shadowOpacity: 0.12,
-                shadowRadius: 24,
-                elevation: 8,
-            },
-            cardSubtle: {
-                shadowColor: theme.colors.overlay,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.08,
-                shadowRadius: 3,
-                elevation: 2,
-            },
+            base: { x: 0, y: 1, blur: 3, color: overlay, opacity: 0.1 },
+            soft: { x: 0, y: 4, blur: 6, color: overlay, opacity: 0.1 },
+            sharp: { x: 0, y: 1, blur: 1, color: overlay, opacity: 0.15 },
+            subtle: { x: 0, y: 1, blur: 2, color: overlay, opacity: 0.05 },
+            elevated: { x: 0, y: 20, blur: 40, color: overlay, opacity: 0.15 },
+            glow: { x: 0, y: 4, blur: 20, color: theme.colors.primary, opacity: 0.4 },
+            glass: { x: 0, y: 4, blur: 30, color: overlay, opacity: 0.05 },
+            card: { x: 0, y: 2, blur: 8, color: overlay, opacity: 0.08 },
+            cardHover: { x: 0, y: 8, blur: 24, color: overlay, opacity: 0.12 },
+            cardSubtle: { x: 0, y: 1, blur: 3, color: overlay, opacity: 0.08 },
+        };
+        const { x, y, blur, color, opacity } = shadowConfigs[type];
+        // Don't boost the glow accent — it's already a deliberate, vivid alpha.
+        const alpha = color === theme.colors.primary ? opacity : Math.min(opacity * boost, 1);
+        return {
+            boxShadow: `${x}px ${y}px ${blur}px ${withAlpha(color, alpha)}`,
         };
-        const config = shadowConfigs[type];
-        if (Platform.OS === "web") {
-            const webShadows = {
-                base: { boxShadow: theme.dark ? "0 1px 2px rgba(0, 0, 0, 0.45)" : "0 1px 2px rgba(0, 0, 0, 0.08)" },
-                soft: { boxShadow: theme.dark ? "0 8px 24px rgba(0, 0, 0, 0.36)" : "0 8px 24px rgba(0, 0, 0, 0.10)" },
-                sharp: { boxShadow: theme.dark ? "0 1px 1px rgba(0, 0, 0, 0.55)" : "0 1px 1px rgba(0, 0, 0, 0.12)" },
-                subtle: { boxShadow: theme.dark ? "0 1px 2px rgba(0, 0, 0, 0.32)" : "0 1px 2px rgba(0, 0, 0, 0.05)" },
-                elevated: { boxShadow: theme.dark ? "0 20px 40px rgba(0, 0, 0, 0.38)" : "0 20px 40px rgba(0, 0, 0, 0.15)" },
-                glow: { boxShadow: `0 0 20px ${theme.colors.primary}` },
-                glass: { boxShadow: theme.dark ? "0 4px 30px rgba(0, 0, 0, 0.32)" : "0 4px 30px rgba(0, 0, 0, 0.05)" },
-                card: { boxShadow: theme.dark ? "0 1px 2px rgba(0, 0, 0, 0.32)" : "0 1px 3px rgba(0, 0, 0, 0.08)" },
-                cardHover: { boxShadow: theme.dark ? "0 8px 24px rgba(0, 0, 0, 0.36)" : "0 8px 24px rgba(0, 0, 0, 0.12)" },
-                cardSubtle: { boxShadow: theme.dark ? "0 1px 2px rgba(0, 0, 0, 0.32)" : "0 1px 3px rgba(0, 0, 0, 0.05)" },
-            };
-            return webShadows[type];
-        }
-        return Platform.select({
-            default: config,
-        });
     }, [theme]);
     const getFocusRingStyle = useCallback((offset = 2) => {
         if (Platform.OS !== "web") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [