@mrmeg/expo-ui 0.1.5 → 0.1.7

package/dist/components/ToggleGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
@@ -175,12 +175,13 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
                     ...(Platform.OS === "web" && {
                         cursor: props.disabled ? "not-allowed" : "pointer",
                         transition: "all 150ms",
+                        userSelect: "none",
                         // Ensure proper z-index on focus
                         ...(isSelected && {
                             zIndex: 10,
                         }),
                     }),
-                }, hitSlop: DEFAULT_HIT_SLOP, children: children }) }) }));
+                }, hitSlop: DEFAULT_HIT_SLOP, children: typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }));
 }
 function ToggleGroupIcon({ name, size, color }) {
     const contextColor = React.useContext(TextColorContext);

package/dist/components/Tooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as TooltipPrimitive from "@rn-primitives/tooltip";
@@ -50,9 +50,9 @@ function TooltipContent({ side = "top", align = "center", sideOffset = 4, portal
             case "default":
             default:
                 return {
-                    background: theme.colors.card,
+                    background: theme.colors.popover,
                     border: theme.colors.border,
-                    text: getContrastingColor(theme.colors.card, palette.white, palette.black),
+                    text: getContrastingColor(theme.colors.popover, palette.white, palette.black),
                 };
         }
     };
@@ -69,7 +69,7 @@ function TooltipContent({ side = "top", align = "center", sideOffset = 4, portal
             ...getShadowStyle("soft"),
         },
     ]);
-    return (_jsx(TooltipPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(TooltipPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 150, children: _jsx(TextColorContext.Provider, { value: colors.text, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TooltipPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }));
+    return (_jsx(TooltipPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(TooltipPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 150, children: _jsx(TextColorContext.Provider, { value: colors.text, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TooltipPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }) }));
 }
 function TooltipBody({ children, style, ...props }) {
     return (_jsx(View, { style: [

package/dist/constants/colors.d.ts

@@ -44,6 +44,8 @@ export interface ThemeColors {
     foreground: string;
     card: string;
     cardForeground: string;
+    popover: string;
+    popoverForeground: string;
     text: string;
     textDim: string;
     primary: string;
@@ -59,6 +61,8 @@ export interface ThemeColors {
     success: string;
     warning: string;
     border: string;
+    input: string;
+    ring: string;
     overlay: string;
 }
 export interface Theme {

package/dist/constants/colors.js

@@ -46,8 +46,10 @@ const lightTheme = {
     colors: {
         background: palette.white,
         foreground: palette.gray950,
-        card: palette.gray50,
+        card: palette.white,
         cardForeground: palette.gray950,
+        popover: palette.white,
+        popoverForeground: palette.gray950,
         text: palette.gray950,
         textDim: palette.gray500,
         primary: palette.gray900,
@@ -63,6 +65,8 @@ const lightTheme = {
         success: palette.green500,
         warning: palette.amber500,
         border: palette.gray200,
+        input: palette.gray200,
+        ring: palette.gray400,
         overlay: "rgba(0, 0, 0, 0.5)",
     },
     navigation: {
@@ -82,6 +86,8 @@ const darkTheme = {
         foreground: palette.dark100,
         card: palette.dark800,
         cardForeground: palette.dark100,
+        popover: palette.dark800,
+        popoverForeground: palette.dark100,
         text: palette.dark100,
         textDim: palette.dark400,
         primary: palette.gray50,
@@ -97,6 +103,8 @@ const darkTheme = {
         success: palette.green400,
         warning: palette.amber400,
         border: palette.dark700,
+        input: palette.dark700,
+        ring: palette.dark400,
         overlay: "rgba(0, 0, 0, 0.7)",
     },
     navigation: {

package/dist/constants/spacing.d.ts

@@ -22,6 +22,7 @@ export declare const spacing: {
     readonly cardPadding: 16;
     readonly sectionSpacing: 32;
     readonly listItemSpacing: 8;
+    readonly touchTarget: 44;
     readonly radiusNone: 0;
     readonly radiusXs: 2;
     readonly radiusSm: 4;
@@ -36,5 +37,5 @@ export declare const spacing: {
     readonly iconLg: 32;
     readonly iconXl: 48;
 };
-export declare const base: 8, xxs: 2, xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, buttonPadding: 10, inputPadding: 10, cardPadding: 16, sectionSpacing: 32, listItemSpacing: 8, radiusNone: 0, radiusXs: 2, radiusSm: 4, radiusMd: 6, radiusLg: 8, radiusXl: 12, radius2xl: 16, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
+export declare const base: 8, xxs: 2, xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, buttonPadding: 10, inputPadding: 10, cardPadding: 16, sectionSpacing: 32, listItemSpacing: 8, touchTarget: 44, radiusNone: 0, radiusXs: 2, radiusSm: 4, radiusMd: 6, radiusLg: 8, radiusXl: 12, radius2xl: 16, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
 export declare const space: (multiplier: number) => number;

package/dist/constants/spacing.js

@@ -26,6 +26,7 @@ export const spacing = {
     cardPadding: 16, // Default card padding
     sectionSpacing: 32, // Space between major sections
     listItemSpacing: 8, // Space between list items
+    touchTarget: 44, // Minimum comfortable native touch target
     // Border radius — shadcn-inspired scale (radiusMd = 6px default)
     radiusNone: 0,
     radiusXs: 2,
@@ -43,6 +44,6 @@ export const spacing = {
     iconXl: 48,
 };
 // Export individual constants for convenience
-export const { base, xxs, xs, sm, md, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, buttonPadding, inputPadding, cardPadding, sectionSpacing, listItemSpacing, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
+export const { base, xxs, xs, sm, md, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, buttonPadding, inputPadding, cardPadding, sectionSpacing, listItemSpacing, touchTarget, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
 // Helper function to multiply base spacing
 export const space = (multiplier) => spacing.base * multiplier;

package/dist/hooks/useTheme.d.ts

@@ -1,11 +1,12 @@
 import { Colors } from "../constants/colors";
 import { ViewStyle, StyleSheet } from "react-native";
 import { spacing as spacingConstants } from "../constants/spacing";
-type ShadowType = "base" | "soft" | "sharp" | "subtle";
+type ShadowType = "base" | "soft" | "sharp" | "subtle" | "elevated" | "glow" | "glass" | "card" | "cardHover" | "cardSubtle";
 interface ExtendedColorScheme {
     theme: Colors["light" | "dark"];
     scheme: "light" | "dark";
     getShadowStyle: (type: ShadowType) => ViewStyle;
+    getFocusRingStyle: (offset?: number) => ViewStyle;
     getContrastingColor: (backgroundColor: string, color1?: string, color2?: string) => string;
     getTextColorForBackground: (backgroundColor: string) => "light" | "dark";
     withAlpha: (color: string, alpha: number) => string;
@@ -21,6 +22,7 @@ interface ExtendedColorScheme {
  * - theme: active theme colors (light or dark)
  * - scheme: "light" | "dark"
  * - getShadowStyle(type): returns cross-platform shadow style object
+ * - getFocusRingStyle(offset): returns web focus ring style object
  * - getContrastingColor(bg, color1?, color2?): pick best contrast of two options
  * - getTextColorForBackground(bg): returns "light" or "dark"
  * - withAlpha(color, alpha): adds transparency
@@ -43,6 +45,7 @@ export declare function useTheme(): ExtendedColorScheme & {
 interface StyleContext {
     theme: Colors["light" | "dark"];
     spacing: typeof spacingConstants;
+    withAlpha: (color: string, alpha: number) => string;
 }
 /**
  * Return type for useStyles hook
@@ -56,22 +59,22 @@ type UseStylesReturn<T extends StyleSheet.NamedStyles<T>> = {
  * useStyles
  *
  * A hook that combines useTheme with StyleSheet.create for theme-aware styling.
- * Provides access to theme colors and spacing constants within the style factory.
+ * Provides access to theme colors, spacing constants, and color helpers within the style factory.
  *
- * @param factory - A function that receives { theme, spacing } and returns style definitions
+ * @param factory - A function that receives { theme, spacing, withAlpha } and returns style definitions
  * @returns { styles, theme, spacing, ...themeUtilities }
  *
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { styles, theme } = useStyles(({ theme, spacing }) => ({
+ *   const { styles, theme } = useStyles(({ theme, spacing, withAlpha }) => ({
  *     container: {
- *       backgroundColor: theme.colors.background,
+ *       backgroundColor: withAlpha(theme.colors.primary, 0.08),
  *       padding: spacing.md,
  *       borderRadius: spacing.radiusMd,
  *     },
  *     text: {
- *       color: theme.colors.textPrimary,
+ *       color: theme.colors.text,
  *       fontSize: 16,
  *     },
  *   }));

package/dist/hooks/useTheme.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { colors } from "../constants/colors.js";
 import { useColorScheme as useColorSchemeDefault, Platform, StyleSheet } from "react-native";
 import { useThemeStore } from "../state/themeStore.js";
@@ -31,6 +31,7 @@ function getCachedOrCompute(key, compute) {
  * - theme: active theme colors (light or dark)
  * - scheme: "light" | "dark"
  * - getShadowStyle(type): returns cross-platform shadow style object
+ * - getFocusRingStyle(offset): returns web focus ring style object
  * - getContrastingColor(bg, color1?, color2?): pick best contrast of two options
  * - getTextColorForBackground(bg): returns "light" or "dark"
  * - withAlpha(color, alpha): adds transparency
@@ -61,7 +62,7 @@ export function useTheme() {
         }
     }, [effectiveScheme]);
     // Toggle between light, dark, and system themes
-    const toggleTheme = () => {
+    const toggleTheme = useCallback(() => {
         if (userTheme === "light") {
             setTheme("dark");
         }
@@ -71,14 +72,14 @@ export function useTheme() {
         else {
             setTheme("light");
         }
-    };
+    }, [setTheme, userTheme]);
     /**
      * getShadowStyle
      * Returns platform-appropriate shadow styles
-     * - Web: returns empty object (boxShadow not supported by RN Web)
+     * - Web: uses CSS boxShadow through React Native Web
      * - Native: uses shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation
      */
-    const getShadowStyle = (type) => {
+    const getShadowStyle = useCallback((type) => {
         const shadowConfigs = {
             base: {
                 shadowColor: theme.colors.overlay,
@@ -108,15 +109,79 @@ export function useTheme() {
                 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,
+            },
         };
         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({
-            web: {}, // Empty on web - boxShadow causes crashes
             default: config,
         });
-    };
+    }, [theme]);
+    const getFocusRingStyle = useCallback((offset = 2) => {
+        if (Platform.OS !== "web") {
+            return {};
+        }
+        return {
+            boxShadow: `0 0 0 ${offset}px ${theme.colors.background}, 0 0 0 ${offset + 2}px ${theme.colors.ring}`,
+        };
+    }, [theme.colors.background, theme.colors.ring]);
     // Helper to calculate contrast ratio between two colors
-    const getContrastRatio = (color1, color2) => {
+    const getContrastRatio = useCallback((color1, color2) => {
         const rgb1 = parseColor(color1);
         const rgb2 = parseColor(color2);
         if (!rgb1 || !rgb2) {
@@ -126,17 +191,18 @@ export function useTheme() {
         const lum1 = calculateLuminance(rgb1[0], rgb1[1], rgb1[2]);
         const lum2 = calculateLuminance(rgb2[0], rgb2[1], rgb2[2]);
         return calculateContrastRatio(lum1, lum2);
-    };
+    }, []);
     // Cached version of getContrastingColor for performance
     // Uses module-level cache to prevent memory leak
-    const getCachedContrastingColor = (backgroundColor, color1, color2) => {
+    const getCachedContrastingColor = useCallback((backgroundColor, color1, color2) => {
         const cacheKey = `${backgroundColor}-${color1}-${color2}`;
         return getCachedOrCompute(cacheKey, () => getBetterContrast(backgroundColor, color1, color2));
-    };
-    return {
+    }, []);
+    return useMemo(() => ({
         theme,
         scheme: theme.dark ? "dark" : "light",
         getShadowStyle,
+        getFocusRingStyle,
         toggleTheme,
         setTheme,
         currentTheme: userTheme,
@@ -144,7 +210,16 @@ export function useTheme() {
         getTextColorForBackground,
         withAlpha,
         getContrastRatio,
-    };
+    }), [
+        getCachedContrastingColor,
+        getContrastRatio,
+        getFocusRingStyle,
+        getShadowStyle,
+        setTheme,
+        theme,
+        toggleTheme,
+        userTheme,
+    ]);
 }
 /**
  * Parses a color string (hex or rgba) and returns RGB values.
@@ -277,22 +352,22 @@ function withAlpha(color, alpha) {
  * useStyles
  *
  * A hook that combines useTheme with StyleSheet.create for theme-aware styling.
- * Provides access to theme colors and spacing constants within the style factory.
+ * Provides access to theme colors, spacing constants, and color helpers within the style factory.
  *
- * @param factory - A function that receives { theme, spacing } and returns style definitions
+ * @param factory - A function that receives { theme, spacing, withAlpha } and returns style definitions
  * @returns { styles, theme, spacing, ...themeUtilities }
  *
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { styles, theme } = useStyles(({ theme, spacing }) => ({
+ *   const { styles, theme } = useStyles(({ theme, spacing, withAlpha }) => ({
  *     container: {
- *       backgroundColor: theme.colors.background,
+ *       backgroundColor: withAlpha(theme.colors.primary, 0.08),
  *       padding: spacing.md,
  *       borderRadius: spacing.radiusMd,
  *     },
  *     text: {
- *       color: theme.colors.textPrimary,
+ *       color: theme.colors.text,
  *       fontSize: 16,
  *     },
  *   }));
@@ -307,16 +382,18 @@ function withAlpha(color, alpha) {
  */
 export function useStyles(factory) {
     const themeContext = useTheme();
-    const styles = StyleSheet.create(factory({
+    const styles = useMemo(() => StyleSheet.create(factory({
         theme: themeContext.theme,
         spacing: spacingConstants,
-    }));
-    return {
+        withAlpha: themeContext.withAlpha,
+    })), [factory, themeContext.theme, themeContext.withAlpha]);
+    return useMemo(() => ({
         styles,
         theme: themeContext.theme,
         spacing: spacingConstants,
         scheme: themeContext.scheme,
         getShadowStyle: themeContext.getShadowStyle,
+        getFocusRingStyle: themeContext.getFocusRingStyle,
         getContrastingColor: themeContext.getContrastingColor,
         getTextColorForBackground: themeContext.getTextColorForBackground,
         withAlpha: themeContext.withAlpha,
@@ -324,5 +401,5 @@ export function useStyles(factory) {
         toggleTheme: themeContext.toggleTheme,
         setTheme: themeContext.setTheme,
         currentTheme: themeContext.currentTheme,
-    };
+    }), [styles, themeContext]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -79,11 +79,7 @@
     "publish:dry-run": "bun pm pack --dry-run"
   },
   "dependencies": {
-    "@rn-primitives/portal": "~1.4.0"
-  },
-  "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0 <16.0.0",
-    "@react-native-async-storage/async-storage": ">=2.2.0 <2.3.0",
     "@rn-primitives/accordion": "~1.4.0",
     "@rn-primitives/alert-dialog": "~1.4.0",
     "@rn-primitives/checkbox": "~1.4.0",
@@ -92,6 +88,7 @@
     "@rn-primitives/dropdown-menu": "~1.4.0",
     "@rn-primitives/label": "~1.4.0",
     "@rn-primitives/popover": "~1.4.0",
+    "@rn-primitives/portal": "~1.4.0",
     "@rn-primitives/radio-group": "~1.4.0",
     "@rn-primitives/select": "~1.4.0",
     "@rn-primitives/separator": "~1.4.0",
@@ -100,8 +97,10 @@
     "@rn-primitives/tabs": "~1.4.0",
     "@rn-primitives/toggle": "~1.4.0",
     "@rn-primitives/toggle-group": "~1.4.0",
-    "@rn-primitives/tooltip": "~1.4.0",
-    "@rn-primitives/types": "~1.4.0",
+    "@rn-primitives/tooltip": "~1.4.0"
+  },
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=2.2.0 <2.3.0",
     "expo": "~55.0.0",
     "expo-font": "~55.0.0",
     "expo-haptics": "~55.0.0",