@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/ImageExamples.tsx CHANGED
@@ -5,11 +5,11 @@ import Image from '../Image';
5
5
  export const ImageExamples: React.FC = () => {
6
6
  return (
7
7
  <Screen background="primary" padding="lg">
8
- <View spacing="lg">
9
- <Text size="xl" weight="bold">Image Examples</Text>
8
+ <View gap="lg">
9
+ <Text typography="h3">Image Examples</Text>
10
10
 
11
- <View spacing="md">
12
- <Text size="lg" weight="semibold">Basic Image</Text>
11
+ <View gap="md">
12
+ <Text typography="h5">Basic Image</Text>
13
13
  <Image
14
14
  source="https://picsum.photos/400/300"
15
15
  alt="Random placeholder image"
@@ -18,10 +18,10 @@ export const ImageExamples: React.FC = () => {
18
18
  />
19
19
  </View>
20
20
 
21
- <View spacing="md">
22
- <Text size="lg" weight="semibold">Object Fit Variants</Text>
23
- <View spacing="sm">
24
- <Text size="sm" weight="medium">Cover (default)</Text>
21
+ <View gap="md">
22
+ <Text typography="h5">Object Fit Variants</Text>
23
+ <View gap="sm">
24
+ <Text typography="body2">Cover (default)</Text>
25
25
  <Image
26
26
  source="https://picsum.photos/800/400"
27
27
  alt="Cover example"
@@ -30,7 +30,7 @@ export const ImageExamples: React.FC = () => {
30
30
  objectFit="cover"
31
31
  />
32
32
 
33
- <Text size="sm" weight="medium">Contain</Text>
33
+ <Text typography="body2">Contain</Text>
34
34
  <Image
35
35
  source="https://picsum.photos/800/400"
36
36
  alt="Contain example"
@@ -39,7 +39,7 @@ export const ImageExamples: React.FC = () => {
39
39
  objectFit="contain"
40
40
  />
41
41
 
42
- <Text size="sm" weight="medium">Fill</Text>
42
+ <Text typography="body2">Fill</Text>
43
43
  <Image
44
44
  source="https://picsum.photos/800/400"
45
45
  alt="Fill example"
@@ -50,10 +50,10 @@ export const ImageExamples: React.FC = () => {
50
50
  </View>
51
51
  </View>
52
52
 
53
- <View spacing="md">
54
- <Text size="lg" weight="semibold">Aspect Ratio</Text>
55
- <View spacing="sm">
56
- <Text size="sm" weight="medium">16:9 Aspect Ratio</Text>
53
+ <View gap="md">
54
+ <Text typography="h5">Aspect Ratio</Text>
55
+ <View gap="sm">
56
+ <Text typography="body2">16:9 Aspect Ratio</Text>
57
57
  <Image
58
58
  source="https://picsum.photos/1600/900"
59
59
  alt="16:9 aspect ratio"
@@ -61,7 +61,7 @@ export const ImageExamples: React.FC = () => {
61
61
  aspectRatio={16 / 9}
62
62
  />
63
63
 
64
- <Text size="sm" weight="medium">1:1 Square</Text>
64
+ <Text typography="body2">1:1 Square</Text>
65
65
  <Image
66
66
  source="https://picsum.photos/600/600"
67
67
  alt="Square aspect ratio"
@@ -71,11 +71,11 @@ export const ImageExamples: React.FC = () => {
71
71
  </View>
72
72
  </View>
73
73
 
74
- <View spacing="md">
75
- <Text size="lg" weight="semibold">Border Radius</Text>
74
+ <View gap="md">
75
+ <Text typography="h5">Border Radius</Text>
76
76
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
77
- <View spacing="xs">
78
- <Text size="sm" weight="medium">Rounded (8px)</Text>
77
+ <View gap="xs">
78
+ <Text typography="body2">Rounded (8px)</Text>
79
79
  <Image
80
80
  source="https://picsum.photos/200/200?random=1"
81
81
  alt="Rounded corners"
@@ -85,8 +85,8 @@ export const ImageExamples: React.FC = () => {
85
85
  />
86
86
  </View>
87
87
 
88
- <View spacing="xs">
89
- <Text size="sm" weight="medium">Very Rounded (24px)</Text>
88
+ <View gap="xs">
89
+ <Text typography="body2">Very Rounded (24px)</Text>
90
90
  <Image
91
91
  source="https://picsum.photos/200/200?random=2"
92
92
  alt="Very rounded corners"
@@ -96,8 +96,8 @@ export const ImageExamples: React.FC = () => {
96
96
  />
97
97
  </View>
98
98
 
99
- <View spacing="xs">
100
- <Text size="sm" weight="medium">Circle (50%)</Text>
99
+ <View gap="xs">
100
+ <Text typography="body2">Circle (50%)</Text>
101
101
  <Image
102
102
  source="https://picsum.photos/200/200?random=3"
103
103
  alt="Circle"
@@ -109,10 +109,10 @@ export const ImageExamples: React.FC = () => {
109
109
  </View>
110
110
  </View>
111
111
 
112
- <View spacing="md">
113
- <Text size="lg" weight="semibold">Lazy Loading</Text>
114
- <Text size="sm" color="secondary">Images load as they scroll into view</Text>
115
- <View spacing="sm">
112
+ <View gap="md">
113
+ <Text typography="h5">Lazy Loading</Text>
114
+ <Text typography="caption" color="secondary">Images load as they scroll into view</Text>
115
+ <View gap="sm">
116
116
  {[1, 2, 3, 4, 5].map((i) => (
117
117
  <Image
118
118
  key={i}
@@ -126,8 +126,8 @@ export const ImageExamples: React.FC = () => {
126
126
  </View>
127
127
  </View>
128
128
 
129
- <View spacing="md">
130
- <Text size="lg" weight="semibold">With Custom Placeholder</Text>
129
+ <View gap="md">
130
+ <Text typography="h5">With Custom Placeholder</Text>
131
131
  <Image
132
132
  source="https://picsum.photos/400/300?random=20"
133
133
  alt="Custom placeholder"
@@ -141,9 +141,9 @@ export const ImageExamples: React.FC = () => {
141
141
  />
142
142
  </View>
143
143
 
144
- <View spacing="md">
145
- <Text size="lg" weight="semibold">Error Handling</Text>
146
- <Text size="sm" color="secondary">Image with broken URL shows fallback</Text>
144
+ <View gap="md">
145
+ <Text typography="h5">Error Handling</Text>
146
+ <Text typography="caption" color="secondary">Image with broken URL shows fallback</Text>
147
147
  <Image
148
148
  source="https://broken-url-that-does-not-exist.com/image.jpg"
149
149
  alt="Broken image"
@@ -157,8 +157,8 @@ export const ImageExamples: React.FC = () => {
157
157
  />
158
158
  </View>
159
159
 
160
- <View spacing="md">
161
- <Text size="lg" weight="semibold">Responsive Width</Text>
160
+ <View gap="md">
161
+ <Text typography="h5">Responsive Width</Text>
162
162
  <Image
163
163
  source="https://picsum.photos/1200/400"
164
164
  alt="Responsive image"
package/src/examples/InputExamples.tsx CHANGED
@@ -11,15 +11,15 @@ export const InputExamples = () => {
11
11
 
12
12
  return (
13
13
  <Screen background="primary" padding="lg">
14
- <View spacing="none">
15
- <Text size="lg" weight="bold" align="center">
14
+ <View gap="xl">
15
+ <Text typography="h4" align="center">
16
16
  Input Examples
17
17
  </Text>
18
18
 
19
19
  {/* With Icons */}
20
- <View spacing="md">
21
- <Text size="md" weight="semibold">With Icons</Text>
22
- <View spacing="sm" style={{ gap: 10 }}>
20
+ <View gap="md">
21
+ <Text typography="subtitle1">With Icons</Text>
22
+ <View gap="sm" style={{ gap: 10 }}>
23
23
  <Input
24
24
  leftIcon="email"
25
25
  value={emailValue}
@@ -61,9 +61,9 @@ export const InputExamples = () => {
61
61
  </View>
62
62
 
63
63
  {/* Input Types */}
64
- <View spacing="md">
65
- <Text size="md" weight="semibold">Input Types</Text>
66
- <View spacing="sm" style={{ gap: 10 }}>
64
+ <View gap="md">
65
+ <Text typography="subtitle1">Input Types</Text>
66
+ <View gap="sm" style={{ gap: 10 }}>
67
67
  <Input
68
68
  value={textValue}
69
69
  onChangeText={setTextValue}
@@ -95,9 +95,9 @@ export const InputExamples = () => {
95
95
  </View>
96
96
 
97
97
  {/* Input Sizes */}
98
- <View spacing="md">
99
- <Text size="md" weight="semibold">Sizes</Text>
100
- <View spacing="sm" style={{ gap: 10 }}>
98
+ <View gap="md">
99
+ <Text typography="subtitle1">Sizes</Text>
100
+ <View gap="sm" style={{ gap: 10 }}>
101
101
  <Input
102
102
  leftIcon="email"
103
103
  placeholder="Small input"
@@ -117,9 +117,9 @@ export const InputExamples = () => {
117
117
  </View>
118
118
 
119
119
  {/* Input Variants */}
120
- <View spacing="md">
121
- <Text size="md" weight="semibold">Variants</Text>
122
- <View spacing="sm" style={{ gap: 10 }}>
120
+ <View gap="md">
121
+ <Text typography="subtitle1">Variants</Text>
122
+ <View gap="sm" style={{ gap: 10 }}>
123
123
  <Input
124
124
  leftIcon="magnify"
125
125
  placeholder="Outlined variant"
@@ -139,9 +139,9 @@ export const InputExamples = () => {
139
139
  </View>
140
140
 
141
141
  {/* Input States */}
142
- <View spacing="md">
143
- <Text size="md" weight="semibold">States</Text>
144
- <View spacing="sm" style={{ gap: 10 }}>
142
+ <View gap="md">
143
+ <Text typography="subtitle1">States</Text>
144
+ <View gap="sm" style={{ gap: 10 }}>
145
145
  <Input
146
146
  leftIcon="account"
147
147
  placeholder="Normal state"
@@ -165,9 +165,9 @@ export const InputExamples = () => {
165
165
  </View>
166
166
 
167
167
  {/* Auto-capitalization Examples */}
168
- <View spacing="md">
169
- <Text size="md" weight="semibold">Auto-capitalization</Text>
170
- <View spacing="sm" style={{ gap: 10 }}>
168
+ <View gap="md">
169
+ <Text typography="subtitle1">Auto-capitalization</Text>
170
+ <View gap="sm" style={{ gap: 10 }}>
171
171
  <Input
172
172
  placeholder="No capitalization"
173
173
  autoCapitalize="none"
package/src/examples/LinkExamples.tsx CHANGED
@@ -8,14 +8,14 @@ export const LinkExamples = () => {
8
8
 
9
9
  return (
10
10
  <Screen background="primary">
11
- <View spacing="none">
12
- <Text size="lg" weight="bold" align="center">
11
+ <View gap="xl">
12
+ <Text typography="h4" align="center">
13
13
  Link Examples
14
14
  </Text>
15
15
 
16
16
  {/* Basic Text Links */}
17
- <View spacing="md">
18
- <Text size="md" weight="semibold">Basic Text Links</Text>
17
+ <View gap="md">
18
+ <Text typography="subtitle1">Basic Text Links</Text>
19
19
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
20
20
  <Link to="/home" onPress={() => handlePress('home')}>
21
21
  <Text color="primary">Go to Home</Text>
@@ -30,8 +30,8 @@ export const LinkExamples = () => {
30
30
  </View>
31
31
 
32
32
  {/* Links with Path Variables */}
33
- <View spacing="md">
34
- <Text size="md" weight="semibold">Links with Path Variables</Text>
33
+ <View gap="md">
34
+ <Text typography="subtitle1">Links with Path Variables</Text>
35
35
  <View style={{ flexDirection: 'column', gap: 8 }}>
36
36
  <Link
37
37
  to="/user/:id"
@@ -58,8 +58,8 @@ export const LinkExamples = () => {
58
58
  </View>
59
59
 
60
60
  {/* Links Wrapping Buttons */}
61
- <View spacing="md">
62
- <Text size="md" weight="semibold">Links Wrapping Buttons</Text>
61
+ <View gap="md">
62
+ <Text typography="subtitle1">Links Wrapping Buttons</Text>
63
63
  <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
64
64
  <Link to="/dashboard" onPress={() => handlePress('dashboard-btn')}>
65
65
  <Button type="contained" intent="primary">
@@ -80,8 +80,8 @@ export const LinkExamples = () => {
80
80
  </View>
81
81
 
82
82
  {/* Links with Icons and Text */}
83
- <View spacing="md">
84
- <Text size="md" weight="semibold">Links with Icons</Text>
83
+ <View gap="md">
84
+ <Text typography="subtitle1">Links with Icons</Text>
85
85
  <View style={{ flexDirection: 'column', gap: 12 }}>
86
86
  <Link to="/notifications" onPress={() => handlePress('notifications')}>
87
87
  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
@@ -105,8 +105,8 @@ export const LinkExamples = () => {
105
105
  </View>
106
106
 
107
107
  {/* Disabled Links */}
108
- <View spacing="md">
109
- <Text size="md" weight="semibold">Disabled Links</Text>
108
+ <View gap="md">
109
+ <Text typography="subtitle1">Disabled Links</Text>
110
110
  <View style={{ flexDirection: 'column', gap: 12 }}>
111
111
  <Link to="/restricted" disabled onPress={() => handlePress('disabled-text')}>
112
112
  <Text color="secondary">Restricted Area (Disabled)</Text>
@@ -120,13 +120,13 @@ export const LinkExamples = () => {
120
120
  </View>
121
121
 
122
122
  {/* Links Wrapping Cards */}
123
- <View spacing="md">
124
- <Text size="md" weight="semibold">Clickable Cards (Links)</Text>
123
+ <View gap="md">
124
+ <Text typography="subtitle1">Clickable Cards (Links)</Text>
125
125
  <View style={{ flexDirection: 'column', gap: 12 }}>
126
126
  <Link to="/article/1" onPress={() => handlePress('card-1')}>
127
127
  <Card type="outlined" padding="md">
128
- <Text size="md" weight="semibold">Article Title</Text>
129
- <Text size="sm" color="secondary">
128
+ <Text typography="subtitle1">Article Title</Text>
129
+ <Text typography="caption" color="secondary">
130
130
  Click this card to read the full article...
131
131
  </Text>
132
132
  </Card>
@@ -136,8 +136,8 @@ export const LinkExamples = () => {
136
136
  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
137
137
  <Icon name="file-document" size={24} intent="primary" />
138
138
  <View style={{ flex: 1 }}>
139
- <Text size="md" weight="semibold">Documentation</Text>
140
- <Text size="sm" color="secondary">
139
+ <Text typography="subtitle1">Documentation</Text>
140
+ <Text typography="caption" color="secondary">
141
141
  View the complete documentation
142
142
  </Text>
143
143
  </View>
@@ -149,9 +149,9 @@ export const LinkExamples = () => {
149
149
  </View>
150
150
 
151
151
  {/* Navigation Menu Style */}
152
- <View spacing="md">
153
- <Text size="md" weight="semibold">Navigation Menu Style</Text>
154
- <Card type="filled" padding="none">
152
+ <View gap="md">
153
+ <Text typography="subtitle1">Navigation Menu Style</Text>
154
+ <Card type="filled">
155
155
  <Link to="/menu/home" onPress={() => handlePress('menu-home')}>
156
156
  <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16, gap: 12 }}>
157
157
  <Icon name="home" size={20} intent="primary" />
@@ -177,8 +177,8 @@ export const LinkExamples = () => {
177
177
  </View>
178
178
 
179
179
  {/* Styled Links */}
180
- <View spacing="md">
181
- <Text size="md" weight="semibold">Custom Styled Links</Text>
180
+ <View gap="md">
181
+ <Text typography="subtitle1">Custom Styled Links</Text>
182
182
  <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
183
183
  <Link
184
184
  to="/styled/1"
package/src/examples/ListExamples.tsx CHANGED
@@ -8,11 +8,11 @@ export const ListExamples: React.FC = () => {
8
8
 
9
9
  return (
10
10
  <Screen background="primary" padding="lg">
11
- <View spacing="lg">
12
- <Text size="xl" weight="bold">List Examples</Text>
11
+ <View gap="lg">
12
+ <Text typography="h3">List Examples</Text>
13
13
 
14
- <View spacing="md">
15
- <Text size="lg" weight="semibold">Basic List</Text>
14
+ <View gap="md">
15
+ <Text typography="h5">Basic List</Text>
16
16
  <List type="divided">
17
17
  <ListItem label="Item 1" />
18
18
  <ListItem label="Item 2" />
@@ -20,27 +20,27 @@ export const ListExamples: React.FC = () => {
20
20
  </List>
21
21
  </View>
22
22
 
23
- <View spacing="md">
24
- <Text size="lg" weight="semibold">Variants</Text>
25
- <View spacing="sm">
26
- <View spacing="xs">
27
- <Text size="sm" weight="medium">Default</Text>
23
+ <View gap="md">
24
+ <Text typography="h5">Variants</Text>
25
+ <View gap="sm">
26
+ <View gap="xs">
27
+ <Text typography="body2">Default</Text>
28
28
  <List type="default">
29
29
  <ListItem label="Item 1" />
30
30
  <ListItem label="Item 2" />
31
31
  <ListItem label="Item 3" />
32
32
  </List>
33
33
  </View>
34
- <View spacing="xs">
35
- <Text size="sm" weight="medium">Bordered</Text>
34
+ <View gap="xs">
35
+ <Text typography="body2">Bordered</Text>
36
36
  <List type="bordered">
37
37
  <ListItem label="Item 1" />
38
38
  <ListItem label="Item 2" />
39
39
  <ListItem label="Item 3" />
40
40
  </List>
41
41
  </View>
42
- <View spacing="xs">
43
- <Text size="sm" weight="medium">Divided</Text>
42
+ <View gap="xs">
43
+ <Text typography="body2">Divided</Text>
44
44
  <List type="divided">
45
45
  <ListItem label="Item 1" />
46
46
  <ListItem label="Item 2" />
@@ -50,9 +50,9 @@ export const ListExamples: React.FC = () => {
50
50
  </View>
51
51
  </View>
52
52
 
53
- <View spacing="md">
54
- <Text size="lg" weight="semibold">Sizes</Text>
55
- <View spacing="sm">
53
+ <View gap="md">
54
+ <Text typography="h5">Sizes</Text>
55
+ <View gap="sm">
56
56
  <List type="bordered" size="sm">
57
57
  <ListItem label="Small Item" />
58
58
  <ListItem label="Small Item" />
@@ -68,8 +68,8 @@ export const ListExamples: React.FC = () => {
68
68
  </View>
69
69
  </View>
70
70
 
71
- <View spacing="md">
72
- <Text size="lg" weight="semibold">Clickable List</Text>
71
+ <View gap="md">
72
+ <Text typography="h5">Clickable List</Text>
73
73
  <List type="bordered">
74
74
  <ListItem
75
75
  label="Home"
@@ -87,13 +87,13 @@ export const ListExamples: React.FC = () => {
87
87
  onPress={() => setSelectedItem('profile')}
88
88
  />
89
89
  </List>
90
- <Text size="sm" color="secondary">
90
+ <Text typography="caption" color="secondary">
91
91
  Selected: {selectedItem}
92
92
  </Text>
93
93
  </View>
94
94
 
95
- <View spacing="md">
96
- <Text size="lg" weight="semibold">With Leading Elements</Text>
95
+ <View gap="md">
96
+ <Text typography="h5">With Leading Elements</Text>
97
97
  <List type="divided">
98
98
  <ListItem
99
99
  label="Dashboard"
@@ -113,8 +113,8 @@ export const ListExamples: React.FC = () => {
113
113
  </List>
114
114
  </View>
115
115
 
116
- <View spacing="md">
117
- <Text size="lg" weight="semibold">With Trailing Elements</Text>
116
+ <View gap="md">
117
+ <Text typography="h5">With Trailing Elements</Text>
118
118
  <List type="bordered">
119
119
  <ListItem
120
120
  label="Notifications"
@@ -129,13 +129,13 @@ export const ListExamples: React.FC = () => {
129
129
  <ListItem
130
130
  label="Updates"
131
131
  leading="refresh"
132
- trailing={<Text size="sm" color="secondary">New</Text>}
132
+ trailing={<Text typography="caption" color="secondary">New</Text>}
133
133
  />
134
134
  </List>
135
135
  </View>
136
136
 
137
- <View spacing="md">
138
- <Text size="lg" weight="semibold">Navigation Sidebar</Text>
137
+ <View gap="md">
138
+ <Text typography="h5">Navigation Sidebar</Text>
139
139
  <List type="bordered">
140
140
  <ListItem
141
141
  label="Dashboard"
@@ -164,8 +164,8 @@ export const ListExamples: React.FC = () => {
164
164
  </List>
165
165
  </View>
166
166
 
167
- <View spacing="md">
168
- <Text size="lg" weight="semibold">With Sections</Text>
167
+ <View gap="md">
168
+ <Text typography="h5">With Sections</Text>
169
169
  <List type="divided">
170
170
  <ListSection title="Main">
171
171
  <ListItem
@@ -206,8 +206,8 @@ export const ListExamples: React.FC = () => {
206
206
  </List>
207
207
  </View>
208
208
 
209
- <View spacing="md">
210
- <Text size="lg" weight="semibold">Indented Items</Text>
209
+ <View gap="md">
210
+ <Text typography="h5">Indented Items</Text>
211
211
  <List type="bordered">
212
212
  <ListItem label="Parent Item 1" />
213
213
  <ListItem label="Child Item 1.1" indent={1} />
@@ -218,8 +218,8 @@ export const ListExamples: React.FC = () => {
218
218
  </List>
219
219
  </View>
220
220
 
221
- <View spacing="md">
222
- <Text size="lg" weight="semibold">Disabled Items</Text>
221
+ <View gap="md">
222
+ <Text typography="h5">Disabled Items</Text>
223
223
  <List type="bordered">
224
224
  <ListItem
225
225
  label="Enabled Item"
@@ -237,32 +237,32 @@ export const ListExamples: React.FC = () => {
237
237
  </List>
238
238
  </View>
239
239
 
240
- <View spacing="md">
241
- <Text size="lg" weight="semibold">Rich Content</Text>
240
+ <View gap="md">
241
+ <Text typography="h5">Rich Content</Text>
242
242
  <List type="bordered">
243
243
  <ListItem
244
244
  leading="account-circle"
245
- trailing={<Text size="sm" color="secondary">Admin</Text>}
245
+ trailing={<Text typography="caption" color="secondary">Admin</Text>}
246
246
  >
247
- <View>
247
+ <View gap="xl">
248
248
  <Text weight="semibold">John Doe</Text>
249
- <Text size="sm" color="secondary">john.doe@example.com</Text>
249
+ <Text typography="caption" color="secondary">john.doe@example.com</Text>
250
250
  </View>
251
251
  </ListItem>
252
252
  <ListItem
253
253
  leading="account-circle"
254
- trailing={<Text size="sm" color="secondary">User</Text>}
254
+ trailing={<Text typography="caption" color="secondary">User</Text>}
255
255
  >
256
- <View>
256
+ <View gap="xl">
257
257
  <Text weight="semibold">Jane Smith</Text>
258
- <Text size="sm" color="secondary">jane.smith@example.com</Text>
258
+ <Text typography="caption" color="secondary">jane.smith@example.com</Text>
259
259
  </View>
260
260
  </ListItem>
261
261
  </List>
262
262
  </View>
263
263
 
264
- <View spacing="md">
265
- <Text size="lg" weight="semibold">Active States</Text>
264
+ <View gap="md">
265
+ <Text typography="h5">Active States</Text>
266
266
  <List type="bordered">
267
267
  <ListItem
268
268
  label="Normal Item"
package/src/examples/MenuExamples.tsx CHANGED
@@ -49,17 +49,17 @@ export const MenuExamples: React.FC = () => {
49
49
 
50
50
  return (
51
51
  <Screen background="primary" padding="lg">
52
- <View spacing="lg">
53
- <Text size="xl" weight="bold">Menu Examples</Text>
52
+ <View gap="lg">
53
+ <Text typography="h3">Menu Examples</Text>
54
54
 
55
55
  {selectedAction && (
56
- <View spacing="sm" style={{ padding: 12, backgroundColor: '#f0f0f0', borderRadius: 8 }}>
56
+ <View gap="sm" style={{ padding: 12, backgroundColor: '#f0f0f0', borderRadius: 8 }}>
57
57
  <Text>Last selected action: <Text weight="bold">{selectedAction}</Text></Text>
58
58
  </View>
59
59
  )}
60
60
 
61
- <View spacing="md">
62
- <Text size="lg" weight="semibold">Basic Menu</Text>
61
+ <View gap="md">
62
+ <Text typography="h5">Basic Menu</Text>
63
63
  <Menu
64
64
  items={basicItems}
65
65
  open={basicMenuOpen}
@@ -71,8 +71,8 @@ export const MenuExamples: React.FC = () => {
71
71
  </Menu>
72
72
  </View>
73
73
 
74
- <View spacing="md">
75
- <Text size="lg" weight="semibold">Placement Options</Text>
74
+ <View gap="md">
75
+ <Text typography="h5">Placement Options</Text>
76
76
  <Menu
77
77
  items={basicItems}
78
78
  open={placementMenuOpen}
@@ -85,8 +85,8 @@ export const MenuExamples: React.FC = () => {
85
85
  </Menu>
86
86
  </View>
87
87
 
88
- <View spacing="md">
89
- <Text size="lg" weight="semibold">With Icons</Text>
88
+ <View gap="md">
89
+ <Text typography="h5">With Icons</Text>
90
90
  <Menu
91
91
  items={iconNameItems}
92
92
  open={iconNameMenuOpen}
@@ -98,8 +98,8 @@ export const MenuExamples: React.FC = () => {
98
98
  </Menu>
99
99
  </View>
100
100
 
101
- <View spacing="md">
102
- <Text size="lg" weight="semibold">Intent Colors</Text>
101
+ <View gap="md">
102
+ <Text typography="h5">Intent Colors</Text>
103
103
  <Menu
104
104
  items={intentItems}
105
105
  open={intentMenuOpen}
@@ -111,8 +111,8 @@ export const MenuExamples: React.FC = () => {
111
111
  </Menu>
112
112
  </View>
113
113
 
114
- <View spacing="md">
115
- <Text size="lg" weight="semibold">With Separators</Text>
114
+ <View gap="md">
115
+ <Text typography="h5">With Separators</Text>
116
116
  <Menu
117
117
  items={separatorItems}
118
118
  open={separatorMenuOpen}
@@ -124,8 +124,8 @@ export const MenuExamples: React.FC = () => {
124
124
  </Menu>
125
125
  </View>
126
126
 
127
- <View spacing="md">
128
- <Text size="lg" weight="semibold">Disabled Items</Text>
127
+ <View gap="md">
128
+ <Text typography="h5">Disabled Items</Text>
129
129
  <Menu
130
130
  items={disabledItems}
131
131
  open={disabledMenuOpen}