@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/SliderExamples.tsx CHANGED
@@ -9,76 +9,76 @@ export const SliderExamples: React.FC = () => {
9
9
 
10
10
  return (
11
11
  <Screen background="primary" padding="lg">
12
- <View spacing="lg">
13
- <Text size="xl" weight="bold">Slider Examples</Text>
12
+ <View gap="lg">
13
+ <Text typography="h3">Slider Examples</Text>
14
14
 
15
- <View spacing="md">
16
- <Text size="lg" weight="semibold">Basic Slider</Text>
15
+ <View gap="md">
16
+ <Text typography="h5">Basic Slider</Text>
17
17
  <Slider
18
18
  value={basicValue}
19
19
  onValueChange={setBasicValue}
20
20
  showValue
21
21
  />
22
- <Text size="sm" color="secondary">Value: {basicValue}</Text>
22
+ <Text typography="caption" color="secondary">Value: {basicValue}</Text>
23
23
  </View>
24
24
 
25
- <View spacing="md">
26
- <Text size="lg" weight="semibold">Sizes</Text>
27
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
28
- <View spacing="xs">
29
- <Text size="sm">Small</Text>
25
+ <View gap="md">
26
+ <Text typography="h5">Sizes</Text>
27
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
28
+ <View gap="xs">
29
+ <Text typography="body2">Small</Text>
30
30
  <Slider defaultValue={30} size="sm" />
31
31
  </View>
32
- <View spacing="xs">
33
- <Text size="sm">Medium (default)</Text>
32
+ <View gap="xs">
33
+ <Text typography="body2">Medium (default)</Text>
34
34
  <Slider defaultValue={50} size="md" />
35
35
  </View>
36
- <View spacing="xs">
37
- <Text size="sm">Large</Text>
36
+ <View gap="xs">
37
+ <Text typography="body2">Large</Text>
38
38
  <Slider defaultValue={70} size="lg" />
39
39
  </View>
40
40
  </View>
41
41
  </View>
42
42
 
43
- <View spacing="md">
44
- <Text size="lg" weight="semibold">Intent Colors</Text>
45
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
46
- <View spacing="xs">
47
- <Text size="sm">Primary</Text>
43
+ <View gap="md">
44
+ <Text typography="h5">Intent Colors</Text>
45
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
46
+ <View gap="xs">
47
+ <Text typography="body2">Primary</Text>
48
48
  <Slider defaultValue={60} intent="primary" />
49
49
  </View>
50
- <View spacing="xs">
51
- <Text size="sm">Success</Text>
50
+ <View gap="xs">
51
+ <Text typography="body2">Success</Text>
52
52
  <Slider defaultValue={60} intent="success" />
53
53
  </View>
54
- <View spacing="xs">
55
- <Text size="sm">Error</Text>
54
+ <View gap="xs">
55
+ <Text typography="body2">Error</Text>
56
56
  <Slider defaultValue={60} intent="error" />
57
57
  </View>
58
- <View spacing="xs">
59
- <Text size="sm">Warning</Text>
58
+ <View gap="xs">
59
+ <Text typography="body2">Warning</Text>
60
60
  <Slider defaultValue={60} intent="warning" />
61
61
  </View>
62
- <View spacing="xs">
63
- <Text size="sm">Neutral</Text>
62
+ <View gap="xs">
63
+ <Text typography="body2">Neutral</Text>
64
64
  <Slider defaultValue={60} intent="neutral" />
65
65
  </View>
66
66
  </View>
67
67
  </View>
68
68
 
69
- <View spacing="md">
70
- <Text size="lg" weight="semibold">With Min/Max Labels</Text>
69
+ <View gap="md">
70
+ <Text typography="h5">With Min/Max Labels</Text>
71
71
  <Slider
72
72
  defaultValue={50}
73
73
  showMinMax
74
74
  />
75
75
  </View>
76
76
 
77
- <View spacing="md">
78
- <Text size="lg" weight="semibold">Custom Range & Step</Text>
79
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
80
- <View spacing="xs">
81
- <Text size="sm">Range: 0-10, Step: 1</Text>
77
+ <View gap="md">
78
+ <Text typography="h5">Custom Range & Step</Text>
79
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
80
+ <View gap="xs">
81
+ <Text typography="body2">Range: 0-10, Step: 1</Text>
82
82
  <Slider
83
83
  min={0}
84
84
  max={10}
@@ -88,8 +88,8 @@ export const SliderExamples: React.FC = () => {
88
88
  showMinMax
89
89
  />
90
90
  </View>
91
- <View spacing="xs">
92
- <Text size="sm">Range: -50 to 50, Step: 5</Text>
91
+ <View gap="xs">
92
+ <Text typography="body2">Range: -50 to 50, Step: 5</Text>
93
93
  <Slider
94
94
  min={-50}
95
95
  max={50}
@@ -102,8 +102,8 @@ export const SliderExamples: React.FC = () => {
102
102
  </View>
103
103
  </View>
104
104
 
105
- <View spacing="md">
106
- <Text size="lg" weight="semibold">With Marks</Text>
105
+ <View gap="md">
106
+ <Text typography="h5">With Marks</Text>
107
107
  <Slider
108
108
  min={0}
109
109
  max={100}
@@ -118,8 +118,8 @@ export const SliderExamples: React.FC = () => {
118
118
  />
119
119
  </View>
120
120
 
121
- <View spacing="md">
122
- <Text size="lg" weight="semibold">Volume Control</Text>
121
+ <View gap="md">
122
+ <Text typography="h5">Volume Control</Text>
123
123
  <Slider
124
124
  value={volumeValue}
125
125
  onValueChange={setVolumeValue}
@@ -135,11 +135,11 @@ export const SliderExamples: React.FC = () => {
135
135
  />
136
136
  </View>
137
137
 
138
- <View spacing="md">
139
- <Text size="lg" weight="semibold">With Icons</Text>
140
- <View spacing="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
141
- <View spacing="xs">
142
- <Text size="sm">Volume with icon</Text>
138
+ <View gap="md">
139
+ <Text typography="h5">With Icons</Text>
140
+ <View gap="sm" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
141
+ <View gap="xs">
142
+ <Text typography="body2">Volume with icon</Text>
143
143
  <Slider
144
144
  defaultValue={60}
145
145
  icon="volume-high"
@@ -147,8 +147,8 @@ export const SliderExamples: React.FC = () => {
147
147
  showMinMax
148
148
  />
149
149
  </View>
150
- <View spacing="xs">
151
- <Text size="sm">Brightness with icon</Text>
150
+ <View gap="xs">
151
+ <Text typography="body2">Brightness with icon</Text>
152
152
  <Slider
153
153
  defaultValue={75}
154
154
  icon="brightness-6"
@@ -156,8 +156,8 @@ export const SliderExamples: React.FC = () => {
156
156
  showMinMax
157
157
  />
158
158
  </View>
159
- <View spacing="xs">
160
- <Text size="sm">Temperature with icon</Text>
159
+ <View gap="xs">
160
+ <Text typography="body2">Temperature with icon</Text>
161
161
  <Slider
162
162
  defaultValue={22}
163
163
  min={10}
@@ -170,8 +170,8 @@ export const SliderExamples: React.FC = () => {
170
170
  </View>
171
171
  </View>
172
172
 
173
- <View spacing="md">
174
- <Text size="lg" weight="semibold">Temperature Control</Text>
173
+ <View gap="md">
174
+ <Text typography="h5">Temperature Control</Text>
175
175
  <Slider
176
176
  value={temperatureValue}
177
177
  onValueChange={setTemperatureValue}
@@ -182,11 +182,11 @@ export const SliderExamples: React.FC = () => {
182
182
  showMinMax
183
183
  intent="warning"
184
184
  />
185
- <Text size="sm" color="secondary">Temperature: {temperatureValue}°C</Text>
185
+ <Text typography="caption" color="secondary">Temperature: {temperatureValue}°C</Text>
186
186
  </View>
187
187
 
188
- <View spacing="md">
189
- <Text size="lg" weight="semibold">Disabled</Text>
188
+ <View gap="md">
189
+ <Text typography="h5">Disabled</Text>
190
190
  <Slider
191
191
  defaultValue={60}
192
192
  disabled
package/src/examples/SwitchExamples.tsx CHANGED
@@ -22,19 +22,19 @@ export const SwitchExamples: React.FC = () => {
22
22
 
23
23
  return (
24
24
  <Screen background="primary" padding="lg">
25
- <View spacing="lg">
26
- <Text size="xl" weight="bold">Switch Examples</Text>
25
+ <View gap="lg">
26
+ <Text typography="h3">Switch Examples</Text>
27
27
 
28
- <View spacing="md">
29
- <Text size="lg" weight="semibold">Basic Switch</Text>
28
+ <View gap="md">
29
+ <Text typography="h5">Basic Switch</Text>
30
30
  <Switch
31
31
  checked={basicChecked}
32
32
  onCheckedChange={setBasicChecked}
33
33
  />
34
34
  </View>
35
35
 
36
- <View spacing="md">
37
- <Text size="lg" weight="semibold">With Label</Text>
36
+ <View gap="md">
37
+ <Text typography="h5">With Label</Text>
38
38
  <Switch
39
39
  checked={labelledChecked}
40
40
  onCheckedChange={setLabelledChecked}
@@ -42,8 +42,8 @@ export const SwitchExamples: React.FC = () => {
42
42
  />
43
43
  </View>
44
44
 
45
- <View spacing="md">
46
- <Text size="lg" weight="semibold">Label Position</Text>
45
+ <View gap="md">
46
+ <Text typography="h5">Label Position</Text>
47
47
  <Switch
48
48
  checked={labelledChecked}
49
49
  onCheckedChange={setLabelledChecked}
@@ -52,9 +52,9 @@ export const SwitchExamples: React.FC = () => {
52
52
  />
53
53
  </View>
54
54
 
55
- <View spacing="md">
56
- <Text size="lg" weight="semibold">Sizes</Text>
57
- <View spacing="sm">
55
+ <View gap="md">
56
+ <Text typography="h5">Sizes</Text>
57
+ <View gap="sm">
58
58
  <Switch
59
59
  checked={basicChecked}
60
60
  onCheckedChange={setBasicChecked}
@@ -76,9 +76,9 @@ export const SwitchExamples: React.FC = () => {
76
76
  </View>
77
77
  </View>
78
78
 
79
- <View spacing="md">
80
- <Text size="lg" weight="semibold">Intent Colors</Text>
81
- <View spacing="sm">
79
+ <View gap="md">
80
+ <Text typography="h5">Intent Colors</Text>
81
+ <View gap="sm">
82
82
  <Switch
83
83
  checked={intentChecked.primary}
84
84
  onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, primary: checked }))}
@@ -112,9 +112,9 @@ export const SwitchExamples: React.FC = () => {
112
112
  </View>
113
113
  </View>
114
114
 
115
- <View spacing="md">
116
- <Text size="lg" weight="semibold">With Icons</Text>
117
- <View spacing="sm">
115
+ <View gap="md">
116
+ <Text typography="h5">With Icons</Text>
117
+ <View gap="sm">
118
118
  <Switch
119
119
  checked={iconChecked.basic}
120
120
  onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, basic: checked }))}
@@ -159,9 +159,9 @@ export const SwitchExamples: React.FC = () => {
159
159
  </View>
160
160
  </View>
161
161
 
162
- <View spacing="md">
163
- <Text size="lg" weight="semibold">Disabled States</Text>
164
- <View spacing="sm">
162
+ <View gap="md">
163
+ <Text typography="h5">Disabled States</Text>
164
+ <View gap="sm">
165
165
  <Switch
166
166
  checked={false}
167
167
  disabled
package/src/examples/TabBarExamples.tsx CHANGED
@@ -28,26 +28,26 @@ export const TabBarExamples: React.FC = () => {
28
28
 
29
29
  return (
30
30
  <Screen background="primary" padding="lg">
31
- <View spacing="lg">
32
- <Text size="xl" weight="bold">TabBar Examples</Text>
31
+ <View gap="lg">
32
+ <Text typography="h3">TabBar Examples</Text>
33
33
 
34
- <View spacing="md">
35
- <Text size="lg" weight="semibold">Basic TabBar</Text>
34
+ <View gap="md">
35
+ <Text typography="h5">Basic TabBar</Text>
36
36
  <TabBar
37
37
  items={basicTabs}
38
38
  value={activeTab}
39
39
  onChange={setActiveTab}
40
40
  />
41
- <Text size="sm" color="secondary">
41
+ <Text typography="caption" color="secondary">
42
42
  Active tab: {activeTab}
43
43
  </Text>
44
44
  </View>
45
45
 
46
- <View spacing="md">
47
- <Text size="lg" weight="semibold">Variants</Text>
48
- <View spacing="sm">
49
- <View spacing="xs">
50
- <Text size="sm" weight="medium">Standard</Text>
46
+ <View gap="md">
47
+ <Text typography="h5">Variants</Text>
48
+ <View gap="sm">
49
+ <View gap="xs">
50
+ <Text typography="body2">Standard</Text>
51
51
  <TabBar
52
52
  items={variantTabs}
53
53
  value={variantTab}
@@ -55,8 +55,8 @@ export const TabBarExamples: React.FC = () => {
55
55
  type="standard"
56
56
  />
57
57
  </View>
58
- <View spacing="xs">
59
- <Text size="sm" weight="medium">Pills</Text>
58
+ <View gap="xs">
59
+ <Text typography="body2">Pills</Text>
60
60
  <TabBar
61
61
  items={variantTabs}
62
62
  value={variantTab}
@@ -65,8 +65,8 @@ export const TabBarExamples: React.FC = () => {
65
65
  pillMode="light"
66
66
  />
67
67
  </View>
68
- <View spacing="xs">
69
- <Text size="sm" weight="medium">Underline</Text>
68
+ <View gap="xs">
69
+ <Text typography="body2">Underline</Text>
70
70
  <TabBar
71
71
  items={variantTabs}
72
72
  value={variantTab}
@@ -77,9 +77,9 @@ export const TabBarExamples: React.FC = () => {
77
77
  </View>
78
78
  </View>
79
79
 
80
- <View spacing="md">
81
- <Text size="lg" weight="semibold">Sizes</Text>
82
- <View spacing="sm">
80
+ <View gap="md">
81
+ <Text typography="h5">Sizes</Text>
82
+ <View gap="sm">
83
83
  <TabBar
84
84
  items={basicTabs}
85
85
  value={activeTab}
@@ -101,11 +101,11 @@ export const TabBarExamples: React.FC = () => {
101
101
  </View>
102
102
  </View>
103
103
 
104
- <View spacing="md">
105
- <Text size="lg" weight="semibold">Pill Modes</Text>
106
- <View spacing="sm">
107
- <View spacing="xs">
108
- <Text size="sm" weight="medium">Light Mode (dark pill on light background)</Text>
104
+ <View gap="md">
105
+ <Text typography="h5">Pill Modes</Text>
106
+ <View gap="sm">
107
+ <View gap="xs">
108
+ <Text typography="body2">Light Mode (dark pill on light background)</Text>
109
109
  <TabBar
110
110
  items={basicTabs}
111
111
  value={pillTab}
@@ -114,8 +114,8 @@ export const TabBarExamples: React.FC = () => {
114
114
  pillMode="light"
115
115
  />
116
116
  </View>
117
- <View spacing="xs">
118
- <Text size="sm" weight="medium">Dark Mode (light pill on dark background)</Text>
117
+ <View gap="xs">
118
+ <Text typography="body2">Dark Mode (light pill on dark background)</Text>
119
119
  <TabBar
120
120
  items={basicTabs}
121
121
  value={pillTab}
@@ -127,8 +127,8 @@ export const TabBarExamples: React.FC = () => {
127
127
  </View>
128
128
  </View>
129
129
 
130
- <View spacing="md">
131
- <Text size="lg" weight="semibold">Disabled Tabs</Text>
130
+ <View gap="md">
131
+ <Text typography="h5">Disabled Tabs</Text>
132
132
  <TabBar
133
133
  items={disabledTabs}
134
134
  value={activeTab}
package/src/examples/TableExamples.tsx CHANGED
@@ -136,35 +136,35 @@ export const TableExamples: React.FC = () => {
136
136
 
137
137
  return (
138
138
  <Screen background="primary" padding="lg">
139
- <View spacing="lg">
140
- <Text size="xl" weight="bold">Table Examples</Text>
139
+ <View gap="lg">
140
+ <Text typography="h3">Table Examples</Text>
141
141
 
142
- <View spacing="md">
143
- <Text size="lg" weight="semibold">Basic Table</Text>
142
+ <View gap="md">
143
+ <Text typography="h5">Basic Table</Text>
144
144
  <Table columns={userColumns} data={users} />
145
145
  </View>
146
146
 
147
- <View spacing="md">
148
- <Text size="lg" weight="semibold">Variants</Text>
149
- <View spacing="sm">
150
- <View spacing="xs">
151
- <Text size="sm" weight="medium">Default</Text>
147
+ <View gap="md">
148
+ <Text typography="h5">Variants</Text>
149
+ <View gap="sm">
150
+ <View gap="xs">
151
+ <Text typography="body2">Default</Text>
152
152
  <Table
153
153
  columns={userColumns}
154
154
  data={users}
155
155
  type="standard"
156
156
  />
157
157
  </View>
158
- <View spacing="xs">
159
- <Text size="sm" weight="medium">Bordered</Text>
158
+ <View gap="xs">
159
+ <Text typography="body2">Bordered</Text>
160
160
  <Table
161
161
  columns={userColumns}
162
162
  data={users}
163
163
  type="bordered"
164
164
  />
165
165
  </View>
166
- <View spacing="xs">
167
- <Text size="sm" weight="medium">Striped</Text>
166
+ <View gap="xs">
167
+ <Text typography="body2">Striped</Text>
168
168
  <Table
169
169
  columns={userColumns}
170
170
  data={users}
@@ -174,11 +174,11 @@ export const TableExamples: React.FC = () => {
174
174
  </View>
175
175
  </View>
176
176
 
177
- <View spacing="md">
178
- <Text size="lg" weight="semibold">Sizes</Text>
179
- <View spacing="sm">
180
- <View spacing="xs">
181
- <Text size="sm" weight="medium">Small</Text>
177
+ <View gap="md">
178
+ <Text typography="h5">Sizes</Text>
179
+ <View gap="sm">
180
+ <View gap="xs">
181
+ <Text typography="body2">Small</Text>
182
182
  <Table
183
183
  columns={userColumns}
184
184
  data={users.slice(0, 2)}
@@ -186,8 +186,8 @@ export const TableExamples: React.FC = () => {
186
186
  type="bordered"
187
187
  />
188
188
  </View>
189
- <View spacing="xs">
190
- <Text size="sm" weight="medium">Medium (default)</Text>
189
+ <View gap="xs">
190
+ <Text typography="body2">Medium (default)</Text>
191
191
  <Table
192
192
  columns={userColumns}
193
193
  data={users.slice(0, 2)}
@@ -195,8 +195,8 @@ export const TableExamples: React.FC = () => {
195
195
  type="bordered"
196
196
  />
197
197
  </View>
198
- <View spacing="xs">
199
- <Text size="sm" weight="medium">Large</Text>
198
+ <View gap="xs">
199
+ <Text typography="body2">Large</Text>
200
200
  <Table
201
201
  columns={userColumns}
202
202
  data={users.slice(0, 2)}
@@ -207,26 +207,26 @@ export const TableExamples: React.FC = () => {
207
207
  </View>
208
208
  </View>
209
209
 
210
- <View spacing="md">
211
- <Text size="lg" weight="semibold">Custom Rendering</Text>
210
+ <View gap="md">
211
+ <Text typography="h5">Custom Rendering</Text>
212
212
  <Table columns={productColumns} data={products} type="striped" />
213
213
  </View>
214
214
 
215
- <View spacing="md">
216
- <Text size="lg" weight="semibold">Clickable Rows</Text>
215
+ <View gap="md">
216
+ <Text typography="h5">Clickable Rows</Text>
217
217
  <Table
218
218
  columns={userColumns}
219
219
  data={users}
220
220
  type="bordered"
221
221
  onRowPress={(user) => console.log('Clicked user:', user)}
222
222
  />
223
- <Text size="sm" color="secondary">
223
+ <Text typography="caption" color="secondary">
224
224
  Click any row to see console output
225
225
  </Text>
226
226
  </View>
227
227
 
228
- <View spacing="md">
229
- <Text size="lg" weight="semibold">With Actions</Text>
228
+ <View gap="md">
229
+ <Text typography="h5">With Actions</Text>
230
230
  <Table
231
231
  columns={actionColumns}
232
232
  data={users}
@@ -234,8 +234,8 @@ export const TableExamples: React.FC = () => {
234
234
  />
235
235
  </View>
236
236
 
237
- <View spacing="md">
238
- <Text size="lg" weight="semibold">Column Alignment</Text>
237
+ <View gap="md">
238
+ <Text typography="h5">Column Alignment</Text>
239
239
  <Table
240
240
  columns={[
241
241
  { key: 'name', title: 'Product', dataIndex: 'name', align: 'left' },
@@ -247,8 +247,8 @@ export const TableExamples: React.FC = () => {
247
247
  />
248
248
  </View>
249
249
 
250
- <View spacing="md">
251
- <Text size="lg" weight="semibold">Fixed Column Widths</Text>
250
+ <View gap="md">
251
+ <Text typography="h5">Fixed Column Widths</Text>
252
252
  <Table
253
253
  columns={[
254
254
  { key: 'id', title: 'ID', dataIndex: 'id', width: '60px' },
@@ -261,14 +261,14 @@ export const TableExamples: React.FC = () => {
261
261
  />
262
262
  </View>
263
263
 
264
- <View spacing="md">
265
- <Text size="lg" weight="semibold">Empty Table</Text>
264
+ <View gap="md">
265
+ <Text typography="h5">Empty Table</Text>
266
266
  <Table
267
267
  columns={userColumns}
268
268
  data={[]}
269
269
  type="bordered"
270
270
  />
271
- <Text size="sm" color="secondary">
271
+ <Text typography="caption" color="secondary">
272
272
  No data to display
273
273
  </Text>
274
274
  </View>