@mrmeg/expo-ui 0.7.3 → 0.8.0

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 /**
  * SegmentedControl — a horizontal single-select control backed by the
@@ -48,5 +49,5 @@ export interface SegmentedControlProps {
     /** Style override for the control. */
     style?: StyleProp<ViewStyle>;
 }
-declare function SegmentedControl({ values, value: controlledValue, defaultValue, onValueChange, disabled, tintColor, appearance, style, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ values, value: controlledValue, defaultValue, onValueChange, disabled, tintColor, appearance, style, }: SegmentedControlProps): React.JSX.Element;
 export { SegmentedControl };

package/dist/components/Select.d.ts

@@ -14,7 +14,7 @@ type SelectTriggerProps = SelectPrimitive.TriggerProps & {
     size?: SelectSize;
     error?: boolean;
 };
-declare function SelectTrigger({ size, error, children, style: styleOverride, disabled, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ size, error, children, style: styleOverride, disabled, ...props }: SelectTriggerProps): React.JSX.Element;
 /**
  * SelectValue Component
  * Displays the selected value text or placeholder
@@ -22,7 +22,7 @@ declare function SelectTrigger({ size, error, children, style: styleOverride, di
 type SelectValueProps = SelectPrimitive.ValueProps & {
     size?: SelectSize;
 };
-declare function SelectValue({ size, placeholder, style: styleOverride, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ size, placeholder, style: styleOverride, ...props }: SelectValueProps): React.JSX.Element;
 /**
  * SelectContent Component
  * Dropdown overlay following the DropdownMenu.Content pattern
@@ -31,32 +31,32 @@ declare function SelectValue({ size, placeholder, style: styleOverride, ...props
 type SelectContentProps = SelectPrimitive.ContentProps & {
     portalHost?: string;
 };
-declare function SelectContent({ side, align, sideOffset, portalHost, style: styleOverride, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ side, align, sideOffset, portalHost, style: styleOverride, ...props }: SelectContentProps): React.JSX.Element;
 /**
  * SelectItem Component
  * Individual option in the select dropdown
  * Shows a check icon on the left when selected
  */
 type SelectItemProps = SelectPrimitive.ItemProps;
-declare function SelectItem({ children, style: styleOverride, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ children, style: styleOverride, ...props }: SelectItemProps): React.JSX.Element;
 /**
  * SelectGroup Component
  * Groups related select items together
  */
 type SelectGroupProps = SelectPrimitive.GroupProps;
-declare function SelectGroup({ style: styleOverride, ...props }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ style: styleOverride, ...props }: SelectGroupProps): React.JSX.Element;
 /**
  * SelectLabel Component
  * Label for a group of select items
  */
 type SelectLabelProps = SelectPrimitive.LabelProps;
-declare function SelectLabel({ style: styleOverride, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ style: styleOverride, ...props }: SelectLabelProps): React.JSX.Element;
 /**
  * SelectSeparator Component
  * Visual divider between select item groups
  */
 type SelectSeparatorProps = SelectPrimitive.SeparatorProps;
-declare function SelectSeparator({ style: styleOverride, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ style: styleOverride, ...props }: SelectSeparatorProps): React.JSX.Element;
 /**
  * Select Component with Sub-components
  * Properly typed interface for dot notation access (e.g., Select.Trigger)

package/dist/components/Separator.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import * as SeparatorPrimitive from "@rn-primitives/separator";
 /**
@@ -79,5 +80,5 @@ export interface SeparatorProps extends Omit<SeparatorPrimitive.RootProps, "styl
  * <Separator style={{ opacity: 0.5 }} />
  * ```
  */
-declare function Separator({ orientation, decorative, size, variant, style: styleOverride, margin, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function Separator({ orientation, decorative, size, variant, style: styleOverride, margin, ...props }: SeparatorProps): React.JSX.Element;
 export { Separator };

package/dist/components/Skeleton.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 export interface SkeletonProps {
     /** Width of the skeleton element */
@@ -23,7 +24,7 @@ export interface SkeletonProps {
  * <Skeleton width={40} height={40} circle />
  * ```
  */
-export declare function Skeleton({ width, height, borderRadius, circle, style, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ width, height, borderRadius, circle, style, }: SkeletonProps): React.JSX.Element;
 export interface SkeletonTextProps {
     /** Number of text lines to render */
     lines?: number;
@@ -38,7 +39,7 @@ export interface SkeletonTextProps {
  * SkeletonText renders N horizontal bars simulating text.
  * The last line is rendered at 60% width for a natural look.
  */
-export declare function SkeletonText({ lines, lineHeight, gap, style, }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonText({ lines, lineHeight, gap, style, }: SkeletonTextProps): React.JSX.Element;
 export interface SkeletonAvatarProps {
     /** Diameter of the circular avatar placeholder */
     size?: number;
@@ -48,7 +49,7 @@ export interface SkeletonAvatarProps {
 /**
  * SkeletonAvatar is a circular skeleton shorthand.
  */
-export declare function SkeletonAvatar({ size, style }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonAvatar({ size, style }: SkeletonAvatarProps): React.JSX.Element;
 export interface SkeletonCardProps {
     /** Whether to show an image placeholder area */
     showImage?: boolean;
@@ -65,4 +66,4 @@ export interface SkeletonCardProps {
  * SkeletonCard composes an image placeholder, optional avatar row,
  * and text lines in a Card-styled wrapper.
  */
-export declare function SkeletonCard({ showImage, imageHeight, showAvatar, textLines, style, }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonCard({ showImage, imageHeight, showAvatar, textLines, style, }: SkeletonCardProps): React.JSX.Element;

package/dist/components/Slider.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 /**
  * Slider — a themed range input backed by the platform's native slider via
@@ -40,5 +41,5 @@ export interface SliderProps {
     /** Style override for outer container */
     style?: StyleProp<ViewStyle>;
 }
-declare function Slider({ value, onValueChange, min, max, step, size: _size, disabled, showValue, style: styleOverride, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+declare function Slider({ value, onValueChange, min, max, step, size: _size, disabled, showValue, style: styleOverride, }: SliderProps): React.JSX.Element;
 export { Slider };

package/dist/components/StatusBar.d.ts

@@ -1 +1 @@
-export declare const StatusBar: () => import("react/jsx-runtime").JSX.Element;
+export declare const StatusBar: () => import("react").JSX.Element;

package/dist/components/StyledText.d.ts

@@ -69,53 +69,53 @@ export type TextProps = RNTextProps & {
  *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
-export declare function StyledText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function StyledText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Text Component
  * Uses serif font family (DM Serif Display)
  */
-export declare function SerifText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SerifText(props: TextProps): import("react").JSX.Element;
 /**
  * Sans-Serif Text Component
  * Uses sans-serif font family (DM Sans)
  */
-export declare function SansSerifText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SansSerifText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Bold Text Component
  * Uses serif font family — DM Serif Display only has regular weight
  */
-export declare function SerifBoldText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SerifBoldText(props: TextProps): import("react").JSX.Element;
 /**
  * Sans-Serif Bold Text Component
  * Uses sans-serif font family with semibold weight (DM Sans 600)
  */
-export declare function SansSerifBoldText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SansSerifBoldText(props: TextProps): import("react").JSX.Element;
 /**
  * Display Text Component
  * Uses DM Serif Display at display size — for hero text and splash screens
  */
-export declare function DisplayText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function DisplayText(props: TextProps): import("react").JSX.Element;
 /**
  * Title Text - Large semibold text for page titles
  */
-export declare function TitleText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function TitleText(props: TextProps): import("react").JSX.Element;
 /**
  * Heading Text - Section heading text
  */
-export declare function HeadingText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeadingText(props: TextProps): import("react").JSX.Element;
 /**
  * Subheading Text - Subsection heading text
  */
-export declare function SubheadingText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubheadingText(props: TextProps): import("react").JSX.Element;
 /**
  * Body Text - Default text for paragraphs and content
  */
-export declare function BodyText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function BodyText(props: TextProps): import("react").JSX.Element;
 /**
  * Caption Text - Small text for captions and secondary content
  */
-export declare function CaptionText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function CaptionText(props: TextProps): import("react").JSX.Element;
 /**
  * Label Text - Medium weight text for form labels
  */
-export declare function LabelText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function LabelText(props: TextProps): import("react").JSX.Element;

package/dist/components/Switch.d.ts

@@ -1,4 +1,5 @@
 import * as SwitchPrimitives from "@rn-primitives/switch";
+import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 /**
  * Switch variant styles
@@ -40,5 +41,5 @@ interface SwitchProps extends Omit<SwitchPrimitives.RootProps, "style"> {
      */
     style?: StyleProp<ViewStyle>;
 }
-declare function Switch({ variant, labelOn, labelOff, size, thumbSize, loading, style: styleOverride, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare function Switch({ variant, labelOn, labelOff, size, thumbSize, loading, style: styleOverride, ...props }: SwitchProps): React.JSX.Element;
 export { Switch };

package/dist/components/Tabs.d.ts

@@ -9,16 +9,16 @@ export interface TabsProps extends TabsPrimitive.RootProps {
     variant?: TabsVariant;
     size?: TabsSize;
 }
-declare function TabsRoot({ variant, size, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsRoot({ variant, size, children, ...props }: TabsProps): React.JSX.Element;
 export interface TabsListProps extends TabsPrimitive.ListProps {
     style?: StyleProp<ViewStyle>;
 }
-declare function TabsList({ style, children, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ style, children, ...props }: TabsListProps): React.JSX.Element;
 export interface TabsTriggerProps extends TabsPrimitive.TriggerProps {
     icon?: IconName;
     style?: StyleProp<ViewStyle>;
 }
-declare function TabsTriggerInner({ icon, style, children, value, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsTriggerInner({ icon, style, children, value, ...props }: TabsTriggerProps): React.JSX.Element;
 /**
  * TabsTrigger.Text
  * Label text for a TabsTrigger. Reads the tab size from context and applies the
@@ -32,11 +32,11 @@ declare function TabsTriggerInner({ icon, style, children, value, ...props }: Ta
  * </Tabs.Trigger>
  * ```
  */
-declare function TabsTriggerText({ style, numberOfLines, ...props }: React.ComponentProps<typeof StyledText>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTriggerText({ style, numberOfLines, ...props }: React.ComponentProps<typeof StyledText>): React.JSX.Element;
 export interface TabsContentProps extends TabsPrimitive.ContentProps {
     style?: StyleProp<ViewStyle>;
 }
-declare function TabsContent({ style, children, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ style, children, ...props }: TabsContentProps): React.JSX.Element;
 declare const TabsTriggerCompound: typeof TabsTriggerInner & {
     Text: typeof TabsTriggerText;
 };

package/dist/components/TextInput.d.ts

@@ -120,5 +120,5 @@ interface TextInputCustomProps extends TextInputProps {
  * />
  * ```
  */
-export declare function TextInput(props: TextInputCustomProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextInput(props: TextInputCustomProps): import("react").JSX.Element;
 export {};

package/dist/components/TextInput.js

@@ -255,10 +255,18 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         opacity: editable === false ? 0.6 : 1,
         ...(multiline ? null : { height: sizeConfig.height }),
     };
+    // "System" is an RN-only sentinel (RCTFont resolves it to the system font).
+    // @expo/ui passes the family verbatim to SwiftUI's Font.custom / Compose,
+    // where no such font exists — the fallback ignores fontSize and renders at
+    // the 17pt default, blowing up text and secure-entry dots. Omit the family
+    // so the native side uses the system font at our requested size.
+    const nativeFontFamily = fontFamilies.sansSerif.regular === "System"
+        ? undefined
+        : fontFamilies.sansSerif.regular;
     const textStyle = {
         color: textColor,
         fontSize: sizeConfig.fontSize,
-        fontFamily: fontFamilies.sansSerif.regular,
+        ...(nativeFontFamily ? { fontFamily: nativeFontFamily } : null),
     };
     return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: hasSecureToggle ? styles.nativeRow : undefined, children: [_jsx(Host, { matchContents: { vertical: true }, style: hasSecureToggle ? styles.nativeHostFlex : styles.nativeHost, children: _jsx(ExpoTextInput, { ...rest, ref: innerRef, value: state, defaultValue: defaultValue, onChangeText: onChangeText, editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: effectiveSecureTextEntry, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: () => setPasswordVisible((v) => !v), accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
 }

package/dist/components/Toggle.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import * as TogglePrimitive from "@rn-primitives/toggle";
 import { ViewStyle, StyleProp } from "react-native";
 import type { IconName } from "./Icon";
@@ -83,7 +84,7 @@ interface ToggleProps extends Omit<TogglePrimitive.RootProps, "style"> {
  * </Toggle>
  * ```
  */
-declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleOverride, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleOverride, ...props }: ToggleProps): React.JSX.Element;
 /**
  * ToggleIcon Component
  * Icon wrapper for use inside Toggle buttons
@@ -101,6 +102,6 @@ interface ToggleIconProps {
     size?: number;
     color?: string;
 }
-declare function ToggleIcon({ name, size, color }: ToggleIconProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleIcon({ name, size, color }: ToggleIconProps): React.JSX.Element;
 export { Toggle, ToggleIcon };
 export type { ToggleProps };

package/dist/components/ToggleGroup.d.ts

@@ -1,5 +1,6 @@
 import type { IconName } from "./Icon";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
+import * as React from "react";
 type ToggleGroupVariant = "default" | "outline";
 type ToggleGroupSize = "sm" | "default" | "lg";
 type ToggleGroupProps = ToggleGroupPrimitive.RootProps & {
@@ -41,7 +42,7 @@ type ToggleGroupProps = ToggleGroupPrimitive.RootProps & {
  * </ToggleGroup>
  * ```
  */
-declare function ToggleGroup({ variant, size, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroup({ variant, size, children, ...props }: ToggleGroupProps): React.JSX.Element;
 type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps & {
     /**
      * Automatically set by ToggleGroup parent - don't set manually
@@ -57,7 +58,7 @@ type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps & {
  * Individual toggle button within a ToggleGroup
  * Position (first/last) is automatically detected for rounded corners
  */
-declare function ToggleGroupItem({ isFirst, isLast, children, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ isFirst, isLast, children, ...props }: ToggleGroupItemProps): React.JSX.Element;
 /**
  * ToggleGroupIcon Component
  * Icon wrapper for use inside ToggleGroup items
@@ -75,6 +76,6 @@ interface ToggleGroupIconProps {
     size?: number;
     color?: string;
 }
-declare function ToggleGroupIcon({ name, size, color }: ToggleGroupIconProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupIcon({ name, size, color }: ToggleGroupIconProps): React.JSX.Element;
 export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };
 export type { ToggleGroupProps, ToggleGroupSize, ToggleGroupVariant };

package/dist/components/Tooltip.d.ts

@@ -41,7 +41,7 @@ interface TooltipContentProps extends TooltipPrimitive.ContentProps {
  * - Smooth animations
  * - Portal-based rendering for proper z-index
  */
-declare function TooltipContent({ side, align, sideOffset, portalHost, variant, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ side, align, sideOffset, portalHost, variant, ...props }: TooltipContentProps): React.JSX.Element;
 /**
  * Tooltip Body Component
  * Simple wrapper for tooltip content with padding
@@ -49,7 +49,7 @@ declare function TooltipContent({ side, align, sideOffset, portalHost, variant,
 interface TooltipBodyProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function TooltipBody({ children, style, ...props }: TooltipBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipBody({ children, style, ...props }: TooltipBodyProps): React.JSX.Element;
 interface TooltipProps extends TooltipPrimitive.RootProps {
     /**
      * Time to wait before showing tooltip (web only)
@@ -99,7 +99,7 @@ interface TooltipProps extends TooltipPrimitive.RootProps {
  * </Tooltip>
  * ```
  */
-declare function Tooltip({ delayDuration, skipDelayDuration, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ delayDuration, skipDelayDuration, ...props }: TooltipProps): React.JSX.Element;
 /**
  * Tooltip Component with Sub-components
  * Properly typed interface for dot notation access (e.g., Tooltip.Trigger)

package/dist/components/UIProvider.d.ts

@@ -20,4 +20,4 @@ export interface UIProviderProps {
      */
     statusBar?: boolean;
 }
-export declare function UIProvider({ children, notification, portalHost, statusBar, }: UIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function UIProvider({ children, notification, portalHost, statusBar, }: UIProviderProps): React.JSX.Element;

package/dist/state/globalUIStore.d.ts

@@ -8,9 +8,16 @@
  * - show({ type, title, messages, duration, loading, action }): displays a notification
  * - hide(): hides the current notification
  *
- * Recommended: wrap in hooks or utility functions for cleaner usage across components.
+ * Notifications auto-dismiss after `DEFAULT_NOTIFICATION_DURATION` unless a
+ * `duration` is given. Pass `duration: 0` to keep one up until dismissed;
+ * loading notifications never auto-dismiss.
+ *
+ * Prefer the `notify` helpers (see ./notify) for triggering notifications from
+ * app code; use this store directly for reactive subscription (selectors) and tests.
  */
 export type GlobalNotificationType = "error" | "success" | "info" | "warning";
+/** Auto-dismiss delay applied when `show()` is called without a `duration`. */
+export declare const DEFAULT_NOTIFICATION_DURATION = 4000;
 export type GlobalNotificationPosition = "top" | "bottom";
 export type GlobalNotificationAction = {
     label: string;
@@ -21,6 +28,7 @@ export type GlobalNotificationAlert = {
     type: GlobalNotificationType;
     title?: string;
     messages?: string[];
+    /** Auto-dismiss delay in ms. Defaults to `DEFAULT_NOTIFICATION_DURATION`; 0 = stays until dismissed. */
     duration?: number;
     loading?: boolean;
     /** Where to display the notification */

package/dist/state/globalUIStore.js

@@ -1,8 +1,16 @@
 import { create } from "zustand";
+/** Auto-dismiss delay applied when `show()` is called without a `duration`. */
+export const DEFAULT_NOTIFICATION_DURATION = 4000;
 export const globalUIStore = create((set) => ({
     alert: null,
     show: (alert) => set({
-        alert: { ...alert, show: true }
+        alert: {
+            ...alert,
+            // Loading notifications stay up until replaced or hidden (e.g. by
+            // notify.promise); everything else falls back to the default timeout.
+            duration: alert.duration ?? (alert.loading ? undefined : DEFAULT_NOTIFICATION_DURATION),
+            show: true,
+        },
     }),
     hide: () => set({ alert: null }),
 }));

package/dist/state/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./globalUIStore";
+export * from "./notify";
 export * from "./themeStore";
 export * from "./themeColorScope";
 export * from "./SsrViewportContext";

package/dist/state/index.js

@@ -1,4 +1,5 @@
 export * from "./globalUIStore.js";
+export * from "./notify.js";
 export * from "./themeStore.js";
 export * from "./themeColorScope.js";
 export * from "./SsrViewportContext.js";

package/dist/state/notify.d.ts

@@ -0,0 +1,50 @@
+import type { GlobalNotificationAlert } from "./globalUIStore";
+/**
+ * notify
+ *
+ * Imperative notification API backed by `globalUIStore`. This is the
+ * recommended way to trigger the `Notification` component from app code.
+ *
+ * Notifications auto-dismiss after `DEFAULT_NOTIFICATION_DURATION` (4s) by
+ * default. Pass `duration: 0` to keep one up until dismissed; `notify.loading`
+ * is always persistent.
+ *
+ * Usage:
+ * ```ts
+ * notify.success("Saved", { messages: ["Your changes have been saved."] });
+ * notify.error("Upload failed");
+ * notify.loading("Uploading…");
+ * notify.hide();
+ *
+ * // Full control (same payload as globalUIStore show())
+ * notify({ type: "info", title: "Copied", duration: 2000, position: "bottom" });
+ *
+ * // Loading → success/error around a promise
+ * await notify.promise(saveProfile(), {
+ *   loading: "Saving…",
+ *   success: "Profile saved",
+ *   error: "Could not save profile",
+ * });
+ * ```
+ */
+export type NotifyOptions = Omit<GlobalNotificationAlert, "show" | "type" | "title">;
+export type NotifyPromiseMessages<T> = {
+    loading: string;
+    success: string | ((value: T) => string);
+    error: string | ((error: unknown) => string);
+};
+export declare const notify: ((alert: Omit<GlobalNotificationAlert, "show">) => void) & {
+    success: (title: string, options?: NotifyOptions) => void;
+    error: (title: string, options?: NotifyOptions) => void;
+    info: (title: string, options?: NotifyOptions) => void;
+    warning: (title: string, options?: NotifyOptions) => void;
+    /** Persistent spinner notification; stays visible until replaced or hidden. */
+    loading: (title: string, options?: NotifyOptions) => void;
+    /**
+     * Shows a loading notification while the promise is pending, then a
+     * success or error notification. Rethrows on rejection and returns the
+     * resolved value so it can wrap existing async flows transparently.
+     */
+    promise: <T>(promise: Promise<T>, messages: NotifyPromiseMessages<T>) => Promise<T>;
+    hide: () => void;
+};