@mrmeg/expo-ui 0.13.0-rsd.0 → 0.14.0

package/dist/components/AnimatedView.js

@@ -1,80 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { css, html } from "react-strict-dom";
-import { useReducedMotion } from "../hooks/useReduceMotion.js";
-import { sanitizeWebStyle } from "../lib/styles.js";
-// Entrance keyframes. Slide distance (8px) and initial scale (0.95) mirror the
-// previous useStaggeredEntrance defaults. css.keyframes must be defined inline
-// and unconditionally in the same file as the css.create that references them
-// (StyleX can't fold a cross-module or ternary-gated keyframe name). On native
-// css.keyframes is a no-op and animationName has no effect, so views appear
-// instantly — documented animation fidelity gap (no Reanimated in the package).
-const fadeFrames = css.keyframes({
-    "0%": { opacity: 0 },
-    "100%": { opacity: 1 },
-});
-const fadeSlideUpFrames = css.keyframes({
-    "0%": { opacity: 0, transform: "translateY(8px)" },
-    "100%": { opacity: 1, transform: "translateY(0)" },
-});
-const fadeSlideDownFrames = css.keyframes({
-    "0%": { opacity: 0, transform: "translateY(-8px)" },
-    "100%": { opacity: 1, transform: "translateY(0)" },
-});
-const scaleFrames = css.keyframes({
-    "0%": { opacity: 0, transform: "scale(0.95)" },
-    "100%": { opacity: 1, transform: "scale(1)" },
-});
-// Duration/delay are runtime props, so they flow in as function-rule args.
-// animationFillMode:"both" holds the 0% state during the delay (so staggered
-// items stay hidden until their turn) and the 100% state after completion.
-const styles = css.create({
-    fade: (duration, delay) => ({
-        animationName: fadeFrames,
-        animationDuration: duration,
-        animationDelay: delay,
-        animationTimingFunction: "ease-out",
-        animationFillMode: "both",
-    }),
-    fadeSlideUp: (duration, delay) => ({
-        animationName: fadeSlideUpFrames,
-        animationDuration: duration,
-        animationDelay: delay,
-        animationTimingFunction: "ease-out",
-        animationFillMode: "both",
-    }),
-    fadeSlideDown: (duration, delay) => ({
-        animationName: fadeSlideDownFrames,
-        animationDuration: duration,
-        animationDelay: delay,
-        animationTimingFunction: "ease-out",
-        animationFillMode: "both",
-    }),
-    scale: (duration, delay) => ({
-        animationName: scaleFrames,
-        animationDuration: duration,
-        animationDelay: delay,
-        animationTimingFunction: "ease-out",
-        animationFillMode: "both",
-    }),
-});
+import { Animated } from "react-native";
+import { useStaggeredEntrance } from "../hooks/useStaggeredEntrance.js";
 /**
  * Cross-Platform Animated View Component
+ * Uses React Native Animated for lightweight cross-platform animations
  *
- * Plays a one-shot entrance animation via CSS keyframes on web. Respects the
- * reduced-motion accessibility preference (renders statically when set). On
- * native the keyframes are a no-op, so children appear immediately — the
- * package ships no Reanimated, a documented animation gap.
+ * Features:
+ * - Multiple animation types (fade, fadeSlideUp, fadeSlideDown, scale)
+ * - Configurable enter duration
+ * - Optional delay for staggered animations
+ * - Respects reduced motion accessibility preference
  *
  * Usage:
  * ```tsx
- * <AnimatedView>{children}</AnimatedView>
- * <AnimatedView type="fadeSlideUp" delay={100}>{children}</AnimatedView>
+ * // Simple fade
+ * <AnimatedView>
+ *   {children}
+ * </AnimatedView>
+ *
+ * // Fade with slide up
+ * <AnimatedView type="fadeSlideUp">
+ *   {children}
+ * </AnimatedView>
+ *
+ * // With delay (for staggered lists)
+ * <AnimatedView type="fadeSlideUp" delay={100}>
+ *   {children}
+ * </AnimatedView>
  * ```
  */
-export function AnimatedView({ children, type = "fade", enterDuration = 200, delay = 0, style, testID, }) {
-    const reduceMotion = useReducedMotion();
-    const duration = `${enterDuration}ms`;
-    const delayMs = `${delay}ms`;
-    const animation = reduceMotion ? null : styles[type](duration, delayMs);
-    return (_jsx(html.div, { "data-testid": testID, style: [animation, sanitizeWebStyle(style)], children: children }));
+export function AnimatedView({ children, type = "fade", enterDuration = 200, delay = 0, style, ...props }) {
+    const entranceStyle = useStaggeredEntrance({
+        type,
+        delay,
+        duration: enterDuration,
+    });
+    return (_jsx(Animated.View, { style: [style, entranceStyle], ...props, children: children }));
 }

package/dist/components/Badge.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { type LooseStyle } from "../lib/styles";
+import { StyleProp, ViewStyle } from "react-native";
 export type BadgeVariant = "default" | "secondary" | "outline" | "destructive";
 export interface BadgeProps {
     children?: React.ReactNode;
     text?: string;
     variant?: BadgeVariant;
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
 }
 /**
  * Badge Component

package/dist/components/Badge.js

@@ -1,35 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { css, html } from "react-strict-dom";
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
-import { sanitizeWebStyle } from "../lib/styles.js";
-// Static structure + function rules for theme-driven colors. The pill radius is
-// a static literal (spacing.radiusFull = 9999) so StyleX can inline it; theme
-// colors flow through function rules. No flex-child props on the outer element.
-const styles = css.create({
-    badge: {
-        alignSelf: "flex-start",
-        borderRadius: 9999,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingTop: 2,
-        paddingBottom: 2,
-    },
-    solid: (backgroundColor) => ({ backgroundColor }),
-    outline: (borderColor) => ({
-        backgroundColor: "transparent",
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor,
-    }),
-});
-const TEXT_STYLE = {
-    fontSize: 12,
-    fontWeight: "500",
-    lineHeight: 18,
-    userSelect: "none",
-};
 /**
  * Badge Component
  *
@@ -45,15 +19,15 @@ const TEXT_STYLE = {
  */
 function Badge({ children, text, variant = "default", style: styleOverride }) {
     const { theme } = useTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
     const badgeContent = text ?? children;
-    const textColor = variant === "default"
-        ? theme.colors.primaryForeground
-        : variant === "secondary"
-            ? theme.colors.secondaryForeground
-            : variant === "destructive"
-                ? theme.colors.destructiveForeground
-                : theme.colors.foreground;
-    const textStyle = { ...TEXT_STYLE, color: textColor };
+    const textStyle = [
+        styles.text,
+        variant === "default" && { color: theme.colors.primaryForeground },
+        variant === "secondary" && { color: theme.colors.secondaryForeground },
+        variant === "outline" && { color: theme.colors.foreground },
+        variant === "destructive" && { color: theme.colors.destructiveForeground },
+    ];
     const normalizedChildren = React.Children.toArray(badgeContent);
     const hasOnlyTextChildren = normalizedChildren.every((child) => typeof child === "string" || typeof child === "number");
     const content = hasOnlyTextChildren ? (_jsx(StyledText, { selectable: false, style: textStyle, children: normalizedChildren.join("") })) : (React.Children.map(badgeContent, (child) => {
@@ -62,13 +36,41 @@ function Badge({ children, text, variant = "default", style: styleOverride }) {
         }
         return child;
     }));
-    const background = variant === "default"
-        ? styles.solid(theme.colors.primary)
-        : variant === "secondary"
-            ? styles.solid(theme.colors.secondary)
-            : variant === "destructive"
-                ? styles.solid(theme.colors.destructive)
-                : styles.outline(theme.colors.border);
-    return (_jsx(html.div, { style: [styles.badge, background, sanitizeWebStyle(styleOverride)], children: content }));
+    return (_jsx(View, { accessibilityRole: "text", style: [
+            styles.badge,
+            variant === "default" && styles.default,
+            variant === "secondary" && styles.secondary,
+            variant === "outline" && styles.outline,
+            variant === "destructive" && styles.destructive,
+            styleOverride,
+        ], children: content }));
 }
+const createStyles = (theme) => StyleSheet.create({
+    badge: {
+        alignSelf: "flex-start",
+        borderRadius: spacing.radiusFull,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+    },
+    default: {
+        backgroundColor: theme.colors.primary,
+    },
+    secondary: {
+        backgroundColor: theme.colors.secondary,
+    },
+    outline: {
+        backgroundColor: "transparent",
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+    },
+    destructive: {
+        backgroundColor: theme.colors.destructive,
+    },
+    text: {
+        fontSize: 12,
+        fontWeight: "500",
+        lineHeight: 18,
+        userSelect: "none",
+    },
+});
 export { Badge };

package/dist/components/BottomSheet.d.ts

@@ -1,6 +1,5 @@
-import * as React from "react";
-import { type ScrollViewProps } from "react-native";
-import { type LooseStyle } from "../lib/styles";
+import React from "react";
+import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
 /**
  * BottomSheet — a sliding bottom sheet with a compound API, backed by the
  * platform's native sheet via `@expo/ui/community/bottom-sheet`:
@@ -9,22 +8,49 @@ import { type LooseStyle } from "../lib/styles";
  *   - Android: Material3 `ModalBottomSheet`
  *   - Web:     `vaul` drawer (bundled with @expo/ui)
  *
- * react-strict-dom port: the sheet itself stays @expo/ui (vaul on web — not
- * RNW); the compound chrome (Content column / Header / Footer / Handle / Close /
- * Trigger / close button) is html.* so web is RNW-free. The scrollable Body is
- * the one platform split: RSD html.div maps to a NON-scrolling RN View on
- * native, so native keeps RN ScrollView (with its onLayout/onContentSizeChange
- * overflow detection); web uses an html.div with overflow:auto and measures
- * scrollHeight vs clientHeight.
+ * The compound surface (Trigger / Content / Handle / Header / Body / Footer /
+ * Close), controlled + uncontrolled state, and theming match a hand-rolled
+ * sheet, but the platform owns gestures and keyboard avoidance — so there's no
+ * PanResponder, snap-physics, or keyboard lift-and-shrink code to maintain.
+ *
+ * Platform-owned behaviors (props accepted for ergonomics, but the platform
+ * decides):
+ *   - `.Handle` replaces the native drag indicator with a pressable equivalent.
+ *     Pressing it walks through the configured snap points, reversing direction
+ *     at either end. Dragging the sheet continues to use the platform gesture.
+ *   - `swipeEnabled` / `avoidKeyboard` / `dismissKeyboardOnDrag` are accepted
+ *     for call-site ergonomics but have no effect — the platform handles them.
+ *   - Sheet *chrome* (corner radius, system background, safe area) is the
+ *     platform's on native; theming reaches the content + background color.
+ *   - On Android only two snap states exist (partial / expanded); extra snap
+ *     points map to the nearest of those two.
+ *
+ * Scrollable bodies: the native sheet doesn't bound the hosted RN content to
+ * the detent height, so a tall `Body` overflows and clips its footer/tail. When
+ * `Body` detects overflow, `Content` caps the column to the detent height so the
+ * `ScrollView` actually scrolls to the bottom. Swipe-to-dismiss still works (the
+ * native sheet coordinates the pan: a pull at the top of the scroll view
+ * dismisses, elsewhere it scrolls). A close affordance is also surfaced for
+ * scrollable sheets so there's a one-tap close: the `Header` renders a trailing
+ * X, or — if there's no `Header` — `Content` floats one in the top-right corner.
+ * No extra props required.
  *
  * @example
  * ```tsx
  * <BottomSheet open={open} onOpenChange={setOpen} snapPoints={["50%"]}>
- *   <BottomSheet.Trigger asChild><Button>Open</Button></BottomSheet.Trigger>
+ *   <BottomSheet.Trigger asChild>
+ *     <Button>Open</Button>
+ *   </BottomSheet.Trigger>
  *   <BottomSheet.Content>
- *     <BottomSheet.Header><SansSerifBoldText>Title</SansSerifBoldText></BottomSheet.Header>
- *     <BottomSheet.Body><SansSerifText>Content</SansSerifText></BottomSheet.Body>
- *     <BottomSheet.Footer><Button>Action</Button></BottomSheet.Footer>
+ *     <BottomSheet.Header>
+ *       <SansSerifBoldText>Title</SansSerifBoldText>
+ *     </BottomSheet.Header>
+ *     <BottomSheet.Body>
+ *       <SansSerifText>Content</SansSerifText>
+ *     </BottomSheet.Body>
+ *     <BottomSheet.Footer>
+ *       <Button>Action</Button>
+ *     </BottomSheet.Footer>
  *   </BottomSheet.Content>
  * </BottomSheet>
  * ```
@@ -39,10 +65,19 @@ interface BottomSheetContextValue {
     setSnapIndex: (index: number) => void;
     cycleSnapPoint: () => void;
     closeOnBackdropPress: boolean;
+    /**
+     * True when a `Body`'s content overflows its viewport (is genuinely
+     * scrollable). Drives two things: `Content` caps the column to the detent
+     * height so the `ScrollView` can reach its bottom, and a close affordance is
+     * surfaced (a `Header` X, or floating if there's no `Header`) so a long sheet
+     * always has a one-tap close. Set by `Body`.
+     */
     scrollable: boolean;
     setScrollable: (scrollable: boolean) => void;
+    /** Whether a `Header` is mounted, so `Content` knows to render a fallback close. */
     hasHeader: boolean;
     setHasHeader: (present: boolean) => void;
+    /** Whether a `Footer` is mounted, so `Body` can own the bottom safe-area inset when it isn't. */
     hasFooter: boolean;
     setHasFooter: (present: boolean) => void;
 }
@@ -55,54 +90,62 @@ interface BottomSheetProps {
     defaultOpen?: boolean;
     /** Snap point heights (px or percentage strings). Default: ["50%"]. */
     snapPoints?: SnapPoint[];
-    /** Whether swiping down / tapping the backdrop dismisses the sheet. Default: true. */
+    /**
+     * Whether swiping/pulling down (or tapping the backdrop) dismisses the sheet.
+     * Maps to the native sheet's `enablePanDownToClose` (iOS
+     * `interactiveDismissDisabled`). Default: true.
+     *
+     * Works with scrollable bodies — the native sheet coordinates the pan (pull at
+     * the top of the scroll view dismisses, elsewhere it scrolls). Set to `false`
+     * to disable dismiss entirely; the sheet then surfaces an explicit close
+     * affordance automatically (a `Header` X, or a floating X if there's no
+     * `Header`). Scrollable sheets also get that close affordance regardless, so
+     * there's always a one-tap close.
+     */
     closeOnBackdropPress?: boolean;
     children: React.ReactNode;
 }
 interface BottomSheetTriggerProps {
     asChild?: boolean;
     children: React.ReactNode;
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
 }
-interface BottomSheetContentProps {
+interface BottomSheetContentProps extends ViewProps {
     /** Accepted for call-site ergonomics; ignored (platform owns gestures). */
     swipeEnabled?: boolean;
     /** Accepted for call-site ergonomics; ignored (platform owns keyboard avoidance). */
     avoidKeyboard?: boolean;
     /** Accepted for call-site ergonomics; ignored (platform owns keyboard). */
     dismissKeyboardOnDrag?: boolean;
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
     children: React.ReactNode;
 }
-interface BottomSheetHeaderProps {
+interface BottomSheetHeaderProps extends ViewProps {
     children: React.ReactNode;
-    style?: LooseStyle;
 }
 interface BottomSheetBodyProps extends ScrollViewProps {
     children: React.ReactNode;
-    testID?: string;
 }
-interface BottomSheetFooterProps {
+interface BottomSheetFooterProps extends ViewProps {
     children: React.ReactNode;
-    style?: LooseStyle;
 }
 interface BottomSheetHandleProps {
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
 }
 interface BottomSheetCloseProps {
     asChild?: boolean;
     children: React.ReactNode;
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
 }
 declare function useBottomSheetContext(): BottomSheetContextValue;
 declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): React.JSX.Element;
-declare function BottomSheetTrigger({ asChild, children, style }: BottomSheetTriggerProps): React.JSX.Element;
+declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): React.JSX.Element;
 declare function BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, style: styleOverride, children, }: BottomSheetContentProps): React.JSX.Element;
 declare function BottomSheetHandle({ style }: BottomSheetHandleProps): React.JSX.Element;
-declare function BottomSheetHeader({ children, style }: BottomSheetHeaderProps): React.JSX.Element;
-declare function BottomSheetBody(props: BottomSheetBodyProps): React.JSX.Element;
-declare function BottomSheetFooter({ children, style }: BottomSheetFooterProps): React.JSX.Element;
-declare function BottomSheetClose({ asChild, children, style }: BottomSheetCloseProps): React.JSX.Element;
+declare function BottomSheetHeader({ children, style, ...props }: BottomSheetHeaderProps): React.JSX.Element;
+declare function BottomSheetBody({ children, style, contentContainerStyle, onContentSizeChange, onLayout, ...props }: BottomSheetBodyProps): React.JSX.Element;
+declare function BottomSheetFooter({ children, style, ...props }: BottomSheetFooterProps): React.JSX.Element;
+declare function BottomSheetClose({ asChild, children, style: styleOverride }: BottomSheetCloseProps): React.JSX.Element;
 declare const BottomSheet: typeof BottomSheetRoot & {
     Trigger: typeof BottomSheetTrigger;
     Content: typeof BottomSheetContent;