@sincpro/mobile-ui 0.1.2 → 0.1.3

package/lib/Dialog/BottomSheet/BottomSheet.Root.d.ts

@@ -0,0 +1,320 @@
+import { type ReactNode } from "react";
+import { type GestureResponderHandlers } from "react-native";
+/**
+ * Available sizes for the BottomSheet.
+ * - `auto`: Fits content height (max 90% screen)
+ * - `small`: 30% of screen height
+ * - `medium`: 50% of screen height
+ * - `large`: 75% of screen height
+ * - `full`: 90% of screen height
+ */
+type BottomSheetSize = "auto" | "small" | "medium" | "large" | "full";
+export interface BottomSheetContextValue {
+    close: () => void;
+    panHandlers: GestureResponderHandlers;
+}
+/**
+ * Hook to access BottomSheet context from compound components.
+ * Provides `close()` function and `panHandlers` for gesture support.
+ *
+ * @throws Error if used outside BottomSheet.Root
+ *
+ * @example
+ * ```tsx
+ * function CustomHeader() {
+ *   const { close, panHandlers } = BottomSheet.useBottomSheet();
+ *   return (
+ *     <View {...panHandlers}>
+ *       <Button onPress={close} title="Close" />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+declare function useBottomSheet(): BottomSheetContextValue;
+export interface RootProps {
+    visible: boolean;
+    onClose: () => void;
+    size?: BottomSheetSize;
+    dismissible?: boolean;
+    children: ReactNode;
+}
+/**
+ * Root container for the BottomSheet modal with swipe-to-dismiss gesture support.
+ *
+ * Features:
+ * - Spring animation on open/close
+ * - Swipe down to dismiss (configurable)
+ * - Backdrop tap to dismiss (configurable)
+ * - Safe area insets handling
+ * - Configurable sizes
+ *
+ * @param visible - Controls visibility of the bottom sheet
+ * @param onClose - Callback when sheet is dismissed (swipe, backdrop tap, or programmatic)
+ * @param size - Height preset: 'auto' | 'small' | 'medium' | 'large' | 'full'
+ * @param dismissible - If false, disables swipe and backdrop dismiss (default: true)
+ * @param children - Compound components (Header, Content, Actions, etc.)
+ *
+ * @example Basic usage with Header and Content
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BottomSheet.Header>
+ *     <BottomSheet.Title>Select Option</BottomSheet.Title>
+ *   </BottomSheet.Header>
+ *   <BottomSheet.Content>
+ *     <Text>Your content here</Text>
+ *   </BottomSheet.Content>
+ * </BottomSheet.Root>
+ * ```
+ *
+ * @example With Actions footer
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={close} size="medium">
+ *   <BottomSheet.Header>
+ *     <BottomSheet.Title subtitle="Choose one">Options</BottomSheet.Title>
+ *   </BottomSheet.Header>
+ *   <BottomSheet.Content scrollable>
+ *     {items.map(item => <ItemRow key={item.id} item={item} />)}
+ *   </BottomSheet.Content>
+ *   <BottomSheet.Actions layout="horizontal">
+ *     <Button title="Cancel" onPress={close} />
+ *     <Button title="Confirm" onPress={handleConfirm} />
+ *   </BottomSheet.Actions>
+ * </BottomSheet.Root>
+ * ```
+ *
+ * @example Non-dismissible (must use button to close)
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={close} dismissible={false}>
+ *   <BottomSheet.Content>
+ *     <Text>You must tap the button to close</Text>
+ *     <Button title="Close" onPress={close} />
+ *   </BottomSheet.Content>
+ * </BottomSheet.Root>
+ * ```
+ */
+declare function Root({ visible, onClose, size, dismissible, children }: RootProps): import("react/jsx-runtime").JSX.Element;
+export interface HandleProps {
+    children?: ReactNode;
+}
+/**
+ * Standalone drag handle for minimal bottom sheets without a header.
+ * Includes the visual "pill" indicator and swipe gesture support.
+ *
+ * Use this when you want a simple drag indicator without a full header.
+ * For sheets with titles, use `BottomSheet.Header` instead.
+ *
+ * @param children - Optional content below the handle pill
+ *
+ * @example Minimal sheet with just a handle
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={close}>
+ *   <BottomSheet.Handle />
+ *   <BottomSheet.Content>
+ *     <Text>Simple content</Text>
+ *   </BottomSheet.Content>
+ * </BottomSheet.Root>
+ * ```
+ */
+declare function Handle({ children }: HandleProps): import("react/jsx-runtime").JSX.Element;
+export interface HeaderProps {
+    children: ReactNode;
+}
+/**
+ * Header section with integrated drag handle and bottom border.
+ * Automatically includes the drag pill indicator and gesture support.
+ *
+ * Use with `BottomSheet.Title` for consistent styling, or provide custom content.
+ *
+ * @param children - Header content (typically BottomSheet.Title or custom layout)
+ *
+ * @example With Title component
+ * ```tsx
+ * <BottomSheet.Header>
+ *   <BottomSheet.Title subtitle="Select your preference">
+ *     Settings
+ *   </BottomSheet.Title>
+ * </BottomSheet.Header>
+ * ```
+ *
+ * @example Custom header content
+ * ```tsx
+ * <BottomSheet.Header>
+ *   <View className="flex-row justify-between px-4 py-2">
+ *     <Text>Custom Title</Text>
+ *     <TouchableOpacity onPress={close}>
+ *       <Icon name="close" />
+ *     </TouchableOpacity>
+ *   </View>
+ * </BottomSheet.Header>
+ * ```
+ */
+declare function Header({ children }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface TitleProps {
+    children: ReactNode;
+    subtitle?: string;
+}
+/**
+ * Title component for use inside BottomSheet.Header.
+ * Provides consistent text styling with optional subtitle.
+ *
+ * @param children - Main title text (typically a string or Text component)
+ * @param subtitle - Optional secondary text below the title
+ *
+ * @example Simple title
+ * ```tsx
+ * <BottomSheet.Title>Select Device</BottomSheet.Title>
+ * ```
+ *
+ * @example Title with subtitle
+ * ```tsx
+ * <BottomSheet.Title subtitle="Choose from available devices">
+ *   Bluetooth Printer
+ * </BottomSheet.Title>
+ * ```
+ */
+declare function Title({ children, subtitle }: TitleProps): import("react/jsx-runtime").JSX.Element;
+export interface ContentProps {
+    children: ReactNode;
+    scrollable?: boolean;
+}
+/**
+ * Main content area for the bottom sheet.
+ * Can be static or scrollable depending on content needs.
+ *
+ * @param children - Content to display
+ * @param scrollable - Enable ScrollView wrapper for long content (default: false)
+ *
+ * @example Static content
+ * ```tsx
+ * <BottomSheet.Content>
+ *   <View className="p-4">
+ *     <Text>Short content that fits</Text>
+ *   </View>
+ * </BottomSheet.Content>
+ * ```
+ *
+ * @example Scrollable list
+ * ```tsx
+ * <BottomSheet.Content scrollable>
+ *   {items.map(item => (
+ *     <TouchableOpacity key={item.id} onPress={() => onSelect(item)}>
+ *       <Text>{item.name}</Text>
+ *     </TouchableOpacity>
+ *   ))}
+ * </BottomSheet.Content>
+ * ```
+ */
+declare function Content({ children, scrollable }: ContentProps): import("react/jsx-runtime").JSX.Element;
+export interface ActionsProps {
+    children: ReactNode;
+    layout?: "auto" | "horizontal" | "vertical";
+}
+/**
+ * Action buttons section with top border, typically at the bottom of the sheet.
+ * Use for confirm/cancel buttons or multiple action options.
+ *
+ * @param children - Button components
+ * @param layout - Button arrangement: 'auto' | 'horizontal' | 'vertical' (default: 'auto')
+ *
+ * @example Vertical buttons (default)
+ * ```tsx
+ * <BottomSheet.Actions>
+ *   <Button title="Option 1" onPress={handleOption1} />
+ *   <Button title="Option 2" onPress={handleOption2} />
+ *   <Button title="Cancel" variant="outline" onPress={close} />
+ * </BottomSheet.Actions>
+ * ```
+ *
+ * @example Horizontal buttons (confirm/cancel pattern)
+ * ```tsx
+ * <BottomSheet.Actions layout="horizontal">
+ *   <Button title="Cancel" variant="outline" onPress={close} flex={1} />
+ *   <Button title="Confirm" variant="primary" onPress={confirm} flex={1} />
+ * </BottomSheet.Actions>
+ * ```
+ */
+declare function Actions({ children, layout }: ActionsProps): import("react/jsx-runtime").JSX.Element;
+export interface FooterProps {
+    children: ReactNode;
+}
+/**
+ * Footer section with gray background, for secondary information or status.
+ * Different from Actions - use Footer for non-interactive content.
+ *
+ * @param children - Footer content (text, status indicators, etc.)
+ *
+ * @example Status footer
+ * ```tsx
+ * <BottomSheet.Footer>
+ *   <Text className="text-gray-500 text-sm">
+ *     Last updated: 5 minutes ago
+ *   </Text>
+ * </BottomSheet.Footer>
+ * ```
+ *
+ * @example Help text footer
+ * ```tsx
+ * <BottomSheet.Footer>
+ *   <View className="flex-row items-center">
+ *     <Icon name="info" size={16} />
+ *     <Text className="ml-2 text-gray-600">Swipe down to dismiss</Text>
+ *   </View>
+ * </BottomSheet.Footer>
+ * ```
+ */
+declare function Footer({ children }: FooterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * BottomSheet Compound Components
+ *
+ * A flexible, gesture-enabled bottom sheet modal system following compound component pattern.
+ * Supports swipe-to-dismiss, configurable sizes, and composable sections.
+ *
+ * ## Components
+ *
+ * | Component | Purpose |
+ * |-----------|---------|
+ * | `Root` | Container with gesture handling and animations |
+ * | `Handle` | Standalone drag pill (minimal sheets) |
+ * | `Header` | Header with integrated drag handle |
+ * | `Title` | Styled title with optional subtitle |
+ * | `Content` | Main content area (static or scrollable) |
+ * | `Actions` | Action buttons section |
+ * | `Footer` | Secondary info footer |
+ * | `useBottomSheet` | Hook for custom components |
+ *
+ * ## Basic Structure
+ *
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={close}>
+ *   <BottomSheet.Header>
+ *     <BottomSheet.Title>Title</BottomSheet.Title>
+ *   </BottomSheet.Header>
+ *   <BottomSheet.Content>
+ *     {content}
+ *   </BottomSheet.Content>
+ *   <BottomSheet.Actions>
+ *     {buttons}
+ *   </BottomSheet.Actions>
+ * </BottomSheet.Root>
+ * ```
+ *
+ * ## Usage in Atomic Design
+ *
+ * - **Molecules**: Use BottomSheet to create selector modals (e.g., BluetoothDeviceSelectorModal)
+ * - **Organisms**: Compose Card + SelectorModal for complete features (e.g., BluetoothPrinterSelector)
+ *
+ * @see BluetoothDeviceSelectorModal - Example molecule implementation
+ * @see TimeZoneSelectorModal - Example molecule implementation
+ */
+export declare const BottomSheet: {
+    Root: typeof Root;
+    Handle: typeof Handle;
+    Header: typeof Header;
+    Title: typeof Title;
+    Content: typeof Content;
+    Actions: typeof Actions;
+    Footer: typeof Footer;
+    useBottomSheet: typeof useBottomSheet;
+};
+export {};

package/lib/Dialog/BottomSheet/BottomSheet.Root.js

@@ -0,0 +1,380 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from "../../theme";
+import { createContext, useContext, useEffect, useRef } from "react";
+import { Animated, Dimensions, Modal, PanResponder, Pressable, ScrollView, Text, View, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+const BottomSheetContext = createContext(null);
+/**
+ * Hook to access BottomSheet context from compound components.
+ * Provides `close()` function and `panHandlers` for gesture support.
+ *
+ * @throws Error if used outside BottomSheet.Root
+ *
+ * @example
+ * ```tsx
+ * function CustomHeader() {
+ *   const { close, panHandlers } = BottomSheet.useBottomSheet();
+ *   return (
+ *     <View {...panHandlers}>
+ *       <Button onPress={close} title="Close" />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+function useBottomSheet() {
+    const context = useContext(BottomSheetContext);
+    if (!context) {
+        throw new Error("BottomSheet compound components must be used within BottomSheet.Root");
+    }
+    return context;
+}
+const SIZE_MAP = {
+    auto: 0,
+    small: 0.3,
+    medium: 0.5,
+    large: 0.75,
+    full: 0.9,
+};
+/**
+ * Root container for the BottomSheet modal with swipe-to-dismiss gesture support.
+ *
+ * Features:
+ * - Spring animation on open/close
+ * - Swipe down to dismiss (configurable)
+ * - Backdrop tap to dismiss (configurable)
+ * - Safe area insets handling
+ * - Configurable sizes
+ *
+ * @param visible - Controls visibility of the bottom sheet
+ * @param onClose - Callback when sheet is dismissed (swipe, backdrop tap, or programmatic)
+ * @param size - Height preset: 'auto' | 'small' | 'medium' | 'large' | 'full'
+ * @param dismissible - If false, disables swipe and backdrop dismiss (default: true)
+ * @param children - Compound components (Header, Content, Actions, etc.)
+ *
+ * @example Basic usage with Header and Content
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BottomSheet.Header>
+ *     <BottomSheet.Title>Select Option</BottomSheet.Title>
+ *   </BottomSheet.Header>
+ *   <BottomSheet.Content>
+ *     <Text>Your content here</Text>
+ *   </BottomSheet.Content>
+ * </BottomSheet.Root>
+ * ```
+ *
+ * @example With Actions footer
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={close} size="medium">
+ *   <BottomSheet.Header>
+ *     <BottomSheet.Title subtitle="Choose one">Options</BottomSheet.Title>
+ *   </BottomSheet.Header>
+ *   <BottomSheet.Content scrollable>
+ *     {items.map(item => <ItemRow key={item.id} item={item} />)}
+ *   </BottomSheet.Content>
+ *   <BottomSheet.Actions layout="horizontal">
+ *     <Button title="Cancel" onPress={close} />
+ *     <Button title="Confirm" onPress={handleConfirm} />
+ *   </BottomSheet.Actions>
+ * </BottomSheet.Root>
+ * ```
+ *
+ * @example Non-dismissible (must use button to close)
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={close} dismissible={false}>
+ *   <BottomSheet.Content>
+ *     <Text>You must tap the button to close</Text>
+ *     <Button title="Close" onPress={close} />
+ *   </BottomSheet.Content>
+ * </BottomSheet.Root>
+ * ```
+ */
+function Root({ visible, onClose, size = "auto", dismissible = true, children }) {
+    const insets = useSafeAreaInsets();
+    const screenHeight = Dimensions.get("window").height;
+    const translateY = useRef(new Animated.Value(screenHeight)).current;
+    const maxHeight = size === "auto" ? screenHeight * 0.9 : screenHeight * SIZE_MAP[size];
+    const minHeight = size === "auto" ? 0 : screenHeight * SIZE_MAP[size];
+    useEffect(() => {
+        if (visible) {
+            Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            }).start();
+        }
+        else {
+            translateY.setValue(screenHeight);
+        }
+    }, [visible, screenHeight, translateY]);
+    const panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => dismissible,
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            return dismissible && Math.abs(gestureState.dy) > 10;
+        },
+        onPanResponderMove: (_, gestureState) => {
+            if (gestureState.dy > 0) {
+                translateY.setValue(gestureState.dy);
+            }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+            if (gestureState.dy > 100 || gestureState.vy > 0.5) {
+                Animated.timing(translateY, {
+                    toValue: screenHeight,
+                    duration: 200,
+                    useNativeDriver: true,
+                }).start(() => onClose());
+            }
+            else {
+                Animated.spring(translateY, {
+                    toValue: 0,
+                    useNativeDriver: true,
+                    damping: 20,
+                    stiffness: 300,
+                }).start();
+            }
+        },
+    })).current;
+    function handleBackdropPress() {
+        if (dismissible) {
+            Animated.timing(translateY, {
+                toValue: screenHeight,
+                duration: 200,
+                useNativeDriver: true,
+            }).start(() => onClose());
+        }
+    }
+    const contextValue = {
+        close: onClose,
+        panHandlers: panResponder.panHandlers,
+    };
+    return (_jsx(Modal, { animationType: "fade", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 bg-black/50", children: [_jsx(Pressable, { className: "flex-1", onPress: handleBackdropPress }), _jsx(Animated.View, { className: "rounded-t-3xl overflow-hidden", style: {
+                        backgroundColor: theme.bg.popover,
+                        maxHeight,
+                        minHeight: minHeight || undefined,
+                        paddingBottom: insets.bottom,
+                        transform: [{ translateY }],
+                    }, children: _jsx(BottomSheetContext.Provider, { value: contextValue, children: children }) })] }) }));
+}
+/**
+ * Standalone drag handle for minimal bottom sheets without a header.
+ * Includes the visual "pill" indicator and swipe gesture support.
+ *
+ * Use this when you want a simple drag indicator without a full header.
+ * For sheets with titles, use `BottomSheet.Header` instead.
+ *
+ * @param children - Optional content below the handle pill
+ *
+ * @example Minimal sheet with just a handle
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={close}>
+ *   <BottomSheet.Handle />
+ *   <BottomSheet.Content>
+ *     <Text>Simple content</Text>
+ *   </BottomSheet.Content>
+ * </BottomSheet.Root>
+ * ```
+ */
+function Handle({ children }) {
+    const { panHandlers } = useBottomSheet();
+    return (_jsxs(View, { ...panHandlers, className: "items-center pt-3 pb-2", children: [_jsx(View, { className: "w-10 h-1 bg-border-light rounded-full mb-2" }), children] }));
+}
+/**
+ * Header section with integrated drag handle and bottom border.
+ * Automatically includes the drag pill indicator and gesture support.
+ *
+ * Use with `BottomSheet.Title` for consistent styling, or provide custom content.
+ *
+ * @param children - Header content (typically BottomSheet.Title or custom layout)
+ *
+ * @example With Title component
+ * ```tsx
+ * <BottomSheet.Header>
+ *   <BottomSheet.Title subtitle="Select your preference">
+ *     Settings
+ *   </BottomSheet.Title>
+ * </BottomSheet.Header>
+ * ```
+ *
+ * @example Custom header content
+ * ```tsx
+ * <BottomSheet.Header>
+ *   <View className="flex-row justify-between px-4 py-2">
+ *     <Text>Custom Title</Text>
+ *     <TouchableOpacity onPress={close}>
+ *       <Icon name="close" />
+ *     </TouchableOpacity>
+ *   </View>
+ * </BottomSheet.Header>
+ * ```
+ */
+function Header({ children }) {
+    const { panHandlers } = useBottomSheet();
+    return (_jsxs(View, { ...panHandlers, className: "border-b border-border-light", children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 bg-border-divider rounded-full" }) }), children] }));
+}
+/**
+ * Title component for use inside BottomSheet.Header.
+ * Provides consistent text styling with optional subtitle.
+ *
+ * @param children - Main title text (typically a string or Text component)
+ * @param subtitle - Optional secondary text below the title
+ *
+ * @example Simple title
+ * ```tsx
+ * <BottomSheet.Title>Select Device</BottomSheet.Title>
+ * ```
+ *
+ * @example Title with subtitle
+ * ```tsx
+ * <BottomSheet.Title subtitle="Choose from available devices">
+ *   Bluetooth Printer
+ * </BottomSheet.Title>
+ * ```
+ */
+function Title({ children, subtitle }) {
+    return (_jsxs(View, { className: "px-5 py-3", children: [_jsx(Text, { className: "text-lg font-semibold text-text-primary", children: children }), subtitle && _jsx(Text, { className: "text-sm text-text-secondary mt-1", children: subtitle })] }));
+}
+/**
+ * Main content area for the bottom sheet.
+ * Can be static or scrollable depending on content needs.
+ *
+ * @param children - Content to display
+ * @param scrollable - Enable ScrollView wrapper for long content (default: false)
+ *
+ * @example Static content
+ * ```tsx
+ * <BottomSheet.Content>
+ *   <View className="p-4">
+ *     <Text>Short content that fits</Text>
+ *   </View>
+ * </BottomSheet.Content>
+ * ```
+ *
+ * @example Scrollable list
+ * ```tsx
+ * <BottomSheet.Content scrollable>
+ *   {items.map(item => (
+ *     <TouchableOpacity key={item.id} onPress={() => onSelect(item)}>
+ *       <Text>{item.name}</Text>
+ *     </TouchableOpacity>
+ *   ))}
+ * </BottomSheet.Content>
+ * ```
+ */
+function Content({ children, scrollable = false }) {
+    if (scrollable) {
+        return (_jsx(ScrollView, { bounces: false, className: "flex-1", showsVerticalScrollIndicator: false, children: children }));
+    }
+    return _jsx(View, { className: "flex-1", children: children });
+}
+/**
+ * Action buttons section with top border, typically at the bottom of the sheet.
+ * Use for confirm/cancel buttons or multiple action options.
+ *
+ * @param children - Button components
+ * @param layout - Button arrangement: 'auto' | 'horizontal' | 'vertical' (default: 'auto')
+ *
+ * @example Vertical buttons (default)
+ * ```tsx
+ * <BottomSheet.Actions>
+ *   <Button title="Option 1" onPress={handleOption1} />
+ *   <Button title="Option 2" onPress={handleOption2} />
+ *   <Button title="Cancel" variant="outline" onPress={close} />
+ * </BottomSheet.Actions>
+ * ```
+ *
+ * @example Horizontal buttons (confirm/cancel pattern)
+ * ```tsx
+ * <BottomSheet.Actions layout="horizontal">
+ *   <Button title="Cancel" variant="outline" onPress={close} flex={1} />
+ *   <Button title="Confirm" variant="primary" onPress={confirm} flex={1} />
+ * </BottomSheet.Actions>
+ * ```
+ */
+function Actions({ children, layout = "auto" }) {
+    const containerClass = layout === "horizontal" ? "flex-row gap-3" : "gap-3";
+    return (_jsx(View, { className: "px-5 py-4 border-t border-border-light", children: _jsx(View, { className: containerClass, children: children }) }));
+}
+/**
+ * Footer section with gray background, for secondary information or status.
+ * Different from Actions - use Footer for non-interactive content.
+ *
+ * @param children - Footer content (text, status indicators, etc.)
+ *
+ * @example Status footer
+ * ```tsx
+ * <BottomSheet.Footer>
+ *   <Text className="text-gray-500 text-sm">
+ *     Last updated: 5 minutes ago
+ *   </Text>
+ * </BottomSheet.Footer>
+ * ```
+ *
+ * @example Help text footer
+ * ```tsx
+ * <BottomSheet.Footer>
+ *   <View className="flex-row items-center">
+ *     <Icon name="info" size={16} />
+ *     <Text className="ml-2 text-gray-600">Swipe down to dismiss</Text>
+ *   </View>
+ * </BottomSheet.Footer>
+ * ```
+ */
+function Footer({ children }) {
+    return (_jsx(View, { className: "px-5 py-3 border-t border-border-light bg-bg-hover", children: children }));
+}
+/**
+ * BottomSheet Compound Components
+ *
+ * A flexible, gesture-enabled bottom sheet modal system following compound component pattern.
+ * Supports swipe-to-dismiss, configurable sizes, and composable sections.
+ *
+ * ## Components
+ *
+ * | Component | Purpose |
+ * |-----------|---------|
+ * | `Root` | Container with gesture handling and animations |
+ * | `Handle` | Standalone drag pill (minimal sheets) |
+ * | `Header` | Header with integrated drag handle |
+ * | `Title` | Styled title with optional subtitle |
+ * | `Content` | Main content area (static or scrollable) |
+ * | `Actions` | Action buttons section |
+ * | `Footer` | Secondary info footer |
+ * | `useBottomSheet` | Hook for custom components |
+ *
+ * ## Basic Structure
+ *
+ * ```tsx
+ * <BottomSheet.Root visible={isOpen} onClose={close}>
+ *   <BottomSheet.Header>
+ *     <BottomSheet.Title>Title</BottomSheet.Title>
+ *   </BottomSheet.Header>
+ *   <BottomSheet.Content>
+ *     {content}
+ *   </BottomSheet.Content>
+ *   <BottomSheet.Actions>
+ *     {buttons}
+ *   </BottomSheet.Actions>
+ * </BottomSheet.Root>
+ * ```
+ *
+ * ## Usage in Atomic Design
+ *
+ * - **Molecules**: Use BottomSheet to create selector modals (e.g., BluetoothDeviceSelectorModal)
+ * - **Organisms**: Compose Card + SelectorModal for complete features (e.g., BluetoothPrinterSelector)
+ *
+ * @see BluetoothDeviceSelectorModal - Example molecule implementation
+ * @see TimeZoneSelectorModal - Example molecule implementation
+ */
+export const BottomSheet = {
+    Root,
+    Handle,
+    Header,
+    Title,
+    Content,
+    Actions,
+    Footer,
+    useBottomSheet,
+};

package/lib/Dialog/BottomSheet/index.d.ts

@@ -0,0 +1 @@
+export { BottomSheet } from "../../Dialog/BottomSheet/BottomSheet.Root";

package/lib/Dialog/BottomSheet/index.js

@@ -0,0 +1 @@
+export { BottomSheet } from "../../Dialog/BottomSheet/BottomSheet.Root";