@umituz/react-native-design-system 1.8.0 → 1.8.1
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.
- package/README.md +2 -2
- package/package.json +56 -30
- package/src/index.ts +67 -265
- package/lib/index.d.ts +0 -61
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js +0 -101
- package/lib/index.js.map +0 -1
- package/lib/presentation/atoms/AtomicAvatar.d.ts +0 -48
- package/lib/presentation/atoms/AtomicAvatar.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicAvatar.js +0 -85
- package/lib/presentation/atoms/AtomicAvatar.js.map +0 -1
- package/lib/presentation/atoms/AtomicAvatarGroup.d.ts +0 -56
- package/lib/presentation/atoms/AtomicAvatarGroup.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicAvatarGroup.js +0 -83
- package/lib/presentation/atoms/AtomicAvatarGroup.js.map +0 -1
- package/lib/presentation/atoms/AtomicBadge.d.ts +0 -42
- package/lib/presentation/atoms/AtomicBadge.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicBadge.js +0 -168
- package/lib/presentation/atoms/AtomicBadge.js.map +0 -1
- package/lib/presentation/atoms/AtomicButton.d.ts +0 -21
- package/lib/presentation/atoms/AtomicButton.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicButton.js +0 -172
- package/lib/presentation/atoms/AtomicButton.js.map +0 -1
- package/lib/presentation/atoms/AtomicCard.d.ts +0 -15
- package/lib/presentation/atoms/AtomicCard.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicCard.js +0 -70
- package/lib/presentation/atoms/AtomicCard.js.map +0 -1
- package/lib/presentation/atoms/AtomicChip.d.ts +0 -53
- package/lib/presentation/atoms/AtomicChip.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicChip.js +0 -131
- package/lib/presentation/atoms/AtomicChip.js.map +0 -1
- package/lib/presentation/atoms/AtomicDatePicker.d.ts +0 -75
- package/lib/presentation/atoms/AtomicDatePicker.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicDatePicker.js +0 -246
- package/lib/presentation/atoms/AtomicDatePicker.js.map +0 -1
- package/lib/presentation/atoms/AtomicDivider.d.ts +0 -45
- package/lib/presentation/atoms/AtomicDivider.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicDivider.js +0 -58
- package/lib/presentation/atoms/AtomicDivider.js.map +0 -1
- package/lib/presentation/atoms/AtomicFab.d.ts +0 -37
- package/lib/presentation/atoms/AtomicFab.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicFab.js +0 -68
- package/lib/presentation/atoms/AtomicFab.js.map +0 -1
- package/lib/presentation/atoms/AtomicFilter.d.ts +0 -37
- package/lib/presentation/atoms/AtomicFilter.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicFilter.js +0 -104
- package/lib/presentation/atoms/AtomicFilter.js.map +0 -1
- package/lib/presentation/atoms/AtomicFormError.d.ts +0 -30
- package/lib/presentation/atoms/AtomicFormError.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicFormError.js +0 -64
- package/lib/presentation/atoms/AtomicFormError.js.map +0 -1
- package/lib/presentation/atoms/AtomicIcon.d.ts +0 -35
- package/lib/presentation/atoms/AtomicIcon.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicIcon.js +0 -30
- package/lib/presentation/atoms/AtomicIcon.js.map +0 -1
- package/lib/presentation/atoms/AtomicImage.d.ts +0 -40
- package/lib/presentation/atoms/AtomicImage.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicImage.js +0 -92
- package/lib/presentation/atoms/AtomicImage.js.map +0 -1
- package/lib/presentation/atoms/AtomicInput.d.ts +0 -71
- package/lib/presentation/atoms/AtomicInput.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicInput.js +0 -196
- package/lib/presentation/atoms/AtomicInput.js.map +0 -1
- package/lib/presentation/atoms/AtomicNumberInput.d.ts +0 -69
- package/lib/presentation/atoms/AtomicNumberInput.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicNumberInput.js +0 -125
- package/lib/presentation/atoms/AtomicNumberInput.js.map +0 -1
- package/lib/presentation/atoms/AtomicPicker.d.ts +0 -52
- package/lib/presentation/atoms/AtomicPicker.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicPicker.js +0 -299
- package/lib/presentation/atoms/AtomicPicker.js.map +0 -1
- package/lib/presentation/atoms/AtomicProgress.d.ts +0 -44
- package/lib/presentation/atoms/AtomicProgress.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicProgress.js +0 -80
- package/lib/presentation/atoms/AtomicProgress.js.map +0 -1
- package/lib/presentation/atoms/AtomicSearchBar.d.ts +0 -19
- package/lib/presentation/atoms/AtomicSearchBar.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicSearchBar.js +0 -46
- package/lib/presentation/atoms/AtomicSearchBar.js.map +0 -1
- package/lib/presentation/atoms/AtomicSort.d.ts +0 -72
- package/lib/presentation/atoms/AtomicSort.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicSort.js +0 -77
- package/lib/presentation/atoms/AtomicSort.js.map +0 -1
- package/lib/presentation/atoms/AtomicSwitch.d.ts +0 -43
- package/lib/presentation/atoms/AtomicSwitch.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicSwitch.js +0 -104
- package/lib/presentation/atoms/AtomicSwitch.js.map +0 -1
- package/lib/presentation/atoms/AtomicText.d.ts +0 -14
- package/lib/presentation/atoms/AtomicText.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicText.js +0 -36
- package/lib/presentation/atoms/AtomicText.js.map +0 -1
- package/lib/presentation/atoms/AtomicTextArea.d.ts +0 -85
- package/lib/presentation/atoms/AtomicTextArea.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicTextArea.js +0 -196
- package/lib/presentation/atoms/AtomicTextArea.js.map +0 -1
- package/lib/presentation/atoms/AtomicTouchable.d.ts +0 -77
- package/lib/presentation/atoms/AtomicTouchable.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicTouchable.js +0 -138
- package/lib/presentation/atoms/AtomicTouchable.js.map +0 -1
- package/lib/presentation/atoms/fab/styles/fabStyles.d.ts +0 -23
- package/lib/presentation/atoms/fab/styles/fabStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/fab/styles/fabStyles.js +0 -63
- package/lib/presentation/atoms/fab/styles/fabStyles.js.map +0 -1
- package/lib/presentation/atoms/fab/types/index.d.ts +0 -71
- package/lib/presentation/atoms/fab/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/fab/types/index.js +0 -2
- package/lib/presentation/atoms/fab/types/index.js.map +0 -1
- package/lib/presentation/atoms/filter/styles/filterStyles.d.ts +0 -15
- package/lib/presentation/atoms/filter/styles/filterStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/filter/styles/filterStyles.js +0 -29
- package/lib/presentation/atoms/filter/styles/filterStyles.js.map +0 -1
- package/lib/presentation/atoms/filter/types/index.d.ts +0 -76
- package/lib/presentation/atoms/filter/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/filter/types/index.js +0 -2
- package/lib/presentation/atoms/filter/types/index.js.map +0 -1
- package/lib/presentation/atoms/index.d.ts +0 -273
- package/lib/presentation/atoms/index.d.ts.map +0 -1
- package/lib/presentation/atoms/index.js +0 -146
- package/lib/presentation/atoms/index.js.map +0 -1
- package/lib/presentation/atoms/input/hooks/useInputState.d.ts +0 -7
- package/lib/presentation/atoms/input/hooks/useInputState.d.ts.map +0 -1
- package/lib/presentation/atoms/input/hooks/useInputState.js +0 -13
- package/lib/presentation/atoms/input/hooks/useInputState.js.map +0 -1
- package/lib/presentation/atoms/input/styles/inputStyles.d.ts +0 -13
- package/lib/presentation/atoms/input/styles/inputStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/input/styles/inputStyles.js +0 -59
- package/lib/presentation/atoms/input/styles/inputStyles.js.map +0 -1
- package/lib/presentation/atoms/input/types/index.d.ts +0 -24
- package/lib/presentation/atoms/input/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/input/types/index.js +0 -2
- package/lib/presentation/atoms/input/types/index.js.map +0 -1
- package/lib/presentation/atoms/picker/styles/pickerStyles.d.ts +0 -85
- package/lib/presentation/atoms/picker/styles/pickerStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/picker/styles/pickerStyles.js +0 -177
- package/lib/presentation/atoms/picker/styles/pickerStyles.js.map +0 -1
- package/lib/presentation/atoms/picker/types/index.d.ts +0 -38
- package/lib/presentation/atoms/picker/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/picker/types/index.js +0 -2
- package/lib/presentation/atoms/picker/types/index.js.map +0 -1
- package/lib/presentation/atoms/touchable/styles/touchableStyles.d.ts +0 -31
- package/lib/presentation/atoms/touchable/styles/touchableStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/touchable/styles/touchableStyles.js +0 -54
- package/lib/presentation/atoms/touchable/styles/touchableStyles.js.map +0 -1
- package/lib/presentation/atoms/touchable/types/index.d.ts +0 -134
- package/lib/presentation/atoms/touchable/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/touchable/types/index.js +0 -2
- package/lib/presentation/atoms/touchable/types/index.js.map +0 -1
- package/lib/presentation/hooks/useResponsive.d.ts +0 -80
- package/lib/presentation/hooks/useResponsive.d.ts.map +0 -1
- package/lib/presentation/hooks/useResponsive.js +0 -82
- package/lib/presentation/hooks/useResponsive.js.map +0 -1
- package/lib/presentation/molecules/AtomicConfirmationModal.d.ts +0 -73
- package/lib/presentation/molecules/AtomicConfirmationModal.d.ts.map +0 -1
- package/lib/presentation/molecules/AtomicConfirmationModal.js +0 -154
- package/lib/presentation/molecules/AtomicConfirmationModal.js.map +0 -1
- package/lib/presentation/molecules/EmptyState.d.ts +0 -41
- package/lib/presentation/molecules/EmptyState.d.ts.map +0 -1
- package/lib/presentation/molecules/EmptyState.js +0 -68
- package/lib/presentation/molecules/EmptyState.js.map +0 -1
- package/lib/presentation/molecules/FormField.d.ts +0 -22
- package/lib/presentation/molecules/FormField.d.ts.map +0 -1
- package/lib/presentation/molecules/FormField.js +0 -76
- package/lib/presentation/molecules/FormField.js.map +0 -1
- package/lib/presentation/molecules/GridContainer.d.ts +0 -40
- package/lib/presentation/molecules/GridContainer.d.ts.map +0 -1
- package/lib/presentation/molecules/GridContainer.js +0 -77
- package/lib/presentation/molecules/GridContainer.js.map +0 -1
- package/lib/presentation/molecules/IconContainer.d.ts +0 -29
- package/lib/presentation/molecules/IconContainer.d.ts.map +0 -1
- package/lib/presentation/molecules/IconContainer.js +0 -60
- package/lib/presentation/molecules/IconContainer.js.map +0 -1
- package/lib/presentation/molecules/ListItem.d.ts +0 -5
- package/lib/presentation/molecules/ListItem.d.ts.map +0 -1
- package/lib/presentation/molecules/ListItem.js +0 -24
- package/lib/presentation/molecules/ListItem.js.map +0 -1
- package/lib/presentation/molecules/ScreenHeader.d.ts +0 -55
- package/lib/presentation/molecules/ScreenHeader.d.ts.map +0 -1
- package/lib/presentation/molecules/ScreenHeader.js +0 -94
- package/lib/presentation/molecules/ScreenHeader.js.map +0 -1
- package/lib/presentation/molecules/SearchBar.d.ts +0 -18
- package/lib/presentation/molecules/SearchBar.d.ts.map +0 -1
- package/lib/presentation/molecules/SearchBar.js +0 -47
- package/lib/presentation/molecules/SearchBar.js.map +0 -1
- package/lib/presentation/molecules/SectionCard.d.ts +0 -25
- package/lib/presentation/molecules/SectionCard.d.ts.map +0 -1
- package/lib/presentation/molecules/SectionCard.js +0 -47
- package/lib/presentation/molecules/SectionCard.js.map +0 -1
- package/lib/presentation/molecules/SectionContainer.d.ts +0 -33
- package/lib/presentation/molecules/SectionContainer.d.ts.map +0 -1
- package/lib/presentation/molecules/SectionContainer.js +0 -64
- package/lib/presentation/molecules/SectionContainer.js.map +0 -1
- package/lib/presentation/molecules/SectionHeader.d.ts +0 -37
- package/lib/presentation/molecules/SectionHeader.d.ts.map +0 -1
- package/lib/presentation/molecules/SectionHeader.js +0 -73
- package/lib/presentation/molecules/SectionHeader.js.map +0 -1
- package/lib/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.d.ts +0 -50
- package/lib/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.d.ts.map +0 -1
- package/lib/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.js +0 -115
- package/lib/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.js.map +0 -1
- package/lib/presentation/molecules/confirmation-modal/types/index.d.ts +0 -86
- package/lib/presentation/molecules/confirmation-modal/types/index.d.ts.map +0 -1
- package/lib/presentation/molecules/confirmation-modal/types/index.js +0 -7
- package/lib/presentation/molecules/confirmation-modal/types/index.js.map +0 -1
- package/lib/presentation/molecules/index.d.ts +0 -27
- package/lib/presentation/molecules/index.d.ts.map +0 -1
- package/lib/presentation/molecules/index.js +0 -17
- package/lib/presentation/molecules/index.js.map +0 -1
- package/lib/presentation/molecules/listitem/styles/listItemStyles.d.ts +0 -12
- package/lib/presentation/molecules/listitem/styles/listItemStyles.d.ts.map +0 -1
- package/lib/presentation/molecules/listitem/styles/listItemStyles.js +0 -15
- package/lib/presentation/molecules/listitem/styles/listItemStyles.js.map +0 -1
- package/lib/presentation/molecules/listitem/types/index.d.ts +0 -17
- package/lib/presentation/molecules/listitem/types/index.d.ts.map +0 -1
- package/lib/presentation/molecules/listitem/types/index.js +0 -2
- package/lib/presentation/molecules/listitem/types/index.js.map +0 -1
- package/lib/presentation/organisms/AppHeader.d.ts +0 -31
- package/lib/presentation/organisms/AppHeader.d.ts.map +0 -1
- package/lib/presentation/organisms/AppHeader.js +0 -78
- package/lib/presentation/organisms/AppHeader.js.map +0 -1
- package/lib/presentation/organisms/FormContainer.d.ts +0 -76
- package/lib/presentation/organisms/FormContainer.d.ts.map +0 -1
- package/lib/presentation/organisms/FormContainer.js +0 -127
- package/lib/presentation/organisms/FormContainer.js.map +0 -1
- package/lib/presentation/organisms/ScreenLayout.d.ts +0 -84
- package/lib/presentation/organisms/ScreenLayout.d.ts.map +0 -1
- package/lib/presentation/organisms/ScreenLayout.js +0 -69
- package/lib/presentation/organisms/ScreenLayout.js.map +0 -1
- package/lib/presentation/organisms/index.d.ts +0 -16
- package/lib/presentation/organisms/index.d.ts.map +0 -1
- package/lib/presentation/organisms/index.js +0 -14
- package/lib/presentation/organisms/index.js.map +0 -1
- package/lib/presentation/tokens/commonStyles.d.ts +0 -122
- package/lib/presentation/tokens/commonStyles.d.ts.map +0 -1
- package/lib/presentation/tokens/commonStyles.js +0 -220
- package/lib/presentation/tokens/commonStyles.js.map +0 -1
- package/lib/presentation/utils/platformConstants.d.ts +0 -100
- package/lib/presentation/utils/platformConstants.d.ts.map +0 -1
- package/lib/presentation/utils/platformConstants.js +0 -114
- package/lib/presentation/utils/platformConstants.js.map +0 -1
- package/lib/presentation/utils/responsive.d.ts +0 -218
- package/lib/presentation/utils/responsive.d.ts.map +0 -1
- package/lib/presentation/utils/responsive.js +0 -452
- package/lib/presentation/utils/responsive.js.map +0 -1
- package/lib/presentation/utils/variants/compound.d.ts +0 -10
- package/lib/presentation/utils/variants/compound.d.ts.map +0 -1
- package/lib/presentation/utils/variants/compound.js +0 -16
- package/lib/presentation/utils/variants/compound.js.map +0 -1
- package/lib/presentation/utils/variants/core.d.ts +0 -15
- package/lib/presentation/utils/variants/core.d.ts.map +0 -1
- package/lib/presentation/utils/variants/core.js +0 -23
- package/lib/presentation/utils/variants/core.js.map +0 -1
- package/lib/presentation/utils/variants/helpers.d.ts +0 -5
- package/lib/presentation/utils/variants/helpers.d.ts.map +0 -1
- package/lib/presentation/utils/variants/helpers.js +0 -10
- package/lib/presentation/utils/variants/helpers.js.map +0 -1
- package/lib/presentation/utils/variants.d.ts +0 -4
- package/lib/presentation/utils/variants.d.ts.map +0 -1
- package/lib/presentation/utils/variants.js +0 -4
- package/lib/presentation/utils/variants.js.map +0 -1
- package/src/presentation/atoms/AtomicAvatar.tsx +0 -157
- package/src/presentation/atoms/AtomicAvatarGroup.tsx +0 -169
- package/src/presentation/atoms/AtomicBadge.tsx +0 -232
- package/src/presentation/atoms/AtomicButton.tsx +0 -236
- package/src/presentation/atoms/AtomicCard.tsx +0 -107
- package/src/presentation/atoms/AtomicChip.tsx +0 -223
- package/src/presentation/atoms/AtomicDatePicker.tsx +0 -354
- package/src/presentation/atoms/AtomicDivider.tsx +0 -114
- package/src/presentation/atoms/AtomicFab.tsx +0 -98
- package/src/presentation/atoms/AtomicFilter.tsx +0 -154
- package/src/presentation/atoms/AtomicFormError.tsx +0 -105
- package/src/presentation/atoms/AtomicIcon.tsx +0 -40
- package/src/presentation/atoms/AtomicImage.tsx +0 -149
- package/src/presentation/atoms/AtomicInput.tsx +0 -350
- package/src/presentation/atoms/AtomicNumberInput.tsx +0 -182
- package/src/presentation/atoms/AtomicPicker.tsx +0 -458
- package/src/presentation/atoms/AtomicProgress.tsx +0 -139
- package/src/presentation/atoms/AtomicSearchBar.tsx +0 -114
- package/src/presentation/atoms/AtomicSort.tsx +0 -145
- package/src/presentation/atoms/AtomicSwitch.tsx +0 -166
- package/src/presentation/atoms/AtomicText.tsx +0 -82
- package/src/presentation/atoms/AtomicTextArea.tsx +0 -313
- package/src/presentation/atoms/AtomicTouchable.tsx +0 -209
- package/src/presentation/atoms/fab/styles/fabStyles.ts +0 -69
- package/src/presentation/atoms/fab/types/index.ts +0 -82
- package/src/presentation/atoms/filter/styles/filterStyles.ts +0 -32
- package/src/presentation/atoms/filter/types/index.ts +0 -89
- package/src/presentation/atoms/index.ts +0 -366
- package/src/presentation/atoms/input/hooks/useInputState.ts +0 -15
- package/src/presentation/atoms/input/styles/inputStyles.ts +0 -66
- package/src/presentation/atoms/input/types/index.ts +0 -25
- package/src/presentation/atoms/picker/styles/pickerStyles.ts +0 -207
- package/src/presentation/atoms/picker/types/index.ts +0 -40
- package/src/presentation/atoms/touchable/styles/touchableStyles.ts +0 -62
- package/src/presentation/atoms/touchable/types/index.ts +0 -155
- package/src/presentation/hooks/useResponsive.ts +0 -180
- package/src/presentation/molecules/AtomicConfirmationModal.tsx +0 -243
- package/src/presentation/molecules/EmptyState.tsx +0 -130
- package/src/presentation/molecules/FormField.tsx +0 -128
- package/src/presentation/molecules/GridContainer.tsx +0 -124
- package/src/presentation/molecules/IconContainer.tsx +0 -94
- package/src/presentation/molecules/ListItem.tsx +0 -36
- package/src/presentation/molecules/ScreenHeader.tsx +0 -140
- package/src/presentation/molecules/SearchBar.tsx +0 -85
- package/src/presentation/molecules/SectionCard.tsx +0 -74
- package/src/presentation/molecules/SectionContainer.tsx +0 -106
- package/src/presentation/molecules/SectionHeader.tsx +0 -125
- package/src/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.ts +0 -133
- package/src/presentation/molecules/confirmation-modal/types/index.ts +0 -105
- package/src/presentation/molecules/index.ts +0 -41
- package/src/presentation/molecules/listitem/styles/listItemStyles.ts +0 -19
- package/src/presentation/molecules/listitem/types/index.ts +0 -17
- package/src/presentation/organisms/AppHeader.tsx +0 -137
- package/src/presentation/organisms/FormContainer.tsx +0 -180
- package/src/presentation/organisms/ScreenLayout.tsx +0 -171
- package/src/presentation/organisms/index.ts +0 -25
- package/src/presentation/tokens/commonStyles.ts +0 -253
- package/src/presentation/utils/platformConstants.ts +0 -124
- package/src/presentation/utils/responsive.ts +0 -516
|
@@ -1,220 +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-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
|
-
};
|
|
220
|
-
//# sourceMappingURL=commonStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"commonStyles.js","sourceRoot":"","sources":["../../../src/presentation/tokens/commonStyles.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Platform-Specific Constants
|
|
3
|
-
*
|
|
4
|
-
* Design system constants that ensure compliance with platform guidelines.
|
|
5
|
-
* These values are based on official Human Interface Guidelines (HIG) from Apple and Material Design from Google.
|
|
6
|
-
*/
|
|
7
|
-
/**
|
|
8
|
-
* iOS Human Interface Guidelines (HIG) Constants
|
|
9
|
-
*
|
|
10
|
-
* @see https://developer.apple.com/design/human-interface-guidelines/layout
|
|
11
|
-
*/
|
|
12
|
-
export declare const IOS_HIG: {
|
|
13
|
-
/**
|
|
14
|
-
* Minimum Touch Target Size
|
|
15
|
-
*
|
|
16
|
-
* Apple requires a minimum tappable area of 44pt x 44pt for ALL interactive controls.
|
|
17
|
-
* This is enforced during App Store review.
|
|
18
|
-
*
|
|
19
|
-
* @critical Violating this can result in App Store rejection
|
|
20
|
-
*/
|
|
21
|
-
readonly MIN_TOUCH_TARGET: 44;
|
|
22
|
-
/**
|
|
23
|
-
* Recommended Minimum Touch Target Size
|
|
24
|
-
*
|
|
25
|
-
* For better accessibility and usability, Apple recommends 48pt x 48pt.
|
|
26
|
-
*/
|
|
27
|
-
readonly RECOMMENDED_TOUCH_TARGET: 48;
|
|
28
|
-
/**
|
|
29
|
-
* Minimum Text Size
|
|
30
|
-
*
|
|
31
|
-
* Minimum font size for body text to ensure readability.
|
|
32
|
-
*/
|
|
33
|
-
readonly MIN_TEXT_SIZE: 17;
|
|
34
|
-
/**
|
|
35
|
-
* Minimum Contrast Ratio
|
|
36
|
-
*
|
|
37
|
-
* WCAG AA compliance requires 4.5:1 for normal text.
|
|
38
|
-
*/
|
|
39
|
-
readonly MIN_CONTRAST_RATIO: 4.5;
|
|
40
|
-
};
|
|
41
|
-
/**
|
|
42
|
-
* Android Material Design Guidelines Constants
|
|
43
|
-
*
|
|
44
|
-
* @see https://m3.material.io/foundations/layout/applying-layout/window-size-classes
|
|
45
|
-
*/
|
|
46
|
-
export declare const ANDROID_MATERIAL: {
|
|
47
|
-
/**
|
|
48
|
-
* Minimum Touch Target Size
|
|
49
|
-
*
|
|
50
|
-
* Material Design 3 recommends a minimum of 48dp x 48dp.
|
|
51
|
-
*/
|
|
52
|
-
readonly MIN_TOUCH_TARGET: 48;
|
|
53
|
-
/**
|
|
54
|
-
* Minimum Text Size
|
|
55
|
-
*
|
|
56
|
-
* Minimum font size for body text.
|
|
57
|
-
*/
|
|
58
|
-
readonly MIN_TEXT_SIZE: 14;
|
|
59
|
-
};
|
|
60
|
-
/**
|
|
61
|
-
* Universal Platform Constants
|
|
62
|
-
*
|
|
63
|
-
* These values work across both iOS and Android, taking the more restrictive requirement.
|
|
64
|
-
*/
|
|
65
|
-
export declare const PLATFORM_CONSTANTS: {
|
|
66
|
-
/**
|
|
67
|
-
* Minimum Touch Target Size
|
|
68
|
-
*
|
|
69
|
-
* Uses iOS requirement (44pt) as it's more restrictive than Android (48dp).
|
|
70
|
-
* This ensures compliance on both platforms.
|
|
71
|
-
*/
|
|
72
|
-
readonly MIN_TOUCH_TARGET: number;
|
|
73
|
-
/**
|
|
74
|
-
* Recommended Touch Target Size
|
|
75
|
-
*
|
|
76
|
-
* Uses the higher value between iOS and Android recommendations.
|
|
77
|
-
*/
|
|
78
|
-
readonly RECOMMENDED_TOUCH_TARGET: 48;
|
|
79
|
-
/**
|
|
80
|
-
* Minimum Text Size
|
|
81
|
-
*
|
|
82
|
-
* Uses iOS requirement as it's larger.
|
|
83
|
-
*/
|
|
84
|
-
readonly MIN_TEXT_SIZE: number;
|
|
85
|
-
};
|
|
86
|
-
/**
|
|
87
|
-
* Helper function to validate touch target size
|
|
88
|
-
*
|
|
89
|
-
* @param size - The size to validate (in pt/dp)
|
|
90
|
-
* @returns true if size meets platform requirements
|
|
91
|
-
*/
|
|
92
|
-
export declare const isValidTouchTarget: (size: number) => boolean;
|
|
93
|
-
/**
|
|
94
|
-
* Helper function to get minimum touch target for component
|
|
95
|
-
*
|
|
96
|
-
* @param componentType - The type of component ('button' | 'input' | 'icon' | 'generic')
|
|
97
|
-
* @returns The minimum touch target size for that component type
|
|
98
|
-
*/
|
|
99
|
-
export declare const getMinTouchTarget: (componentType?: "button" | "input" | "icon" | "generic") => number;
|
|
100
|
-
//# sourceMappingURL=platformConstants.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"platformConstants.d.ts","sourceRoot":"","sources":["../../../src/presentation/utils/platformConstants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;GAIG;AACH,eAAO,MAAM,OAAO;IAClB;;;;;;;OAOG;;IAGH;;;;OAIG;;IAGH;;;;OAIG;;IAGH;;;;OAIG;;CAEK,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAC3B;;;;OAIG;;IAGH;;;;OAIG;;CAEK,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;IAC7B;;;;;OAKG;;IAGH;;;;OAIG;;IAGH;;;;OAIG;;CAEK,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,KAAG,OAEjD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,gBAAe,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAqB,KAAG,MAYtG,CAAC"}
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Platform-Specific Constants
|
|
3
|
-
*
|
|
4
|
-
* Design system constants that ensure compliance with platform guidelines.
|
|
5
|
-
* These values are based on official Human Interface Guidelines (HIG) from Apple and Material Design from Google.
|
|
6
|
-
*/
|
|
7
|
-
/**
|
|
8
|
-
* iOS Human Interface Guidelines (HIG) Constants
|
|
9
|
-
*
|
|
10
|
-
* @see https://developer.apple.com/design/human-interface-guidelines/layout
|
|
11
|
-
*/
|
|
12
|
-
export const IOS_HIG = {
|
|
13
|
-
/**
|
|
14
|
-
* Minimum Touch Target Size
|
|
15
|
-
*
|
|
16
|
-
* Apple requires a minimum tappable area of 44pt x 44pt for ALL interactive controls.
|
|
17
|
-
* This is enforced during App Store review.
|
|
18
|
-
*
|
|
19
|
-
* @critical Violating this can result in App Store rejection
|
|
20
|
-
*/
|
|
21
|
-
MIN_TOUCH_TARGET: 44,
|
|
22
|
-
/**
|
|
23
|
-
* Recommended Minimum Touch Target Size
|
|
24
|
-
*
|
|
25
|
-
* For better accessibility and usability, Apple recommends 48pt x 48pt.
|
|
26
|
-
*/
|
|
27
|
-
RECOMMENDED_TOUCH_TARGET: 48,
|
|
28
|
-
/**
|
|
29
|
-
* Minimum Text Size
|
|
30
|
-
*
|
|
31
|
-
* Minimum font size for body text to ensure readability.
|
|
32
|
-
*/
|
|
33
|
-
MIN_TEXT_SIZE: 17,
|
|
34
|
-
/**
|
|
35
|
-
* Minimum Contrast Ratio
|
|
36
|
-
*
|
|
37
|
-
* WCAG AA compliance requires 4.5:1 for normal text.
|
|
38
|
-
*/
|
|
39
|
-
MIN_CONTRAST_RATIO: 4.5,
|
|
40
|
-
};
|
|
41
|
-
/**
|
|
42
|
-
* Android Material Design Guidelines Constants
|
|
43
|
-
*
|
|
44
|
-
* @see https://m3.material.io/foundations/layout/applying-layout/window-size-classes
|
|
45
|
-
*/
|
|
46
|
-
export const ANDROID_MATERIAL = {
|
|
47
|
-
/**
|
|
48
|
-
* Minimum Touch Target Size
|
|
49
|
-
*
|
|
50
|
-
* Material Design 3 recommends a minimum of 48dp x 48dp.
|
|
51
|
-
*/
|
|
52
|
-
MIN_TOUCH_TARGET: 48,
|
|
53
|
-
/**
|
|
54
|
-
* Minimum Text Size
|
|
55
|
-
*
|
|
56
|
-
* Minimum font size for body text.
|
|
57
|
-
*/
|
|
58
|
-
MIN_TEXT_SIZE: 14,
|
|
59
|
-
};
|
|
60
|
-
/**
|
|
61
|
-
* Universal Platform Constants
|
|
62
|
-
*
|
|
63
|
-
* These values work across both iOS and Android, taking the more restrictive requirement.
|
|
64
|
-
*/
|
|
65
|
-
export const PLATFORM_CONSTANTS = {
|
|
66
|
-
/**
|
|
67
|
-
* Minimum Touch Target Size
|
|
68
|
-
*
|
|
69
|
-
* Uses iOS requirement (44pt) as it's more restrictive than Android (48dp).
|
|
70
|
-
* This ensures compliance on both platforms.
|
|
71
|
-
*/
|
|
72
|
-
MIN_TOUCH_TARGET: Math.max(IOS_HIG.MIN_TOUCH_TARGET, ANDROID_MATERIAL.MIN_TOUCH_TARGET),
|
|
73
|
-
/**
|
|
74
|
-
* Recommended Touch Target Size
|
|
75
|
-
*
|
|
76
|
-
* Uses the higher value between iOS and Android recommendations.
|
|
77
|
-
*/
|
|
78
|
-
RECOMMENDED_TOUCH_TARGET: 48,
|
|
79
|
-
/**
|
|
80
|
-
* Minimum Text Size
|
|
81
|
-
*
|
|
82
|
-
* Uses iOS requirement as it's larger.
|
|
83
|
-
*/
|
|
84
|
-
MIN_TEXT_SIZE: Math.max(IOS_HIG.MIN_TEXT_SIZE, ANDROID_MATERIAL.MIN_TEXT_SIZE),
|
|
85
|
-
};
|
|
86
|
-
/**
|
|
87
|
-
* Helper function to validate touch target size
|
|
88
|
-
*
|
|
89
|
-
* @param size - The size to validate (in pt/dp)
|
|
90
|
-
* @returns true if size meets platform requirements
|
|
91
|
-
*/
|
|
92
|
-
export const isValidTouchTarget = (size) => {
|
|
93
|
-
return size >= IOS_HIG.MIN_TOUCH_TARGET;
|
|
94
|
-
};
|
|
95
|
-
/**
|
|
96
|
-
* Helper function to get minimum touch target for component
|
|
97
|
-
*
|
|
98
|
-
* @param componentType - The type of component ('button' | 'input' | 'icon' | 'generic')
|
|
99
|
-
* @returns The minimum touch target size for that component type
|
|
100
|
-
*/
|
|
101
|
-
export const getMinTouchTarget = (componentType = 'generic') => {
|
|
102
|
-
switch (componentType) {
|
|
103
|
-
case 'button':
|
|
104
|
-
return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for buttons
|
|
105
|
-
case 'input':
|
|
106
|
-
return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for inputs
|
|
107
|
-
case 'icon':
|
|
108
|
-
return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for icon buttons
|
|
109
|
-
case 'generic':
|
|
110
|
-
default:
|
|
111
|
-
return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for all other interactive elements
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
//# sourceMappingURL=platformConstants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"platformConstants.js","sourceRoot":"","sources":["../../../src/presentation/utils/platformConstants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB;;;;;;;OAOG;IACH,gBAAgB,EAAE,EAAE;IAEpB;;;;OAIG;IACH,wBAAwB,EAAE,EAAE;IAE5B;;;;OAIG;IACH,aAAa,EAAE,EAAE;IAEjB;;;;OAIG;IACH,kBAAkB,EAAE,GAAG;CACf,CAAC;AAEX;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B;;;;OAIG;IACH,gBAAgB,EAAE,EAAE;IAEpB;;;;OAIG;IACH,aAAa,EAAE,EAAE;CACT,CAAC;AAEX;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC;;;;;OAKG;IACH,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IAEvF;;;;OAIG;IACH,wBAAwB,EAAE,EAAE;IAE5B;;;;OAIG;IACH,aAAa,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,EAAE,gBAAgB,CAAC,aAAa,CAAC;CACtE,CAAC;AAEX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAW,EAAE;IAC1D,OAAO,IAAI,IAAI,OAAO,CAAC,gBAAgB,CAAC;AAC1C,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,gBAAyD,SAAS,EAAU,EAAE;IAC9G,QAAQ,aAAa,EAAE,CAAC;QACtB,KAAK,QAAQ;YACX,OAAO,kBAAkB,CAAC,wBAAwB,CAAC,CAAC,+BAA+B;QACrF,KAAK,OAAO;YACV,OAAO,kBAAkB,CAAC,wBAAwB,CAAC,CAAC,8BAA8B;QACpF,KAAK,MAAM;YACT,OAAO,OAAO,CAAC,gBAAgB,CAAC,CAAC,gCAAgC;QACnE,KAAK,SAAS,CAAC;QACf;YACE,OAAO,OAAO,CAAC,gBAAgB,CAAC,CAAC,kDAAkD;IACvF,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Responsive Design Utilities
|
|
3
|
-
*
|
|
4
|
-
* Centralized responsive sizing and spacing utilities to prevent
|
|
5
|
-
* Apple App Store rejection due to layout issues on different devices.
|
|
6
|
-
*
|
|
7
|
-
* Supports:
|
|
8
|
-
* - iPhone 13 mini (5.4" - smallest)
|
|
9
|
-
* - iPhone 13/14/15 (6.1" - standard)
|
|
10
|
-
* - iPhone 14 Pro Max (6.7" - largest phone)
|
|
11
|
-
* - iPad Air (10.9" - tablet)
|
|
12
|
-
*/
|
|
13
|
-
/**
|
|
14
|
-
* Get current screen dimensions
|
|
15
|
-
*/
|
|
16
|
-
export declare const getScreenDimensions: () => {
|
|
17
|
-
width: number;
|
|
18
|
-
height: number;
|
|
19
|
-
};
|
|
20
|
-
/**
|
|
21
|
-
* Check if current device is a small phone (iPhone 13 mini, SE)
|
|
22
|
-
*/
|
|
23
|
-
export declare const isSmallPhone: () => boolean;
|
|
24
|
-
/**
|
|
25
|
-
* Check if current device is a tablet (iPad)
|
|
26
|
-
*/
|
|
27
|
-
export declare const isTablet: () => boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Responsive logo/icon size
|
|
30
|
-
* Small devices: 100-120px
|
|
31
|
-
* Medium devices: 120-160px
|
|
32
|
-
* Tablets: 160-200px
|
|
33
|
-
*/
|
|
34
|
-
export declare const getResponsiveLogoSize: (baseSize?: number) => number;
|
|
35
|
-
/**
|
|
36
|
-
* Responsive multiline input height
|
|
37
|
-
* Prevents keyboard overlap on small devices
|
|
38
|
-
*
|
|
39
|
-
* Small devices: 100-120px
|
|
40
|
-
* Medium devices: 120-150px
|
|
41
|
-
* Tablets: 150-200px
|
|
42
|
-
*/
|
|
43
|
-
export declare const getResponsiveInputHeight: (baseHeight?: number) => number;
|
|
44
|
-
/**
|
|
45
|
-
* Responsive horizontal padding
|
|
46
|
-
* Accounts for safe area on notched devices and iPad
|
|
47
|
-
*/
|
|
48
|
-
export declare const getResponsiveHorizontalPadding: (basePadding?: number, insets?: {
|
|
49
|
-
left: number;
|
|
50
|
-
right: number;
|
|
51
|
-
}) => number;
|
|
52
|
-
/**
|
|
53
|
-
* Responsive bottom positioning
|
|
54
|
-
* Accounts for home indicator and safe area
|
|
55
|
-
*/
|
|
56
|
-
export declare const getResponsiveBottomPosition: (basePosition?: number, insets?: {
|
|
57
|
-
bottom: number;
|
|
58
|
-
}) => number;
|
|
59
|
-
/**
|
|
60
|
-
* Responsive FAB (Floating Action Button) position
|
|
61
|
-
* CRITICAL: Ensures FAB appears above tab bar (70-90px tall) and safe areas
|
|
62
|
-
*
|
|
63
|
-
* Tab bar heights:
|
|
64
|
-
* - iOS: ~80-90px (including safe area)
|
|
65
|
-
* - Android: ~70px
|
|
66
|
-
*
|
|
67
|
-
* FAB positioning:
|
|
68
|
-
* - Tablets: 100px from bottom (generous spacing)
|
|
69
|
-
* - Phones: 90px from bottom (above tab bar)
|
|
70
|
-
* - Safe area aware (home indicator clearance)
|
|
71
|
-
*/
|
|
72
|
-
export declare const getResponsiveFABPosition: (insets?: {
|
|
73
|
-
bottom: number;
|
|
74
|
-
right: number;
|
|
75
|
-
}) => {
|
|
76
|
-
bottom: number;
|
|
77
|
-
right: number;
|
|
78
|
-
};
|
|
79
|
-
/**
|
|
80
|
-
* Responsive modal max height
|
|
81
|
-
* Prevents modals from taking too much space on tablets
|
|
82
|
-
* or too little on small devices
|
|
83
|
-
*/
|
|
84
|
-
export declare const getResponsiveModalMaxHeight: () => string;
|
|
85
|
-
/**
|
|
86
|
-
* Responsive modal min height
|
|
87
|
-
* Ensures modals are always usable and not too small
|
|
88
|
-
* Complements getResponsiveModalMaxHeight for complete modal sizing
|
|
89
|
-
*/
|
|
90
|
-
export declare const getResponsiveMinModalHeight: () => number;
|
|
91
|
-
/**
|
|
92
|
-
* Responsive icon container size
|
|
93
|
-
* Used in onboarding, cards, etc.
|
|
94
|
-
*/
|
|
95
|
-
export declare const getResponsiveIconContainerSize: (baseSize?: number) => number;
|
|
96
|
-
/**
|
|
97
|
-
* Responsive grid columns
|
|
98
|
-
* Returns number of columns for grid layouts
|
|
99
|
-
*/
|
|
100
|
-
export declare const getResponsiveGridColumns: (mobileColumns?: number, tabletColumns?: number) => number;
|
|
101
|
-
/**
|
|
102
|
-
* Responsive max width for content
|
|
103
|
-
* Prevents text from stretching too wide on tablets
|
|
104
|
-
*/
|
|
105
|
-
export declare const getResponsiveMaxWidth: (baseWidth?: number) => number;
|
|
106
|
-
/**
|
|
107
|
-
* Responsive font size
|
|
108
|
-
* Scales text for different devices while respecting minimum sizes
|
|
109
|
-
*/
|
|
110
|
-
export declare const getResponsiveFontSize: (baseFontSize: number) => number;
|
|
111
|
-
/**
|
|
112
|
-
* Check if device is in landscape mode
|
|
113
|
-
*/
|
|
114
|
-
export declare const isLandscape: () => boolean;
|
|
115
|
-
/**
|
|
116
|
-
* Get universal keyboard behavior
|
|
117
|
-
* Returns 'padding' which works across all platforms (iOS, Android, Web)
|
|
118
|
-
*/
|
|
119
|
-
export declare const getKeyboardBehavior: () => "padding" | "height" | "position" | undefined;
|
|
120
|
-
/**
|
|
121
|
-
* Device type enum for conditional rendering
|
|
122
|
-
*/
|
|
123
|
-
export declare enum DeviceType {
|
|
124
|
-
SMALL_PHONE = "SMALL_PHONE",
|
|
125
|
-
MEDIUM_PHONE = "MEDIUM_PHONE",
|
|
126
|
-
LARGE_PHONE = "LARGE_PHONE",
|
|
127
|
-
TABLET = "TABLET"
|
|
128
|
-
}
|
|
129
|
-
/**
|
|
130
|
-
* Get current device type
|
|
131
|
-
*/
|
|
132
|
-
export declare const getDeviceType: () => DeviceType;
|
|
133
|
-
/**
|
|
134
|
-
* Apple HIG compliant touch target size
|
|
135
|
-
*/
|
|
136
|
-
export declare const getMinTouchTargetSize: () => number;
|
|
137
|
-
/**
|
|
138
|
-
* Responsive spacing multiplier
|
|
139
|
-
* Returns a multiplier for spacing based on device size
|
|
140
|
-
*/
|
|
141
|
-
export declare const getSpacingMultiplier: () => number;
|
|
142
|
-
/**
|
|
143
|
-
* Onboarding icon container top margin
|
|
144
|
-
* Small phones: 24px (lg), Others: 40px (xxl)
|
|
145
|
-
*/
|
|
146
|
-
export declare const getOnboardingIconMarginTop: () => number;
|
|
147
|
-
/**
|
|
148
|
-
* Onboarding icon container bottom margin
|
|
149
|
-
* Tablets: 60px (xxl * 1.5 for extra breathing room), Others: 40px (xxl)
|
|
150
|
-
*/
|
|
151
|
-
export declare const getOnboardingIconMarginBottom: () => number;
|
|
152
|
-
/**
|
|
153
|
-
* Onboarding title bottom margin
|
|
154
|
-
* Tablets: 24px (lg), Others: 16px (md)
|
|
155
|
-
*/
|
|
156
|
-
export declare const getOnboardingTitleMarginBottom: () => number;
|
|
157
|
-
/**
|
|
158
|
-
* Onboarding text horizontal padding (title and description)
|
|
159
|
-
* Small phones: 8px (sm for tighter fit), Others: 16px (md)
|
|
160
|
-
*/
|
|
161
|
-
export declare const getOnboardingTextPadding: () => number;
|
|
162
|
-
/**
|
|
163
|
-
* Onboarding description top margin
|
|
164
|
-
* Small phones: 4px (xs), Others: 8px (sm)
|
|
165
|
-
*/
|
|
166
|
-
export declare const getOnboardingDescriptionMarginTop: () => number;
|
|
167
|
-
/**
|
|
168
|
-
* Onboarding icon size (for icon inside container)
|
|
169
|
-
* Calculated as ~55% of icon container size for proper visual balance
|
|
170
|
-
* Small phones: ~66px (55% of 120px), Standard: ~77px (55% of 140px), Tablets: ~99px (55% of 180px)
|
|
171
|
-
*/
|
|
172
|
-
export declare const getOnboardingIconSize: () => number;
|
|
173
|
-
/**
|
|
174
|
-
* Keyboard vertical offset for KeyboardAvoidingView
|
|
175
|
-
* Accounts for header/navigation bar height
|
|
176
|
-
* Universal value that works across all platforms
|
|
177
|
-
*/
|
|
178
|
-
export declare const getKeyboardVerticalOffset: () => number;
|
|
179
|
-
/**
|
|
180
|
-
* Form container bottom padding
|
|
181
|
-
* Prevents overlap with bottom tab navigation and ensures submit buttons are accessible
|
|
182
|
-
*
|
|
183
|
-
* Formula: safeAreaBottom + tabBarHeight + extraSpace
|
|
184
|
-
* - Tab bar height: ~56px (iOS/Android standard)
|
|
185
|
-
* - Extra space: ~24px (breathing room for submit button)
|
|
186
|
-
* - Safe area: Variable (home indicator on iPhone)
|
|
187
|
-
* - Minimum: 100px (ensures buttons always accessible)
|
|
188
|
-
*/
|
|
189
|
-
export declare const getFormBottomPadding: (safeAreaBottom: number) => number;
|
|
190
|
-
/**
|
|
191
|
-
* Input field icon size
|
|
192
|
-
* Used for leading/trailing icons and password toggle
|
|
193
|
-
* Apple HIG: Minimum 22px for touch targets
|
|
194
|
-
*/
|
|
195
|
-
export declare const getInputIconSize: () => number;
|
|
196
|
-
/**
|
|
197
|
-
* Form content container width
|
|
198
|
-
* Forms need more generous width than regular content to prevent cramped layouts
|
|
199
|
-
*
|
|
200
|
-
* Strategy:
|
|
201
|
-
* - Phones: undefined (no max width restriction, fills available space)
|
|
202
|
-
* - Tablets: Max 700px (readable but not restrictive)
|
|
203
|
-
*
|
|
204
|
-
* Different from getResponsiveMaxWidth which is for text content (max 400px)
|
|
205
|
-
*
|
|
206
|
-
* @returns number for tablets (700px max), undefined for phones (no restriction)
|
|
207
|
-
*/
|
|
208
|
-
export declare const getFormContentWidth: () => number | undefined;
|
|
209
|
-
/**
|
|
210
|
-
* Form element spacing (vertical)
|
|
211
|
-
* Vertical spacing between form elements (inputs, buttons, etc.)
|
|
212
|
-
* Used with Children.map() wrapper pattern for universal compatibility
|
|
213
|
-
* Replaces CSS gap property (old RN version compatibility)
|
|
214
|
-
*
|
|
215
|
-
* Universal pattern - works on iOS, Android, Web
|
|
216
|
-
*/
|
|
217
|
-
export declare const getFormElementSpacing: () => number;
|
|
218
|
-
//# sourceMappingURL=responsive.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../../src/presentation/utils/responsive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AA6BH;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;CAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAO,OAG3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAU,MAAY,KAAG,MAa9D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GAAI,aAAY,MAAY,KAAG,MAanE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,8BAA8B,GACzC,cAAa,MAAW,EACxB,SAAQ;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAA0B,KAC9D,MAUF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,GACtC,eAAc,MAAW,EACzB,SAAQ;IAAE,MAAM,EAAE,MAAM,CAAA;CAAkB,KACzC,MAEF,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,wBAAwB,GACnC,SAAQ;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAA4B,KAClE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAmBjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,QAAO,MAa9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,QAAO,MAa9C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,8BAA8B,GAAI,WAAU,MAAY,KAAG,MAYvE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,gBAAe,MAAU,EACzB,gBAAe,MAAU,KACxB,MAGF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,YAAW,MAAY,KAAG,MAa/D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,cAAc,MAAM,KAAG,MAY5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,OAG9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,QAAO,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAE1E,CAAC;AAEF;;GAEG;AACH,oBAAY,UAAU;IACpB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,WAAW,gBAAgB;IAC3B,MAAM,WAAW;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,QAAO,UAYhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,QAAO,MAA0B,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,MAUvC,CAAC;AAaF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,QAAO,MAE7C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,6BAA6B,QAAO,MAEhD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,8BAA8B,QAAO,MAEjD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,MAE3C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,QAAO,MAEpD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,QAAO,MAIxC,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,QAAO,MAM5C,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,GAAI,gBAAgB,MAAM,KAAG,MAO7D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,QAAO,MAanC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,QAAO,MAAM,GAAG,SAU/C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,QAAO,MAaxC,CAAC"}
|