@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,80 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicProgress - Universal Progress Bar Component
|
|
3
|
-
*
|
|
4
|
-
* Displays progress bars for completion tracking
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: Progress indication and completion tracking
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - File upload progress
|
|
12
|
-
* - Task completion progress
|
|
13
|
-
* - Achievement progress
|
|
14
|
-
* - Form completion
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { View, StyleSheet, Text } from 'react-native';
|
|
18
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
19
|
-
// =============================================================================
|
|
20
|
-
// COMPONENT IMPLEMENTATION
|
|
21
|
-
// =============================================================================
|
|
22
|
-
export const AtomicProgress = ({ value, height = 8, width = '100%', color, backgroundColor, shape = 'rounded', showPercentage = false, showValue = false, textColor, style, testID, }) => {
|
|
23
|
-
const tokens = useAppDesignTokens();
|
|
24
|
-
// Clamp value between 0 and 100
|
|
25
|
-
const clampedValue = Math.max(0, Math.min(100, value));
|
|
26
|
-
// Default colors
|
|
27
|
-
const progressColor = color || tokens.colors.primary;
|
|
28
|
-
const progressBackground = backgroundColor || tokens.colors.surfaceVariant;
|
|
29
|
-
const progressTextColor = textColor || tokens.colors.textPrimary;
|
|
30
|
-
// Calculate progress width
|
|
31
|
-
const progressWidth = `${clampedValue}%`;
|
|
32
|
-
// Border radius based on shape
|
|
33
|
-
const borderRadius = shape === 'rounded' ? height / 2 : 0;
|
|
34
|
-
const containerStyle = {
|
|
35
|
-
width: width,
|
|
36
|
-
height,
|
|
37
|
-
backgroundColor: progressBackground,
|
|
38
|
-
borderRadius,
|
|
39
|
-
overflow: 'hidden',
|
|
40
|
-
};
|
|
41
|
-
const progressStyle = {
|
|
42
|
-
width: progressWidth,
|
|
43
|
-
height: '100%',
|
|
44
|
-
backgroundColor: progressColor,
|
|
45
|
-
borderRadius,
|
|
46
|
-
};
|
|
47
|
-
const textStyle = {
|
|
48
|
-
fontSize: tokens.typography.bodySmall.fontSize,
|
|
49
|
-
fontWeight: tokens.typography.labelMedium.fontWeight,
|
|
50
|
-
color: progressTextColor,
|
|
51
|
-
textAlign: 'center',
|
|
52
|
-
};
|
|
53
|
-
return (<View style={[containerStyle, style]} testID={testID}>
|
|
54
|
-
<View style={progressStyle}/>
|
|
55
|
-
{(showPercentage || showValue) && (<View style={styles.textContainer}>
|
|
56
|
-
<Text style={textStyle}>
|
|
57
|
-
{showPercentage ? `${Math.round(clampedValue)}%` : `${Math.round(clampedValue)}`}
|
|
58
|
-
</Text>
|
|
59
|
-
</View>)}
|
|
60
|
-
</View>);
|
|
61
|
-
};
|
|
62
|
-
// =============================================================================
|
|
63
|
-
// STYLES
|
|
64
|
-
// =============================================================================
|
|
65
|
-
const styles = StyleSheet.create({
|
|
66
|
-
textContainer: {
|
|
67
|
-
position: 'absolute',
|
|
68
|
-
top: 0,
|
|
69
|
-
left: 0,
|
|
70
|
-
right: 0,
|
|
71
|
-
bottom: 0,
|
|
72
|
-
justifyContent: 'center',
|
|
73
|
-
alignItems: 'center',
|
|
74
|
-
},
|
|
75
|
-
});
|
|
76
|
-
// =============================================================================
|
|
77
|
-
// EXPORTS
|
|
78
|
-
// =============================================================================
|
|
79
|
-
export default AtomicProgress;
|
|
80
|
-
//# sourceMappingURL=AtomicProgress.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicProgress.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicProgress.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
3
|
-
export interface AtomicSearchBarProps {
|
|
4
|
-
value: string;
|
|
5
|
-
onChangeText: (text: string) => void;
|
|
6
|
-
placeholder?: string;
|
|
7
|
-
autoFocus?: boolean;
|
|
8
|
-
editable?: boolean;
|
|
9
|
-
onClear?: () => void;
|
|
10
|
-
onFocus?: () => void;
|
|
11
|
-
onBlur?: () => void;
|
|
12
|
-
onSubmitEditing?: () => void;
|
|
13
|
-
style?: StyleProp<ViewStyle>;
|
|
14
|
-
inputStyle?: StyleProp<TextStyle>;
|
|
15
|
-
accessibilityLabel?: string;
|
|
16
|
-
accessibilityHint?: string;
|
|
17
|
-
}
|
|
18
|
-
export declare const AtomicSearchBar: React.FC<AtomicSearchBarProps>;
|
|
19
|
-
//# sourceMappingURL=AtomicSearchBar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicSearchBar.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2F1D,CAAC"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View, TextInput, TouchableOpacity } from 'react-native';
|
|
3
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
4
|
-
import { AtomicIcon } from './AtomicIcon';
|
|
5
|
-
export const AtomicSearchBar = ({ value, onChangeText, placeholder = 'Search...', autoFocus = false, editable = true, onClear, onFocus, onBlur, onSubmitEditing, style, inputStyle, accessibilityLabel = 'Search input', accessibilityHint, }) => {
|
|
6
|
-
const tokens = useAppDesignTokens();
|
|
7
|
-
const handleClear = () => {
|
|
8
|
-
onChangeText('');
|
|
9
|
-
onClear?.();
|
|
10
|
-
};
|
|
11
|
-
return (<View style={[
|
|
12
|
-
{
|
|
13
|
-
flexDirection: 'row',
|
|
14
|
-
alignItems: 'center',
|
|
15
|
-
backgroundColor: tokens.colors.surfaceSecondary,
|
|
16
|
-
borderRadius: tokens.borders.radius.lg,
|
|
17
|
-
borderWidth: 1,
|
|
18
|
-
borderColor: tokens.colors.border,
|
|
19
|
-
paddingHorizontal: tokens.spacing.md,
|
|
20
|
-
paddingVertical: tokens.spacing.sm,
|
|
21
|
-
gap: tokens.spacing.sm,
|
|
22
|
-
minHeight: 48,
|
|
23
|
-
},
|
|
24
|
-
style,
|
|
25
|
-
]} accessibilityRole="search">
|
|
26
|
-
<AtomicIcon name="Search" size="sm" color="secondary"/>
|
|
27
|
-
|
|
28
|
-
<TextInput value={value} onChangeText={onChangeText} placeholder={placeholder} placeholderTextColor={tokens.colors.textSecondary} autoFocus={autoFocus} editable={editable} onFocus={onFocus} onBlur={onBlur} onSubmitEditing={onSubmitEditing} style={[
|
|
29
|
-
{
|
|
30
|
-
flex: 1,
|
|
31
|
-
...tokens.typography.bodyMedium,
|
|
32
|
-
color: tokens.colors.textPrimary,
|
|
33
|
-
padding: 0,
|
|
34
|
-
margin: 0,
|
|
35
|
-
},
|
|
36
|
-
inputStyle,
|
|
37
|
-
]} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} returnKeyType="search" underlineColorAndroid="transparent"/>
|
|
38
|
-
|
|
39
|
-
{value.length > 0 && (<TouchableOpacity onPress={handleClear} style={{
|
|
40
|
-
padding: tokens.spacing.xs,
|
|
41
|
-
}} accessibilityLabel="Clear search" accessibilityRole="button">
|
|
42
|
-
<AtomicIcon name="X" size="sm" color="secondary"/>
|
|
43
|
-
</TouchableOpacity>)}
|
|
44
|
-
</View>);
|
|
45
|
-
};
|
|
46
|
-
//# sourceMappingURL=AtomicSearchBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicSearchBar.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSearchBar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
-
/**
|
|
4
|
-
* Sort option interface
|
|
5
|
-
*/
|
|
6
|
-
export interface SortOption {
|
|
7
|
-
id: string;
|
|
8
|
-
label: string;
|
|
9
|
-
icon?: string;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Sort direction type
|
|
13
|
-
*/
|
|
14
|
-
export type SortDirection = 'asc' | 'desc';
|
|
15
|
-
/**
|
|
16
|
-
* AtomicSort component props
|
|
17
|
-
*/
|
|
18
|
-
export interface AtomicSortProps {
|
|
19
|
-
options: SortOption[];
|
|
20
|
-
selectedId: string | null;
|
|
21
|
-
sortDirection: SortDirection;
|
|
22
|
-
onSortChange: (optionId: string, direction: SortDirection) => void;
|
|
23
|
-
showDirectionToggle?: boolean;
|
|
24
|
-
variant?: 'outlined' | 'filled' | 'soft';
|
|
25
|
-
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
26
|
-
size?: 'sm' | 'md' | 'lg';
|
|
27
|
-
style?: StyleProp<ViewStyle>;
|
|
28
|
-
testID?: string;
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* AtomicSort - Horizontal Sort Chip Component
|
|
32
|
-
*
|
|
33
|
-
* A Material Design 3 compliant sort component using chip selection.
|
|
34
|
-
* Supports single selection with ascending/descending direction toggle.
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* ```tsx
|
|
38
|
-
* const [sortBy, setSortBy] = useState<string | null>('name');
|
|
39
|
-
* const [sortDir, setSortDir] = useState<SortDirection>('asc');
|
|
40
|
-
*
|
|
41
|
-
* <AtomicSort
|
|
42
|
-
* options={[
|
|
43
|
-
* { id: 'name', label: 'Name', icon: 'sort-alpha' },
|
|
44
|
-
* { id: 'date', label: 'Date', icon: 'schedule' },
|
|
45
|
-
* { id: 'priority', label: 'Priority', icon: 'flag' },
|
|
46
|
-
* ]}
|
|
47
|
-
* selectedId={sortBy}
|
|
48
|
-
* sortDirection={sortDir}
|
|
49
|
-
* onSortChange={(id, dir) => {
|
|
50
|
-
* setSortBy(id);
|
|
51
|
-
* setSortDir(dir);
|
|
52
|
-
* }}
|
|
53
|
-
* showDirectionToggle={true}
|
|
54
|
-
* />
|
|
55
|
-
* ```
|
|
56
|
-
*
|
|
57
|
-
* Features:
|
|
58
|
-
* - Horizontal scrollable sort chips
|
|
59
|
-
* - Single selection (one active sort at a time)
|
|
60
|
-
* - Direction toggle (click active chip to switch asc/desc)
|
|
61
|
-
* - Visual arrow indicators (↑ asc, ↓ desc)
|
|
62
|
-
* - Theme-aware colors from design tokens
|
|
63
|
-
* - Icon support per sort option
|
|
64
|
-
* - Fully controlled component
|
|
65
|
-
*
|
|
66
|
-
* Behavior:
|
|
67
|
-
* - Click inactive chip → Selects it with ascending direction
|
|
68
|
-
* - Click active chip → Toggles direction (asc ↔ desc)
|
|
69
|
-
* - Visual feedback via filled variant for active sort
|
|
70
|
-
*/
|
|
71
|
-
export declare const AtomicSort: React.FC<AtomicSortProps>;
|
|
72
|
-
//# sourceMappingURL=AtomicSort.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicSort.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSort.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IACnE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC3E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmEhD,CAAC"}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ScrollView, View } from 'react-native';
|
|
3
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
4
|
-
import { AtomicChip } from './AtomicChip';
|
|
5
|
-
/**
|
|
6
|
-
* AtomicSort - Horizontal Sort Chip Component
|
|
7
|
-
*
|
|
8
|
-
* A Material Design 3 compliant sort component using chip selection.
|
|
9
|
-
* Supports single selection with ascending/descending direction toggle.
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* ```tsx
|
|
13
|
-
* const [sortBy, setSortBy] = useState<string | null>('name');
|
|
14
|
-
* const [sortDir, setSortDir] = useState<SortDirection>('asc');
|
|
15
|
-
*
|
|
16
|
-
* <AtomicSort
|
|
17
|
-
* options={[
|
|
18
|
-
* { id: 'name', label: 'Name', icon: 'sort-alpha' },
|
|
19
|
-
* { id: 'date', label: 'Date', icon: 'schedule' },
|
|
20
|
-
* { id: 'priority', label: 'Priority', icon: 'flag' },
|
|
21
|
-
* ]}
|
|
22
|
-
* selectedId={sortBy}
|
|
23
|
-
* sortDirection={sortDir}
|
|
24
|
-
* onSortChange={(id, dir) => {
|
|
25
|
-
* setSortBy(id);
|
|
26
|
-
* setSortDir(dir);
|
|
27
|
-
* }}
|
|
28
|
-
* showDirectionToggle={true}
|
|
29
|
-
* />
|
|
30
|
-
* ```
|
|
31
|
-
*
|
|
32
|
-
* Features:
|
|
33
|
-
* - Horizontal scrollable sort chips
|
|
34
|
-
* - Single selection (one active sort at a time)
|
|
35
|
-
* - Direction toggle (click active chip to switch asc/desc)
|
|
36
|
-
* - Visual arrow indicators (↑ asc, ↓ desc)
|
|
37
|
-
* - Theme-aware colors from design tokens
|
|
38
|
-
* - Icon support per sort option
|
|
39
|
-
* - Fully controlled component
|
|
40
|
-
*
|
|
41
|
-
* Behavior:
|
|
42
|
-
* - Click inactive chip → Selects it with ascending direction
|
|
43
|
-
* - Click active chip → Toggles direction (asc ↔ desc)
|
|
44
|
-
* - Visual feedback via filled variant for active sort
|
|
45
|
-
*/
|
|
46
|
-
export const AtomicSort = ({ options, selectedId, sortDirection, onSortChange, showDirectionToggle = true, variant = 'outlined', color = 'primary', size = 'md', style, testID, }) => {
|
|
47
|
-
const tokens = useAppDesignTokens();
|
|
48
|
-
/**
|
|
49
|
-
* Handle sort chip press
|
|
50
|
-
* - If clicking active chip: Toggle direction
|
|
51
|
-
* - If clicking inactive chip: Select it with 'asc' direction
|
|
52
|
-
*/
|
|
53
|
-
const handleSortPress = (optionId) => {
|
|
54
|
-
if (selectedId === optionId) {
|
|
55
|
-
const newDirection = sortDirection === 'asc' ? 'desc' : 'asc';
|
|
56
|
-
onSortChange(optionId, newDirection);
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
onSortChange(optionId, 'asc');
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
const directionIcon = sortDirection === 'asc' ? 'arrow-upward' : 'arrow-downward';
|
|
63
|
-
return (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
|
|
64
|
-
paddingHorizontal: tokens.spacing.sm,
|
|
65
|
-
gap: tokens.spacing.sm,
|
|
66
|
-
}} style={[style]} testID={testID}>
|
|
67
|
-
<View style={{ flexDirection: 'row', gap: tokens.spacing.sm }}>
|
|
68
|
-
{options.map((option) => {
|
|
69
|
-
const isSelected = selectedId === option.id;
|
|
70
|
-
return (<AtomicChip key={option.id} variant={isSelected ? 'filled' : variant} color={color} size={size} leadingIcon={option.icon} trailingIcon={isSelected && showDirectionToggle ? directionIcon : undefined} selected={isSelected} clickable={true} onPress={() => handleSortPress(option.id)} testID={`sort-chip-${option.id}`}>
|
|
71
|
-
{option.label}
|
|
72
|
-
</AtomicChip>);
|
|
73
|
-
})}
|
|
74
|
-
</View>
|
|
75
|
-
</ScrollView>);
|
|
76
|
-
};
|
|
77
|
-
//# sourceMappingURL=AtomicSort.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicSort.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSort.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,OAAO,EACP,UAAU,EACV,aAAa,EACb,YAAY,EACZ,mBAAmB,GAAG,IAAI,EAC1B,OAAO,GAAG,UAAU,EACpB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC;;;;OAIG;IACH,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC3C,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,YAAY,GAAG,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9D,YAAY,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAElF,OAAO,CACL,CAAC,UAAU,CACT,UAAU,CACV,8BAA8B,CAAC,CAAC,KAAK,CAAC,CACtC,qBAAqB,CAAC,CAAC;YACrB,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;YACpC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;SACvB,CAAC,CACF,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAC5D;QAAA,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,UAAU,GAAG,UAAU,KAAK,MAAM,CAAC,EAAE,CAAC;YAE5C,OAAO,CACL,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CACf,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CACzC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,WAAW,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACzB,YAAY,CAAC,CACX,UAAU,IAAI,mBAAmB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SACtD,CAAC,CACD,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,IAAI,CAAC,CAChB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAC1C,MAAM,CAAC,CAAC,aAAa,MAAM,CAAC,EAAE,EAAE,CAAC,CAEjC;cAAA,CAAC,MAAM,CAAC,KAAK,CACf;YAAA,EAAE,UAAU,CAAC,CACd,CAAC;QACJ,CAAC,CAAC,CACJ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicSwitch - Universal Switch Component
|
|
3
|
-
*
|
|
4
|
-
* Provides consistent switch/toggle functionality with theme integration
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: Basic switch/toggle input
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Settings toggles
|
|
12
|
-
* - Feature enable/disable
|
|
13
|
-
* - Boolean preferences
|
|
14
|
-
* - Form inputs
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { SwitchProps, ViewStyle } from 'react-native';
|
|
18
|
-
export interface AtomicSwitchProps extends Omit<SwitchProps, 'style'> {
|
|
19
|
-
/** Switch value */
|
|
20
|
-
value: boolean;
|
|
21
|
-
/** Value change handler */
|
|
22
|
-
onValueChange: (value: boolean) => void;
|
|
23
|
-
/** Size variant */
|
|
24
|
-
size?: 'sm' | 'md' | 'lg';
|
|
25
|
-
/** Color variant */
|
|
26
|
-
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
|
|
27
|
-
/** Disabled state */
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
/** Container style override */
|
|
30
|
-
style?: ViewStyle;
|
|
31
|
-
/** Track color override */
|
|
32
|
-
trackColor?: {
|
|
33
|
-
false: string;
|
|
34
|
-
true: string;
|
|
35
|
-
};
|
|
36
|
-
/** Thumb color override */
|
|
37
|
-
thumbColor?: string;
|
|
38
|
-
/** iOS specific props */
|
|
39
|
-
ios_backgroundColor?: string;
|
|
40
|
-
}
|
|
41
|
-
export declare const AtomicSwitch: React.FC<AtomicSwitchProps>;
|
|
42
|
-
export default AtomicSwitch;
|
|
43
|
-
//# sourceMappingURL=AtomicSwitch.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicSwitch.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSwitch.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AAO1E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IACnE,mBAAmB;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACpE,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAgBD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4CpD,CAAC;AA8DF,eAAe,YAAY,CAAC"}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicSwitch - Universal Switch Component
|
|
3
|
-
*
|
|
4
|
-
* Provides consistent switch/toggle functionality with theme integration
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: Basic switch/toggle input
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Settings toggles
|
|
12
|
-
* - Feature enable/disable
|
|
13
|
-
* - Boolean preferences
|
|
14
|
-
* - Form inputs
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { Switch, StyleSheet } from 'react-native';
|
|
18
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
19
|
-
// =============================================================================
|
|
20
|
-
// SIZE CONFIGURATION
|
|
21
|
-
// =============================================================================
|
|
22
|
-
const SIZE_CONFIG = {
|
|
23
|
-
sm: { scaleX: 0.8, scaleY: 0.8 },
|
|
24
|
-
md: { scaleX: 1, scaleY: 1 },
|
|
25
|
-
lg: { scaleX: 1.2, scaleY: 1.2 },
|
|
26
|
-
};
|
|
27
|
-
// =============================================================================
|
|
28
|
-
// COMPONENT IMPLEMENTATION
|
|
29
|
-
// =============================================================================
|
|
30
|
-
export const AtomicSwitch = ({ value, onValueChange, size = 'md', variant = 'primary', disabled = false, style, trackColor, thumbColor, ios_backgroundColor, ...props }) => {
|
|
31
|
-
const tokens = useAppDesignTokens();
|
|
32
|
-
const styles = getStyles(tokens);
|
|
33
|
-
const sizeConfig = SIZE_CONFIG[size];
|
|
34
|
-
const colors = getVariantColors(tokens, variant);
|
|
35
|
-
const defaultTrackColor = trackColor || {
|
|
36
|
-
false: colors.trackFalse,
|
|
37
|
-
true: colors.trackTrue,
|
|
38
|
-
};
|
|
39
|
-
const defaultThumbColor = thumbColor || colors.thumb;
|
|
40
|
-
const defaultIosBackgroundColor = ios_backgroundColor || colors.trackFalse;
|
|
41
|
-
return (<Switch value={value} onValueChange={onValueChange} disabled={disabled} trackColor={defaultTrackColor} thumbColor={defaultThumbColor} ios_backgroundColor={defaultIosBackgroundColor} style={[
|
|
42
|
-
styles.switch,
|
|
43
|
-
{
|
|
44
|
-
transform: [{ scaleX: sizeConfig.scaleX }, { scaleY: sizeConfig.scaleY }],
|
|
45
|
-
},
|
|
46
|
-
style,
|
|
47
|
-
]} {...props}/>);
|
|
48
|
-
};
|
|
49
|
-
// =============================================================================
|
|
50
|
-
// HELPER FUNCTIONS
|
|
51
|
-
// =============================================================================
|
|
52
|
-
const getVariantColors = (tokens, variant) => {
|
|
53
|
-
switch (variant) {
|
|
54
|
-
case 'primary':
|
|
55
|
-
return {
|
|
56
|
-
trackFalse: tokens.colors.surfaceSecondary,
|
|
57
|
-
trackTrue: tokens.colors.primary,
|
|
58
|
-
thumb: tokens.colors.surface,
|
|
59
|
-
};
|
|
60
|
-
case 'secondary':
|
|
61
|
-
return {
|
|
62
|
-
trackFalse: tokens.colors.surfaceSecondary,
|
|
63
|
-
trackTrue: tokens.colors.secondary,
|
|
64
|
-
thumb: tokens.colors.surface,
|
|
65
|
-
};
|
|
66
|
-
case 'success':
|
|
67
|
-
return {
|
|
68
|
-
trackFalse: tokens.colors.surfaceSecondary,
|
|
69
|
-
trackTrue: tokens.colors.success,
|
|
70
|
-
thumb: tokens.colors.surface,
|
|
71
|
-
};
|
|
72
|
-
case 'warning':
|
|
73
|
-
return {
|
|
74
|
-
trackFalse: tokens.colors.surfaceSecondary,
|
|
75
|
-
trackTrue: tokens.colors.warning,
|
|
76
|
-
thumb: tokens.colors.surface,
|
|
77
|
-
};
|
|
78
|
-
case 'error':
|
|
79
|
-
return {
|
|
80
|
-
trackFalse: tokens.colors.surfaceSecondary,
|
|
81
|
-
trackTrue: tokens.colors.error,
|
|
82
|
-
thumb: tokens.colors.surface,
|
|
83
|
-
};
|
|
84
|
-
default:
|
|
85
|
-
return {
|
|
86
|
-
trackFalse: tokens.colors.surfaceSecondary,
|
|
87
|
-
trackTrue: tokens.colors.primary,
|
|
88
|
-
thumb: tokens.colors.surface,
|
|
89
|
-
};
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
// =============================================================================
|
|
93
|
-
// STYLES
|
|
94
|
-
// =============================================================================
|
|
95
|
-
const getStyles = (tokens) => StyleSheet.create({
|
|
96
|
-
switch: {
|
|
97
|
-
// Default switch styling is handled by platform
|
|
98
|
-
},
|
|
99
|
-
});
|
|
100
|
-
// =============================================================================
|
|
101
|
-
// EXPORTS
|
|
102
|
-
// =============================================================================
|
|
103
|
-
export default AtomicSwitch;
|
|
104
|
-
//# sourceMappingURL=AtomicSwitch.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicSwitch.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSwitch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { StyleProp, TextStyle } from 'react-native';
|
|
3
|
-
export type TextStyleVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'labelLarge' | 'labelMedium' | 'labelSmall';
|
|
4
|
-
export type ColorVariant = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'success' | 'error' | 'warning' | 'info';
|
|
5
|
-
export interface AtomicTextProps {
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
type?: TextStyleVariant;
|
|
8
|
-
color?: ColorVariant | string;
|
|
9
|
-
numberOfLines?: number;
|
|
10
|
-
style?: StyleProp<TextStyle>;
|
|
11
|
-
testID?: string;
|
|
12
|
-
}
|
|
13
|
-
export declare const AtomicText: React.FC<AtomicTextProps>;
|
|
14
|
-
//# sourceMappingURL=AtomicText.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicText.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GACxB,cAAc,GAAG,eAAe,GAAG,cAAc,GACjD,eAAe,GAAG,gBAAgB,GAAG,eAAe,GACpD,YAAY,GAAG,aAAa,GAAG,YAAY,GAC3C,WAAW,GAAG,YAAY,GAAG,WAAW,GACxC,YAAY,GAAG,aAAa,GAAG,YAAY,CAAC;AAEhD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkDhD,CAAC"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Text } from 'react-native';
|
|
3
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
4
|
-
export const AtomicText = ({ children, type = 'bodyMedium', color, numberOfLines, style, testID, }) => {
|
|
5
|
-
const tokens = useAppDesignTokens();
|
|
6
|
-
// Get typography style from tokens
|
|
7
|
-
const typographyStyle = tokens.typography[type];
|
|
8
|
-
// Get color from tokens or use custom color
|
|
9
|
-
const getTextColor = () => {
|
|
10
|
-
if (!color) {
|
|
11
|
-
return tokens.colors.textPrimary;
|
|
12
|
-
}
|
|
13
|
-
// Check if it's a semantic color name
|
|
14
|
-
const colorMap = {
|
|
15
|
-
primary: tokens.colors.textPrimary,
|
|
16
|
-
secondary: tokens.colors.textSecondary,
|
|
17
|
-
tertiary: tokens.colors.textTertiary,
|
|
18
|
-
disabled: tokens.colors.textDisabled,
|
|
19
|
-
inverse: tokens.colors.textInverse,
|
|
20
|
-
success: tokens.colors.success,
|
|
21
|
-
error: tokens.colors.error,
|
|
22
|
-
warning: tokens.colors.warning,
|
|
23
|
-
info: tokens.colors.info,
|
|
24
|
-
};
|
|
25
|
-
return colorMap[color] || color;
|
|
26
|
-
};
|
|
27
|
-
const textStyle = [
|
|
28
|
-
typographyStyle,
|
|
29
|
-
{ color: getTextColor() },
|
|
30
|
-
style,
|
|
31
|
-
];
|
|
32
|
-
return (<Text numberOfLines={numberOfLines} style={textStyle} testID={testID}>
|
|
33
|
-
{children}
|
|
34
|
-
</Text>);
|
|
35
|
-
};
|
|
36
|
-
//# sourceMappingURL=AtomicText.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicText.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAwB,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AA6BhE,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,IAAI,GAAG,YAAY,EACnB,KAAK,EACL,aAAa,EACb,KAAK,EACL,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,mCAAmC;IACnC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAEhD,4CAA4C;IAC5C,MAAM,YAAY,GAAG,GAAW,EAAE;QAChC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;QACnC,CAAC;QAED,sCAAsC;QACtC,MAAM,QAAQ,GAAiC;YAC7C,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW;YAClC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa;YACtC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY;YACpC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY;YACpC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW;YAClC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO;YAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK;YAC1B,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO;YAC9B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;SACzB,CAAC;QAEF,OAAO,QAAQ,CAAC,KAAqB,CAAC,IAAI,KAAK,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,SAAS,GAAyB;QACtC,eAAe;QACf,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE;QACzB,KAAK;KACN,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicTextArea Component
|
|
3
|
-
*
|
|
4
|
-
* A multiline text input component with pure React Native implementation
|
|
5
|
-
* for longer text entry with consistent styling.
|
|
6
|
-
*
|
|
7
|
-
* Features:
|
|
8
|
-
* - Pure React Native TextInput with multiline
|
|
9
|
-
* - Outlined/filled/flat variants
|
|
10
|
-
* - Error, success, disabled states
|
|
11
|
-
* - Character counter with max length
|
|
12
|
-
* - Helper text for guidance or errors
|
|
13
|
-
* - Configurable rows for height
|
|
14
|
-
* - Theme-aware styling
|
|
15
|
-
* - Full accessibility support
|
|
16
|
-
*
|
|
17
|
-
* Usage:
|
|
18
|
-
* ```tsx
|
|
19
|
-
* const [description, setDescription] = useState('');
|
|
20
|
-
*
|
|
21
|
-
* <AtomicTextArea
|
|
22
|
-
* value={description}
|
|
23
|
-
* onChangeText={setDescription}
|
|
24
|
-
* label="Description"
|
|
25
|
-
* placeholder="Enter description..."
|
|
26
|
-
* maxLength={500}
|
|
27
|
-
* showCharacterCount
|
|
28
|
-
* rows={6}
|
|
29
|
-
* helperText="Provide a detailed description"
|
|
30
|
-
* />
|
|
31
|
-
* ```
|
|
32
|
-
*/
|
|
33
|
-
import React from 'react';
|
|
34
|
-
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
35
|
-
export type AtomicTextAreaVariant = 'outlined' | 'filled' | 'flat';
|
|
36
|
-
export type AtomicTextAreaState = 'default' | 'error' | 'success' | 'disabled';
|
|
37
|
-
export type AtomicTextAreaSize = 'sm' | 'md' | 'lg';
|
|
38
|
-
export interface AtomicTextAreaProps {
|
|
39
|
-
/** Textarea label */
|
|
40
|
-
label?: string;
|
|
41
|
-
/** Current textarea value */
|
|
42
|
-
value?: string;
|
|
43
|
-
/** Value change callback */
|
|
44
|
-
onChangeText?: (text: string) => void;
|
|
45
|
-
/** Textarea variant (outlined, filled, flat) */
|
|
46
|
-
variant?: AtomicTextAreaVariant;
|
|
47
|
-
/** Textarea state (default, error, success, disabled) */
|
|
48
|
-
state?: AtomicTextAreaState;
|
|
49
|
-
/** Textarea size (sm, md, lg) */
|
|
50
|
-
size?: AtomicTextAreaSize;
|
|
51
|
-
/** Placeholder text */
|
|
52
|
-
placeholder?: string;
|
|
53
|
-
/** Helper text below textarea */
|
|
54
|
-
helperText?: string;
|
|
55
|
-
/** Maximum character length */
|
|
56
|
-
maxLength?: number;
|
|
57
|
-
/** Show character counter */
|
|
58
|
-
showCharacterCount?: boolean;
|
|
59
|
-
/** Number of visible text rows */
|
|
60
|
-
rows?: number;
|
|
61
|
-
/** Minimum height in pixels */
|
|
62
|
-
minHeight?: number;
|
|
63
|
-
/** Auto-capitalize */
|
|
64
|
-
autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
|
|
65
|
-
/** Auto-correct */
|
|
66
|
-
autoCorrect?: boolean;
|
|
67
|
-
/** Disabled state */
|
|
68
|
-
disabled?: boolean;
|
|
69
|
-
/** Container style */
|
|
70
|
-
style?: StyleProp<ViewStyle>;
|
|
71
|
-
/** Input text style */
|
|
72
|
-
inputStyle?: StyleProp<TextStyle>;
|
|
73
|
-
/** Test ID for E2E testing */
|
|
74
|
-
testID?: string;
|
|
75
|
-
/** Blur callback */
|
|
76
|
-
onBlur?: () => void;
|
|
77
|
-
/** Focus callback */
|
|
78
|
-
onFocus?: () => void;
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* AtomicTextArea - Pure React Native Multiline Text Input
|
|
82
|
-
*/
|
|
83
|
-
export declare const AtomicTextArea: React.FC<AtomicTextAreaProps>;
|
|
84
|
-
export type { AtomicTextAreaProps as TextAreaProps };
|
|
85
|
-
//# sourceMappingURL=AtomicTextArea.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicTextArea.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicTextArea.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAA+B,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI5F,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,mBAAmB;IAClC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,yDAAyD;IACzD,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,iCAAiC;IACjC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC;IAC/D,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,uBAAuB;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuMxD,CAAC;AAyBF,YAAY,EAAE,mBAAmB,IAAI,aAAa,EAAE,CAAC"}
|