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

package/dist/components/Badge.js

@@ -1,9 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
+import React from "react";
+import { css, html } from "react-strict-dom";
 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
  *
@@ -19,15 +45,15 @@ import { StyledText } from "./StyledText.js";
  */
 function Badge({ children, text, variant = "default", style: styleOverride }) {
     const { theme } = useTheme();
-    const styles = useMemo(() => createStyles(theme), [theme]);
     const badgeContent = text ?? children;
-    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 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 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) => {
@@ -36,41 +62,13 @@ function Badge({ children, text, variant = "default", style: styleOverride }) {
         }
         return child;
     }));
-    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 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 }));
 }
-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,5 +1,6 @@
-import React from "react";
-import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
+import * as React from "react";
+import { type ScrollViewProps } from "react-native";
+import { type LooseStyle } from "../lib/styles";
 /**
  * BottomSheet — a sliding bottom sheet with a compound API, backed by the
  * platform's native sheet via `@expo/ui/community/bottom-sheet`:
@@ -8,49 +9,22 @@ import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
  *   - Android: Material3 `ModalBottomSheet`
  *   - Web:     `vaul` drawer (bundled with @expo/ui)
  *
- * 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.
+ * 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.
  *
  * @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>
  * ```
@@ -65,19 +39,10 @@ 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;
 }
@@ -90,62 +55,54 @@ interface BottomSheetProps {
     defaultOpen?: boolean;
     /** Snap point heights (px or percentage strings). Default: ["50%"]. */
     snapPoints?: SnapPoint[];
-    /**
-     * 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.
-     */
+    /** Whether swiping down / tapping the backdrop dismisses the sheet. Default: true. */
     closeOnBackdropPress?: boolean;
     children: React.ReactNode;
 }
 interface BottomSheetTriggerProps {
     asChild?: boolean;
     children: React.ReactNode;
-    style?: StyleProp<ViewStyle>;
+    style?: LooseStyle;
 }
-interface BottomSheetContentProps extends ViewProps {
+interface BottomSheetContentProps {
     /** 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?: StyleProp<ViewStyle>;
+    style?: LooseStyle;
     children: React.ReactNode;
 }
-interface BottomSheetHeaderProps extends ViewProps {
+interface BottomSheetHeaderProps {
     children: React.ReactNode;
+    style?: LooseStyle;
 }
 interface BottomSheetBodyProps extends ScrollViewProps {
     children: React.ReactNode;
+    testID?: string;
 }
-interface BottomSheetFooterProps extends ViewProps {
+interface BottomSheetFooterProps {
     children: React.ReactNode;
+    style?: LooseStyle;
 }
 interface BottomSheetHandleProps {
-    style?: StyleProp<ViewStyle>;
+    style?: LooseStyle;
 }
 interface BottomSheetCloseProps {
     asChild?: boolean;
     children: React.ReactNode;
-    style?: StyleProp<ViewStyle>;
+    style?: LooseStyle;
 }
 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: styleOverride }: BottomSheetTriggerProps): React.JSX.Element;
+declare function BottomSheetTrigger({ asChild, children, style }: 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, ...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 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 const BottomSheet: typeof BottomSheetRoot & {
     Trigger: typeof BottomSheetTrigger;
     Content: typeof BottomSheetContent;