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

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.13.0]
+
+### Added
+
+- **`Drawer.Header` now supports a compact app-brand layout.** Use the new
+  `icon`, `title`, and `action` slots for a leading brand icon and title with a
+  trailing close or `Drawer.ToggleCollapse` control. Existing child-based
+  headers remain supported.
+
+### Changed
+
+- Expanded peer compatibility through Expo 57, React Native 0.86, and their
+  matching `@expo/ui` and gesture-handler releases.
+
+## [0.12.1]
+
+### Fixed
+
+- **`BottomSheet` now dismisses the keyboard when tapping outside a focused
+  field on Android.** The native sheet hosts its content in a separate window
+  (via `@expo/ui`'s `RNHostView`), outside the app's `KeyboardProvider` — so the
+  app-wide tap-away never reached sheet content, and `useKeyboardState()` /
+  `KeyboardController.dismiss()` are blind to that window. iOS papered over this
+  (SwiftUI resigns first-responder on outside taps for free); Compose did not,
+  leaving a focused field stuck open. `BottomSheet.Content` now mounts a
+  transparent dismiss overlay while a field is focused, detecting focus via the
+  window-independent `keyboardFocusRegistry` and resigning the field through its
+  own native `blur()` ref. The registry gained `subscribeKeyboardFocus`,
+  `hasKeyboardFocusedInput`, and `dismissKeyboardFocusedInput`, and `TextInput`
+  now registers a `blur` handle on focus.
+
 ## [0.12.0]
 
 ### Added

package/LLM_USAGE.md

@@ -212,6 +212,7 @@ Use this table before creating a new app-local primitive.
 - Use `EmptyState` for no-data or recoverable error regions.
 - Use `Skeleton` for loading content with stable layout.
 - Use `Progress` for real progress or indeterminate long-running work.
+- Use `Drawer.Header` with `icon`, `title`, and `action` for a compact app-brand row; place `Drawer.ToggleCollapse` in `action` for a trailing rail control.
 
 ## Minimal Examples
 
@@ -249,6 +250,20 @@ import { Button, Switch, TextInput } from "@mrmeg/expo-ui/components";
 </Button>
 ```
 
+```tsx
+import { Drawer, Icon } from "@mrmeg/expo-ui/components";
+
+<Drawer.Header
+  icon={<Icon name="hexagon" color="accent" />}
+  title="Acme"
+  action={
+    <Drawer.ToggleCollapse>
+      <Icon name="sidebar" decorative />
+    </Drawer.ToggleCollapse>
+  }
+/>
+```
+
 ```tsx
 import { EmptyState, Progress, SkeletonCard } from "@mrmeg/expo-ui/components";
 import { notify } from "@mrmeg/expo-ui/state";

package/README.md

@@ -254,7 +254,7 @@ Most compound components support both direct named imports and dot notation on t
 | `Card` | `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` |
 | `Collapsible` | `CollapsibleTrigger`, `CollapsibleContent` |
 | `Dialog` | `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose` |
-| `Drawer` | `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerBody`, `DrawerFooter`, `DrawerClose` |
+| `Drawer` | `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerBody`, `DrawerFooter`, `DrawerClose`, `DrawerToggleCollapse` |
 | `DropdownMenu` | `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuPortal`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent` |
 | `Popover` | `PopoverTrigger`, `PopoverContent`, `PopoverHeader`, `PopoverBody`, `PopoverFooter` |
 | `RadioGroup` | `RadioGroupItem` |
@@ -273,6 +273,20 @@ Use `Button.preset`, not `variant`. `default` is the neutral primary action, `se
 
 Use `StyledText` or its aliases instead of raw `Text` whenever the text is part of app UI. Use `TextInput` for labeled fields because it already owns label, helper text, error text, clear buttons, password visibility, numeric filtering, and left/right elements.
 
+`Drawer.Header` accepts `icon`, `title`, and `action` slots for a compact app-brand row. Pass a string title to use the package typography, and place `Drawer.ToggleCollapse` in `action` for a trailing rail control:
+
+```tsx
+<Drawer.Header
+  icon={<Icon name="hexagon" color="accent" />}
+  title="Acme"
+  action={
+    <Drawer.ToggleCollapse>
+      <Icon name="sidebar" decorative />
+    </Drawer.ToggleCollapse>
+  }
+/>
+```
+
 Mount `UIProvider` once near the root before using `Dialog`, `AlertDialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`, `Tooltip`, or package notifications. On native, `UIProvider` also wraps app content in the package keyboard-avoiding root by default, so ordinary screens and fixed footers stay above the soft keyboard without repeated app-local wrappers; pass `keyboardAvoiding={false}` to opt out, or use `KeyboardAvoidingView` directly for a subtree with custom behavior. Web skips the root keyboard wrapper unless `keyboardAvoiding` is explicitly enabled. `BottomSheet.Content` listens to React Native keyboard events when `avoidKeyboard` is enabled; it defaults to `true` and can be disabled per sheet. Trigger transient feedback with `notify`.
 
 Use `Skeleton` components for loading content with stable dimensions, `EmptyState` for no-data/recoverable errors, `Alert` for blocking confirm/alert dialogs, and `Notification` for transient global feedback.

package/dist/components/Accordion.d.ts

@@ -1,33 +1,28 @@
-import * as React from "react";
-import { type LooseStyle } from "../lib/styles";
-type BaseAccordionRootProps = {
+import { View, ViewStyle } from "react-native";
+import * as AccordionPrimitive from "@rn-primitives/accordion";
+type BaseAccordionRootProps = Omit<React.ComponentProps<typeof View>, "style"> & React.RefAttributes<AccordionPrimitive.RootRef> & {
     disabled?: boolean;
-    /** Single-type only: allow closing the open item by re-pressing it. */
     collapsible?: boolean;
-    /** Platform: WEB ONLY (kept for API compat; unused). */
     dir?: "ltr" | "rtl";
-    /** Platform: WEB ONLY (kept for API compat; unused). */
     orientation?: "vertical" | "horizontal";
-    style?: LooseStyle;
-    children?: React.ReactNode;
+    style?: ViewStyle;
 };
-type SingleAccordionRootProps = BaseAccordionRootProps & {
+type WebSingleAccordionRootProps = BaseAccordionRootProps & {
     type: "single";
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string | undefined) => void;
 };
-type MultipleAccordionRootProps = BaseAccordionRootProps & {
+type WebMultipleAccordionRootProps = BaseAccordionRootProps & {
     type: "multiple";
     defaultValue?: string[];
     value?: string[];
     onValueChange?: (value: string[]) => void;
 };
-type AccordionRootProps = SingleAccordionRootProps | MultipleAccordionRootProps;
+type AccordionRootProps = WebSingleAccordionRootProps | WebMultipleAccordionRootProps;
 /**
- * Accordion Root Component (react-strict-dom)
- * Container for accordion items with single or multiple open items. Supports
- * controlled (`value`) and uncontrolled (`defaultValue`) usage.
+ * Accordion Root Component
+ * Container for accordion items with support for single or multiple open items
  *
  * Usage:
  * <Accordion type="single" collapsible>
@@ -37,38 +32,23 @@ type AccordionRootProps = SingleAccordionRootProps | MultipleAccordionRootProps;
  *   </AccordionItem>
  * </Accordion>
  */
-declare function Accordion(props: AccordionRootProps): React.JSX.Element;
-export interface AccordionItemProps {
-    value: string;
-    disabled?: boolean;
-    children?: React.ReactNode;
-    style?: LooseStyle;
-}
+declare function Accordion({ children, style, ...props }: AccordionRootProps): import("react").JSX.Element;
 /**
  * Accordion Item Component
- * Individual accordion item with a bottom border. Shares its expanded state
- * with the Trigger (chevron) and Content via context.
+ * Individual accordion item with border styling
  */
-declare function AccordionItem({ value, disabled: itemDisabled, children, style }: AccordionItemProps): React.JSX.Element;
-export interface AccordionTriggerProps {
-    children?: React.ReactNode;
-    style?: LooseStyle;
-}
+declare function AccordionItem({ children, value, style: styleOverride, ...props }: AccordionPrimitive.ItemProps & React.RefAttributes<AccordionPrimitive.ItemRef>): import("react").JSX.Element;
 /**
  * Accordion Trigger Component
- * Clickable header that expands/collapses the item. Includes an animated
- * chevron that rotates with the expanded state.
+ * Clickable header that expands/collapses the content
+ * Includes animated chevron icon
  */
-declare function AccordionTrigger({ children, style }: AccordionTriggerProps): React.JSX.Element;
-export interface AccordionContentProps {
-    /** Keep content mounted (hidden) when collapsed instead of unmounting. */
-    forceMount?: boolean;
+declare function AccordionTrigger({ children, style: styleOverride, ...props }: AccordionPrimitive.TriggerProps & {
     children?: React.ReactNode;
-    style?: LooseStyle;
-}
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react").JSX.Element;
 /**
  * Accordion Content Component
- * Expandable content area. Unmounts when collapsed unless `forceMount` is set.
+ * Expandable content area with animations
  */
-declare function AccordionContent({ forceMount, children, style }: AccordionContentProps): React.JSX.Element | null;
+declare function AccordionContent({ children, style: styleOverride, ...props }: AccordionPrimitive.ContentProps & React.RefAttributes<AccordionPrimitive.ContentRef>): import("react").JSX.Element;
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/Accordion.js

@@ -1,31 +1,62 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, use, useCallback, useMemo, useState } from "react";
-import { css, html } from "react-strict-dom";
+import { useEffect, useRef, useState } from "react";
+import { Animated, Platform, Pressable, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
-import { sanitizeWebStyle } from "../lib/styles.js";
-const AccordionContext = createContext(null);
-function useAccordionContext() {
-    const ctx = use(AccordionContext);
-    if (!ctx) {
-        throw new Error("Accordion compound components must be used within an <Accordion>");
-    }
-    return ctx;
+import { spacing } from "../constants/spacing.js";
+import * as AccordionPrimitive from "@rn-primitives/accordion";
+function normalizeSingleValue(value) {
+    return value ?? "";
+}
+function denormalizeSingleValue(value) {
+    return value === "" ? undefined : value;
+}
+function normalizeMultipleValue(value) {
+    return value ?? [];
+}
+function WebSingleAccordionRoot(props) {
+    const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => normalizeSingleValue(props.defaultValue));
+    const normalizedValue = isControlled
+        ? normalizeSingleValue(props.value)
+        : uncontrolledValue;
+    const handleValueChange = (nextValue) => {
+        const normalizedNextValue = normalizeSingleValue(nextValue);
+        if (!isControlled) {
+            setUncontrolledValue(normalizedNextValue);
+        }
+        props.onValueChange?.(denormalizeSingleValue(normalizedNextValue));
+    };
+    const { children, style, type: _type, defaultValue: _defaultValue, onValueChange: _onValueChange, value: _value, ...rootProps } = props;
+    return (_jsx(AccordionPrimitive.Root, { ...rootProps, type: "single", value: normalizedValue, onValueChange: handleValueChange, asChild: false, children: _jsx(View, { style: style, children: children }) }));
 }
-const AccordionItemContext = createContext(null);
-function useAccordionItemContext() {
-    const ctx = use(AccordionItemContext);
-    if (!ctx) {
-        throw new Error("AccordionTrigger/AccordionContent must be used within an <AccordionItem>");
+function WebMultipleAccordionRoot(props) {
+    const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => normalizeMultipleValue(props.defaultValue));
+    const normalizedValue = isControlled
+        ? normalizeMultipleValue(props.value)
+        : uncontrolledValue;
+    const handleValueChange = (nextValue) => {
+        const normalizedNextValue = normalizeMultipleValue(nextValue);
+        if (!isControlled) {
+            setUncontrolledValue(normalizedNextValue);
+        }
+        props.onValueChange?.(normalizedNextValue);
+    };
+    const { children, style, type: _type, defaultValue: _defaultValue, onValueChange: _onValueChange, value: _value, ...rootProps } = props;
+    return (_jsx(AccordionPrimitive.Root, { ...rootProps, type: "multiple", value: normalizedValue, onValueChange: handleValueChange, asChild: false, children: _jsx(View, { style: style, children: children }) }));
+}
+function WebAccordionRoot(props) {
+    if (props.type === "multiple") {
+        return _jsx(WebMultipleAccordionRoot, { ...props });
     }
-    return ctx;
+    return _jsx(WebSingleAccordionRoot, { ...props });
 }
 /**
- * Accordion Root Component (react-strict-dom)
- * Container for accordion items with single or multiple open items. Supports
- * controlled (`value`) and uncontrolled (`defaultValue`) usage.
+ * Accordion Root Component
+ * Container for accordion items with support for single or multiple open items
  *
  * Usage:
  * <Accordion type="single" collapsible>
@@ -35,139 +66,92 @@ function useAccordionItemContext() {
  *   </AccordionItem>
  * </Accordion>
  */
-function Accordion(props) {
-    const { children, style, disabled = false } = props;
-    const isControlled = props.value !== undefined;
-    // Uncontrolled state — always stored as a string[] internally, projected to
-    // single/multiple at the boundary.
-    const [uncontrolled, setUncontrolled] = useState(() => {
-        if (props.type === "multiple")
-            return props.defaultValue ?? [];
-        return props.defaultValue ? [props.defaultValue] : [];
-    });
-    const expandedValues = useMemo(() => {
-        if (!isControlled)
-            return uncontrolled;
-        if (props.type === "multiple")
-            return props.value ?? [];
-        return props.value ? [props.value] : [];
-    }, [isControlled, uncontrolled, props]);
-    const isExpanded = useCallback((value) => expandedValues.includes(value), [expandedValues]);
-    const toggle = useCallback((value) => {
-        if (disabled)
-            return;
-        if (props.type === "multiple") {
-            const next = expandedValues.includes(value)
-                ? expandedValues.filter((v) => v !== value)
-                : [...expandedValues, value];
-            if (!isControlled)
-                setUncontrolled(next);
-            props.onValueChange?.(next);
-            return;
-        }
-        // Single: open the pressed item; collapsible allows re-press to close.
-        const isOpen = expandedValues.includes(value);
-        const collapsible = props.collapsible ?? false;
-        const nextValue = isOpen && collapsible ? undefined : value;
-        if (!isControlled)
-            setUncontrolled(nextValue ? [nextValue] : []);
-        props.onValueChange?.(nextValue);
-    }, [disabled, expandedValues, isControlled, props]);
-    const contextValue = useMemo(() => ({ isExpanded, toggle, disabled }), [isExpanded, toggle, disabled]);
-    return (_jsx(AccordionContext.Provider, { value: contextValue, children: _jsx(html.div, { style: sanitizeWebStyle(style), children: children }) }));
+function Accordion({ children, style, ...props }) {
+    if (Platform.OS === "web") {
+        return (_jsx(WebAccordionRoot, { ...props, style: style, children: children }));
+    }
+    return (_jsx(AccordionPrimitive.Root, { ...props, asChild: true, children: _jsx(View, { style: style, children: children }) }));
 }
-const itemStyles = css.create({
-    base: (borderBottomColor) => ({
-        borderBottomWidth: 1,
-        borderBottomStyle: "solid",
-        borderBottomColor,
-        overflow: "hidden",
-    }),
-});
 /**
  * Accordion Item Component
- * Individual accordion item with a bottom border. Shares its expanded state
- * with the Trigger (chevron) and Content via context.
+ * Individual accordion item with border styling
  */
-function AccordionItem({ value, disabled: itemDisabled, children, style }) {
+function AccordionItem({ children, value, style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    const { isExpanded, disabled: rootDisabled } = useAccordionContext();
-    const itemContext = useMemo(() => ({
-        value,
-        isExpanded: isExpanded(value),
-        disabled: !!itemDisabled || rootDisabled,
-    }), [value, isExpanded, itemDisabled, rootDisabled]);
-    return (_jsx(AccordionItemContext.Provider, { value: itemContext, children: _jsx(html.div, { style: [
-                itemStyles.base(theme.colors.border),
-                sanitizeWebStyle(style),
+    return (_jsx(AccordionPrimitive.Item, { value: value, asChild: true, ...props, children: _jsx(View, { style: [
+                {
+                    borderBottomWidth: 1,
+                    borderBottomColor: theme.colors.border,
+                    overflow: "hidden",
+                },
+                // Spread array styles from primitives to prevent nested arrays on web
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                    : []),
             ], children: children }) }));
 }
-const triggerStyles = css.create({
-    // gap (16) = spacing.md, borderRadius (6) = spacing.radiusMd, paddingVertical (16) = spacing.md.
-    base: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 16,
-        borderRadius: 6,
-        paddingTop: 16,
-        paddingBottom: 16,
-        margin: 0,
-        borderWidth: 0,
-        backgroundColor: "transparent",
-        appearance: "none",
-        cursor: "pointer",
-        userSelect: "none",
-        textAlign: "inherit",
-        width: "100%",
-    },
-    disabled: { cursor: "not-allowed" },
-    // Chevron rotates 0deg (closed) → 180deg (open). Transition gated on motion.
-    chevron: (rotate, animated) => ({
-        display: "flex",
-        transform: rotate,
-        transitionProperty: animated ? "transform" : "none",
-        transitionDuration: animated ? "0.2s" : "0s",
-        transitionTimingFunction: "ease",
-    }),
-});
+const Trigger = Platform.OS === "web" ? View : Pressable;
 /**
  * Accordion Trigger Component
- * Clickable header that expands/collapses the item. Includes an animated
- * chevron that rotates with the expanded state.
+ * Clickable header that expands/collapses the content
+ * Includes animated chevron icon
  */
-function AccordionTrigger({ children, style }) {
+function AccordionTrigger({ children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
     const reduceMotion = useReducedMotion();
-    const { toggle } = useAccordionContext();
-    const { value, isExpanded, disabled } = useAccordionItemContext();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsxs(html.button, { type: "button", "aria-expanded": isExpanded, "aria-disabled": disabled, disabled: disabled, onClick: () => !disabled && toggle(value), style: [
-                    triggerStyles.base,
-                    disabled ? triggerStyles.disabled : null,
-                    sanitizeWebStyle(style),
-                ], children: [_jsx(_Fragment, { children: children }), _jsx(html.span, { style: triggerStyles.chevron(isExpanded ? "rotate(180deg)" : "rotate(0deg)", !reduceMotion), children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }));
+    const { isExpanded } = AccordionPrimitive.useItemContext();
+    const rotation = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+    useEffect(() => {
+        const target = isExpanded ? 1 : 0;
+        Animated.timing(rotation, {
+            toValue: target,
+            duration: reduceMotion ? 0 : isExpanded ? 200 : 150,
+            useNativeDriver: true,
+        }).start();
+    }, [isExpanded, reduceMotion, rotation]);
+    const chevronStyle = {
+        transform: [
+            {
+                rotate: rotation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ["0deg", "180deg"],
+                }),
+            },
+        ],
+    };
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(AccordionPrimitive.Header, { children: _jsx(AccordionPrimitive.Trigger, { ...props, asChild: true, children: _jsxs(Trigger, { style: [
+                            {
+                                flexDirection: "row",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                gap: spacing.md,
+                                borderRadius: spacing.radiusMd,
+                                paddingVertical: spacing.md,
+                                ...(Platform.OS === "web" && {
+                                    cursor: "pointer",
+                                    userSelect: "none",
+                                }),
+                            },
+                            // Spread array styles from primitives to prevent nested arrays on web
+                            ...(styleOverride && typeof styleOverride !== "function"
+                                ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                                : []),
+                        ], children: [_jsx(_Fragment, { children: children }), _jsx(Animated.View, { style: chevronStyle, children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }) }) }));
 }
-const contentStyles = css.create({
-    // paddingBottom (8) = spacing.sm.
-    base: {
-        paddingBottom: 8,
-        overflow: "hidden",
-    },
-    hidden: { display: "none" },
-});
 /**
  * Accordion Content Component
- * Expandable content area. Unmounts when collapsed unless `forceMount` is set.
+ * Expandable content area with animations
  */
-function AccordionContent({ forceMount, children, style }) {
-    const { isExpanded } = useAccordionItemContext();
-    if (!isExpanded && !forceMount)
-        return null;
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(html.div, { style: [
-                contentStyles.base,
-                !isExpanded ? contentStyles.hidden : null,
-                sanitizeWebStyle(style),
-            ], children: children }) }));
+function AccordionContent({ children, style: styleOverride, ...props }) {
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(AccordionPrimitive.Content, { ...props, children: _jsx(View, { style: [
+                    {
+                        paddingBottom: spacing.sm,
+                        overflow: "hidden",
+                    },
+                    // Spread array styles from primitives to prevent nested arrays on web
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                        : []),
+                ], children: children }) }) }));
 }
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/AnimatedView.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-import { type LooseStyle } from "../lib/styles";
+import { ViewProps } from "react-native";
 /**
  * Animation type options
  */
 export type AnimationType = "fade" | "fadeSlideUp" | "fadeSlideDown" | "scale";
-export interface AnimatedViewProps {
+interface AnimatedViewProps extends ViewProps {
     children: React.ReactNode;
     /**
      * Type of animation to use
@@ -22,23 +22,34 @@ export interface AnimatedViewProps {
      * @default 0
      */
     delay?: number;
-    /** Custom style override */
-    style?: LooseStyle;
-    /** Test identifier (forwarded as data-testid on web) */
-    testID?: string;
 }
 /**
  * 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 declare function AnimatedView({ children, type, enterDuration, delay, style, testID, }: AnimatedViewProps): React.JSX.Element;
+export declare function AnimatedView({ children, type, enterDuration, delay, style, ...props }: AnimatedViewProps): React.JSX.Element;
+export {};

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 }));
 }