@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/Dialog/BottomSheet/BottomSheet.Root.tsx

@@ -0,0 +1,509 @@
+import { createContext, type ReactNode, useContext, useEffect, useRef } from "react";
+import {
+  Animated,
+  Dimensions,
+  type GestureResponderHandlers,
+  Modal,
+  PanResponder,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { theme } from "../../theme";
+
+/**
+ * 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;
+}
+
+const BottomSheetContext = createContext<BottomSheetContextValue | null>(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;
+}
+
+export interface RootProps {
+  visible: boolean;
+  onClose: () => void;
+  size?: BottomSheetSize;
+  dismissible?: boolean;
+  children: ReactNode;
+}
+
+const SIZE_MAP: Record<BottomSheetSize, number> = {
+  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 }: RootProps) {
+  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: BottomSheetContextValue = {
+    close: onClose,
+    panHandlers: panResponder.panHandlers,
+  };
+
+  return (
+    <Modal
+      animationType="fade"
+      onRequestClose={onClose}
+      presentationStyle="overFullScreen"
+      transparent
+      visible={visible}
+    >
+      <View className="flex-1 bg-black/50">
+        <Pressable className="flex-1" onPress={handleBackdropPress} />
+
+        <Animated.View
+          className="rounded-t-3xl overflow-hidden"
+          style={{
+            backgroundColor: theme.bg.popover,
+            maxHeight,
+            minHeight: minHeight || undefined,
+            paddingBottom: insets.bottom,
+            transform: [{ translateY }],
+          }}
+        >
+          <BottomSheetContext.Provider value={contextValue}>
+            {children}
+          </BottomSheetContext.Provider>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+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>
+ * ```
+ */
+function Handle({ children }: HandleProps) {
+  const { panHandlers } = useBottomSheet();
+
+  return (
+    <View {...panHandlers} className="items-center pt-3 pb-2">
+      <View className="w-10 h-1 bg-border-light rounded-full mb-2" />
+      {children}
+    </View>
+  );
+}
+
+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>
+ * ```
+ */
+function Header({ children }: HeaderProps) {
+  const { panHandlers } = useBottomSheet();
+
+  return (
+    <View {...panHandlers} className="border-b border-border-light">
+      <View className="items-center pt-3 pb-1">
+        <View className="w-10 h-1 bg-border-divider rounded-full" />
+      </View>
+      {children}
+    </View>
+  );
+}
+
+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>
+ * ```
+ */
+function Title({ children, subtitle }: TitleProps) {
+  return (
+    <View className="px-5 py-3">
+      <Text className="text-lg font-semibold text-text-primary">{children}</Text>
+      {subtitle && <Text className="text-sm text-text-secondary mt-1">{subtitle}</Text>}
+    </View>
+  );
+}
+
+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>
+ * ```
+ */
+function Content({ children, scrollable = false }: ContentProps) {
+  if (scrollable) {
+    return (
+      <ScrollView bounces={false} className="flex-1" showsVerticalScrollIndicator={false}>
+        {children}
+      </ScrollView>
+    );
+  }
+
+  return <View className="flex-1">{children}</View>;
+}
+
+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>
+ * ```
+ */
+function Actions({ children, layout = "auto" }: ActionsProps) {
+  const containerClass = layout === "horizontal" ? "flex-row gap-3" : "gap-3";
+
+  return (
+    <View className="px-5 py-4 border-t border-border-light">
+      <View className={containerClass}>{children}</View>
+    </View>
+  );
+}
+
+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>
+ * ```
+ */
+function Footer({ children }: FooterProps) {
+  return (
+    <View className="px-5 py-3 border-t border-border-light bg-bg-hover">{children}</View>
+  );
+}
+
+/**
+ * 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/sincpro_mobile_ui/Dialog/BottomSheet/index.ts

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

package/sincpro_mobile_ui/Dialog/Confirmation.context.tsx

@@ -0,0 +1,148 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+import { BaseButton } from "../primitives/BaseButton";
+import { BottomSheet } from "./BottomSheet";
+import ConfirmationDialog from "./Dialog.Confirmation";
+
+type ConfirmationVariant = "dialog" | "bottomSheet";
+
+interface IConfirmationOptions {
+  variant?: ConfirmationVariant;
+  title?: string;
+  message?: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void | Promise<void>;
+  onCancel?: () => void | Promise<void>;
+  render?: (close: () => void) => ReactNode;
+}
+
+interface IConfirmationState extends IConfirmationOptions {
+  isVisible: boolean;
+}
+
+type ConfirmationContextValue = {
+  show: (opts: IConfirmationOptions) => void;
+  hide: () => void;
+};
+
+const DEFAULT_STATE: IConfirmationState = {
+  isVisible: false,
+  variant: "dialog",
+  title: "Confirmación",
+  message: "¿Estás seguro de que quieres continuar?",
+  confirmText: "Confirmar",
+  cancelText: "Cancelar",
+  onConfirm: undefined,
+  onCancel: undefined,
+  render: undefined,
+};
+
+const ConfirmationContext = createContext<ConfirmationContextValue | null>(null);
+
+export function ConfirmationProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<IConfirmationState>(DEFAULT_STATE);
+
+  const show = useCallback((opts: IConfirmationOptions) => {
+    setState((prev) => ({
+      ...prev,
+      isVisible: true,
+      variant: opts.variant ?? DEFAULT_STATE.variant,
+      title: opts.title ?? DEFAULT_STATE.title,
+      message: opts.message ?? DEFAULT_STATE.message,
+      confirmText: opts.confirmText ?? DEFAULT_STATE.confirmText,
+      cancelText: opts.cancelText ?? DEFAULT_STATE.cancelText,
+      onConfirm: opts.onConfirm,
+      onCancel: opts.onCancel,
+      render: opts.render,
+    }));
+  }, []);
+
+  const hide = useCallback(() => {
+    setState(DEFAULT_STATE);
+  }, []);
+
+  const value = useMemo(() => ({ show, hide }), [show, hide]);
+
+  const handleConfirm = async () => {
+    try {
+      await state.onConfirm?.();
+    } finally {
+      hide();
+    }
+  };
+
+  const handleCancel = async () => {
+    try {
+      await state.onCancel?.();
+    } finally {
+      hide();
+    }
+  };
+
+  return (
+    <ConfirmationContext.Provider value={value}>
+      {children}
+
+      {state.variant === "dialog" && (
+        <ConfirmationDialog
+          auxTitle={state.title}
+          cancelButtonText={state.cancelText}
+          confirmButtonText={state.confirmText}
+          onCancel={handleCancel}
+          onConfirm={handleConfirm}
+          subtitle={state.message}
+          visible={state.isVisible}
+        />
+      )}
+
+      {state.variant === "bottomSheet" && (
+        <BottomSheet.Root onClose={handleCancel} visible={state.isVisible}>
+          {state.render ? (
+            state.render(hide)
+          ) : (
+            <>
+              <BottomSheet.Header>
+                <BottomSheet.Title subtitle={state.message}>{state.title}</BottomSheet.Title>
+              </BottomSheet.Header>
+              <BottomSheet.Actions layout="horizontal">
+                <BaseButton
+                  className="flex-1"
+                  onPress={handleCancel}
+                  title={state.cancelText ?? ""}
+                  variant="outline"
+                />
+                <BaseButton
+                  className="flex-1"
+                  onPress={handleConfirm}
+                  title={state.confirmText ?? ""}
+                  variant="primary"
+                />
+              </BottomSheet.Actions>
+            </>
+          )}
+        </BottomSheet.Root>
+      )}
+    </ConfirmationContext.Provider>
+  );
+}
+
+export function useConfirmationContext() {
+  const context = useContext(ConfirmationContext);
+  if (!context) {
+    // Return no-op functions during initial mount to avoid timing issues
+    console.warn("useConfirmationContext called before ConfirmationProvider mounted");
+    return {
+      show: () => {},
+      hide: () => {},
+    };
+  }
+  return context;
+}