@sincpro/mobile-ui 2.0.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -9,6 +9,7 @@
   },
   "files": [
     "dist",
+    "assets",
     "tailwind.preset.js",
     "README.md"
   ],
@@ -17,9 +18,7 @@
     "./branding": "./dist/branding.js",
     "./theme": "./dist/theme/index.js",
     "./Dialog": "./dist/Dialog/index.js",
-    "./Dialog/BottomSheet": "./dist/Dialog/BottomSheet/index.js",
     "./Dialog/Sheet": "./dist/Dialog/Dialog.Sheet.js",
-    "./Dialog/NativeSheet": "./dist/Dialog/Dialog.NativeSheet.js",
     "./Actions": "./dist/Actions/index.js",
     "./Display": "./dist/Display/index.js",
     "./Display/ExpoImage": "./dist/Display/Display.ExpoImage.js",
@@ -55,39 +54,36 @@
     "node": ">=26"
   },
   "peerDependencies": {
-    "@expo-google-fonts/ibm-plex-mono": ">=0.4",
-    "@expo-google-fonts/ibm-plex-sans": ">=0.4",
-    "@expo/ui": "*",
-    "@expo/vector-icons": ">=15.0.2",
-    "@react-native-community/datetimepicker": ">=9.2",
-    "@react-native-community/slider": ">=5.2",
-    "expo-checkbox": ">=58.0.0",
-    "expo-clipboard": ">=58.0.0",
-    "expo-linear-gradient": ">=58.0.0",
-    "expo-image": ">=58.0.0",
-    "expo-localization": ">=58.0.0",
-    "nativewind": ">=4.2.7",
-    "react": ">=19.3",
-    "react-hook-form": ">=7",
-    "react-native": ">=0.88",
-    "react-native-currency-input": ">=1.1",
-    "react-native-gesture-handler": ">=3.3",
-    "react-native-keyboard-controller": ">=1.22",
-    "react-native-reanimated": ">=4.7",
-    "react-native-safe-area-context": ">=5.11",
+    "@expo-google-fonts/ibm-plex-mono": ">=0.4.1 <1",
+    "@expo-google-fonts/ibm-plex-sans": ">=0.4.1 <1",
+    "@expo/ui": ">=58.0.27 <59",
+    "@shopify/flash-list": ">=2.3.2 <3",
+    "expo-checkbox": ">=58.0.2 <59",
+    "expo-clipboard": ">=58.0.4 <59",
+    "expo-image": ">=58.0.18 <59",
+    "expo-linear-gradient": ">=58.0.3 <59",
+    "expo-localization": ">=58.0.5 <59",
+    "expo-symbols": ">=58.0.4 <59",
+    "nativewind": "^4.2.7",
+    "react": ">=19.3.0 <20",
+    "react-hook-form": ">=7.62.0 <8",
+    "react-native": ">=0.88.1 <0.89",
+    "react-native-currency-input": ">=1.1.1 <2",
+    "react-native-gesture-handler": ">=3.3.0 <4",
+    "react-native-keyboard-controller": ">=1.22.7 <2",
+    "react-native-reanimated": ">=4.7.1 <5",
+    "react-native-safe-area-context": ">=5.11.1 <6",
     "react-native-sortables": ">=1.10.1 <2",
-    "react-native-svg": ">=15.16",
-    "react-native-worklets": ">=0.13"
+    "react-native-svg": ">=15.16.0 <16",
+    "react-native-worklets": ">=0.13.0 <0.14"
   },
   "peerDependenciesMeta": {
-    "@expo/ui": {
-      "optional": true
-    },
     "react-native-sortables": {
       "optional": true
     }
   },
   "dependencies": {
+    "@babel/runtime": "^7.29.13",
     "big.js": "^7.0.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.21",
@@ -95,23 +91,18 @@
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
-    "@jest/globals": "^30.0.0",
-    "@testing-library/react-native": "14.1.0",
-    "@react-native/jest-preset": "^0.88.1",
-    "jest": "^30.0.0",
-    "jest-expo": "~58.0.14",
-    "test-renderer": "^1.0.0",
+    "@babel/core": "^7.29.13",
     "@expo-google-fonts/ibm-plex-mono": "^0.4.1",
     "@expo-google-fonts/ibm-plex-sans": "^0.4.1",
     "@expo/ui": "~58.0.27",
-    "@expo/vector-icons": "^15.0.3",
     "@gorhom/bottom-sheet": "^5",
+    "@jest/globals": "^30.0.0",
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-native-community/datetimepicker": "9.2.1",
-    "@react-native-community/slider": "5.2.1",
+    "@react-native/jest-preset": "^0.88.1",
+    "@shopify/flash-list": "2.3.2",
     "@storybook/addon-ondevice-actions": "10.7.1",
-    "@storybook/addon-ondevice-controls": "10.7.1",
     "@storybook/react-native": "10.7.1",
+    "@testing-library/react-native": "14.1.0",
     "@types/big.js": "^6.2.2",
     "@types/node": "^26.6.6",
     "@types/react": "~19.3.0",
@@ -121,6 +112,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "expo": "~58.0.23",
     "expo-checkbox": "~58.0.2",
@@ -130,6 +122,10 @@
     "expo-linear-gradient": "~58.0.3",
     "expo-localization": "~58.0.5",
     "expo-status-bar": "~58.0.4",
+    "expo-symbols": "~58.0.4",
+    "expo-system-ui": "~58.0.7",
+    "jest": "^30.0.0",
+    "jest-expo": "~58.0.14",
     "nativewind": "4.2.7",
     "patch-package": "^8.0.1",
     "prettier": "^3.9.8",
@@ -146,11 +142,13 @@
     "react-native-worklets": "0.13.0",
     "storybook": "10.6.6",
     "tailwindcss": "3.4.19",
+    "test-renderer": "^1.0.0",
     "tsc-alias": "^1.8.17",
     "tsx": "^4",
     "typescript": "~6.0.3"
   },
   "scripts": {
+    "postinstall": "patch-package",
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios"

package/tailwind.preset.js

@@ -69,10 +69,6 @@ module.exports = {
         warning: "rgb(var(--warning) / <alpha-value>)",
         danger: "rgb(var(--danger) / <alpha-value>)",
         info: "rgb(var(--info) / <alpha-value>)",
-        "success-light": "rgb(var(--success-light) / <alpha-value>)",
-        "warning-light": "rgb(var(--warning-light) / <alpha-value>)",
-        "danger-light": "rgb(var(--danger-light) / <alpha-value>)",
-        "info-light": "rgb(var(--info-light) / <alpha-value>)",
         container: {
           primary: "rgb(var(--container-primary) / <alpha-value>)",
           "on-primary": "rgb(var(--container-on-primary) / <alpha-value>)",

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

@@ -1,324 +0,0 @@
-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>
- * ```
- */
-/**
- * @deprecated Custom PanResponder implementation (limited gestures/scroll). The modern
- * replacement is `Dialog.Sheet` (on RN Modal, no provider). Kept for backwards compatibility.
- */
-declare function Root({ visible, onClose, size, dismissible, children }: RootProps): import("react").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.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.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.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.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.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-text-secondary 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-text-secondary">Swipe down to dismiss</Text>
- *   </View>
- * </BottomSheet.Footer>
- * ```
- */
-declare function Footer({ children }: FooterProps): import("react").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 {};