@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/lib/focus-ring.js

@@ -0,0 +1,25 @@
+/**
+ * One focus treatment for every interactive component.
+ *
+ * Web needs this and native does not: React Native has no `:focus-visible`, and the
+ * platforms draw their own focus for hardware keyboards and TV remotes. So these classes
+ * are scoped with Uniwind's `web:` selector and compile to nothing elsewhere.
+ *
+ * `focus-visible`, not `focus`. `:focus` also fires on mouse press, which puts a ring on
+ * a button someone just clicked — visually noisy, and it trains people to ignore the ring
+ * that keyboard users actually depend on.
+ *
+ * WCAG 2.4.7 (Focus Visible, AA) requires an indicator. Several components here removed
+ * the browser default with `outline-none` and replaced it with nothing, which is the
+ * failure this exists to fix — the outline is only safe to remove if a ring takes over.
+ *
+ * The offset keeps the ring outside the control's own border so the two do not merge
+ * into one thick smudge, and `ring-offset-background` fills that gap with the surface
+ * colour rather than letting the ring sit on whatever is behind.
+ */
+export const focusRing = 'web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 web:focus-visible:ring-offset-background';
+/**
+ * For controls drawn flush against an edge or inside a dense row, where an offset ring
+ * would be clipped by the parent or collide with a neighbour.
+ */
+export const focusRingInset = 'web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring';

package/dist/lib/font-context.d.ts

@@ -17,6 +17,7 @@ export interface FontFamilyMap {
 }
 export interface ResolvedFont {
     fontFamily: string;
+    paddingRight?: number;
 }
 export declare const FontProvider: import("react").Provider<FontFamilyMap | null>;
 export interface ResolvedFontResult {
@@ -36,4 +37,3 @@ export interface ResolvedFontResult {
  * ensures the style prop is the sole source of font info.
  */
 export declare function useResolveFontFamily(className?: string): ResolvedFontResult | undefined;
-//# sourceMappingURL=font-context.d.ts.map

package/dist/lib/font-context.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import { Platform } from 'react-native';
 const FontContext = createContext(null);
 export const FontProvider = FontContext.Provider;
 const FONT_WEIGHT_RE = /\bfont-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)\b/g;
@@ -15,18 +16,20 @@ export function useResolveFontFamily(className) {
     const map = useContext(FontContext);
     if (!map)
         return undefined;
+    const isNative = Platform.OS !== 'web';
+    const paddingRight = isNative ? 4 : undefined;
     if (!className)
         return {
-            style: { fontFamily: map['font-normal'] },
+            style: { fontFamily: map['font-normal'], paddingRight },
             className: '',
         };
     const classes = className.split(/\s+/);
-    let resolved = { fontFamily: map['font-normal'] };
+    let resolved = { fontFamily: map['font-normal'], paddingRight };
     for (let i = classes.length - 1; i >= 0; i--) {
         const cls = classes[i];
         const mapped = map[cls];
         if (mapped) {
-            resolved = { fontFamily: mapped };
+            resolved = { fontFamily: mapped, paddingRight };
             break;
         }
     }
@@ -38,4 +41,3 @@ export function useResolveFontFamily(className) {
             .trim(),
     };
 }
-//# sourceMappingURL=font-context.js.map

package/dist/lib/frosted-surface.d.ts

@@ -30,4 +30,3 @@ interface UseFrostedBackdropOptions {
 }
 export declare function useFrostedBackdrop({ frosted, blurIntensity, tintColor, }: UseFrostedBackdropOptions): React.ReactNode;
 export {};
-//# sourceMappingURL=frosted-surface.d.ts.map

package/dist/lib/frosted-surface.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Platform, StyleSheet, View } from 'react-native';
 import { useUniwind } from 'uniwind';
+import { formatRgb, parse } from 'culori';
 import { useThemeColors } from './theme-colors';
 import { useVisualTokens } from './visual-tokens';
 let cachedBlurViewComponent;
@@ -47,6 +48,26 @@ function resolveTintColor(colors, tintToken) {
         return colors.surfaceTranslucent;
     return colors.surfaceElevated;
 }
+function scaleColorAlpha(color, alphaScale) {
+    if (alphaScale === 1)
+        return color;
+    try {
+        const parsed = parse(color);
+        if (!parsed)
+            return color;
+        const currentAlpha = typeof parsed.alpha === 'number' ? parsed.alpha : 1;
+        if (currentAlpha >= 1)
+            return color;
+        const nextColor = {
+            ...parsed,
+            alpha: Math.min(1, Math.max(0, currentAlpha * alphaScale)),
+        };
+        return formatRgb(nextColor) ?? color;
+    }
+    catch {
+        return color;
+    }
+}
 function resolveBlurIntensity(visualTokens, blurIntensity, preset) {
     if (typeof blurIntensity === 'number' && Number.isFinite(blurIntensity)) {
         return Math.max(0, Math.round(blurIntensity));
@@ -60,7 +81,7 @@ function resolveBlurIntensity(visualTokens, blurIntensity, preset) {
 function getInsetAbsoluteFillStyle() {
     const inset = Math.max(0, StyleSheet.hairlineWidth);
     if (inset <= 0) {
-        return StyleSheet.absoluteFillObject;
+        return StyleSheet.absoluteFill;
     }
     return {
         position: 'absolute',
@@ -79,7 +100,7 @@ function FrostedOverlay({ intensity, tintColor, highlightColor, saturationPct, h
         : undefined;
     const showHighlight = highlightHeight > 0;
     const blurFill = getInsetAbsoluteFillStyle();
-    const tintFill = StyleSheet.absoluteFillObject;
+    const tintFill = StyleSheet.absoluteFill;
     const highlightInset = Math.max(0, StyleSheet.hairlineWidth);
     if (!BlurView && Platform.OS === 'web') {
         const webStyle = {
@@ -128,7 +149,7 @@ function FrostedBackdropOverlay({ intensity, tintColor, saturationPct, androidEx
         ? { experimentalBlurMethod: 'dimezisBlurView' }
         : undefined;
     const blurFill = getInsetAbsoluteFillStyle();
-    const tintFill = StyleSheet.absoluteFillObject;
+    const tintFill = StyleSheet.absoluteFill;
     if (!BlurView && Platform.OS === 'web') {
         const webStyle = {
             backdropFilter: `blur(${intensity}px) saturate(${saturationPct}%)`,
@@ -153,6 +174,9 @@ export function useFrostedSurface({ frosted = false, blurIntensity, blurTintToke
     }
     const tintToken = blurTintToken ?? defaultTintToken;
     const tintColor = resolveTintColor(colors, tintToken);
+    const resolvedTintColor = Platform.OS === 'android'
+        ? scaleColorAlpha(tintColor, visualTokens.androidFrostedTintAlphaScale)
+        : tintColor;
     const intensity = resolveBlurIntensity(visualTokens, blurIntensity, defaultBlurPreset);
     const highlightColor = colors.surfaceHighlight;
     const highlightHeight = visualTokens.frostedHighlightHeight;
@@ -160,7 +184,7 @@ export function useFrostedSurface({ frosted = false, blurIntensity, blurTintToke
     const androidExperimentalBlurEnabled = visualTokens.androidExperimentalBlurEnabled;
     return {
         frosted: true,
-        overlay: (_jsx(FrostedOverlay, { intensity: intensity, tintColor: tintColor, highlightColor: highlightColor, highlightHeight: highlightHeight, saturationPct: saturationPct, androidExperimentalBlurEnabled: androidExperimentalBlurEnabled })),
+        overlay: (_jsx(FrostedOverlay, { intensity: intensity, tintColor: resolvedTintColor, highlightColor: highlightColor, highlightHeight: highlightHeight, saturationPct: saturationPct, androidExperimentalBlurEnabled: androidExperimentalBlurEnabled })),
         surfaceStyle: {
             backgroundColor: 'transparent',
             borderColor: colors.surfaceBorder,
@@ -175,7 +199,8 @@ export function useFrostedBackdrop({ frosted = false, blurIntensity, tintColor,
     const intensity = typeof blurIntensity === 'number' && Number.isFinite(blurIntensity)
         ? Math.max(0, Math.round(blurIntensity))
         : visualTokens.frostedBackdropBlurIntensity;
-    const resolvedTintColor = tintColor ?? colors.overlay;
+    const resolvedTintColor = Platform.OS === 'android'
+        ? scaleColorAlpha(tintColor ?? colors.overlay, visualTokens.androidFrostedTintAlphaScale)
+        : (tintColor ?? colors.overlay);
     return (_jsx(FrostedBackdropOverlay, { intensity: intensity, tintColor: resolvedTintColor, saturationPct: visualTokens.blurSaturationPct, androidExperimentalBlurEnabled: visualTokens.androidExperimentalBlurEnabled }));
 }
-//# sourceMappingURL=frosted-surface.js.map

package/dist/lib/interaction-tokens.d.ts

@@ -1,4 +1,13 @@
 import { type PressableProps } from 'react-native';
+/** Motion values used when a `--ui-motion-*` token is absent, and by the provider-less motion policy. */
+export declare const MOTION_TOKEN_DEFAULTS: {
+    readonly motionFast: 140;
+    readonly motionNormal: 200;
+    readonly motionSlow: 280;
+    readonly motionSpringDamping: 20;
+    readonly motionSpringStiffness: 260;
+    readonly motionSpringMass: 0.8;
+};
 export interface InteractionTokens {
     pressOpacity: number;
     pressOpacityStrong: number;
@@ -9,6 +18,9 @@ export interface InteractionTokens {
     motionFast: number;
     motionNormal: number;
     motionSlow: number;
+    motionSpringDamping: number;
+    motionSpringStiffness: number;
+    motionSpringMass: number;
     drawerOpenDuration: number;
     drawerCloseDuration: number;
 }
@@ -23,4 +35,3 @@ export declare function useInteractionTokens(): InteractionTokens;
 type PressableStyle = PressableProps['style'];
 export declare function withInteractivePressableStyle(styleProp: PressableStyle | undefined, tokens: InteractionTokens, options?: InteractivePressableOptions): PressableStyle;
 export {};
-//# sourceMappingURL=interaction-tokens.d.ts.map

package/dist/lib/interaction-tokens.js

@@ -8,8 +8,17 @@ function parseNumber(value, fallback) {
 function clampOpacity(value) {
     return Math.max(0, Math.min(1, value));
 }
+/** Motion values used when a `--ui-motion-*` token is absent, and by the provider-less motion policy. */
+export const MOTION_TOKEN_DEFAULTS = {
+    motionFast: 140,
+    motionNormal: 200,
+    motionSlow: 280,
+    motionSpringDamping: 20,
+    motionSpringStiffness: 260,
+    motionSpringMass: 0.8,
+};
 export function useInteractionTokens() {
-    const [pressOpacity, pressOpacityStrong, disabledOpacity, disabledOpacitySoft, disabledOpacitySubtle, inactiveOpacity, motionFast, motionNormal, motionSlow, drawerOpenDuration, drawerCloseDuration,] = useCSSVariable([
+    const [pressOpacity, pressOpacityStrong, disabledOpacity, disabledOpacitySoft, disabledOpacitySubtle, inactiveOpacity, motionFast, motionNormal, motionSlow, motionSpringDamping, motionSpringStiffness, motionSpringMass, drawerOpenDuration, drawerCloseDuration,] = useCSSVariable([
         '--ui-press-opacity',
         '--ui-press-opacity-strong',
         '--ui-disabled-opacity',
@@ -19,21 +28,27 @@ export function useInteractionTokens() {
         '--ui-motion-fast',
         '--ui-motion-normal',
         '--ui-motion-slow',
+        '--ui-motion-spring-damping',
+        '--ui-motion-spring-stiffness',
+        '--ui-motion-spring-mass',
         '--ui-drawer-open-duration',
         '--ui-drawer-close-duration',
     ]);
     return {
-        pressOpacity: clampOpacity(parseNumber(pressOpacity, 0.72)),
-        pressOpacityStrong: clampOpacity(parseNumber(pressOpacityStrong, 0.9)),
-        disabledOpacity: clampOpacity(parseNumber(disabledOpacity, 0.5)),
-        disabledOpacitySoft: clampOpacity(parseNumber(disabledOpacitySoft, 0.6)),
-        disabledOpacitySubtle: clampOpacity(parseNumber(disabledOpacitySubtle, 0.4)),
-        inactiveOpacity: clampOpacity(parseNumber(inactiveOpacity, 0.5)),
-        motionFast: Math.max(0, Math.round(parseNumber(motionFast, 160))),
-        motionNormal: Math.max(0, Math.round(parseNumber(motionNormal, 220))),
-        motionSlow: Math.max(0, Math.round(parseNumber(motionSlow, 300))),
-        drawerOpenDuration: Math.max(0, Math.round(parseNumber(drawerOpenDuration, 300))),
-        drawerCloseDuration: Math.max(0, Math.round(parseNumber(drawerCloseDuration, 220))),
+        pressOpacity: clampOpacity(parseNumber(pressOpacity, 0.82)),
+        pressOpacityStrong: clampOpacity(parseNumber(pressOpacityStrong, 0.92)),
+        disabledOpacity: clampOpacity(parseNumber(disabledOpacity, 0.46)),
+        disabledOpacitySoft: clampOpacity(parseNumber(disabledOpacitySoft, 0.56)),
+        disabledOpacitySubtle: clampOpacity(parseNumber(disabledOpacitySubtle, 0.36)),
+        inactiveOpacity: clampOpacity(parseNumber(inactiveOpacity, 0.54)),
+        motionFast: Math.max(0, Math.round(parseNumber(motionFast, MOTION_TOKEN_DEFAULTS.motionFast))),
+        motionNormal: Math.max(0, Math.round(parseNumber(motionNormal, MOTION_TOKEN_DEFAULTS.motionNormal))),
+        motionSlow: Math.max(0, Math.round(parseNumber(motionSlow, MOTION_TOKEN_DEFAULTS.motionSlow))),
+        motionSpringDamping: Math.max(0, parseNumber(motionSpringDamping, MOTION_TOKEN_DEFAULTS.motionSpringDamping)),
+        motionSpringStiffness: Math.max(0, parseNumber(motionSpringStiffness, MOTION_TOKEN_DEFAULTS.motionSpringStiffness)),
+        motionSpringMass: Math.max(0.01, parseNumber(motionSpringMass, MOTION_TOKEN_DEFAULTS.motionSpringMass)),
+        drawerOpenDuration: Math.max(0, Math.round(parseNumber(drawerOpenDuration, 260))),
+        drawerCloseDuration: Math.max(0, Math.round(parseNumber(drawerCloseDuration, 180))),
     };
 }
 function resolveDisabledOpacity(tokens, variant) {
@@ -67,4 +82,3 @@ export function withInteractivePressableStyle(styleProp, tokens, options = {}) {
         ];
     };
 }
-//# sourceMappingURL=interaction-tokens.js.map

package/dist/lib/motion-policy.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ReduceMotion } from 'react-native-reanimated';
+export type MotionMode = 'system' | 'reduced' | 'full' | 'disabled';
+export type MotionDuration = 'fast' | 'normal' | 'slow';
+export type MotionSpring = 'responsive';
+export interface MotionSpringConfig {
+    damping: number;
+    stiffness: number;
+    mass: number;
+    reduceMotion: ReduceMotion;
+}
+export interface MotionPolicy {
+    mode: MotionMode;
+    reduceMotion: boolean;
+    animationsEnabled: boolean;
+    durations: Readonly<Record<MotionDuration, number>>;
+    springs: Readonly<Record<MotionSpring, Readonly<MotionSpringConfig>>>;
+    reanimatedReduceMotion: ReduceMotion;
+}
+export interface MotionProviderProps {
+    children: React.ReactNode;
+    mode?: MotionMode;
+}
+export declare function MotionProvider({ children, mode }: MotionProviderProps): React.JSX.Element;
+export declare function useMotionPolicy(): MotionPolicy;

package/dist/lib/motion-policy.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+import { ReduceMotion, useReducedMotion } from 'react-native-reanimated';
+import { MOTION_TOKEN_DEFAULTS, useInteractionTokens } from './interaction-tokens';
+// Without a provider, components still render and Reanimated still follows the system
+// setting. Only `--ui-motion-*` overrides and the non-Reanimated reduced-motion paths
+// need `MotionProvider` at the root.
+const DEFAULT_MOTION_POLICY = {
+    mode: 'system',
+    reduceMotion: false,
+    animationsEnabled: true,
+    durations: {
+        fast: MOTION_TOKEN_DEFAULTS.motionFast,
+        normal: MOTION_TOKEN_DEFAULTS.motionNormal,
+        slow: MOTION_TOKEN_DEFAULTS.motionSlow,
+    },
+    springs: {
+        responsive: {
+            damping: MOTION_TOKEN_DEFAULTS.motionSpringDamping,
+            stiffness: MOTION_TOKEN_DEFAULTS.motionSpringStiffness,
+            mass: MOTION_TOKEN_DEFAULTS.motionSpringMass,
+            reduceMotion: ReduceMotion.System,
+        },
+    },
+    reanimatedReduceMotion: ReduceMotion.System,
+};
+const MotionPolicyContext = createContext(DEFAULT_MOTION_POLICY);
+function useSystemReducedMotion(active) {
+    const initialValue = useReducedMotion();
+    const [enabled, setEnabled] = useState(initialValue);
+    useEffect(() => {
+        if (!active)
+            return;
+        let mounted = true;
+        void AccessibilityInfo.isReduceMotionEnabled()
+            .then((value) => {
+            if (mounted)
+                setEnabled(value);
+        })
+            .catch(() => {
+            // Keep Reanimated's startup snapshot if the native query is unavailable.
+        });
+        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setEnabled);
+        return () => {
+            mounted = false;
+            subscription.remove();
+        };
+    }, [active]);
+    return enabled;
+}
+export function MotionProvider({ children, mode = 'system' }) {
+    const interaction = useInteractionTokens();
+    const systemReducedMotion = useSystemReducedMotion(mode === 'system');
+    const relevantSystemValue = mode === 'system' ? systemReducedMotion : false;
+    const policy = useMemo(() => {
+        const reduceMotion = mode === 'reduced' || mode === 'disabled' || (mode === 'system' && relevantSystemValue);
+        const animationsEnabled = mode !== 'disabled';
+        const reanimatedReduceMotion = mode === 'system'
+            ? ReduceMotion.System
+            : mode === 'full'
+                ? ReduceMotion.Never
+                : ReduceMotion.Always;
+        return {
+            mode,
+            reduceMotion,
+            animationsEnabled,
+            durations: {
+                fast: animationsEnabled ? interaction.motionFast : 0,
+                normal: animationsEnabled ? interaction.motionNormal : 0,
+                slow: animationsEnabled ? interaction.motionSlow : 0,
+            },
+            springs: {
+                responsive: {
+                    damping: interaction.motionSpringDamping,
+                    stiffness: interaction.motionSpringStiffness,
+                    mass: interaction.motionSpringMass,
+                    reduceMotion: reanimatedReduceMotion,
+                },
+            },
+            reanimatedReduceMotion,
+        };
+    }, [
+        interaction.motionFast,
+        interaction.motionNormal,
+        interaction.motionSlow,
+        interaction.motionSpringDamping,
+        interaction.motionSpringMass,
+        interaction.motionSpringStiffness,
+        mode,
+        relevantSystemValue,
+    ]);
+    return _jsx(MotionPolicyContext.Provider, { value: policy, children: children });
+}
+export function useMotionPolicy() {
+    return useContext(MotionPolicyContext);
+}

package/dist/lib/overlay-insets.d.ts

@@ -0,0 +1,17 @@
+export interface OverlayInsets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+/**
+ * Collision padding for anything that floats: popovers, dropdowns, context menus.
+ *
+ * Without it these are only clamped to the viewport, so a trigger near an edge produces
+ * a panel sitting flush against it — touching the screen edge on web, and sliding under
+ * the notch or home indicator on a device. Both read as broken rather than deliberate.
+ *
+ * Safe area plus a margin, so the result clears the hardware and still leaves the panel
+ * looking placed rather than jammed. Callers can override per instance.
+ */
+export declare function useOverlayInsets(): OverlayInsets;

package/dist/lib/overlay-insets.js

@@ -0,0 +1,23 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useVisualTokens } from './visual-tokens';
+/**
+ * Collision padding for anything that floats: popovers, dropdowns, context menus.
+ *
+ * Without it these are only clamped to the viewport, so a trigger near an edge produces
+ * a panel sitting flush against it — touching the screen edge on web, and sliding under
+ * the notch or home indicator on a device. Both read as broken rather than deliberate.
+ *
+ * Safe area plus a margin, so the result clears the hardware and still leaves the panel
+ * looking placed rather than jammed. Callers can override per instance.
+ */
+export function useOverlayInsets() {
+    const safeArea = useSafeAreaInsets();
+    const visual = useVisualTokens();
+    const margin = visual.surfacePaddingSm;
+    return {
+        top: safeArea.top + margin,
+        bottom: safeArea.bottom + margin,
+        left: safeArea.left + margin,
+        right: safeArea.right + margin,
+    };
+}

package/dist/lib/portal.d.ts

@@ -19,4 +19,3 @@
  * ```
  */
 export { PortalHost } from '@rn-primitives/portal';
-//# sourceMappingURL=portal.d.ts.map

package/dist/lib/portal.js

@@ -19,4 +19,3 @@
  * ```
  */
 export { PortalHost } from '@rn-primitives/portal';
-//# sourceMappingURL=portal.js.map

package/dist/lib/react-native-classname.d.ts

@@ -20,4 +20,3 @@ declare module 'react-native' {
     }
 }
 export {};
-//# sourceMappingURL=react-native-classname.d.ts.map

package/dist/lib/react-native-classname.js

@@ -1,2 +1 @@
 import 'react-native';
-//# sourceMappingURL=react-native-classname.js.map

package/dist/lib/recipes.d.ts

@@ -0,0 +1,30 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+import { type ThemeColors } from './theme-colors';
+import { type VisualTokens } from './visual-tokens';
+/**
+ * Shared style recipes.
+ * Components consume these instead of hardcoding radius/height/padding/font
+ * classes so a theme (color contract + visual token contract) can fully
+ * restyle the package.
+ */
+export type ControlSize = 'sm' | 'default' | 'lg' | 'icon';
+export type SurfacePaddingSize = 'none' | 'sm' | 'default' | 'lg';
+export type ShadowTier = 'none' | 'sm' | 'md' | 'lg';
+export type TypographyRole = 'caption' | 'label' | 'body' | 'emphasis' | 'title' | 'headline';
+export declare function controlRecipe(visual: VisualTokens, size?: ControlSize): ViewStyle;
+export declare function fieldRecipe(visual: VisualTokens, size?: ControlSize): ViewStyle;
+export interface SurfaceRecipeOptions {
+    padding?: SurfacePaddingSize;
+    radius?: 'sm' | 'md' | 'lg' | 'xl';
+    bordered?: boolean;
+}
+export declare function surfacePadding(visual: VisualTokens, padding?: SurfacePaddingSize): number;
+export declare function surfaceRadius(visual: VisualTokens, radius?: 'sm' | 'md' | 'lg' | 'xl'): number;
+export declare function surfaceRecipe(visual: VisualTokens, options?: SurfaceRecipeOptions): ViewStyle;
+export declare function shadowStyle(visual: VisualTokens, colors: ThemeColors, tier: ShadowTier): ViewStyle;
+export declare function typographyStyle(visual: VisualTokens, role: TypographyRole): TextStyle;
+export declare function useControlRecipe(size?: ControlSize): ViewStyle;
+export declare function useFieldRecipe(size?: ControlSize): ViewStyle;
+export declare function useSurfaceRecipe(options?: SurfaceRecipeOptions): ViewStyle;
+export declare function useShadowStyle(tier: ShadowTier): ViewStyle;
+export declare function useTypography(role: TypographyRole): TextStyle;

package/dist/lib/recipes.js

@@ -0,0 +1,138 @@
+import { useThemeColors } from './theme-colors';
+import { useVisualTokens } from './visual-tokens';
+export function controlRecipe(visual, size = 'default') {
+    if (size === 'sm') {
+        return {
+            minHeight: visual.controlHeightSm,
+            borderRadius: visual.radiusMd,
+            paddingHorizontal: visual.controlPaddingXSm,
+            paddingVertical: visual.controlPaddingYSm,
+        };
+    }
+    if (size === 'lg') {
+        return {
+            minHeight: visual.controlHeightLg,
+            borderRadius: visual.radiusXl,
+            paddingHorizontal: visual.controlPaddingXLg,
+            paddingVertical: visual.controlPaddingYLg,
+        };
+    }
+    if (size === 'icon') {
+        return {
+            minHeight: visual.controlHeightDefault,
+            minWidth: visual.controlHeightDefault,
+            width: visual.controlHeightDefault,
+            borderRadius: visual.radiusLg,
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+        };
+    }
+    return {
+        minHeight: visual.controlHeightDefault,
+        borderRadius: visual.radiusLg,
+        paddingHorizontal: visual.controlPaddingXDefault,
+        paddingVertical: visual.controlPaddingYDefault,
+    };
+}
+export function fieldRecipe(visual, size = 'default') {
+    const base = controlRecipe(visual, size);
+    return {
+        ...base,
+        borderWidth: visual.borderWidthControl,
+    };
+}
+export function surfacePadding(visual, padding = 'default') {
+    if (padding === 'none')
+        return 0;
+    if (padding === 'sm')
+        return visual.surfacePaddingSm;
+    if (padding === 'lg')
+        return visual.surfacePaddingLg;
+    return visual.surfacePaddingDefault;
+}
+export function surfaceRadius(visual, radius = 'xl') {
+    if (radius === 'sm')
+        return visual.radiusSm;
+    if (radius === 'md')
+        return visual.radiusMd;
+    if (radius === 'lg')
+        return visual.radiusLg;
+    return visual.radiusXl;
+}
+export function surfaceRecipe(visual, options = {}) {
+    const { padding = 'default', radius = 'xl', bordered = true } = options;
+    return {
+        borderRadius: surfaceRadius(visual, radius),
+        padding: surfacePadding(visual, padding),
+        ...(bordered ? { borderWidth: visual.borderWidthHairline } : null),
+    };
+}
+export function shadowStyle(visual, colors, tier) {
+    if (tier === 'none')
+        return {};
+    const opacity = tier === 'sm'
+        ? visual.shadowOpacitySm
+        : tier === 'md'
+            ? visual.shadowOpacityMd
+            : visual.shadowOpacityLg;
+    const radius = tier === 'sm'
+        ? visual.shadowRadiusSm
+        : tier === 'md'
+            ? visual.shadowRadiusMd
+            : visual.shadowRadiusLg;
+    const offsetY = tier === 'sm'
+        ? visual.shadowOffsetYSm
+        : tier === 'md'
+            ? visual.shadowOffsetYMd
+            : visual.shadowOffsetYLg;
+    const elevation = tier === 'sm'
+        ? visual.shadowElevationSm
+        : tier === 'md'
+            ? visual.shadowElevationMd
+            : visual.shadowElevationLg;
+    if (opacity <= 0)
+        return {};
+    return {
+        shadowColor: colors.shadow,
+        shadowOpacity: opacity,
+        shadowRadius: radius,
+        shadowOffset: { width: 0, height: offsetY },
+        elevation,
+    };
+}
+// Component-owned text sizes. Font family/weight stays on className
+// (font-medium etc.) so app font mappings keep working.
+export function typographyStyle(visual, role) {
+    if (role === 'caption')
+        return {
+            fontSize: visual.fontSizeXs,
+            letterSpacing: visual.letterSpacingCaption,
+        };
+    if (role === 'label')
+        return { fontSize: visual.fontSizeSm, letterSpacing: visual.letterSpacingLabel };
+    if (role === 'emphasis')
+        return { fontSize: visual.fontSizeLg, letterSpacing: visual.letterSpacingBody };
+    if (role === 'title')
+        return { fontSize: visual.fontSizeXl, letterSpacing: visual.letterSpacingTitle };
+    if (role === 'headline')
+        return {
+            fontSize: visual.fontSize2xl,
+            letterSpacing: visual.letterSpacingHeadline,
+        };
+    return { fontSize: visual.fontSizeBase, letterSpacing: visual.letterSpacingBody };
+}
+export function useControlRecipe(size = 'default') {
+    return controlRecipe(useVisualTokens(), size);
+}
+export function useFieldRecipe(size = 'default') {
+    return fieldRecipe(useVisualTokens(), size);
+}
+export function useSurfaceRecipe(options = {}) {
+    return surfaceRecipe(useVisualTokens(), options);
+}
+export function useShadowStyle(tier) {
+    return shadowStyle(useVisualTokens(), useThemeColors(), tier);
+}
+export function useTypography(role) {
+    return typographyStyle(useVisualTokens(), role);
+}

package/dist/lib/ref-types.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+/** A named public shape for ref-forwarding components under React Native's Strict API. */
+export type ForwardRefComponent<TInstance, TProps> = React.ForwardRefExoticComponent<React.PropsWithoutRef<TProps> & React.RefAttributes<TInstance>>;

package/dist/lib/ref-types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/tap-only.d.ts

@@ -0,0 +1,11 @@
+import type { GestureResponderEvent } from 'react-native';
+/**
+ * Press handlers that fire only for a tap, not for a drag that happens to start and
+ * end inside the same view. A `Pressable` keeps a press alive while the finger stays
+ * within its bounds, so on a full-screen backdrop every swipe was also a tap and
+ * dismissed the overlay. Ten points is the platform touch slop.
+ */
+export declare function useTapOnly(onTap: () => void, slop?: number): {
+    onPressIn: (event: GestureResponderEvent) => void;
+    onPress: (event: GestureResponderEvent) => void;
+};