@idealyst/mcp-server 1.0.87 → 1.0.88

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,112 +0,0 @@
1
- export const Accordion = {
2
- category: "display",
3
- description: "Expandable/collapsible content sections with support for single or multiple open items",
4
- props: `
5
- - \`items\`: AccordionItem[] - Array of accordion items
6
- - \`id\`: string - Unique identifier for the item
7
- - \`title\`: string - Title text displayed in the header
8
- - \`content\`: ReactNode - Content displayed when expanded
9
- - \`disabled\`: boolean - Whether the item is disabled
10
- - \`allowMultiple\`: boolean - Allow multiple items to be expanded simultaneously (default: false)
11
- - \`defaultExpanded\`: string[] - Array of item IDs to expand by default
12
- - \`variant\`: 'default' | 'separated' | 'bordered' - Visual style variant
13
- - \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
14
- - \`size\`: 'small' | 'medium' | 'large' - Size of accordion items
15
- - \`style\`: ViewStyle - Additional custom styles
16
- - \`testID\`: string - Test identifier
17
- `,
18
- features: [
19
- "Single or multiple item expansion modes",
20
- "Default expanded items support",
21
- "Three visual variants",
22
- "Five intent colors",
23
- "Three size options",
24
- "Disabled item state",
25
- "Controlled and uncontrolled modes",
26
- ],
27
- bestPractices: [
28
- "Use 'default' variant for standard content organization",
29
- "Use 'separated' variant for distinct sections",
30
- "Set allowMultiple to true for FAQs where users may need to compare answers",
31
- "Keep accordion titles concise and descriptive",
32
- "Use defaultExpanded sparingly to avoid overwhelming users",
33
- ],
34
- usage: `
35
- import { Accordion } from '@idealyst/components';
36
-
37
- const items = [
38
- {
39
- id: '1',
40
- title: 'What is Idealyst?',
41
- content: <Text>Idealyst is a cross-platform React framework...</Text>,
42
- },
43
- {
44
- id: '2',
45
- title: 'How do I get started?',
46
- content: <Text>Install the CLI and create a new project...</Text>,
47
- },
48
- ];
49
-
50
- <Accordion
51
- items={items}
52
- variant="bordered"
53
- defaultExpanded={['1']}
54
- />
55
- `,
56
- examples: {
57
- basic: `import { Accordion, Text } from '@idealyst/components';
58
-
59
- const items = [
60
- { id: '1', title: 'Section 1', content: <Text>Content 1</Text> },
61
- { id: '2', title: 'Section 2', content: <Text>Content 2</Text> },
62
- ];
63
-
64
- <Accordion items={items} />`,
65
- variants: `import { Accordion, Text } from '@idealyst/components';
66
-
67
- const items = [
68
- { id: '1', title: 'Item', content: <Text>Content</Text> },
69
- ];
70
-
71
- // Different variants
72
- <Accordion items={items} variant="default" />
73
- <Accordion items={items} variant="separated" />
74
- <Accordion items={items} variant="bordered" />`,
75
- "with-icons": `import { Accordion, View, Icon, Text } from '@idealyst/components';
76
-
77
- const items = [
78
- {
79
- id: '1',
80
- title: 'Account Settings',
81
- content: (
82
- <View spacing="sm">
83
- <Icon name="account" size="md" />
84
- <Text>Manage your account preferences</Text>
85
- </View>
86
- ),
87
- },
88
- ];
89
-
90
- <Accordion items={items} intent="primary" />`,
91
- interactive: `import { Accordion, Text } from '@idealyst/components';
92
- import { useState } from 'react';
93
-
94
- function Example() {
95
- const items = [
96
- { id: '1', title: 'FAQ 1', content: <Text>Answer 1</Text> },
97
- { id: '2', title: 'FAQ 2', content: <Text>Answer 2</Text> },
98
- { id: '3', title: 'FAQ 3', content: <Text>Answer 3</Text> },
99
- ];
100
-
101
- return (
102
- <Accordion
103
- items={items}
104
- allowMultiple
105
- defaultExpanded={['1']}
106
- variant="bordered"
107
- />
108
- );
109
- }`,
110
- },
111
- };
112
- //# sourceMappingURL=Accordion.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/data/components/Accordion.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,wFAAwF;IACrG,KAAK,EAAE;;;;;;;;;;;;;CAaR;IACC,QAAQ,EAAE;QACR,yCAAyC;QACzC,gCAAgC;QAChC,uBAAuB;QACvB,oBAAoB;QACpB,oBAAoB;QACpB,qBAAqB;QACrB,mCAAmC;KACpC;IACD,aAAa,EAAE;QACb,yDAAyD;QACzD,+CAA+C;QAC/C,4EAA4E;QAC5E,+CAA+C;QAC/C,2DAA2D;KAC5D;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;CAqBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;4BAOiB;QAExB,QAAQ,EAAE;;;;;;;;;+CASiC;QAE3C,YAAY,EAAE;;;;;;;;;;;;;;;6CAe2B;QAEzC,WAAW,EAAE;;;;;;;;;;;;;;;;;;EAkBf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const ActivityIndicator: {
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=ActivityIndicator.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ActivityIndicator.d.ts","sourceRoot":"","sources":["../../../src/data/components/ActivityIndicator.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAmF7B,CAAC"}
@@ -1,82 +0,0 @@
1
- export const ActivityIndicator = {
2
- category: "feedback",
3
- description: "Loading spinner/indicator for showing ongoing processes or loading states",
4
- props: `
5
- - \`animating\`: boolean - Whether the indicator is animating/visible (default: true)
6
- - \`size\`: 'small' | 'medium' | 'large' | number - Size of the indicator (default: medium)
7
- - \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme (default: primary)
8
- - \`color\`: string - Custom color override (overrides intent)
9
- - \`style\`: ViewStyle - Additional custom styles
10
- - \`testID\`: string - Test identifier
11
- - \`hidesWhenStopped\`: boolean - Hide indicator when not animating (default: true)
12
- `,
13
- features: [
14
- "Animated loading spinner",
15
- "Three predefined sizes plus custom numeric size",
16
- "Five intent colors",
17
- "Custom color support",
18
- "Auto-hide when stopped",
19
- "Cross-platform support",
20
- ],
21
- bestPractices: [
22
- "Use 'primary' intent for general loading states",
23
- "Use 'small' size for inline loading indicators",
24
- "Use 'large' size for full-screen loading overlays",
25
- "Always provide context about what is loading",
26
- "Consider using with overlay for blocking operations",
27
- ],
28
- usage: `
29
- import { ActivityIndicator, View, Text } from '@idealyst/components';
30
-
31
- <View spacing="md">
32
- <ActivityIndicator size="large" intent="primary" />
33
- <Text>Loading data...</Text>
34
- </View>
35
- `,
36
- examples: {
37
- basic: `import { ActivityIndicator } from '@idealyst/components';
38
-
39
- <ActivityIndicator />`,
40
- variants: `import { ActivityIndicator, View } from '@idealyst/components';
41
-
42
- <View spacing="md">
43
- <ActivityIndicator size="small" />
44
- <ActivityIndicator size="medium" />
45
- <ActivityIndicator size="large" />
46
- <ActivityIndicator size={48} />
47
- </View>`,
48
- "with-icons": `import { ActivityIndicator, View, Text } from '@idealyst/components';
49
-
50
- <View spacing="sm" style={{ alignItems: 'center' }}>
51
- <ActivityIndicator intent="success" size="large" />
52
- <Text>Processing...</Text>
53
- </View>`,
54
- interactive: `import { ActivityIndicator, Button, View, Text } from '@idealyst/components';
55
- import { useState } from 'react';
56
-
57
- function Example() {
58
- const [loading, setLoading] = useState(false);
59
-
60
- const handleLoad = async () => {
61
- setLoading(true);
62
- await new Promise(resolve => setTimeout(resolve, 2000));
63
- setLoading(false);
64
- };
65
-
66
- return (
67
- <View spacing="md">
68
- <Button onPress={handleLoad} disabled={loading}>
69
- Load Data
70
- </Button>
71
- {loading && (
72
- <View spacing="sm" style={{ alignItems: 'center' }}>
73
- <ActivityIndicator size="large" />
74
- <Text>Loading...</Text>
75
- </View>
76
- )}
77
- </View>
78
- );
79
- }`,
80
- },
81
- };
82
- //# sourceMappingURL=ActivityIndicator.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ActivityIndicator.js","sourceRoot":"","sources":["../../../src/data/components/ActivityIndicator.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,2EAA2E;IACxF,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,0BAA0B;QAC1B,iDAAiD;QACjD,oBAAoB;QACpB,sBAAsB;QACtB,wBAAwB;QACxB,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,iDAAiD;QACjD,gDAAgD;QAChD,mDAAmD;QACnD,8CAA8C;QAC9C,qDAAqD;KACtD;IACD,KAAK,EAAE;;;;;;;CAOR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;sBAEW;QAElB,QAAQ,EAAE;;;;;;;QAON;QAEJ,YAAY,EAAE;;;;;QAKV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;EAyBf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Alert: {
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=Alert.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/data/components/Alert.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAqIjB,CAAC"}
@@ -1,132 +0,0 @@
1
- export const Alert = {
2
- category: "feedback",
3
- description: "Message banner for displaying important information, warnings, errors, and success messages",
4
- props: `
5
- - \`title\`: string - Alert title/heading
6
- - \`message\`: string - Alert message text
7
- - \`children\`: ReactNode - Custom content (alternative to message)
8
- - \`intent\`: 'success' | 'error' | 'warning' | 'info' | 'neutral' - Alert type/severity
9
- - \`variant\`: 'filled' | 'outlined' | 'soft' - Visual style
10
- - \`icon\`: ReactNode - Custom icon to display
11
- - \`showIcon\`: boolean - Whether to show the default intent icon (default: true)
12
- - \`dismissible\`: boolean - Whether the alert can be dismissed
13
- - \`onDismiss\`: () => void - Dismiss handler callback
14
- - \`actions\`: ReactNode - Action buttons or custom elements
15
- - \`style\`: ViewStyle - Additional custom styles
16
- - \`testID\`: string - Test identifier
17
- `,
18
- features: [
19
- "Five intent types with semantic meaning",
20
- "Three visual variants",
21
- "Default icons for each intent",
22
- "Custom icon support",
23
- "Dismissible with close button",
24
- "Action buttons support",
25
- "Title and message or custom children",
26
- ],
27
- bestPractices: [
28
- "Use 'error' intent for critical errors requiring immediate attention",
29
- "Use 'warning' intent for important but non-critical information",
30
- "Use 'success' intent for positive confirmations",
31
- "Use 'info' intent for general informational messages",
32
- "Keep alert messages concise and actionable",
33
- "Make alerts dismissible unless they require action",
34
- ],
35
- usage: `
36
- import { Alert } from '@idealyst/components';
37
-
38
- <Alert
39
- intent="error"
40
- title="Error"
41
- message="Failed to save changes. Please try again."
42
- dismissible
43
- onDismiss={() => setShowAlert(false)}
44
- />
45
- `,
46
- examples: {
47
- basic: `import { Alert } from '@idealyst/components';
48
-
49
- <Alert
50
- intent="info"
51
- message="This is an informational message"
52
- />`,
53
- variants: `import { Alert, View } from '@idealyst/components';
54
-
55
- <View spacing="md">
56
- <Alert
57
- intent="success"
58
- variant="filled"
59
- message="Success message"
60
- />
61
- <Alert
62
- intent="warning"
63
- variant="outlined"
64
- message="Warning message"
65
- />
66
- <Alert
67
- intent="error"
68
- variant="soft"
69
- message="Error message"
70
- />
71
- </View>`,
72
- "with-icons": `import { Alert, View } from '@idealyst/components';
73
-
74
- <View spacing="md">
75
- <Alert
76
- intent="success"
77
- title="Success!"
78
- message="Your changes have been saved"
79
- showIcon
80
- />
81
- <Alert
82
- intent="error"
83
- title="Error"
84
- message="Something went wrong"
85
- showIcon
86
- dismissible
87
- />
88
- </View>`,
89
- interactive: `import { Alert, Button, View } from '@idealyst/components';
90
- import { useState } from 'react';
91
-
92
- function Example() {
93
- const [showAlert, setShowAlert] = useState(false);
94
-
95
- return (
96
- <View spacing="md">
97
- <Button onPress={() => setShowAlert(true)}>
98
- Show Alert
99
- </Button>
100
-
101
- {showAlert && (
102
- <Alert
103
- intent="warning"
104
- title="Unsaved Changes"
105
- message="You have unsaved changes that will be lost."
106
- dismissible
107
- onDismiss={() => setShowAlert(false)}
108
- actions={
109
- <View style={{ flexDirection: 'row', gap: 8 }}>
110
- <Button size="small" onPress={() => setShowAlert(false)}>
111
- Cancel
112
- </Button>
113
- <Button
114
- size="small"
115
- intent="warning"
116
- onPress={() => {
117
- handleSave();
118
- setShowAlert(false);
119
- }}
120
- >
121
- Save
122
- </Button>
123
- </View>
124
- }
125
- />
126
- )}
127
- </View>
128
- );
129
- }`,
130
- },
131
- };
132
- //# sourceMappingURL=Alert.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/data/components/Alert.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,6FAA6F;IAC1G,KAAK,EAAE;;;;;;;;;;;;;CAaR;IACC,QAAQ,EAAE;QACR,yCAAyC;QACzC,uBAAuB;QACvB,+BAA+B;QAC/B,qBAAqB;QACrB,+BAA+B;QAC/B,wBAAwB;QACxB,sCAAsC;KACvC;IACD,aAAa,EAAE;QACb,sEAAsE;QACtE,iEAAiE;QACjE,iDAAiD;QACjD,sDAAsD;QACtD,4CAA4C;QAC5C,oDAAoD;KACrD;IACD,KAAK,EAAE;;;;;;;;;;CAUR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;GAKR;QAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;QAkBN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;QAgBV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Avatar: {
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=Avatar.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/data/components/Avatar.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CA8FlB,CAAC"}
@@ -1,93 +0,0 @@
1
- export const Avatar = {
2
- category: "display",
3
- description: "Profile picture or user avatar with fallback text support",
4
- props: `
5
- - \`src\`: string | any - Image source (URL or require())
6
- - \`alt\`: string - Alt text for the image
7
- - \`fallback\`: string - Fallback text displayed when no image (usually initials)
8
- - \`size\`: 'small' | 'medium' | 'large' | 'xlarge' - Avatar size
9
- - \`shape\`: 'circle' | 'square' - Avatar shape
10
- - \`color\`: ColorVariant - Background color for fallback (from theme palette)
11
- - \`style\`: any - Additional custom styles
12
- - \`testID\`: string - Test identifier
13
- `,
14
- features: [
15
- "Image display with automatic fallback",
16
- "Fallback text (initials) support",
17
- "Four size options",
18
- "Circle and square shapes",
19
- "Theme color variants for fallback backgrounds",
20
- "Accessible with alt text",
21
- ],
22
- bestPractices: [
23
- "Always provide alt text for accessibility",
24
- "Use initials (2 characters) for fallback text",
25
- "Use 'circle' shape for user avatars",
26
- "Use 'square' shape for brands or organizations",
27
- "Choose contrasting colors for fallback backgrounds",
28
- ],
29
- usage: `
30
- import { Avatar } from '@idealyst/components';
31
-
32
- <Avatar
33
- src="https://example.com/avatar.jpg"
34
- alt="John Doe"
35
- fallback="JD"
36
- size="large"
37
- shape="circle"
38
- />
39
- `,
40
- examples: {
41
- basic: `import { Avatar } from '@idealyst/components';
42
-
43
- <Avatar
44
- fallback="JD"
45
- size="medium"
46
- />`,
47
- variants: `import { Avatar, View } from '@idealyst/components';
48
-
49
- <View style={{ flexDirection: 'row', gap: 8 }}>
50
- <Avatar fallback="SM" size="small" />
51
- <Avatar fallback="MD" size="medium" />
52
- <Avatar fallback="LG" size="large" />
53
- <Avatar fallback="XL" size="xlarge" />
54
- </View>`,
55
- "with-icons": `import { Avatar, View } from '@idealyst/components';
56
-
57
- <View style={{ flexDirection: 'row', gap: 8 }}>
58
- {/* Circle avatars */}
59
- <Avatar
60
- src="https://i.pravatar.cc/150?img=1"
61
- alt="User 1"
62
- fallback="U1"
63
- shape="circle"
64
- />
65
-
66
- {/* Square avatars */}
67
- <Avatar
68
- src="https://i.pravatar.cc/150?img=2"
69
- alt="User 2"
70
- fallback="U2"
71
- shape="square"
72
- />
73
- </View>`,
74
- interactive: `import { Avatar, View, Text } from '@idealyst/components';
75
-
76
- function UserProfile({ user }) {
77
- return (
78
- <View spacing="sm" style={{ alignItems: 'center' }}>
79
- <Avatar
80
- src={user.avatar}
81
- alt={user.name}
82
- fallback={user.initials}
83
- size="xlarge"
84
- color="primary"
85
- />
86
- <Text weight="bold">{user.name}</Text>
87
- <Text size="small" color="secondary">{user.email}</Text>
88
- </View>
89
- );
90
- }`,
91
- },
92
- };
93
- //# sourceMappingURL=Avatar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/data/components/Avatar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,2DAA2D;IACxE,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,uCAAuC;QACvC,kCAAkC;QAClC,mBAAmB;QACnB,0BAA0B;QAC1B,+CAA+C;QAC/C,0BAA0B;KAC3B;IACD,aAAa,EAAE;QACb,2CAA2C;QAC3C,+CAA+C;QAC/C,qCAAqC;QACrC,gDAAgD;QAChD,oDAAoD;KACrD;IACD,KAAK,EAAE;;;;;;;;;;CAUR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;GAKR;QAEC,QAAQ,EAAE;;;;;;;QAON;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;QAkBV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;EAgBf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Badge: {
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=Badge.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/data/components/Badge.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CA8DjB,CAAC"}
@@ -1,64 +0,0 @@
1
- export const Badge = {
2
- category: "display",
3
- description: "Small status indicator with various styles and colors",
4
- props: `
5
- - \`variant\`: 'filled' | 'outlined' | 'dot' - Visual style
6
- - \`color\`: string - Badge color from theme palette
7
- - \`size\`: 'small' | 'medium' | 'large' - Badge size
8
- - \`icon\`: string | ReactNode - Icon to display
9
- - \`children\`: ReactNode - Badge content (text/number)
10
- `,
11
- features: [
12
- "Three visual variants",
13
- "Theme palette color support",
14
- "Three sizes",
15
- "Icon support",
16
- "Dot variant for minimal indicators",
17
- ],
18
- bestPractices: [
19
- "Use 'dot' variant for minimal status indicators",
20
- "Use 'filled' variant for prominent badges",
21
- "Keep badge content short (numbers or 1-2 words)",
22
- "Use appropriate colors for semantic meaning",
23
- ],
24
- usage: `
25
- import { Badge } from '@idealyst/components';
26
-
27
- <Badge variant="filled" color="red">
28
- 3
29
- </Badge>
30
- `,
31
- examples: {
32
- basic: `import { Badge } from '@idealyst/components';
33
-
34
- <Badge>New</Badge>`,
35
- variants: `import { Badge } from '@idealyst/components';
36
-
37
- <Badge variant="filled" color="blue">5</Badge>
38
- <Badge variant="outlined" color="green">Active</Badge>
39
- <Badge variant="dot" color="red" />`,
40
- "with-icons": `import { Badge } from '@idealyst/components';
41
-
42
- <Badge icon="star" color="yellow">
43
- Featured
44
- </Badge>`,
45
- interactive: `import { Badge, Button, View } from '@idealyst/components';
46
- import { useState } from 'react';
47
-
48
- function Example() {
49
- const [count, setCount] = useState(0);
50
-
51
- return (
52
- <View spacing="sm">
53
- <Badge variant="filled" color="red">
54
- {count}
55
- </Badge>
56
- <Button onPress={() => setCount(count + 1)}>
57
- Increment
58
- </Button>
59
- </View>
60
- );
61
- }`,
62
- }
63
- };
64
- //# sourceMappingURL=Badge.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/data/components/Badge.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACrB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,uDAAuD;IACpE,KAAK,EAAE;;;;;;CAMV;IACG,QAAQ,EAAE;QACR,uBAAuB;QACvB,6BAA6B;QAC7B,aAAa;QACb,cAAc;QACd,oCAAoC;KACrC;IACD,aAAa,EAAE;QACb,iDAAiD;QACjD,2CAA2C;QAC3C,iDAAiD;QACjD,6CAA6C;KAC9C;IACD,KAAK,EAAE;;;;;;CAMV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;mBAEM;QACb,QAAQ,EAAE;;;;oCAIoB;QAC9B,YAAY,EAAE;;;;SAIX;QACH,WAAW,EAAE;;;;;;;;;;;;;;;;EAgBjB;KACG;CACJ,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Breadcrumb: {
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=Breadcrumb.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/data/components/Breadcrumb.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAiGtB,CAAC"}