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

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 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.12.0]
+
+### Added
+
+- **`KeyboardAvoidingView` is now a public package component.** Native uses
+  `react-native-keyboard-controller` with `automaticOffset` enabled by default,
+  while web renders a plain `View`.
+- **`UIProvider` now owns app-wide native keyboard avoidance by default.** Apps
+  that mount `KeyboardProvider` above `UIProvider` get root-level keyboard
+  avoiding behavior without adding per-screen `KeyboardAvoidingView` wrappers.
+  Pass `keyboardAvoiding={false}` to opt out, or `keyboardAvoidingProps` to tune
+  the root wrapper. Web skips the root keyboard wrapper unless explicitly
+  enabled.
+
+### Fixed
+
+- **`DismissKeyboard` no longer nests keyboard-avoiding wrappers when the root
+  provider already owns keyboard avoidance.**
+
 ## [0.11.0]
 
 ### Added

package/LLM_USAGE.md

@@ -177,6 +177,7 @@ Use this table before creating a new app-local primitive.
 | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` | One-off disclosure | Local animated height wrappers | Advanced settings, hidden helper text |
 | `Dialog`, `AlertDialog` | Modal decisions and custom modal content | Custom modal overlays | Confirm delete, edit profile, invite user |
 | `DismissKeyboard` | Tap-away keyboard dismissal | Screen-level keyboard handling | Forms, search screens, sign-in screens |
+| `KeyboardAvoidingView` | Native keyboard-aware layout root | Repeated app-local keyboard wrappers | Screen roots, composer footers, form-heavy subtrees |
 | `Drawer` | Side panels and drawer navigation | Custom sliding panels | Filter drawer, app navigation drawer, inspector panel |
 | `DropdownMenu` | Menus and command lists | Homemade popover menus | Row actions, account menu, sort menu |
 | `EmptyState` | No-data or recoverable error regions | One-off empty placeholders | Empty inbox, no search results, failed list load |

package/README.md

@@ -222,6 +222,7 @@ All components are exported from `@mrmeg/expo-ui/components`; direct imports suc
 | `ErrorBoundary` | React render error fallback | Unhandled screen crashes | Route-level fallback, feature boundary, recoverable widget crashes |
 | `Icon` | Feather or custom icons with theme tokens | Raw vector icons with hardcoded colors | Button accessories, empty-state icons, menu icons, status glyphs |
 | `InputOTP` | Verification code entry | Multiple manually managed text inputs | Email codes, SMS codes, MFA, invite codes |
+| `KeyboardAvoidingView` | Native keyboard-aware layout root | Repeated app-local keyboard wrappers | Screen roots, composer footers, form-heavy subtrees |
 | `Label` | Accessible form labels | Plain styled text labels | Required labels, disabled labels, field group labels |
 | `MaxWidthContainer` | Centered responsive width | Per-screen max-width wrappers | Web pages, tablet layouts, settings forms, auth panels |
 | `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, action toasts, loading toast, bottom-position alerts |
@@ -272,7 +273,7 @@ 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.
 
-Mount `UIProvider` once near the root before using `Dialog`, `AlertDialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`, `Tooltip`, or package notifications. On native, `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`.
+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,28 +1,33 @@
-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> & {
+import * as React from "react";
+import { type LooseStyle } from "../lib/styles";
+type BaseAccordionRootProps = {
     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?: ViewStyle;
+    style?: LooseStyle;
+    children?: React.ReactNode;
 };
-type WebSingleAccordionRootProps = BaseAccordionRootProps & {
+type SingleAccordionRootProps = BaseAccordionRootProps & {
     type: "single";
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string | undefined) => void;
 };
-type WebMultipleAccordionRootProps = BaseAccordionRootProps & {
+type MultipleAccordionRootProps = BaseAccordionRootProps & {
     type: "multiple";
     defaultValue?: string[];
     value?: string[];
     onValueChange?: (value: string[]) => void;
 };
-type AccordionRootProps = WebSingleAccordionRootProps | WebMultipleAccordionRootProps;
+type AccordionRootProps = SingleAccordionRootProps | MultipleAccordionRootProps;
 /**
- * Accordion Root Component
- * Container for accordion items with support for single or multiple open items
+ * Accordion Root Component (react-strict-dom)
+ * Container for accordion items with single or multiple open items. Supports
+ * controlled (`value`) and uncontrolled (`defaultValue`) usage.
  *
  * Usage:
  * <Accordion type="single" collapsible>
@@ -32,23 +37,38 @@ type AccordionRootProps = WebSingleAccordionRootProps | WebMultipleAccordionRoot
  *   </AccordionItem>
  * </Accordion>
  */
-declare function Accordion({ children, style, ...props }: AccordionRootProps): import("react").JSX.Element;
+declare function Accordion(props: AccordionRootProps): React.JSX.Element;
+export interface AccordionItemProps {
+    value: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    style?: LooseStyle;
+}
 /**
  * Accordion Item Component
- * Individual accordion item with border styling
+ * Individual accordion item with a bottom border. Shares its expanded state
+ * with the Trigger (chevron) and Content via context.
  */
-declare function AccordionItem({ children, value, style: styleOverride, ...props }: AccordionPrimitive.ItemProps & React.RefAttributes<AccordionPrimitive.ItemRef>): import("react").JSX.Element;
+declare function AccordionItem({ value, disabled: itemDisabled, children, style }: AccordionItemProps): React.JSX.Element;
+export interface AccordionTriggerProps {
+    children?: React.ReactNode;
+    style?: LooseStyle;
+}
 /**
  * Accordion Trigger Component
- * Clickable header that expands/collapses the content
- * Includes animated chevron icon
+ * Clickable header that expands/collapses the item. Includes an animated
+ * chevron that rotates with the expanded state.
  */
-declare function AccordionTrigger({ children, style: styleOverride, ...props }: AccordionPrimitive.TriggerProps & {
+declare function AccordionTrigger({ children, style }: AccordionTriggerProps): React.JSX.Element;
+export interface AccordionContentProps {
+    /** Keep content mounted (hidden) when collapsed instead of unmounting. */
+    forceMount?: boolean;
     children?: React.ReactNode;
-} & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react").JSX.Element;
+    style?: LooseStyle;
+}
 /**
  * Accordion Content Component
- * Expandable content area with animations
+ * Expandable content area. Unmounts when collapsed unless `forceMount` is set.
  */
-declare function AccordionContent({ children, style: styleOverride, ...props }: AccordionPrimitive.ContentProps & React.RefAttributes<AccordionPrimitive.ContentRef>): import("react").JSX.Element;
+declare function AccordionContent({ forceMount, children, style }: AccordionContentProps): React.JSX.Element | null;
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/Accordion.js

@@ -1,62 +1,31 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Animated, Platform, Pressable, View } from "react-native";
+import { createContext, use, useCallback, useMemo, useState } from "react";
+import { css, html } from "react-strict-dom";
 import { Icon } from "./Icon.js";
 import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
-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 }) }));
-}
-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 }) }));
+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;
 }
-function WebAccordionRoot(props) {
-    if (props.type === "multiple") {
-        return _jsx(WebMultipleAccordionRoot, { ...props });
+const AccordionItemContext = createContext(null);
+function useAccordionItemContext() {
+    const ctx = use(AccordionItemContext);
+    if (!ctx) {
+        throw new Error("AccordionTrigger/AccordionContent must be used within an <AccordionItem>");
     }
-    return _jsx(WebSingleAccordionRoot, { ...props });
+    return ctx;
 }
 /**
- * Accordion Root Component
- * Container for accordion items with support for single or multiple open items
+ * Accordion Root Component (react-strict-dom)
+ * Container for accordion items with single or multiple open items. Supports
+ * controlled (`value`) and uncontrolled (`defaultValue`) usage.
  *
  * Usage:
  * <Accordion type="single" collapsible>
@@ -66,92 +35,139 @@ function WebAccordionRoot(props) {
  *   </AccordionItem>
  * </Accordion>
  */
-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 }) }));
+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 }) }));
 }
+const itemStyles = css.create({
+    base: (borderBottomColor) => ({
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor,
+        overflow: "hidden",
+    }),
+});
 /**
  * Accordion Item Component
- * Individual accordion item with border styling
+ * Individual accordion item with a bottom border. Shares its expanded state
+ * with the Trigger (chevron) and Content via context.
  */
-function AccordionItem({ children, value, style: styleOverride, ...props }) {
+function AccordionItem({ value, disabled: itemDisabled, children, style }) {
     const { theme } = useTheme();
-    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])
-                    : []),
+    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),
             ], children: children }) }));
 }
-const Trigger = Platform.OS === "web" ? View : Pressable;
+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",
+    }),
+});
 /**
  * Accordion Trigger Component
- * Clickable header that expands/collapses the content
- * Includes animated chevron icon
+ * Clickable header that expands/collapses the item. Includes an animated
+ * chevron that rotates with the expanded state.
  */
-function AccordionTrigger({ children, style: styleOverride, ...props }) {
+function AccordionTrigger({ children, style }) {
     const { theme } = useTheme();
     const reduceMotion = useReducedMotion();
-    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 { 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 contentStyles = css.create({
+    // paddingBottom (8) = spacing.sm.
+    base: {
+        paddingBottom: 8,
+        overflow: "hidden",
+    },
+    hidden: { display: "none" },
+});
 /**
  * Accordion Content Component
- * Expandable content area with animations
+ * Expandable content area. Unmounts when collapsed unless `forceMount` is set.
  */
-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 }) }) }));
+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 }) }));
 }
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/AnimatedView.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-import { ViewProps } from "react-native";
+import { type LooseStyle } from "../lib/styles";
 /**
  * Animation type options
  */
 export type AnimationType = "fade" | "fadeSlideUp" | "fadeSlideDown" | "scale";
-interface AnimatedViewProps extends ViewProps {
+export interface AnimatedViewProps {
     children: React.ReactNode;
     /**
      * Type of animation to use
@@ -22,34 +22,23 @@ interface AnimatedViewProps extends ViewProps {
      * @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
  *
- * Features:
- * - Multiple animation types (fade, fadeSlideUp, fadeSlideDown, scale)
- * - Configurable enter duration
- * - Optional delay for staggered animations
- * - Respects reduced motion accessibility preference
+ * 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.
  *
  * Usage:
  * ```tsx
- * // 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>
+ * <AnimatedView>{children}</AnimatedView>
+ * <AnimatedView type="fadeSlideUp" delay={100}>{children}</AnimatedView>
  * ```
  */
-export declare function AnimatedView({ children, type, enterDuration, delay, style, ...props }: AnimatedViewProps): React.JSX.Element;
-export {};
+export declare function AnimatedView({ children, type, enterDuration, delay, style, testID, }: AnimatedViewProps): React.JSX.Element;

package/dist/components/AnimatedView.js

@@ -1,39 +1,80 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Animated } from "react-native";
-import { useStaggeredEntrance } from "../hooks/useStaggeredEntrance.js";
+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",
+    }),
+});
 /**
  * Cross-Platform Animated View Component
- * Uses React Native Animated for lightweight cross-platform animations
  *
- * Features:
- * - Multiple animation types (fade, fadeSlideUp, fadeSlideDown, scale)
- * - Configurable enter duration
- * - Optional delay for staggered animations
- * - Respects reduced motion accessibility preference
+ * 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.
  *
  * Usage:
  * ```tsx
- * // 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>
+ * <AnimatedView>{children}</AnimatedView>
+ * <AnimatedView type="fadeSlideUp" delay={100}>{children}</AnimatedView>
  * ```
  */
-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 }));
+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 }));
 }

package/dist/components/Badge.d.ts

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