@mrmeg/expo-ui 0.7.2 → 0.8.0

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/Dialog.js

@@ -26,16 +26,14 @@ function DialogContent({ portalHost, style, children, ...props }) {
                     StyleSheet.absoluteFill,
                     { backgroundColor: theme.colors.overlay },
                     Platform.OS === "web" && { zIndex: 50 },
-                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
+                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
                                             {
                                                 backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
                                                 padding: spacing.lg,
-                                                width: "90%",
-                                                maxWidth: 450,
-                                                maxHeight: "85%",
+                                                width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },
                                             style,
@@ -103,16 +101,14 @@ function AlertDialogContent({ portalHost, style, children, ...props }) {
                     StyleSheet.absoluteFill,
                     { backgroundColor: theme.colors.overlay },
                     Platform.OS === "web" && { zIndex: 52 },
-                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
+                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
                                             {
                                                 backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
                                                 padding: spacing.lg,
-                                                width: "90%",
-                                                maxWidth: 450,
-                                                maxHeight: "85%",
+                                                width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },
                                             style,
@@ -160,6 +156,18 @@ const overlayStyles = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center",
     },
+    // Sizes the dialog relative to the full-screen centered container. Both the
+    // width AND maxHeight must live on this wrapper (the direct flex child of the
+    // full-screen container) rather than on Content: a percentage resolves
+    // against the parent's resolved box, and this wrapper's box is the screen.
+    // Putting `maxHeight: "85%"` on Content instead resolves it against this
+    // (content-sized) wrapper — clamping the card to 85% of its own content
+    // height, so the footer spills out the bottom.
+    sizer: {
+        width: "90%",
+        maxWidth: 450,
+        maxHeight: "85%",
+    },
 });
 // ============================================================================
 // Exports

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;

package/dist/components/Notification.js

@@ -8,6 +8,7 @@ import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
+import { palette } from "../constants/colors.js";
 import { translateText } from "../lib/i18n.js";
 import { globalUIStore } from "../state/globalUIStore.js";
 const timingIn = { duration: 150, easing: Easing.out(Easing.quad), useNativeDriver: true };
@@ -21,20 +22,13 @@ const timingOut = { duration: 100, easing: Easing.in(Easing.quad), useNativeDriv
  * 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 const Notification = () => {
@@ -135,7 +129,10 @@ export const Notification = () => {
             }
         }
         wasVisibleRef.current = isNowVisible;
-        if (isNowVisible && !wasVisible && alert?.duration) {
+        // Schedule on every alert change, not just hidden→visible: a notification
+        // that replaces a visible one (e.g. loading → success) still needs its
+        // auto-dismiss timer. The cleanup below clears the previous alert's timer.
+        if (isNowVisible && alert?.duration) {
             timerRef.current = setTimeout(() => {
                 onAutoDismiss();
             }, alert.duration);
@@ -221,7 +218,7 @@ export const Notification = () => {
         ], children: _jsxs(View, { style: [
                 styles.alert,
                 isBottom && styles.alertBottom,
-                getShadowStyle("base"),
+                getShadowStyle("elevated"),
             ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: message }))] }), action && (_jsx(Pressable, { style: ({ pressed }) => [
                         styles.actionButton,
                         {
@@ -249,8 +246,10 @@ const createStyles = (theme) => StyleSheet.create({
         paddingRight: spacing.xl + spacing.sm,
         borderRadius: spacing.radiusLg,
         borderWidth: 1,
-        borderColor: theme.colors.border,
-        backgroundColor: theme.colors.card,
+        // Shadows barely read on dark backgrounds, so dark mode separates the
+        // toast from the page by lifting the surface a step above `card` instead.
+        borderColor: theme.dark ? palette.dark600 : theme.colors.border,
+        backgroundColor: theme.dark ? palette.dark700 : theme.colors.card,
         flexDirection: "row",
         alignItems: "center",
         gap: spacing.md,

package/dist/components/Popover.d.ts

@@ -25,7 +25,7 @@ interface PopoverContentProps extends PopoverPrimitive.ContentProps {
  * The content that appears in the popover overlay
  * Supports smart positioning, animations, and theme integration
  */
-declare function PopoverContent({ side, align, sideOffset, portalHost, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ side, align, sideOffset, portalHost, ...props }: PopoverContentProps): React.JSX.Element;
 /**
  * Popover Header Component
  * Optional header section for the popover content
@@ -33,7 +33,7 @@ declare function PopoverContent({ side, align, sideOffset, portalHost, ...props
 interface PopoverHeaderProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function PopoverHeader({ children, style, ...props }: PopoverHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverHeader({ children, style, ...props }: PopoverHeaderProps): React.JSX.Element;
 /**
  * Popover Body Component
  * Main content area of the popover
@@ -41,7 +41,7 @@ declare function PopoverHeader({ children, style, ...props }: PopoverHeaderProps
 interface PopoverBodyProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function PopoverBody({ children, style, ...props }: PopoverBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverBody({ children, style, ...props }: PopoverBodyProps): React.JSX.Element;
 /**
  * Popover Footer Component
  * Optional footer section for the popover content
@@ -49,7 +49,7 @@ declare function PopoverBody({ children, style, ...props }: PopoverBodyProps): i
 interface PopoverFooterProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function PopoverFooter({ children, style, ...props }: PopoverFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverFooter({ children, style, ...props }: PopoverFooterProps): React.JSX.Element;
 /**
  * Popover Component with Sub-components
  * Properly typed interface for dot notation access (e.g., Popover.Trigger)

package/dist/components/Progress.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 export type ProgressVariant = "default" | "accent" | "destructive";
 export type ProgressSize = "sm" | "md" | "lg";
@@ -25,4 +26,4 @@ export interface ProgressProps {
  * <Progress /> // indeterminate
  * ```
  */
-export declare function Progress({ value, variant, size, style, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function Progress({ value, variant, size, style, }: ProgressProps): React.JSX.Element;

package/dist/components/RadioGroup.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 /**
@@ -34,7 +35,7 @@ export interface RadioGroupProps extends Omit<RadioGroupPrimitive.RootProps, "st
  * </RadioGroup>
  * ```
  */
-declare function RadioGroupRoot({ size, error, value, onValueChange, style: styleOverride, children, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupRoot({ size, error, value, onValueChange, style: styleOverride, children, ...props }: RadioGroupProps): React.JSX.Element;
 export interface RadioGroupItemProps extends Omit<RadioGroupPrimitive.ItemProps, "style"> {
     /**
      * Optional label text displayed next to the radio button
@@ -58,7 +59,7 @@ export interface RadioGroupItemProps extends Omit<RadioGroupPrimitive.ItemProps,
  * Individual radio button with optional label.
  * Must be rendered inside a RadioGroup.
  */
-declare function RadioGroupItem({ label, required, style: styleOverride, labelStyle, value: itemValue, disabled, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupItem({ label, required, style: styleOverride, labelStyle, value: itemValue, disabled, ...props }: RadioGroupItemProps): React.JSX.Element;
 declare const RadioGroupComponent: typeof RadioGroupRoot & {
     Item: typeof RadioGroupItem;
 };

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+/**
+ * SegmentedControl — a horizontal single-select control backed by the
+ * platform's native segmented control via
+ * `@expo/ui/community/segmented-control`:
+ *
+ *   - iOS:     SwiftUI segmented `Picker` (system-styled).
+ *   - Android: a Material segmented control, accent-tinted via `tintColor`.
+ *   - Web:     the vendored `@react-native-segmented-control/segmented-control`
+ *              JS implementation, accent-tinted via `tintColor`.
+ *
+ * The API is value-based to match the rest of the design system (RadioGroup /
+ * Tabs / Select): pass the segment `values` plus a controlled `value` (or
+ * `defaultValue` for uncontrolled), and read selections back as the chosen
+ * string. A light haptic fires on each change, matching Slider / Switch.
+ *
+ * Theming: the accent color tints the selected segment on Android and web. iOS
+ * draws the system segmented control, which ignores a custom tint — pass
+ * `appearance` to force light/dark there.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   values={["Day", "Week", "Month"]}
+ *   value={range}
+ *   onValueChange={setRange}
+ * />
+ * ```
+ */
+export interface SegmentedControlProps {
+    /** Segment labels, in display order. */
+    values: string[];
+    /** Controlled selected value. Omit to use uncontrolled mode with `defaultValue`. */
+    value?: string;
+    /** Initial selected value for uncontrolled mode. Defaults to the first segment. */
+    defaultValue?: string;
+    /** Called with the selected segment's value. */
+    onValueChange?: (value: string) => void;
+    /** Disable interaction. @default false */
+    disabled?: boolean;
+    /**
+     * Accent color for the selected segment. Defaults to the theme accent.
+     * Applied on Android and web; iOS uses the system style.
+     */
+    tintColor?: string;
+    /** Force a color scheme irrespective of the system theme. */
+    appearance?: "light" | "dark";
+    /** Style override for the control. */
+    style?: StyleProp<ViewStyle>;
+}
+declare function SegmentedControl({ values, value: controlledValue, defaultValue, onValueChange, disabled, tintColor, appearance, style, }: SegmentedControlProps): React.JSX.Element;
+export { SegmentedControl };