@idealyst/components 1.0.99 → 1.1.1

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/TextAreaExamples.tsx CHANGED
@@ -10,11 +10,11 @@ export const TextAreaExamples: React.FC = () => {
10
10
 
11
11
  return (
12
12
  <Screen background="primary" padding="lg">
13
- <View spacing="lg">
14
- <Text size="xl" weight="bold">TextArea Examples</Text>
13
+ <View gap="lg">
14
+ <Text typography="h3">TextArea Examples</Text>
15
15
 
16
- <View spacing="md">
17
- <Text size="lg" weight="semibold">Basic TextArea</Text>
16
+ <View gap="md">
17
+ <Text typography="h5">Basic TextArea</Text>
18
18
  <TextArea
19
19
  value={basicValue}
20
20
  onChange={setBasicValue}
@@ -23,8 +23,8 @@ export const TextAreaExamples: React.FC = () => {
23
23
  />
24
24
  </View>
25
25
 
26
- <View spacing="md">
27
- <Text size="lg" weight="semibold">Auto-Growing TextArea</Text>
26
+ <View gap="md">
27
+ <Text typography="h5">Auto-Growing TextArea</Text>
28
28
  <TextArea
29
29
  label="Auto-grow with min/max height"
30
30
  value={autoGrowValue}
@@ -37,8 +37,8 @@ export const TextAreaExamples: React.FC = () => {
37
37
  />
38
38
  </View>
39
39
 
40
- <View spacing="md">
41
- <Text size="lg" weight="semibold">With Label</Text>
40
+ <View gap="md">
41
+ <Text typography="h5">With Label</Text>
42
42
  <TextArea
43
43
  label="Description"
44
44
  value={basicValue}
@@ -48,9 +48,9 @@ export const TextAreaExamples: React.FC = () => {
48
48
  />
49
49
  </View>
50
50
 
51
- <View spacing="md">
52
- <Text size="lg" weight="semibold">Sizes</Text>
53
- <View spacing="sm">
51
+ <View gap="md">
52
+ <Text typography="h5">Sizes</Text>
53
+ <View gap="sm">
54
54
  <TextArea
55
55
  size="sm"
56
56
  placeholder="Small textarea"
@@ -69,9 +69,9 @@ export const TextAreaExamples: React.FC = () => {
69
69
  </View>
70
70
  </View>
71
71
 
72
- <View spacing="md">
73
- <Text size="lg" weight="semibold">Intent Colors</Text>
74
- <View spacing="sm">
72
+ <View gap="md">
73
+ <Text typography="h5">Intent Colors</Text>
74
+ <View gap="sm">
75
75
  <TextArea
76
76
  intent="primary"
77
77
  placeholder="Primary intent"
@@ -95,8 +95,8 @@ export const TextAreaExamples: React.FC = () => {
95
95
  </View>
96
96
  </View>
97
97
 
98
- <View spacing="md">
99
- <Text size="lg" weight="semibold">With Character Limit</Text>
98
+ <View gap="md">
99
+ <Text typography="h5">With Character Limit</Text>
100
100
  <TextArea
101
101
  label="Limited Input"
102
102
  value={limitedValue}
@@ -108,8 +108,8 @@ export const TextAreaExamples: React.FC = () => {
108
108
  />
109
109
  </View>
110
110
 
111
- <View spacing="md">
112
- <Text size="lg" weight="semibold">Error State</Text>
111
+ <View gap="md">
112
+ <Text typography="h5">Error State</Text>
113
113
  <TextArea
114
114
  label="Required Field"
115
115
  value={errorValue}
@@ -120,9 +120,9 @@ export const TextAreaExamples: React.FC = () => {
120
120
  />
121
121
  </View>
122
122
 
123
- <View spacing="md">
124
- <Text size="lg" weight="semibold">Resize Options</Text>
125
- <View spacing="sm">
123
+ <View gap="md">
124
+ <Text typography="h5">Resize Options</Text>
125
+ <View gap="sm">
126
126
  <TextArea
127
127
  placeholder="Resize: none"
128
128
  resize="none"
@@ -146,8 +146,8 @@ export const TextAreaExamples: React.FC = () => {
146
146
  </View>
147
147
  </View>
148
148
 
149
- <View spacing="md">
150
- <Text size="lg" weight="semibold">Custom Styling</Text>
149
+ <View gap="md">
150
+ <Text typography="h5">Custom Styling</Text>
151
151
  <TextArea
152
152
  label="Monospace Font"
153
153
  placeholder="Code or monospace text..."
@@ -156,8 +156,8 @@ export const TextAreaExamples: React.FC = () => {
156
156
  />
157
157
  </View>
158
158
 
159
- <View spacing="md">
160
- <Text size="lg" weight="semibold">Disabled State</Text>
159
+ <View gap="md">
160
+ <Text typography="h5">Disabled State</Text>
161
161
  <TextArea
162
162
  label="Disabled"
163
163
  value="This textarea is disabled"
package/src/examples/TextExamples.tsx CHANGED
@@ -3,83 +3,78 @@ import { Screen, View, Text } from '../index';
3
3
  export const TextExamples = () => {
4
4
  return (
5
5
  <Screen background="primary" padding="lg">
6
- <View spacing="none">
7
- <Text size="lg" weight="bold" align="center">
8
- Text Examples
9
- </Text>
6
+ <View gap="xl">
7
+ <Text typography="h3" align="center">
8
+ Text Examples
9
+ </Text>
10
10
 
11
- {/* Text Sizes */}
12
- <View spacing="md">
13
- <Text size="md" weight="semibold">Sizes</Text>
14
- <View spacing="sm" style={{ gap: 10 }}>
15
- <Text size="sm">Small text - Lorem ipsum dolor sit amet</Text>
16
- <Text size="md">Medium text - Lorem ipsum dolor sit amet</Text>
17
- <Text size="lg">Large text - Lorem ipsum dolor sit amet</Text>
18
- <Text size="xl">Extra large text - Lorem ipsum dolor sit amet</Text>
11
+ {/* Typography Variants */}
12
+ <View gap="md">
13
+ <Text typography="subtitle1">Typography Variants</Text>
14
+ <View gap="sm">
15
+ <Text typography="h1">Heading 1</Text>
16
+ <Text typography="h2">Heading 2</Text>
17
+ <Text typography="h3">Heading 3</Text>
18
+ <Text typography="h4">Heading 4</Text>
19
+ <Text typography="h5">Heading 5</Text>
20
+ <Text typography="h6">Heading 6</Text>
21
+ <Text typography="subtitle1">Subtitle 1</Text>
22
+ <Text typography="subtitle2">Subtitle 2</Text>
23
+ <Text typography="body1">Body 1 - Lorem ipsum dolor sit amet</Text>
24
+ <Text typography="body2">Body 2 - Lorem ipsum dolor sit amet</Text>
25
+ <Text typography="caption">Caption - Lorem ipsum dolor sit amet</Text>
26
+ </View>
19
27
  </View>
20
- </View>
21
28
 
22
- {/* Text Weights */}
23
- <View spacing="md">
24
- <Text size="md" weight="semibold">Weights</Text>
25
- <View spacing="sm" style={{ gap: 10 }}>
26
- <Text weight="light">Light weight text</Text>
27
- <Text weight="normal">Normal weight text</Text>
28
- <Text weight="medium">Medium weight text</Text>
29
- <Text weight="semibold">Semibold weight text</Text>
30
- <Text weight="bold">Bold weight text</Text>
31
- </View>
32
- </View>
33
-
34
- {/* Semantic Text Colors */}
35
- <View spacing="md">
36
- <Text size="md" weight="semibold">Semantic Text Colors</Text>
37
- <View spacing="sm" style={{ gap: 10 }}>
38
- <Text color="primary">Primary text - Main text color</Text>
39
- <Text color="secondary">Secondary text - Subdued text</Text>
40
- <Text color="tertiary">Tertiary text - More subdued text</Text>
29
+ {/* Semantic Text Colors */}
30
+ <View gap="md">
31
+ <Text typography="subtitle1">Semantic Text Colors</Text>
32
+ <View gap="sm">
33
+ <Text color="primary">Primary text - Main text color</Text>
34
+ <Text color="secondary">Secondary text - Subdued text</Text>
35
+ <Text color="tertiary">Tertiary text - More subdued text</Text>
36
+ </View>
41
37
  </View>
42
- </View>
43
38
 
44
- {/* Inverse Text Colors */}
45
- <View spacing="md">
46
- <Text size="md" weight="semibold">Inverse Text Colors (on dark backgrounds)</Text>
47
- <View spacing="sm" style={{ gap: 10 }}>
48
- <View background="inverse" spacing="sm" radius="sm">
49
- <Text color="inverse">Inverse (of primary) - Light text on dark background</Text>
50
- </View>
51
- <View background="inverse" spacing="sm" radius="sm">
52
- <Text color="inverse-secondary">Inverse secondary (90% opacity)</Text>
53
- </View>
54
- <View background="inverse" spacing="sm" radius="sm">
55
- <Text color="inverse-tertiary">Inverse tertiary (70% opacity)</Text>
39
+ {/* Inverse Text Colors */}
40
+ <View gap="md">
41
+ <Text typography="subtitle1">Inverse Text Colors (on dark backgrounds)</Text>
42
+ <View gap="sm">
43
+ <View background="inverse" padding="sm" radius="sm">
44
+ <Text color="inverse">Inverse (of primary) - Light text on dark background</Text>
45
+ </View>
46
+ <View background="inverse" padding="sm" radius="sm">
47
+ <Text color="inverse-secondary">Inverse secondary (90% opacity)</Text>
48
+ </View>
49
+ <View background="inverse" padding="sm" radius="sm">
50
+ <Text color="inverse-tertiary">Inverse tertiary (70% opacity)</Text>
51
+ </View>
56
52
  </View>
57
53
  </View>
58
- </View>
59
54
 
60
- {/* Text Alignment */}
61
- <View spacing="md">
62
- <Text size="md" weight="semibold">Alignment</Text>
63
- <View spacing="sm" style={{ gap: 10 }}>
64
- <Text align="left">Left aligned text</Text>
65
- <Text align="center">Center aligned text</Text>
66
- <Text align="right">Right aligned text</Text>
55
+ {/* Text Alignment */}
56
+ <View gap="md">
57
+ <Text typography="subtitle1">Alignment</Text>
58
+ <View gap="sm">
59
+ <Text align="left">Left aligned text</Text>
60
+ <Text align="center">Center aligned text</Text>
61
+ <Text align="right">Right aligned text</Text>
62
+ </View>
67
63
  </View>
68
- </View>
69
64
 
70
- {/* Combined Examples */}
71
- <View spacing="md">
72
- <Text size="md" weight="semibold">Combined Examples</Text>
73
- <View spacing="sm" style={{ gap: 10 }}>
74
- <Text size="lg" weight="bold" color="primary" align="center">
75
- Large Bold Primary Centered
76
- </Text>
77
- <Text size="sm" weight="light" color="secondary" align="right">
78
- Small Light Secondary Right
79
- </Text>
65
+ {/* Combined Examples */}
66
+ <View gap="md">
67
+ <Text typography="subtitle1">Combined Examples</Text>
68
+ <View gap="sm">
69
+ <Text typography="h4" color="primary" align="center">
70
+ Heading with Primary Color Centered
71
+ </Text>
72
+ <Text typography="caption" color="secondary" align="right">
73
+ Caption Secondary Right
74
+ </Text>
75
+ </View>
80
76
  </View>
81
77
  </View>
82
- </View>
83
78
  </Screen>
84
79
  );
85
- };
80
+ };
package/src/examples/ThemeExtensionExamples.tsx CHANGED
@@ -4,14 +4,14 @@ import { Screen, View, Button, Text, Badge, Card, Input, Checkbox } from '../ind
4
4
  export const ThemeExtensionExamples = () => {
5
5
  return (
6
6
  <Screen background="primary" padding="lg">
7
- <View spacing="lg">
8
- <Text size="lg" weight="bold" align="center">
7
+ <View gap="lg">
8
+ <Text typography="h4" align="center">
9
9
  Extended Theme Test
10
10
  </Text>
11
11
 
12
12
  {/* Extended Colors */}
13
- <View spacing="md">
14
- <Text size="md" weight="semibold">Extended Colors</Text>
13
+ <View gap="md">
14
+ <Text typography="subtitle1">Extended Colors</Text>
15
15
  <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
16
16
  <Badge color={"orange" as any}>Orange</Badge>
17
17
  <Badge color={"teal" as any}>Teal</Badge>
@@ -30,8 +30,8 @@ export const ThemeExtensionExamples = () => {
30
30
  </View>
31
31
 
32
32
  {/* Extended Intents */}
33
- <View spacing="md">
34
- <Text size="md" weight="semibold">Extended Intents</Text>
33
+ <View gap="md">
34
+ <Text typography="subtitle1">Extended Intents</Text>
35
35
  <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
36
36
  <Button intent={"accent" as any}>Accent Button</Button>
37
37
  <Button intent={"feature" as any}>Feature Button</Button>
@@ -46,11 +46,11 @@ export const ThemeExtensionExamples = () => {
46
46
  </View>
47
47
 
48
48
  {/* Mixed Usage */}
49
- <View spacing="md">
50
- <Text size="md" weight="semibold">Mixed Extended Usage</Text>
49
+ <View gap="md">
50
+ <Text typography="subtitle1">Mixed Extended Usage</Text>
51
51
 
52
52
  <Card>
53
- <View spacing="sm">
53
+ <View gap="sm">
54
54
  <Text color={"orange" as any} weight="bold">Orange Card Header</Text>
55
55
  <Text color="secondary">This card uses extended orange color for the header</Text>
56
56
  <Button intent={"accent" as any} size="sm">Accent Action</Button>
@@ -58,7 +58,7 @@ export const ThemeExtensionExamples = () => {
58
58
  </Card>
59
59
 
60
60
  <Card>
61
- <View spacing="sm">
61
+ <View gap="sm">
62
62
  <Text color={"teal" as any} weight="bold">Teal Card Header</Text>
63
63
  <Text color="secondary">This card uses extended teal color for the header</Text>
64
64
  <Button intent={"feature" as any} size="sm">Feature Action</Button>
@@ -67,8 +67,8 @@ export const ThemeExtensionExamples = () => {
67
67
  </View>
68
68
 
69
69
  {/* Form with Extended Colors */}
70
- <View spacing="md">
71
- <Text size="md" weight="semibold">Form with Extended Styling</Text>
70
+ <View gap="md">
71
+ <Text typography="subtitle1">Form with Extended Styling</Text>
72
72
 
73
73
  <Input
74
74
  placeholder="Input with accent intent"
package/src/examples/TooltipExamples.tsx CHANGED
@@ -5,19 +5,19 @@ import Tooltip from '../Tooltip';
5
5
  export const TooltipExamples: React.FC = () => {
6
6
  return (
7
7
  <Screen background="primary" padding="lg">
8
- <View spacing="lg">
9
- <Text size="xl" weight="bold">Tooltip Examples</Text>
8
+ <View gap="lg">
9
+ <Text typography="h3">Tooltip Examples</Text>
10
10
 
11
- <View spacing="md">
12
- <Text size="lg" weight="semibold">Basic Tooltip</Text>
11
+ <View gap="md">
12
+ <Text typography="h5">Basic Tooltip</Text>
13
13
  <Tooltip content="This is a tooltip">
14
14
  <Button type="outlined">Hover over me</Button>
15
15
  </Tooltip>
16
16
  </View>
17
17
 
18
- <View spacing="md">
19
- <Text size="lg" weight="semibold">Placements</Text>
20
- <View spacing="sm" style={{ alignItems: 'center' }}>
18
+ <View gap="md">
19
+ <Text typography="h5">Placements</Text>
20
+ <View gap="sm" style={{ alignItems: 'center' }}>
21
21
  <Tooltip content="Top tooltip" placement="top">
22
22
  <Button type="outlined">Top</Button>
23
23
  </Tooltip>
@@ -35,8 +35,8 @@ export const TooltipExamples: React.FC = () => {
35
35
  </View>
36
36
  </View>
37
37
 
38
- <View spacing="md">
39
- <Text size="lg" weight="semibold">Sizes</Text>
38
+ <View gap="md">
39
+ <Text typography="h5">Sizes</Text>
40
40
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
41
41
  <Tooltip content="Small tooltip" size="sm">
42
42
  <Button type="outlined" size="sm">Small</Button>
@@ -50,8 +50,8 @@ export const TooltipExamples: React.FC = () => {
50
50
  </View>
51
51
  </View>
52
52
 
53
- <View spacing="md">
54
- <Text size="lg" weight="semibold">Intent Colors</Text>
53
+ <View gap="md">
54
+ <Text typography="h5">Intent Colors</Text>
55
55
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
56
56
  <Tooltip content="Primary tooltip" intent="primary">
57
57
  <Button type="contained" intent="primary">Primary</Button>
@@ -71,8 +71,8 @@ export const TooltipExamples: React.FC = () => {
71
71
  </View>
72
72
  </View>
73
73
 
74
- <View spacing="md">
75
- <Text size="lg" weight="semibold">Custom Delay</Text>
74
+ <View gap="md">
75
+ <Text typography="h5">Custom Delay</Text>
76
76
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
77
77
  <Tooltip content="Instant (0ms)" delay={0}>
78
78
  <Button type="outlined">No Delay</Button>
@@ -86,16 +86,16 @@ export const TooltipExamples: React.FC = () => {
86
86
  </View>
87
87
  </View>
88
88
 
89
- <View spacing="md">
90
- <Text size="lg" weight="semibold">Long Content</Text>
89
+ <View gap="md">
90
+ <Text typography="h5">Long Content</Text>
91
91
  <Tooltip content="This is a longer tooltip that demonstrates how the component handles multi-line content automatically">
92
92
  <Button type="outlined">Hover for long text</Button>
93
93
  </Tooltip>
94
94
  </View>
95
95
 
96
- <View spacing="md">
97
- <Text size="lg" weight="semibold">On Text</Text>
98
- <View>
96
+ <View gap="md">
97
+ <Text typography="h5">On Text</Text>
98
+ <View gap="xl">
99
99
  <Tooltip content="Additional information">
100
100
  <Text style={{ textDecorationLine: 'underline' }}>
101
101
  Hover over this text
@@ -104,11 +104,11 @@ export const TooltipExamples: React.FC = () => {
104
104
  </View>
105
105
  </View>
106
106
 
107
- <View spacing="md">
108
- <Text size="lg" weight="semibold">Rich Content</Text>
107
+ <View gap="md">
108
+ <Text typography="h5">Rich Content</Text>
109
109
  <Tooltip
110
110
  content={
111
- <View spacing="xs">
111
+ <View gap="xs">
112
112
  <Text weight="bold">Rich Tooltip</Text>
113
113
  <Text>With multiple lines</Text>
114
114
  <Text>and formatting</Text>
package/src/examples/VideoExamples.tsx CHANGED
@@ -5,19 +5,19 @@ import Video from '../Video';
5
5
  export const VideoExamples: React.FC = () => {
6
6
  return (
7
7
  <Screen background="primary" padding="lg">
8
- <View spacing="lg">
9
- <Text size="xl" weight="bold">Video Examples</Text>
8
+ <View gap="lg">
9
+ <Text typography="h3">Video Examples</Text>
10
10
 
11
- <View spacing="sm" style={{ padding: 12, backgroundColor: '#fff3cd', borderRadius: 8 }}>
12
- <Text size="sm" weight="semibold">Note:</Text>
13
- <Text size="sm">
11
+ <View gap="sm" style={{ padding: 12, backgroundColor: '#fff3cd', borderRadius: 8 }}>
12
+ <Text typography="subtitle2">Note:</Text>
13
+ <Text typography="body2">
14
14
  On React Native, this component requires react-native-video to be installed.
15
15
  The examples below use sample videos from the web.
16
16
  </Text>
17
17
  </View>
18
18
 
19
- <View spacing="md">
20
- <Text size="lg" weight="semibold">Basic Video with Controls</Text>
19
+ <View gap="md">
20
+ <Text typography="h5">Basic Video with Controls</Text>
21
21
  <Video
22
22
  source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
23
23
  width="100%"
@@ -26,8 +26,8 @@ export const VideoExamples: React.FC = () => {
26
26
  />
27
27
  </View>
28
28
 
29
- <View spacing="md">
30
- <Text size="lg" weight="semibold">Video with Poster</Text>
29
+ <View gap="md">
30
+ <Text typography="h5">Video with Poster</Text>
31
31
  <Video
32
32
  source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
33
33
  poster="https://picsum.photos/800/450"
@@ -37,9 +37,9 @@ export const VideoExamples: React.FC = () => {
37
37
  />
38
38
  </View>
39
39
 
40
- <View spacing="md">
41
- <Text size="lg" weight="semibold">Autoplay & Loop</Text>
42
- <Text size="sm" color="secondary">
40
+ <View gap="md">
41
+ <Text typography="h5">Autoplay & Loop</Text>
42
+ <Text typography="caption" color="secondary">
43
43
  Video plays automatically and loops continuously
44
44
  </Text>
45
45
  <Video
@@ -53,8 +53,8 @@ export const VideoExamples: React.FC = () => {
53
53
  />
54
54
  </View>
55
55
 
56
- <View spacing="md">
57
- <Text size="lg" weight="semibold">Fixed Size</Text>
56
+ <View gap="md">
57
+ <Text typography="h5">Fixed Size</Text>
58
58
  <Video
59
59
  source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
60
60
  width={640}
@@ -63,8 +63,8 @@ export const VideoExamples: React.FC = () => {
63
63
  />
64
64
  </View>
65
65
 
66
- <View spacing="md">
67
- <Text size="lg" weight="semibold">Rounded Corners</Text>
66
+ <View gap="md">
67
+ <Text typography="h5">Rounded Corners</Text>
68
68
  <Video
69
69
  source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"
70
70
  width="100%"
@@ -74,10 +74,10 @@ export const VideoExamples: React.FC = () => {
74
74
  />
75
75
  </View>
76
76
 
77
- <View spacing="md">
78
- <Text size="lg" weight="semibold">Different Aspect Ratios</Text>
79
- <View spacing="sm">
80
- <Text size="sm" weight="medium">16:9 (Widescreen)</Text>
77
+ <View gap="md">
78
+ <Text typography="h5">Different Aspect Ratios</Text>
79
+ <View gap="sm">
80
+ <Text typography="body2">16:9 (Widescreen)</Text>
81
81
  <Video
82
82
  source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
83
83
  width="100%"
@@ -85,7 +85,7 @@ export const VideoExamples: React.FC = () => {
85
85
  controls={true}
86
86
  />
87
87
 
88
- <Text size="sm" weight="medium">4:3 (Standard)</Text>
88
+ <Text typography="body2">4:3 (Standard)</Text>
89
89
  <Video
90
90
  source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
91
91
  width="100%"
@@ -93,7 +93,7 @@ export const VideoExamples: React.FC = () => {
93
93
  controls={true}
94
94
  />
95
95
 
96
- <Text size="sm" weight="medium">1:1 (Square)</Text>
96
+ <Text typography="body2">1:1 (Square)</Text>
97
97
  <Video
98
98
  source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
99
99
  width={300}
@@ -103,9 +103,9 @@ export const VideoExamples: React.FC = () => {
103
103
  </View>
104
104
  </View>
105
105
 
106
- <View spacing="md">
107
- <Text size="lg" weight="semibold">Without Controls</Text>
108
- <Text size="sm" color="secondary">
106
+ <View gap="md">
107
+ <Text typography="h5">Without Controls</Text>
108
+ <Text typography="caption" color="secondary">
109
109
  Video with controls disabled
110
110
  </Text>
111
111
  <Video
@@ -119,9 +119,9 @@ export const VideoExamples: React.FC = () => {
119
119
  />
120
120
  </View>
121
121
 
122
- <View spacing="md">
123
- <Text size="lg" weight="semibold">Event Handlers</Text>
124
- <Text size="sm" color="secondary">
122
+ <View gap="md">
123
+ <Text typography="h5">Event Handlers</Text>
124
+ <Text typography="caption" color="secondary">
125
125
  Check console for video events (onLoad, onPlay, onPause, onEnd)
126
126
  </Text>
127
127
  <Video