@umituz/react-native-design-system 2.3.11 → 2.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.11",
+  "version": "2.3.12",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicAvatar.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { View, Image, StyleSheet, ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native';
 import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/atoms/AtomicBadge.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from "react-native";
 import { AtomicText } from "./AtomicText";
 import { AtomicIcon, type IconName } from "./AtomicIcon";
-import { useAppDesignTokens } from "../theme";
+import { useAppDesignTokens } from '@theme';
 
 export type BadgeVariant = "primary" | "secondary" | "success" | "warning" | "error" | "info";
 export type BadgeSize = "sm" | "md" | "lg";

package/src/atoms/AtomicButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
 import { AtomicText } from './AtomicText';
 import { AtomicIcon } from './AtomicIcon';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 import type { IconName } from './AtomicIcon';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';

package/src/atoms/AtomicCard.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 
 export type AtomicCardVariant = 'elevated' | 'outlined' | 'filled';
 export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg';

package/src/atoms/AtomicChip.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import { View, ViewStyle, TouchableOpacity } from 'react-native';
 import { AtomicText } from './AtomicText';
 import { AtomicIcon } from './AtomicIcon';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/atoms/AtomicDatePicker.tsx

@@ -46,7 +46,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 import { AtomicText } from './AtomicText';
 import { DatePickerModal } from './datepicker/components/DatePickerModal';
 import { DatePickerButton } from './datepicker/components/DatePickerButton';

package/src/atoms/AtomicFab.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '../theme';
-import { useResponsive } from '../responsive';
+import { useAppDesignTokens } from '@theme';
+import { useResponsive } from '@responsive';
 import { AtomicIcon } from './AtomicIcon';
 import { AtomicFabProps } from './fab/types';
 import {

package/src/atoms/AtomicIcon.tsx

@@ -8,7 +8,7 @@
 import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 import {
   getIconSize,
   type IconSize as BaseIconSize

package/src/atoms/AtomicInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, TextInput, Pressable, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 import { AtomicIcon } from './AtomicIcon';
 import { AtomicText } from './AtomicText';
 import { useInputState } from './input/hooks/useInputState';

package/src/atoms/AtomicPicker.tsx

@@ -46,7 +46,7 @@ import {
   TouchableOpacity,
   StyleSheet,
 } from 'react-native';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 import { AtomicPickerProps } from './picker/types';
 import { AtomicIcon } from './AtomicIcon';
 import { AtomicText } from './AtomicText';

package/src/atoms/AtomicProgress.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { View, StyleSheet, ViewStyle, DimensionValue, Text } from 'react-native';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/atoms/AtomicText.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text, StyleProp, TextStyle } from 'react-native';
-import { useAppDesignTokens, useResponsiveDesignTokens } from '../theme';
-import type { TextStyleVariant, ColorVariant } from '../typography';
-import { getTextColor } from '../typography';
+import { useAppDesignTokens, useResponsiveDesignTokens } from '@theme';
+import type { TextStyleVariant, ColorVariant } from '@typography';
+import { getTextColor } from '@typography';
 
 export interface AtomicTextProps {
   children: React.ReactNode;

package/src/atoms/datepicker/components/DatePickerButton.tsx

@@ -11,7 +11,7 @@ import {
   TouchableOpacity,
   StyleSheet,
 } from 'react-native';
-import { useAppDesignTokens } from '../../../theme';
+import { useAppDesignTokens } from '@theme';
 import { AtomicIcon } from '../../AtomicIcon';
 import { AtomicText } from '../../AtomicText';
 

package/src/atoms/datepicker/components/DatePickerModal.tsx

@@ -15,7 +15,7 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
-import { useAppDesignTokens } from '../../../theme';
+import { useAppDesignTokens } from '@theme';
 import { AtomicText } from '../../AtomicText';
 
 interface DatePickerModalProps {

package/src/atoms/input/styles/inputStylesHelper.ts

@@ -6,7 +6,7 @@
  */
 
 import { ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../../theme';
+import { useAppDesignTokens } from '@theme';
 import type { AtomicInputVariant, AtomicInputSize } from '../../AtomicInput';
 
 interface GetVariantStyleParams {

package/src/atoms/picker/components/PickerChips.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { useAppDesignTokens } from '../../../theme';
+import { useAppDesignTokens } from '@theme';
 import { PickerOption } from '../types';
 import { AtomicIcon } from '../../AtomicIcon';
 import { AtomicText } from '../../AtomicText';

package/src/atoms/picker/components/PickerModal.tsx

@@ -20,7 +20,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../../../theme';
+import { useAppDesignTokens } from '@theme';
 import { PickerOption } from '../types';
 import { AtomicIcon } from '../../AtomicIcon';
 import { AtomicText } from '../../AtomicText';

package/src/atoms/picker/styles/pickerStyles.ts

@@ -2,7 +2,7 @@
  * AtomicPicker Styles
  */
 import type { ViewStyle, TextStyle } from 'react-native';
-import type { DesignTokens } from '../../../theme';
+import type { DesignTokens } from '@theme';
 
 export type PickerSize = 'sm' | 'md' | 'lg';
 

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -24,7 +24,7 @@
 
 import React, { useEffect, useRef } from 'react';
 import { View, StyleSheet, Animated, type StyleProp, type ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../theme';
+import { useAppDesignTokens } from '@theme';
 import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
 import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
 

package/src/device/detection/deviceDetection.ts

@@ -6,8 +6,8 @@
  */
 
 import { Dimensions } from 'react-native';
-import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from '../../responsive/config';
-import { validateScreenDimensions } from '../../responsive/validation';
+import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from '@responsive/config';
+import { validateScreenDimensions } from '@responsive/validation';
 
 /**
  * Helper function for device detection with fallback

package/src/device/detection/iPadDetection.ts

@@ -3,7 +3,7 @@
  */
 
 import { Dimensions, Platform } from 'react-native';
-import { DEVICE_BREAKPOINTS } from '../../responsive/config';
+import { DEVICE_BREAKPOINTS } from '@responsive/config';
 import { IPAD_BREAKPOINTS } from './iPadBreakpoints';
 
 /**

package/src/device/detection/iPadLayoutUtils.ts

@@ -3,7 +3,7 @@
  */
 
 import { Dimensions } from 'react-native';
-import { DEVICE_BREAKPOINTS } from '../../responsive/config';
+import { DEVICE_BREAKPOINTS } from '@responsive/config';
 import {
     IPAD_BREAKPOINTS,
     TOUCH_TARGETS,

package/src/layouts/AppHeader/AppHeader.tsx

@@ -11,8 +11,8 @@
 import React from 'react';
 import { View, type ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../../theme';
-import { AtomicText, AtomicButton, type IconName } from '../../atoms';
+import { useAppDesignTokens } from '@theme';
+import { AtomicText, AtomicButton, type IconName } from '@atoms';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/layouts/Container/Container.tsx

@@ -7,8 +7,8 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { useResponsive } from '../../responsive';
-import { useResponsiveDesignTokens } from '../../theme';
+import { useResponsive } from '@responsive';
+import { useResponsiveDesignTokens } from '@theme';
 
 export interface ContainerProps {
   /** Container content */

package/src/layouts/FormLayout/FormLayout.tsx

@@ -7,8 +7,8 @@
 
 import React, { useMemo } from 'react';
 import { View, ScrollView, KeyboardAvoidingView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { useResponsiveDesignTokens } from '../../theme';
-import { useResponsive } from '../../responsive';
+import { useResponsiveDesignTokens } from '@theme';
+import { useResponsive } from '@responsive';
 
 export interface FormLayoutProps {
   /** Form fields and content */

package/src/layouts/Grid/Grid.tsx

@@ -7,8 +7,8 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { useResponsive } from '../../responsive';
-import { useResponsiveDesignTokens } from '../../theme';
+import { useResponsive } from '@responsive';
+import { useResponsiveDesignTokens } from '@theme';
 
 export interface GridProps {
   /** Grid items to render */

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -14,8 +14,8 @@
 
 import React from 'react';
 import { View, TouchableOpacity, ViewStyle } from 'react-native';
-import { AtomicIcon, AtomicText } from '../../atoms';
-import { useAppDesignTokens } from '../../theme';
+import { AtomicIcon, AtomicText } from '@atoms';
+import { useAppDesignTokens } from '@theme';
 
 export interface ScreenHeaderProps {
   /** Screen title (centered) */

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -27,10 +27,9 @@ import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet, type ViewStyle, RefreshControlProps } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { Edge } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../../theme';
-import { useResponsive } from '../../responsive/useResponsive';
-import { getResponsiveMaxWidth } from '../../responsive/responsiveSizing';
-import { getResponsiveHorizontalPadding } from '../../responsive/responsiveLayout';
+import { useAppDesignTokens } from '@theme';
+import { getResponsiveMaxWidth } from '@responsive/responsiveSizing';
+import { getResponsiveHorizontalPadding } from '@responsive/responsiveLayout';
 
 /**
  * NOTE: This component now works in conjunction with the SafeAreaProvider
@@ -161,7 +160,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
 }) => {
   // Automatically uses current theme from global store
   const tokens = useAppDesignTokens();
-  const { isTabletDevice } = useResponsive();
   const insets = useSafeAreaInsets();
 
   const finalMaxWidth = maxWidth || (responsiveEnabled ? getResponsiveMaxWidth() : undefined);

package/src/molecules/BaseModal.tsx

@@ -6,8 +6,8 @@
 
 import React from 'react';
 import { View, Modal, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../theme';
-import { useResponsive } from '../responsive';
+import { useAppDesignTokens } from '@theme';
+import { useResponsive } from '@responsive';
 
 export interface BaseModalProps {
   visible: boolean;

package/src/molecules/ConfirmationModalContent.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { View, ViewStyle, StyleProp } from 'react-native';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 import { ConfirmationModalVariant } from './confirmation-modal/types/';
 import {
   getVariantConfig,

package/src/molecules/ConfirmationModalMain.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { View, Modal, TouchableOpacity } from 'react-native';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 import { ConfirmationModalProps } from './confirmation-modal/types/';
 import {
   getModalOverlayStyle,

package/src/molecules/Divider/Divider.tsx

@@ -10,8 +10,8 @@
 
 import React from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
-import { AtomicText } from '../../atoms/AtomicText';
+import { useAppDesignTokens } from '@theme/hooks/useAppDesignTokens';
+import { AtomicText } from '@atoms/AtomicText';
 import type { DividerOrientation, DividerStyle, DividerSpacing } from './types';
 import {
     DividerUtils,

package/src/molecules/FormField.tsx

@@ -9,8 +9,8 @@
 
 import React from 'react';
 import { View, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../theme';
-import { AtomicText, AtomicInput, type AtomicInputProps } from '../atoms';
+import { useAppDesignTokens } from '@theme';
+import { AtomicText, AtomicInput, type AtomicInputProps } from '@atoms';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/molecules/IconContainer.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens } from '@theme';
 
 interface IconContainerProps {
   icon: React.ReactNode;

package/src/molecules/List/List.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { FlatList, RefreshControl, type FlatListProps, type ListRenderItem } from 'react-native';
-import { useResponsiveDesignTokens } from '../../theme';
+import { useResponsiveDesignTokens } from '@theme';
 
 export interface ListProps<T> extends Omit<FlatListProps<T>, 'renderItem'> {
   /** Data array */

package/src/molecules/ListItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useAppDesignTokens } from '../theme';
-import { AtomicText, AtomicIcon } from '../atoms';
+import { useAppDesignTokens } from '@theme';
+import { AtomicText, AtomicIcon } from '@atoms';
 import { ListItemProps } from './listitem/types';
 import { getListItemStyles } from './listitem/styles/listItemStyles';
 

package/src/molecules/SearchBar/SearchBar.tsx

@@ -6,8 +6,8 @@ import {
     ActivityIndicator,
     StyleSheet,
 } from 'react-native';
-import { useAppDesignTokens } from '../../theme';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { useAppDesignTokens } from '@theme';
+import { AtomicIcon } from '@atoms/AtomicIcon';
 import type { SearchBarProps } from './types';
 
 export const SearchBar = forwardRef<TextInput, SearchBarProps>(({

package/src/molecules/SearchBar/SearchHistory.tsx

@@ -4,9 +4,9 @@ import {
     TouchableOpacity,
     StyleSheet,
 } from 'react-native';
-import { AtomicText } from '../../atoms/AtomicText';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
-import { useAppDesignTokens } from '../../theme';
+import { AtomicText } from '@atoms/AtomicText';
+import { AtomicIcon } from '@atoms/AtomicIcon';
+import { useAppDesignTokens } from '@theme';
 import type { SearchHistoryProps } from './types';
 
 export const SearchHistory: React.FC<SearchHistoryProps> = ({

package/src/molecules/SearchBar/SearchSuggestions.tsx

@@ -4,8 +4,8 @@ import {
     TouchableOpacity,
     StyleSheet,
 } from 'react-native';
-import { AtomicText } from '../../atoms/AtomicText';
-import { useAppDesignTokens } from '../../theme';
+import { AtomicText } from '@atoms/AtomicText';
+import { useAppDesignTokens } from '@theme';
 import type { SearchSuggestionsProps } from './types';
 
 export function SearchSuggestions<T>({

package/src/molecules/StepProgress/StepProgress.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet, ViewStyle } from "react-native";
-import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
+import { useAppDesignTokens } from '@theme/hooks/useAppDesignTokens';
 
 export interface StepProgressProps {
     currentStep: number;

package/src/molecules/alerts/AlertBanner.tsx

@@ -8,8 +8,8 @@
 import React from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { AtomicText, AtomicIcon } from '../../atoms';
-import { useAppDesignTokens } from '../../theme';
+import { AtomicText, AtomicIcon } from '@atoms';
+import { useAppDesignTokens } from '@theme';
 import { Alert, AlertType, AlertPosition } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
 

package/src/molecules/alerts/AlertContainer.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../../theme';
+import { useAppDesignTokens } from '@theme';
 import { useAlertStore } from './AlertStore';
 import { AlertToast } from './AlertToast';
 import { AlertBanner } from './AlertBanner';

package/src/molecules/alerts/AlertInline.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { AtomicText } from '../../atoms';
-import { useAppDesignTokens } from '../../theme';
+import { AtomicText } from '@atoms';
+import { useAppDesignTokens } from '@theme';
 import { Alert, AlertType } from './AlertTypes';
 
 interface AlertInlineProps {

package/src/molecules/alerts/AlertModal.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 import { StyleSheet, View, Modal, Pressable } from 'react-native';
-import { AtomicText, AtomicButton } from '../../atoms';
-import { useAppDesignTokens } from '../../theme';
+import { AtomicText, AtomicButton } from '@atoms';
+import { useAppDesignTokens } from '@theme';
 import { Alert, AlertType } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
 

package/src/molecules/alerts/AlertToast.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../atoms';
-import { useAppDesignTokens } from '../../theme';
+import { AtomicText, AtomicIcon } from '@atoms';
+import { useAppDesignTokens } from '@theme';
 import { Alert, AlertType } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
 

package/src/molecules/avatar/Avatar.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import { View, Image, StyleSheet, type StyleProp, type ViewStyle, type ImageStyle } from 'react-native';
-import { useAppDesignTokens } from '../../theme';
-import { AtomicText, AtomicIcon } from '../../atoms';
+import { useAppDesignTokens } from '@theme';
+import { AtomicText, AtomicIcon } from '@atoms';
 import type { AvatarSize, AvatarShape } from './Avatar.utils';
 import {
   SIZE_CONFIGS,

package/src/molecules/avatar/AvatarGroup.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../theme';
-import { AtomicText } from '../../atoms';
+import { useAppDesignTokens } from '@theme';
+import { AtomicText } from '@atoms';
 import { Avatar } from './Avatar';
 import type { AvatarSize, AvatarShape } from './Avatar.utils';
 import {

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -5,7 +5,7 @@ import GorhomBottomSheet, {
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
-import { useAppDesignTokens } from '../../../theme';
+import { useAppDesignTokens } from '@theme';
 import type {
   BottomSheetConfig,
   BottomSheetRef,

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -6,7 +6,7 @@ import {
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
-import { useAppDesignTokens } from '../../../theme';
+import { useAppDesignTokens } from '@theme';
 import type {
   BottomSheetConfig,
   BottomSheetModalRef,

package/src/molecules/bottom-sheet/components/filter/FilterBottomSheet.tsx

@@ -8,8 +8,8 @@ import React, { forwardRef, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import { BottomSheetModal } from '../BottomSheetModal';
 import type { BottomSheetModalRef } from '../../types/BottomSheet';
-import { AtomicText, AtomicIcon, AtomicButton } from "../../../../atoms";
-import { useAppDesignTokens } from '../../../../theme';
+import { AtomicText, AtomicIcon, AtomicButton } from "@atoms";
+import { useAppDesignTokens } from "@theme";
 import type { FilterOption, FilterCategory } from '../../types/Filter';
 import { FilterUtils } from '../../types/Filter';
 

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from "react";
 import { View, StyleSheet, ScrollView, Modal, Pressable } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AtomicText, AtomicIcon, AtomicButton } from "../../../../atoms";
-import { useAppDesignTokens } from "../../../../theme";
-import type { FilterOption, FilterCategory } from "../../types/Filter";
+import { AtomicButton } from "@atoms";
+import { useAppDesignTokens } from "@theme";
+import type { FilterOption } from "../../types/Filter";
 import { FilterUtils } from "../../types/Filter";
 import { FilterSheetHeader } from "./FilterSheetComponents/FilterSheetHeader";
 import { FilterSheetOption } from "./FilterSheetComponents/FilterSheetOption";

package/src/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../../../atoms';
-import type { useAppDesignTokens } from '../../../../../theme';
+import { AtomicText, AtomicIcon } from '@atoms';
+import type { useAppDesignTokens } from '@theme';
 
 interface FilterSheetHeaderProps {
     title: string;

package/src/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetOption.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../../../atoms';
-import type { useAppDesignTokens } from '../../../../../theme';
+import { AtomicText, AtomicIcon } from '@atoms';
+import type { useAppDesignTokens } from '@theme';
 import type { FilterOption } from '../../../types/Filter';
 
 interface FilterSheetOptionProps {

package/src/molecules/confirmation-modal/components.tsx

@@ -6,8 +6,8 @@
 
 import React from 'react';
 import { View, ViewStyle, StyleProp } from 'react-native';
-import { AtomicText, AtomicButton, AtomicIcon } from '../../atoms';
-import type { DesignTokens } from '../../theme';
+import { AtomicText, AtomicButton, AtomicIcon } from '@atoms';
+import type { DesignTokens } from '@theme';
 import {
   getButtonContainerStyle,
   getButtonStyle,

package/src/molecules/confirmation-modal/styles/confirmationModalStyles.ts

@@ -6,7 +6,7 @@
 
 import { ViewStyle } from 'react-native';
 import { ConfirmationModalVariant, ConfirmationModalVariantConfig } from '../types/';
-import type { DesignTokens } from '../../../theme';
+import type { DesignTokens } from '@theme';
 
 /**
  * Get variant configuration (icon and color only)

package/src/molecules/listitem/styles/listItemStyles.ts

@@ -2,7 +2,7 @@
  * ListItem Styles
  */
 import type { ViewStyle, TextStyle } from 'react-native';
-import type { DesignTokens } from '../../../theme';
+import type { DesignTokens } from '@theme';
 
 export interface ListItemStyles {
     container: ViewStyle;

package/src/organisms/FormContainer.tsx

@@ -52,8 +52,8 @@ import {
   ViewStyle,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../theme';
-import { useResponsive } from '../responsive';
+import { useAppDesignTokens } from '@theme';
+import { useResponsive } from '@responsive';
 
 /**
  * Props for FormContainer component

package/src/responsive/gridUtils.ts

@@ -3,7 +3,7 @@
  * Responsive grid sizing and column calculations
  */
 
-import { getScreenDimensions } from '../device/detection';
+import { getScreenDimensions } from '@device/detection';
 import { DEVICE_BREAKPOINTS, GRID_CONFIG } from './config';
 import { validateNumber } from './validation';
 

package/src/responsive/responsiveLayout.ts

@@ -3,7 +3,7 @@
  * Layout utilities for positioning and spacing.
  */
 
-import { getScreenDimensions } from '../device/detection';
+import { getScreenDimensions } from '@device/detection';
 import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from './config';
 import { validateNumber, validateSafeAreaInsets } from './validation';
 

package/src/responsive/responsiveModal.ts

@@ -3,7 +3,7 @@
  * Modal, bottom sheet, and dialog layout utilities.
  */
 
-import { getScreenDimensions } from '../device/detection';
+import { getScreenDimensions } from '@device/detection';
 import {
   DEVICE_BREAKPOINTS,
   LAYOUT_CONSTANTS,

package/src/responsive/responsiveSizing.ts

@@ -3,7 +3,7 @@
  * Responsive sizing utilities for UI components.
  */
 
-import { getScreenDimensions } from '../device/detection';
+import { getScreenDimensions } from '@device/detection';
 import {
   DEVICE_BREAKPOINTS,
   RESPONSIVE_PERCENTAGES,

package/src/responsive/useResponsive.ts

@@ -39,7 +39,7 @@ import {
   getDeviceType,
   DeviceType,
   getSpacingMultiplier,
-} from '../device/detection';
+} from '@device/detection';
 import { getMinTouchTarget } from './platformConstants';
 
 export interface UseResponsiveReturn {

package/src/theme/hooks/useResponsiveDesignTokens.ts

@@ -12,7 +12,7 @@
 import { useMemo } from 'react';
 import { useDesignSystemTheme } from '../infrastructure/globalThemeStore';
 import { createResponsiveDesignTokens, type ResponsiveDesignTokens } from '../core/ResponsiveTokenFactory';
-import { useResponsive } from '../../responsive/useResponsive';
+import { useResponsive } from '@responsive/useResponsive';
 
 /**
  * Hook for responsive design tokens

package/src/typography/presentation/utils/textColorUtils.ts

@@ -24,7 +24,7 @@
  */
 
 import type { ColorVariant } from '../../domain/entities/TypographyTypes';
-import type { DesignTokens } from '../../../theme';
+import type { DesignTokens } from '@theme';
 
 // Cache for color variant validation to improve performance
 const COLOR_VARIANT_SET = new Set<string>([

package/src/typography/presentation/utils/textStyleUtils.ts

@@ -32,7 +32,7 @@ import type { TextStyle as RNTextStyle } from 'react-native';
 type TextStyle = RNTextStyle;
 
 import type { TextStyleVariant } from '../../domain/entities/TypographyTypes';
-import type { DesignTokens } from '../../../theme';
+import type { DesignTokens } from '@theme';
 
 // Cache for text style variant validation to improve performance
 const TEXT_STYLE_VARIANT_SET = new Set<string>([