@mrmeg/expo-ui 0.14.0 → 0.16.0

package/dist/components/Toggle.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { useState } from "react";
 import { Icon } from "./Icon.js";
 import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as TogglePrimitive from "@rn-primitives/toggle";
-import { Platform, StyleSheet, ActivityIndicator } from "react-native";
+import { Platform, StyleSheet, ActivityIndicator, Animated } from "react-native";
 import { palette } from "../constants/colors.js";
 const DEFAULT_HIT_SLOP = 8;
 // Size configurations
@@ -73,8 +74,10 @@ const TOGGLE_SIZES = {
  * ```
  */
 function Toggle({ variant = "default", size = "default", shape = "default", loading = false, iconOnly = false, style: styleOverride, ...props }) {
-    const { theme, getContrastingColor, withAlpha } = useTheme();
+    const { theme, getContrastingColor, getFocusRingStyle, withAlpha } = useTheme();
     const sizeConfig = TOGGLE_SIZES[size];
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = useState(false);
     // Calculate text color based on state and variant
     const getTextColor = () => {
         if (props.pressed) {
@@ -101,45 +104,69 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
     const isDisabled = props.disabled || loading;
     const children = props.children;
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TogglePrimitive.Root, { ...props, disabled: isDisabled, style: {
-                    ...styles.root,
-                    height: sizeConfig.height,
-                    minWidth: sizeConfig.minWidth,
-                    paddingHorizontal: iconOnly ? sizeConfig.height / 2 - sizeConfig.iconSize / 2 : sizeConfig.paddingHorizontal,
-                    borderRadius: getBorderRadius(),
-                    // Base variant styles
-                    ...(variant === "default" && !props.pressed && {
-                        backgroundColor: "transparent",
-                        borderColor: theme.colors.border,
-                    }),
-                    ...(variant === "default" && props.pressed && {
-                        backgroundColor: withAlpha(theme.colors.primary, 0.1),
-                        borderColor: theme.colors.primary,
-                    }),
-                    // Outline variant styles
-                    ...(variant === "outline" && !props.pressed && {
-                        backgroundColor: "transparent",
-                        borderColor: theme.colors.primary,
-                    }),
-                    ...(variant === "outline" && props.pressed && {
-                        backgroundColor: theme.colors.primary,
-                        borderColor: theme.colors.primary,
-                    }),
-                    // Disabled state
-                    opacity: isDisabled ? 0.5 : 1,
-                    // Web-specific styles
-                    ...(Platform.OS === "web" && {
-                        cursor: isDisabled ? "not-allowed" : "pointer",
-                        transition: "all 150ms",
-                        userSelect: "none",
-                    }),
-                    // Apply custom style override
-                    ...(flattenedStyle || {}),
-                }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "button", accessibilityState: {
-                    selected: props.pressed,
-                    disabled: !!isDisabled,
-                    busy: loading,
-                }, children: loading ? (_jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })) : typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!isDisabled,
+        scaleTo: 0.92,
+        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);
+    };
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(TogglePrimitive.Root, { ...props, disabled: isDisabled, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                        ...styles.root,
+                        height: sizeConfig.height,
+                        minWidth: sizeConfig.minWidth,
+                        paddingHorizontal: iconOnly ? sizeConfig.height / 2 - sizeConfig.iconSize / 2 : sizeConfig.paddingHorizontal,
+                        borderRadius: getBorderRadius(),
+                        // Base variant styles
+                        ...(variant === "default" && !props.pressed && {
+                            backgroundColor: "transparent",
+                            borderColor: theme.colors.border,
+                        }),
+                        ...(variant === "default" && props.pressed && {
+                            backgroundColor: withAlpha(theme.colors.primary, 0.1),
+                            borderColor: theme.colors.primary,
+                        }),
+                        // Outline variant styles
+                        ...(variant === "outline" && !props.pressed && {
+                            backgroundColor: "transparent",
+                            borderColor: theme.colors.primary,
+                        }),
+                        ...(variant === "outline" && props.pressed && {
+                            backgroundColor: theme.colors.primary,
+                            borderColor: theme.colors.primary,
+                        }),
+                        // Disabled state
+                        opacity: isDisabled ? 0.5 : 1,
+                        // Web-specific styles
+                        ...(Platform.OS === "web" && {
+                            cursor: isDisabled ? "not-allowed" : "pointer",
+                            transition: "all 150ms",
+                            userSelect: "none",
+                        }),
+                        ...(focused && !isDisabled ? focusRingStyle : null),
+                        // Apply custom style override
+                        ...(flattenedStyle || {}),
+                    }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "button", accessibilityState: {
+                        selected: props.pressed,
+                        disabled: !!isDisabled,
+                        busy: loading,
+                    }, children: loading ? (_jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })) : typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }) }));
 }
 function ToggleIcon({ name, size, color }) {
     const contextColor = React.use(TextColorContext);

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

@@ -9,16 +9,55 @@ interface NavigationFonts {
     bold: FontStyle;
     heavy: FontStyle;
 }
-export declare const fontFamilies: {
+/** Weight slots every sans-serif family map must provide. */
+export type FontFamilyWeight = "light" | "regular" | "medium" | "semibold" | "bold";
+/**
+ * How a platform expresses weight for a given family map.
+ *
+ * - `"numeric"` — one multi-weight CSS family (the package's own web default:
+ *   a single `"Inter"` family where a numeric `fontWeight` selects the
+ *   `@font-face` variant).
+ * - `"family"` — each weight is its own separately-registered single-face
+ *   family, so the family name alone carries the weight. Emitting a numeric
+ *   `fontWeight` on top of one makes the renderer synthesise a second layer of
+ *   bold, so `StyledText` suppresses it.
+ *
+ * Native is always `"family"` (discrete static font files). Web is `"numeric"`
+ * by default, but apps that load per-weight faces through `expo-font` — which
+ * registers each file as its own family on web too — must declare `"family"`.
+ */
+export type FontWeightStrategy = "numeric" | "family";
+export type FontFamilyMap = {
     serif: {
         regular: string;
         bold: string;
     };
-    sansSerif: {
-        regular: string;
-        bold: string;
-    };
+    sansSerif: Record<FontFamilyWeight, string>;
 };
+/**
+ * Font overrides a host app can inject to brand the package.
+ *
+ * Mirrors `setColors`: the package ships neutral defaults, but a consuming app
+ * almost always bundles its own faces. Without an injection point, package
+ * components render the package's fonts while app-authored siblings render the
+ * app's — and the only remaining lever is patching `node_modules`, which is
+ * keyed to an exact version and silently stops applying on the next bump.
+ *
+ * Partial by design: override `sansSerif` alone and `serif` keeps its default.
+ */
+export type FontOverrides = {
+    families?: Partial<FontFamilyMap>;
+    /** Defaults to the package's own per-platform behaviour when omitted. */
+    webWeightStrategy?: FontWeightStrategy;
+};
+/** The package's built-in families. Override per-app via `setFonts`. */
+export declare const fontFamilies: FontFamilyMap;
+/**
+ * The package's own web weight strategy: one multi-weight "Inter" family, so
+ * weight comes from a numeric `fontWeight`. Native always behaves as
+ * `"family"` regardless of this value.
+ */
+export declare const defaultWebWeightStrategy: FontWeightStrategy;
 /**
  * Typography scale — Tailwind-matching sizes for consistent text hierarchy.
  * Components can progressively adopt these tokens.

package/dist/constants/fonts.js

@@ -11,24 +11,48 @@ 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",
         };
+/** The package's built-in families. Override per-app via `setFonts`. */
 export const fontFamilies = {
     serif: serifFamilies,
     sansSerif: sansSerifFamilies,
 };
+/**
+ * The package's own web weight strategy: one multi-weight "Inter" family, so
+ * weight comes from a numeric `fontWeight`. Native always behaves as
+ * `"family"` regardless of this value.
+ */
+export const defaultWebWeightStrategy = "numeric";
 export const typography = {
     xs: { fontSize: 12, lineHeight: 16 },
     sm: { fontSize: 14, lineHeight: 20 },
@@ -39,17 +63,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 +83,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 {};