@idealyst/components 1.0.99 → 1.1.0

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/IconExamples.tsx CHANGED
@@ -60,9 +60,9 @@ const FalsePositiveTest = () => {
60
60
  const title = "account"; // Not used with Icon
61
61
  return (
62
62
  <>
63
- <Text size="sm">Page: {pageName}</Text>
64
- <Text size="sm">Title: {title}</Text>
65
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
63
+ <Text typography="body2">Page: {pageName}</Text>
64
+ <Text typography="body2">Title: {title}</Text>
65
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
66
66
  These strings are NOT transformed (not used with Icon)
67
67
  </Text>
68
68
  </>
@@ -86,76 +86,76 @@ export const IconExamples = () => {
86
86
 
87
87
  return (
88
88
  <Screen background="primary" padding="lg">
89
- <View spacing="none">
90
- <Text size="lg" weight="bold" align="center">
89
+ <View gap="xl">
90
+ <Text typography="h4" align="center">
91
91
  Icon Examples
92
92
  </Text>
93
93
 
94
94
  {/* Color Variants */}
95
- <View spacing="md">
96
- <Text size="md" weight="semibold">Color Variants</Text>
95
+ <View gap="md">
96
+ <Text typography="subtitle1">Color Variants</Text>
97
97
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
98
98
  <View style={{ alignItems: 'center', gap: 4 }}>
99
99
  <Icon name="home-account" size="md" intent="primary" />
100
- <Text size="sm">Intent Primary</Text>
100
+ <Text typography="body2">Intent Primary</Text>
101
101
  </View>
102
102
  <View style={{ alignItems: 'center', gap: 4 }}>
103
103
  <Icon name="check" size="md" intent="success" />
104
- <Text size="sm">Intent Success</Text>
104
+ <Text typography="body2">Intent Success</Text>
105
105
  </View>
106
106
  <View style={{ alignItems: 'center', gap: 4 }}>
107
107
  <Icon name="alert-circle" size="md" color="blue" />
108
- <Text size="sm">Blue</Text>
108
+ <Text typography="body2">Blue</Text>
109
109
  </View>
110
110
  <View style={{ alignItems: 'center', gap: 4 }}>
111
111
  <Icon name="alert" size="md" color="green" />
112
- <Text size="sm">Green</Text>
112
+ <Text typography="body2">Green</Text>
113
113
  </View>
114
114
  <View style={{ alignItems: 'center', gap: 4 }}>
115
115
  <Icon name="cog" size="md" color="red" />
116
- <Text size="sm">Red</Text>
116
+ <Text typography="body2">Red</Text>
117
117
  </View>
118
118
  <View style={{ alignItems: 'center', gap: 4 }}>
119
119
  <Icon name="text" size="md" color="orange" />
120
- <Text size="sm">Orange</Text>
120
+ <Text typography="body2">Orange</Text>
121
121
  </View>
122
122
  </View>
123
123
  </View>
124
124
 
125
125
  {/* Color Shades */}
126
- <View spacing="md">
127
- <Text size="md" weight="semibold">Color Shades</Text>
126
+ <View gap="md">
127
+ <Text typography="subtitle1">Color Shades</Text>
128
128
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
129
129
  <View style={{ alignItems: 'center', gap: 4 }}>
130
130
  <Icon name="star" size="md" color="blue.200" />
131
- <Text size="sm">Blue 200</Text>
131
+ <Text typography="body2">Blue 200</Text>
132
132
  </View>
133
133
  <View style={{ alignItems: 'center', gap: 4 }}>
134
134
  <Icon name="star" size="md" color="blue.500" />
135
- <Text size="sm">Blue 500</Text>
135
+ <Text typography="body2">Blue 500</Text>
136
136
  </View>
137
137
  <View style={{ alignItems: 'center', gap: 4 }}>
138
138
  <Icon name="star" size="md" color="blue.800" />
139
- <Text size="sm">Blue 800</Text>
139
+ <Text typography="body2">Blue 800</Text>
140
140
  </View>
141
141
  <View style={{ alignItems: 'center', gap: 4 }}>
142
142
  <Icon name="heart" size="md" color="red.300" />
143
- <Text size="sm">Red 300</Text>
143
+ <Text typography="body2">Red 300</Text>
144
144
  </View>
145
145
  <View style={{ alignItems: 'center', gap: 4 }}>
146
146
  <Icon name="heart" size="md" color="red.600" />
147
- <Text size="sm">Red 600</Text>
147
+ <Text typography="body2">Red 600</Text>
148
148
  </View>
149
149
  <View style={{ alignItems: 'center', gap: 4 }}>
150
150
  <Icon name="heart" size="md" color="red.900" />
151
- <Text size="sm">Red 900</Text>
151
+ <Text typography="body2">Red 900</Text>
152
152
  </View>
153
153
  </View>
154
154
  </View>
155
155
 
156
156
  {/* Basic Icons */}
157
- <View spacing="md">
158
- <Text size="md" weight="semibold">Basic Icons</Text>
157
+ <View gap="md">
158
+ <Text typography="subtitle1">Basic Icons</Text>
159
159
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
160
160
  <Icon name="home" />
161
161
  <Icon name="cog" />
@@ -169,58 +169,58 @@ export const IconExamples = () => {
169
169
  </View>
170
170
 
171
171
  {/* Icon Sizes */}
172
- <View spacing="md">
173
- <Text size="md" weight="semibold">Sizes</Text>
172
+ <View gap="md">
173
+ <Text typography="subtitle1">Sizes</Text>
174
174
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
175
175
  <View style={{ alignItems: 'center', gap: 4 }}>
176
176
  <Icon name="home" size="xs" />
177
- <Text size="sm">XS (12px)</Text>
177
+ <Text typography="body2">XS (12px)</Text>
178
178
  </View>
179
179
  <View style={{ alignItems: 'center', gap: 4 }}>
180
180
  <Icon name="home" size="sm" />
181
- <Text size="sm">SM (16px)</Text>
181
+ <Text typography="body2">SM (16px)</Text>
182
182
  </View>
183
183
  <View style={{ alignItems: 'center', gap: 4 }}>
184
184
  <Icon name="home" size="md" />
185
- <Text size="sm">MD (24px)</Text>
185
+ <Text typography="body2">MD (24px)</Text>
186
186
  </View>
187
187
  <View style={{ alignItems: 'center', gap: 4 }}>
188
188
  <Icon name="home" size="lg" />
189
- <Text size="sm">LG (32px)</Text>
189
+ <Text typography="body2">LG (32px)</Text>
190
190
  </View>
191
191
  <View style={{ alignItems: 'center', gap: 4 }}>
192
192
  <Icon name="home" size="xl" />
193
- <Text size="sm">XL (48px)</Text>
193
+ <Text typography="body2">XL (48px)</Text>
194
194
  </View>
195
195
  </View>
196
196
  </View>
197
197
 
198
198
  {/* Custom Colors vs Variants */}
199
- <View spacing="md">
200
- <Text size="md" weight="semibold">Custom Colors vs Variants</Text>
199
+ <View gap="md">
200
+ <Text typography="subtitle1">Custom Colors vs Variants</Text>
201
201
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
202
202
  <View style={{ alignItems: 'center', gap: 4 }}>
203
203
  <Icon name="heart" size="lg" style={{ color: '#FF0000' }} />
204
- <Text size="sm">Custom Red</Text>
204
+ <Text typography="body2">Custom Red</Text>
205
205
  </View>
206
206
  <View style={{ alignItems: 'center', gap: 4 }}>
207
207
  <Icon name="heart" size="lg" color="red" />
208
- <Text size="sm">Red Variant</Text>
208
+ <Text typography="body2">Red Variant</Text>
209
209
  </View>
210
210
  <View style={{ alignItems: 'center', gap: 4 }}>
211
211
  <Icon name="heart" size="lg" style={{ color: '#00FF00' }} />
212
- <Text size="sm">Custom Green</Text>
212
+ <Text typography="body2">Custom Green</Text>
213
213
  </View>
214
214
  <View style={{ alignItems: 'center', gap: 4 }}>
215
215
  <Icon name="heart" size="lg" color="green" />
216
- <Text size="sm">Green Variant</Text>
216
+ <Text typography="body2">Green Variant</Text>
217
217
  </View>
218
218
  </View>
219
219
  </View>
220
220
 
221
221
  {/* Navigation Icons */}
222
- <View spacing="md">
223
- <Text size="md" weight="semibold">Navigation & Movement</Text>
222
+ <View gap="md">
223
+ <Text typography="subtitle1">Navigation & Movement</Text>
224
224
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
225
225
  <Icon name="arrow-left" size="md" />
226
226
  <Icon name="arrow-right" size="md" />
@@ -236,8 +236,8 @@ export const IconExamples = () => {
236
236
  </View>
237
237
 
238
238
  {/* Action Icons */}
239
- <View spacing="md">
240
- <Text size="md" weight="semibold">Actions & Controls</Text>
239
+ <View gap="md">
240
+ <Text typography="subtitle1">Actions & Controls</Text>
241
241
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
242
242
  <Icon name="play" size="md" />
243
243
  <Icon name="pause" size="md" />
@@ -253,8 +253,8 @@ export const IconExamples = () => {
253
253
  </View>
254
254
 
255
255
  {/* Communication Icons */}
256
- <View spacing="md">
257
- <Text size="md" weight="semibold">Communication</Text>
256
+ <View gap="md">
257
+ <Text typography="subtitle1">Communication</Text>
258
258
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
259
259
  <Icon name="mail" size="md" />
260
260
  <Icon name="message" size="md" />
@@ -268,8 +268,8 @@ export const IconExamples = () => {
268
268
  </View>
269
269
 
270
270
  {/* Social Media Icons */}
271
- <View spacing="md">
272
- <Text size="md" weight="semibold">Social Media</Text>
271
+ <View gap="md">
272
+ <Text typography="subtitle1">Social Media</Text>
273
273
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
274
274
  <Icon name="facebook" size="md" />
275
275
  <Icon name="twitter" size="md" />
@@ -283,31 +283,31 @@ export const IconExamples = () => {
283
283
  </View>
284
284
 
285
285
  {/* Status & Alert Icons with Variants */}
286
- <View spacing="md">
287
- <Text size="md" weight="semibold">Status & Alerts (Using Variants)</Text>
286
+ <View gap="md">
287
+ <Text typography="subtitle1">Status & Alerts (Using Variants)</Text>
288
288
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
289
289
  <View style={{ alignItems: 'center', gap: 4 }}>
290
290
  <Icon name="check-circle" size="md" color="green" />
291
- <Text size="sm">Success</Text>
291
+ <Text typography="body2">Success</Text>
292
292
  </View>
293
293
  <View style={{ alignItems: 'center', gap: 4 }}>
294
294
  <Icon name="alert" size="md" color="orange" />
295
- <Text size="sm">Warning</Text>
295
+ <Text typography="body2">Warning</Text>
296
296
  </View>
297
297
  <View style={{ alignItems: 'center', gap: 4 }}>
298
298
  <Icon name="alert-circle" size="md" color="red" />
299
- <Text size="sm">Error</Text>
299
+ <Text typography="body2">Error</Text>
300
300
  </View>
301
301
  <View style={{ alignItems: 'center', gap: 4 }}>
302
302
  <Icon name="information" size="md" color="blue" />
303
- <Text size="sm">Info</Text>
303
+ <Text typography="body2">Info</Text>
304
304
  </View>
305
305
  </View>
306
306
  </View>
307
307
 
308
308
  {/* File & Document Icons */}
309
- <View spacing="md">
310
- <Text size="md" weight="semibold">Files & Documents</Text>
309
+ <View gap="md">
310
+ <Text typography="subtitle1">Files & Documents</Text>
311
311
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
312
312
  <Icon name="file-document" size="md" />
313
313
  <Icon name="folder" size="md" />
@@ -321,8 +321,8 @@ export const IconExamples = () => {
321
321
  </View>
322
322
 
323
323
  {/* Media Icons */}
324
- <View spacing="md">
325
- <Text size="md" weight="semibold">Media & Content</Text>
324
+ <View gap="md">
325
+ <Text typography="subtitle1">Media & Content</Text>
326
326
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
327
327
  <Icon name="image" size="md" />
328
328
  <Icon name="camera" size="md" />
@@ -336,8 +336,8 @@ export const IconExamples = () => {
336
336
  </View>
337
337
 
338
338
  {/* Technology Icons */}
339
- <View spacing="md">
340
- <Text size="md" weight="semibold">Technology & Devices</Text>
339
+ <View gap="md">
340
+ <Text typography="subtitle1">Technology & Devices</Text>
341
341
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
342
342
  <Icon name="cellphone" size="md" />
343
343
  <Icon name="laptop" size="md" />
@@ -351,8 +351,8 @@ export const IconExamples = () => {
351
351
  </View>
352
352
 
353
353
  {/* Weather Icons */}
354
- <View spacing="md">
355
- <Text size="md" weight="semibold">Weather</Text>
354
+ <View gap="md">
355
+ <Text typography="subtitle1">Weather</Text>
356
356
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
357
357
  <Icon name="weather-sunny" size="md" />
358
358
  <Icon name="weather-night" size="md" />
@@ -366,8 +366,8 @@ export const IconExamples = () => {
366
366
  </View>
367
367
 
368
368
  {/* Gaming & Entertainment Icons */}
369
- <View spacing="md">
370
- <Text size="md" weight="semibold">Gaming & Entertainment</Text>
369
+ <View gap="md">
370
+ <Text typography="subtitle1">Gaming & Entertainment</Text>
371
371
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
372
372
  <Icon name="gamepad" size="md" />
373
373
  <Icon name="trophy" size="md" />
@@ -381,8 +381,8 @@ export const IconExamples = () => {
381
381
  </View>
382
382
 
383
383
  {/* Business & Work Icons */}
384
- <View spacing="md">
385
- <Text size="md" weight="semibold">Business & Work</Text>
384
+ <View gap="md">
385
+ <Text typography="subtitle1">Business & Work</Text>
386
386
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
387
387
  <Icon name="briefcase" size="md" />
388
388
  <Icon name="presentation" size="md" />
@@ -396,8 +396,8 @@ export const IconExamples = () => {
396
396
  </View>
397
397
 
398
398
  {/* Tool Icons */}
399
- <View spacing="md">
400
- <Text size="md" weight="semibold">Tools & Utilities</Text>
399
+ <View gap="md">
400
+ <Text typography="subtitle1">Tools & Utilities</Text>
401
401
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
402
402
  <Icon name="tools" size="md" />
403
403
  <Icon name="hammer" size="md" />
@@ -411,56 +411,56 @@ export const IconExamples = () => {
411
411
  </View>
412
412
 
413
413
  {/* Enhanced Plugin Testing Section */}
414
- <View spacing="lg" style={{ marginTop: 32, padding: 16, backgroundColor: 'rgba(100, 100, 255, 0.1)', borderRadius: 8 }}>
415
- <Text size="lg" weight="bold">Enhanced Plugin Testing</Text>
416
- <Text size="sm" style={{ fontStyle: 'italic', marginBottom: 16 }}>
414
+ <View gap="lg" style={{ marginTop: 32, padding: 16, backgroundColor: 'rgba(100, 100, 255, 0.1)', borderRadius: 8 }}>
415
+ <Text typography="h4">Enhanced Plugin Testing</Text>
416
+ <Text typography="caption" style={{ fontStyle: 'italic', marginBottom: 16 }}>
417
417
  These examples test the new context-aware babel plugin features
418
418
  </Text>
419
419
 
420
420
  {/* Test 1: Simple Variable */}
421
- <View spacing="md">
422
- <Text size="md" weight="semibold">Test 1: Simple Variable</Text>
423
- <Text size="sm" color="secondary">Icon name from a simple variable</Text>
421
+ <View gap="md">
422
+ <Text typography="subtitle1">Test 1: Simple Variable</Text>
423
+ <Text typography="caption" color="secondary">Icon name from a simple variable</Text>
424
424
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
425
425
  <SimpleVariableTest />
426
426
  </View>
427
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
427
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
428
428
  const iconName = "home"; &lt;Icon name={'{iconName}'} /&gt;
429
429
  </Text>
430
430
  </View>
431
431
 
432
432
  {/* Test 2: Namespace Prefix */}
433
- <View spacing="md">
434
- <Text size="md" weight="semibold">Test 2: Namespace Prefix (mdi:)</Text>
435
- <Text size="sm" color="secondary">Explicit marking with mdi: prefix</Text>
433
+ <View gap="md">
434
+ <Text typography="subtitle1">Test 2: Namespace Prefix (mdi:)</Text>
435
+ <Text typography="caption" color="secondary">Explicit marking with mdi: prefix</Text>
436
436
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
437
437
  <NamespaceTest />
438
438
  </View>
439
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
439
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
440
440
  const icon = "mdi:star"; &lt;Icon name={'{icon}'} /&gt;
441
441
  </Text>
442
442
  </View>
443
443
 
444
444
  {/* Test 3: Conditional Expression */}
445
- <View spacing="md">
446
- <Text size="md" weight="semibold">Test 3: Conditional Expression</Text>
447
- <Text size="sm" color="secondary">Ternary operator with two icons</Text>
445
+ <View gap="md">
446
+ <Text typography="subtitle1">Test 3: Conditional Expression</Text>
447
+ <Text typography="caption" color="secondary">Ternary operator with two icons</Text>
448
448
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
449
449
  <Icon name={isPlaying ? "pause" : "play"} size="md" />
450
450
  <Button onPress={() => setIsPlaying(!isPlaying)}>
451
451
  Toggle Play/Pause
452
452
  </Button>
453
- <Text size="sm">Currently: {isPlaying ? 'Playing' : 'Paused'}</Text>
453
+ <Text typography="body2">Currently: {isPlaying ? 'Playing' : 'Paused'}</Text>
454
454
  </View>
455
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
455
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
456
456
  &lt;Icon name={'{isPlaying ? "pause" : "play"}'} /&gt;
457
457
  </Text>
458
458
  </View>
459
459
 
460
460
  {/* Test 4: Function Return */}
461
- <View spacing="md">
462
- <Text size="md" weight="semibold">Test 4: Function Return Value</Text>
463
- <Text size="sm" color="secondary">Icon name from function (requires manifest or namespace)</Text>
461
+ <View gap="md">
462
+ <Text typography="subtitle1">Test 4: Function Return Value</Text>
463
+ <Text typography="caption" color="secondary">Icon name from function (requires manifest or namespace)</Text>
464
464
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
465
465
  <Icon name={getStatusIcon(userStatus)} size="md" />
466
466
  <View style={{ flexDirection: 'row', gap: 8 }}>
@@ -475,81 +475,81 @@ export const IconExamples = () => {
475
475
  </Button>
476
476
  </View>
477
477
  </View>
478
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
478
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
479
479
  &lt;Icon name={'{getStatusIcon(status)}'} /&gt;
480
480
  </Text>
481
481
  </View>
482
482
 
483
483
  {/* Test 5: Namespace with Conditional */}
484
- <View spacing="md">
485
- <Text size="md" weight="semibold">Test 5: Namespace + Conditional</Text>
486
- <Text size="sm" color="secondary">Guaranteed transformation with mdi: prefix</Text>
484
+ <View gap="md">
485
+ <Text typography="subtitle1">Test 5: Namespace + Conditional</Text>
486
+ <Text typography="caption" color="secondary">Guaranteed transformation with mdi: prefix</Text>
487
487
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
488
488
  <Icon name={isPlaying ? "mdi:volume-high" : "mdi:volume-mute"} size="md" />
489
- <Text size="sm">Audio: {isPlaying ? 'On' : 'Muted'}</Text>
489
+ <Text typography="body2">Audio: {isPlaying ? 'On' : 'Muted'}</Text>
490
490
  </View>
491
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
491
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
492
492
  &lt;Icon name={'{isPlaying ? "mdi:volume-high" : "mdi:volume-mute"}'} /&gt;
493
493
  </Text>
494
494
  </View>
495
495
 
496
496
  {/* Test 6: Logical Expression */}
497
- <View spacing="md">
498
- <Text size="md" weight="semibold">Test 6: Logical Expression</Text>
499
- <Text size="sm" color="secondary">Using && and || operators</Text>
497
+ <View gap="md">
498
+ <Text typography="subtitle1">Test 6: Logical Expression</Text>
499
+ <Text typography="caption" color="secondary">Using && and || operators</Text>
500
500
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
501
501
  <Icon name={userStatus === 'online' ? "wifi" : undefined} size="md" />
502
502
  <Icon name={userStatus === 'offline' ? undefined : "wifi-off"} size="md" />
503
503
  </View>
504
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
504
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
505
505
  &lt;Icon name={'{condition && "wifi"}'} /&gt;
506
506
  </Text>
507
507
  </View>
508
508
 
509
509
  {/* Test 7: Template Literal (Static) */}
510
- <View spacing="md">
511
- <Text size="md" weight="semibold">Test 7: Template Literal (Static)</Text>
512
- <Text size="sm" color="secondary">Static template strings</Text>
510
+ <View gap="md">
511
+ <Text typography="subtitle1">Test 7: Template Literal (Static)</Text>
512
+ <Text typography="caption" color="secondary">Static template strings</Text>
513
513
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
514
514
  <TemplateLiteralTest />
515
515
  </View>
516
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
516
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
517
517
  const icon = `bell`; &lt;Icon name={'{icon}'} /&gt;
518
518
  </Text>
519
519
  </View>
520
520
 
521
521
  {/* Test 8: No False Positives */}
522
- <View spacing="md">
523
- <Text size="md" weight="semibold">Test 8: No False Positives</Text>
524
- <Text size="sm" color="secondary">Common words NOT used with Icon shouldn't transform</Text>
522
+ <View gap="md">
523
+ <Text typography="subtitle1">Test 8: No False Positives</Text>
524
+ <Text typography="caption" color="secondary">Common words NOT used with Icon shouldn't transform</Text>
525
525
  <View style={{ flexDirection: 'column', gap: 8 }}>
526
526
  <FalsePositiveTest />
527
527
  </View>
528
528
  </View>
529
529
 
530
530
  {/* Test 9: Multiple Variables */}
531
- <View spacing="md">
532
- <Text size="md" weight="semibold">Test 9: Multiple Icon Variables</Text>
533
- <Text size="sm" color="secondary">Several variables used with Icon components</Text>
531
+ <View gap="md">
532
+ <Text typography="subtitle1">Test 9: Multiple Icon Variables</Text>
533
+ <Text typography="caption" color="secondary">Several variables used with Icon components</Text>
534
534
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
535
535
  <MultipleVariablesTest />
536
536
  </View>
537
- <Text size="sm" style={{ fontFamily: 'monospace', color: '#666' }}>
537
+ <Text typography="caption" style={{ fontFamily: 'monospace', color: '#666' }}>
538
538
  Multiple icon variables in same scope
539
539
  </Text>
540
540
  </View>
541
541
 
542
542
  {/* Summary */}
543
543
  <View style={{ marginTop: 16, padding: 12, backgroundColor: 'rgba(0, 255, 0, 0.1)', borderRadius: 4 }}>
544
- <Text size="sm" weight="semibold">Plugin Features Tested:</Text>
545
- <Text size="sm">✓ Simple variables</Text>
546
- <Text size="sm">✓ Namespace prefix (mdi:)</Text>
547
- <Text size="sm">✓ Conditional expressions</Text>
548
- <Text size="sm">✓ Function returns</Text>
549
- <Text size="sm">✓ Logical operators</Text>
550
- <Text size="sm">✓ Template literals</Text>
551
- <Text size="sm">✓ No false positives</Text>
552
- <Text size="sm">✓ Multiple variables</Text>
544
+ <Text typography="subtitle2">Plugin Features Tested:</Text>
545
+ <Text typography="body2">✓ Simple variables</Text>
546
+ <Text typography="body2">✓ Namespace prefix (mdi:)</Text>
547
+ <Text typography="body2">✓ Conditional expressions</Text>
548
+ <Text typography="body2">✓ Function returns</Text>
549
+ <Text typography="body2">✓ Logical operators</Text>
550
+ <Text typography="body2">✓ Template literals</Text>
551
+ <Text typography="body2">✓ No false positives</Text>
552
+ <Text typography="body2">✓ Multiple variables</Text>
553
553
  </View>
554
554
  </View>
555
555
  </View>