@idealyst/components 1.0.99 → 1.1.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.
Files changed (106) hide show
  1. package/package.json +4 -4
  2. package/src/Accordion/Accordion.native.tsx +15 -0
  3. package/src/Accordion/Accordion.styles.tsx +17 -0
  4. package/src/Accordion/Accordion.web.tsx +15 -0
  5. package/src/Accordion/types.ts +2 -1
  6. package/src/Button/Button.native.tsx +55 -2
  7. package/src/Button/Button.styles.tsx +22 -0
  8. package/src/Button/Button.web.tsx +6 -2
  9. package/src/Button/types.ts +15 -0
  10. package/src/Card/Card.native.tsx +18 -5
  11. package/src/Card/Card.styles.tsx +123 -131
  12. package/src/Card/Card.web.tsx +17 -4
  13. package/src/Card/types.ts +3 -8
  14. package/src/Checkbox/Checkbox.native.tsx +7 -0
  15. package/src/Checkbox/Checkbox.styles.tsx +11 -0
  16. package/src/Checkbox/Checkbox.web.tsx +7 -0
  17. package/src/Checkbox/types.ts +2 -1
  18. package/src/Input/Input.native.tsx +7 -0
  19. package/src/Input/Input.styles.tsx +9 -0
  20. package/src/Input/Input.web.tsx +7 -0
  21. package/src/Input/types.ts +2 -1
  22. package/src/List/List.native.tsx +15 -0
  23. package/src/List/List.styles.tsx +17 -0
  24. package/src/List/List.web.tsx +15 -0
  25. package/src/List/types.ts +2 -1
  26. package/src/Pressable/Pressable.native.tsx +13 -1
  27. package/src/Pressable/Pressable.styles.tsx +24 -0
  28. package/src/Pressable/Pressable.web.tsx +24 -6
  29. package/src/Pressable/types.ts +3 -2
  30. package/src/RadioButton/RadioButton.native.tsx +7 -0
  31. package/src/RadioButton/RadioButton.styles.tsx +9 -0
  32. package/src/RadioButton/RadioButton.web.tsx +7 -0
  33. package/src/RadioButton/types.ts +2 -1
  34. package/src/Screen/Screen.native.tsx +25 -12
  35. package/src/Screen/Screen.styles.tsx +28 -16
  36. package/src/Screen/Screen.web.tsx +16 -3
  37. package/src/Screen/types.ts +4 -8
  38. package/src/Select/Select.native.tsx +7 -0
  39. package/src/Select/Select.styles.tsx +11 -0
  40. package/src/Select/Select.web.tsx +7 -0
  41. package/src/Select/types.ts +2 -1
  42. package/src/Slider/Slider.native.tsx +7 -0
  43. package/src/Slider/Slider.styles.tsx +11 -0
  44. package/src/Slider/Slider.web.tsx +7 -0
  45. package/src/Slider/types.ts +2 -1
  46. package/src/Switch/Switch.native.tsx +7 -0
  47. package/src/Switch/Switch.styles.tsx +11 -0
  48. package/src/Switch/Switch.web.tsx +7 -0
  49. package/src/Switch/types.ts +2 -1
  50. package/src/TabBar/TabBar.native.tsx +19 -1
  51. package/src/TabBar/TabBar.styles.tsx +17 -0
  52. package/src/TabBar/TabBar.web.tsx +20 -1
  53. package/src/TabBar/types.ts +2 -1
  54. package/src/Table/Table.native.tsx +15 -0
  55. package/src/Table/Table.styles.tsx +27 -0
  56. package/src/Table/Table.web.tsx +15 -0
  57. package/src/Table/types.ts +2 -1
  58. package/src/Text/Text.native.tsx +14 -3
  59. package/src/Text/Text.styles.tsx +36 -12
  60. package/src/Text/Text.web.tsx +15 -4
  61. package/src/Text/types.ts +15 -4
  62. package/src/TextArea/TextArea.native.tsx +7 -0
  63. package/src/TextArea/TextArea.styles.tsx +11 -0
  64. package/src/TextArea/TextArea.web.tsx +7 -0
  65. package/src/TextArea/types.ts +2 -1
  66. package/src/View/View.native.tsx +35 -12
  67. package/src/View/View.styles.tsx +78 -75
  68. package/src/View/View.web.tsx +18 -9
  69. package/src/View/types.ts +8 -23
  70. package/src/examples/AccordionExamples.tsx +32 -32
  71. package/src/examples/AlertExamples.tsx +42 -42
  72. package/src/examples/AvatarExamples.tsx +18 -18
  73. package/src/examples/BadgeExamples.tsx +30 -30
  74. package/src/examples/BreadcrumbExamples.tsx +64 -64
  75. package/src/examples/ButtonExamples.tsx +128 -16
  76. package/src/examples/CardExamples.tsx +28 -28
  77. package/src/examples/CheckboxExamples.tsx +25 -25
  78. package/src/examples/ChipExamples.tsx +17 -17
  79. package/src/examples/DialogExamples.tsx +17 -17
  80. package/src/examples/DividerExamples.tsx +21 -21
  81. package/src/examples/IconExamples.tsx +113 -113
  82. package/src/examples/ImageExamples.tsx +34 -34
  83. package/src/examples/InputExamples.tsx +20 -20
  84. package/src/examples/LinkExamples.tsx +23 -23
  85. package/src/examples/ListExamples.tsx +42 -42
  86. package/src/examples/MenuExamples.tsx +15 -15
  87. package/src/examples/PopoverExamples.tsx +23 -23
  88. package/src/examples/ProgressExamples.tsx +41 -41
  89. package/src/examples/RadioButtonExamples.tsx +21 -21
  90. package/src/examples/SVGImageExamples.tsx +25 -25
  91. package/src/examples/ScreenExamples.tsx +41 -41
  92. package/src/examples/SelectExamples.tsx +59 -59
  93. package/src/examples/SkeletonExamples.tsx +30 -30
  94. package/src/examples/SliderExamples.tsx +54 -54
  95. package/src/examples/SwitchExamples.tsx +20 -20
  96. package/src/examples/TabBarExamples.tsx +26 -26
  97. package/src/examples/TableExamples.tsx +36 -36
  98. package/src/examples/TextAreaExamples.tsx +25 -25
  99. package/src/examples/TextExamples.tsx +61 -66
  100. package/src/examples/ThemeExtensionExamples.tsx +12 -12
  101. package/src/examples/TooltipExamples.tsx +21 -21
  102. package/src/examples/VideoExamples.tsx +28 -28
  103. package/src/examples/ViewExamples.tsx +59 -59
  104. package/src/index.ts +4 -0
  105. package/src/utils/buildViewStyleVariants.ts +148 -0
  106. package/src/utils/viewStyleProps.ts +63 -0
package/src/examples/ScreenExamples.tsx CHANGED
@@ -4,51 +4,51 @@ import { Screen, View, Text } from '../index';
4
4
  export const ScreenExamples = () => {
5
5
  return (
6
6
  <Screen background="primary" padding="lg">
7
- <View spacing="lg">
8
- <Text size="lg" weight="bold" align="center">
7
+ <View gap="lg">
8
+ <Text typography="h4" align="center">
9
9
  Screen Examples
10
10
  </Text>
11
11
 
12
12
  {/* Background Examples */}
13
- <View spacing="md">
14
- <Text size="md" weight="semibold">Background Variants</Text>
15
- <Text size="sm" color="secondary">
13
+ <View gap="md">
14
+ <Text typography="subtitle1">Background Variants</Text>
15
+ <Text typography="caption" color="secondary">
16
16
  Each Screen should have a different background color
17
17
  </Text>
18
18
 
19
19
  <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
20
20
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
21
21
  <Screen background="primary" padding="sm">
22
- <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
23
- <Text size="sm" weight="bold">Primary</Text>
24
- <Text size="sm" color="secondary">Surface</Text>
22
+ <View gap="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
23
+ <Text typography="subtitle2">Primary</Text>
24
+ <Text typography="caption" color="secondary">Surface</Text>
25
25
  </View>
26
26
  </Screen>
27
27
  </View>
28
28
 
29
29
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
30
30
  <Screen background="secondary" padding="sm">
31
- <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
32
- <Text size="sm" weight="bold">Secondary</Text>
33
- <Text size="sm" color="secondary">Surface</Text>
31
+ <View gap="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
32
+ <Text typography="subtitle2">Secondary</Text>
33
+ <Text typography="caption" color="secondary">Surface</Text>
34
34
  </View>
35
35
  </Screen>
36
36
  </View>
37
37
 
38
38
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
39
39
  <Screen background="tertiary" padding="sm">
40
- <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
41
- <Text size="sm" weight="bold">Tertiary</Text>
42
- <Text size="sm" color="secondary">Surface</Text>
40
+ <View gap="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
41
+ <Text typography="subtitle2">Tertiary</Text>
42
+ <Text typography="caption" color="secondary">Surface</Text>
43
43
  </View>
44
44
  </Screen>
45
45
  </View>
46
46
 
47
47
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
48
48
  <Screen background="inverse" padding="sm">
49
- <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
50
- <Text size="sm" weight="bold" color="primary">Inverse</Text>
51
- <Text size="sm" color="secondary">Surface</Text>
49
+ <View gap="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
50
+ <Text typography="subtitle2" color="primary">Inverse</Text>
51
+ <Text typography="caption" color="secondary">Surface</Text>
52
52
  </View>
53
53
  </Screen>
54
54
  </View>
@@ -56,18 +56,18 @@ export const ScreenExamples = () => {
56
56
  </View>
57
57
 
58
58
  {/* Padding Examples */}
59
- <View spacing="md">
60
- <Text size="md" weight="semibold">Padding Variants</Text>
61
- <Text size="sm" color="secondary">
59
+ <View gap="md">
60
+ <Text typography="subtitle1">Padding Variants</Text>
61
+ <Text typography="caption" color="secondary">
62
62
  Different padding options for Screen content
63
63
  </Text>
64
64
 
65
65
  <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
66
66
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
67
- <Screen background="secondary" padding="none">
67
+ <Screen background="secondary">
68
68
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
69
- <Text size="sm" weight="bold">None</Text>
70
- <Text size="sm" color="secondary">No padding</Text>
69
+ <Text typography="subtitle2">None</Text>
70
+ <Text typography="caption" color="secondary">No padding</Text>
71
71
  </View>
72
72
  </Screen>
73
73
  </View>
@@ -75,8 +75,8 @@ export const ScreenExamples = () => {
75
75
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
76
76
  <Screen background="secondary" padding="sm">
77
77
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
78
- <Text size="sm" weight="bold">Small</Text>
79
- <Text size="sm" color="secondary">8px</Text>
78
+ <Text typography="subtitle2">Small</Text>
79
+ <Text typography="caption" color="secondary">8px</Text>
80
80
  </View>
81
81
  </Screen>
82
82
  </View>
@@ -84,8 +84,8 @@ export const ScreenExamples = () => {
84
84
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
85
85
  <Screen background="secondary" padding="md">
86
86
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
87
- <Text size="sm" weight="bold">Medium</Text>
88
- <Text size="sm" color="secondary">16px</Text>
87
+ <Text typography="subtitle2">Medium</Text>
88
+ <Text typography="caption" color="secondary">16px</Text>
89
89
  </View>
90
90
  </Screen>
91
91
  </View>
@@ -93,8 +93,8 @@ export const ScreenExamples = () => {
93
93
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
94
94
  <Screen background="secondary" padding="lg">
95
95
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
96
- <Text size="sm" weight="bold">Large</Text>
97
- <Text size="sm" color="secondary">24px</Text>
96
+ <Text typography="subtitle2">Large</Text>
97
+ <Text typography="caption" color="secondary">24px</Text>
98
98
  </View>
99
99
  </Screen>
100
100
  </View>
@@ -102,9 +102,9 @@ export const ScreenExamples = () => {
102
102
  </View>
103
103
 
104
104
  {/* Safe Area Examples */}
105
- <View spacing="md">
106
- <Text size="md" weight="semibold">Safe Area</Text>
107
- <Text size="sm" color="secondary">
105
+ <View gap="md">
106
+ <Text typography="subtitle1">Safe Area</Text>
107
+ <Text typography="caption" color="secondary">
108
108
  Safe area padding for mobile devices
109
109
  </Text>
110
110
 
@@ -112,8 +112,8 @@ export const ScreenExamples = () => {
112
112
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
113
113
  <Screen background="tertiary" padding="sm" safeArea={false}>
114
114
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
115
- <Text size="sm" weight="bold">No Safe Area</Text>
116
- <Text size="sm" color="secondary">Standard</Text>
115
+ <Text typography="subtitle2">No Safe Area</Text>
116
+ <Text typography="caption" color="secondary">Standard</Text>
117
117
  </View>
118
118
  </Screen>
119
119
  </View>
@@ -121,8 +121,8 @@ export const ScreenExamples = () => {
121
121
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
122
122
  <Screen background="tertiary" padding="sm" safeArea={true}>
123
123
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
124
- <Text size="sm" weight="bold">Safe Area</Text>
125
- <Text size="sm" color="secondary">Mobile</Text>
124
+ <Text typography="subtitle2">Safe Area</Text>
125
+ <Text typography="caption" color="secondary">Mobile</Text>
126
126
  </View>
127
127
  </Screen>
128
128
  </View>
@@ -130,18 +130,18 @@ export const ScreenExamples = () => {
130
130
  </View>
131
131
 
132
132
  {/* Usage Examples */}
133
- <View spacing="md">
134
- <Text size="md" weight="semibold">Common Usage</Text>
133
+ <View gap="md">
134
+ <Text typography="subtitle1">Common Usage</Text>
135
135
  <View style={{ height: 120, borderWidth: 1, borderColor: '#ccc' }}>
136
136
  <Screen background="primary" padding="lg">
137
137
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
138
- <Text size="lg" weight="bold" align="center">
138
+ <Text typography="h4" align="center">
139
139
  App Screen Layout
140
140
  </Text>
141
- <Text size="md" color="secondary" align="center">
141
+ <Text typography="body1" color="secondary" align="center">
142
142
  Primary background with large padding
143
143
  </Text>
144
- <Text size="sm" color="secondary" align="center">
144
+ <Text typography="caption" color="secondary" align="center">
145
145
  Perfect for main app screens
146
146
  </Text>
147
147
  </View>
package/src/examples/SelectExamples.tsx CHANGED
@@ -115,9 +115,9 @@ export const SelectExamples = () => {
115
115
 
116
116
  return (
117
117
  <Screen background="primary" padding="lg">
118
- <View spacing="lg">
118
+ <View gap="lg">
119
119
  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
120
- <Text size="lg" weight="bold">
120
+ <Text typography="h4">
121
121
  Select Component Examples
122
122
  </Text>
123
123
  <Button
@@ -132,15 +132,15 @@ export const SelectExamples = () => {
132
132
 
133
133
  {/* Basic Usage */}
134
134
  <Card type="outlined" padding="md">
135
- <View spacing="md">
136
- <Text size="md" weight="semibold">Basic Usage</Text>
135
+ <View gap="md">
136
+ <Text typography="subtitle1">Basic Usage</Text>
137
137
  <Select
138
138
  options={fruitOptions}
139
139
  value={basicSelect}
140
140
  onValueChange={setBasicSelect}
141
141
  placeholder="Choose a fruit"
142
142
  />
143
- <Text size="sm" color="secondary">
143
+ <Text typography="caption" color="secondary">
144
144
  Selected: {basicSelect || 'None'}
145
145
  </Text>
146
146
  </View>
@@ -148,8 +148,8 @@ export const SelectExamples = () => {
148
148
 
149
149
  {/* With Icons */}
150
150
  <Card type="outlined" padding="md">
151
- <View spacing="md">
152
- <Text size="md" weight="semibold">With Icons</Text>
151
+ <View gap="md">
152
+ <Text typography="subtitle1">With Icons</Text>
153
153
  <Select
154
154
  options={countryOptions}
155
155
  value={countrySelect}
@@ -157,7 +157,7 @@ export const SelectExamples = () => {
157
157
  placeholder="Select a country"
158
158
  label="Country"
159
159
  />
160
- <Text size="sm" color="secondary">
160
+ <Text typography="caption" color="secondary">
161
161
  Selected: {countrySelect || 'None'}
162
162
  </Text>
163
163
  </View>
@@ -165,8 +165,8 @@ export const SelectExamples = () => {
165
165
 
166
166
  {/* Custom Icons */}
167
167
  <Card type="outlined" padding="md">
168
- <View spacing="md">
169
- <Text size="md" weight="semibold">Custom Icon Components</Text>
168
+ <View gap="md">
169
+ <Text typography="subtitle1">Custom Icon Components</Text>
170
170
  <Select
171
171
  options={priorityOptions}
172
172
  value={prioritySelect}
@@ -174,7 +174,7 @@ export const SelectExamples = () => {
174
174
  placeholder="Select priority"
175
175
  label="Task Priority"
176
176
  />
177
- <Text size="sm" color="secondary">
177
+ <Text typography="caption" color="secondary">
178
178
  Selected: {prioritySelect || 'None'}
179
179
  </Text>
180
180
  </View>
@@ -182,8 +182,8 @@ export const SelectExamples = () => {
182
182
 
183
183
  {/* Disabled Options */}
184
184
  <Card type="outlined" padding="md">
185
- <View spacing="md">
186
- <Text size="md" weight="semibold">Disabled Options</Text>
185
+ <View gap="md">
186
+ <Text typography="subtitle1">Disabled Options</Text>
187
187
  <Select
188
188
  options={statusOptions}
189
189
  value={statusSelect}
@@ -192,7 +192,7 @@ export const SelectExamples = () => {
192
192
  label="Document Status"
193
193
  helperText="Some options are disabled"
194
194
  />
195
- <Text size="sm" color="secondary">
195
+ <Text typography="caption" color="secondary">
196
196
  Selected: {statusSelect || 'None'}
197
197
  </Text>
198
198
  </View>
@@ -200,8 +200,8 @@ export const SelectExamples = () => {
200
200
 
201
201
  {/* Searchable */}
202
202
  <Card type="outlined" padding="md">
203
- <View spacing="md">
204
- <Text size="md" weight="semibold">Searchable Select</Text>
203
+ <View gap="md">
204
+ <Text typography="subtitle1">Searchable Select</Text>
205
205
  <Select
206
206
  options={fruitOptions}
207
207
  value={searchableSelect}
@@ -211,7 +211,7 @@ export const SelectExamples = () => {
211
211
  searchable
212
212
  helperText="Type to filter options"
213
213
  />
214
- <Text size="sm" color="secondary">
214
+ <Text typography="caption" color="secondary">
215
215
  Selected: {searchableSelect || 'None'}
216
216
  </Text>
217
217
  </View>
@@ -219,11 +219,11 @@ export const SelectExamples = () => {
219
219
 
220
220
  {/* Sizes */}
221
221
  <Card type="outlined" padding="md">
222
- <View spacing="md">
223
- <Text size="md" weight="semibold">Sizes</Text>
224
- <View spacing="sm">
225
- <View>
226
- <Text size="sm" weight="medium">Small</Text>
222
+ <View gap="md">
223
+ <Text typography="subtitle1">Sizes</Text>
224
+ <View gap="sm">
225
+ <View gap="xl">
226
+ <Text typography="body2">Small</Text>
227
227
  <Select
228
228
  options={fruitOptions.slice(0, 3)}
229
229
  value={sizeSmall}
@@ -232,8 +232,8 @@ export const SelectExamples = () => {
232
232
  size="sm"
233
233
  />
234
234
  </View>
235
- <View>
236
- <Text size="sm" weight="medium">Medium (Default)</Text>
235
+ <View gap="xl">
236
+ <Text typography="body2">Medium (Default)</Text>
237
237
  <Select
238
238
  options={fruitOptions.slice(0, 3)}
239
239
  value={sizeMedium}
@@ -242,8 +242,8 @@ export const SelectExamples = () => {
242
242
  size="md"
243
243
  />
244
244
  </View>
245
- <View>
246
- <Text size="sm" weight="medium">Large</Text>
245
+ <View gap="xl">
246
+ <Text typography="body2">Large</Text>
247
247
  <Select
248
248
  options={fruitOptions.slice(0, 3)}
249
249
  value={sizeLarge}
@@ -258,11 +258,11 @@ export const SelectExamples = () => {
258
258
 
259
259
  {/* Variants */}
260
260
  <Card type="outlined" padding="md">
261
- <View spacing="md">
262
- <Text size="md" weight="semibold">Variants</Text>
263
- <View spacing="sm">
264
- <View>
265
- <Text size="sm" weight="medium">Outlined (Default)</Text>
261
+ <View gap="md">
262
+ <Text typography="subtitle1">Variants</Text>
263
+ <View gap="sm">
264
+ <View gap="xl">
265
+ <Text typography="body2">Outlined (Default)</Text>
266
266
  <Select
267
267
  options={fruitOptions.slice(0, 4)}
268
268
  value={outlinedSelect}
@@ -271,8 +271,8 @@ export const SelectExamples = () => {
271
271
  type="outlined"
272
272
  />
273
273
  </View>
274
- <View>
275
- <Text size="sm" weight="medium">Filled</Text>
274
+ <View gap="xl">
275
+ <Text typography="body2">Filled</Text>
276
276
  <Select
277
277
  options={fruitOptions.slice(0, 4)}
278
278
  value={filledSelect}
@@ -287,11 +287,11 @@ export const SelectExamples = () => {
287
287
 
288
288
  {/* Intents */}
289
289
  <Card type="outlined" padding="md">
290
- <View spacing="md">
291
- <Text size="md" weight="semibold">Intent Colors</Text>
292
- <View spacing="sm">
293
- <View>
294
- <Text size="sm" weight="medium">Primary</Text>
290
+ <View gap="md">
291
+ <Text typography="subtitle1">Intent Colors</Text>
292
+ <View gap="sm">
293
+ <View gap="xl">
294
+ <Text typography="body2">Primary</Text>
295
295
  <Select
296
296
  options={fruitOptions.slice(0, 3)}
297
297
  value={primarySelect}
@@ -301,8 +301,8 @@ export const SelectExamples = () => {
301
301
  type="outlined"
302
302
  />
303
303
  </View>
304
- <View>
305
- <Text size="sm" weight="medium">Success</Text>
304
+ <View gap="xl">
305
+ <Text typography="body2">Success</Text>
306
306
  <Select
307
307
  options={fruitOptions.slice(0, 3)}
308
308
  value={successSelect}
@@ -312,8 +312,8 @@ export const SelectExamples = () => {
312
312
  type="outlined"
313
313
  />
314
314
  </View>
315
- <View>
316
- <Text size="sm" weight="medium">Warning</Text>
315
+ <View gap="xl">
316
+ <Text typography="body2">Warning</Text>
317
317
  <Select
318
318
  options={fruitOptions.slice(0, 3)}
319
319
  value={warningSelect}
@@ -323,8 +323,8 @@ export const SelectExamples = () => {
323
323
  type="outlined"
324
324
  />
325
325
  </View>
326
- <View>
327
- <Text size="sm" weight="medium">Error</Text>
326
+ <View gap="xl">
327
+ <Text typography="body2">Error</Text>
328
328
  <Select
329
329
  options={fruitOptions.slice(0, 3)}
330
330
  value={errorSelect}
@@ -340,8 +340,8 @@ export const SelectExamples = () => {
340
340
 
341
341
  {/* Form Example */}
342
342
  <Card type="outlined" padding="md">
343
- <View spacing="md">
344
- <Text size="md" weight="semibold">Form Integration</Text>
343
+ <View gap="md">
344
+ <Text typography="subtitle1">Form Integration</Text>
345
345
  <Select
346
346
  options={countryOptions}
347
347
  value={formSelect}
@@ -370,8 +370,8 @@ export const SelectExamples = () => {
370
370
 
371
371
  {/* Disabled State */}
372
372
  <Card type="outlined" padding="md">
373
- <View spacing="md">
374
- <Text size="md" weight="semibold">Disabled State</Text>
373
+ <View gap="md">
374
+ <Text typography="subtitle1">Disabled State</Text>
375
375
  <Select
376
376
  options={fruitOptions}
377
377
  value="apple"
@@ -386,9 +386,9 @@ export const SelectExamples = () => {
386
386
 
387
387
  {/* Platform-specific Features */}
388
388
  <Card type="outlined" padding="md">
389
- <View spacing="md">
390
- <Text size="md" weight="semibold">Platform Features</Text>
391
- <Text size="sm" color="secondary">
389
+ <View gap="md">
390
+ <Text typography="subtitle1">Platform Features</Text>
391
+ <Text typography="caption" color="secondary">
392
392
  On iOS: Try the ActionSheet presentation mode for native feel
393
393
  </Text>
394
394
  <Select
@@ -407,14 +407,14 @@ export const SelectExamples = () => {
407
407
 
408
408
  {/* Summary */}
409
409
  <Card type="filled" padding="md">
410
- <View spacing="sm">
411
- <Text size="md" weight="semibold">Current Selections Summary</Text>
412
- <Text size="sm">Basic: {basicSelect || 'None'}</Text>
413
- <Text size="sm">Country: {countrySelect || 'None'}</Text>
414
- <Text size="sm">Priority: {prioritySelect || 'None'}</Text>
415
- <Text size="sm">Status: {statusSelect || 'None'}</Text>
416
- <Text size="sm">Searchable: {searchableSelect || 'None'}</Text>
417
- <Text size="sm">Form: {formSelect || 'None'}</Text>
410
+ <View gap="sm">
411
+ <Text typography="subtitle1">Current Selections Summary</Text>
412
+ <Text typography="body2">Basic: {basicSelect || 'None'}</Text>
413
+ <Text typography="body2">Country: {countrySelect || 'None'}</Text>
414
+ <Text typography="body2">Priority: {prioritySelect || 'None'}</Text>
415
+ <Text typography="body2">Status: {statusSelect || 'None'}</Text>
416
+ <Text typography="body2">Searchable: {searchableSelect || 'None'}</Text>
417
+ <Text typography="body2">Form: {formSelect || 'None'}</Text>
418
418
  </View>
419
419
  </Card>
420
420
  </View>
package/src/examples/SkeletonExamples.tsx CHANGED
@@ -4,53 +4,53 @@ import { Screen, View, Text, Skeleton, SkeletonGroup, Divider, Card } from '../i
4
4
  export const SkeletonExamples = () => {
5
5
  return (
6
6
  <Screen background="primary" safeArea>
7
- <View spacing="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
8
- <Text size="xl" weight="bold">Skeleton Examples</Text>
7
+ <View gap="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
8
+ <Text typography="h3">Skeleton Examples</Text>
9
9
 
10
10
  <Divider spacing="md" />
11
- <Text size="lg" weight="semibold">Basic Shapes</Text>
11
+ <Text typography="h5">Basic Shapes</Text>
12
12
 
13
- <Text size="md" weight="semibold">Rectangle (Default)</Text>
13
+ <Text typography="subtitle1">Rectangle (Default)</Text>
14
14
  <Skeleton width="100%" height={40} shape="rectangle" />
15
15
 
16
- <Text size="md" weight="semibold">Rounded</Text>
16
+ <Text typography="subtitle1">Rounded</Text>
17
17
  <Skeleton width="100%" height={40} shape="rounded" />
18
18
 
19
- <Text size="md" weight="semibold">Circle</Text>
19
+ <Text typography="subtitle1">Circle</Text>
20
20
  <Skeleton width={64} height={64} shape="circle" />
21
21
 
22
22
  <Divider spacing="md" />
23
- <Text size="lg" weight="semibold">Custom Border Radius</Text>
23
+ <Text typography="h5">Custom Border Radius</Text>
24
24
 
25
25
  <Skeleton width="100%" height={40} shape="rounded" borderRadius={4} />
26
26
  <Skeleton width="100%" height={40} shape="rounded" borderRadius={16} />
27
27
  <Skeleton width="100%" height={40} shape="rounded" borderRadius={24} />
28
28
 
29
29
  <Divider spacing="md" />
30
- <Text size="lg" weight="semibold">Animation Types</Text>
30
+ <Text typography="h5">Animation Types</Text>
31
31
 
32
- <Text size="md" weight="semibold">Pulse (Default)</Text>
32
+ <Text typography="subtitle1">Pulse (Default)</Text>
33
33
  <Skeleton width="100%" height={40} animation="pulse" />
34
34
 
35
- <Text size="md" weight="semibold">Wave</Text>
35
+ <Text typography="subtitle1">Wave</Text>
36
36
  <Skeleton width="100%" height={40} animation="wave" />
37
37
 
38
- <Text size="md" weight="semibold">None</Text>
38
+ <Text typography="subtitle1">None</Text>
39
39
  <Skeleton width="100%" height={40} animation="none" />
40
40
 
41
41
  <Divider spacing="md" />
42
- <Text size="lg" weight="semibold">Skeleton Groups</Text>
42
+ <Text typography="h5">Skeleton Groups</Text>
43
43
 
44
- <Text size="md" weight="semibold">Default Group (3 items)</Text>
44
+ <Text typography="subtitle1">Default Group (3 items)</Text>
45
45
  <SkeletonGroup />
46
46
 
47
- <Text size="md" weight="semibold">Custom Count (5 items)</Text>
47
+ <Text typography="subtitle1">Custom Count (5 items)</Text>
48
48
  <SkeletonGroup count={5} />
49
49
 
50
- <Text size="md" weight="semibold">Custom Spacing</Text>
50
+ <Text typography="subtitle1">Custom Spacing</Text>
51
51
  <SkeletonGroup count={3} spacing={20} />
52
52
 
53
- <Text size="md" weight="semibold">Custom Skeleton Props</Text>
53
+ <Text typography="subtitle1">Custom Skeleton Props</Text>
54
54
  <SkeletonGroup
55
55
  count={4}
56
56
  spacing={16}
@@ -62,10 +62,10 @@ export const SkeletonExamples = () => {
62
62
  />
63
63
 
64
64
  <Divider spacing="md" />
65
- <Text size="lg" weight="semibold">Profile Card Loading</Text>
65
+ <Text typography="h5">Profile Card Loading</Text>
66
66
 
67
67
  <Card type="outlined">
68
- <View spacing="md">
68
+ <View gap="md">
69
69
  <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
70
70
  <Skeleton width={64} height={64} shape="circle" />
71
71
  <View style={{ flex: 1, gap: 8 }}>
@@ -78,10 +78,10 @@ export const SkeletonExamples = () => {
78
78
  </Card>
79
79
 
80
80
  <Divider spacing="md" />
81
- <Text size="lg" weight="semibold">Article Card Loading</Text>
81
+ <Text typography="h5">Article Card Loading</Text>
82
82
 
83
83
  <Card type="outlined">
84
- <View spacing="md">
84
+ <View gap="md">
85
85
  <Skeleton width="100%" height={200} shape="rounded" />
86
86
  <Skeleton width="80%" height={28} shape="rounded" />
87
87
  <SkeletonGroup
@@ -97,10 +97,10 @@ export const SkeletonExamples = () => {
97
97
  </Card>
98
98
 
99
99
  <Divider spacing="md" />
100
- <Text size="lg" weight="semibold">List Item Loading</Text>
100
+ <Text typography="h5">List Item Loading</Text>
101
101
 
102
102
  <Card type="outlined">
103
- <View spacing="md">
103
+ <View gap="md">
104
104
  {[1, 2, 3].map((item) => (
105
105
  <View key={item} style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
106
106
  <Skeleton width={48} height={48} shape="rounded" />
@@ -114,10 +114,10 @@ export const SkeletonExamples = () => {
114
114
  </Card>
115
115
 
116
116
  <Divider spacing="md" />
117
- <Text size="lg" weight="semibold">Table Loading</Text>
117
+ <Text typography="h5">Table Loading</Text>
118
118
 
119
119
  <Card type="outlined">
120
- <View spacing="sm">
120
+ <View gap="sm">
121
121
  {/* Header */}
122
122
  <View style={{ flexDirection: 'row', gap: 12 }}>
123
123
  <Skeleton width={40} height={20} shape="rounded" />
@@ -139,12 +139,12 @@ export const SkeletonExamples = () => {
139
139
  </Card>
140
140
 
141
141
  <Divider spacing="md" />
142
- <Text size="lg" weight="semibold">Dashboard Card Loading</Text>
142
+ <Text typography="h5">Dashboard Card Loading</Text>
143
143
 
144
144
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
145
145
  {[1, 2, 3, 4].map((card) => (
146
146
  <Card key={card} type="outlined" style={{ flex: 1, minWidth: 180 }}>
147
- <View spacing="sm">
147
+ <View gap="sm">
148
148
  <Skeleton width="60%" height={16} shape="rounded" />
149
149
  <Skeleton width="80%" height={32} shape="rounded" />
150
150
  <Skeleton width="40%" height={12} shape="rounded" />
@@ -154,10 +154,10 @@ export const SkeletonExamples = () => {
154
154
  </View>
155
155
 
156
156
  <Divider spacing="md" />
157
- <Text size="lg" weight="semibold">Comment Thread Loading</Text>
157
+ <Text typography="h5">Comment Thread Loading</Text>
158
158
 
159
159
  <Card type="outlined">
160
- <View spacing="md">
160
+ <View gap="md">
161
161
  {[1, 2, 3].map((comment) => (
162
162
  <View key={comment} style={{ paddingLeft: comment > 1 ? 32 : 0 }}>
163
163
  <View style={{ flexDirection: 'row', gap: 12 }}>
@@ -177,7 +177,7 @@ export const SkeletonExamples = () => {
177
177
  </Card>
178
178
 
179
179
  <Divider spacing="md" />
180
- <Text size="lg" weight="semibold">Mixed Shapes and Sizes</Text>
180
+ <Text typography="h5">Mixed Shapes and Sizes</Text>
181
181
 
182
182
  <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
183
183
  <Skeleton width={80} height={80} shape="circle" />
@@ -193,7 +193,7 @@ export const SkeletonExamples = () => {
193
193
  </View>
194
194
 
195
195
  <Divider spacing="md" />
196
- <Text size="lg" weight="semibold">Custom Widths</Text>
196
+ <Text typography="h5">Custom Widths</Text>
197
197
 
198
198
  <Skeleton width={100} height={20} shape="rounded" />
199
199
  <Skeleton width="25%" height={20} shape="rounded" />