@mrmeg/expo-ui 0.13.0 → 0.15.0

package/dist/components/ToggleGroup.js

@@ -3,9 +3,10 @@ import { Icon } from "./Icon.js";
 import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
 import * as React from "react";
-import { Platform, StyleSheet } from "react-native";
+import { Animated, Platform, StyleSheet } from "react-native";
 const DEFAULT_HIT_SLOP = 8;
 // Size configurations (same as Toggle)
 const TOGGLE_GROUP_SIZES = {
@@ -101,10 +102,35 @@ function ToggleGroup({ variant = "default", size = "default", children, ...props
  * Position (first/last) is automatically detected for rounded corners
  */
 function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }) {
-    const { theme, withAlpha, getContrastingColor } = useTheme();
+    const { theme, withAlpha, getContrastingColor, getFocusRingStyle } = useTheme();
     const context = useToggleGroupContext();
     const { value: groupValue } = ToggleGroupPrimitive.useRootContext();
     const sizeConfig = TOGGLE_GROUP_SIZES[context.size];
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = React.useState(false);
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    const showFocusRing = (event) => {
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
+    };
+    const hideFocusRing = () => {
+        setFocused(false);
+    };
     // Check if this item is selected
     const isSelected = ToggleGroupPrimitive.utils.getIsSelected(groupValue, props.value);
     // Determine the actual background color for this item
@@ -119,60 +145,61 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
     const textColor = isSelected
         ? getContrastingColor(itemBgColor, theme.colors.foreground, theme.colors.background)
         : theme.colors.foreground;
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(ToggleGroupPrimitive.Item, { ...props, style: {
-                    ...styles.item,
-                    height: sizeConfig.height,
-                    minWidth: sizeConfig.minWidth,
-                    paddingHorizontal: sizeConfig.paddingHorizontal,
-                    // Base variant styles
-                    ...(context.variant === "default" && !isSelected && {
-                        backgroundColor: "transparent",
-                        borderColor: theme.colors.border,
-                    }),
-                    ...(context.variant === "default" && isSelected && {
-                        backgroundColor: withAlpha(theme.colors.primary, 0.1),
-                        borderColor: theme.colors.primary,
-                    }),
-                    // Outline variant styles
-                    ...(context.variant === "outline" && !isSelected && {
-                        backgroundColor: "transparent",
-                        borderColor: theme.colors.border,
-                    }),
-                    ...(context.variant === "outline" && isSelected && {
-                        backgroundColor: theme.colors.primary,
-                        borderColor: theme.colors.primary,
-                    }),
-                    // Remove borders between items (except first)
-                    ...(context.variant === "outline" && !isFirst && {
-                        borderLeftWidth: 0,
-                    }),
-                    // Border radius handling
-                    borderRadius: 0, // Remove all radius by default
-                    ...(isFirst && {
-                        borderTopLeftRadius: spacing.radiusMd,
-                        borderBottomLeftRadius: spacing.radiusMd,
-                    }),
-                    ...(isLast && {
-                        borderTopRightRadius: spacing.radiusMd,
-                        borderBottomRightRadius: spacing.radiusMd,
-                    }),
-                    // Single item (both first and last)
-                    ...(isFirst && isLast && {
-                        borderRadius: spacing.radiusMd,
-                    }),
-                    // Disabled state
-                    opacity: props.disabled ? 0.5 : 1,
-                    // Web-specific styles
-                    ...(Platform.OS === "web" && {
-                        cursor: props.disabled ? "not-allowed" : "pointer",
-                        transition: "all 150ms",
-                        userSelect: "none",
-                        // Ensure proper z-index on focus
-                        ...(isSelected && {
-                            zIndex: 10,
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(ToggleGroupPrimitive.Item, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                        ...styles.item,
+                        height: sizeConfig.height,
+                        minWidth: sizeConfig.minWidth,
+                        paddingHorizontal: sizeConfig.paddingHorizontal,
+                        // Base variant styles
+                        ...(context.variant === "default" && !isSelected && {
+                            backgroundColor: "transparent",
+                            borderColor: theme.colors.border,
+                        }),
+                        ...(context.variant === "default" && isSelected && {
+                            backgroundColor: withAlpha(theme.colors.primary, 0.1),
+                            borderColor: theme.colors.primary,
+                        }),
+                        // Outline variant styles
+                        ...(context.variant === "outline" && !isSelected && {
+                            backgroundColor: "transparent",
+                            borderColor: theme.colors.border,
+                        }),
+                        ...(context.variant === "outline" && isSelected && {
+                            backgroundColor: theme.colors.primary,
+                            borderColor: theme.colors.primary,
+                        }),
+                        // Remove borders between items (except first)
+                        ...(context.variant === "outline" && !isFirst && {
+                            borderLeftWidth: 0,
+                        }),
+                        // Border radius handling
+                        borderRadius: 0, // Remove all radius by default
+                        ...(isFirst && {
+                            borderTopLeftRadius: spacing.radiusMd,
+                            borderBottomLeftRadius: spacing.radiusMd,
+                        }),
+                        ...(isLast && {
+                            borderTopRightRadius: spacing.radiusMd,
+                            borderBottomRightRadius: spacing.radiusMd,
+                        }),
+                        // Single item (both first and last)
+                        ...(isFirst && isLast && {
+                            borderRadius: spacing.radiusMd,
+                        }),
+                        // Disabled state
+                        opacity: props.disabled ? 0.5 : 1,
+                        // Web-specific styles
+                        ...(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: typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }));
+                        ...(focused && !props.disabled ? focusRingStyle : null),
+                    }, 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.use(TextColorContext);

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from "./EmptyState";
 export * from "./ErrorBoundary";
 export * from "./Icon";
 export * from "./InputOTP";
+export * from "./Item";
 export * from "./KeyboardAvoidingView";
 export * from "./Label";
 export * from "./MaxWidthContainer";
@@ -22,11 +23,13 @@ export * from "./Notification";
 export * from "./Popover";
 export * from "./Progress";
 export * from "./RadioGroup";
+export * from "./SectionHeader";
 export * from "./SegmentedControl";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Skeleton";
 export * from "./Slider";
+export * from "./StatCard";
 export * from "./StatusBar";
 export * from "./StyledText";
 export * from "./Switch";

package/dist/components/index.js

@@ -15,6 +15,7 @@ export * from "./EmptyState.js";
 export * from "./ErrorBoundary.js";
 export * from "./Icon.js";
 export * from "./InputOTP.js";
+export * from "./Item.js";
 export * from "./KeyboardAvoidingView.js";
 export * from "./Label.js";
 export * from "./MaxWidthContainer.js";
@@ -22,11 +23,13 @@ export * from "./Notification.js";
 export * from "./Popover.js";
 export * from "./Progress.js";
 export * from "./RadioGroup.js";
+export * from "./SectionHeader.js";
 export * from "./SegmentedControl.js";
 export * from "./Select.js";
 export * from "./Separator.js";
 export * from "./Skeleton.js";
 export * from "./Slider.js";
+export * from "./StatCard.js";
 export * from "./StatusBar.js";
 export * from "./StyledText.js";
 export * from "./Switch.js";

package/dist/constants/fonts.d.ts

@@ -15,7 +15,10 @@ export declare const fontFamilies: {
         bold: string;
     };
     sansSerif: {
+        light: string;
         regular: string;
+        medium: string;
+        semibold: string;
         bold: string;
     };
 };

package/dist/constants/fonts.js

@@ -11,18 +11,35 @@ const isReactNativeRuntime = Platform.OS !== "web";
 const serifFamilies = isWebRuntime
     ? { regular: "Georgia, 'Times New Roman', serif", bold: "Georgia, 'Times New Roman', serif" }
     : { regular: "Georgia", bold: "Georgia" };
+// Web ships one Inter CSS family for every weight — weight differentiation
+// comes from a numeric `fontWeight` set alongside this family (see
+// StyledText's getFontFamilyWeight). Native ships four discrete Inter static
+// font files (loaded by useResources via @expo-google-fonts/inter), each a
+// real weight, so the family name alone carries the weight — do NOT also set
+// `fontWeight` on native or it faux-bolds on top of an already-bold file.
+// `light` maps to the regular file on native: a 5th (300) static weight isn't
+// worth shipping for how rarely `light` is used.
 const sansSerifFamilies = isWebRuntime
     ? {
-        regular: `"Lato", ${WEB_FONT_STACK}`,
-        bold: `"Lato", ${WEB_FONT_STACK}`,
+        light: `"Inter", ${WEB_FONT_STACK}`,
+        regular: `"Inter", ${WEB_FONT_STACK}`,
+        medium: `"Inter", ${WEB_FONT_STACK}`,
+        semibold: `"Inter", ${WEB_FONT_STACK}`,
+        bold: `"Inter", ${WEB_FONT_STACK}`,
     }
     : isReactNativeRuntime
         ? {
-            regular: "System",
-            bold: "System",
+            light: "Inter_400Regular",
+            regular: "Inter_400Regular",
+            medium: "Inter_500Medium",
+            semibold: "Inter_600SemiBold",
+            bold: "Inter_700Bold",
         }
         : {
+            light: "sans-serif",
             regular: "sans-serif",
+            medium: "sans-serif",
+            semibold: "sans-serif",
             bold: "sans-serif",
         };
 export const fontFamilies = {
@@ -39,17 +56,19 @@ export const typography = {
     "3xl": { fontSize: 30, lineHeight: 36 },
     "4xl": { fontSize: 36, lineHeight: 40 },
 };
+// Web: single "Inter" family per weight slot, numeric fontWeight picks the
+// right @font-face variant from the multi-weight stylesheet (see useResources).
 const webNavigationFonts = {
     regular: {
         fontFamily: fontFamilies.sansSerif.regular || WEB_FONT_STACK,
         fontWeight: "400",
     },
     medium: {
-        fontFamily: fontFamilies.sansSerif.regular || WEB_FONT_STACK,
+        fontFamily: fontFamilies.sansSerif.medium || WEB_FONT_STACK,
         fontWeight: "500",
     },
     bold: {
-        fontFamily: fontFamilies.sansSerif.bold || WEB_FONT_STACK,
+        fontFamily: fontFamilies.sansSerif.semibold || WEB_FONT_STACK,
         fontWeight: "600",
     },
     heavy: {
@@ -57,22 +76,26 @@ const webNavigationFonts = {
         fontWeight: "700",
     },
 };
+// Native: each slot points at its own real Inter static file, so the family
+// name alone carries the weight. No numeric fontWeight here — pairing one
+// with an already-weighted static file triggers faux-bold on top of a real
+// weight file (same rule as StyledText's getFontFamilyWeight).
 const nativeNavigationFonts = {
     regular: {
         fontFamily: fontFamilies.sansSerif.regular || "System",
-        fontWeight: "400",
+        fontWeight: "normal",
     },
     medium: {
-        fontFamily: fontFamilies.sansSerif.regular || "System",
-        fontWeight: "500",
+        fontFamily: fontFamilies.sansSerif.medium || "System",
+        fontWeight: "normal",
     },
     bold: {
-        fontFamily: fontFamilies.sansSerif.bold || "System",
-        fontWeight: "600",
+        fontFamily: fontFamilies.sansSerif.semibold || "System",
+        fontWeight: "normal",
     },
     heavy: {
         fontFamily: fontFamilies.sansSerif.bold || "System",
-        fontWeight: "700",
+        fontWeight: "normal",
     },
 };
 const defaultNavigationFonts = {

package/dist/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./colors";
 export * from "./fonts";
+export * from "./motion";
 export * from "./spacing";

package/dist/constants/index.js

@@ -1,3 +1,4 @@
 export * from "./colors.js";
 export * from "./fonts.js";
+export * from "./motion.js";
 export * from "./spacing.js";

package/dist/constants/motion.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Motion Duration Tokens
+ *
+ * Standard durations (ms) for `Animated.timing` transitions. Convention:
+ * ease-out on enter (element appearing/growing), ease-in on exit
+ * (element disappearing/shrinking). Pick the token closest to the intended
+ * feel rather than hand-picking a duration inline.
+ *
+ * - instant: near-immediate feedback (e.g. checkmark/dot toggles)
+ * - fast: small, frequent UI transitions (e.g. switches, accordions)
+ * - normal: default entrance/exit transitions (e.g. drawers, dialogs, toasts)
+ * - slow: larger or more deliberate transitions
+ * - slower: pronounced, attention-getting transitions
+ *
+ * Deliberate outliers (e.g. skeleton/indeterminate pulse loops) are not
+ * expected to use these tokens.
+ */
+export declare const durations: {
+    readonly instant: 75;
+    readonly fast: 150;
+    readonly normal: 200;
+    readonly slow: 300;
+    readonly slower: 500;
+};

package/dist/constants/motion.js

@@ -0,0 +1,24 @@
+/**
+ * Motion Duration Tokens
+ *
+ * Standard durations (ms) for `Animated.timing` transitions. Convention:
+ * ease-out on enter (element appearing/growing), ease-in on exit
+ * (element disappearing/shrinking). Pick the token closest to the intended
+ * feel rather than hand-picking a duration inline.
+ *
+ * - instant: near-immediate feedback (e.g. checkmark/dot toggles)
+ * - fast: small, frequent UI transitions (e.g. switches, accordions)
+ * - normal: default entrance/exit transitions (e.g. drawers, dialogs, toasts)
+ * - slow: larger or more deliberate transitions
+ * - slower: pronounced, attention-getting transitions
+ *
+ * Deliberate outliers (e.g. skeleton/indeterminate pulse loops) are not
+ * expected to use these tokens.
+ */
+export const durations = {
+    instant: 75,
+    fast: 150,
+    normal: 200,
+    slow: 300,
+    slower: 500,
+};

package/dist/constants/spacing.d.ts

@@ -24,12 +24,12 @@ export declare const spacing: {
     readonly listItemSpacing: 8;
     readonly touchTarget: 44;
     readonly radiusNone: 0;
-    readonly radiusXs: 2;
-    readonly radiusSm: 4;
-    readonly radiusMd: 6;
-    readonly radiusLg: 8;
-    readonly radiusXl: 12;
-    readonly radius2xl: 16;
+    readonly radiusXs: 4;
+    readonly radiusSm: 8;
+    readonly radiusMd: 12;
+    readonly radiusLg: 14;
+    readonly radiusXl: 18;
+    readonly radius2xl: 24;
     readonly radiusFull: 9999;
     readonly iconXs: 12;
     readonly iconSm: 16;
@@ -37,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, 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 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: 4, radiusSm: 8, radiusMd: 12, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
 export declare const space: (multiplier: number) => number;

package/dist/constants/spacing.js

@@ -27,14 +27,14 @@ export const spacing = {
     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)
+    // Border radius — shadcn-inspired scale (radiusMd = 12px default)
     radiusNone: 0,
-    radiusXs: 2,
-    radiusSm: 4,
-    radiusMd: 6,
-    radiusLg: 8,
-    radiusXl: 12,
-    radius2xl: 16,
+    radiusXs: 4,
+    radiusSm: 8,
+    radiusMd: 12,
+    radiusLg: 14,
+    radiusXl: 18,
+    radius2xl: 24,
     radiusFull: 9999, // For circular elements
     // Icon sizes
     iconXs: 12,

package/dist/hooks/useResources.d.ts

@@ -5,8 +5,10 @@ interface LoadResourcesResult {
 /**
  * Loads essential app resources on startup.
  *
- * The UI package does not bundle font files. Web loads Lato from Google Fonts;
- * native platforms use their system sans-serif fallback.
+ * Native platforms load four static Inter weights (via
+ * @expo-google-fonts/inter) so StyledText's weight range resolves to real
+ * font files. Web loads Inter from Google Fonts as a single CSS family;
+ * weight differentiation there comes from a numeric fontWeight instead.
  */
 export declare const useResources: () => LoadResourcesResult;
 export {};

package/dist/hooks/useResources.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import * as Font from "expo-font";
 import Feather from "@expo/vector-icons/Feather";
+import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_700Bold, } from "@expo-google-fonts/inter";
 import { Platform } from "react-native";
 // Eager, module-scope load so expo-font registers Feather in its SSR
 // serverContext. When the server renders the HTML document, expo-font emits
@@ -11,30 +12,50 @@ import { Platform } from "react-native";
 // the effect; the effect's loadAsync becomes a no-op for the already-loaded
 // font.
 void Font.loadAsync(Feather.font);
-const LATO_STYLESHEET_ID = "mrmeg-expo-ui-lato";
-const LATO_STYLESHEET_URL = "https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap";
+// The four static Inter weights StyledText's native family keys point at
+// (see constants/fonts.ts). Native-only: web never renders these family names
+// ("Inter_400Regular" etc.) — fontFamilies.sansSerif resolves every weight to
+// the single "Inter" CSS family on web (loaded via ensureWebFontStylesheet
+// below), so fetching these .ttf assets there would just be ~1.3MB of dead
+// weight with nothing pointing at them.
+const interFontMap = {
+    Inter_400Regular,
+    Inter_500Medium,
+    Inter_600SemiBold,
+    Inter_700Bold,
+};
+function loadNativeInterFonts() {
+    if (Platform.OS === "web") {
+        return Promise.resolve();
+    }
+    return Font.loadAsync(interFontMap);
+}
+const INTER_STYLESHEET_ID = "mrmeg-expo-ui-inter";
+const INTER_STYLESHEET_URL = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
 function ensureWebFontStylesheet() {
     if (Platform.OS !== "web" || typeof document === "undefined") {
         return Promise.resolve();
     }
-    if (document.getElementById(LATO_STYLESHEET_ID)) {
+    if (document.getElementById(INTER_STYLESHEET_ID)) {
         return Promise.resolve();
     }
     return new Promise((resolve, reject) => {
         const link = document.createElement("link");
-        link.id = LATO_STYLESHEET_ID;
+        link.id = INTER_STYLESHEET_ID;
         link.rel = "stylesheet";
-        link.href = LATO_STYLESHEET_URL;
+        link.href = INTER_STYLESHEET_URL;
         link.onload = () => resolve();
-        link.onerror = () => reject(new Error("Lato stylesheet failed to load"));
+        link.onerror = () => reject(new Error("Inter stylesheet failed to load"));
         document.head.appendChild(link);
     });
 }
 /**
  * Loads essential app resources on startup.
  *
- * The UI package does not bundle font files. Web loads Lato from Google Fonts;
- * native platforms use their system sans-serif fallback.
+ * Native platforms load four static Inter weights (via
+ * @expo-google-fonts/inter) so StyledText's weight range resolves to real
+ * font files. Web loads Inter from Google Fonts as a single CSS family;
+ * weight differentiation there comes from a numeric fontWeight instead.
  */
 export const useResources = () => {
     const [loaded, setLoaded] = useState(false);
@@ -45,6 +66,7 @@ export const useResources = () => {
             try {
                 const fontPromise = Promise.all([
                     Font.loadAsync(Feather.font),
+                    loadNativeInterFonts(),
                     ensureWebFontStylesheet(),
                 ]);
                 // Timeout after 5 seconds — proceed with system fallback fonts

package/dist/hooks/useStaggeredEntrance.d.ts

@@ -14,7 +14,7 @@ interface StaggeredEntranceOptions {
     delay?: number;
     /**
      * Duration of the entrance animation (ms)
-     * @default 200
+     * @default durations.normal (200)
      */
     duration?: number;
     /**

package/dist/hooks/useStaggeredEntrance.js

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef } from "react";
 import { Animated, Easing } from "react-native";
 import { useReducedMotion } from "./useReduceMotion.js";
+import { durations } from "../constants/motion.js";
 /**
  * Hook for entrance animations with stagger support using React Native Animated.
  *
@@ -21,7 +22,7 @@ import { useReducedMotion } from "./useReduceMotion.js";
  * ```
  */
 export function useStaggeredEntrance(options = {}) {
-    const { type = "fadeSlideUp", delay = 0, duration = 200, slideDistance = 8, initialScale = 0.95, } = options;
+    const { type = "fadeSlideUp", delay = 0, duration = durations.normal, slideDistance = 8, initialScale = 0.95, } = options;
     const reduceMotion = useReducedMotion();
     const opacity = useRef(new Animated.Value(reduceMotion ? 1 : 0)).current;
     const translateY = useRef(new Animated.Value(reduceMotion

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') → { boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)" }
+ * - getShadowStyle('base') → { boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.03)" }
  */
 export declare function useTheme(): ExtendedColorScheme & {
     toggleTheme: () => void;