@idealyst/mcp-server 1.0.87 → 1.0.89

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 (205) hide show
  1. package/ARCHITECTURE.md +313 -0
  2. package/README.md +292 -104
  3. package/TYPE-SYSTEM.md +397 -0
  4. package/dist/index.js +170 -1
  5. package/examples/components/Accordion.examples.tsx +147 -0
  6. package/examples/components/ActivityIndicator.examples.tsx +350 -0
  7. package/examples/components/Alert.examples.tsx +335 -0
  8. package/examples/components/Avatar.examples.tsx +188 -0
  9. package/examples/components/Badge.examples.tsx +242 -0
  10. package/examples/components/Breadcrumb.examples.tsx +303 -0
  11. package/examples/components/Button.examples.tsx +113 -0
  12. package/examples/components/Card.examples.tsx +131 -0
  13. package/examples/components/Checkbox.examples.tsx +195 -0
  14. package/examples/components/Chip.examples.tsx +87 -0
  15. package/examples/components/Dialog.examples.tsx +344 -0
  16. package/examples/components/Divider.examples.tsx +258 -0
  17. package/examples/components/Icon.examples.tsx +202 -0
  18. package/examples/components/Input.examples.tsx +205 -0
  19. package/examples/components/Menu.examples.tsx +321 -0
  20. package/examples/components/Popover.examples.tsx +439 -0
  21. package/examples/components/Progress.examples.tsx +340 -0
  22. package/examples/components/RadioButton.examples.tsx +443 -0
  23. package/examples/components/Screen.examples.tsx +347 -0
  24. package/examples/components/Select.examples.tsx +279 -0
  25. package/examples/components/Skeleton.examples.tsx +278 -0
  26. package/examples/components/Slider.examples.tsx +249 -0
  27. package/examples/components/Switch.examples.tsx +94 -0
  28. package/examples/components/TabBar.examples.tsx +356 -0
  29. package/examples/components/Text.examples.tsx +177 -0
  30. package/examples/components/TextArea.examples.tsx +203 -0
  31. package/examples/components/Tooltip.examples.tsx +318 -0
  32. package/examples/components/View.examples.tsx +307 -0
  33. package/package.json +15 -2
  34. package/scripts/extract-types.ts +71 -0
  35. package/scripts/type-extractor.ts +286 -0
  36. package/scripts/validate-examples.ts +142 -0
  37. package/src/data/components/Icon.ts +1 -1
  38. package/src/data/components/index.ts +2 -0
  39. package/src/index.ts +181 -1
  40. package/src/tools/get-types.ts +169 -0
  41. package/tsconfig.examples.json +14 -0
  42. package/dist/data/cli-commands.d.ts +0 -2
  43. package/dist/data/cli-commands.d.ts.map +0 -1
  44. package/dist/data/cli-commands.js +0 -100
  45. package/dist/data/cli-commands.js.map +0 -1
  46. package/dist/data/components/Accordion.d.ts +0 -15
  47. package/dist/data/components/Accordion.d.ts.map +0 -1
  48. package/dist/data/components/Accordion.js +0 -112
  49. package/dist/data/components/Accordion.js.map +0 -1
  50. package/dist/data/components/ActivityIndicator.d.ts +0 -15
  51. package/dist/data/components/ActivityIndicator.d.ts.map +0 -1
  52. package/dist/data/components/ActivityIndicator.js +0 -82
  53. package/dist/data/components/ActivityIndicator.js.map +0 -1
  54. package/dist/data/components/Alert.d.ts +0 -15
  55. package/dist/data/components/Alert.d.ts.map +0 -1
  56. package/dist/data/components/Alert.js +0 -132
  57. package/dist/data/components/Alert.js.map +0 -1
  58. package/dist/data/components/Avatar.d.ts +0 -15
  59. package/dist/data/components/Avatar.d.ts.map +0 -1
  60. package/dist/data/components/Avatar.js +0 -93
  61. package/dist/data/components/Avatar.js.map +0 -1
  62. package/dist/data/components/Badge.d.ts +0 -15
  63. package/dist/data/components/Badge.d.ts.map +0 -1
  64. package/dist/data/components/Badge.js +0 -64
  65. package/dist/data/components/Badge.js.map +0 -1
  66. package/dist/data/components/Breadcrumb.d.ts +0 -15
  67. package/dist/data/components/Breadcrumb.d.ts.map +0 -1
  68. package/dist/data/components/Breadcrumb.js +0 -96
  69. package/dist/data/components/Breadcrumb.js.map +0 -1
  70. package/dist/data/components/Button.d.ts +0 -15
  71. package/dist/data/components/Button.d.ts.map +0 -1
  72. package/dist/data/components/Button.js +0 -87
  73. package/dist/data/components/Button.js.map +0 -1
  74. package/dist/data/components/Card.d.ts +0 -15
  75. package/dist/data/components/Card.d.ts.map +0 -1
  76. package/dist/data/components/Card.js +0 -67
  77. package/dist/data/components/Card.js.map +0 -1
  78. package/dist/data/components/Checkbox.d.ts +0 -15
  79. package/dist/data/components/Checkbox.d.ts.map +0 -1
  80. package/dist/data/components/Checkbox.js +0 -118
  81. package/dist/data/components/Checkbox.js.map +0 -1
  82. package/dist/data/components/Chip.d.ts +0 -15
  83. package/dist/data/components/Chip.d.ts.map +0 -1
  84. package/dist/data/components/Chip.js +0 -76
  85. package/dist/data/components/Chip.js.map +0 -1
  86. package/dist/data/components/Dialog.d.ts +0 -15
  87. package/dist/data/components/Dialog.d.ts.map +0 -1
  88. package/dist/data/components/Dialog.js +0 -137
  89. package/dist/data/components/Dialog.js.map +0 -1
  90. package/dist/data/components/Divider.d.ts +0 -15
  91. package/dist/data/components/Divider.d.ts.map +0 -1
  92. package/dist/data/components/Divider.js +0 -71
  93. package/dist/data/components/Divider.js.map +0 -1
  94. package/dist/data/components/Icon.d.ts +0 -15
  95. package/dist/data/components/Icon.d.ts.map +0 -1
  96. package/dist/data/components/Icon.js +0 -70
  97. package/dist/data/components/Icon.js.map +0 -1
  98. package/dist/data/components/Image.d.ts +0 -15
  99. package/dist/data/components/Image.d.ts.map +0 -1
  100. package/dist/data/components/Image.js +0 -122
  101. package/dist/data/components/Image.js.map +0 -1
  102. package/dist/data/components/Input.d.ts +0 -15
  103. package/dist/data/components/Input.d.ts.map +0 -1
  104. package/dist/data/components/Input.js +0 -109
  105. package/dist/data/components/Input.js.map +0 -1
  106. package/dist/data/components/List.d.ts +0 -15
  107. package/dist/data/components/List.d.ts.map +0 -1
  108. package/dist/data/components/List.js +0 -113
  109. package/dist/data/components/List.js.map +0 -1
  110. package/dist/data/components/Menu.d.ts +0 -15
  111. package/dist/data/components/Menu.d.ts.map +0 -1
  112. package/dist/data/components/Menu.js +0 -132
  113. package/dist/data/components/Menu.js.map +0 -1
  114. package/dist/data/components/Popover.d.ts +0 -15
  115. package/dist/data/components/Popover.d.ts.map +0 -1
  116. package/dist/data/components/Popover.js +0 -159
  117. package/dist/data/components/Popover.js.map +0 -1
  118. package/dist/data/components/Pressable.d.ts +0 -15
  119. package/dist/data/components/Pressable.d.ts.map +0 -1
  120. package/dist/data/components/Pressable.js +0 -125
  121. package/dist/data/components/Pressable.js.map +0 -1
  122. package/dist/data/components/Progress.d.ts +0 -15
  123. package/dist/data/components/Progress.d.ts.map +0 -1
  124. package/dist/data/components/Progress.js +0 -95
  125. package/dist/data/components/Progress.js.map +0 -1
  126. package/dist/data/components/RadioButton.d.ts +0 -15
  127. package/dist/data/components/RadioButton.d.ts.map +0 -1
  128. package/dist/data/components/RadioButton.js +0 -140
  129. package/dist/data/components/RadioButton.js.map +0 -1
  130. package/dist/data/components/SVGImage.d.ts +0 -15
  131. package/dist/data/components/SVGImage.d.ts.map +0 -1
  132. package/dist/data/components/SVGImage.js +0 -112
  133. package/dist/data/components/SVGImage.js.map +0 -1
  134. package/dist/data/components/Screen.d.ts +0 -15
  135. package/dist/data/components/Screen.d.ts.map +0 -1
  136. package/dist/data/components/Screen.js +0 -99
  137. package/dist/data/components/Screen.js.map +0 -1
  138. package/dist/data/components/Select.d.ts +0 -15
  139. package/dist/data/components/Select.d.ts.map +0 -1
  140. package/dist/data/components/Select.js +0 -146
  141. package/dist/data/components/Select.js.map +0 -1
  142. package/dist/data/components/Skeleton.d.ts +0 -15
  143. package/dist/data/components/Skeleton.d.ts.map +0 -1
  144. package/dist/data/components/Skeleton.js +0 -110
  145. package/dist/data/components/Skeleton.js.map +0 -1
  146. package/dist/data/components/Slider.d.ts +0 -15
  147. package/dist/data/components/Slider.d.ts.map +0 -1
  148. package/dist/data/components/Slider.js +0 -129
  149. package/dist/data/components/Slider.js.map +0 -1
  150. package/dist/data/components/Switch.d.ts +0 -15
  151. package/dist/data/components/Switch.d.ts.map +0 -1
  152. package/dist/data/components/Switch.js +0 -127
  153. package/dist/data/components/Switch.js.map +0 -1
  154. package/dist/data/components/TabBar.d.ts +0 -15
  155. package/dist/data/components/TabBar.d.ts.map +0 -1
  156. package/dist/data/components/TabBar.js +0 -145
  157. package/dist/data/components/TabBar.js.map +0 -1
  158. package/dist/data/components/Table.d.ts +0 -15
  159. package/dist/data/components/Table.d.ts.map +0 -1
  160. package/dist/data/components/Table.js +0 -151
  161. package/dist/data/components/Table.js.map +0 -1
  162. package/dist/data/components/Tabs.d.ts +0 -15
  163. package/dist/data/components/Tabs.d.ts.map +0 -1
  164. package/dist/data/components/Tabs.js +0 -150
  165. package/dist/data/components/Tabs.js.map +0 -1
  166. package/dist/data/components/Text.d.ts +0 -15
  167. package/dist/data/components/Text.d.ts.map +0 -1
  168. package/dist/data/components/Text.js +0 -85
  169. package/dist/data/components/Text.js.map +0 -1
  170. package/dist/data/components/TextArea.d.ts +0 -15
  171. package/dist/data/components/TextArea.d.ts.map +0 -1
  172. package/dist/data/components/TextArea.js +0 -155
  173. package/dist/data/components/TextArea.js.map +0 -1
  174. package/dist/data/components/Tooltip.d.ts +0 -15
  175. package/dist/data/components/Tooltip.d.ts.map +0 -1
  176. package/dist/data/components/Tooltip.js +0 -105
  177. package/dist/data/components/Tooltip.js.map +0 -1
  178. package/dist/data/components/Video.d.ts +0 -15
  179. package/dist/data/components/Video.d.ts.map +0 -1
  180. package/dist/data/components/Video.js +0 -168
  181. package/dist/data/components/Video.js.map +0 -1
  182. package/dist/data/components/View.d.ts +0 -15
  183. package/dist/data/components/View.d.ts.map +0 -1
  184. package/dist/data/components/View.js +0 -126
  185. package/dist/data/components/View.js.map +0 -1
  186. package/dist/data/components/index.d.ts +0 -37
  187. package/dist/data/components/index.d.ts.map +0 -1
  188. package/dist/data/components/index.js +0 -110
  189. package/dist/data/components/index.js.map +0 -1
  190. package/dist/data/framework-guides.d.ts +0 -2
  191. package/dist/data/framework-guides.d.ts.map +0 -1
  192. package/dist/data/framework-guides.js +0 -589
  193. package/dist/data/framework-guides.js.map +0 -1
  194. package/dist/data/icon-guide.d.ts +0 -2
  195. package/dist/data/icon-guide.d.ts.map +0 -1
  196. package/dist/data/icon-guide.js +0 -285
  197. package/dist/data/icon-guide.js.map +0 -1
  198. package/dist/data/icons.json +0 -7452
  199. package/dist/data/navigation-guides.d.ts +0 -2
  200. package/dist/data/navigation-guides.d.ts.map +0 -1
  201. package/dist/data/navigation-guides.js +0 -1196
  202. package/dist/data/navigation-guides.js.map +0 -1
  203. package/dist/index.d.ts +0 -3
  204. package/dist/index.d.ts.map +0 -1
  205. package/dist/index.js.map +0 -1
@@ -1,145 +0,0 @@
1
- export const TabBar = {
2
- category: "navigation",
3
- description: "Tab bar navigation component for switching between views or sections",
4
- props: `
5
- - \`items\`: TabBarItem[] - Array of tab items
6
- - \`value\`: string - Unique tab value
7
- - \`label\`: string - Tab label text
8
- - \`disabled\`: boolean - Whether tab is disabled
9
- - \`value\`: string - Currently active tab value
10
- - \`defaultValue\`: string - Default tab (uncontrolled)
11
- - \`onChange\`: (value: string) => void - Tab change handler
12
- - \`variant\`: 'default' | 'pills' | 'underline' - Visual style
13
- - \`size\`: 'small' | 'medium' | 'large' - Tab size
14
- - \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
15
- - \`style\`: ViewStyle - Additional styles
16
- - \`testID\`: string - Test identifier
17
- `,
18
- features: [
19
- "Three visual variants",
20
- "Controlled and uncontrolled modes",
21
- "Three sizes",
22
- "Five intent colors",
23
- "Disabled tabs",
24
- "Simple configuration",
25
- ],
26
- bestPractices: [
27
- "Use 'underline' variant for page-level navigation",
28
- "Use 'pills' variant for contained sections",
29
- "Keep tab labels short (1-2 words)",
30
- "Use 3-5 tabs for optimal UX",
31
- "Disable tabs when content is unavailable",
32
- "Preload tab content for smooth transitions",
33
- ],
34
- usage: `
35
- import { TabBar } from '@idealyst/components';
36
- import { useState } from 'react';
37
-
38
- function Example() {
39
- const [activeTab, setActiveTab] = useState('home');
40
-
41
- const items = [
42
- { value: 'home', label: 'Home' },
43
- { value: 'profile', label: 'Profile' },
44
- { value: 'settings', label: 'Settings' },
45
- ];
46
-
47
- return (
48
- <TabBar
49
- items={items}
50
- value={activeTab}
51
- onChange={setActiveTab}
52
- variant="underline"
53
- />
54
- );
55
- }
56
- `,
57
- examples: {
58
- basic: `import { TabBar } from '@idealyst/components';
59
-
60
- const items = [
61
- { value: '1', label: 'Tab 1' },
62
- { value: '2', label: 'Tab 2' },
63
- ];
64
-
65
- <TabBar items={items} defaultValue="1" />`,
66
- variants: `import { TabBar, View } from '@idealyst/components';
67
-
68
- const items = [
69
- { value: 'a', label: 'First' },
70
- { value: 'b', label: 'Second' },
71
- ];
72
-
73
- <View spacing="md">
74
- <TabBar items={items} variant="default" />
75
- <TabBar items={items} variant="pills" />
76
- <TabBar items={items} variant="underline" />
77
- </View>`,
78
- "with-icons": `import { TabBar, View, Text } from '@idealyst/components';
79
- import { useState } from 'react';
80
-
81
- function Example() {
82
- const [tab, setTab] = useState('overview');
83
-
84
- const items = [
85
- { value: 'overview', label: 'Overview' },
86
- { value: 'analytics', label: 'Analytics' },
87
- { value: 'reports', label: 'Reports' },
88
- ];
89
-
90
- return (
91
- <View spacing="md">
92
- <TabBar
93
- items={items}
94
- value={tab}
95
- onChange={setTab}
96
- variant="underline"
97
- intent="primary"
98
- />
99
- <Text>{tab} content here</Text>
100
- </View>
101
- );
102
- }`,
103
- interactive: `import { TabBar, View, Text, Card } from '@idealyst/components';
104
- import { useState } from 'react';
105
-
106
- function Example() {
107
- const [activeTab, setActiveTab] = useState('personal');
108
-
109
- const items = [
110
- { value: 'personal', label: 'Personal Info' },
111
- { value: 'security', label: 'Security' },
112
- { value: 'notifications', label: 'Notifications' },
113
- { value: 'billing', label: 'Billing', disabled: true },
114
- ];
115
-
116
- const renderContent = () => {
117
- switch (activeTab) {
118
- case 'personal':
119
- return <Text>Personal information settings</Text>;
120
- case 'security':
121
- return <Text>Security and privacy settings</Text>;
122
- case 'notifications':
123
- return <Text>Notification preferences</Text>;
124
- default:
125
- return null;
126
- }
127
- };
128
-
129
- return (
130
- <View spacing="md">
131
- <TabBar
132
- items={items}
133
- value={activeTab}
134
- onChange={setActiveTab}
135
- variant="pills"
136
- />
137
- <Card variant="outlined" padding="medium">
138
- {renderContent()}
139
- </Card>
140
- </View>
141
- );
142
- }`,
143
- },
144
- };
145
- //# sourceMappingURL=TabBar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../../src/data/components/TabBar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,sEAAsE;IACnF,KAAK,EAAE;;;;;;;;;;;;;CAaR;IACC,QAAQ,EAAE;QACR,uBAAuB;QACvB,mCAAmC;QACnC,aAAa;QACb,oBAAoB;QACpB,eAAe;QACf,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,mDAAmD;QACnD,4CAA4C;QAC5C,mCAAmC;QACnC,6BAA6B;QAC7B,0CAA0C;QAC1C,4CAA4C;KAC7C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;CAsBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;0CAO+B;QAEtC,QAAQ,EAAE;;;;;;;;;;;QAWN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;EAwBhB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Table: {
2
- category: string;
3
- description: string;
4
- props: string;
5
- features: string[];
6
- bestPractices: string[];
7
- usage: string;
8
- examples: {
9
- basic: string;
10
- variants: string;
11
- "with-icons": string;
12
- interactive: string;
13
- };
14
- };
15
- //# sourceMappingURL=Table.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/data/components/Table.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAwJjB,CAAC"}
@@ -1,151 +0,0 @@
1
- export const Table = {
2
- category: "data",
3
- description: "Data table component for displaying structured tabular data",
4
- props: `
5
- - \`columns\`: TableColumn<T>[] - Column definitions
6
- - \`key\`: string - Unique column key
7
- - \`title\`: string - Column header title
8
- - \`dataIndex\`: string - Key in data object (optional)
9
- - \`render\`: (value, row, index) => ReactNode - Custom cell renderer
10
- - \`width\`: number | string - Column width
11
- - \`align\`: 'left' | 'center' | 'right' - Text alignment
12
- - \`data\`: T[] - Array of data objects
13
- - \`variant\`: 'default' | 'bordered' | 'striped' - Visual style
14
- - \`size\`: 'small' | 'medium' | 'large' - Cell padding/size
15
- - \`stickyHeader\`: boolean - Keep header fixed on scroll
16
- - \`onRowPress\`: (row: T, index: number) => void - Row click handler
17
- - \`style\`: ViewStyle - Additional styles
18
- - \`testID\`: string - Test identifier
19
- `,
20
- features: [
21
- "Column-based configuration",
22
- "Custom cell renderers",
23
- "Three visual variants",
24
- "Three sizes",
25
- "Sticky header support",
26
- "Row click handling",
27
- "Column alignment",
28
- "Custom column widths",
29
- ],
30
- bestPractices: [
31
- "Use render function for complex cell content",
32
- "Enable stickyHeader for long tables",
33
- "Use 'striped' variant for better readability",
34
- "Set column widths for important columns",
35
- "Keep column count reasonable for mobile",
36
- "Use appropriate size for data density",
37
- ],
38
- usage: `
39
- import { Table } from '@idealyst/components';
40
-
41
- const columns = [
42
- { key: 'name', title: 'Name', dataIndex: 'name' },
43
- { key: 'email', title: 'Email', dataIndex: 'email' },
44
- {
45
- key: 'status',
46
- title: 'Status',
47
- render: (_, row) => <Badge>{row.status}</Badge>,
48
- },
49
- ];
50
-
51
- const data = [
52
- { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
53
- { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
54
- ];
55
-
56
- <Table columns={columns} data={data} variant="striped" />
57
- `,
58
- examples: {
59
- basic: `import { Table } from '@idealyst/components';
60
-
61
- const columns = [
62
- { key: 'id', title: 'ID', dataIndex: 'id' },
63
- { key: 'name', title: 'Name', dataIndex: 'name' },
64
- ];
65
-
66
- const data = [
67
- { id: 1, name: 'Item 1' },
68
- { id: 2, name: 'Item 2' },
69
- ];
70
-
71
- <Table columns={columns} data={data} />`,
72
- variants: `import { Table, View } from '@idealyst/components';
73
-
74
- const columns = [{ key: 'name', title: 'Name', dataIndex: 'name' }];
75
- const data = [{ name: 'Test' }];
76
-
77
- <View spacing="md">
78
- <Table columns={columns} data={data} variant="default" />
79
- <Table columns={columns} data={data} variant="bordered" />
80
- <Table columns={columns} data={data} variant="striped" />
81
- </View>`,
82
- "with-icons": `import { Table, Badge, Icon, View, Text } from '@idealyst/components';
83
-
84
- const columns = [
85
- {
86
- key: 'user',
87
- title: 'User',
88
- render: (_, row) => (
89
- <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
90
- <Icon name="account-circle" size="sm" />
91
- <Text>{row.name}</Text>
92
- </View>
93
- ),
94
- },
95
- {
96
- key: 'status',
97
- title: 'Status',
98
- render: (_, row) => (
99
- <Badge color={row.active ? 'green' : 'gray'}>
100
- {row.active ? 'Active' : 'Inactive'}
101
- </Badge>
102
- ),
103
- },
104
- ];
105
-
106
- <Table columns={columns} data={users} />`,
107
- interactive: `import { Table, Button, View, Text } from '@idealyst/components';
108
- import { useState } from 'react';
109
-
110
- function Example() {
111
- const [selected, setSelected] = useState(null);
112
-
113
- const columns = [
114
- { key: 'id', title: 'ID', dataIndex: 'id', width: 60 },
115
- { key: 'product', title: 'Product', dataIndex: 'name' },
116
- { key: 'price', title: 'Price', dataIndex: 'price', align: 'right' },
117
- {
118
- key: 'actions',
119
- title: 'Actions',
120
- render: (_, row) => (
121
- <Button
122
- size="small"
123
- variant="outlined"
124
- onPress={() => setSelected(row)}
125
- >
126
- View
127
- </Button>
128
- ),
129
- },
130
- ];
131
-
132
- const data = [
133
- { id: 1, name: 'Product A', price: '$29.99' },
134
- { id: 2, name: 'Product B', price: '$49.99' },
135
- ];
136
-
137
- return (
138
- <View spacing="md">
139
- <Table
140
- columns={columns}
141
- data={data}
142
- variant="bordered"
143
- onRowPress={(row) => setSelected(row)}
144
- />
145
- {selected && <Text>Selected: {selected.name}</Text>}
146
- </View>
147
- );
148
- }`,
149
- },
150
- };
151
- //# sourceMappingURL=Table.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/data/components/Table.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,6DAA6D;IAC1E,KAAK,EAAE;;;;;;;;;;;;;;;CAeR;IACC,QAAQ,EAAE;QACR,4BAA4B;QAC5B,uBAAuB;QACvB,uBAAuB;QACvB,aAAa;QACb,uBAAuB;QACvB,oBAAoB;QACpB,kBAAkB;QAClB,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,8CAA8C;QAC9C,qCAAqC;QACrC,8CAA8C;QAC9C,yCAAyC;QACzC,yCAAyC;QACzC,uCAAuC;KACxC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;CAmBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;;;;wCAY6B;QAEpC,QAAQ,EAAE;;;;;;;;;QASN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;yCAwBuB;QAErC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Tabs: {
2
- category: string;
3
- description: string;
4
- props: string;
5
- features: string[];
6
- bestPractices: string[];
7
- usage: string;
8
- examples: {
9
- basic: string;
10
- variants: string;
11
- "with-icons": string;
12
- interactive: string;
13
- };
14
- };
15
- //# sourceMappingURL=Tabs.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/data/components/Tabs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAuJhB,CAAC"}
@@ -1,150 +0,0 @@
1
- export const Tabs = {
2
- category: "navigation",
3
- description: "Tabs component with content panels for organizing information into tabbed sections",
4
- props: `
5
- Tab Props:
6
- - \`value\`: string - Unique tab identifier
7
- - \`label\`: string - Tab label text
8
- - \`disabled\`: boolean - Whether tab is disabled
9
- - \`children\`: ReactNode - Tab panel content
10
-
11
- Tabs Props:
12
- - \`value\`: string - Currently active tab value
13
- - \`defaultValue\`: string - Default tab (uncontrolled)
14
- - \`onChange\`: (value: string) => void - Tab change handler
15
- - \`variant\`: 'default' | 'pills' | 'underline' - Visual style
16
- - \`size\`: 'small' | 'medium' | 'large' - Tab size
17
- - \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
18
- - \`style\`: ViewStyle - Additional styles
19
- - \`testID\`: string - Test identifier
20
- - \`children\`: ReactNode - Tab components
21
- `,
22
- features: [
23
- "Integrated tab navigation and content panels",
24
- "Three visual variants",
25
- "Controlled and uncontrolled modes",
26
- "Three sizes",
27
- "Five intent colors",
28
- "Disabled tabs",
29
- "Automatic content switching",
30
- ],
31
- bestPractices: [
32
- "Use Tabs for content that belongs together",
33
- "Use TabBar for navigation without content management",
34
- "Keep 3-5 tabs for optimal UX",
35
- "Lazy load tab content if heavy",
36
- "Use descriptive tab labels",
37
- "Consider vertical tabs for many options",
38
- ],
39
- usage: `
40
- import { Tabs, Tab, Text } from '@idealyst/components';
41
-
42
- <Tabs defaultValue="tab1" variant="underline">
43
- <Tab value="tab1" label="Overview">
44
- <Text>Overview content</Text>
45
- </Tab>
46
- <Tab value="tab2" label="Details">
47
- <Text>Details content</Text>
48
- </Tab>
49
- <Tab value="tab3" label="Settings">
50
- <Text>Settings content</Text>
51
- </Tab>
52
- </Tabs>
53
- `,
54
- examples: {
55
- basic: `import { Tabs, Tab, Text } from '@idealyst/components';
56
-
57
- <Tabs defaultValue="1">
58
- <Tab value="1" label="First">
59
- <Text>First tab content</Text>
60
- </Tab>
61
- <Tab value="2" label="Second">
62
- <Text>Second tab content</Text>
63
- </Tab>
64
- </Tabs>`,
65
- variants: `import { Tabs, Tab, View, Text } from '@idealyst/components';
66
-
67
- <View spacing="lg">
68
- <Tabs defaultValue="a" variant="default">
69
- <Tab value="a" label="Default"><Text>Content A</Text></Tab>
70
- <Tab value="b" label="Style"><Text>Content B</Text></Tab>
71
- </Tabs>
72
-
73
- <Tabs defaultValue="a" variant="pills">
74
- <Tab value="a" label="Pills"><Text>Content A</Text></Tab>
75
- <Tab value="b" label="Style"><Text>Content B</Text></Tab>
76
- </Tabs>
77
-
78
- <Tabs defaultValue="a" variant="underline">
79
- <Tab value="a" label="Underline"><Text>Content A</Text></Tab>
80
- <Tab value="b" label="Style"><Text>Content B</Text></Tab>
81
- </Tabs>
82
- </View>`,
83
- "with-icons": `import { Tabs, Tab, View, Text, Card } from '@idealyst/components';
84
-
85
- <Tabs defaultValue="profile" variant="pills" intent="primary">
86
- <Tab value="profile" label="Profile">
87
- <Card padding="medium">
88
- <View spacing="md">
89
- <Text weight="bold">Profile Settings</Text>
90
- <Text>Update your profile information</Text>
91
- </View>
92
- </Card>
93
- </Tab>
94
- <Tab value="security" label="Security">
95
- <Card padding="medium">
96
- <View spacing="md">
97
- <Text weight="bold">Security Settings</Text>
98
- <Text>Manage your security preferences</Text>
99
- </View>
100
- </Card>
101
- </Tab>
102
- </Tabs>`,
103
- interactive: `import { Tabs, Tab, View, Text, Input, Button } from '@idealyst/components';
104
- import { useState } from 'react';
105
-
106
- function Example() {
107
- const [activeTab, setActiveTab] = useState('account');
108
- const [name, setName] = useState('');
109
- const [email, setEmail] = useState('');
110
-
111
- return (
112
- <Tabs value={activeTab} onChange={setActiveTab} variant="underline">
113
- <Tab value="account" label="Account">
114
- <View spacing="md" style={{ padding: 16 }}>
115
- <Text weight="bold">Account Information</Text>
116
- <Input
117
- label="Name"
118
- value={name}
119
- onChangeText={setName}
120
- placeholder="Enter your name"
121
- />
122
- <Input
123
- label="Email"
124
- value={email}
125
- onChangeText={setEmail}
126
- placeholder="Enter your email"
127
- />
128
- <Button intent="primary">Save Changes</Button>
129
- </View>
130
- </Tab>
131
-
132
- <Tab value="privacy" label="Privacy">
133
- <View spacing="md" style={{ padding: 16 }}>
134
- <Text weight="bold">Privacy Settings</Text>
135
- <Text>Manage your privacy preferences here</Text>
136
- </View>
137
- </Tab>
138
-
139
- <Tab value="notifications" label="Notifications">
140
- <View spacing="md" style={{ padding: 16 }}>
141
- <Text weight="bold">Notification Preferences</Text>
142
- <Text>Configure how you receive notifications</Text>
143
- </View>
144
- </Tab>
145
- </Tabs>
146
- );
147
- }`,
148
- },
149
- };
150
- //# sourceMappingURL=Tabs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/data/components/Tabs.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,oFAAoF;IACjG,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBR;IACC,QAAQ,EAAE;QACR,8CAA8C;QAC9C,uBAAuB;QACvB,mCAAmC;QACnC,aAAa;QACb,oBAAoB;QACpB,eAAe;QACf,6BAA6B;KAC9B;IACD,aAAa,EAAE;QACb,4CAA4C;QAC5C,sDAAsD;QACtD,8BAA8B;QAC9B,gCAAgC;QAChC,4BAA4B;QAC5B,yCAAyC;KAC1C;IACD,KAAK,EAAE;;;;;;;;;;;;;;CAcR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;QASH;QAEJ,QAAQ,EAAE;;;;;;;;;;;;;;;;;QAiBN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;QAmBV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4Cf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Text: {
2
- category: string;
3
- description: string;
4
- props: string;
5
- features: string[];
6
- bestPractices: string[];
7
- usage: string;
8
- examples: {
9
- basic: string;
10
- variants: string;
11
- "with-icons": string;
12
- interactive: string;
13
- };
14
- };
15
- //# sourceMappingURL=Text.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/data/components/Text.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAsFhB,CAAC"}
@@ -1,85 +0,0 @@
1
- export const Text = {
2
- category: "typography",
3
- description: "Styled text component with size, weight, and color variants",
4
- props: `
5
- - \`children\`: ReactNode - The text content to display
6
- - \`size\`: 'small' | 'medium' | 'large' | 'xlarge' - Text size variant
7
- - \`weight\`: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' - Font weight
8
- - \`color\`: DisplayColorVariant - Text color from theme
9
- - \`align\`: 'left' | 'center' | 'right' - Text alignment
10
- - \`style\`: any - Additional custom styles
11
- - \`testID\`: string - Test identifier
12
- `,
13
- features: [
14
- "Four size variants",
15
- "Five weight options",
16
- "Theme color variants",
17
- "Three alignment options",
18
- "Cross-platform support",
19
- "Inherits parent text styles",
20
- ],
21
- bestPractices: [
22
- "Use semantic sizes (xlarge for headings, small for captions)",
23
- "Use appropriate weights for hierarchy",
24
- "Prefer theme colors over custom colors",
25
- "Use 'left' alignment for body text",
26
- "Use 'center' for short, important text",
27
- "Nest Text components for mixed styles",
28
- ],
29
- usage: `
30
- import { Text } from '@idealyst/components';
31
-
32
- <Text size="xlarge" weight="bold" color="primary">
33
- Heading Text
34
- </Text>
35
-
36
- <Text size="medium" color="secondary">
37
- Body text with normal weight
38
- </Text>
39
- `,
40
- examples: {
41
- basic: `import { Text } from '@idealyst/components';
42
-
43
- <Text>Simple text content</Text>`,
44
- variants: `import { Text, View } from '@idealyst/components';
45
-
46
- <View spacing="md">
47
- <Text size="small">Small text</Text>
48
- <Text size="medium">Medium text</Text>
49
- <Text size="large">Large text</Text>
50
- <Text size="xlarge">Extra large text</Text>
51
- </View>`,
52
- "with-icons": `import { Text, View, Icon } from '@idealyst/components';
53
-
54
- <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
55
- <Icon name="check-circle" size="md" color="success" />
56
- <Text color="success" weight="medium">
57
- Verified Account
58
- </Text>
59
- </View>`,
60
- interactive: `import { Text, View, Button } from '@idealyst/components';
61
- import { useState } from 'react';
62
-
63
- function Example() {
64
- const [count, setCount] = useState(0);
65
-
66
- return (
67
- <View spacing="md">
68
- <Text size="xlarge" weight="bold" align="center">
69
- Counter: {count}
70
- </Text>
71
-
72
- <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'center' }}>
73
- <Button onPress={() => setCount(count - 1)}>-</Button>
74
- <Button onPress={() => setCount(count + 1)}>+</Button>
75
- </View>
76
-
77
- <Text size="small" color="secondary" align="center">
78
- Click buttons to change the count
79
- </Text>
80
- </View>
81
- );
82
- }`,
83
- },
84
- };
85
- //# sourceMappingURL=Text.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/data/components/Text.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,6DAA6D;IAC1E,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,oBAAoB;QACpB,qBAAqB;QACrB,sBAAsB;QACtB,yBAAyB;QACzB,wBAAwB;QACxB,6BAA6B;KAC9B;IACD,aAAa,EAAE;QACb,8DAA8D;QAC9D,uCAAuC;QACvC,wCAAwC;QACxC,oCAAoC;QACpC,wCAAwC;QACxC,uCAAuC;KACxC;IACD,KAAK,EAAE;;;;;;;;;;CAUR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;iCAEsB;QAE7B,QAAQ,EAAE;;;;;;;QAON;QAEJ,YAAY,EAAE;;;;;;;QAOV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const TextArea: {
2
- category: string;
3
- description: string;
4
- props: string;
5
- features: string[];
6
- bestPractices: string[];
7
- usage: string;
8
- examples: {
9
- basic: string;
10
- variants: string;
11
- "with-icons": string;
12
- interactive: string;
13
- };
14
- };
15
- //# sourceMappingURL=TextArea.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/data/components/TextArea.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CA4JpB,CAAC"}