@mrmeg/expo-ui 0.7.3 → 0.9.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:
@@ -125,8 +125,9 @@ Token intent:
 
 Use `getShadowStyle()` for package surfaces that need elevation. It supports
 `base`, `soft`, `sharp`, `subtle`, `elevated`, `glow`, `glass`, `card`,
-`cardHover`, and `cardSubtle`, returning native shadow/elevation off web and
-CSS `boxShadow` on web. Use `getFocusRingStyle()` for web focus styling. Keep
+`cardHover`, and `cardSubtle`, returning a cross-platform `boxShadow` value
+(RN 0.85 + react-native-web 0.21 deprecate the legacy `shadow*` props). Use
+`getFocusRingStyle()` for web focus styling. Keep
 web controls compact, but preserve mobile tap comfort with package controls
 that already provide native hit slop or 44px touch rows.
 
@@ -249,19 +250,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

@@ -133,14 +133,14 @@ interface BottomSheetCloseProps {
     style?: StyleProp<ViewStyle>;
 }
 declare function useBottomSheetContext(): BottomSheetContextValue;
-declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints, 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: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, style: styleOverride, children, }: BottomSheetContentProps): 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): import("react/jsx-runtime").JSX.Element;
-declare function BottomSheetBody({ children, style, contentContainerStyle, onContentSizeChange, onLayout, ...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 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;

package/dist/components/Button.d.ts

@@ -141,7 +141,7 @@ export interface ButtonProps extends PressableProps {
  * </Button>
  * ```
  */
-declare function ButtonRoot(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonRoot(props: ButtonProps): React.JSX.Element;
 /**
  * Button.Text
  * Text content for a Button. Inherits the button's control typography, color,
@@ -154,7 +154,7 @@ declare function ButtonRoot(props: ButtonProps): import("react/jsx-runtime").JSX
  * </Button>
  * ```
  */
-declare function ButtonText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonText(props: TextProps): React.JSX.Element;
 /**
  * Button.Icon
  * Icon content for a Button. Defaults its color to the button's text color
@@ -167,7 +167,7 @@ declare function ButtonText(props: TextProps): import("react/jsx-runtime").JSX.E
  * </Button>
  * ```
  */
-declare function ButtonIcon(props: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonIcon(props: IconProps): React.JSX.Element;
 /**
  * Button with explicit subcomponents.
  * - `Button.Text` for label text (inherits control typography)

package/dist/components/Button.js

@@ -121,7 +121,23 @@ function ButtonRoot(props) {
         scaleTo: preset === "link" ? 1 : 0.97,
     });
     const showFocusRing = (event) => {
-        setFocused(true);
+        // On web, pointer taps focus the element too, which left the ring visible
+        // after every click. :focus-visible is only true for keyboard-driven
+        // focus, so gate the ring on it; fall back to showing the ring when the
+        // target can't be queried (non-DOM targets, older engines).
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
         onFocus?.(event);
     };
     const hideFocusRing = (event) => {

package/dist/components/Card.d.ts

@@ -13,30 +13,30 @@ export interface CardProps {
     /** Whether the card is disabled (only relevant when onPress is set) */
     disabled?: boolean;
 }
-declare function Card({ children, style: styleOverride, variant, onPress, disabled }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare function Card({ children, style: styleOverride, variant, onPress, disabled }: CardProps): React.JSX.Element;
 export interface CardHeaderProps {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function CardHeader({ children, style: styleOverride }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ children, style: styleOverride }: CardHeaderProps): React.JSX.Element;
 export interface CardContentProps {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function CardContent({ children, style: styleOverride }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ children, style: styleOverride }: CardContentProps): React.JSX.Element;
 export interface CardFooterProps {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function CardFooter({ children, style: styleOverride }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ children, style: styleOverride }: CardFooterProps): React.JSX.Element;
 export interface CardTitleProps extends Omit<TextProps, "style"> {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
 }
-declare function CardTitle({ children, style: styleOverride, ...props }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ children, style: styleOverride, ...props }: CardTitleProps): React.JSX.Element;
 export interface CardDescriptionProps extends Omit<TextProps, "style"> {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
 }
-declare function CardDescription({ children, style: styleOverride, ...props }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ children, style: styleOverride, ...props }: CardDescriptionProps): React.JSX.Element;
 export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription };

package/dist/components/Checkbox.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
 /**
@@ -35,5 +36,5 @@ export interface CheckboxProps extends Omit<CheckboxPrimitive.RootProps, "style"
      */
     required?: boolean;
 }
-declare function Checkbox({ size, label, indeterminate, error, style: styleOverride, labelStyle, required, checked, onCheckedChange, disabled, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Checkbox({ size, label, indeterminate, error, style: styleOverride, labelStyle, required, checked, onCheckedChange, disabled, ...props }: CheckboxProps): React.JSX.Element;
 export { Checkbox };

package/dist/components/Collapsible.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
 /**
  * Collapsible Component (Root)
@@ -18,7 +19,7 @@ import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
  * ```
  */
 type CollapsibleProps = CollapsiblePrimitive.RootProps;
-declare function Collapsible({ children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+declare function Collapsible({ children, ...props }: CollapsibleProps): React.JSX.Element;
 /**
  * CollapsibleTrigger Component
  * The trigger button/element that toggles the collapsible state
@@ -40,7 +41,7 @@ declare function Collapsible({ children, ...props }: CollapsibleProps): import("
  * ```
  */
 type CollapsibleTriggerProps = CollapsiblePrimitive.TriggerProps;
-declare function CollapsibleTrigger({ style: styleOverride, ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ style: styleOverride, ...props }: CollapsibleTriggerProps): React.JSX.Element;
 /**
  * CollapsibleContent Component
  * The content that expands and collapses
@@ -62,6 +63,6 @@ type CollapsibleContentProps = CollapsiblePrimitive.ContentProps & {
      */
     forceMount?: boolean;
 };
-declare function CollapsibleContent({ forceMount, style: styleOverride, children, ...props }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleContent({ forceMount, style: styleOverride, children, ...props }: CollapsibleContentProps): React.JSX.Element;
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
 export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps };

package/dist/components/Dialog.d.ts

@@ -23,19 +23,19 @@ declare const DialogClose: {
 interface DialogProps extends DialogPrimitive.RootProps {
     children: React.ReactNode;
 }
-declare function DialogRoot({ children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogRoot({ children, ...props }: DialogProps): React.JSX.Element;
 interface DialogContentProps extends DialogPrimitive.ContentProps {
     portalHost?: string;
 }
-declare function DialogContent({ portalHost, style, children, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ children, style, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ children, style, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ portalHost, style, children, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ children, style, ...props }: ViewProps): React.JSX.Element;
+declare function DialogFooter({ children, style, ...props }: ViewProps): React.JSX.Element;
 declare function DialogTitle({ children, style, ...props }: DialogPrimitive.TitleProps & {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function DialogDescription({ children, style, ...props }: DialogPrimitive.DescriptionProps & {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare const Dialog: typeof DialogRoot & {
     Trigger: {
         ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
@@ -91,17 +91,17 @@ declare const AlertDialogCancel: {
 interface AlertDialogProps extends AlertDialogPrimitive.RootProps {
     children: React.ReactNode;
 }
-declare function AlertDialogRoot({ children, ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogRoot({ children, ...props }: AlertDialogProps): React.JSX.Element;
 interface AlertDialogContentProps extends AlertDialogPrimitive.ContentProps {
     portalHost?: string;
 }
-declare function AlertDialogContent({ portalHost, style, children, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ portalHost, style, children, ...props }: AlertDialogContentProps): React.JSX.Element;
 declare function AlertDialogTitle({ children, style, ...props }: AlertDialogPrimitive.TitleProps & {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function AlertDialogDescription({ children, style, ...props }: AlertDialogPrimitive.DescriptionProps & {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare const AlertDialog: typeof AlertDialogRoot & {
     Trigger: {
         ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {

package/dist/components/DismissKeyboard.d.ts

@@ -11,5 +11,5 @@ type Props = {
 /**
  * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
  */
-export declare const DismissKeyboard: ({ children, style, avoidKeyboard, scrollable }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const DismissKeyboard: ({ children, style, avoidKeyboard, scrollable }: Props) => React.JSX.Element;
 export {};

package/dist/components/Drawer.d.ts

@@ -46,12 +46,12 @@ interface DrawerBodyProps extends ViewProps {
 interface DrawerFooterProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
-declare function DrawerTrigger({ asChild, children, style: styleOverride }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare function DrawerContent({ swipeEnabled, swipeThreshold, velocityThreshold, style: styleOverride, children, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element | null;
-declare function DrawerHeader({ children, style, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function DrawerBody({ children, style, ...props }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
-declare function DrawerFooter({ children, style, ...props }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, children, }: DrawerProps): React.JSX.Element;
+declare function DrawerTrigger({ asChild, children, style: styleOverride }: DrawerTriggerProps): React.JSX.Element;
+declare function DrawerContent({ swipeEnabled, swipeThreshold, velocityThreshold, style: styleOverride, children, ...props }: DrawerContentProps): React.JSX.Element | null;
+declare function DrawerHeader({ children, style, ...props }: DrawerHeaderProps): React.JSX.Element;
+declare function DrawerBody({ children, style, ...props }: DrawerBodyProps): React.JSX.Element;
+declare function DrawerFooter({ children, style, ...props }: DrawerFooterProps): React.JSX.Element;
 declare function useDrawerClose(): () => void;
 interface DrawerCloseProps {
     /** Use child component as close button */
@@ -61,7 +61,7 @@ interface DrawerCloseProps {
     /** Optional style override */
     style?: StyleProp<ViewStyle>;
 }
-declare function DrawerClose({ asChild, children, style: styleOverride }: DrawerCloseProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ asChild, children, style: styleOverride }: DrawerCloseProps): React.JSX.Element;
 declare const Drawer: typeof DrawerRoot & {
     Trigger: typeof DrawerTrigger;
     Content: typeof DrawerContent;

package/dist/components/DropdownMenu.d.ts

@@ -46,7 +46,7 @@ declare const DropdownMenuRadioGroup: {
  * props over slot props), so this only fills the gap when none is set.
  */
 type DropdownMenuTriggerProps = DropdownMenuPrimitive.TriggerProps;
-declare function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps): React.JSX.Element;
 /**
  * DropdownMenuSubTrigger Component
  * Trigger for sub-menus with automatic chevron icon
@@ -55,13 +55,13 @@ declare function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps): im
 type DropdownMenuSubTriggerProps = DropdownMenuPrimitive.SubTriggerProps & {
     inset?: boolean;
 };
-declare function DropdownMenuSubTrigger({ inset, children, style: styleOverride, ...props }: DropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ inset, children, style: styleOverride, ...props }: DropdownMenuSubTriggerProps): React.JSX.Element;
 /**
  * DropdownMenuSubContent Component
  * Content container for sub-menus
  */
 type DropdownMenuSubContentProps = DropdownMenuPrimitive.SubContentProps;
-declare function DropdownMenuSubContent({ style: styleOverride, ...props }: DropdownMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ style: styleOverride, ...props }: DropdownMenuSubContentProps): React.JSX.Element;
 /**
  * DropdownMenuContent Component
  * Main dropdown content with portal, overlay, and animation
@@ -74,7 +74,7 @@ declare function DropdownMenuSubContent({ style: styleOverride, ...props }: Drop
 type DropdownMenuContentProps = DropdownMenuPrimitive.ContentProps & {
     portalHost?: string;
 };
-declare function DropdownMenuContent({ side, align, sideOffset, portalHost, style: styleOverride, ...props }: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ side, align, sideOffset, portalHost, style: styleOverride, ...props }: DropdownMenuContentProps): React.JSX.Element;
 /**
  * DropdownMenuItem Component
  * Standard menu item with optional destructive variant
@@ -83,19 +83,19 @@ type DropdownMenuItemProps = DropdownMenuPrimitive.ItemProps & {
     inset?: boolean;
     variant?: "default" | "destructive";
 };
-declare function DropdownMenuItem({ inset, variant, style: styleOverride, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ inset, variant, style: styleOverride, ...props }: DropdownMenuItemProps): React.JSX.Element;
 /**
  * DropdownMenuCheckboxItem Component
  * Menu item with checkbox indicator
  */
 type DropdownMenuCheckboxItemProps = DropdownMenuPrimitive.CheckboxItemProps;
-declare function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props }: DropdownMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props }: DropdownMenuCheckboxItemProps): React.JSX.Element;
 /**
  * DropdownMenuRadioItem Component
  * Menu item with radio button indicator
  */
 type DropdownMenuRadioItemProps = DropdownMenuPrimitive.RadioItemProps;
-declare function DropdownMenuRadioItem({ children, style: styleOverride, ...props }: DropdownMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ children, style: styleOverride, ...props }: DropdownMenuRadioItemProps): React.JSX.Element;
 /**
  * DropdownMenuLabel Component
  * Label for menu sections
@@ -103,13 +103,13 @@ declare function DropdownMenuRadioItem({ children, style: styleOverride, ...prop
 type DropdownMenuLabelProps = DropdownMenuPrimitive.LabelProps & {
     inset?: boolean;
 };
-declare function DropdownMenuLabel({ inset, style: styleOverride, ...props }: DropdownMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ inset, style: styleOverride, ...props }: DropdownMenuLabelProps): React.JSX.Element;
 /**
  * DropdownMenuSeparator Component
  * Visual divider between menu sections
  */
 type DropdownMenuSeparatorProps = DropdownMenuPrimitive.SeparatorProps;
-declare function DropdownMenuSeparator({ style: styleOverride, ...props }: DropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ style: styleOverride, ...props }: DropdownMenuSeparatorProps): React.JSX.Element;
 /**
  * DropdownMenuShortcut Component
  * Text component for displaying keyboard shortcuts
@@ -119,6 +119,6 @@ interface DropdownMenuShortcutProps {
     text?: string;
     style?: TextStyle;
 }
-declare function DropdownMenuShortcut({ children, text, style: styleOverride, ...props }: DropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ children, text, style: styleOverride, ...props }: DropdownMenuShortcutProps): React.JSX.Element;
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };
 export type { DropdownMenuTriggerProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, };

package/dist/components/EmptyState.d.ts

@@ -39,4 +39,4 @@ export interface EmptyStateProps {
  * />
  * ```
  */
-export declare function EmptyState({ icon, iconSize, title, description, actionLabel, onAction, actionPreset, style, children, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyState({ icon, iconSize, title, description, actionLabel, onAction, actionPreset, style, children, }: EmptyStateProps): React.JSX.Element;

package/dist/components/ErrorBoundary.d.ts

@@ -52,6 +52,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     resetError: () => void;
     static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 }
 export {};

package/dist/components/Icon.d.ts

@@ -45,5 +45,5 @@ export type IconProps = FeatherIconProps | CustomIconProps;
  * <Icon name="terminal" style={{ marginRight: 8 }} />
  * ```
  */
-export declare function Icon(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon(props: IconProps): React.JSX.Element;
 export {};

package/dist/components/InputOTP.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 export interface InputOTPProps {
     /**
@@ -68,5 +69,5 @@ export interface InputOTPProps {
  * />
  * ```
  */
-declare function InputOTP({ length, value, onChangeText, onComplete, error, errorText, disabled, autoFocus, secureTextEntry, inputMode, style: styleOverride, }: InputOTPProps): import("react/jsx-runtime").JSX.Element;
+declare function InputOTP({ length, value, onChangeText, onComplete, error, errorText, disabled, autoFocus, secureTextEntry, inputMode, style: styleOverride, }: InputOTPProps): React.JSX.Element;
 export { InputOTP };

package/dist/components/Label.d.ts

@@ -58,4 +58,4 @@ export interface LabelProps {
  * </Label>
  * ```
  */
-export declare function Label({ children, nativeID, required, size, error, disabled, style, onPress, }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ children, nativeID, required, size, error, disabled, style, onPress, }: LabelProps): import("react").JSX.Element;

package/dist/components/MaxWidthContainer.d.ts

@@ -54,5 +54,5 @@ interface MaxWidthContainerProps {
  * </MaxWidthContainer>
  * ```
  */
-export declare function MaxWidthContainer({ children, maxWidth, preset, style, centered, }: MaxWidthContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MaxWidthContainer({ children, maxWidth, preset, style, centered, }: MaxWidthContainerProps): React.JSX.Element;
 export {};

package/dist/components/Notification.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * Notification
  *
@@ -7,20 +8,13 @@
  * Usage:
  * ```ts
  * // Top notification (default)
- * globalUIStore.getState().show({
- *   type: "success",
- *   title: "Saved",
+ * notify.success("Saved", {
  *   messages: ["Your changes have been saved."],
  *   duration: 3000,
  * });
  *
  * // Bottom toast
- * globalUIStore.getState().show({
- *   type: "info",
- *   title: "Copied to clipboard",
- *   duration: 2000,
- *   position: "bottom",
- * });
+ * notify.info("Copied to clipboard", { duration: 2000, position: "bottom" });
  * ```
  */
-export declare const Notification: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const Notification: () => React.JSX.Element | null;