@mrmeg/expo-ui 0.1.0

package/README.md

@@ -0,0 +1,96 @@
+# @mrmeg/expo-ui
+
+Reusable Expo and React Native UI primitives shared by the template and consumer apps. The package does not ship font files; web consumers load Lato from Google Fonts and native consumers use platform sans-serif fallbacks.
+
+## Install
+
+Install from npm after publishing:
+
+```sh
+bun add @mrmeg/expo-ui
+```
+
+Consumers must also install the peer dependencies listed in `package.json`. Keep npm auth tokens in developer or CI configuration, not in this repository.
+
+## Imports
+
+```tsx
+import { Button, StyledText } from "@mrmeg/expo-ui/components";
+import { Button as ButtonDirect } from "@mrmeg/expo-ui/components/Button";
+import { colors, spacing, typography } from "@mrmeg/expo-ui/constants";
+import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
+import { globalUIStore, useThemeStore } from "@mrmeg/expo-ui/state";
+import { hapticLight, setupSentry } from "@mrmeg/expo-ui/lib";
+```
+
+The root barrel also exports the public surface:
+
+```tsx
+import { Button, colors, useTheme } from "@mrmeg/expo-ui";
+```
+
+## App Startup
+
+Call `useResources()` once near the Expo app root before hiding the splash screen:
+
+```tsx
+import { ThemeProvider } from "@react-navigation/native";
+import { colors } from "@mrmeg/expo-ui/constants";
+import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
+import { Notification, StatusBar } from "@mrmeg/expo-ui/components";
+import { PortalHost } from "@rn-primitives/portal";
+
+export default function RootLayout() {
+  const { scheme } = useTheme();
+  const { loaded } = useResources();
+
+  if (!loaded) return null;
+
+  return (
+    <ThemeProvider
+      value={{
+        dark: colors[scheme ?? "light"].dark,
+        colors: colors[scheme ?? "light"].navigation,
+        fonts: colors[scheme ?? "light"].fonts,
+      }}
+    >
+      {/* App navigation goes here. */}
+      <Notification />
+      <PortalHost />
+      <StatusBar />
+    </ThemeProvider>
+  );
+}
+```
+
+## Fonts
+
+This package does not ship Lato `.ttf` files or other font binaries.
+
+On web, `useResources()` injects the Google Fonts Lato stylesheet after hydration if the app has not already added it. For better first paint in Expo Router web apps, add the links in app-owned `app/+html.tsx`:
+
+```tsx
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+<link
+  id="mrmeg-expo-ui-lato"
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
+/>
+```
+
+On native, the package uses platform sans-serif fallbacks. `useResources()` still loads `Feather.font` from the consumer app's `@expo/vector-icons` peer dependency for icon rendering.
+
+## Package Checks
+
+Run these before publishing:
+
+```sh
+bun run ui:typecheck
+bun run ui:test
+bun run ui:build
+bun run ui:pack
+bun run ui:consumer-smoke
+```
+
+`bun run ui:pack` runs a dry pack so the published file list and package size can be inspected before release.

package/dist/components/Accordion.d.ts

@@ -0,0 +1,54 @@
+import { View, ViewStyle } from "react-native";
+import * as AccordionPrimitive from "@rn-primitives/accordion";
+type BaseAccordionRootProps = Omit<React.ComponentProps<typeof View>, "style"> & React.RefAttributes<AccordionPrimitive.RootRef> & {
+    disabled?: boolean;
+    collapsible?: boolean;
+    dir?: "ltr" | "rtl";
+    orientation?: "vertical" | "horizontal";
+    style?: ViewStyle;
+};
+type WebSingleAccordionRootProps = BaseAccordionRootProps & {
+    type: "single";
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string | undefined) => void;
+};
+type WebMultipleAccordionRootProps = BaseAccordionRootProps & {
+    type: "multiple";
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+type AccordionRootProps = WebSingleAccordionRootProps | WebMultipleAccordionRootProps;
+/**
+ * Accordion Root Component
+ * Container for accordion items with support for single or multiple open items
+ *
+ * Usage:
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Title</AccordionTrigger>
+ *     <AccordionContent>Content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+declare function Accordion({ children, style, ...props }: AccordionRootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accordion Item Component
+ * Individual accordion item with border styling
+ */
+declare function AccordionItem({ children, value, style: styleOverride, ...props }: AccordionPrimitive.ItemProps & React.RefAttributes<AccordionPrimitive.ItemRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accordion Trigger Component
+ * Clickable header that expands/collapses the content
+ * Includes animated chevron icon
+ */
+declare function AccordionTrigger({ children, style: styleOverride, ...props }: AccordionPrimitive.TriggerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accordion Content Component
+ * Expandable content area with animations
+ */
+declare function AccordionContent({ children, style: styleOverride, ...props }: AccordionPrimitive.ContentProps & React.RefAttributes<AccordionPrimitive.ContentRef>): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/Accordion.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Platform, Pressable, View } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
+import { Icon } from "./Icon";
+import { TextClassContext } from "./StyledText";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import * as AccordionPrimitive from "@rn-primitives/accordion";
+function normalizeSingleValue(value) {
+    return value ?? "";
+}
+function denormalizeSingleValue(value) {
+    return value === "" ? undefined : value;
+}
+function normalizeMultipleValue(value) {
+    return value ?? [];
+}
+function WebSingleAccordionRoot(props) {
+    const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => normalizeSingleValue(props.defaultValue));
+    const normalizedValue = isControlled
+        ? normalizeSingleValue(props.value)
+        : uncontrolledValue;
+    const handleValueChange = (nextValue) => {
+        const normalizedNextValue = normalizeSingleValue(nextValue);
+        if (!isControlled) {
+            setUncontrolledValue(normalizedNextValue);
+        }
+        props.onValueChange?.(denormalizeSingleValue(normalizedNextValue));
+    };
+    const { children, style, type: _type, defaultValue: _defaultValue, onValueChange: _onValueChange, value: _value, ...rootProps } = props;
+    return (_jsx(AccordionPrimitive.Root, { ...rootProps, type: "single", value: normalizedValue, onValueChange: handleValueChange, asChild: false, children: _jsx(View, { style: style, children: children }) }));
+}
+function WebMultipleAccordionRoot(props) {
+    const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => normalizeMultipleValue(props.defaultValue));
+    const normalizedValue = isControlled
+        ? normalizeMultipleValue(props.value)
+        : uncontrolledValue;
+    const handleValueChange = (nextValue) => {
+        const normalizedNextValue = normalizeMultipleValue(nextValue);
+        if (!isControlled) {
+            setUncontrolledValue(normalizedNextValue);
+        }
+        props.onValueChange?.(normalizedNextValue);
+    };
+    const { children, style, type: _type, defaultValue: _defaultValue, onValueChange: _onValueChange, value: _value, ...rootProps } = props;
+    return (_jsx(AccordionPrimitive.Root, { ...rootProps, type: "multiple", value: normalizedValue, onValueChange: handleValueChange, asChild: false, children: _jsx(View, { style: style, children: children }) }));
+}
+function WebAccordionRoot(props) {
+    if (props.type === "multiple") {
+        return _jsx(WebMultipleAccordionRoot, { ...props });
+    }
+    return _jsx(WebSingleAccordionRoot, { ...props });
+}
+/**
+ * Accordion Root Component
+ * Container for accordion items with support for single or multiple open items
+ *
+ * Usage:
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Title</AccordionTrigger>
+ *     <AccordionContent>Content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+function Accordion({ children, style, ...props }) {
+    if (Platform.OS === "web") {
+        return (_jsx(WebAccordionRoot, { ...props, style: style, children: children }));
+    }
+    return (_jsx(AccordionPrimitive.Root, { ...props, asChild: true, children: _jsx(View, { style: style, children: children }) }));
+}
+/**
+ * Accordion Item Component
+ * Individual accordion item with border styling
+ */
+function AccordionItem({ children, value, style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(AccordionPrimitive.Item, { value: value, asChild: true, ...props, children: _jsx(View, { style: [
+                {
+                    borderBottomWidth: 1,
+                    borderBottomColor: theme.colors.border,
+                    overflow: "hidden",
+                },
+                // Spread array styles from primitives to prevent nested arrays on web
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                    : []),
+            ], children: children }) }));
+}
+const Trigger = Platform.OS === "web" ? View : Pressable;
+/**
+ * Accordion Trigger Component
+ * Clickable header that expands/collapses the content
+ * Includes animated chevron icon
+ */
+function AccordionTrigger({ children, style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const { isExpanded } = AccordionPrimitive.useItemContext();
+    const rotation = useSharedValue(isExpanded ? 1 : 0);
+    useEffect(() => {
+        const target = isExpanded ? 1 : 0;
+        if (reduceMotion) {
+            rotation.value = target;
+            return;
+        }
+        rotation.value = withTiming(target, {
+            duration: isExpanded ? 200 : 150,
+        });
+    }, [isExpanded, reduceMotion]);
+    const chevronStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${rotation.value * 180}deg` }],
+    }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(AccordionPrimitive.Header, { children: _jsx(AccordionPrimitive.Trigger, { ...props, asChild: true, children: _jsxs(Trigger, { style: [
+                        {
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            gap: spacing.md,
+                            borderRadius: spacing.radiusMd,
+                            paddingVertical: spacing.md,
+                            ...(Platform.OS === "web" && { cursor: "pointer" }),
+                        },
+                        // Spread array styles from primitives to prevent nested arrays on web
+                        ...(styleOverride && typeof styleOverride !== "function"
+                            ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                            : []),
+                    ], children: [_jsx(_Fragment, { children: children }), _jsx(Animated.View, { style: chevronStyle, children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }) }));
+}
+/**
+ * Accordion Content Component
+ * Expandable content area with animations
+ */
+function AccordionContent({ children, style: styleOverride, ...props }) {
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(AccordionPrimitive.Content, { ...props, children: _jsx(View, { style: [
+                    {
+                        paddingBottom: spacing.sm,
+                        overflow: "hidden",
+                    },
+                    // Spread array styles from primitives to prevent nested arrays on web
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                        : []),
+                ], children: children }) }) }));
+}
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/Alert.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Cross-platform Alert utility.
+ *
+ * Wraps React Native's Alert API to support both native and web platforms.
+ * On web, it uses `window.alert()` or `window.confirm()` to simulate native alerts.
+ *
+ * Usage:
+ * Alert.show({
+ *   title: "Delete Item",
+ *   message: "Are you sure you want to delete this?",
+ *   buttons: [
+ *     { text: "Cancel", style: "cancel" },
+ *     { text: "Delete", style: "destructive", onPress: () => handleDelete() }
+ *   ]
+ * });
+ */
+type AlertButton = {
+    text: string;
+    onPress?: () => void;
+    style?: "default" | "cancel" | "destructive";
+};
+interface AlertParams {
+    title?: string;
+    message: string;
+    buttons?: AlertButton[];
+}
+export declare const Alert: {
+    show: ({ title, message, buttons }: AlertParams) => void;
+};
+export {};

package/dist/components/Alert.js

@@ -0,0 +1,25 @@
+import { Alert as RNAlert, Platform } from "react-native";
+export const Alert = {
+    show: ({ title = "", message, buttons = [{ text: "OK" }] }) => {
+        if (Platform.OS === "web") {
+            if (buttons.length > 1) {
+                const result = window.confirm(`${title}\n${message}`);
+                const confirmButton = buttons.find(b => b.style !== "cancel");
+                const cancelButton = buttons.find(b => b.style === "cancel");
+                if (result && confirmButton?.onPress) {
+                    confirmButton.onPress();
+                }
+                else if (!result && cancelButton?.onPress) {
+                    cancelButton.onPress();
+                }
+            }
+            else {
+                window.alert(`${title}\n${message}`);
+                buttons[0]?.onPress?.();
+            }
+        }
+        else {
+            RNAlert.alert(title, message, buttons);
+        }
+    }
+};

package/dist/components/AnimatedView.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { ViewProps } from "react-native";
+/**
+ * Animation type options
+ */
+export type AnimationType = "fade" | "fadeSlideUp" | "fadeSlideDown" | "scale";
+interface AnimatedViewProps extends ViewProps {
+    children: React.ReactNode;
+    /**
+     * Type of animation to use
+     * @default "fade"
+     */
+    type?: AnimationType;
+    /**
+     * Animation duration in milliseconds for enter animation
+     * @default 200
+     */
+    enterDuration?: number;
+    /**
+     * Delay before starting the enter animation (in milliseconds)
+     * Useful for staggered animations
+     * @default 0
+     */
+    delay?: number;
+}
+/**
+ * Cross-Platform Animated View Component
+ * Uses Reanimated for smooth 60fps animations on all platforms
+ *
+ * Features:
+ * - Multiple animation types (fade, fadeSlideUp, fadeSlideDown, scale)
+ * - Configurable enter duration
+ * - Optional delay for staggered animations
+ * - Respects reduced motion accessibility preference
+ *
+ * Usage:
+ * ```tsx
+ * // Simple fade
+ * <AnimatedView>
+ *   {children}
+ * </AnimatedView>
+ *
+ * // Fade with slide up
+ * <AnimatedView type="fadeSlideUp">
+ *   {children}
+ * </AnimatedView>
+ *
+ * // With delay (for staggered lists)
+ * <AnimatedView type="fadeSlideUp" delay={100}>
+ *   {children}
+ * </AnimatedView>
+ * ```
+ */
+export declare function AnimatedView({ children, type, enterDuration, delay, style, ...props }: AnimatedViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AnimatedView.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated from "react-native-reanimated";
+import { useStaggeredEntrance } from "../hooks/useStaggeredEntrance";
+/**
+ * Cross-Platform Animated View Component
+ * Uses Reanimated for smooth 60fps animations on all platforms
+ *
+ * Features:
+ * - Multiple animation types (fade, fadeSlideUp, fadeSlideDown, scale)
+ * - Configurable enter duration
+ * - Optional delay for staggered animations
+ * - Respects reduced motion accessibility preference
+ *
+ * Usage:
+ * ```tsx
+ * // Simple fade
+ * <AnimatedView>
+ *   {children}
+ * </AnimatedView>
+ *
+ * // Fade with slide up
+ * <AnimatedView type="fadeSlideUp">
+ *   {children}
+ * </AnimatedView>
+ *
+ * // With delay (for staggered lists)
+ * <AnimatedView type="fadeSlideUp" delay={100}>
+ *   {children}
+ * </AnimatedView>
+ * ```
+ */
+export function AnimatedView({ children, type = "fade", enterDuration = 200, delay = 0, style, ...props }) {
+    const entranceStyle = useStaggeredEntrance({
+        type,
+        delay,
+        duration: enterDuration,
+    });
+    return (_jsx(Animated.View, { style: [style, entranceStyle], ...props, children: children }));
+}

package/dist/components/Badge.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export type BadgeVariant = "default" | "secondary" | "outline" | "destructive";
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Badge Component
+ *
+ * Small inline status label with pill shape.
+ *
+ * Usage:
+ * ```tsx
+ * <Badge>Default</Badge>
+ * <Badge variant="secondary">Secondary</Badge>
+ * <Badge variant="outline">Outline</Badge>
+ * <Badge variant="destructive">Error</Badge>
+ * ```
+ */
+declare function Badge({ children, variant, style: styleOverride }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge };

package/dist/components/Badge.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import { StyledText } from "./StyledText";
+/**
+ * Badge Component
+ *
+ * Small inline status label with pill shape.
+ *
+ * Usage:
+ * ```tsx
+ * <Badge>Default</Badge>
+ * <Badge variant="secondary">Secondary</Badge>
+ * <Badge variant="outline">Outline</Badge>
+ * <Badge variant="destructive">Error</Badge>
+ * ```
+ */
+function Badge({ children, variant = "default", style: styleOverride }) {
+    const { theme } = useTheme();
+    const styles = createStyles(theme);
+    const textStyle = [
+        styles.text,
+        variant === "default" && { color: theme.colors.primaryForeground },
+        variant === "secondary" && { color: theme.colors.secondaryForeground },
+        variant === "outline" && { color: theme.colors.foreground },
+        variant === "destructive" && { color: theme.colors.destructiveForeground },
+    ];
+    const normalizedChildren = React.Children.toArray(children);
+    const hasOnlyTextChildren = normalizedChildren.every((child) => typeof child === "string" || typeof child === "number");
+    const content = hasOnlyTextChildren ? (_jsx(StyledText, { style: textStyle, children: normalizedChildren.join("") })) : (React.Children.map(children, (child) => {
+        if (typeof child === "string" || typeof child === "number") {
+            return _jsx(StyledText, { style: textStyle, children: child });
+        }
+        return child;
+    }));
+    return (_jsx(View, { accessibilityRole: "text", style: [
+            styles.badge,
+            variant === "default" && styles.default,
+            variant === "secondary" && styles.secondary,
+            variant === "outline" && styles.outline,
+            variant === "destructive" && styles.destructive,
+            styleOverride,
+        ], children: content }));
+}
+const createStyles = (theme) => StyleSheet.create({
+    badge: {
+        alignSelf: "flex-start",
+        borderRadius: spacing.radiusFull,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+    },
+    default: {
+        backgroundColor: theme.colors.primary,
+    },
+    secondary: {
+        backgroundColor: theme.colors.secondary,
+    },
+    outline: {
+        backgroundColor: "transparent",
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+    },
+    destructive: {
+        backgroundColor: theme.colors.destructive,
+    },
+    text: {
+        fontSize: 12,
+        fontWeight: "500",
+        lineHeight: 18,
+    },
+});
+export { Badge };

package/dist/components/BottomSheet.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
+type SnapPoint = number | `${number}%`;
+interface BottomSheetContextValue {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    toggle: () => void;
+    snapPoints: number[];
+    currentSnapIndex: number;
+    closeOnBackdropPress: boolean;
+}
+interface BottomSheetProps {
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Default open state for uncontrolled mode */
+    defaultOpen?: boolean;
+    /** Snap point heights (px or percentage strings) */
+    snapPoints?: SnapPoint[];
+    /** Whether to close when backdrop is pressed */
+    closeOnBackdropPress?: boolean;
+    children: React.ReactNode;
+}
+interface BottomSheetTriggerProps {
+    asChild?: boolean;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+interface BottomSheetContentProps extends ViewProps {
+    /** Whether to enable swipe/drag gestures */
+    swipeEnabled?: boolean;
+    /** Velocity threshold for quick swipe to close */
+    velocityThreshold?: number;
+    style?: StyleProp<ViewStyle>;
+    children: React.ReactNode;
+}
+interface BottomSheetHeaderProps extends ViewProps {
+    children: React.ReactNode;
+}
+interface BottomSheetBodyProps extends ScrollViewProps {
+    children: React.ReactNode;
+}
+interface BottomSheetFooterProps extends ViewProps {
+    children: React.ReactNode;
+}
+interface BottomSheetHandleProps {
+    style?: StyleProp<ViewStyle>;
+}
+interface BottomSheetCloseProps {
+    asChild?: boolean;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function useBottomSheetContext(): BottomSheetContextValue;
+declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints: rawSnapPoints, closeOnBackdropPress, children, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetContent({ swipeEnabled, velocityThreshold, style: styleOverride, children, ...props }: BottomSheetContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function BottomSheetHandle({ style }: BottomSheetHandleProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetHeader({ children, style, ...props }: BottomSheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetBody({ children, style, ...props }: BottomSheetBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetFooter({ children, style, ...props }: BottomSheetFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomSheetClose({ asChild, children, style: styleOverride }: BottomSheetCloseProps): import("react/jsx-runtime").JSX.Element;
+declare const BottomSheet: typeof BottomSheetRoot & {
+    Trigger: typeof BottomSheetTrigger;
+    Content: typeof BottomSheetContent;
+    Handle: typeof BottomSheetHandle;
+    Header: typeof BottomSheetHeader;
+    Body: typeof BottomSheetBody;
+    Footer: typeof BottomSheetFooter;
+    Close: typeof BottomSheetClose;
+};
+export { BottomSheet, BottomSheetTrigger, BottomSheetContent, BottomSheetHandle, BottomSheetHeader, BottomSheetBody, BottomSheetFooter, BottomSheetClose, useBottomSheetContext, };
+export type { BottomSheetProps, BottomSheetTriggerProps, BottomSheetContentProps, BottomSheetHandleProps, BottomSheetHeaderProps, BottomSheetBodyProps, BottomSheetFooterProps, BottomSheetCloseProps, };