@idealyst/mcp-server 1.0.86 → 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,137 +0,0 @@
1
- export const Dialog = {
2
- category: "overlay",
3
- description: "Modal overlay for focused user interactions and important information",
4
- props: `
5
- - \`open\`: boolean - Control dialog visibility
6
- - \`onOpenChange\`: (open: boolean) => void - Open state change handler
7
- - \`title\`: string - Dialog title
8
- - \`size\`: 'small' | 'medium' | 'large' | 'fullscreen' - Dialog size
9
- - \`variant\`: 'default' | 'alert' - Visual style
10
- - \`showCloseButton\`: boolean - Show close button
11
- - \`closeOnBackdropClick\`: boolean - Close when clicking backdrop
12
- - \`closeOnEscapeKey\`: boolean - Close on Escape key
13
- - \`children\`: ReactNode - Dialog content
14
- `,
15
- features: [
16
- "Controlled open state",
17
- "Multiple sizes including fullscreen",
18
- "Alert variant for important messages",
19
- "Optional close button",
20
- "Backdrop click and Escape key handling",
21
- "Focus trap and accessibility support",
22
- ],
23
- bestPractices: [
24
- "Use for actions requiring user attention",
25
- "Keep dialog content focused and concise",
26
- "Provide clear action buttons",
27
- "Use alert variant for critical confirmations",
28
- "Always provide a way to close the dialog",
29
- ],
30
- usage: `
31
- import { Dialog, Button, View, Text } from '@idealyst/components';
32
- import { useState } from 'react';
33
-
34
- function Example() {
35
- const [open, setOpen] = useState(false);
36
-
37
- return (
38
- <>
39
- <Button onPress={() => setOpen(true)}>
40
- Open Dialog
41
- </Button>
42
-
43
- <Dialog
44
- open={open}
45
- onOpenChange={setOpen}
46
- title="Confirm Action"
47
- size="medium"
48
- >
49
- <View spacing="md">
50
- <Text>Are you sure you want to proceed?</Text>
51
- <View style={{ flexDirection: 'row', gap: 8 }}>
52
- <Button variant="outlined" onPress={() => setOpen(false)}>
53
- Cancel
54
- </Button>
55
- <Button onPress={() => { handleConfirm(); setOpen(false); }}>
56
- Confirm
57
- </Button>
58
- </View>
59
- </View>
60
- </Dialog>
61
- </>
62
- );
63
- }
64
- `,
65
- examples: {
66
- basic: `import { Dialog, Button, Text } from '@idealyst/components';
67
-
68
- <Dialog open={true} onOpenChange={setOpen} title="Simple Dialog">
69
- <Text>Dialog content here</Text>
70
- </Dialog>`,
71
- variants: `import { Dialog, Text } from '@idealyst/components';
72
-
73
- // Default dialog
74
- <Dialog open={open} onOpenChange={setOpen} title="Information">
75
- <Text>Information content</Text>
76
- </Dialog>
77
-
78
- // Alert dialog
79
- <Dialog open={open} onOpenChange={setOpen} title="Warning" variant="alert">
80
- <Text>This action cannot be undone</Text>
81
- </Dialog>`,
82
- "with-icons": `import { Dialog, View, Icon, Text, Button } from '@idealyst/components';
83
-
84
- <Dialog open={open} onOpenChange={setOpen} title="Delete Item">
85
- <View spacing="md">
86
- <View style={{ alignItems: 'center' }}>
87
- <Icon name="delete" size="xlarge" color="error" />
88
- </View>
89
- <Text>This action cannot be undone. Continue?</Text>
90
- <Button intent="error" onPress={handleDelete}>Delete</Button>
91
- </View>
92
- </Dialog>`,
93
- interactive: `import { Dialog, Button, View, Text } from '@idealyst/components';
94
- import { useState } from 'react';
95
-
96
- function Example() {
97
- const [open, setOpen] = useState(false);
98
- const [confirmed, setConfirmed] = useState(false);
99
-
100
- const handleConfirm = () => {
101
- setConfirmed(true);
102
- setOpen(false);
103
- };
104
-
105
- return (
106
- <View spacing="md">
107
- <Button onPress={() => setOpen(true)}>
108
- Open Dialog
109
- </Button>
110
-
111
- {confirmed && <Text>Action confirmed!</Text>}
112
-
113
- <Dialog
114
- open={open}
115
- onOpenChange={setOpen}
116
- title="Confirm Action"
117
- closeOnBackdropClick
118
- closeOnEscapeKey
119
- >
120
- <View spacing="md">
121
- <Text>Proceed with this action?</Text>
122
- <View style={{ flexDirection: 'row', gap: 8 }}>
123
- <Button variant="outlined" onPress={() => setOpen(false)}>
124
- Cancel
125
- </Button>
126
- <Button intent="primary" onPress={handleConfirm}>
127
- Confirm
128
- </Button>
129
- </View>
130
- </View>
131
- </Dialog>
132
- </View>
133
- );
134
- }`,
135
- }
136
- };
137
- //# sourceMappingURL=Dialog.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/data/components/Dialog.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACtB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,uEAAuE;IACpF,KAAK,EAAE;;;;;;;;;;CAUV;IACG,QAAQ,EAAE;QACR,uBAAuB;QACvB,qCAAqC;QACrC,sCAAsC;QACtC,uBAAuB;QACvB,wCAAwC;QACxC,sCAAsC;KACvC;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,yCAAyC;QACzC,8BAA8B;QAC9B,8CAA8C;QAC9C,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;UAIH;QACJ,QAAQ,EAAE;;;;;;;;;;UAUN;QACJ,YAAY,EAAE;;;;;;;;;;UAUV;QACJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCjB;KACG;CACJ,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Divider: {
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=Divider.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/data/components/Divider.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAwEnB,CAAC"}
@@ -1,71 +0,0 @@
1
- export const Divider = {
2
- category: "layout",
3
- description: "Visual separator for content sections with horizontal or vertical orientation",
4
- props: `
5
- - \`orientation\`: 'horizontal' | 'vertical' - The orientation of the divider
6
- - \`variant\`: 'solid' | 'dashed' | 'dotted' - The visual style
7
- - \`thickness\`: 'thin' | 'medium' | 'thick' - The thickness of the divider
8
- - \`intent\`: IntentVariant - The color intent
9
- - \`length\`: 'full' | 'auto' | number - The length (percentage or fixed)
10
- - \`spacing\`: 'none' | 'small' | 'medium' | 'large' - Spacing around divider
11
- - \`children\`: ReactNode - Content in center (horizontal dividers)
12
- - \`style\`: any - Additional custom styles
13
- - \`testID\`: string - Test identifier
14
- - \`accessibilityLabel\`: string - Accessibility label
15
- `,
16
- features: [
17
- "Horizontal and vertical orientations",
18
- "Three line styles (solid, dashed, dotted)",
19
- "Three thickness options",
20
- "Configurable spacing",
21
- "Text content in center (horizontal)",
22
- "Intent-based colors",
23
- ],
24
- bestPractices: [
25
- "Use horizontal dividers to separate vertical content",
26
- "Use vertical dividers in horizontal layouts (toolbars, menus)",
27
- "Keep divider thickness subtle unless emphasizing separation",
28
- "Use 'medium' spacing for standard content separation",
29
- "Add text content sparingly for important section breaks",
30
- ],
31
- usage: `
32
- import { Divider, View, Text } from '@idealyst/components';
33
-
34
- <View spacing="md">
35
- <Text>Content above</Text>
36
- <Divider spacing="medium" />
37
- <Text>Content below</Text>
38
- </View>
39
- `,
40
- examples: {
41
- basic: `import { Divider } from '@idealyst/components';
42
-
43
- <Divider />`,
44
- variants: `import { Divider, View } from '@idealyst/components';
45
-
46
- <View spacing="md">
47
- <Divider variant="solid" />
48
- <Divider variant="dashed" />
49
- <Divider variant="dotted" />
50
- </View>`,
51
- "with-icons": `import { Divider, View, Text } from '@idealyst/components';
52
-
53
- <View spacing="lg">
54
- <Text>Section 1</Text>
55
- <Divider spacing="medium">
56
- <Text size="small" color="secondary">OR</Text>
57
- </Divider>
58
- <Text>Section 2</Text>
59
- </View>`,
60
- interactive: `import { Divider, View, Text } from '@idealyst/components';
61
-
62
- <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
63
- <Text>Left</Text>
64
- <Divider orientation="vertical" thickness="medium" style={{ height: 40 }} />
65
- <Text>Center</Text>
66
- <Divider orientation="vertical" thickness="medium" style={{ height: 40 }} />
67
- <Text>Right</Text>
68
- </View>`,
69
- },
70
- };
71
- //# sourceMappingURL=Divider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/data/components/Divider.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,QAAQ,EAAE,QAAQ;IAClB,WAAW,EAAE,+EAA+E;IAC5F,KAAK,EAAE;;;;;;;;;;;CAWR;IACC,QAAQ,EAAE;QACR,sCAAsC;QACtC,2CAA2C;QAC3C,yBAAyB;QACzB,sBAAsB;QACtB,qCAAqC;QACrC,qBAAqB;KACtB;IACD,aAAa,EAAE;QACb,sDAAsD;QACtD,+DAA+D;QAC/D,6DAA6D;QAC7D,sDAAsD;QACtD,yDAAyD;KAC1D;IACD,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;YAEC;QAER,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;QAQV;QAEJ,WAAW,EAAE;;;;;;;;QAQT;KACL;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Icon: {
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=Icon.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/data/components/Icon.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAuEhB,CAAC"}
@@ -1,70 +0,0 @@
1
- export const Icon = {
2
- category: "display",
3
- description: "Material Design icon display component with size and color variants",
4
- props: `
5
- - \`name\`: IconName - The name of the Material Design icon
6
- - \`size\`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number - Icon size variant or custom number
7
- - \`color\`: DisplayColorVariant - Predefined theme color variant
8
- - \`style\`: any - Additional custom styles
9
- - \`testID\`: string - Test identifier
10
- - \`accessibilityLabel\`: string - Accessibility label for screen readers
11
- `,
12
- features: [
13
- "Material Design Icons library",
14
- "Five predefined sizes plus custom numeric size",
15
- "Theme color variants",
16
- "Custom color support",
17
- "Accessible with labels",
18
- "Cross-platform support",
19
- ],
20
- bestPractices: [
21
- "Use semantic icon names that clearly convey meaning",
22
- "Provide accessibilityLabel for screen readers",
23
- "Use theme color variants for consistency",
24
- "Match icon size to surrounding text size",
25
- "Don't rely solely on icons - provide text labels when possible",
26
- ],
27
- usage: `
28
- import { Icon } from '@idealyst/components';
29
-
30
- <Icon name="home" size="md" color="primary" />
31
- `,
32
- examples: {
33
- basic: `import { Icon } from '@idealyst/components';
34
-
35
- <Icon name="star" size="md" />`,
36
- variants: `import { Icon, View } from '@idealyst/components';
37
-
38
- <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
39
- <Icon name="check" size="xs" />
40
- <Icon name="check" size="sm" />
41
- <Icon name="check" size="md" />
42
- <Icon name="check" size="lg" />
43
- <Icon name="check" size="xl" />
44
- </View>`,
45
- "with-icons": `import { Icon, View, Text } from '@idealyst/components';
46
-
47
- <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
48
- <Icon name="information" size="md" color="primary" />
49
- <Text>Informational message with icon</Text>
50
- </View>`,
51
- interactive: `import { Icon, Button, View } from '@idealyst/components';
52
- import { useState } from 'react';
53
-
54
- function Example() {
55
- const [favorited, setFavorited] = useState(false);
56
-
57
- return (
58
- <Button
59
- icon={favorited ? 'heart' : 'heart-outline'}
60
- intent={favorited ? 'error' : 'neutral'}
61
- variant="text"
62
- onPress={() => setFavorited(!favorited)}
63
- >
64
- {favorited ? 'Favorited' : 'Favorite'}
65
- </Button>
66
- );
67
- }`,
68
- },
69
- };
70
- //# sourceMappingURL=Icon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/data/components/Icon.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,qEAAqE;IAClF,KAAK,EAAE;;;;;;;CAOR;IACC,QAAQ,EAAE;QACR,+BAA+B;QAC/B,gDAAgD;QAChD,sBAAsB;QACtB,sBAAsB;QACtB,wBAAwB;QACxB,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,qDAAqD;QACrD,+CAA+C;QAC/C,0CAA0C;QAC1C,0CAA0C;QAC1C,gEAAgE;KACjE;IACD,KAAK,EAAE;;;;CAIR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;+BAEoB;QAE3B,QAAQ,EAAE;;;;;;;;QAQN;QAEJ,YAAY,EAAE;;;;;QAKV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;EAgBf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Image: {
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=Image.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/data/components/Image.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CA2HjB,CAAC"}
@@ -1,122 +0,0 @@
1
- export const Image = {
2
- category: "media",
3
- description: "Image component with loading states, fallback support, and various object-fit modes",
4
- props: `
5
- - \`source\`: ImageSourcePropType | string - Image source (URL, require(), or URI object)
6
- - \`alt\`: string - Alt text for accessibility
7
- - \`width\`: number | string - Image width
8
- - \`height\`: number | string - Image height
9
- - \`aspectRatio\`: number - Aspect ratio (width/height)
10
- - \`objectFit\`: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' - How image fits container
11
- - \`loading\`: 'lazy' | 'eager' - Loading strategy (web)
12
- - \`placeholder\`: ReactNode - Content shown while loading
13
- - \`fallback\`: ReactNode - Content shown on error
14
- - \`onLoad\`: () => void - Called when image loads successfully
15
- - \`onError\`: (error: any) => void - Called on image load error
16
- - \`borderRadius\`: number - Border radius in pixels
17
- - \`style\`: ImageStyle - Additional custom styles
18
- - \`testID\`: string - Test identifier
19
- - \`accessibilityLabel\`: string - Accessibility label
20
- `,
21
- features: [
22
- "Remote and local image sources",
23
- "Lazy loading support (web)",
24
- "Loading placeholder",
25
- "Error fallback",
26
- "Multiple object-fit modes",
27
- "Aspect ratio control",
28
- "Border radius support",
29
- "Load/error callbacks",
30
- ],
31
- bestPractices: [
32
- "Always provide alt text for accessibility",
33
- "Use lazy loading for images below the fold",
34
- "Provide placeholder for better perceived performance",
35
- "Use fallback for graceful error handling",
36
- "Use objectFit: 'cover' for thumbnails",
37
- "Use objectFit: 'contain' to show full image",
38
- ],
39
- usage: `
40
- import { Image, ActivityIndicator } from '@idealyst/components';
41
-
42
- <Image
43
- source="https://example.com/image.jpg"
44
- alt="Product photo"
45
- width={300}
46
- height={200}
47
- objectFit="cover"
48
- borderRadius={8}
49
- placeholder={<ActivityIndicator />}
50
- fallback={<Text>Failed to load</Text>}
51
- />
52
- `,
53
- examples: {
54
- basic: `import { Image } from '@idealyst/components';
55
-
56
- <Image
57
- source="https://picsum.photos/200/300"
58
- alt="Random image"
59
- width={200}
60
- height={300}
61
- />`,
62
- variants: `import { Image, View } from '@idealyst/components';
63
-
64
- <View spacing="md">
65
- <Image
66
- source="https://picsum.photos/300/200"
67
- alt="Cover"
68
- width={300}
69
- height={200}
70
- objectFit="cover"
71
- />
72
- <Image
73
- source="https://picsum.photos/300/200"
74
- alt="Contain"
75
- width={300}
76
- height={200}
77
- objectFit="contain"
78
- />
79
- </View>`,
80
- "with-icons": `import { Image, Card, View, Text } from '@idealyst/components';
81
-
82
- <Card variant="outlined">
83
- <Image
84
- source="https://picsum.photos/400/250"
85
- alt="Card image"
86
- width="100%"
87
- aspectRatio={16 / 9}
88
- objectFit="cover"
89
- borderRadius={8}
90
- />
91
- <View spacing="sm" style={{ padding: 16 }}>
92
- <Text weight="bold">Image Title</Text>
93
- <Text size="small">Description text</Text>
94
- </View>
95
- </Card>`,
96
- interactive: `import { Image, ActivityIndicator, Text, View } from '@idealyst/components';
97
- import { useState } from 'react';
98
-
99
- function Example() {
100
- const [loaded, setLoaded] = useState(false);
101
- const [error, setError] = useState(false);
102
-
103
- return (
104
- <View spacing="sm">
105
- <Image
106
- source="https://picsum.photos/300/200"
107
- alt="Example"
108
- width={300}
109
- height={200}
110
- onLoad={() => setLoaded(true)}
111
- onError={() => setError(true)}
112
- placeholder={<ActivityIndicator />}
113
- fallback={<Text>Failed to load image</Text>}
114
- />
115
- {loaded && <Text color="success">Image loaded!</Text>}
116
- {error && <Text color="error">Failed to load</Text>}
117
- </View>
118
- );
119
- }`,
120
- },
121
- };
122
- //# sourceMappingURL=Image.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/data/components/Image.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,OAAO;IACjB,WAAW,EAAE,qFAAqF;IAClG,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,gCAAgC;QAChC,4BAA4B;QAC5B,qBAAqB;QACrB,gBAAgB;QAChB,2BAA2B;QAC3B,sBAAsB;QACtB,uBAAuB;QACvB,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,2CAA2C;QAC3C,4CAA4C;QAC5C,sDAAsD;QACtD,0CAA0C;QAC1C,uCAAuC;QACvC,6CAA6C;KAC9C;IACD,KAAK,EAAE;;;;;;;;;;;;;CAaR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;GAOR;QAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;QAiBN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;QAeV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;EAuBf;KACC;CACF,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Input: {
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=Input.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/data/components/Input.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CA2GjB,CAAC"}
@@ -1,109 +0,0 @@
1
- export const Input = {
2
- category: "form",
3
- description: "Text input field with label, validation, and various input types",
4
- props: `
5
- - \`label\`: string - Input label text
6
- - \`value\`: string - Current input value
7
- - \`onChangeText\`: (text: string) => void - Text change handler
8
- - \`placeholder\`: string - Placeholder text
9
- - \`error\`: string - Error message to display
10
- - \`helperText\`: string - Helper text below input
11
- - \`disabled\`: boolean - Disable input
12
- - \`multiline\`: boolean - Allow multiple lines
13
- - \`secureTextEntry\`: boolean - Hide input (for passwords)
14
- - \`autoFocus\`: boolean - Focus input on mount
15
- `,
16
- features: [
17
- "Label and placeholder support",
18
- "Error and helper text states",
19
- "Multiline text area mode",
20
- "Secure text entry for passwords",
21
- "Disabled state",
22
- "Auto-focus capability",
23
- ],
24
- bestPractices: [
25
- "Always provide a label for accessibility",
26
- "Use helperText to guide users",
27
- "Show error messages inline",
28
- "Use secureTextEntry for password fields",
29
- ],
30
- usage: `
31
- import { Input } from '@idealyst/components';
32
- import { useState } from 'react';
33
-
34
- function Example() {
35
- const [email, setEmail] = useState('');
36
-
37
- return (
38
- <Input
39
- label="Email"
40
- value={email}
41
- onChangeText={setEmail}
42
- placeholder="Enter your email"
43
- helperText="We'll never share your email"
44
- />
45
- );
46
- }
47
- `,
48
- examples: {
49
- basic: `import { Input } from '@idealyst/components';
50
-
51
- <Input
52
- label="Username"
53
- placeholder="Enter username"
54
- />`,
55
- variants: `import { Input } from '@idealyst/components';
56
-
57
- // With error
58
- <Input
59
- label="Email"
60
- error="Invalid email address"
61
- />
62
-
63
- // Disabled
64
- <Input
65
- label="Locked Field"
66
- disabled
67
- />
68
-
69
- // Multiline
70
- <Input
71
- label="Description"
72
- multiline
73
- />`,
74
- "with-icons": `import { Input } from '@idealyst/components';
75
-
76
- // Password input
77
- <Input
78
- label="Password"
79
- secureTextEntry
80
- placeholder="Enter password"
81
- />`,
82
- interactive: `import { Input } from '@idealyst/components';
83
- import { useState } from 'react';
84
-
85
- function Example() {
86
- const [value, setValue] = useState('');
87
- const [error, setError] = useState('');
88
-
89
- const validate = (text: string) => {
90
- setValue(text);
91
- if (text.length < 3) {
92
- setError('Must be at least 3 characters');
93
- } else {
94
- setError('');
95
- }
96
- };
97
-
98
- return (
99
- <Input
100
- label="Username"
101
- value={value}
102
- onChangeText={validate}
103
- error={error}
104
- />
105
- );
106
- }`,
107
- }
108
- };
109
- //# sourceMappingURL=Input.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/data/components/Input.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACrB,QAAQ,EAAE,MAAM;IACZ,WAAW,EAAE,kEAAkE;IAC/E,KAAK,EAAE;;;;;;;;;;;CAWV;IACG,QAAQ,EAAE;QACR,+BAA+B;QAC/B,8BAA8B;QAC9B,0BAA0B;QAC1B,iCAAiC;QACjC,gBAAgB;QAChB,uBAAuB;KACxB;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,+BAA+B;QAC/B,4BAA4B;QAC5B,yCAAyC;KAC1C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;GAKV;QACG,QAAQ,EAAE;;;;;;;;;;;;;;;;;;GAkBb;QACG,YAAY,EAAE;;;;;;;GAOjB;QACG,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;EAwBjB;KACG;CACJ,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const List: {
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=List.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/data/components/List.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CA+GhB,CAAC"}