@idealyst/components 1.0.98 → 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/PopoverExamples.tsx CHANGED
@@ -21,14 +21,14 @@ export const PopoverExamples = () => {
21
21
 
22
22
  return (
23
23
  <Screen background="primary" padding="lg">
24
- <View spacing="lg">
25
- <Text size="lg" weight="bold" align="center">
24
+ <View gap="lg">
25
+ <Text typography="h4" align="center">
26
26
  Popover Examples
27
27
  </Text>
28
28
 
29
29
  {/* Basic Popover */}
30
- <View spacing="md">
31
- <Text size="md" weight="semibold">Basic Popover</Text>
30
+ <View gap="md">
31
+ <Text typography="subtitle1">Basic Popover</Text>
32
32
  <Button
33
33
  ref={basicButtonRef}
34
34
  onPress={() => setBasicOpen(true)}>
@@ -40,9 +40,9 @@ export const PopoverExamples = () => {
40
40
  anchor={basicButtonRef}
41
41
  placement="bottom"
42
42
  >
43
- <View spacing="sm">
43
+ <View gap="sm">
44
44
  <Text weight="bold">Basic Popover</Text>
45
- <Text size="sm">This is a basic popover with some content.</Text>
45
+ <Text typography="body2">This is a basic popover with some content.</Text>
46
46
  <Button size="sm" onPress={() => setBasicOpen(false)}>
47
47
  Close
48
48
  </Button>
@@ -51,8 +51,8 @@ export const PopoverExamples = () => {
51
51
  </View>
52
52
 
53
53
  {/* Placement Examples */}
54
- <View spacing="md">
55
- <Text size="md" weight="semibold">Placement Options</Text>
54
+ <View gap="md">
55
+ <Text typography="subtitle1">Placement Options</Text>
56
56
  <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
57
57
  {placements.map((placement) => (
58
58
  <View key={placement.id}>
@@ -75,9 +75,9 @@ export const PopoverExamples = () => {
75
75
  anchor={{ current: placementButtonRefs.current[placement.id] }}
76
76
  placement={placement.id as any}
77
77
  >
78
- <View spacing="sm">
78
+ <View gap="sm">
79
79
  <Text weight="bold">{placement.label} placement</Text>
80
- <Text size="sm">
80
+ <Text typography="body2">
81
81
  Positioned {placement.id} relative to the button
82
82
  </Text>
83
83
  <Button size="sm" onPress={() => setPlacementOpen(null)}>
@@ -92,8 +92,8 @@ export const PopoverExamples = () => {
92
92
  </View>
93
93
 
94
94
  {/* Arrow Example */}
95
- <View spacing="md">
96
- <Text size="md" weight="semibold">With Arrow</Text>
95
+ <View gap="md">
96
+ <Text typography="subtitle1">With Arrow</Text>
97
97
  <Button
98
98
  ref={arrowButtonRef}
99
99
  type="contained"
@@ -109,9 +109,9 @@ export const PopoverExamples = () => {
109
109
  placement="top"
110
110
  showArrow={true}
111
111
  >
112
- <View spacing="sm">
112
+ <View gap="sm">
113
113
  <Text weight="bold">Arrow Popover</Text>
114
- <Text size="sm">
114
+ <Text typography="body2">
115
115
  This popover includes an arrow pointing to the anchor element.
116
116
  </Text>
117
117
  <Button size="sm" onPress={() => setArrowOpen(false)}>
@@ -122,25 +122,25 @@ export const PopoverExamples = () => {
122
122
  </View>
123
123
 
124
124
  {/* Features Description */}
125
- <View spacing="md">
126
- <Text size="md" weight="semibold">Features</Text>
127
- <View spacing="sm">
128
- <Text size="sm" color="secondary">
125
+ <View gap="md">
126
+ <Text typography="subtitle1">Features</Text>
127
+ <View gap="sm">
128
+ <Text typography="caption" color="secondary">
129
129
  • Automatically positions within viewport bounds
130
130
  </Text>
131
- <Text size="sm" color="secondary">
131
+ <Text typography="caption" color="secondary">
132
132
  • 12 placement options (top, bottom, left, right with start/end variants)
133
133
  </Text>
134
- <Text size="sm" color="secondary">
134
+ <Text typography="caption" color="secondary">
135
135
  • Optional arrow pointing to anchor element
136
136
  </Text>
137
- <Text size="sm" color="secondary">
137
+ <Text typography="caption" color="secondary">
138
138
  • Click outside or escape key to close
139
139
  </Text>
140
- <Text size="sm" color="secondary">
140
+ <Text typography="caption" color="secondary">
141
141
  • Smooth animations and transitions
142
142
  </Text>
143
- <Text size="sm" color="secondary">
143
+ <Text typography="caption" color="secondary">
144
144
  • Follows anchor element on scroll/resize (web)
145
145
  </Text>
146
146
  </View>
package/src/examples/ProgressExamples.tsx CHANGED
@@ -15,12 +15,12 @@ export const ProgressExamples: React.FC = () => {
15
15
 
16
16
  return (
17
17
  <Screen background="primary" padding="lg">
18
- <View spacing="lg">
19
- <Text size="xl" weight="bold">Progress Examples</Text>
18
+ <View gap="lg">
19
+ <Text typography="h3">Progress Examples</Text>
20
20
 
21
- <View spacing="md">
22
- <Text size="lg" weight="semibold">Linear Progress</Text>
23
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
21
+ <View gap="md">
22
+ <Text typography="h5">Linear Progress</Text>
23
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
24
24
  <Progress value={25} />
25
25
  <Progress value={50} />
26
26
  <Progress value={75} />
@@ -28,18 +28,18 @@ export const ProgressExamples: React.FC = () => {
28
28
  </View>
29
29
  </View>
30
30
 
31
- <View spacing="md">
32
- <Text size="lg" weight="semibold">Sizes</Text>
33
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
31
+ <View gap="md">
32
+ <Text typography="h5">Sizes</Text>
33
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
34
34
  <Progress value={60} size="sm" />
35
35
  <Progress value={60} size="md" />
36
36
  <Progress value={60} size="lg" />
37
37
  </View>
38
38
  </View>
39
39
 
40
- <View spacing="md">
41
- <Text size="lg" weight="semibold">Intent Colors</Text>
42
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
40
+ <View gap="md">
41
+ <Text typography="h5">Intent Colors</Text>
42
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
43
43
  <Progress value={70} intent="primary" />
44
44
  <Progress value={70} intent="success" />
45
45
  <Progress value={70} intent="warning" />
@@ -48,76 +48,76 @@ export const ProgressExamples: React.FC = () => {
48
48
  </View>
49
49
  </View>
50
50
 
51
- <View spacing="md">
52
- <Text size="lg" weight="semibold">With Labels</Text>
53
- <View spacing="sm">
51
+ <View gap="md">
52
+ <Text typography="h5">With Labels</Text>
53
+ <View gap="sm">
54
54
  <Progress value={30} showLabel />
55
55
  <Progress value={60} showLabel label="Loading..." />
56
56
  <Progress value={90} showLabel label="Almost done!" />
57
57
  </View>
58
58
  </View>
59
59
 
60
- <View spacing="md">
61
- <Text size="lg" weight="semibold">Indeterminate</Text>
62
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
60
+ <View gap="md">
61
+ <Text typography="h5">Indeterminate</Text>
62
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
63
63
  <Progress indeterminate />
64
64
  <Progress indeterminate intent="success" />
65
65
  <Progress indeterminate size="lg" intent="warning" />
66
66
  </View>
67
67
  </View>
68
68
 
69
- <View spacing="md">
70
- <Text size="lg" weight="semibold">Circular Progress</Text>
71
- <View spacing="sm" style={{ flexDirection: 'row', gap: 16 }}>
69
+ <View gap="md">
70
+ <Text typography="h5">Circular Progress</Text>
71
+ <View gap="sm" style={{ flexDirection: 'row', gap: 16 }}>
72
72
  <Progress variant="circular" value={25} size="sm" />
73
73
  <Progress variant="circular" value={50} size="md" />
74
74
  <Progress variant="circular" value={75} size="lg" />
75
75
  </View>
76
76
  </View>
77
77
 
78
- <View spacing="md">
79
- <Text size="lg" weight="semibold">Circular with Labels</Text>
80
- <View spacing="sm" style={{ flexDirection: 'row', gap: 16 }}>
78
+ <View gap="md">
79
+ <Text typography="h5">Circular with Labels</Text>
80
+ <View gap="sm" style={{ flexDirection: 'row', gap: 16 }}>
81
81
  <Progress variant="circular" value={30} showLabel size="md" />
82
82
  <Progress variant="circular" value={60} showLabel size="lg" intent="success" />
83
83
  </View>
84
84
  </View>
85
85
 
86
- <View spacing="md">
87
- <Text size="lg" weight="semibold">Circular Indeterminate</Text>
88
- <View spacing="sm" style={{ flexDirection: 'row', gap: 16 }}>
86
+ <View gap="md">
87
+ <Text typography="h5">Circular Indeterminate</Text>
88
+ <View gap="sm" style={{ flexDirection: 'row', gap: 16 }}>
89
89
  <Progress variant="circular" indeterminate size="sm" />
90
90
  <Progress variant="circular" indeterminate size="md" intent="primary" />
91
91
  <Progress variant="circular" indeterminate size="lg" intent="warning" />
92
92
  </View>
93
93
  </View>
94
94
 
95
- <View spacing="md">
96
- <Text size="lg" weight="semibold">Rounded vs Straight</Text>
97
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
98
- <View spacing="xs">
99
- <Text size="sm">Rounded (default)</Text>
95
+ <View gap="md">
96
+ <Text typography="h5">Rounded vs Straight</Text>
97
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
98
+ <View gap="xs">
99
+ <Text typography="body2">Rounded (default)</Text>
100
100
  <Progress value={70} rounded={true} />
101
101
  </View>
102
- <View spacing="xs">
103
- <Text size="sm">Straight edges</Text>
102
+ <View gap="xs">
103
+ <Text typography="body2">Straight edges</Text>
104
104
  <Progress value={70} rounded={false} />
105
105
  </View>
106
106
  </View>
107
107
  </View>
108
108
 
109
- <View spacing="md">
110
- <Text size="lg" weight="semibold">Dynamic Progress</Text>
109
+ <View gap="md">
110
+ <Text typography="h5">Dynamic Progress</Text>
111
111
  <Progress value={dynamicValue} showLabel />
112
- <Text size="sm" color="secondary">Automatically updating every second</Text>
112
+ <Text typography="caption" color="secondary">Automatically updating every second</Text>
113
113
  </View>
114
114
 
115
- <View spacing="md">
116
- <Text size="lg" weight="semibold">Interactive Circular Progress</Text>
117
- <View spacing="sm">
115
+ <View gap="md">
116
+ <Text typography="h5">Interactive Circular Progress</Text>
117
+ <View gap="sm">
118
118
  <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
119
119
  <Progress variant="circular" value={interactiveValue} showLabel size="lg" />
120
- <View spacing="sm">
120
+ <View gap="sm">
121
121
  <Button size="sm" onPress={() => setInteractiveValue(Math.max(0, interactiveValue - 10))}>
122
122
  -10
123
123
  </Button>
@@ -126,7 +126,7 @@ export const ProgressExamples: React.FC = () => {
126
126
  </Button>
127
127
  </View>
128
128
  </View>
129
- <Text size="sm" color="secondary">Click buttons to change value</Text>
129
+ <Text typography="caption" color="secondary">Click buttons to change value</Text>
130
130
  </View>
131
131
  </View>
132
132
  </View>
package/src/examples/RadioButtonExamples.tsx CHANGED
@@ -10,21 +10,21 @@ export const RadioButtonExamples: React.FC = () => {
10
10
 
11
11
  return (
12
12
  <Screen background="primary" padding="lg">
13
- <View spacing="lg">
14
- <Text size="xl" weight="bold">RadioButton Examples</Text>
13
+ <View gap="lg">
14
+ <Text typography="h3">RadioButton Examples</Text>
15
15
 
16
- <View spacing="md">
17
- <Text size="lg" weight="semibold">Basic RadioGroup</Text>
16
+ <View gap="md">
17
+ <Text typography="h5">Basic RadioGroup</Text>
18
18
  <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
19
19
  <RadioButton value="option1" label="Option 1" />
20
20
  <RadioButton value="option2" label="Option 2" />
21
21
  <RadioButton value="option3" label="Option 3" />
22
22
  </RadioGroup>
23
- <Text size="sm" color="secondary">Selected: {selectedValue}</Text>
23
+ <Text typography="caption" color="secondary">Selected: {selectedValue}</Text>
24
24
  </View>
25
25
 
26
- <View spacing="md">
27
- <Text size="lg" weight="semibold">Horizontal RadioGroup</Text>
26
+ <View gap="md">
27
+ <Text typography="h5">Horizontal RadioGroup</Text>
28
28
  <RadioGroup
29
29
  value={selectedColor}
30
30
  onValueChange={setSelectedColor}
@@ -34,11 +34,11 @@ export const RadioButtonExamples: React.FC = () => {
34
34
  <RadioButton value="green" label="Green" />
35
35
  <RadioButton value="blue" label="Blue" />
36
36
  </RadioGroup>
37
- <Text size="sm" color="secondary">Selected: {selectedColor}</Text>
37
+ <Text typography="caption" color="secondary">Selected: {selectedColor}</Text>
38
38
  </View>
39
39
 
40
- <View spacing="md">
41
- <Text size="lg" weight="semibold">With Disabled Options</Text>
40
+ <View gap="md">
41
+ <Text typography="h5">With Disabled Options</Text>
42
42
  <RadioGroup value={selectedSize} onValueChange={setSelectedSize}>
43
43
  <RadioButton value="sm" label="Small" />
44
44
  <RadioButton value="md" label="Medium" />
@@ -47,8 +47,8 @@ export const RadioButtonExamples: React.FC = () => {
47
47
  </RadioGroup>
48
48
  </View>
49
49
 
50
- <View spacing="md">
51
- <Text size="lg" weight="semibold">Disabled Group</Text>
50
+ <View gap="md">
51
+ <Text typography="h5">Disabled Group</Text>
52
52
  <RadioGroup value="option1" disabled>
53
53
  <RadioButton value="option1" label="Option A" />
54
54
  <RadioButton value="option2" label="Option B" />
@@ -56,9 +56,9 @@ export const RadioButtonExamples: React.FC = () => {
56
56
  </RadioGroup>
57
57
  </View>
58
58
 
59
- <View spacing="md">
60
- <Text size="lg" weight="semibold">Sizes</Text>
61
- <View spacing="sm">
59
+ <View gap="md">
60
+ <Text typography="h5">Sizes</Text>
61
+ <View gap="sm">
62
62
  <RadioButton
63
63
  value="sm"
64
64
  label="Small"
@@ -83,9 +83,9 @@ export const RadioButtonExamples: React.FC = () => {
83
83
  </View>
84
84
  </View>
85
85
 
86
- <View spacing="md">
87
- <Text size="lg" weight="semibold">Intents</Text>
88
- <View spacing="sm">
86
+ <View gap="md">
87
+ <Text typography="h5">Intents</Text>
88
+ <View gap="sm">
89
89
  <RadioButton
90
90
  value="primary"
91
91
  label="Primary"
@@ -124,9 +124,9 @@ export const RadioButtonExamples: React.FC = () => {
124
124
  </View>
125
125
  </View>
126
126
 
127
- <View spacing="md">
128
- <Text size="lg" weight="semibold">Standalone RadioButtons</Text>
129
- <View spacing="sm">
127
+ <View gap="md">
128
+ <Text typography="h5">Standalone RadioButtons</Text>
129
+ <View gap="sm">
130
130
  <RadioButton
131
131
  value="standalone1"
132
132
  label="Unchecked"
package/src/examples/SVGImageExamples.tsx CHANGED
@@ -6,15 +6,15 @@ import testLogo from './test-logo.svg';
6
6
  export const SVGImageExamples = () => {
7
7
  return (
8
8
  <Screen background="primary" padding="lg">
9
- <View spacing="none">
10
- <Text size="lg" weight="bold" align="center">
9
+ <View gap="xl">
10
+ <Text typography="h4" align="center">
11
11
  SVG Image Examples
12
12
  </Text>
13
13
 
14
14
  {/* Local SVG File Example */}
15
- <View spacing="md">
16
- <Text size="md" weight="semibold">Loading Local SVG File</Text>
17
- <Text size="sm">
15
+ <View gap="md">
16
+ <Text typography="subtitle1">Loading Local SVG File</Text>
17
+ <Text typography="body2">
18
18
  Using the test-logo.svg file - works on web, limited support on React Native
19
19
  </Text>
20
20
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -41,9 +41,9 @@ export const SVGImageExamples = () => {
41
41
  </View>
42
42
 
43
43
  {/* Intent Colors */}
44
- <View spacing="md">
45
- <Text size="md" weight="semibold">Intent Colors</Text>
46
- <Text size="sm">
44
+ <View gap="md">
45
+ <Text typography="subtitle1">Intent Colors</Text>
46
+ <Text typography="body2">
47
47
  SVG images with theme-based coloring
48
48
  </Text>
49
49
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -75,9 +75,9 @@ export const SVGImageExamples = () => {
75
75
  </View>
76
76
 
77
77
  {/* Custom Colors */}
78
- <View spacing="md">
79
- <Text size="md" weight="semibold">Custom Colors</Text>
80
- <Text size="sm">
78
+ <View gap="md">
79
+ <Text typography="subtitle1">Custom Colors</Text>
80
+ <Text typography="body2">
81
81
  Direct color specification
82
82
  </Text>
83
83
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -103,9 +103,9 @@ export const SVGImageExamples = () => {
103
103
  </View>
104
104
 
105
105
  {/* Remote URL Example */}
106
- <View spacing="md">
107
- <Text size="md" weight="semibold">Loading from URL</Text>
108
- <Text size="sm">
106
+ <View gap="md">
107
+ <Text typography="subtitle1">Loading from URL</Text>
108
+ <Text typography="body2">
109
109
  SVG images loaded from remote URLs (web only for security)
110
110
  </Text>
111
111
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -130,9 +130,9 @@ export const SVGImageExamples = () => {
130
130
  </View>
131
131
 
132
132
  {/* Resize Modes */}
133
- <View spacing="md">
134
- <Text size="md" weight="semibold">Resize Modes</Text>
135
- <Text size="sm">
133
+ <View gap="md">
134
+ <Text typography="subtitle1">Resize Modes</Text>
135
+ <Text typography="body2">
136
136
  Different ways to fit SVG images in containers
137
137
  </Text>
138
138
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -164,22 +164,22 @@ export const SVGImageExamples = () => {
164
164
  </View>
165
165
 
166
166
  {/* Usage Tips */}
167
- <View spacing="md">
168
- <Text size="md" weight="semibold">Usage Tips</Text>
169
- <View spacing="sm">
170
- <Text size="sm">
167
+ <View gap="md">
168
+ <Text typography="subtitle1">Usage Tips</Text>
169
+ <View gap="sm">
170
+ <Text typography="body2">
171
171
  • <Text weight="semibold">Local files:</Text> Use relative paths for bundled SVG files
172
172
  </Text>
173
- <Text size="sm">
173
+ <Text typography="body2">
174
174
  • <Text weight="semibold">Remote URLs:</Text> Use {`{ uri: "https://..." }`} format
175
175
  </Text>
176
- <Text size="sm">
176
+ <Text typography="body2">
177
177
  • <Text weight="semibold">React Native:</Text> Local SVGs have limited support - use remote URLs or convert to PNG
178
178
  </Text>
179
- <Text size="sm">
179
+ <Text typography="body2">
180
180
  • <Text weight="semibold">Coloring:</Text> Works best with single-color SVG icons
181
181
  </Text>
182
- <Text size="sm">
182
+ <Text typography="body2">
183
183
  • <Text weight="semibold">Performance:</Text> Cache remote SVGs for better performance
184
184
  </Text>
185
185
  </View>