@umituz/react-native-design-system 1.5.64 → 1.5.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/package.json +3 -3
  2. package/src/index.ts +26 -8
  3. package/src/index.js +0 -28
  4. package/src/presentation/organisms/AppHeader.js +0 -76
  5. package/src/presentation/organisms/AppHeader.tsx +0 -124
  6. package/src/presentation/tokens/commonStyles.js +0 -219
  7. package/src/presentation/tokens/commonStyles.ts +0 -253
  8. package/src/presentation/utils/variants/compound.js +0 -15
  9. package/src/presentation/utils/variants/core.js +0 -22
  10. package/src/presentation/utils/variants/helpers.js +0 -9
  11. package/src/presentation/utils/variants.js +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-design-system",
3
- "version": "1.5.64",
3
+ "version": "1.5.66",
4
4
  "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -51,7 +51,7 @@
51
51
  "@umituz/react-native-design-system-typography": "*",
52
52
  "expo-linear-gradient": "^15.0.7",
53
53
  "lucide-react-native": ">=0.468.0",
54
- "react": ">=18.2.0 || ^19.0.0",
54
+ "react": ">=18.2.0",
55
55
  "react-native": ">=0.74.0",
56
56
  "react-native-gesture-handler": ">=2.16.0",
57
57
  "react-native-reanimated": "~4.1.5",
@@ -91,7 +91,7 @@
91
91
  "eslint-plugin-react-hooks": "^4.6.0",
92
92
  "expo-linear-gradient": "^15.0.7",
93
93
  "lucide-react-native": ">=0.468.0",
94
- "react": ">=18.2.0 || ^19.0.0",
94
+ "react": ">=18.2.0",
95
95
  "react-native": ">=0.74.0",
96
96
  "react-native-gesture-handler": "^2.16.0",
97
97
  "react-native-reanimated": "~3.10.1",
package/src/index.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  /**
2
2
  * @umituz/react-native-design-system
3
3
  *
4
- * ⚠️ DEPRECATED: This package is deprecated.
5
- * Please import directly from individual packages:
4
+ * Design System Aggregator Package
5
+ *
6
+ * This package aggregates exports from individual design system packages:
6
7
  * - @umituz/react-native-design-system-atoms
7
8
  * - @umituz/react-native-design-system-molecules
8
9
  * - @umituz/react-native-design-system-organisms
@@ -10,17 +11,34 @@
10
11
  * - @umituz/react-native-design-system-responsive
11
12
  * - @umituz/react-native-design-system-typography
12
13
  *
13
- * This package only exports its own utilities:
14
- * - useCommonStyles
14
+ * This package also exports its own utilities:
15
15
  * - variants utilities
16
16
  */
17
17
 
18
18
  // =============================================================================
19
- // COMMON STYLES - Own utility
19
+ // ATOMS - Re-export from atoms package
20
20
  // =============================================================================
21
- export {
22
- useCommonStyles,
23
- } from './presentation/tokens/commonStyles';
21
+ export * from '@umituz/react-native-design-system-atoms';
22
+
23
+ // =============================================================================
24
+ // MOLECULES - Re-export from molecules package
25
+ // =============================================================================
26
+ export * from '@umituz/react-native-design-system-molecules';
27
+
28
+ // =============================================================================
29
+ // ORGANISMS - Re-export from organisms package
30
+ // =============================================================================
31
+ export * from '@umituz/react-native-design-system-organisms';
32
+
33
+ // =============================================================================
34
+ // THEME - Re-export from theme package
35
+ // =============================================================================
36
+ export * from '@umituz/react-native-design-system-theme';
37
+
38
+ // =============================================================================
39
+ // RESPONSIVE - Re-export from responsive package
40
+ // =============================================================================
41
+ export * from '@umituz/react-native-design-system-responsive';
24
42
 
25
43
  // =============================================================================
26
44
  // VARIANTS UTILITIES - Own utilities
package/src/index.js DELETED
@@ -1,28 +0,0 @@
1
- // =============================================================================
2
- // ATOMS - Atomic Design Components
3
- // =============================================================================
4
- export { AtomicButton, AtomicText, AtomicCard, AtomicInput, AtomicTextArea, AtomicPicker, AtomicIcon, AtomicImage, AtomicSwitch, AtomicBadge, AtomicFormError, AtomicAvatar, AtomicChip, AtomicDivider, AtomicProgress, AtomicAvatarGroup, AtomicFab, AtomicFilter, AtomicTouchable, AtomicNumberInput, AtomicDatePicker, AtomicSearchBar, AtomicSort, } from '@umituz/react-native-design-system-atoms';
5
- // Icon alias
6
- export { AtomicIcon as Icon, } from '@umituz/react-native-design-system-atoms';
7
- // =============================================================================
8
- // MOLECULES - Composite Components
9
- // =============================================================================
10
- export { FormField, ListItem, SearchBar, SectionCard, IconContainer, ScreenHeader, EmptyState, SectionHeader, SectionContainer, GridContainer, ConfirmationModal, useConfirmationModal, } from '@umituz/react-native-design-system-molecules';
11
- // ConfirmationModal alias
12
- export { ConfirmationModal as AtomicConfirmationModal, } from '@umituz/react-native-design-system-molecules';
13
- // =============================================================================
14
- // ORGANISMS - Complex Patterns
15
- // =============================================================================
16
- export { AppHeader, ScreenLayout, FormContainer, } from '@umituz/react-native-design-system-organisms';
17
- // =============================================================================
18
- // THEME & DESIGN TOKENS
19
- // =============================================================================
20
- export { createDesignTokens, STATIC_DESIGN_TOKENS, BASE_TOKENS, STATIC_TOKENS, withAlpha, lightColors, darkColors, getColorPalette, useAppDesignTokens, useDesignSystemTheme, useTheme, lightTheme, darkTheme, createResponsiveValue, ThemeStorage, } from '@umituz/react-native-design-system-theme';
21
- // =============================================================================
22
- // COMMON STYLES
23
- // =============================================================================
24
- export { useCommonStyles, } from './presentation/tokens/commonStyles';
25
- // =============================================================================
26
- // RESPONSIVE UTILITIES
27
- // =============================================================================
28
- export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, useResponsive, useResponsiveSizes, useDeviceType, getScreenDimensions, isSmallPhone, isTablet, getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isLandscape, getKeyboardBehavior, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, } from '@umituz/react-native-design-system-responsive';
package/src/presentation/organisms/AppHeader.js DELETED
@@ -1,76 +0,0 @@
1
- /**
2
- * AppHeader Organism - Application Header Component
3
- *
4
- * Complex header combining atoms and molecules
5
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
6
- *
7
- * Atomic Design Level: ORGANISM
8
- * Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
9
- */
10
- import React from 'react';
11
- import { View, SafeAreaView } from 'react-native';
12
- import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
13
- import { AtomicText, AtomicButton } from '@umituz/react-native-design-system-atoms';
14
- // =============================================================================
15
- // COMPONENT IMPLEMENTATION
16
- // =============================================================================
17
- export const AppHeader = ({ title, subtitle, leftIcon, onLeftPress, rightIcon, onRightPress, showShadow = true, backgroundColor, style, }) => {
18
- const tokens = useAppDesignTokens();
19
- const bgColor = backgroundColor || tokens.colors.surface;
20
- const styles = getStyles(tokens);
21
- return (<SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }]}>
22
- <View style={[styles.container, { backgroundColor: bgColor }, style]}>
23
- {/* Left Action */}
24
- <View style={styles.leftContainer}>
25
- {leftIcon && onLeftPress && (<AtomicButton variant="text" size="sm" onPress={onLeftPress} icon={leftIcon}/>)}
26
- </View>
27
-
28
- {/* Title Section */}
29
- <View style={styles.titleContainer}>
30
- <AtomicText type="titleLarge" color="primary" numberOfLines={1}>
31
- {title}
32
- </AtomicText>
33
- {subtitle && (<AtomicText type="bodySmall" color="secondary" numberOfLines={1}>
34
- {subtitle}
35
- </AtomicText>)}
36
- </View>
37
-
38
- {/* Right Action */}
39
- <View style={styles.rightContainer}>
40
- {rightIcon && onRightPress && (<AtomicButton variant="text" size="sm" onPress={onRightPress} icon={rightIcon}/>)}
41
- </View>
42
- </View>
43
- </SafeAreaView>);
44
- };
45
- // =============================================================================
46
- // STYLES
47
- // =============================================================================
48
- const getStyles = (tokens) => ({
49
- safeArea: {
50
- backgroundColor: tokens.colors.surface,
51
- },
52
- container: {
53
- flexDirection: 'row',
54
- alignItems: 'center',
55
- justifyContent: 'space-between',
56
- paddingHorizontal: tokens.spacing.md,
57
- paddingVertical: tokens.spacing.sm,
58
- minHeight: tokens.iconSizes.xl + tokens.spacing.md,
59
- },
60
- leftContainer: {
61
- width: tokens.iconSizes.xl + tokens.spacing.sm,
62
- alignItems: 'flex-start',
63
- },
64
- titleContainer: {
65
- flex: 1,
66
- alignItems: 'center',
67
- paddingHorizontal: tokens.spacing.sm,
68
- },
69
- rightContainer: {
70
- width: tokens.iconSizes.xl + tokens.spacing.sm,
71
- alignItems: 'flex-start',
72
- },
73
- });
74
- // =============================================================================
75
- // EXPORTS
76
- // =============================================================================
package/src/presentation/organisms/AppHeader.tsx DELETED
@@ -1,124 +0,0 @@
1
- /**
2
- * AppHeader Organism - Application Header Component
3
- *
4
- * Complex header combining atoms and molecules
5
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
6
- *
7
- * Atomic Design Level: ORGANISM
8
- * Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
9
- */
10
-
11
- import React from 'react';
12
- import { View, ViewStyle, SafeAreaView } from 'react-native';
13
- import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
14
- import { AtomicText, AtomicButton, AtomicIcon } from '@umituz/react-native-design-system-atoms';
15
-
16
- export interface AppHeaderProps {
17
- title: string;
18
- subtitle?: string;
19
- leftIcon?: string;
20
- onLeftPress?: () => void;
21
- rightIcon?: string;
22
- onRightPress?: () => void;
23
- showShadow?: boolean;
24
- backgroundColor?: string;
25
- style?: ViewStyle;
26
- }
27
-
28
- // =============================================================================
29
- // COMPONENT IMPLEMENTATION
30
- // =============================================================================
31
-
32
- export const AppHeader: React.FC<AppHeaderProps> = ({
33
- title,
34
- subtitle,
35
- leftIcon,
36
- onLeftPress,
37
- rightIcon,
38
- onRightPress,
39
- showShadow = true,
40
- backgroundColor,
41
- style,
42
- }) => {
43
- const tokens = useAppDesignTokens();
44
- const bgColor = backgroundColor || tokens.colors.surface;
45
- const styles = getStyles(tokens);
46
-
47
- return (
48
- <SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }]}>
49
- <View style={[styles.container, { backgroundColor: bgColor }, style]}>
50
- {/* Left Action */}
51
- <View style={styles.leftContainer}>
52
- {leftIcon && onLeftPress && (
53
- <AtomicButton
54
- variant="text"
55
- size="sm"
56
- onPress={onLeftPress}
57
- icon={leftIcon}
58
- />
59
- )}
60
- </View>
61
-
62
- {/* Title Section */}
63
- <View style={styles.titleContainer}>
64
- <AtomicText type="titleLarge" color="primary" numberOfLines={1}>
65
- {title}
66
- </AtomicText>
67
- {subtitle && (
68
- <AtomicText type="bodySmall" color="secondary" numberOfLines={1}>
69
- {subtitle}
70
- </AtomicText>
71
- )}
72
- </View>
73
-
74
- {/* Right Action */}
75
- <View style={styles.rightContainer}>
76
- {rightIcon && onRightPress && (
77
- <AtomicButton
78
- variant="text"
79
- size="sm"
80
- onPress={onRightPress}
81
- icon={rightIcon}
82
- />
83
- )}
84
- </View>
85
- </View>
86
- </SafeAreaView>
87
- );
88
- };
89
-
90
- // =============================================================================
91
- // STYLES
92
- // =============================================================================
93
-
94
- const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => ({
95
- safeArea: {
96
- backgroundColor: tokens.colors.surface,
97
- } as ViewStyle,
98
- container: {
99
- flexDirection: 'row' as const,
100
- alignItems: 'center' as const,
101
- justifyContent: 'space-between' as const,
102
- paddingHorizontal: tokens.spacing.md,
103
- paddingVertical: tokens.spacing.sm,
104
- minHeight: tokens.iconSizes.xl + tokens.spacing.md,
105
- } as ViewStyle,
106
- leftContainer: {
107
- width: tokens.iconSizes.xl + tokens.spacing.sm,
108
- alignItems: 'flex-start' as const,
109
- } as ViewStyle,
110
- titleContainer: {
111
- flex: 1,
112
- alignItems: 'center' as const,
113
- paddingHorizontal: tokens.spacing.sm,
114
- } as ViewStyle,
115
- rightContainer: {
116
- width: tokens.iconSizes.xl + tokens.spacing.sm,
117
- alignItems: 'flex-start' as const,
118
- } as ViewStyle,
119
- });
120
-
121
- // =============================================================================
122
- // EXPORTS
123
- // =============================================================================
124
-
package/src/presentation/tokens/commonStyles.js DELETED
@@ -1,219 +0,0 @@
1
- /**
2
- * Common Styles - Reusable Style Patterns
3
- *
4
- * Centralized style utilities to reduce duplication across screens.
5
- * These styles are composable and follow DRY principles.
6
- *
7
- * Usage:
8
- * ```typescript
9
- * import { useCommonStyles } from '@domains/design-system/commonStyles';
10
- *
11
- * const MyComponent = () => {
12
- * const commonStyles = useCommonStyles();
13
- * return <View style={commonStyles.screenContainer}>...</View>;
14
- * };
15
- * ```
16
- */
17
- import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
18
- /**
19
- * Hook to get common styles with dynamic theme support
20
- */
21
- export const useCommonStyles = () => {
22
- const tokens = useAppDesignTokens();
23
- return {
24
- // ========================================================================
25
- // SCREEN CONTAINERS
26
- // ========================================================================
27
- /**
28
- * Standard full-screen container
29
- * Most common pattern: flex: 1 with background color
30
- */
31
- screenContainer: {
32
- flex: 1,
33
- backgroundColor: tokens.colors.backgroundPrimary,
34
- },
35
- /**
36
- * Basic flex container without background
37
- * Use when background is set elsewhere or not needed
38
- */
39
- flexContainer: {
40
- flex: 1,
41
- },
42
- /**
43
- * Screen container with secondary background
44
- */
45
- screenContainerSecondary: {
46
- flex: 1,
47
- backgroundColor: tokens.colors.backgroundSecondary,
48
- },
49
- // ========================================================================
50
- // SCROLL CONTAINERS
51
- // ========================================================================
52
- /**
53
- * Standard ScrollView wrapper
54
- */
55
- scrollView: {
56
- flex: 1,
57
- },
58
- /**
59
- * ScrollView content container with standard padding
60
- */
61
- scrollContent: {
62
- paddingHorizontal: tokens.spacing.lg,
63
- paddingBottom: tokens.spacing.xl,
64
- },
65
- /**
66
- * ScrollView content that grows to fill available space
67
- */
68
- scrollContentGrow: {
69
- flexGrow: 1,
70
- padding: tokens.spacing.lg,
71
- },
72
- /**
73
- * Centered scroll content (for forms, onboarding screens)
74
- */
75
- scrollContentCentered: {
76
- flexGrow: 1,
77
- padding: tokens.spacing.lg,
78
- justifyContent: 'center',
79
- },
80
- // ========================================================================
81
- // LAYOUT UTILITIES
82
- // ========================================================================
83
- /**
84
- * Centered container - both horizontal and vertical
85
- * Perfect for empty states, splash screens
86
- */
87
- centerContainer: {
88
- flex: 1,
89
- justifyContent: 'center',
90
- alignItems: 'center',
91
- },
92
- /**
93
- * Centered container with padding
94
- */
95
- centerContainerPadded: {
96
- flex: 1,
97
- justifyContent: 'center',
98
- alignItems: 'center',
99
- paddingHorizontal: tokens.spacing.xl,
100
- },
101
- /**
102
- * Horizontal row layout
103
- */
104
- row: {
105
- flexDirection: 'row',
106
- alignItems: 'center',
107
- },
108
- /**
109
- * Horizontal row with space between
110
- */
111
- rowBetween: {
112
- flexDirection: 'row',
113
- alignItems: 'center',
114
- justifyContent: 'space-between',
115
- },
116
- /**
117
- * Horizontal row centered
118
- */
119
- rowCenter: {
120
- flexDirection: 'row',
121
- alignItems: 'center',
122
- justifyContent: 'center',
123
- },
124
- // ========================================================================
125
- // PADDING UTILITIES
126
- // ========================================================================
127
- /**
128
- * Standard horizontal padding
129
- */
130
- paddedHorizontal: {
131
- paddingHorizontal: tokens.spacing.lg,
132
- },
133
- /**
134
- * Standard vertical padding
135
- */
136
- paddedVertical: {
137
- paddingVertical: tokens.spacing.lg,
138
- },
139
- /**
140
- * Standard padding all sides
141
- */
142
- padded: {
143
- padding: tokens.spacing.lg,
144
- },
145
- // ========================================================================
146
- // SECTION STYLES
147
- // ========================================================================
148
- /**
149
- * Standard section container
150
- */
151
- section: {
152
- marginBottom: tokens.spacing.xl,
153
- },
154
- /**
155
- * Section with padding
156
- */
157
- sectionPadded: {
158
- marginBottom: tokens.spacing.xl,
159
- paddingHorizontal: tokens.spacing.lg,
160
- },
161
- // ========================================================================
162
- // TEXT STYLES
163
- // ========================================================================
164
- /**
165
- * Screen title - primary heading
166
- */
167
- screenTitle: {
168
- ...tokens.typography.headingLarge,
169
- color: tokens.colors.textPrimary,
170
- marginBottom: tokens.spacing.sm,
171
- },
172
- /**
173
- * Section title
174
- */
175
- sectionTitle: {
176
- ...tokens.typography.headingMedium,
177
- color: tokens.colors.textPrimary,
178
- marginBottom: tokens.spacing.md,
179
- },
180
- /**
181
- * Subtitle/description text
182
- */
183
- subtitle: {
184
- ...tokens.typography.bodyMedium,
185
- color: tokens.colors.textSecondary,
186
- textAlign: 'center',
187
- },
188
- /**
189
- * Body text
190
- */
191
- bodyText: {
192
- ...tokens.typography.bodyMedium,
193
- color: tokens.colors.textPrimary,
194
- },
195
- /**
196
- * Secondary text (muted)
197
- */
198
- secondaryText: {
199
- ...tokens.typography.bodySmall,
200
- color: tokens.colors.textSecondary,
201
- },
202
- // ========================================================================
203
- // FORM STYLES
204
- // ========================================================================
205
- /**
206
- * Form container
207
- */
208
- form: {
209
- width: '100%',
210
- },
211
- /**
212
- * Form header section
213
- */
214
- formHeader: {
215
- alignItems: 'center',
216
- marginBottom: tokens.spacing.xl,
217
- },
218
- };
219
- };
package/src/presentation/tokens/commonStyles.ts DELETED
@@ -1,253 +0,0 @@
1
- /**
2
- * Common Styles - Reusable Style Patterns
3
- *
4
- * Centralized style utilities to reduce duplication across screens.
5
- * These styles are composable and follow DRY principles.
6
- *
7
- * Usage:
8
- * ```typescript
9
- * import { useCommonStyles } from '@domains/design-system/commonStyles';
10
- *
11
- * const MyComponent = () => {
12
- * const commonStyles = useCommonStyles();
13
- * return <View style={commonStyles.screenContainer}>...</View>;
14
- * };
15
- * ```
16
- */
17
-
18
- import { ViewStyle, TextStyle } from 'react-native';
19
- import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
20
-
21
- /**
22
- * Hook to get common styles with dynamic theme support
23
- */
24
- export const useCommonStyles = () => {
25
- const tokens = useAppDesignTokens();
26
-
27
- return {
28
- // ========================================================================
29
- // SCREEN CONTAINERS
30
- // ========================================================================
31
-
32
- /**
33
- * Standard full-screen container
34
- * Most common pattern: flex: 1 with background color
35
- */
36
- screenContainer: {
37
- flex: 1,
38
- backgroundColor: tokens.colors.backgroundPrimary,
39
- } as ViewStyle,
40
-
41
- /**
42
- * Basic flex container without background
43
- * Use when background is set elsewhere or not needed
44
- */
45
- flexContainer: {
46
- flex: 1,
47
- } as ViewStyle,
48
-
49
- /**
50
- * Screen container with secondary background
51
- */
52
- screenContainerSecondary: {
53
- flex: 1,
54
- backgroundColor: tokens.colors.backgroundSecondary,
55
- } as ViewStyle,
56
-
57
- // ========================================================================
58
- // SCROLL CONTAINERS
59
- // ========================================================================
60
-
61
- /**
62
- * Standard ScrollView wrapper
63
- */
64
- scrollView: {
65
- flex: 1,
66
- } as ViewStyle,
67
-
68
- /**
69
- * ScrollView content container with standard padding
70
- */
71
- scrollContent: {
72
- paddingHorizontal: tokens.spacing.lg,
73
- paddingBottom: tokens.spacing.xl,
74
- } as ViewStyle,
75
-
76
- /**
77
- * ScrollView content that grows to fill available space
78
- */
79
- scrollContentGrow: {
80
- flexGrow: 1,
81
- padding: tokens.spacing.lg,
82
- } as ViewStyle,
83
-
84
- /**
85
- * Centered scroll content (for forms, onboarding screens)
86
- */
87
- scrollContentCentered: {
88
- flexGrow: 1,
89
- padding: tokens.spacing.lg,
90
- justifyContent: 'center' as const,
91
- } as ViewStyle,
92
-
93
- // ========================================================================
94
- // LAYOUT UTILITIES
95
- // ========================================================================
96
-
97
- /**
98
- * Centered container - both horizontal and vertical
99
- * Perfect for empty states, splash screens
100
- */
101
- centerContainer: {
102
- flex: 1,
103
- justifyContent: 'center' as const,
104
- alignItems: 'center' as const,
105
- } as ViewStyle,
106
-
107
- /**
108
- * Centered container with padding
109
- */
110
- centerContainerPadded: {
111
- flex: 1,
112
- justifyContent: 'center' as const,
113
- alignItems: 'center' as const,
114
- paddingHorizontal: tokens.spacing.xl,
115
- } as ViewStyle,
116
-
117
- /**
118
- * Horizontal row layout
119
- */
120
- row: {
121
- flexDirection: 'row' as const,
122
- alignItems: 'center' as const,
123
- } as ViewStyle,
124
-
125
- /**
126
- * Horizontal row with space between
127
- */
128
- rowBetween: {
129
- flexDirection: 'row' as const,
130
- alignItems: 'center' as const,
131
- justifyContent: 'space-between' as const,
132
- } as ViewStyle,
133
-
134
- /**
135
- * Horizontal row centered
136
- */
137
- rowCenter: {
138
- flexDirection: 'row' as const,
139
- alignItems: 'center' as const,
140
- justifyContent: 'center' as const,
141
- } as ViewStyle,
142
-
143
- // ========================================================================
144
- // PADDING UTILITIES
145
- // ========================================================================
146
-
147
- /**
148
- * Standard horizontal padding
149
- */
150
- paddedHorizontal: {
151
- paddingHorizontal: tokens.spacing.lg,
152
- } as ViewStyle,
153
-
154
- /**
155
- * Standard vertical padding
156
- */
157
- paddedVertical: {
158
- paddingVertical: tokens.spacing.lg,
159
- } as ViewStyle,
160
-
161
- /**
162
- * Standard padding all sides
163
- */
164
- padded: {
165
- padding: tokens.spacing.lg,
166
- } as ViewStyle,
167
-
168
- // ========================================================================
169
- // SECTION STYLES
170
- // ========================================================================
171
-
172
- /**
173
- * Standard section container
174
- */
175
- section: {
176
- marginBottom: tokens.spacing.xl,
177
- } as ViewStyle,
178
-
179
- /**
180
- * Section with padding
181
- */
182
- sectionPadded: {
183
- marginBottom: tokens.spacing.xl,
184
- paddingHorizontal: tokens.spacing.lg,
185
- } as ViewStyle,
186
-
187
- // ========================================================================
188
- // TEXT STYLES
189
- // ========================================================================
190
-
191
- /**
192
- * Screen title - primary heading
193
- */
194
- screenTitle: {
195
- ...tokens.typography.headingLarge,
196
- color: tokens.colors.textPrimary,
197
- marginBottom: tokens.spacing.sm,
198
- } as TextStyle,
199
-
200
- /**
201
- * Section title
202
- */
203
- sectionTitle: {
204
- ...tokens.typography.headingMedium,
205
- color: tokens.colors.textPrimary,
206
- marginBottom: tokens.spacing.md,
207
- } as TextStyle,
208
-
209
- /**
210
- * Subtitle/description text
211
- */
212
- subtitle: {
213
- ...tokens.typography.bodyMedium,
214
- color: tokens.colors.textSecondary,
215
- textAlign: 'center' as const,
216
- } as TextStyle,
217
-
218
- /**
219
- * Body text
220
- */
221
- bodyText: {
222
- ...tokens.typography.bodyMedium,
223
- color: tokens.colors.textPrimary,
224
- } as TextStyle,
225
-
226
- /**
227
- * Secondary text (muted)
228
- */
229
- secondaryText: {
230
- ...tokens.typography.bodySmall,
231
- color: tokens.colors.textSecondary,
232
- } as TextStyle,
233
-
234
- // ========================================================================
235
- // FORM STYLES
236
- // ========================================================================
237
-
238
- /**
239
- * Form container
240
- */
241
- form: {
242
- width: '100%',
243
- } as ViewStyle,
244
-
245
- /**
246
- * Form header section
247
- */
248
- formHeader: {
249
- alignItems: 'center' as const,
250
- marginBottom: tokens.spacing.xl,
251
- } as ViewStyle,
252
- };
253
- };
package/src/presentation/utils/variants/compound.js DELETED
@@ -1,15 +0,0 @@
1
- import { createVariants } from './core';
2
- export function createAdvancedVariants(config) {
3
- const baseVariantFn = createVariants(config);
4
- return function (props = {}) {
5
- let result = baseVariantFn(props);
6
- if (config.compoundVariants) {
7
- for (const compound of config.compoundVariants) {
8
- const conditionsMet = Object.entries(compound.conditions).every(([key, value]) => props[key] === value);
9
- if (conditionsMet)
10
- result = { ...result, ...compound.style };
11
- }
12
- }
13
- return result;
14
- };
15
- }
package/src/presentation/utils/variants/core.js DELETED
@@ -1,22 +0,0 @@
1
- export function createVariants(config) {
2
- return function (props = {}) {
3
- let result = { ...config.base };
4
- if (config.defaultVariants) {
5
- for (const [variantKey, defaultValue] of Object.entries(config.defaultVariants)) {
6
- if (config.variants?.[variantKey] && defaultValue) {
7
- const variantStyle = config.variants[variantKey][defaultValue];
8
- if (variantStyle)
9
- result = { ...result, ...variantStyle };
10
- }
11
- }
12
- }
13
- for (const [variantKey, variantValue] of Object.entries(props)) {
14
- if (config.variants?.[variantKey] && variantValue) {
15
- const variantStyle = config.variants[variantKey][variantValue];
16
- if (variantStyle)
17
- result = { ...result, ...variantStyle };
18
- }
19
- }
20
- return result;
21
- };
22
- }
package/src/presentation/utils/variants/helpers.js DELETED
@@ -1,9 +0,0 @@
1
- export function combineStyles(...styles) {
2
- return styles.reduce((acc, style) => (style ? { ...acc, ...style } : acc), {});
3
- }
4
- export function conditionalStyle(condition, trueStyle, falseStyle) {
5
- return condition ? trueStyle : falseStyle;
6
- }
7
- export function responsiveStyle(small, medium, large) {
8
- return small;
9
- }
package/src/presentation/utils/variants.js DELETED
@@ -1,3 +0,0 @@
1
- export * from './variants/core';
2
- export * from './variants/compound';
3
- export * from './variants/helpers';