@umituz/react-native-design-system 1.3.1 → 1.3.3

package/lib/presentation/atoms/touchable/types/index.d.ts

@@ -0,0 +1,140 @@
+import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
+/**
+ * Touchable feedback variant
+ * - opacity: iOS-style opacity feedback (default)
+ * - highlight: Android-style highlight feedback
+ * - ripple: Material Design ripple effect (Android only)
+ * - none: No visual feedback
+ */
+export type TouchableFeedback = 'opacity' | 'highlight' | 'ripple' | 'none';
+/**
+ * Feedback strength for visual feedback
+ * - subtle: Light feedback (0.8 opacity)
+ * - normal: Standard feedback (0.6 opacity)
+ * - strong: Strong feedback (0.4 opacity)
+ */
+export type FeedbackStrength = 'subtle' | 'normal' | 'strong';
+/**
+ * Hit slop configuration
+ * Extends the touchable area beyond the component's bounds
+ */
+export interface HitSlop {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
+/**
+ * AtomicTouchable component props
+ *
+ * A unified touchable wrapper with consistent behavior across platforms.
+ * Uses React Native's Pressable API for modern, accessible touch handling.
+ *
+ * @example
+ * ```tsx
+ * <AtomicTouchable
+ *   onPress={handlePress}
+ *   feedback="opacity"
+ *   strength="normal"
+ *   disabled={isLoading}
+ *   loading={isLoading}
+ *   hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+ *   style={styles.touchable}
+ * >
+ *   <AtomicText>Press Me</AtomicText>
+ * </AtomicTouchable>
+ * ```
+ */
+export interface AtomicTouchableProps {
+    /**
+     * Content to render inside the touchable
+     */
+    children: React.ReactNode;
+    /**
+     * Callback fired when the touchable is pressed
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when press starts (finger down)
+     */
+    onPressIn?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when press ends (finger up)
+     */
+    onPressOut?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired on long press (500ms default)
+     */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Feedback variant
+     * @default 'opacity'
+     */
+    feedback?: TouchableFeedback;
+    /**
+     * Feedback strength
+     * @default 'normal'
+     */
+    strength?: FeedbackStrength;
+    /**
+     * Disable the touchable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Show loading indicator (disables touch)
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Hit slop - extends touchable area
+     * Useful for small touch targets
+     * @default undefined
+     */
+    hitSlop?: HitSlop | number;
+    /**
+     * Custom style for the touchable container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Style applied when pressed
+     */
+    pressedStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style applied when disabled
+     */
+    disabledStyle?: StyleProp<ViewStyle>;
+    /**
+     * Accessibility label for screen readers
+     */
+    accessibilityLabel?: string;
+    /**
+     * Accessibility hint for screen readers
+     */
+    accessibilityHint?: string;
+    /**
+     * Accessibility role
+     * @default 'button'
+     */
+    accessibilityRole?: 'button' | 'link' | 'none';
+    /**
+     * Test ID for E2E testing
+     */
+    testID?: string;
+    /**
+     * Delay before onLongPress is triggered (ms)
+     * @default 500
+     */
+    delayLongPress?: number;
+    /**
+     * Ripple color (Android only, for 'ripple' feedback)
+     * @default theme primary color with alpha
+     */
+    rippleColor?: string;
+    /**
+     * Border radius for ripple effect (Android only)
+     * @default 0
+     */
+    rippleRadius?: number;
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/presentation/atoms/touchable/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/atoms/touchable/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE3E;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,OAAO;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEjD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAErC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE/C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/lib/presentation/atoms/touchable/types/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/lib/presentation/atoms/touchable/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/presentation/atoms/touchable/types/index.ts"],"names":[],"mappings":""}

package/lib/presentation/hooks/useAppDesignTokens.d.ts

@@ -0,0 +1,34 @@
+/**
+ * useAppDesignTokens Hook - Theme-Aware Design Tokens
+ *
+ * ✅ Automatically reads theme from global store
+ * ✅ No parameters needed - fully automatic!
+ * ✅ Returns tokens for current theme (light/dark)
+ * ✅ Single source of truth
+ *
+ * @example Usage (fully automatic theme-aware)
+ * ```typescript
+ * import { useAppDesignTokens } from '@umituz/react-native-design-system';
+ *
+ * const MyComponent = () => {
+ *   const tokens = useAppDesignTokens(); // Automatically uses current theme!
+ *   return (
+ *     <View style={{
+ *       backgroundColor: tokens.colors.primary,
+ *       padding: tokens.spacing.md
+ *     }}>
+ *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
+ *     </View>
+ *   );
+ * };
+ * ```
+ *
+ * How it works:
+ * - Reads themeMode from global store (useDesignSystemTheme)
+ * - App's theme store syncs to global store automatically
+ * - All components get correct tokens without prop drilling
+ * - Change theme once, everything updates!
+ */
+import { type DesignTokens } from '../tokens/core/TokenFactory';
+export declare const useAppDesignTokens: () => DesignTokens;
+//# sourceMappingURL=useAppDesignTokens.d.ts.map

package/lib/presentation/hooks/useAppDesignTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppDesignTokens.d.ts","sourceRoot":"","sources":["../../../src/presentation/hooks/useAppDesignTokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGH,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAGpF,eAAO,MAAM,kBAAkB,QAAO,YAGrC,CAAC"}

package/lib/presentation/hooks/useAppDesignTokens.js

@@ -0,0 +1,39 @@
+/**
+ * useAppDesignTokens Hook - Theme-Aware Design Tokens
+ *
+ * ✅ Automatically reads theme from global store
+ * ✅ No parameters needed - fully automatic!
+ * ✅ Returns tokens for current theme (light/dark)
+ * ✅ Single source of truth
+ *
+ * @example Usage (fully automatic theme-aware)
+ * ```typescript
+ * import { useAppDesignTokens } from '@umituz/react-native-design-system';
+ *
+ * const MyComponent = () => {
+ *   const tokens = useAppDesignTokens(); // Automatically uses current theme!
+ *   return (
+ *     <View style={{
+ *       backgroundColor: tokens.colors.primary,
+ *       padding: tokens.spacing.md
+ *     }}>
+ *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
+ *     </View>
+ *   );
+ * };
+ * ```
+ *
+ * How it works:
+ * - Reads themeMode from global store (useDesignSystemTheme)
+ * - App's theme store syncs to global store automatically
+ * - All components get correct tokens without prop drilling
+ * - Change theme once, everything updates!
+ */
+import { useMemo } from 'react';
+import { createDesignTokens } from '../tokens/core/TokenFactory';
+import { useDesignSystemTheme } from '../../infrastructure/theme/globalThemeStore';
+export const useAppDesignTokens = () => {
+    const { themeMode } = useDesignSystemTheme();
+    return useMemo(() => createDesignTokens(themeMode), [themeMode]);
+};
+//# sourceMappingURL=useAppDesignTokens.js.map

package/lib/presentation/hooks/useAppDesignTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppDesignTokens.js","sourceRoot":"","sources":["../../../src/presentation/hooks/useAppDesignTokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAqB,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAEnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAiB,EAAE;IACnD,MAAM,EAAE,SAAS,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC7C,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AACnE,CAAC,CAAC"}

package/lib/presentation/hooks/useResponsive.d.ts

@@ -0,0 +1,80 @@
+/**
+ * useResponsive Hook
+ *
+ * React Hook for accessing responsive utilities with real-time dimension updates
+ * and safe area insets integration.
+ *
+ * Usage:
+ * ```tsx
+ * const { logoSize, inputHeight, fabPosition, isSmallDevice } = useResponsive();
+ * ```
+ */
+import { DeviceType } from '../utils/responsive';
+export interface UseResponsiveReturn {
+    width: number;
+    height: number;
+    isSmallDevice: boolean;
+    isTabletDevice: boolean;
+    isLandscapeMode: boolean;
+    deviceType: DeviceType;
+    insets: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    logoSize: number;
+    inputHeight: number;
+    iconContainerSize: number;
+    maxContentWidth: number;
+    minTouchTarget: number;
+    horizontalPadding: number;
+    bottomPosition: number;
+    fabPosition: {
+        bottom: number;
+        right: number;
+    };
+    modalMaxHeight: string;
+    modalMinHeight: number;
+    gridColumns: number;
+    spacingMultiplier: number;
+    onboardingIconMarginTop: number;
+    onboardingIconMarginBottom: number;
+    onboardingIconSize: number;
+    onboardingTitleMarginBottom: number;
+    onboardingTextPadding: number;
+    onboardingDescriptionMarginTop: number;
+    formBottomPadding: number;
+    inputIconSize: number;
+    formContentWidth: number | undefined;
+    formElementSpacing: number;
+    getLogoSize: (baseSize?: number) => number;
+    getInputHeight: (baseHeight?: number) => number;
+    getIconSize: (baseSize?: number) => number;
+    getMaxWidth: (baseWidth?: number) => number;
+    getFontSize: (baseFontSize: number) => number;
+    getGridCols: (mobile?: number, tablet?: number) => number;
+}
+/**
+ * Hook for responsive design utilities
+ * Automatically updates when screen dimensions or orientation changes
+ */
+export declare const useResponsive: () => UseResponsiveReturn;
+/**
+ * Shorthand hook for just responsive sizes
+ */
+export declare const useResponsiveSizes: () => {
+    logoSize: number;
+    inputHeight: number;
+    iconContainerSize: number;
+    maxContentWidth: number;
+};
+/**
+ * Shorthand hook for just device type checks
+ */
+export declare const useDeviceType: () => {
+    isSmallDevice: boolean;
+    isTabletDevice: boolean;
+    deviceType: DeviceType;
+};
+//# sourceMappingURL=useResponsive.d.ts.map

package/lib/presentation/hooks/useResponsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsive.d.ts","sourceRoot":"","sources":["../../../src/presentation/hooks/useResponsive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,EA4BL,UAAU,EACX,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,mBAAmB;IAElC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,UAAU,CAAC;IAGvB,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IAGF,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IAGvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAG/C,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAG1B,uBAAuB,EAAE,MAAM,CAAC;IAChC,0BAA0B,EAAE,MAAM,CAAC;IACnC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,MAAM,CAAC;IACpC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,8BAA8B,EAAE,MAAM,CAAC;IAGvC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,kBAAkB,EAAE,MAAM,CAAC;IAG3B,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,cAAc,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,WAAW,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,WAAW,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3D;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,QAAO,mBAwDhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;CAG9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;;;;CAGzB,CAAC"}

package/lib/presentation/hooks/useResponsive.js

@@ -0,0 +1,82 @@
+/**
+ * useResponsive Hook
+ *
+ * React Hook for accessing responsive utilities with real-time dimension updates
+ * and safe area insets integration.
+ *
+ * Usage:
+ * ```tsx
+ * const { logoSize, inputHeight, fabPosition, isSmallDevice } = useResponsive();
+ * ```
+ */
+import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isSmallPhone, isTablet, isLandscape, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, getOnboardingIconSize, getFormBottomPadding, getInputIconSize, getFormContentWidth, getFormElementSpacing, } from '../utils/responsive';
+/**
+ * Hook for responsive design utilities
+ * Automatically updates when screen dimensions or orientation changes
+ */
+export const useResponsive = () => {
+    const { width, height } = useWindowDimensions();
+    const insets = useSafeAreaInsets();
+    return {
+        // Device info
+        width,
+        height,
+        isSmallDevice: isSmallPhone(),
+        isTabletDevice: isTablet(),
+        isLandscapeMode: isLandscape(),
+        deviceType: getDeviceType(),
+        // Safe area insets
+        insets,
+        // Responsive sizes (with default values)
+        logoSize: getResponsiveLogoSize(),
+        inputHeight: getResponsiveInputHeight(),
+        iconContainerSize: getResponsiveIconContainerSize(),
+        maxContentWidth: getResponsiveMaxWidth(),
+        minTouchTarget: getMinTouchTargetSize(),
+        // Responsive positioning
+        horizontalPadding: getResponsiveHorizontalPadding(16, insets),
+        bottomPosition: getResponsiveBottomPosition(32, insets),
+        fabPosition: getResponsiveFABPosition(insets),
+        // Responsive layout
+        modalMaxHeight: getResponsiveModalMaxHeight(),
+        modalMinHeight: getResponsiveMinModalHeight(),
+        gridColumns: getResponsiveGridColumns(),
+        spacingMultiplier: getSpacingMultiplier(),
+        // Onboarding-specific spacing (pre-calculated, no component calculations)
+        onboardingIconMarginTop: getOnboardingIconMarginTop(),
+        onboardingIconMarginBottom: getOnboardingIconMarginBottom(),
+        onboardingIconSize: getOnboardingIconSize(),
+        onboardingTitleMarginBottom: getOnboardingTitleMarginBottom(),
+        onboardingTextPadding: getOnboardingTextPadding(),
+        onboardingDescriptionMarginTop: getOnboardingDescriptionMarginTop(),
+        // Form-specific spacing (pre-calculated, universal)
+        formBottomPadding: getFormBottomPadding(insets.bottom),
+        inputIconSize: getInputIconSize(),
+        formContentWidth: getFormContentWidth(),
+        formElementSpacing: getFormElementSpacing(),
+        // Utility functions (allow custom base values)
+        getLogoSize: (baseSize) => getResponsiveLogoSize(baseSize),
+        getInputHeight: (baseHeight) => getResponsiveInputHeight(baseHeight),
+        getIconSize: (baseSize) => getResponsiveIconContainerSize(baseSize),
+        getMaxWidth: (baseWidth) => getResponsiveMaxWidth(baseWidth),
+        getFontSize: (baseFontSize) => getResponsiveFontSize(baseFontSize),
+        getGridCols: (mobile, tablet) => getResponsiveGridColumns(mobile, tablet),
+    };
+};
+/**
+ * Shorthand hook for just responsive sizes
+ */
+export const useResponsiveSizes = () => {
+    const { logoSize, inputHeight, iconContainerSize, maxContentWidth } = useResponsive();
+    return { logoSize, inputHeight, iconContainerSize, maxContentWidth };
+};
+/**
+ * Shorthand hook for just device type checks
+ */
+export const useDeviceType = () => {
+    const { isSmallDevice, isTabletDevice, deviceType } = useResponsive();
+    return { isSmallDevice, isTabletDevice, deviceType };
+};
+//# sourceMappingURL=useResponsive.js.map

package/lib/presentation/hooks/useResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsive.js","sourceRoot":"","sources":["../../../src/presentation/hooks/useResponsive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,8BAA8B,EAC9B,2BAA2B,EAC3B,wBAAwB,EACxB,2BAA2B,EAC3B,2BAA2B,EAC3B,8BAA8B,EAC9B,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACpB,0BAA0B,EAC1B,6BAA6B,EAC7B,8BAA8B,EAC9B,wBAAwB,EACxB,iCAAiC,EACjC,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,GAEtB,MAAM,qBAAqB,CAAC;AA4D7B;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAwB,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAChD,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;IAEnC,OAAO;QACL,cAAc;QACd,KAAK;QACL,MAAM;QACN,aAAa,EAAE,YAAY,EAAE;QAC7B,cAAc,EAAE,QAAQ,EAAE;QAC1B,eAAe,EAAE,WAAW,EAAE;QAC9B,UAAU,EAAE,aAAa,EAAE;QAE3B,mBAAmB;QACnB,MAAM;QAEN,yCAAyC;QACzC,QAAQ,EAAE,qBAAqB,EAAE;QACjC,WAAW,EAAE,wBAAwB,EAAE;QACvC,iBAAiB,EAAE,8BAA8B,EAAE;QACnD,eAAe,EAAE,qBAAqB,EAAE;QACxC,cAAc,EAAE,qBAAqB,EAAE;QAEvC,yBAAyB;QACzB,iBAAiB,EAAE,8BAA8B,CAAC,EAAE,EAAE,MAAM,CAAC;QAC7D,cAAc,EAAE,2BAA2B,CAAC,EAAE,EAAE,MAAM,CAAC;QACvD,WAAW,EAAE,wBAAwB,CAAC,MAAM,CAAC;QAE7C,oBAAoB;QACpB,cAAc,EAAE,2BAA2B,EAAE;QAC7C,cAAc,EAAE,2BAA2B,EAAE;QAC7C,WAAW,EAAE,wBAAwB,EAAE;QACvC,iBAAiB,EAAE,oBAAoB,EAAE;QAEzC,0EAA0E;QAC1E,uBAAuB,EAAE,0BAA0B,EAAE;QACrD,0BAA0B,EAAE,6BAA6B,EAAE;QAC3D,kBAAkB,EAAE,qBAAqB,EAAE;QAC3C,2BAA2B,EAAE,8BAA8B,EAAE;QAC7D,qBAAqB,EAAE,wBAAwB,EAAE;QACjD,8BAA8B,EAAE,iCAAiC,EAAE;QAEnE,oDAAoD;QACpD,iBAAiB,EAAE,oBAAoB,CAAC,MAAM,CAAC,MAAM,CAAC;QACtD,aAAa,EAAE,gBAAgB,EAAE;QACjC,gBAAgB,EAAE,mBAAmB,EAAE;QACvC,kBAAkB,EAAE,qBAAqB,EAAE;QAE3C,+CAA+C;QAC/C,WAAW,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,qBAAqB,CAAC,QAAQ,CAAC;QAC1D,cAAc,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,wBAAwB,CAAC,UAAU,CAAC;QACpE,WAAW,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,8BAA8B,CAAC,QAAQ,CAAC;QACnE,WAAW,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,qBAAqB,CAAC,SAAS,CAAC;QAC5D,WAAW,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,qBAAqB,CAAC,YAAY,CAAC;QAClE,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,wBAAwB,CAAC,MAAM,EAAE,MAAM,CAAC;KAC1E,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE,CAAC;IACtF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,CAAC;AACvE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IACtE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC;AACvD,CAAC,CAAC"}

package/lib/presentation/loading/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Loading Domain - Public API
+ *
+ * Domain-Driven Design (DDD) Architecture
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * This is the SINGLE SOURCE OF TRUTH for the Loading domain.
+ * ALL imports from this domain MUST go through this file.
+ *
+ * Architecture:
+ * - presentation/components: UI components (LoadingState, LoadingSpinner)
+ * - presentation/hooks: React hooks (useLoading)
+ *
+ * Usage:
+ *   import { LoadingState, LoadingSpinner, useLoading } from '@domains/design-system';
+ */
+export { LoadingState } from './presentation/components/LoadingState';
+export type { LoadingStateProps, LoadingStateSize } from './presentation/components/LoadingState';
+export { LoadingSpinner } from './presentation/components/LoadingSpinner';
+export type { LoadingSpinnerProps, LoadingSpinnerSize, LoadingSpinnerColor, } from './presentation/components/LoadingSpinner';
+export { useLoading } from './presentation/hooks/useLoading';
+export type { LoadingConfig, UseLoadingReturn, } from './presentation/hooks/useLoading';
+//# sourceMappingURL=index.d.ts.map

package/lib/presentation/loading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/presentation/loading/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAMH,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAElG,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,0CAA0C,CAAC;AAMlD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,YAAY,EACV,aAAa,EACb,gBAAgB,GACjB,MAAM,iCAAiC,CAAC"}

package/lib/presentation/loading/index.js

@@ -0,0 +1,26 @@
+/**
+ * Loading Domain - Public API
+ *
+ * Domain-Driven Design (DDD) Architecture
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * This is the SINGLE SOURCE OF TRUTH for the Loading domain.
+ * ALL imports from this domain MUST go through this file.
+ *
+ * Architecture:
+ * - presentation/components: UI components (LoadingState, LoadingSpinner)
+ * - presentation/hooks: React hooks (useLoading)
+ *
+ * Usage:
+ *   import { LoadingState, LoadingSpinner, useLoading } from '@domains/design-system';
+ */
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+export { LoadingState } from './presentation/components/LoadingState';
+export { LoadingSpinner } from './presentation/components/LoadingSpinner';
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+export { useLoading } from './presentation/hooks/useLoading';
+//# sourceMappingURL=index.js.map

package/lib/presentation/loading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/presentation/loading/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,gFAAgF;AAChF,kCAAkC;AAClC,gFAAgF;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAGtE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAO1E,gFAAgF;AAChF,6BAA6B;AAC7B,gFAAgF;AAEhF,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC"}

package/lib/presentation/loading/presentation/components/LoadingSpinner.d.ts

@@ -0,0 +1,28 @@
+/**
+ * LoadingSpinner - Theme-Aware Activity Indicator
+ *
+ * Refactored from AtomicLoadingSpinner - now part of Loading domain
+ * Uses central useAppDesignTokens() hook for automatic theme switching
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ AUTOMATIC theme switching via useAppDesignTokens()
+ * - ✅ Multiple size variants (small, medium, large)
+ * - ✅ Dynamic color customization
+ * - ✅ Overlay support
+ * - ✅ Message display
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export type LoadingSpinnerSize = 'small' | 'medium' | 'large';
+export type LoadingSpinnerColor = 'primary' | 'secondary' | 'white';
+export interface LoadingSpinnerProps {
+    size?: LoadingSpinnerSize;
+    color?: LoadingSpinnerColor;
+    message?: string;
+    overlay?: boolean;
+    style?: ViewStyle;
+}
+export declare const LoadingSpinner: React.FC<LoadingSpinnerProps>;
+export default LoadingSpinner;
+//# sourceMappingURL=LoadingSpinner.d.ts.map

package/lib/presentation/loading/presentation/components/LoadingSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/components/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA2B,SAAS,EAAE,MAAM,cAAc,CAAC;AASlE,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAgBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+DxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/presentation/loading/presentation/components/LoadingSpinner.js

@@ -0,0 +1,77 @@
+/**
+ * LoadingSpinner - Theme-Aware Activity Indicator
+ *
+ * Refactored from AtomicLoadingSpinner - now part of Loading domain
+ * Uses central useAppDesignTokens() hook for automatic theme switching
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ AUTOMATIC theme switching via useAppDesignTokens()
+ * - ✅ Multiple size variants (small, medium, large)
+ * - ✅ Dynamic color customization
+ * - ✅ Overlay support
+ * - ✅ Message display
+ */
+import React from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+import { withAlpha } from '../../../tokens/AppDesignTokens';
+import { AtomicText } from '../../../atoms/AtomicText';
+// =============================================================================
+// SIZE VARIANTS
+// =============================================================================
+const sizeVariants = {
+    small: 'small',
+    medium: 'large',
+    large: 'large',
+};
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const LoadingSpinner = ({ size = 'medium', color = 'primary', message, overlay = false, style, }) => {
+    // ✅ DYNAMIC tokens from central hook
+    const tokens = useAppDesignTokens();
+    const spinnerSize = sizeVariants[size];
+    /**
+     * Get spinner color from dynamic theme
+     * ✅ Automatically updates when theme changes
+     */
+    const getSpinnerColor = () => {
+        switch (color) {
+            case 'primary':
+                return tokens.colors.primary;
+            case 'secondary':
+                return tokens.colors.secondary;
+            case 'white':
+                return tokens.colors.textInverse;
+            default:
+                return tokens.colors.primary;
+        }
+    };
+    const spinnerColor = getSpinnerColor();
+    const containerStyle = overlay
+        ? {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: withAlpha(tokens.colors.black, 0.5),
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 9999,
+        }
+        : {
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: tokens.spacing.lg,
+        };
+    return (<View style={[containerStyle, style]}>
+      <ActivityIndicator size={spinnerSize} color={spinnerColor}/>
+      {message && (<AtomicText type="bodyMedium" color={overlay ? 'inverse' : 'primary'} style={{ marginTop: tokens.spacing.md, textAlign: 'center' }}>
+          {message}
+        </AtomicText>)}
+    </View>);
+};
+export default LoadingSpinner;
+//# sourceMappingURL=LoadingSpinner.js.map

package/lib/presentation/loading/presentation/components/LoadingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/components/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAiBvD,gFAAgF;AAChF,gBAAgB;AAChB,gFAAgF;AAEhF,MAAM,YAAY,GAAkD;IAClE,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,OAAO,GAAG,KAAK,EACf,KAAK,GACN,EAAE,EAAE;IACH,qCAAqC;IACrC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAEvC;;;OAGG;IACH,MAAM,eAAe,GAAG,GAAW,EAAE;QACnC,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,SAAS;gBACZ,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;YAC/B,KAAK,WAAW;gBACd,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;YACjC,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;YACnC;gBACE,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,MAAM,cAAc,GAAc,OAAO;QACvC,CAAC,CAAC;YACE,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC;YACpD,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,IAAI;SACb;QACH,CAAC,CAAC;YACE,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;SAC3B,CAAC;IAEN,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CACnC;MAAA,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,EAC1D;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,UAAU,CACT,IAAI,CAAC,YAAY,CACjB,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACvC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAE7D;UAAA,CAAC,OAAO,CACV;QAAA,EAAE,UAAU,CAAC,CACd,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/presentation/loading/presentation/components/LoadingState.d.ts

@@ -0,0 +1,39 @@
+/**
+ * LoadingState - Dynamic Icon-Based Loading Component
+ *
+ * Universal loading component with configurable emoji/icon support
+ * Inspired by meditation_timer's breathing animation pattern
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
+ * - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
+ * - ✅ Size variants (small, medium, large)
+ * - ✅ Full screen or inline modes
+ * - ✅ Optional loading message
+ * - ✅ Theme-aware styling
+ */
+import React from 'react';
+export type LoadingStateSize = 'small' | 'medium' | 'large';
+export interface LoadingStateProps {
+    /**
+     * Emoji/icon to display (changes per screen context)
+     * Examples: 🏠 Home, ⚙️ Settings, 💪 Workout, 🧘 Meditation, 📊 Analytics
+     */
+    icon?: string;
+    /**
+     * Optional loading message
+     */
+    message?: string;
+    /**
+     * Size variant
+     */
+    size?: LoadingStateSize;
+    /**
+     * Full screen overlay mode
+     */
+    fullScreen?: boolean;
+}
+export declare const LoadingState: React.FC<LoadingStateProps>;
+export default LoadingState;
+//# sourceMappingURL=LoadingState.d.ts.map

package/lib/presentation/loading/presentation/components/LoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/components/LoadingState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAe1D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkCD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAC;AAmCF,eAAe,YAAY,CAAC"}