@mrmeg/expo-ui 0.1.0

package/dist/components/Toggle.d.ts

@@ -0,0 +1,106 @@
+import * as TogglePrimitive from "@rn-primitives/toggle";
+import { ViewStyle, StyleProp } from "react-native";
+import type { IconName } from "./Icon";
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize = "sm" | "default" | "lg";
+export type ToggleShape = "default" | "square" | "circle";
+interface ToggleProps extends Omit<TogglePrimitive.RootProps, "style"> {
+    /**
+     * Visual style variant
+     * - default: transparent background with subtle border
+     * - outline: primary border with transparent background
+     * @default "default"
+     */
+    variant?: ToggleVariant;
+    /**
+     * Size of the toggle button
+     * - sm: 32px height
+     * - default: 40px height
+     * - lg: 48px height
+     * @default "default"
+     */
+    size?: ToggleSize;
+    /**
+     * Shape of the toggle button
+     * - default: rounded corners (radiusMd)
+     * - square: sharp corners (0)
+     * - circle: fully rounded (radiusFull)
+     * @default "default"
+     */
+    shape?: ToggleShape;
+    /**
+     * Whether the toggle is in a loading state
+     * Shows spinner and disables interaction
+     */
+    loading?: boolean;
+    /**
+     * Whether the toggle is icon-only (equal padding)
+     * Optimizes padding for icon buttons
+     */
+    iconOnly?: boolean;
+    /**
+     * Custom style override (uses StyleSheet.flatten for web compatibility)
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Enhanced Toggle Component
+ *
+ * Features:
+ * - 2 variants (default, outline)
+ * - 3 sizes (sm, default, lg)
+ * - 3 shapes (default, square, circle)
+ * - Loading state with spinner
+ * - Icon-only optimization
+ * - Style prop support
+ * - Full accessibility
+ *
+ * Usage:
+ * ```tsx
+ * // Basic
+ * const [pressed, setPressed] = useState(false);
+ * <Toggle pressed={pressed} onPressedChange={setPressed}>
+ *   <SansSerifText>Toggle Me</SansSerifText>
+ * </Toggle>
+ *
+ * // With icon
+ * <Toggle pressed={pressed} onPressedChange={setPressed} iconOnly>
+ *   <ToggleIcon name="bold" />
+ * </Toggle>
+ *
+ * // Different shapes
+ * <Toggle shape="square" pressed={pressed} onPressedChange={setPressed}>
+ *   <SansSerifText>Square</SansSerifText>
+ * </Toggle>
+ *
+ * <Toggle shape="circle" iconOnly pressed={pressed} onPressedChange={setPressed}>
+ *   <ToggleIcon name="bold" />
+ * </Toggle>
+ *
+ * // Loading state
+ * <Toggle loading pressed={pressed} onPressedChange={setPressed}>
+ *   <SansSerifText>Loading...</SansSerifText>
+ * </Toggle>
+ * ```
+ */
+declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleOverride, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ToggleIcon Component
+ * Icon wrapper for use inside Toggle buttons
+ * Automatically inherits sizing from parent Toggle
+ *
+ * Usage:
+ * ```tsx
+ * <Toggle pressed={pressed} onPressedChange={setPressed}>
+ *   <ToggleIcon name="bold" />
+ * </Toggle>
+ * ```
+ */
+interface ToggleIconProps {
+    name: IconName;
+    size?: number;
+    color?: string;
+}
+declare function ToggleIcon({ name, size, color }: ToggleIconProps): import("react/jsx-runtime").JSX.Element;
+export { Toggle, ToggleIcon };
+export type { ToggleProps };

package/dist/components/Toggle.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Icon } from "./Icon";
+import { TextClassContext, TextColorContext } from "./StyledText";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import * as TogglePrimitive from "@rn-primitives/toggle";
+import { Platform, StyleSheet, ActivityIndicator } from "react-native";
+import { palette } from "../constants/colors";
+const DEFAULT_HIT_SLOP = 8;
+// Size configurations
+const TOGGLE_SIZES = {
+    sm: {
+        height: 32,
+        minWidth: 32,
+        paddingHorizontal: spacing.sm,
+        fontSize: 12,
+        iconSize: spacing.iconSm,
+    },
+    default: {
+        height: 36,
+        minWidth: 36,
+        paddingHorizontal: spacing.md,
+        fontSize: 13,
+        iconSize: spacing.iconMd,
+    },
+    lg: {
+        height: 40,
+        minWidth: 40,
+        paddingHorizontal: spacing.lg,
+        fontSize: 14,
+        iconSize: spacing.iconMd,
+    },
+};
+/**
+ * Enhanced Toggle Component
+ *
+ * Features:
+ * - 2 variants (default, outline)
+ * - 3 sizes (sm, default, lg)
+ * - 3 shapes (default, square, circle)
+ * - Loading state with spinner
+ * - Icon-only optimization
+ * - Style prop support
+ * - Full accessibility
+ *
+ * Usage:
+ * ```tsx
+ * // Basic
+ * const [pressed, setPressed] = useState(false);
+ * <Toggle pressed={pressed} onPressedChange={setPressed}>
+ *   <SansSerifText>Toggle Me</SansSerifText>
+ * </Toggle>
+ *
+ * // With icon
+ * <Toggle pressed={pressed} onPressedChange={setPressed} iconOnly>
+ *   <ToggleIcon name="bold" />
+ * </Toggle>
+ *
+ * // Different shapes
+ * <Toggle shape="square" pressed={pressed} onPressedChange={setPressed}>
+ *   <SansSerifText>Square</SansSerifText>
+ * </Toggle>
+ *
+ * <Toggle shape="circle" iconOnly pressed={pressed} onPressedChange={setPressed}>
+ *   <ToggleIcon name="bold" />
+ * </Toggle>
+ *
+ * // Loading state
+ * <Toggle loading pressed={pressed} onPressedChange={setPressed}>
+ *   <SansSerifText>Loading...</SansSerifText>
+ * </Toggle>
+ * ```
+ */
+function Toggle({ variant = "default", size = "default", shape = "default", loading = false, iconOnly = false, style: styleOverride, ...props }) {
+    const { theme, getContrastingColor, withAlpha } = useTheme();
+    const sizeConfig = TOGGLE_SIZES[size];
+    // Calculate text color based on state and variant
+    const getTextColor = () => {
+        if (props.pressed) {
+            if (variant === "outline") {
+                // When pressed with outline variant, background is primary
+                return getContrastingColor(theme.colors.primary, palette.white, palette.black);
+            }
+            // When pressed with default variant, use primary color
+            return theme.colors.primary;
+        }
+        // When not pressed, use base content or primary for outline
+        return variant === "outline" ? theme.colors.primary : theme.colors.text;
+    };
+    const textColor = getTextColor();
+    // Determine border radius based on shape
+    const getBorderRadius = () => {
+        if (shape === "square")
+            return 0;
+        if (shape === "circle")
+            return spacing.radiusFull;
+        return spacing.radiusMd;
+    };
+    // Flatten style override for web compatibility
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    const isDisabled = props.disabled || loading;
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TogglePrimitive.Root, { ...props, disabled: isDisabled, style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: spacing.sm,
+                    height: sizeConfig.height,
+                    minWidth: sizeConfig.minWidth,
+                    paddingHorizontal: iconOnly ? sizeConfig.height / 2 - sizeConfig.iconSize / 2 : sizeConfig.paddingHorizontal,
+                    borderRadius: getBorderRadius(),
+                    borderWidth: 1,
+                    // Base variant styles
+                    ...(variant === "default" && !props.pressed && {
+                        backgroundColor: "transparent",
+                        borderColor: theme.colors.border,
+                    }),
+                    ...(variant === "default" && props.pressed && {
+                        backgroundColor: withAlpha(theme.colors.primary, 0.1),
+                        borderColor: theme.colors.primary,
+                    }),
+                    // Outline variant styles
+                    ...(variant === "outline" && !props.pressed && {
+                        backgroundColor: "transparent",
+                        borderColor: theme.colors.primary,
+                    }),
+                    ...(variant === "outline" && props.pressed && {
+                        backgroundColor: theme.colors.primary,
+                        borderColor: theme.colors.primary,
+                    }),
+                    // Disabled state
+                    opacity: isDisabled ? 0.5 : 1,
+                    // Web-specific styles
+                    ...(Platform.OS === "web" && {
+                        cursor: isDisabled ? "not-allowed" : "pointer",
+                        transition: "all 150ms",
+                    }),
+                    // Apply custom style override
+                    ...(flattenedStyle || {}),
+                }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "button", accessibilityState: {
+                    selected: props.pressed,
+                    disabled: !!isDisabled,
+                    busy: loading,
+                }, children: loading ? (_jsx(ActivityIndicator, { size: "small", color: textColor })) : (props.children) }) }) }));
+}
+function ToggleIcon({ name, size, color }) {
+    const contextColor = React.useContext(TextColorContext);
+    return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
+}
+export { Toggle, ToggleIcon };

package/dist/components/ToggleGroup.d.ts

@@ -0,0 +1,80 @@
+import type { IconName } from "./Icon";
+import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
+type ToggleGroupVariant = "default" | "outline";
+type ToggleGroupSize = "sm" | "default" | "lg";
+type ToggleGroupProps = ToggleGroupPrimitive.RootProps & {
+    /**
+     * Visual style variant
+     * - default: transparent background with subtle border
+     * - outline: primary border with grouped appearance
+     */
+    variant?: ToggleGroupVariant;
+    /**
+     * Size of the toggle buttons
+     * - sm: 32px height
+     * - default: 40px height
+     * - lg: 48px height
+     */
+    size?: ToggleGroupSize;
+};
+/**
+ * ToggleGroup Component
+ * A group of toggle buttons for single or multiple selection
+ * Using @rn-primitives/toggle-group with DaisyUI theme integration
+ *
+ * Usage (Single Selection):
+ * ```tsx
+ * const [alignment, setAlignment] = useState('left');
+ * <ToggleGroup type="single" value={alignment} onValueChange={setAlignment}>
+ *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * Usage (Multiple Selection):
+ * ```tsx
+ * const [formats, setFormats] = useState(['bold']);
+ * <ToggleGroup type="multiple" value={formats} onValueChange={setFormats}>
+ *   <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+ *   <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+declare function ToggleGroup({ variant, size, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps & {
+    /**
+     * Automatically set by ToggleGroup parent - don't set manually
+     */
+    isFirst?: boolean;
+    /**
+     * Automatically set by ToggleGroup parent - don't set manually
+     */
+    isLast?: boolean;
+};
+/**
+ * ToggleGroupItem Component
+ * 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;
+/**
+ * ToggleGroupIcon Component
+ * Icon wrapper for use inside ToggleGroup items
+ * Automatically inherits sizing from parent ToggleGroup
+ *
+ * Usage:
+ * ```tsx
+ * <ToggleGroupItem value="bold">
+ *   <ToggleGroupIcon name="bold" />
+ * </ToggleGroupItem>
+ * ```
+ */
+interface ToggleGroupIconProps {
+    name: IconName;
+    size?: number;
+    color?: string;
+}
+declare function ToggleGroupIcon({ name, size, color }: ToggleGroupIconProps): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };
+export type { ToggleGroupProps, ToggleGroupSize, ToggleGroupVariant };

package/dist/components/ToggleGroup.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "./Icon";
+import { TextClassContext, TextColorContext } from "./StyledText";
+import { spacing } from "../constants/spacing";
+import { useTheme } from "../hooks/useTheme";
+import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
+import * as React from "react";
+import { Platform } from "react-native";
+const DEFAULT_HIT_SLOP = 8;
+// Size configurations (same as Toggle)
+const TOGGLE_GROUP_SIZES = {
+    sm: {
+        height: 32,
+        minWidth: 32,
+        paddingHorizontal: spacing.sm,
+        fontSize: 12,
+        iconSize: spacing.iconSm,
+    },
+    default: {
+        height: 36,
+        minWidth: 36,
+        paddingHorizontal: spacing.md,
+        fontSize: 13,
+        iconSize: spacing.iconMd,
+    },
+    lg: {
+        height: 40,
+        minWidth: 40,
+        paddingHorizontal: spacing.lg,
+        fontSize: 14,
+        iconSize: spacing.iconMd,
+    },
+};
+const ToggleGroupContext = React.createContext(null);
+function useToggleGroupContext() {
+    const context = React.useContext(ToggleGroupContext);
+    if (context === null) {
+        throw new Error("ToggleGroup compound components cannot be rendered outside the ToggleGroup component");
+    }
+    return context;
+}
+/**
+ * ToggleGroup Component
+ * A group of toggle buttons for single or multiple selection
+ * Using @rn-primitives/toggle-group with DaisyUI theme integration
+ *
+ * Usage (Single Selection):
+ * ```tsx
+ * const [alignment, setAlignment] = useState('left');
+ * <ToggleGroup type="single" value={alignment} onValueChange={setAlignment}>
+ *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * Usage (Multiple Selection):
+ * ```tsx
+ * const [formats, setFormats] = useState(['bold']);
+ * <ToggleGroup type="multiple" value={formats} onValueChange={setFormats}>
+ *   <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+ *   <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+function ToggleGroup({ variant = "default", size = "default", children, ...props }) {
+    const { theme } = useTheme();
+    // Count valid children for first/last detection
+    const childrenArray = React.Children.toArray(children);
+    const validChildren = childrenArray.filter((child) => React.isValidElement(child) && child.type === ToggleGroupItem);
+    const childCount = validChildren.length;
+    // Clone children with position props
+    let itemIndex = 0;
+    const enhancedChildren = React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === ToggleGroupItem) {
+            const isFirst = itemIndex === 0;
+            const isLast = itemIndex === childCount - 1;
+            itemIndex++;
+            return React.cloneElement(child, {
+                isFirst,
+                isLast,
+            });
+        }
+        return child;
+    });
+    return (_jsx(ToggleGroupPrimitive.Root, { ...props, style: {
+            flexDirection: "row",
+            alignItems: "center",
+            borderRadius: spacing.radiusMd,
+            // No shadow on Android - causes text background artifact
+            ...(variant === "outline" && Platform.OS === "ios" && {
+                shadowColor: theme.colors.overlay,
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.05,
+                shadowRadius: 2,
+            }),
+            ...(Platform.OS === "web" && {
+                width: "fit-content",
+            }),
+        }, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size }, children: enhancedChildren }) }));
+}
+/**
+ * ToggleGroupItem Component
+ * Individual toggle button within a ToggleGroup
+ * Position (first/last) is automatically detected for rounded corners
+ */
+function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }) {
+    const { theme, withAlpha, getContrastingColor } = useTheme();
+    const context = useToggleGroupContext();
+    const { value: groupValue } = ToggleGroupPrimitive.useRootContext();
+    const sizeConfig = TOGGLE_GROUP_SIZES[context.size];
+    // Check if this item is selected
+    const isSelected = ToggleGroupPrimitive.utils.getIsSelected(groupValue, props.value);
+    // Determine the actual background color for this item
+    const itemBgColor = (() => {
+        if (context.variant === "outline" && isSelected)
+            return theme.colors.primary;
+        if (context.variant === "default" && isSelected)
+            return theme.colors.background;
+        return theme.colors.background;
+    })();
+    // Calculate text color with contrast against the actual background
+    const textColor = isSelected
+        ? getContrastingColor(itemBgColor, theme.colors.foreground, theme.colors.background)
+        : theme.colors.foreground;
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(ToggleGroupPrimitive.Item, { ...props, style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: spacing.sm,
+                    height: sizeConfig.height,
+                    minWidth: sizeConfig.minWidth,
+                    paddingHorizontal: sizeConfig.paddingHorizontal,
+                    borderWidth: 1,
+                    flexShrink: 0,
+                    // Base variant styles
+                    ...(context.variant === "default" && !isSelected && {
+                        backgroundColor: "transparent",
+                        borderColor: theme.colors.border,
+                    }),
+                    ...(context.variant === "default" && isSelected && {
+                        backgroundColor: withAlpha(theme.colors.primary, 0.1),
+                        borderColor: theme.colors.primary,
+                    }),
+                    // Outline variant styles
+                    ...(context.variant === "outline" && !isSelected && {
+                        backgroundColor: "transparent",
+                        borderColor: theme.colors.border,
+                    }),
+                    ...(context.variant === "outline" && isSelected && {
+                        backgroundColor: theme.colors.primary,
+                        borderColor: theme.colors.primary,
+                    }),
+                    // Remove borders between items (except first)
+                    ...(context.variant === "outline" && !isFirst && {
+                        borderLeftWidth: 0,
+                    }),
+                    // Border radius handling
+                    borderRadius: 0, // Remove all radius by default
+                    ...(isFirst && {
+                        borderTopLeftRadius: spacing.radiusMd,
+                        borderBottomLeftRadius: spacing.radiusMd,
+                    }),
+                    ...(isLast && {
+                        borderTopRightRadius: spacing.radiusMd,
+                        borderBottomRightRadius: spacing.radiusMd,
+                    }),
+                    // Single item (both first and last)
+                    ...(isFirst && isLast && {
+                        borderRadius: spacing.radiusMd,
+                    }),
+                    // Disabled state
+                    opacity: props.disabled ? 0.5 : 1,
+                    // Web-specific styles
+                    ...(Platform.OS === "web" && {
+                        cursor: props.disabled ? "not-allowed" : "pointer",
+                        transition: "all 150ms",
+                        // Ensure proper z-index on focus
+                        ...(isSelected && {
+                            zIndex: 10,
+                        }),
+                    }),
+                }, hitSlop: DEFAULT_HIT_SLOP, children: children }) }) }));
+}
+function ToggleGroupIcon({ name, size, color }) {
+    const contextColor = React.useContext(TextColorContext);
+    return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
+}
+export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { View, ViewProps } from "react-native";
+import * as TooltipPrimitive from "@rn-primitives/tooltip";
+/**
+ * Tooltip Trigger Component
+ * The element that triggers the tooltip to appear on hover (web) or press (native)
+ */
+declare const TooltipTrigger: {
+    ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
+        asChild?: boolean;
+    } & {
+        onKeyDown?: (ev: React.KeyboardEvent) => void;
+        onKeyUp?: (ev: React.KeyboardEvent) => void;
+    } & React.RefAttributes<import("@rn-primitives/tooltip").TriggerRef>): React.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tooltip variant styles
+ */
+export type TooltipVariant = "default" | "dark" | "light";
+interface TooltipContentProps extends TooltipPrimitive.ContentProps {
+    /**
+     * Optional portal host name for custom portal mounting
+     */
+    portalHost?: string;
+    /**
+     * Visual variant
+     * @default "default"
+     */
+    variant?: TooltipVariant;
+}
+/**
+ * Tooltip Content Component
+ * The content that appears in the tooltip overlay
+ * Supports smart positioning, animations, and theme integration
+ *
+ * Features:
+ * - Side positioning (top, bottom, left, right - left/right web only)
+ * - Alignment options (start, center, end)
+ * - Visual variants (default, dark, light)
+ * - 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;
+/**
+ * Tooltip Body Component
+ * Simple wrapper for tooltip content with padding
+ */
+interface TooltipBodyProps extends ViewProps {
+    children: React.ReactNode;
+}
+declare function TooltipBody({ children, style, ...props }: TooltipBodyProps): import("react/jsx-runtime").JSX.Element;
+interface TooltipProps extends TooltipPrimitive.RootProps {
+    /**
+     * Time to wait before showing tooltip (web only)
+     * @default 700
+     */
+    delayDuration?: number;
+    /**
+     * Time between tooltips when moving cursor (web only)
+     * @default 300
+     */
+    skipDelayDuration?: number;
+}
+/**
+ * Tooltip Root Component
+ * Manages tooltip state and provides context for trigger and content
+ *
+ * Usage:
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button><Text>Hover me</Text></Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <StyledText>Tooltip text</StyledText>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
+ * // With positioning
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Icon as={Info} size={20} />
+ *   </TooltipTrigger>
+ *   <TooltipContent side="bottom" align="start">
+ *     <StyledText>Information tooltip</StyledText>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
+ * // Dark variant
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button><Text>Help</Text></Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent variant="dark">
+ *     <StyledText>Dark tooltip</StyledText>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ */
+declare function Tooltip({ delayDuration, skipDelayDuration, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Tooltip Component with Sub-components
+ * Properly typed interface for dot notation access (e.g., Tooltip.Trigger)
+ */
+declare const TooltipComponent: typeof Tooltip & {
+    Trigger: {
+        ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
+            asChild?: boolean;
+        } & {
+            onKeyDown?: (ev: React.KeyboardEvent) => void;
+            onKeyUp?: (ev: React.KeyboardEvent) => void;
+        } & React.RefAttributes<import("@rn-primitives/tooltip").TriggerRef>): React.JSX.Element;
+        displayName: string;
+    };
+    Content: typeof TooltipContent;
+    Body: typeof TooltipBody;
+};
+export { TooltipComponent as Tooltip, TooltipTrigger, TooltipContent, TooltipBody, };
+export type { TooltipContentProps, TooltipBodyProps, TooltipProps, };