@idealyst/components 1.0.82 → 1.0.84

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 (316) hide show
  1. package/CLAUDE.md +199 -232
  2. package/README.md +5 -5
  3. package/package.json +25 -7
  4. package/plugin/README.md +272 -0
  5. package/plugin/test-cases.jsx +112 -0
  6. package/plugin/web-legacy.js +320 -0
  7. package/plugin/web.js +422 -124
  8. package/src/Accordion/Accordion.native.tsx +182 -0
  9. package/src/Accordion/Accordion.styles.tsx +260 -0
  10. package/src/Accordion/Accordion.web.tsx +147 -0
  11. package/src/Accordion/index.native.tsx +3 -0
  12. package/src/Accordion/index.ts +3 -0
  13. package/src/Accordion/index.web.tsx +3 -0
  14. package/src/Accordion/types.ts +23 -0
  15. package/src/ActivityIndicator/ActivityIndicator.native.tsx +17 -12
  16. package/src/ActivityIndicator/ActivityIndicator.styles.tsx +83 -109
  17. package/src/ActivityIndicator/ActivityIndicator.web.tsx +23 -17
  18. package/src/ActivityIndicator/index.ts +5 -2
  19. package/src/ActivityIndicator/index.web.ts +5 -2
  20. package/src/ActivityIndicator/types.ts +15 -10
  21. package/src/Alert/Alert.native.tsx +113 -0
  22. package/src/Alert/Alert.styles.tsx +304 -0
  23. package/src/Alert/Alert.web.tsx +123 -0
  24. package/src/Alert/index.native.ts +5 -0
  25. package/src/Alert/index.ts +5 -0
  26. package/src/Alert/index.web.ts +5 -0
  27. package/src/Alert/types.ts +21 -0
  28. package/src/Avatar/Avatar.native.tsx +8 -6
  29. package/src/Avatar/Avatar.styles.tsx +64 -58
  30. package/src/Avatar/Avatar.web.tsx +13 -8
  31. package/src/Avatar/index.ts +5 -2
  32. package/src/Avatar/index.web.ts +5 -2
  33. package/src/Avatar/types.ts +19 -13
  34. package/src/Badge/Badge.native.tsx +59 -14
  35. package/src/Badge/Badge.styles.tsx +125 -139
  36. package/src/Badge/Badge.web.tsx +72 -16
  37. package/src/Badge/index.ts +5 -2
  38. package/src/Badge/index.web.ts +5 -2
  39. package/src/Badge/types.ts +23 -11
  40. package/src/Breadcrumb/Breadcrumb.native.tsx +225 -0
  41. package/src/Breadcrumb/Breadcrumb.styles.tsx +234 -0
  42. package/src/Breadcrumb/Breadcrumb.web.tsx +268 -0
  43. package/src/Breadcrumb/index.native.ts +5 -0
  44. package/src/Breadcrumb/index.ts +5 -0
  45. package/src/Breadcrumb/index.web.ts +5 -0
  46. package/src/Breadcrumb/types.ts +56 -0
  47. package/src/Button/Button.native.tsx +75 -24
  48. package/src/Button/Button.styles.tsx +248 -205
  49. package/src/Button/Button.web.tsx +82 -25
  50. package/src/Button/index.ts +5 -5
  51. package/src/Button/index.web.ts +5 -3
  52. package/src/Button/types.ts +32 -15
  53. package/src/Card/Card.native.tsx +14 -11
  54. package/src/Card/Card.styles.tsx +146 -220
  55. package/src/Card/Card.web.tsx +20 -21
  56. package/src/Card/index.ts +5 -5
  57. package/src/Card/index.web.ts +5 -3
  58. package/src/Card/types.ts +24 -17
  59. package/src/Checkbox/Checkbox.native.tsx +24 -34
  60. package/src/Checkbox/Checkbox.styles.tsx +223 -275
  61. package/src/Checkbox/Checkbox.web.tsx +30 -37
  62. package/src/Checkbox/index.ts +5 -5
  63. package/src/Checkbox/index.web.ts +5 -3
  64. package/src/Checkbox/types.ts +26 -20
  65. package/src/Chip/Chip.native.tsx +126 -0
  66. package/src/Chip/Chip.styles.tsx +138 -0
  67. package/src/Chip/Chip.web.tsx +154 -0
  68. package/src/Chip/index.native.ts +5 -0
  69. package/src/Chip/index.ts +5 -0
  70. package/src/Chip/index.web.ts +5 -0
  71. package/src/Chip/types.ts +51 -0
  72. package/src/Dialog/Dialog.native.tsx +65 -12
  73. package/src/Dialog/Dialog.styles.tsx +154 -136
  74. package/src/Dialog/Dialog.web.tsx +16 -11
  75. package/src/Dialog/index.ts +5 -2
  76. package/src/Dialog/index.web.ts +5 -2
  77. package/src/Dialog/types.ts +22 -16
  78. package/src/Divider/Divider.native.tsx +19 -14
  79. package/src/Divider/Divider.styles.tsx +273 -595
  80. package/src/Divider/Divider.web.tsx +19 -12
  81. package/src/Divider/index.ts +5 -5
  82. package/src/Divider/index.web.ts +5 -3
  83. package/src/Divider/types.ts +28 -19
  84. package/src/Icon/Icon.native.tsx +17 -24
  85. package/src/Icon/Icon.styles.tsx +64 -48
  86. package/src/Icon/Icon.web.tsx +14 -11
  87. package/src/Icon/IconSvg/IconSvg.native.tsx +42 -0
  88. package/src/Icon/IconSvg/IconSvg.web.tsx +40 -0
  89. package/src/Icon/IconSvg/index.native.ts +1 -0
  90. package/src/Icon/IconSvg/index.ts +1 -0
  91. package/src/Icon/icon-resolver.native.ts +27 -0
  92. package/src/Icon/icon-resolver.ts +70 -0
  93. package/src/Icon/index.ts +5 -5
  94. package/src/Icon/index.web.ts +5 -3
  95. package/src/Icon/types.ts +17 -11
  96. package/src/Image/Image.native.tsx +86 -0
  97. package/src/Image/Image.styles.tsx +57 -0
  98. package/src/Image/Image.web.tsx +92 -0
  99. package/src/Image/index.native.ts +5 -0
  100. package/src/Image/index.ts +5 -0
  101. package/src/Image/types.ts +21 -0
  102. package/src/Input/Input.native.tsx +103 -26
  103. package/src/Input/Input.styles.tsx +240 -177
  104. package/src/Input/Input.web.tsx +141 -38
  105. package/src/Input/index.ts +5 -5
  106. package/src/Input/index.web.ts +5 -3
  107. package/src/Input/types.ts +43 -20
  108. package/src/List/List.native.tsx +56 -0
  109. package/src/List/List.styles.tsx +257 -0
  110. package/src/List/List.web.tsx +43 -0
  111. package/src/List/ListContext.tsx +16 -0
  112. package/src/List/ListItem.native.tsx +111 -0
  113. package/src/List/ListItem.web.tsx +110 -0
  114. package/src/List/ListSection.native.tsx +31 -0
  115. package/src/List/ListSection.web.tsx +33 -0
  116. package/src/List/index.native.tsx +5 -0
  117. package/src/List/index.ts +5 -0
  118. package/src/List/index.web.tsx +5 -0
  119. package/src/List/types.ts +42 -0
  120. package/src/Menu/Menu.native.tsx +150 -0
  121. package/src/Menu/Menu.styles.tsx +185 -0
  122. package/src/Menu/Menu.web.tsx +99 -0
  123. package/src/Menu/MenuItem.native.tsx +66 -0
  124. package/src/Menu/MenuItem.styles.tsx +119 -0
  125. package/src/Menu/MenuItem.web.tsx +67 -0
  126. package/src/Menu/index.native.ts +3 -0
  127. package/src/Menu/index.ts +3 -0
  128. package/src/Menu/index.web.ts +3 -0
  129. package/src/Menu/types.ts +30 -0
  130. package/src/Popover/Popover.native.tsx +102 -32
  131. package/src/Popover/Popover.styles.tsx +100 -67
  132. package/src/Popover/Popover.web.tsx +36 -260
  133. package/src/Popover/index.ts +5 -2
  134. package/src/Popover/index.web.ts +5 -2
  135. package/src/Popover/types.ts +14 -13
  136. package/src/Pressable/Pressable.native.tsx +7 -6
  137. package/src/Pressable/Pressable.web.tsx +8 -6
  138. package/src/Pressable/index.ts +5 -2
  139. package/src/Pressable/index.web.ts +5 -2
  140. package/src/Pressable/types.ts +11 -10
  141. package/src/Progress/Progress.native.tsx +179 -0
  142. package/src/Progress/Progress.styles.tsx +164 -0
  143. package/src/Progress/Progress.web.tsx +144 -0
  144. package/src/Progress/index.native.ts +1 -0
  145. package/src/Progress/index.ts +5 -0
  146. package/src/Progress/index.web.ts +5 -0
  147. package/src/Progress/types.ts +21 -0
  148. package/src/RadioButton/RadioButton.native.tsx +88 -0
  149. package/src/RadioButton/RadioButton.styles.tsx +163 -0
  150. package/src/RadioButton/RadioButton.web.tsx +85 -0
  151. package/src/RadioButton/RadioGroup.native.tsx +43 -0
  152. package/src/RadioButton/RadioGroup.web.tsx +49 -0
  153. package/src/RadioButton/index.native.ts +2 -0
  154. package/src/RadioButton/index.ts +2 -0
  155. package/src/RadioButton/index.web.ts +2 -0
  156. package/src/RadioButton/types.ts +29 -0
  157. package/src/SVGImage/SVGImage.native.tsx +9 -7
  158. package/src/SVGImage/SVGImage.styles.tsx +63 -55
  159. package/src/SVGImage/SVGImage.web.tsx +16 -13
  160. package/src/SVGImage/index.ts +5 -5
  161. package/src/SVGImage/index.web.ts +5 -2
  162. package/src/SVGImage/types.ts +7 -3
  163. package/src/Screen/Screen.native.tsx +43 -17
  164. package/src/Screen/Screen.styles.tsx +58 -54
  165. package/src/Screen/Screen.web.tsx +11 -5
  166. package/src/Screen/index.ts +5 -2
  167. package/src/Screen/index.web.ts +5 -2
  168. package/src/Screen/types.ts +23 -9
  169. package/src/Select/Select.native.tsx +347 -0
  170. package/src/Select/Select.styles.tsx +335 -0
  171. package/src/Select/Select.web.tsx +276 -0
  172. package/src/Select/index.native.ts +2 -0
  173. package/src/Select/index.ts +5 -0
  174. package/src/Select/index.web.ts +5 -0
  175. package/src/Select/types.ts +124 -0
  176. package/src/Skeleton/Skeleton.native.tsx +139 -0
  177. package/src/Skeleton/Skeleton.styles.tsx +59 -0
  178. package/src/Skeleton/Skeleton.web.tsx +112 -0
  179. package/src/Skeleton/index.native.ts +4 -0
  180. package/src/Skeleton/index.ts +5 -0
  181. package/src/Skeleton/index.web.ts +5 -0
  182. package/src/Skeleton/types.ts +75 -0
  183. package/src/Slider/Slider.native.tsx +248 -0
  184. package/src/Slider/Slider.styles.tsx +241 -0
  185. package/src/Slider/Slider.web.tsx +226 -0
  186. package/src/Slider/index.native.ts +3 -0
  187. package/src/Slider/index.ts +5 -0
  188. package/src/Slider/index.web.ts +5 -0
  189. package/src/Slider/types.ts +31 -0
  190. package/src/Switch/Switch.native.tsx +131 -0
  191. package/src/Switch/Switch.styles.tsx +169 -0
  192. package/src/Switch/Switch.web.tsx +121 -0
  193. package/src/Switch/index.native.ts +3 -0
  194. package/src/Switch/index.ts +5 -0
  195. package/src/Switch/index.web.ts +5 -0
  196. package/src/Switch/types.ts +21 -0
  197. package/src/TabBar/TabBar.native.tsx +142 -0
  198. package/src/TabBar/TabBar.styles.tsx +399 -0
  199. package/src/TabBar/TabBar.web.tsx +205 -0
  200. package/src/TabBar/index.native.tsx +3 -0
  201. package/src/TabBar/index.ts +3 -0
  202. package/src/TabBar/index.web.tsx +3 -0
  203. package/src/TabBar/types.ts +26 -0
  204. package/src/Table/Table.native.tsx +122 -0
  205. package/src/Table/Table.styles.tsx +283 -0
  206. package/src/Table/Table.web.tsx +112 -0
  207. package/src/Table/index.native.tsx +3 -0
  208. package/src/Table/index.ts +3 -0
  209. package/src/Table/index.web.tsx +3 -0
  210. package/src/Table/types.ts +28 -0
  211. package/src/Text/Text.native.tsx +12 -11
  212. package/src/Text/Text.styles.tsx +76 -64
  213. package/src/Text/Text.web.tsx +14 -9
  214. package/src/Text/index.ts +5 -5
  215. package/src/Text/index.web.ts +5 -3
  216. package/src/Text/types.ts +20 -13
  217. package/src/TextArea/TextArea.native.tsx +134 -0
  218. package/src/TextArea/TextArea.styles.tsx +175 -0
  219. package/src/TextArea/TextArea.web.tsx +156 -0
  220. package/src/TextArea/index.native.ts +3 -0
  221. package/src/TextArea/index.ts +3 -0
  222. package/src/TextArea/index.web.ts +3 -0
  223. package/src/TextArea/types.ts +30 -0
  224. package/src/Tooltip/Tooltip.native.tsx +165 -0
  225. package/src/Tooltip/Tooltip.styles.tsx +73 -0
  226. package/src/Tooltip/Tooltip.web.tsx +87 -0
  227. package/src/Tooltip/index.native.ts +3 -0
  228. package/src/Tooltip/index.ts +3 -0
  229. package/src/Tooltip/types.ts +18 -0
  230. package/src/Video/Video.native.tsx +105 -0
  231. package/src/Video/Video.styles.tsx +39 -0
  232. package/src/Video/Video.web.tsx +115 -0
  233. package/src/Video/index.native.ts +5 -0
  234. package/src/Video/index.ts +5 -0
  235. package/src/Video/types.ts +29 -0
  236. package/src/View/View.native.tsx +9 -14
  237. package/src/View/View.styles.tsx +101 -93
  238. package/src/View/View.web.tsx +16 -17
  239. package/src/View/index.ts +5 -5
  240. package/src/View/index.web.ts +5 -3
  241. package/src/View/types.ts +29 -21
  242. package/src/examples/AccordionExamples.tsx +126 -0
  243. package/src/examples/AlertExamples.tsx +280 -0
  244. package/src/examples/AvatarExamples.tsx +23 -23
  245. package/src/examples/BadgeExamples.tsx +109 -41
  246. package/src/examples/BreadcrumbExamples.tsx +312 -0
  247. package/src/examples/ButtonExamples.tsx +160 -33
  248. package/src/examples/CardExamples.tsx +40 -40
  249. package/src/examples/CheckboxExamples.tsx +12 -12
  250. package/src/examples/ChipExamples.tsx +197 -0
  251. package/src/examples/DialogExamples.tsx +22 -22
  252. package/src/examples/DividerExamples.tsx +49 -49
  253. package/src/examples/IconExamples.tsx +270 -54
  254. package/src/examples/ImageExamples.tsx +174 -0
  255. package/src/examples/InputExamples.tsx +75 -17
  256. package/src/examples/ListExamples.tsx +288 -0
  257. package/src/examples/MenuExamples.tsx +144 -0
  258. package/src/examples/PopoverExamples.tsx +69 -73
  259. package/src/examples/ProgressExamples.tsx +137 -0
  260. package/src/examples/RadioButtonExamples.tsx +161 -0
  261. package/src/examples/SVGImageExamples.tsx +19 -17
  262. package/src/examples/ScreenExamples.tsx +31 -31
  263. package/src/examples/SelectExamples.tsx +423 -0
  264. package/src/examples/SkeletonExamples.tsx +206 -0
  265. package/src/examples/SliderExamples.tsx +200 -0
  266. package/src/examples/SwitchExamples.tsx +182 -0
  267. package/src/examples/TabBarExamples.tsx +143 -0
  268. package/src/examples/TableExamples.tsx +280 -0
  269. package/src/examples/TextAreaExamples.tsx +173 -0
  270. package/src/examples/TextExamples.tsx +28 -32
  271. package/src/examples/ThemeExtensionExamples.tsx +10 -10
  272. package/src/examples/TooltipExamples.tsx +126 -0
  273. package/src/examples/VideoExamples.tsx +144 -0
  274. package/src/examples/ViewExamples.tsx +64 -56
  275. package/src/examples/index.ts +18 -3
  276. package/src/hooks/useMergeRefs.ts +16 -0
  277. package/src/hooks/useSmartPosition.native.ts +169 -0
  278. package/src/index.native.ts +80 -9
  279. package/src/index.ts +75 -1
  280. package/src/internal/BoundedModalContent.native.tsx +58 -0
  281. package/src/internal/PositionedPortal.tsx +254 -0
  282. package/src/internal/SafeAreaDebugOverlay.native.tsx +173 -0
  283. package/src/unistyles.d.ts +6 -0
  284. package/src/utils/buildSizeVariants.ts +16 -0
  285. package/src/utils/deepMerge.ts +43 -0
  286. package/src/utils/positionUtils.native.ts +280 -0
  287. package/src/utils/styleHelpers.ts +48 -0
  288. package/LLM-ACCESS-GUIDE.md +0 -143
  289. package/src/ActivityIndicator/README.md +0 -132
  290. package/src/Avatar/README.md +0 -139
  291. package/src/Badge/README.md +0 -170
  292. package/src/Button/Button.types.ts +0 -12
  293. package/src/Button/README.md +0 -262
  294. package/src/Card/README.md +0 -258
  295. package/src/Checkbox/README.md +0 -102
  296. package/src/Dialog/README.md +0 -210
  297. package/src/Divider/README.md +0 -108
  298. package/src/Icon/README.md +0 -81
  299. package/src/Input/README.md +0 -100
  300. package/src/SVGImage/README.md +0 -209
  301. package/src/Screen/README.md +0 -86
  302. package/src/Text/README.md +0 -94
  303. package/src/View/README.md +0 -107
  304. package/src/examples/AllExamples.tsx +0 -84
  305. package/src/examples/README.md +0 -136
  306. package/src/examples/ValidationExamples.tsx +0 -95
  307. package/src/examples/extendedTheme.ts +0 -329
  308. package/src/theme/breakpoints.ts +0 -8
  309. package/src/theme/colorResolver.ts +0 -218
  310. package/src/theme/colors.ts +0 -315
  311. package/src/theme/defaultThemes.ts +0 -326
  312. package/src/theme/index.ts +0 -188
  313. package/src/theme/themeBuilder.ts +0 -602
  314. package/src/theme/unistyles.d.ts +0 -6
  315. package/src/theme/variantHelpers.ts +0 -584
  316. package/src/theme/variants.ts +0 -56
package/src/examples/SVGImageExamples.tsx CHANGED
@@ -1,18 +1,20 @@
1
1
  import { Screen, View, SVGImage, Text } from '../index';
2
+
3
+ /** @ts-ignore this is a real file */
2
4
  import testLogo from './test-logo.svg';
3
5
 
4
6
  export const SVGImageExamples = () => {
5
7
  return (
6
8
  <Screen background="primary" padding="lg">
7
9
  <View spacing="none">
8
- <Text size="large" weight="bold" align="center">
10
+ <Text size="lg" weight="bold" align="center">
9
11
  SVG Image Examples
10
12
  </Text>
11
13
 
12
14
  {/* Local SVG File Example */}
13
15
  <View spacing="md">
14
- <Text size="medium" weight="semibold">Loading Local SVG File</Text>
15
- <Text size="small">
16
+ <Text size="md" weight="semibold">Loading Local SVG File</Text>
17
+ <Text size="sm">
16
18
  Using the test-logo.svg file - works on web, limited support on React Native
17
19
  </Text>
18
20
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -40,8 +42,8 @@ export const SVGImageExamples = () => {
40
42
 
41
43
  {/* Intent Colors */}
42
44
  <View spacing="md">
43
- <Text size="medium" weight="semibold">Intent Colors</Text>
44
- <Text size="small">
45
+ <Text size="md" weight="semibold">Intent Colors</Text>
46
+ <Text size="sm">
45
47
  SVG images with theme-based coloring
46
48
  </Text>
47
49
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -74,8 +76,8 @@ export const SVGImageExamples = () => {
74
76
 
75
77
  {/* Custom Colors */}
76
78
  <View spacing="md">
77
- <Text size="medium" weight="semibold">Custom Colors</Text>
78
- <Text size="small">
79
+ <Text size="md" weight="semibold">Custom Colors</Text>
80
+ <Text size="sm">
79
81
  Direct color specification
80
82
  </Text>
81
83
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -102,8 +104,8 @@ export const SVGImageExamples = () => {
102
104
 
103
105
  {/* Remote URL Example */}
104
106
  <View spacing="md">
105
- <Text size="medium" weight="semibold">Loading from URL</Text>
106
- <Text size="small">
107
+ <Text size="md" weight="semibold">Loading from URL</Text>
108
+ <Text size="sm">
107
109
  SVG images loaded from remote URLs (web only for security)
108
110
  </Text>
109
111
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -129,8 +131,8 @@ export const SVGImageExamples = () => {
129
131
 
130
132
  {/* Resize Modes */}
131
133
  <View spacing="md">
132
- <Text size="medium" weight="semibold">Resize Modes</Text>
133
- <Text size="small">
134
+ <Text size="md" weight="semibold">Resize Modes</Text>
135
+ <Text size="sm">
134
136
  Different ways to fit SVG images in containers
135
137
  </Text>
136
138
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
@@ -163,21 +165,21 @@ export const SVGImageExamples = () => {
163
165
 
164
166
  {/* Usage Tips */}
165
167
  <View spacing="md">
166
- <Text size="medium" weight="semibold">Usage Tips</Text>
168
+ <Text size="md" weight="semibold">Usage Tips</Text>
167
169
  <View spacing="sm">
168
- <Text size="small">
170
+ <Text size="sm">
169
171
  • <Text weight="semibold">Local files:</Text> Use relative paths for bundled SVG files
170
172
  </Text>
171
- <Text size="small">
173
+ <Text size="sm">
172
174
  • <Text weight="semibold">Remote URLs:</Text> Use {`{ uri: "https://..." }`} format
173
175
  </Text>
174
- <Text size="small">
176
+ <Text size="sm">
175
177
  • <Text weight="semibold">React Native:</Text> Local SVGs have limited support - use remote URLs or convert to PNG
176
178
  </Text>
177
- <Text size="small">
179
+ <Text size="sm">
178
180
  • <Text weight="semibold">Coloring:</Text> Works best with single-color SVG icons
179
181
  </Text>
180
- <Text size="small">
182
+ <Text size="sm">
181
183
  • <Text weight="semibold">Performance:</Text> Cache remote SVGs for better performance
182
184
  </Text>
183
185
  </View>
package/src/examples/ScreenExamples.tsx CHANGED
@@ -5,14 +5,14 @@ export const ScreenExamples = () => {
5
5
  return (
6
6
  <Screen background="primary" padding="lg">
7
7
  <View spacing="lg">
8
- <Text size="large" weight="bold" align="center">
8
+ <Text size="lg" weight="bold" align="center">
9
9
  Screen Examples
10
10
  </Text>
11
11
 
12
12
  {/* Background Examples */}
13
13
  <View spacing="md">
14
- <Text size="medium" weight="semibold">Background Variants</Text>
15
- <Text size="small" color="secondary">
14
+ <Text size="md" weight="semibold">Background Variants</Text>
15
+ <Text size="sm" color="secondary">
16
16
  Each Screen should have a different background color
17
17
  </Text>
18
18
 
@@ -20,8 +20,8 @@ export const ScreenExamples = () => {
20
20
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
21
21
  <Screen background="primary" padding="sm">
22
22
  <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
23
- <Text size="small" weight="bold">Primary</Text>
24
- <Text size="small" color="secondary">Surface</Text>
23
+ <Text size="sm" weight="bold">Primary</Text>
24
+ <Text size="sm" color="secondary">Surface</Text>
25
25
  </View>
26
26
  </Screen>
27
27
  </View>
@@ -29,8 +29,8 @@ export const ScreenExamples = () => {
29
29
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
30
30
  <Screen background="secondary" padding="sm">
31
31
  <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
32
- <Text size="small" weight="bold">Secondary</Text>
33
- <Text size="small" color="secondary">Surface</Text>
32
+ <Text size="sm" weight="bold">Secondary</Text>
33
+ <Text size="sm" color="secondary">Surface</Text>
34
34
  </View>
35
35
  </Screen>
36
36
  </View>
@@ -38,8 +38,8 @@ export const ScreenExamples = () => {
38
38
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
39
39
  <Screen background="tertiary" padding="sm">
40
40
  <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
41
- <Text size="small" weight="bold">Tertiary</Text>
42
- <Text size="small" color="secondary">Surface</Text>
41
+ <Text size="sm" weight="bold">Tertiary</Text>
42
+ <Text size="sm" color="secondary">Surface</Text>
43
43
  </View>
44
44
  </Screen>
45
45
  </View>
@@ -47,8 +47,8 @@ export const ScreenExamples = () => {
47
47
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
48
48
  <Screen background="inverse" padding="sm">
49
49
  <View spacing="sm" style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
50
- <Text size="small" weight="bold" color="primary">Inverse</Text>
51
- <Text size="small" color="secondary">Surface</Text>
50
+ <Text size="sm" weight="bold" color="primary">Inverse</Text>
51
+ <Text size="sm" color="secondary">Surface</Text>
52
52
  </View>
53
53
  </Screen>
54
54
  </View>
@@ -57,8 +57,8 @@ export const ScreenExamples = () => {
57
57
 
58
58
  {/* Padding Examples */}
59
59
  <View spacing="md">
60
- <Text size="medium" weight="semibold">Padding Variants</Text>
61
- <Text size="small" color="secondary">
60
+ <Text size="md" weight="semibold">Padding Variants</Text>
61
+ <Text size="sm" color="secondary">
62
62
  Different padding options for Screen content
63
63
  </Text>
64
64
 
@@ -66,8 +66,8 @@ export const ScreenExamples = () => {
66
66
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
67
67
  <Screen background="secondary" padding="none">
68
68
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
69
- <Text size="small" weight="bold">None</Text>
70
- <Text size="small" color="secondary">No padding</Text>
69
+ <Text size="sm" weight="bold">None</Text>
70
+ <Text size="sm" color="secondary">No padding</Text>
71
71
  </View>
72
72
  </Screen>
73
73
  </View>
@@ -75,8 +75,8 @@ export const ScreenExamples = () => {
75
75
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
76
76
  <Screen background="secondary" padding="sm">
77
77
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
78
- <Text size="small" weight="bold">Small</Text>
79
- <Text size="small" color="secondary">8px</Text>
78
+ <Text size="sm" weight="bold">Small</Text>
79
+ <Text size="sm" color="secondary">8px</Text>
80
80
  </View>
81
81
  </Screen>
82
82
  </View>
@@ -84,8 +84,8 @@ export const ScreenExamples = () => {
84
84
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
85
85
  <Screen background="secondary" padding="md">
86
86
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
87
- <Text size="small" weight="bold">Medium</Text>
88
- <Text size="small" color="secondary">16px</Text>
87
+ <Text size="sm" weight="bold">Medium</Text>
88
+ <Text size="sm" color="secondary">16px</Text>
89
89
  </View>
90
90
  </Screen>
91
91
  </View>
@@ -93,8 +93,8 @@ export const ScreenExamples = () => {
93
93
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
94
94
  <Screen background="secondary" padding="lg">
95
95
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
96
- <Text size="small" weight="bold">Large</Text>
97
- <Text size="small" color="secondary">24px</Text>
96
+ <Text size="sm" weight="bold">Large</Text>
97
+ <Text size="sm" color="secondary">24px</Text>
98
98
  </View>
99
99
  </Screen>
100
100
  </View>
@@ -103,8 +103,8 @@ export const ScreenExamples = () => {
103
103
 
104
104
  {/* Safe Area Examples */}
105
105
  <View spacing="md">
106
- <Text size="medium" weight="semibold">Safe Area</Text>
107
- <Text size="small" color="secondary">
106
+ <Text size="md" weight="semibold">Safe Area</Text>
107
+ <Text size="sm" color="secondary">
108
108
  Safe area padding for mobile devices
109
109
  </Text>
110
110
 
@@ -112,8 +112,8 @@ export const ScreenExamples = () => {
112
112
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
113
113
  <Screen background="tertiary" padding="sm" safeArea={false}>
114
114
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
115
- <Text size="small" weight="bold">No Safe Area</Text>
116
- <Text size="small" color="secondary">Standard</Text>
115
+ <Text size="sm" weight="bold">No Safe Area</Text>
116
+ <Text size="sm" color="secondary">Standard</Text>
117
117
  </View>
118
118
  </Screen>
119
119
  </View>
@@ -121,8 +121,8 @@ export const ScreenExamples = () => {
121
121
  <View style={{ height: 100, width: 120, borderWidth: 1, borderColor: '#ccc' }}>
122
122
  <Screen background="tertiary" padding="sm" safeArea={true}>
123
123
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'rgba(0,255,0,0.1)' }}>
124
- <Text size="small" weight="bold">Safe Area</Text>
125
- <Text size="small" color="secondary">Mobile</Text>
124
+ <Text size="sm" weight="bold">Safe Area</Text>
125
+ <Text size="sm" color="secondary">Mobile</Text>
126
126
  </View>
127
127
  </Screen>
128
128
  </View>
@@ -131,17 +131,17 @@ export const ScreenExamples = () => {
131
131
 
132
132
  {/* Usage Examples */}
133
133
  <View spacing="md">
134
- <Text size="medium" weight="semibold">Common Usage</Text>
134
+ <Text size="md" weight="semibold">Common Usage</Text>
135
135
  <View style={{ height: 120, borderWidth: 1, borderColor: '#ccc' }}>
136
136
  <Screen background="primary" padding="lg">
137
137
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
138
- <Text size="large" weight="bold" align="center">
138
+ <Text size="lg" weight="bold" align="center">
139
139
  App Screen Layout
140
140
  </Text>
141
- <Text size="medium" color="secondary" align="center">
141
+ <Text size="md" color="secondary" align="center">
142
142
  Primary background with large padding
143
143
  </Text>
144
- <Text size="small" color="secondary" align="center">
144
+ <Text size="sm" color="secondary" align="center">
145
145
  Perfect for main app screens
146
146
  </Text>
147
147
  </View>