@mrmeg/expo-ui 0.7.2 → 0.8.0

package/LLM_USAGE.md

@@ -15,7 +15,7 @@ import { Button, StyledText, UIProvider } from "@mrmeg/expo-ui/components";
 import { Button as ButtonDirect } from "@mrmeg/expo-ui/components/Button";
 import { colors, spacing, typography } from "@mrmeg/expo-ui/constants";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
-import { globalUIStore, useThemeStore } from "@mrmeg/expo-ui/state";
+import { globalUIStore, notify, useThemeStore } from "@mrmeg/expo-ui/state";
 import { configureExpoUiI18n, hapticLight } from "@mrmeg/expo-ui/lib";
 ```
 
@@ -92,7 +92,7 @@ configureExpoUiI18n((key, options) => i18n.t(key, options));
 - Use `Button.preset`, not `variant`, for buttons.
 - Button visible heights are compact: `sm` 28px, `md` 32px, and `lg` 40px.
 - Use `Button size="sm"` for compact popover, tooltip, and toolbar triggers; nested `StyledText` inherits the selected Button size.
-- Use `globalUIStore` plus root-mounted `UIProvider` for transient global feedback.
+- Use `notify` plus root-mounted `UIProvider` for transient global feedback. (`globalUIStore` remains available for reactive subscriptions and tests.)
 - Keep app monitoring, auth, API, and domain behavior outside this package.
 
 Useful theme tokens include:
@@ -249,19 +249,29 @@ import { Button, Switch, TextInput } from "@mrmeg/expo-ui/components";
 
 ```tsx
 import { EmptyState, Progress, SkeletonCard } from "@mrmeg/expo-ui/components";
-import { globalUIStore } from "@mrmeg/expo-ui/state";
+import { notify } from "@mrmeg/expo-ui/state";
 
 {isLoading ? <SkeletonCard /> : null}
 <Progress value={65} variant="accent" />
 <EmptyState icon="inbox" title="No messages" description="New messages will appear here." />
 
-globalUIStore.getState().show({
-  type: "success",
-  title: "Saved",
-  messages: ["Your changes were saved."],
-  action: {
-    label: "View",
-    onPress: openSavedItem,
-  },
+// Convenience helpers
+notify.success("Saved", { messages: ["Your changes were saved."] });
+notify.error("Upload failed");
+notify.warning("Connection slow");
+notify.info("Copied to clipboard");
+
+// Loading spinner — stays until replaced or hidden (no auto-dismiss)
+notify.loading("Uploading…");
+notify.hide();
+
+// Full control (same payload as globalUIStore show())
+notify({ type: "success", title: "Saved", action: { label: "View", onPress: openSavedItem } });
+
+// Loading → success/error around a promise
+await notify.promise(saveProfile(), {
+  loading: "Saving…",
+  success: "Profile saved",          // or (value) => `Saved ${value.name}`
+  error: "Could not save profile",   // or (err) => err.message
 });
 ```

package/README.md

@@ -28,8 +28,8 @@ bun add @mrmeg/expo-ui
 ```
 
 Consumers must also install the native and Expo peer dependencies listed in
-`package.json`. The tested baseline is Expo SDK 55 with React 19.2, React
-Native 0.83, and React Native Web 0.21. UI animations and keyboard-aware
+`package.json`. The tested baseline is Expo SDK 56 with React 19.2, React
+Native 0.85, and React Native Web 0.21. UI animations and keyboard-aware
 sheet offsets use React Native Animated by default.
 `@rn-primitives/*` packages are managed by `@mrmeg/expo-ui` because they are
 implementation details of the exported UI components. Native bottom sheet
@@ -49,14 +49,14 @@ import { colors, spacing, typography } from "@mrmeg/expo-ui/constants";
 import { colors as colorsDirect } from "@mrmeg/expo-ui/constants/colors";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
 import { useTheme as useThemeDirect } from "@mrmeg/expo-ui/hooks/useTheme";
-import { globalUIStore, useThemeStore } from "@mrmeg/expo-ui/state";
+import { globalUIStore, notify, useThemeStore } from "@mrmeg/expo-ui/state";
 import { configureExpoUiI18n, hapticLight } from "@mrmeg/expo-ui/lib";
 ```
 
 The root barrel also exports the public surface:
 
 ```tsx
-import { Button, UIProvider, colors, useTheme } from "@mrmeg/expo-ui";
+import { Button, UIProvider, colors, notify, useTheme } from "@mrmeg/expo-ui";
 ```
 
 ## Theme System
@@ -272,7 +272,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 from `globalUIStore`.
+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`.
 
 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.
 
@@ -322,15 +322,13 @@ Feedback:
 
 ```tsx
 import { EmptyState, Progress, SkeletonCard } from "@mrmeg/expo-ui/components";
-import { globalUIStore } from "@mrmeg/expo-ui/state";
+import { notify } from "@mrmeg/expo-ui/state";
 
 {isLoading ? <SkeletonCard /> : null}
 <Progress value={65} variant="accent" />
 <EmptyState icon="inbox" title="No messages" description="New messages will appear here." />
 
-globalUIStore.getState().show({
-  type: "success",
-  title: "Saved",
+notify.success("Saved", {
   messages: ["Your changes were saved."],
   action: {
     label: "View",
@@ -457,5 +455,5 @@ bun run ui:consumer-smoke
 `bun run ui:consumer-smoke` installs the packed tarball into a clean fixture,
 checks the documented export-map files, type-checks all public package
 entrypoints, verifies that `@mrmeg/expo-ui/constants` can be imported by
-plain Node ESM for token inspection, and runs an Expo SDK 55 iOS export
+plain Node ESM for token inspection, and runs an Expo SDK 56 iOS export
 against the packed package without a custom Metro config.

package/dist/components/Accordion.d.ts

@@ -32,12 +32,12 @@ type AccordionRootProps = WebSingleAccordionRootProps | WebMultipleAccordionRoot
  *   </AccordionItem>
  * </Accordion>
  */
-declare function Accordion({ children, style, ...props }: AccordionRootProps): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ children, style, ...props }: AccordionRootProps): import("react").JSX.Element;
 /**
  * Accordion Item Component
  * Individual accordion item with border styling
  */
-declare function AccordionItem({ children, value, style: styleOverride, ...props }: AccordionPrimitive.ItemProps & React.RefAttributes<AccordionPrimitive.ItemRef>): import("react/jsx-runtime").JSX.Element;
+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 content
@@ -45,10 +45,10 @@ declare function AccordionItem({ children, value, style: styleOverride, ...props
  */
 declare function AccordionTrigger({ children, style: styleOverride, ...props }: AccordionPrimitive.TriggerProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react/jsx-runtime").JSX.Element;
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react").JSX.Element;
 /**
  * Accordion Content Component
  * Expandable content area with animations
  */
-declare function AccordionContent({ children, style: styleOverride, ...props }: AccordionPrimitive.ContentProps & React.RefAttributes<AccordionPrimitive.ContentRef>): import("react/jsx-runtime").JSX.Element;
+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/AnimatedView.d.ts

@@ -51,5 +51,5 @@ interface AnimatedViewProps extends ViewProps {
  * </AnimatedView>
  * ```
  */
-export declare function AnimatedView({ children, type, enterDuration, delay, style, ...props }: AnimatedViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnimatedView({ children, type, enterDuration, delay, style, ...props }: AnimatedViewProps): React.JSX.Element;
 export {};

package/dist/components/Badge.d.ts

@@ -20,5 +20,5 @@ export interface BadgeProps {
  * <Badge variant="destructive">Error</Badge>
  * ```
  */
-declare function Badge({ children, text, variant, style: styleOverride }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ children, text, variant, style: styleOverride }: BadgeProps): React.JSX.Element;
 export { Badge };

package/dist/components/BottomSheet.d.ts

@@ -1,24 +1,102 @@
 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`:
+ *
+ *   - iOS:     SwiftUI `.sheet()` with presentation detents
+ *   - 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` is a no-op: the platform draws the drag indicator.
+ *   - `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.Content>
+ *     <BottomSheet.Header>
+ *       <SansSerifBoldText>Title</SansSerifBoldText>
+ *     </BottomSheet.Header>
+ *     <BottomSheet.Body>
+ *       <SansSerifText>Content</SansSerifText>
+ *     </BottomSheet.Body>
+ *     <BottomSheet.Footer>
+ *       <Button>Action</Button>
+ *     </BottomSheet.Footer>
+ *   </BottomSheet.Content>
+ * </BottomSheet>
+ * ```
+ */
 type SnapPoint = number | `${number}%`;
 interface BottomSheetContextValue {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     toggle: () => void;
-    snapPoints: number[];
-    currentSnapIndex: number;
+    snapPoints: SnapPoint[];
     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;
 }
 interface BottomSheetProps {
-    /** Controlled open state */
+    /** Controlled open state. Omit to use uncontrolled mode with `defaultOpen`. */
     open?: boolean;
-    /** Callback when open state changes */
+    /** Callback when open state changes. */
     onOpenChange?: (open: boolean) => void;
-    /** Default open state for uncontrolled mode */
+    /** Initial open state for uncontrolled mode. Default: false. */
     defaultOpen?: boolean;
-    /** Snap point heights (px or percentage strings) */
+    /** Snap point heights (px or percentage strings). Default: ["50%"]. */
     snapPoints?: SnapPoint[];
-    /** Whether to close when backdrop is pressed */
+    /**
+     * 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;
 }
@@ -28,13 +106,11 @@ interface BottomSheetTriggerProps {
     style?: StyleProp<ViewStyle>;
 }
 interface BottomSheetContentProps extends ViewProps {
-    /** Whether to enable swipe/drag gestures */
+    /** Accepted for call-site ergonomics; ignored (platform owns gestures). */
     swipeEnabled?: boolean;
-    /** Velocity threshold for quick swipe to close */
-    velocityThreshold?: number;
-    /** Whether to move the sheet with the native keyboard animation. Default: true. */
+    /** Accepted for call-site ergonomics; ignored (platform owns keyboard avoidance). */
     avoidKeyboard?: boolean;
-    /** Whether to dismiss the keyboard when a native drag starts. Default: true. */
+    /** Accepted for call-site ergonomics; ignored (platform owns keyboard). */
     dismissKeyboardOnDrag?: boolean;
     style?: StyleProp<ViewStyle>;
     children: React.ReactNode;
@@ -57,14 +133,14 @@ interface BottomSheetCloseProps {
     style?: StyleProp<ViewStyle>;
 }
 declare function useBottomSheetContext(): BottomSheetContextValue;
-declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints: rawSnapPoints, closeOnBackdropPress, children, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetContent({ swipeEnabled, velocityThreshold, avoidKeyboard, dismissKeyboardOnDrag, style: styleOverride, children, ...props }: BottomSheetContentProps): import("react/jsx-runtime").JSX.Element | null;
-declare function BottomSheetHandle({ style }: BottomSheetHandleProps): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetHeader({ children, style, ...props }: BottomSheetHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetBody({ children, style, ...props }: BottomSheetBodyProps): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetFooter({ children, style, ...props }: BottomSheetFooterProps): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetClose({ asChild, children, style: styleOverride }: BottomSheetCloseProps): import("react/jsx-runtime").JSX.Element;
+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 BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, style: styleOverride, children, }: BottomSheetContentProps): React.JSX.Element;
+declare function BottomSheetHandle(_props: BottomSheetHandleProps): null;
+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;