@umituz/react-native-design-system 1.5.28 → 1.5.29
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/package.json +1 -1
- package/src/presentation/atoms/AtomicInput.tsx +5 -7
- package/dist/AtomicIcon.d.ts +0 -34
- package/dist/index.d.ts +0 -60
- package/dist/presentation/atoms/AtomicAvatar.d.ts +0 -47
- package/dist/presentation/atoms/AtomicAvatarGroup.d.ts +0 -55
- package/dist/presentation/atoms/AtomicBadge.d.ts +0 -41
- package/dist/presentation/atoms/AtomicButton.d.ts +0 -20
- package/dist/presentation/atoms/AtomicCard.d.ts +0 -14
- package/dist/presentation/atoms/AtomicChip.d.ts +0 -52
- package/dist/presentation/atoms/AtomicDatePicker.d.ts +0 -74
- package/dist/presentation/atoms/AtomicDivider.d.ts +0 -44
- package/dist/presentation/atoms/AtomicFab.d.ts +0 -36
- package/dist/presentation/atoms/AtomicFilter.d.ts +0 -36
- package/dist/presentation/atoms/AtomicFormError.d.ts +0 -29
- package/dist/presentation/atoms/AtomicIcon.d.ts +0 -34
- package/dist/presentation/atoms/AtomicImage.d.ts +0 -39
- package/dist/presentation/atoms/AtomicInput.d.ts +0 -70
- package/dist/presentation/atoms/AtomicNumberInput.d.ts +0 -68
- package/dist/presentation/atoms/AtomicPicker.d.ts +0 -51
- package/dist/presentation/atoms/AtomicProgress.d.ts +0 -43
- package/dist/presentation/atoms/AtomicSearchBar.d.ts +0 -18
- package/dist/presentation/atoms/AtomicSort.d.ts +0 -71
- package/dist/presentation/atoms/AtomicSwitch.d.ts +0 -42
- package/dist/presentation/atoms/AtomicText.d.ts +0 -33
- package/dist/presentation/atoms/AtomicTextArea.d.ts +0 -84
- package/dist/presentation/atoms/AtomicTouchable.d.ts +0 -76
- package/dist/presentation/atoms/fab/styles/fabStyles.d.ts +0 -22
- package/dist/presentation/atoms/fab/types/index.d.ts +0 -70
- package/dist/presentation/atoms/filter/styles/filterStyles.d.ts +0 -14
- package/dist/presentation/atoms/filter/types/index.d.ts +0 -75
- package/dist/presentation/atoms/index.d.ts +0 -272
- package/dist/presentation/atoms/picker/styles/pickerStyles.d.ts +0 -84
- package/dist/presentation/atoms/picker/types/index.d.ts +0 -37
- package/dist/presentation/atoms/touchable/styles/touchableStyles.d.ts +0 -30
- package/dist/presentation/atoms/touchable/types/index.d.ts +0 -133
- package/dist/presentation/hooks/useResponsive.d.ts +0 -79
- package/dist/presentation/molecules/AtomicConfirmationModal.d.ts +0 -72
- package/dist/presentation/molecules/EmptyState.d.ts +0 -40
- package/dist/presentation/molecules/FormField.d.ts +0 -21
- package/dist/presentation/molecules/GridContainer.d.ts +0 -39
- package/dist/presentation/molecules/IconContainer.d.ts +0 -28
- package/dist/presentation/molecules/ListItem.d.ts +0 -4
- package/dist/presentation/molecules/ScreenHeader.d.ts +0 -54
- package/dist/presentation/molecules/SearchBar.d.ts +0 -17
- package/dist/presentation/molecules/SectionCard.d.ts +0 -24
- package/dist/presentation/molecules/SectionContainer.d.ts +0 -32
- package/dist/presentation/molecules/SectionHeader.d.ts +0 -36
- package/dist/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.d.ts +0 -49
- package/dist/presentation/molecules/confirmation-modal/types/index.d.ts +0 -85
- package/dist/presentation/molecules/listitem/styles/listItemStyles.d.ts +0 -11
- package/dist/presentation/molecules/listitem/types/index.d.ts +0 -16
- package/dist/presentation/organisms/AppHeader.d.ts +0 -30
- package/dist/presentation/organisms/FormContainer.d.ts +0 -75
- package/dist/presentation/organisms/ScreenLayout.d.ts +0 -83
- package/dist/presentation/tokens/commonStyles.d.ts +0 -121
- package/dist/presentation/utils/platformConstants.d.ts +0 -99
- package/dist/presentation/utils/responsive.d.ts +0 -217
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { StyleProp, ViewStyle } from 'react-native';
|
|
2
|
-
/**
|
|
3
|
-
* FAB (Floating Action Button) size variants
|
|
4
|
-
* Based on Material Design 3 standards
|
|
5
|
-
*/
|
|
6
|
-
export type FabSize = 'sm' | 'md' | 'lg';
|
|
7
|
-
/**
|
|
8
|
-
* FAB variant types
|
|
9
|
-
* - primary: Main action (uses primary color)
|
|
10
|
-
* - secondary: Secondary action (uses secondary color)
|
|
11
|
-
* - surface: Neutral action (uses surface color with border)
|
|
12
|
-
*/
|
|
13
|
-
export type FabVariant = 'primary' | 'secondary' | 'surface';
|
|
14
|
-
/**
|
|
15
|
-
* FAB configuration for variant styling
|
|
16
|
-
*/
|
|
17
|
-
export interface FabVariantConfig {
|
|
18
|
-
backgroundColor: string;
|
|
19
|
-
iconColor: string;
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* FAB configuration for size styling
|
|
23
|
-
*/
|
|
24
|
-
export interface FabSizeConfig {
|
|
25
|
-
width: number;
|
|
26
|
-
height: number;
|
|
27
|
-
borderRadius: number;
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* AtomicFab component props
|
|
31
|
-
*/
|
|
32
|
-
export interface AtomicFabProps {
|
|
33
|
-
/**
|
|
34
|
-
* Icon name to display (required)
|
|
35
|
-
* Any MaterialIcons name (see https://fonts.google.com/icons)
|
|
36
|
-
* Examples: 'add', 'edit', 'camera', etc.
|
|
37
|
-
*/
|
|
38
|
-
icon: string;
|
|
39
|
-
/**
|
|
40
|
-
* Callback when FAB is pressed
|
|
41
|
-
*/
|
|
42
|
-
onPress: () => void;
|
|
43
|
-
/**
|
|
44
|
-
* Visual variant of the FAB
|
|
45
|
-
* @default 'primary'
|
|
46
|
-
*/
|
|
47
|
-
variant?: FabVariant;
|
|
48
|
-
/**
|
|
49
|
-
* Size of the FAB
|
|
50
|
-
* @default 'md'
|
|
51
|
-
*/
|
|
52
|
-
size?: FabSize;
|
|
53
|
-
/**
|
|
54
|
-
* Whether the FAB is disabled
|
|
55
|
-
* @default false
|
|
56
|
-
*/
|
|
57
|
-
disabled?: boolean;
|
|
58
|
-
/**
|
|
59
|
-
* Custom style for the FAB container
|
|
60
|
-
*/
|
|
61
|
-
style?: StyleProp<ViewStyle>;
|
|
62
|
-
/**
|
|
63
|
-
* Test ID for testing
|
|
64
|
-
*/
|
|
65
|
-
testID?: string;
|
|
66
|
-
/**
|
|
67
|
-
* Accessibility label
|
|
68
|
-
*/
|
|
69
|
-
accessibilityLabel?: string;
|
|
70
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ViewStyle } from 'react-native';
|
|
2
|
-
/**
|
|
3
|
-
* Filter container styles
|
|
4
|
-
* Horizontal scrollable filter chip list
|
|
5
|
-
*/
|
|
6
|
-
export declare const getFilterContainerStyle: () => ViewStyle;
|
|
7
|
-
/**
|
|
8
|
-
* Clear all button container styles
|
|
9
|
-
*/
|
|
10
|
-
export declare const getClearAllContainerStyle: () => ViewStyle;
|
|
11
|
-
/**
|
|
12
|
-
* ScrollView content container style
|
|
13
|
-
*/
|
|
14
|
-
export declare const getScrollContentContainerStyle: () => ViewStyle;
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { StyleProp, ViewStyle } from 'react-native';
|
|
2
|
-
/**
|
|
3
|
-
* Filter option interface
|
|
4
|
-
* Represents a single filterable option
|
|
5
|
-
*/
|
|
6
|
-
export interface FilterOption {
|
|
7
|
-
/**
|
|
8
|
-
* Unique identifier for the filter option
|
|
9
|
-
*/
|
|
10
|
-
id: string;
|
|
11
|
-
/**
|
|
12
|
-
* Display label for the filter
|
|
13
|
-
*/
|
|
14
|
-
label: string;
|
|
15
|
-
/**
|
|
16
|
-
* Optional value associated with the filter
|
|
17
|
-
* Can be used for backend filtering
|
|
18
|
-
*/
|
|
19
|
-
value?: unknown;
|
|
20
|
-
/**
|
|
21
|
-
* Optional icon name to display
|
|
22
|
-
*/
|
|
23
|
-
icon?: string;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* AtomicFilter component props
|
|
27
|
-
*/
|
|
28
|
-
export interface AtomicFilterProps {
|
|
29
|
-
/**
|
|
30
|
-
* Array of filter options to display
|
|
31
|
-
*/
|
|
32
|
-
options: FilterOption[];
|
|
33
|
-
/**
|
|
34
|
-
* Array of currently selected filter IDs
|
|
35
|
-
*/
|
|
36
|
-
selectedIds: string[];
|
|
37
|
-
/**
|
|
38
|
-
* Callback when selection changes
|
|
39
|
-
* @param selectedIds - New array of selected IDs
|
|
40
|
-
*/
|
|
41
|
-
onSelectionChange: (selectedIds: string[]) => void;
|
|
42
|
-
/**
|
|
43
|
-
* Enable multi-select mode
|
|
44
|
-
* @default true
|
|
45
|
-
*/
|
|
46
|
-
multiSelect?: boolean;
|
|
47
|
-
/**
|
|
48
|
-
* Show "Clear All" button when filters are active
|
|
49
|
-
* @default true
|
|
50
|
-
*/
|
|
51
|
-
showClearAll?: boolean;
|
|
52
|
-
/**
|
|
53
|
-
* Chip variant style
|
|
54
|
-
* @default 'outlined'
|
|
55
|
-
*/
|
|
56
|
-
variant?: 'filled' | 'outlined' | 'soft';
|
|
57
|
-
/**
|
|
58
|
-
* Chip color theme
|
|
59
|
-
* @default 'primary'
|
|
60
|
-
*/
|
|
61
|
-
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
62
|
-
/**
|
|
63
|
-
* Chip size
|
|
64
|
-
* @default 'md'
|
|
65
|
-
*/
|
|
66
|
-
size?: 'sm' | 'md' | 'lg';
|
|
67
|
-
/**
|
|
68
|
-
* Custom style for the container
|
|
69
|
-
*/
|
|
70
|
-
style?: StyleProp<ViewStyle>;
|
|
71
|
-
/**
|
|
72
|
-
* Test ID for testing
|
|
73
|
-
*/
|
|
74
|
-
testID?: string;
|
|
75
|
-
}
|
|
@@ -1,272 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Atomic Components Export Index
|
|
3
|
-
*
|
|
4
|
-
* Centralized export file for all atomic design components
|
|
5
|
-
* Following atomic design principles with React Native implementation
|
|
6
|
-
*
|
|
7
|
-
* Generated for {{APP_NAME}} - {{CATEGORY}} category
|
|
8
|
-
* Theme: {{THEME_NAME}}
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* ```typescript
|
|
12
|
-
* import { AtomicButton, AtomicText, AtomicCard } from '@domains/design-system';
|
|
13
|
-
*
|
|
14
|
-
* // Or individual imports
|
|
15
|
-
* import { AtomicButton } from '@domains/design-system';
|
|
16
|
-
* ```
|
|
17
|
-
*/
|
|
18
|
-
import { AtomicButton, type AtomicButtonProps } from './AtomicButton';
|
|
19
|
-
import { AtomicText, type AtomicTextProps } from './AtomicText';
|
|
20
|
-
import { AtomicCard, type AtomicCardProps, type AtomicCardVariant, type AtomicCardPadding } from './AtomicCard';
|
|
21
|
-
import { AtomicInput, type AtomicInputProps, type AtomicInputVariant, type AtomicInputState, type AtomicInputSize } from './AtomicInput';
|
|
22
|
-
import { AtomicIcon, type AtomicIconProps, type AtomicIconSize, type AtomicIconColor } from './AtomicIcon';
|
|
23
|
-
import { AtomicImage, type AtomicImageProps } from './AtomicImage';
|
|
24
|
-
import { AtomicSwitch, type AtomicSwitchProps } from './AtomicSwitch';
|
|
25
|
-
import { AtomicBadge, type AtomicBadgeProps } from './AtomicBadge';
|
|
26
|
-
import { AtomicFormError, type AtomicFormErrorProps } from './AtomicFormError';
|
|
27
|
-
import { AtomicAvatar, type AtomicAvatarProps } from './AtomicAvatar';
|
|
28
|
-
import { AtomicChip, type AtomicChipProps } from './AtomicChip';
|
|
29
|
-
import { AtomicDivider, type AtomicDividerProps } from './AtomicDivider';
|
|
30
|
-
import { AtomicProgress, type AtomicProgressProps } from './AtomicProgress';
|
|
31
|
-
import { AtomicAvatarGroup, type AtomicAvatarGroupProps, type AvatarData } from './AtomicAvatarGroup';
|
|
32
|
-
import { AtomicFab, type AtomicFabProps, type FabSize, type FabVariant, getFabVariants } from './AtomicFab';
|
|
33
|
-
import { AtomicFilter, type AtomicFilterProps, type FilterOption, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle } from './AtomicFilter';
|
|
34
|
-
import { AtomicTouchable, type AtomicTouchableProps, type TouchableFeedback, type FeedbackStrength, type HitSlop, TouchablePresets, getOpacityValue, normalizeHitSlop } from './AtomicTouchable';
|
|
35
|
-
export { AtomicButton, type AtomicButtonProps, };
|
|
36
|
-
export { AtomicText, type AtomicTextProps, };
|
|
37
|
-
export { AtomicCard, type AtomicCardProps, type AtomicCardVariant, type AtomicCardPadding, };
|
|
38
|
-
export { AtomicInput, type AtomicInputProps, type AtomicInputVariant, type AtomicInputState, type AtomicInputSize, };
|
|
39
|
-
export { AtomicIcon, type AtomicIconProps, type AtomicIconSize, type AtomicIconColor, };
|
|
40
|
-
export { AtomicImage, type AtomicImageProps, };
|
|
41
|
-
export { AtomicSwitch, type AtomicSwitchProps, };
|
|
42
|
-
export { AtomicBadge, type AtomicBadgeProps, };
|
|
43
|
-
export { AtomicFormError, type AtomicFormErrorProps, };
|
|
44
|
-
export { AtomicAvatar, type AtomicAvatarProps, };
|
|
45
|
-
export { AtomicChip, type AtomicChipProps, };
|
|
46
|
-
export { AtomicDivider, type AtomicDividerProps, };
|
|
47
|
-
export { AtomicProgress, type AtomicProgressProps, };
|
|
48
|
-
export { AtomicAvatarGroup, type AtomicAvatarGroupProps, type AvatarData, };
|
|
49
|
-
export { AtomicFab, type AtomicFabProps, type FabSize, type FabVariant, getFabVariants, };
|
|
50
|
-
export { AtomicFilter, type AtomicFilterProps, type FilterOption, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, };
|
|
51
|
-
export { AtomicTouchable, type AtomicTouchableProps, type TouchableFeedback, type FeedbackStrength, type HitSlop, TouchablePresets, getOpacityValue, normalizeHitSlop, };
|
|
52
|
-
/**
|
|
53
|
-
* Convenience re-exports for common patterns
|
|
54
|
-
*/
|
|
55
|
-
export type AtomicComponentProps = AtomicButtonProps | AtomicTextProps | AtomicCardProps | AtomicInputProps | AtomicIconProps | AtomicImageProps | AtomicSwitchProps | AtomicBadgeProps | AtomicFormErrorProps | AtomicAvatarProps | AtomicChipProps | AtomicDividerProps | AtomicProgressProps | AtomicAvatarGroupProps | AtomicFabProps | AtomicFilterProps | AtomicTouchableProps;
|
|
56
|
-
export type AtomicVariants = {
|
|
57
|
-
card: AtomicCardVariant;
|
|
58
|
-
input: AtomicInputVariant;
|
|
59
|
-
icon: AtomicIconSize;
|
|
60
|
-
};
|
|
61
|
-
export type AtomicColors = AtomicIconColor;
|
|
62
|
-
/**
|
|
63
|
-
* Atomic component utilities
|
|
64
|
-
*/
|
|
65
|
-
export declare const AtomicUtils: {
|
|
66
|
-
/**
|
|
67
|
-
* Get recommended component combinations for common UI patterns
|
|
68
|
-
*/
|
|
69
|
-
getRecommendedCombinations: () => {
|
|
70
|
-
cardWithHeader: {
|
|
71
|
-
card: {
|
|
72
|
-
variant: "elevated";
|
|
73
|
-
padding: "lg";
|
|
74
|
-
};
|
|
75
|
-
title: {
|
|
76
|
-
variant: "titleLarge";
|
|
77
|
-
color: "primary";
|
|
78
|
-
};
|
|
79
|
-
description: {
|
|
80
|
-
variant: "bodyMedium";
|
|
81
|
-
color: "secondary";
|
|
82
|
-
};
|
|
83
|
-
};
|
|
84
|
-
formField: {
|
|
85
|
-
input: {
|
|
86
|
-
variant: "outlined";
|
|
87
|
-
size: "md";
|
|
88
|
-
};
|
|
89
|
-
label: {
|
|
90
|
-
variant: "labelMedium";
|
|
91
|
-
color: "primary";
|
|
92
|
-
};
|
|
93
|
-
helper: {
|
|
94
|
-
variant: "bodySmall";
|
|
95
|
-
color: "secondary";
|
|
96
|
-
};
|
|
97
|
-
};
|
|
98
|
-
primaryAction: {
|
|
99
|
-
button: {
|
|
100
|
-
variant: "primary";
|
|
101
|
-
size: "lg";
|
|
102
|
-
};
|
|
103
|
-
text: {
|
|
104
|
-
variant: "labelLarge";
|
|
105
|
-
color: "onPrimary";
|
|
106
|
-
};
|
|
107
|
-
icon: {
|
|
108
|
-
size: "md";
|
|
109
|
-
color: "onPrimary";
|
|
110
|
-
};
|
|
111
|
-
};
|
|
112
|
-
secondaryAction: {
|
|
113
|
-
button: {
|
|
114
|
-
variant: "outline";
|
|
115
|
-
size: "md";
|
|
116
|
-
};
|
|
117
|
-
text: {
|
|
118
|
-
variant: "labelMedium";
|
|
119
|
-
color: "primary";
|
|
120
|
-
};
|
|
121
|
-
icon: {
|
|
122
|
-
size: "sm";
|
|
123
|
-
color: "primary";
|
|
124
|
-
};
|
|
125
|
-
};
|
|
126
|
-
};
|
|
127
|
-
/**
|
|
128
|
-
* Validate component prop combinations
|
|
129
|
-
*/
|
|
130
|
-
validatePropCombination: (componentType: keyof AtomicVariants, props: any) => boolean;
|
|
131
|
-
/**
|
|
132
|
-
* Get accessibility guidelines for component combinations
|
|
133
|
-
*/
|
|
134
|
-
getAccessibilityGuidelines: () => {
|
|
135
|
-
button: {
|
|
136
|
-
minimumTouchTarget: number;
|
|
137
|
-
requiresAccessibilityLabel: boolean;
|
|
138
|
-
supportsAccessibilityHint: boolean;
|
|
139
|
-
};
|
|
140
|
-
input: {
|
|
141
|
-
requiresLabel: boolean;
|
|
142
|
-
supportsHelperText: boolean;
|
|
143
|
-
requiresAccessibilityLabel: boolean;
|
|
144
|
-
};
|
|
145
|
-
card: {
|
|
146
|
-
supportsAccessibilityRole: boolean;
|
|
147
|
-
canBeAccessibilityContainer: boolean;
|
|
148
|
-
};
|
|
149
|
-
text: {
|
|
150
|
-
supportsAccessibilityLabel: boolean;
|
|
151
|
-
respectsSystemTextSize: boolean;
|
|
152
|
-
};
|
|
153
|
-
icon: {
|
|
154
|
-
requiresAccessibilityLabel: boolean;
|
|
155
|
-
supportsAccessibilityHint: boolean;
|
|
156
|
-
};
|
|
157
|
-
};
|
|
158
|
-
};
|
|
159
|
-
declare const defaultExport: {
|
|
160
|
-
AtomicButton: React.FC<AtomicButtonProps>;
|
|
161
|
-
AtomicText: React.FC<AtomicTextProps>;
|
|
162
|
-
AtomicCard: React.FC<AtomicCardProps>;
|
|
163
|
-
AtomicInput: React.FC<AtomicInputProps>;
|
|
164
|
-
AtomicIcon: React.FC<import("@umituz/react-native-icon").IconProps>;
|
|
165
|
-
AtomicImage: React.FC<AtomicImageProps>;
|
|
166
|
-
AtomicSwitch: React.FC<AtomicSwitchProps>;
|
|
167
|
-
AtomicBadge: React.FC<AtomicBadgeProps>;
|
|
168
|
-
AtomicFormError: React.FC<AtomicFormErrorProps>;
|
|
169
|
-
AtomicAvatar: React.FC<AtomicAvatarProps>;
|
|
170
|
-
AtomicChip: React.FC<AtomicChipProps>;
|
|
171
|
-
AtomicDivider: React.FC<AtomicDividerProps>;
|
|
172
|
-
AtomicProgress: React.FC<AtomicProgressProps>;
|
|
173
|
-
AtomicAvatarGroup: React.FC<AtomicAvatarGroupProps>;
|
|
174
|
-
AtomicFab: React.FC<AtomicFabProps>;
|
|
175
|
-
AtomicFilter: React.FC<AtomicFilterProps>;
|
|
176
|
-
AtomicTouchable: React.FC<AtomicTouchableProps>;
|
|
177
|
-
AtomicUtils: {
|
|
178
|
-
/**
|
|
179
|
-
* Get recommended component combinations for common UI patterns
|
|
180
|
-
*/
|
|
181
|
-
getRecommendedCombinations: () => {
|
|
182
|
-
cardWithHeader: {
|
|
183
|
-
card: {
|
|
184
|
-
variant: "elevated";
|
|
185
|
-
padding: "lg";
|
|
186
|
-
};
|
|
187
|
-
title: {
|
|
188
|
-
variant: "titleLarge";
|
|
189
|
-
color: "primary";
|
|
190
|
-
};
|
|
191
|
-
description: {
|
|
192
|
-
variant: "bodyMedium";
|
|
193
|
-
color: "secondary";
|
|
194
|
-
};
|
|
195
|
-
};
|
|
196
|
-
formField: {
|
|
197
|
-
input: {
|
|
198
|
-
variant: "outlined";
|
|
199
|
-
size: "md";
|
|
200
|
-
};
|
|
201
|
-
label: {
|
|
202
|
-
variant: "labelMedium";
|
|
203
|
-
color: "primary";
|
|
204
|
-
};
|
|
205
|
-
helper: {
|
|
206
|
-
variant: "bodySmall";
|
|
207
|
-
color: "secondary";
|
|
208
|
-
};
|
|
209
|
-
};
|
|
210
|
-
primaryAction: {
|
|
211
|
-
button: {
|
|
212
|
-
variant: "primary";
|
|
213
|
-
size: "lg";
|
|
214
|
-
};
|
|
215
|
-
text: {
|
|
216
|
-
variant: "labelLarge";
|
|
217
|
-
color: "onPrimary";
|
|
218
|
-
};
|
|
219
|
-
icon: {
|
|
220
|
-
size: "md";
|
|
221
|
-
color: "onPrimary";
|
|
222
|
-
};
|
|
223
|
-
};
|
|
224
|
-
secondaryAction: {
|
|
225
|
-
button: {
|
|
226
|
-
variant: "outline";
|
|
227
|
-
size: "md";
|
|
228
|
-
};
|
|
229
|
-
text: {
|
|
230
|
-
variant: "labelMedium";
|
|
231
|
-
color: "primary";
|
|
232
|
-
};
|
|
233
|
-
icon: {
|
|
234
|
-
size: "sm";
|
|
235
|
-
color: "primary";
|
|
236
|
-
};
|
|
237
|
-
};
|
|
238
|
-
};
|
|
239
|
-
/**
|
|
240
|
-
* Validate component prop combinations
|
|
241
|
-
*/
|
|
242
|
-
validatePropCombination: (componentType: keyof AtomicVariants, props: any) => boolean;
|
|
243
|
-
/**
|
|
244
|
-
* Get accessibility guidelines for component combinations
|
|
245
|
-
*/
|
|
246
|
-
getAccessibilityGuidelines: () => {
|
|
247
|
-
button: {
|
|
248
|
-
minimumTouchTarget: number;
|
|
249
|
-
requiresAccessibilityLabel: boolean;
|
|
250
|
-
supportsAccessibilityHint: boolean;
|
|
251
|
-
};
|
|
252
|
-
input: {
|
|
253
|
-
requiresLabel: boolean;
|
|
254
|
-
supportsHelperText: boolean;
|
|
255
|
-
requiresAccessibilityLabel: boolean;
|
|
256
|
-
};
|
|
257
|
-
card: {
|
|
258
|
-
supportsAccessibilityRole: boolean;
|
|
259
|
-
canBeAccessibilityContainer: boolean;
|
|
260
|
-
};
|
|
261
|
-
text: {
|
|
262
|
-
supportsAccessibilityLabel: boolean;
|
|
263
|
-
respectsSystemTextSize: boolean;
|
|
264
|
-
};
|
|
265
|
-
icon: {
|
|
266
|
-
requiresAccessibilityLabel: boolean;
|
|
267
|
-
supportsAccessibilityHint: boolean;
|
|
268
|
-
};
|
|
269
|
-
};
|
|
270
|
-
};
|
|
271
|
-
};
|
|
272
|
-
export default defaultExport;
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { ViewStyle, TextStyle } from 'react-native';
|
|
2
|
-
import { type DesignTokens } from '@umituz/react-native-theme';
|
|
3
|
-
/**
|
|
4
|
-
* Picker container styles with iOS HIG compliance
|
|
5
|
-
*
|
|
6
|
-
* All picker sizes meet Apple's minimum touch target requirement of 44pt.
|
|
7
|
-
* @see https://developer.apple.com/design/human-interface-guidelines/layout
|
|
8
|
-
*/
|
|
9
|
-
export declare const getPickerContainerStyles: (tokens: DesignTokens) => {
|
|
10
|
-
base: {
|
|
11
|
-
flexDirection: "row";
|
|
12
|
-
alignItems: "center";
|
|
13
|
-
justifyContent: "space-between";
|
|
14
|
-
borderWidth: number;
|
|
15
|
-
borderColor: string;
|
|
16
|
-
backgroundColor: string;
|
|
17
|
-
};
|
|
18
|
-
size: {
|
|
19
|
-
sm: {
|
|
20
|
-
height: 44;
|
|
21
|
-
paddingHorizontal: number;
|
|
22
|
-
borderRadius: number;
|
|
23
|
-
};
|
|
24
|
-
md: {
|
|
25
|
-
height: number;
|
|
26
|
-
paddingHorizontal: number;
|
|
27
|
-
borderRadius: number;
|
|
28
|
-
};
|
|
29
|
-
lg: {
|
|
30
|
-
height: number;
|
|
31
|
-
paddingHorizontal: number;
|
|
32
|
-
borderRadius: number;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
state: {
|
|
36
|
-
error: {
|
|
37
|
-
borderColor: string;
|
|
38
|
-
borderWidth: number;
|
|
39
|
-
};
|
|
40
|
-
disabled: {
|
|
41
|
-
backgroundColor: string;
|
|
42
|
-
opacity: number;
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
export declare const getPickerLabelStyles: (tokens: DesignTokens) => {
|
|
47
|
-
base: TextStyle;
|
|
48
|
-
size: {
|
|
49
|
-
sm: TextStyle;
|
|
50
|
-
md: TextStyle;
|
|
51
|
-
lg: TextStyle;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
export declare const getPickerPlaceholderStyles: (tokens: DesignTokens) => {
|
|
55
|
-
base: TextStyle;
|
|
56
|
-
size: {
|
|
57
|
-
sm: TextStyle;
|
|
58
|
-
md: TextStyle;
|
|
59
|
-
lg: TextStyle;
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
export declare const getPickerValueStyles: (tokens: DesignTokens) => {
|
|
63
|
-
base: TextStyle;
|
|
64
|
-
size: {
|
|
65
|
-
sm: TextStyle;
|
|
66
|
-
md: TextStyle;
|
|
67
|
-
lg: TextStyle;
|
|
68
|
-
};
|
|
69
|
-
};
|
|
70
|
-
export declare const getPickerErrorStyles: (tokens: DesignTokens) => TextStyle;
|
|
71
|
-
export declare const getModalOverlayStyles: (tokens: DesignTokens) => ViewStyle;
|
|
72
|
-
export declare const getModalContainerStyles: (tokens: DesignTokens, maxHeight: number) => ViewStyle;
|
|
73
|
-
export declare const getModalHeaderStyles: (tokens: DesignTokens) => ViewStyle;
|
|
74
|
-
export declare const getModalTitleStyles: (tokens: DesignTokens) => TextStyle;
|
|
75
|
-
export declare const getSearchContainerStyles: (tokens: DesignTokens) => ViewStyle;
|
|
76
|
-
export declare const getSearchInputStyles: (tokens: DesignTokens) => TextStyle;
|
|
77
|
-
export declare const getOptionContainerStyles: (tokens: DesignTokens, isSelected: boolean, isDisabled: boolean) => ViewStyle;
|
|
78
|
-
export declare const getOptionTextStyles: (tokens: DesignTokens, isSelected: boolean) => TextStyle;
|
|
79
|
-
export declare const getOptionDescriptionStyles: (tokens: DesignTokens) => TextStyle;
|
|
80
|
-
export declare const getEmptyStateStyles: (tokens: DesignTokens) => ViewStyle;
|
|
81
|
-
export declare const getEmptyStateTextStyles: (tokens: DesignTokens) => TextStyle;
|
|
82
|
-
export declare const getChipContainerStyles: (tokens: DesignTokens) => ViewStyle;
|
|
83
|
-
export declare const getChipStyles: (tokens: DesignTokens) => ViewStyle;
|
|
84
|
-
export declare const getChipTextStyles: (tokens: DesignTokens) => TextStyle;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { ViewStyle, TextStyle } from 'react-native';
|
|
2
|
-
import { AtomicIconColor } from '../../AtomicIcon';
|
|
3
|
-
/**
|
|
4
|
-
* Picker option item
|
|
5
|
-
*
|
|
6
|
-
* icon: Any MaterialIcons name
|
|
7
|
-
* @see https://fonts.google.com/icons
|
|
8
|
-
*/
|
|
9
|
-
export interface PickerOption {
|
|
10
|
-
label: string;
|
|
11
|
-
value: string;
|
|
12
|
-
icon?: string;
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
description?: string;
|
|
15
|
-
testID?: string;
|
|
16
|
-
}
|
|
17
|
-
export type PickerSize = 'sm' | 'md' | 'lg';
|
|
18
|
-
export interface AtomicPickerProps {
|
|
19
|
-
value: string | string[];
|
|
20
|
-
onChange: (value: string | string[]) => void;
|
|
21
|
-
options: PickerOption[];
|
|
22
|
-
label?: string;
|
|
23
|
-
placeholder?: string;
|
|
24
|
-
error?: string;
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
multiple?: boolean;
|
|
27
|
-
searchable?: boolean;
|
|
28
|
-
clearable?: boolean;
|
|
29
|
-
autoClose?: boolean;
|
|
30
|
-
color?: AtomicIconColor;
|
|
31
|
-
size?: PickerSize;
|
|
32
|
-
modalTitle?: string;
|
|
33
|
-
emptyMessage?: string;
|
|
34
|
-
style?: ViewStyle | ViewStyle[];
|
|
35
|
-
labelStyle?: TextStyle | TextStyle[];
|
|
36
|
-
testID?: string;
|
|
37
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { ViewStyle } from 'react-native';
|
|
2
|
-
import { FeedbackStrength } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* Get opacity value based on feedback strength
|
|
5
|
-
*/
|
|
6
|
-
export declare const getOpacityValue: (strength: FeedbackStrength) => number;
|
|
7
|
-
/**
|
|
8
|
-
* Get base touchable container style
|
|
9
|
-
* Ensures minimum touch target size (iOS HIG: 48x48)
|
|
10
|
-
*/
|
|
11
|
-
export declare const getTouchableContainerStyle: () => ViewStyle;
|
|
12
|
-
/**
|
|
13
|
-
* Get disabled touchable style
|
|
14
|
-
*/
|
|
15
|
-
export declare const getDisabledStyle: () => ViewStyle;
|
|
16
|
-
/**
|
|
17
|
-
* Convert number to HitSlop object
|
|
18
|
-
* If hitSlop is a number, apply it to all sides
|
|
19
|
-
*/
|
|
20
|
-
export declare const normalizeHitSlop: (hitSlop: number | {
|
|
21
|
-
top?: number;
|
|
22
|
-
bottom?: number;
|
|
23
|
-
left?: number;
|
|
24
|
-
right?: number;
|
|
25
|
-
} | undefined) => {
|
|
26
|
-
top: number;
|
|
27
|
-
bottom: number;
|
|
28
|
-
left: number;
|
|
29
|
-
right: number;
|
|
30
|
-
} | undefined;
|