@idealyst/mcp-server 1.2.24 → 1.2.26

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 (193) hide show
  1. package/dist/index.cjs +22366 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.d.cts +1 -0
  4. package/dist/index.d.ts +0 -2
  5. package/dist/index.js +22186 -1034
  6. package/dist/index.js.map +1 -1
  7. package/package.json +17 -7
  8. package/dist/data/cli-commands.d.ts +0 -2
  9. package/dist/data/cli-commands.d.ts.map +0 -1
  10. package/dist/data/cli-commands.js +0 -100
  11. package/dist/data/cli-commands.js.map +0 -1
  12. package/dist/data/components/Accordion.d.ts +0 -15
  13. package/dist/data/components/Accordion.d.ts.map +0 -1
  14. package/dist/data/components/Accordion.js +0 -113
  15. package/dist/data/components/Accordion.js.map +0 -1
  16. package/dist/data/components/ActivityIndicator.d.ts +0 -15
  17. package/dist/data/components/ActivityIndicator.d.ts.map +0 -1
  18. package/dist/data/components/ActivityIndicator.js +0 -80
  19. package/dist/data/components/ActivityIndicator.js.map +0 -1
  20. package/dist/data/components/Alert.d.ts +0 -15
  21. package/dist/data/components/Alert.d.ts.map +0 -1
  22. package/dist/data/components/Alert.js +0 -130
  23. package/dist/data/components/Alert.js.map +0 -1
  24. package/dist/data/components/Avatar.d.ts +0 -15
  25. package/dist/data/components/Avatar.d.ts.map +0 -1
  26. package/dist/data/components/Avatar.js +0 -91
  27. package/dist/data/components/Avatar.js.map +0 -1
  28. package/dist/data/components/Badge.d.ts +0 -15
  29. package/dist/data/components/Badge.d.ts.map +0 -1
  30. package/dist/data/components/Badge.js +0 -64
  31. package/dist/data/components/Badge.js.map +0 -1
  32. package/dist/data/components/Breadcrumb.d.ts +0 -15
  33. package/dist/data/components/Breadcrumb.d.ts.map +0 -1
  34. package/dist/data/components/Breadcrumb.js +0 -92
  35. package/dist/data/components/Breadcrumb.js.map +0 -1
  36. package/dist/data/components/Button.d.ts +0 -16
  37. package/dist/data/components/Button.d.ts.map +0 -1
  38. package/dist/data/components/Button.js +0 -118
  39. package/dist/data/components/Button.js.map +0 -1
  40. package/dist/data/components/Card.d.ts +0 -15
  41. package/dist/data/components/Card.d.ts.map +0 -1
  42. package/dist/data/components/Card.js +0 -75
  43. package/dist/data/components/Card.js.map +0 -1
  44. package/dist/data/components/Checkbox.d.ts +0 -15
  45. package/dist/data/components/Checkbox.d.ts.map +0 -1
  46. package/dist/data/components/Checkbox.js +0 -118
  47. package/dist/data/components/Checkbox.js.map +0 -1
  48. package/dist/data/components/Chip.d.ts +0 -15
  49. package/dist/data/components/Chip.d.ts.map +0 -1
  50. package/dist/data/components/Chip.js +0 -94
  51. package/dist/data/components/Chip.js.map +0 -1
  52. package/dist/data/components/Dialog.d.ts +0 -15
  53. package/dist/data/components/Dialog.d.ts.map +0 -1
  54. package/dist/data/components/Dialog.js +0 -137
  55. package/dist/data/components/Dialog.js.map +0 -1
  56. package/dist/data/components/Divider.d.ts +0 -15
  57. package/dist/data/components/Divider.d.ts.map +0 -1
  58. package/dist/data/components/Divider.js +0 -68
  59. package/dist/data/components/Divider.js.map +0 -1
  60. package/dist/data/components/Icon.d.ts +0 -15
  61. package/dist/data/components/Icon.d.ts.map +0 -1
  62. package/dist/data/components/Icon.js +0 -68
  63. package/dist/data/components/Icon.js.map +0 -1
  64. package/dist/data/components/Image.d.ts +0 -15
  65. package/dist/data/components/Image.d.ts.map +0 -1
  66. package/dist/data/components/Image.js +0 -119
  67. package/dist/data/components/Image.js.map +0 -1
  68. package/dist/data/components/Input.d.ts +0 -15
  69. package/dist/data/components/Input.d.ts.map +0 -1
  70. package/dist/data/components/Input.js +0 -155
  71. package/dist/data/components/Input.js.map +0 -1
  72. package/dist/data/components/Link.d.ts +0 -15
  73. package/dist/data/components/Link.d.ts.map +0 -1
  74. package/dist/data/components/Link.js +0 -142
  75. package/dist/data/components/Link.js.map +0 -1
  76. package/dist/data/components/List.d.ts +0 -15
  77. package/dist/data/components/List.d.ts.map +0 -1
  78. package/dist/data/components/List.js +0 -113
  79. package/dist/data/components/List.js.map +0 -1
  80. package/dist/data/components/Menu.d.ts +0 -15
  81. package/dist/data/components/Menu.d.ts.map +0 -1
  82. package/dist/data/components/Menu.js +0 -123
  83. package/dist/data/components/Menu.js.map +0 -1
  84. package/dist/data/components/Popover.d.ts +0 -15
  85. package/dist/data/components/Popover.d.ts.map +0 -1
  86. package/dist/data/components/Popover.js +0 -157
  87. package/dist/data/components/Popover.js.map +0 -1
  88. package/dist/data/components/Pressable.d.ts +0 -15
  89. package/dist/data/components/Pressable.d.ts.map +0 -1
  90. package/dist/data/components/Pressable.js +0 -125
  91. package/dist/data/components/Pressable.js.map +0 -1
  92. package/dist/data/components/Progress.d.ts +0 -15
  93. package/dist/data/components/Progress.d.ts.map +0 -1
  94. package/dist/data/components/Progress.js +0 -93
  95. package/dist/data/components/Progress.js.map +0 -1
  96. package/dist/data/components/RadioButton.d.ts +0 -15
  97. package/dist/data/components/RadioButton.d.ts.map +0 -1
  98. package/dist/data/components/RadioButton.js +0 -131
  99. package/dist/data/components/RadioButton.js.map +0 -1
  100. package/dist/data/components/SVGImage.d.ts +0 -15
  101. package/dist/data/components/SVGImage.d.ts.map +0 -1
  102. package/dist/data/components/SVGImage.js +0 -112
  103. package/dist/data/components/SVGImage.js.map +0 -1
  104. package/dist/data/components/Screen.d.ts +0 -15
  105. package/dist/data/components/Screen.d.ts.map +0 -1
  106. package/dist/data/components/Screen.js +0 -109
  107. package/dist/data/components/Screen.js.map +0 -1
  108. package/dist/data/components/Select.d.ts +0 -15
  109. package/dist/data/components/Select.d.ts.map +0 -1
  110. package/dist/data/components/Select.js +0 -141
  111. package/dist/data/components/Select.js.map +0 -1
  112. package/dist/data/components/Skeleton.d.ts +0 -15
  113. package/dist/data/components/Skeleton.d.ts.map +0 -1
  114. package/dist/data/components/Skeleton.js +0 -100
  115. package/dist/data/components/Skeleton.js.map +0 -1
  116. package/dist/data/components/Slider.d.ts +0 -15
  117. package/dist/data/components/Slider.d.ts.map +0 -1
  118. package/dist/data/components/Slider.js +0 -151
  119. package/dist/data/components/Slider.js.map +0 -1
  120. package/dist/data/components/Switch.d.ts +0 -15
  121. package/dist/data/components/Switch.d.ts.map +0 -1
  122. package/dist/data/components/Switch.js +0 -128
  123. package/dist/data/components/Switch.js.map +0 -1
  124. package/dist/data/components/TabBar.d.ts +0 -17
  125. package/dist/data/components/TabBar.d.ts.map +0 -1
  126. package/dist/data/components/TabBar.js +0 -244
  127. package/dist/data/components/TabBar.js.map +0 -1
  128. package/dist/data/components/Table.d.ts +0 -15
  129. package/dist/data/components/Table.d.ts.map +0 -1
  130. package/dist/data/components/Table.js +0 -159
  131. package/dist/data/components/Table.js.map +0 -1
  132. package/dist/data/components/Tabs.d.ts +0 -15
  133. package/dist/data/components/Tabs.d.ts.map +0 -1
  134. package/dist/data/components/Tabs.js +0 -150
  135. package/dist/data/components/Tabs.js.map +0 -1
  136. package/dist/data/components/Text.d.ts +0 -15
  137. package/dist/data/components/Text.d.ts.map +0 -1
  138. package/dist/data/components/Text.js +0 -97
  139. package/dist/data/components/Text.js.map +0 -1
  140. package/dist/data/components/TextArea.d.ts +0 -15
  141. package/dist/data/components/TextArea.d.ts.map +0 -1
  142. package/dist/data/components/TextArea.js +0 -156
  143. package/dist/data/components/TextArea.js.map +0 -1
  144. package/dist/data/components/Tooltip.d.ts +0 -15
  145. package/dist/data/components/Tooltip.d.ts.map +0 -1
  146. package/dist/data/components/Tooltip.js +0 -103
  147. package/dist/data/components/Tooltip.js.map +0 -1
  148. package/dist/data/components/Video.d.ts +0 -15
  149. package/dist/data/components/Video.d.ts.map +0 -1
  150. package/dist/data/components/Video.js +0 -166
  151. package/dist/data/components/Video.js.map +0 -1
  152. package/dist/data/components/View.d.ts +0 -15
  153. package/dist/data/components/View.d.ts.map +0 -1
  154. package/dist/data/components/View.js +0 -127
  155. package/dist/data/components/View.js.map +0 -1
  156. package/dist/data/components/index.d.ts +0 -38
  157. package/dist/data/components/index.d.ts.map +0 -1
  158. package/dist/data/components/index.js +0 -113
  159. package/dist/data/components/index.js.map +0 -1
  160. package/dist/data/framework-guides.d.ts +0 -2
  161. package/dist/data/framework-guides.d.ts.map +0 -1
  162. package/dist/data/framework-guides.js +0 -1730
  163. package/dist/data/framework-guides.js.map +0 -1
  164. package/dist/data/icon-guide.d.ts +0 -2
  165. package/dist/data/icon-guide.d.ts.map +0 -1
  166. package/dist/data/icon-guide.js +0 -285
  167. package/dist/data/icon-guide.js.map +0 -1
  168. package/dist/data/icons.json +0 -7452
  169. package/dist/data/navigation-guides.d.ts +0 -2
  170. package/dist/data/navigation-guides.d.ts.map +0 -1
  171. package/dist/data/navigation-guides.js +0 -2144
  172. package/dist/data/navigation-guides.js.map +0 -1
  173. package/dist/data/packages.d.ts +0 -39
  174. package/dist/data/packages.d.ts.map +0 -1
  175. package/dist/data/packages.js +0 -550
  176. package/dist/data/packages.js.map +0 -1
  177. package/dist/data/recipes.d.ts +0 -36
  178. package/dist/data/recipes.d.ts.map +0 -1
  179. package/dist/data/recipes.js +0 -2945
  180. package/dist/data/recipes.js.map +0 -1
  181. package/dist/data/storage-guides.d.ts +0 -2
  182. package/dist/data/storage-guides.d.ts.map +0 -1
  183. package/dist/data/storage-guides.js +0 -418
  184. package/dist/data/storage-guides.js.map +0 -1
  185. package/dist/data/translate-guides.d.ts +0 -2
  186. package/dist/data/translate-guides.d.ts.map +0 -1
  187. package/dist/data/translate-guides.js +0 -1030
  188. package/dist/data/translate-guides.js.map +0 -1
  189. package/dist/index.d.ts.map +0 -1
  190. package/dist/tools/get-types.d.ts +0 -37
  191. package/dist/tools/get-types.d.ts.map +0 -1
  192. package/dist/tools/get-types.js +0 -148
  193. package/dist/tools/get-types.js.map +0 -1
@@ -1,94 +0,0 @@
1
- export const Chip = {
2
- category: "display",
3
- description: "Compact element for tags, filters, and selections with optional delete action",
4
- props: `
5
- - \`label\`: string - The text content of the chip
6
- - \`type\`: ChipType - Visual style variant
7
- - \`intent\`: ChipIntent - Color intent/semantic meaning
8
- - \`size\`: ChipSize - Size of the chip
9
- - \`icon\`: IconName | React.ReactNode - Icon to display before the label. Can be an icon name (string) or a custom React element
10
- - \`deletable\`: boolean - Whether the chip can be deleted
11
- - \`onDelete\`: function - Callback when delete button is pressed
12
- - \`deleteIcon\`: IconName | React.ReactNode - Icon to display in the delete button. Defaults to 'close'
13
- - \`selectable\`: boolean - Whether the chip is selectable
14
- - \`selected\`: boolean - Whether the chip is selected (when selectable)
15
- - \`onPress\`: function - Callback when chip is pressed
16
- - \`disabled\`: boolean - Whether the chip is disabled
17
- `,
18
- features: [
19
- "Three variants: filled, outlined, soft",
20
- "Five intent colors",
21
- "Icon support with MDI icons",
22
- "Deletable with onDelete handler",
23
- "Customizable delete icon (defaults to MDI 'close')",
24
- "Selectable with selected state",
25
- "Three sizes",
26
- "Disabled state",
27
- ],
28
- bestPractices: [
29
- "Use for tags, filters, and multi-select options",
30
- "Use deletable chips for removable tags",
31
- "Use selectable chips for filter options",
32
- "Keep chip labels concise",
33
- ],
34
- usage: `
35
- import { Chip } from '@idealyst/components';
36
-
37
- <Chip
38
- label="React"
39
- icon="check"
40
- deletable
41
- onDelete={() => removeTag('React')}
42
- />
43
- `,
44
- examples: {
45
- basic: `import { Chip } from '@idealyst/components';
46
-
47
- <Chip label="Tag" />`,
48
- variants: `import { Chip } from '@idealyst/components';
49
-
50
- <Chip label="Filled" type="filled" intent="primary" />
51
- <Chip label="Outlined" type="outlined" intent="success" />
52
- <Chip label="Soft" type="soft" intent="warning" />`,
53
- "with-icons": `import { Chip } from '@idealyst/components';
54
-
55
- <Chip label="Star" icon="star" />
56
- <Chip label="Heart" icon="heart" intent="error" />
57
-
58
- // Custom delete icon
59
- <Chip
60
- label="Custom Delete"
61
- deletable
62
- deleteIcon="close-circle"
63
- onDelete={() => console.log('deleted')}
64
- />
65
-
66
- // Alternative delete icons
67
- <Chip
68
- label="Remove"
69
- deletable
70
- deleteIcon="delete"
71
- onDelete={() => console.log('deleted')}
72
- />`,
73
- interactive: `import { Chip, View } from '@idealyst/components';
74
- import { useState } from 'react';
75
-
76
- function Example() {
77
- const [tags, setTags] = useState(['React', 'TypeScript', 'Node.js']);
78
-
79
- return (
80
- <View spacing="sm">
81
- {tags.map(tag => (
82
- <Chip
83
- key={tag}
84
- label={tag}
85
- deletable
86
- onDelete={() => setTags(tags.filter(t => t !== tag))}
87
- />
88
- ))}
89
- </View>
90
- );
91
- }`,
92
- }
93
- };
94
- //# sourceMappingURL=Chip.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/data/components/Chip.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IACpB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,+EAA+E;IACxF,KAAK,EAAE;;;;;;;;;;;;;CAad;IACG,QAAQ,EAAE;QACR,wCAAwC;QACxC,oBAAoB;QACpB,6BAA6B;QAC7B,iCAAiC;QACjC,oDAAoD;QACpD,gCAAgC;QAChC,aAAa;QACb,gBAAgB;KACjB;IACD,aAAa,EAAE;QACb,iDAAiD;QACjD,wCAAwC;QACxC,yCAAyC;QACzC,0BAA0B;KAC3B;IACD,KAAK,EAAE;;;;;;;;;CASV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;qBAEQ;QACf,QAAQ,EAAE;;;;mDAImC;QAC7C,YAAY,EAAE;;;;;;;;;;;;;;;;;;;GAmBjB;QACG,WAAW,EAAE;;;;;;;;;;;;;;;;;;EAkBjB;KACG;CACJ,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare const Dialog: {
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=Dialog.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/data/components/Dialog.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAuIlB,CAAC"}
@@ -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 - Whether the dialog is open/visible
6
- - \`onOpenChange\`: function - Called when the dialog should be opened or closed
7
- - \`title\`: string - Optional title for the dialog
8
- - \`children\`: React.ReactNode - The content to display inside the dialog
9
- - \`size\`: DialogSizeVariant - The size of the dialog
10
- - \`showCloseButton\`: boolean - Whether to show the close button in the header
11
- - \`closeOnBackdropClick\`: boolean - Whether clicking the backdrop should close the dialog
12
- - \`closeOnEscapeKey\`: boolean - Whether pressing escape key should close the dialog (web only)
13
- - \`animationType\`: DialogAnimationType - Animation type for the dialog (native only)
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="md"
48
- >
49
- <View spacing="md">
50
- <Text>Are you sure you want to proceed?</Text>
51
- <View style={{ flexDirection: 'row', gap: 8 }}>
52
- <Button type="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" type="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="xl" 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 type="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;IAChF,KAAK,EAAE;;;;;;;;;;CAUd;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;;;;;;;;;;;;;CAqEnB,CAAC"}
@@ -1,68 +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\`: DividerOrientationVariant - The orientation of the divider
6
- - \`type\`: DividerType - The visual style type of the divider
7
- - \`thickness\`: DividerThicknessVariant - The thickness of the divider
8
- - \`intent\`: DividerIntentVariant - The color intent of the divider
9
- - \`length\`: DividerLengthVariant - The length of the divider (percentage or fixed)
10
- - \`spacing\`: DividerSpacingVariant - Spacing around the divider
11
- - \`children\`: React.ReactNode - Content to display in the center of the divider (for horizontal dividers)
12
- `,
13
- features: [
14
- "Horizontal and vertical orientations",
15
- "Three line styles (solid, dashed, dotted)",
16
- "Three thickness options",
17
- "Configurable spacing",
18
- "Text content in center (horizontal)",
19
- "Intent-based colors",
20
- ],
21
- bestPractices: [
22
- "Use horizontal dividers to separate vertical content",
23
- "Use vertical dividers in horizontal layouts (toolbars, menus)",
24
- "Keep divider thickness subtle unless emphasizing separation",
25
- "Use 'md' spacing for standard content separation",
26
- "Add text content sparingly for important section breaks",
27
- ],
28
- usage: `
29
- import { Divider, View, Text } from '@idealyst/components';
30
-
31
- <View spacing="md">
32
- <Text>Content above</Text>
33
- <Divider spacing="md" />
34
- <Text>Content below</Text>
35
- </View>
36
- `,
37
- examples: {
38
- basic: `import { Divider } from '@idealyst/components';
39
-
40
- <Divider />`,
41
- variants: `import { Divider, View } from '@idealyst/components';
42
-
43
- <View spacing="md">
44
- <Divider type="solid" />
45
- <Divider type="dashed" />
46
- <Divider type="dotted" />
47
- </View>`,
48
- "with-icons": `import { Divider, View, Text } from '@idealyst/components';
49
-
50
- <View spacing="lg">
51
- <Text>Section 1</Text>
52
- <Divider spacing="md">
53
- <Text size="sm" color="secondary">OR</Text>
54
- </Divider>
55
- <Text>Section 2</Text>
56
- </View>`,
57
- interactive: `import { Divider, View, Text } from '@idealyst/components';
58
-
59
- <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
60
- <Text>Left</Text>
61
- <Divider orientation="vertical" thickness="medium" style={{ height: 40 }} />
62
- <Text>Center</Text>
63
- <Divider orientation="vertical" thickness="medium" style={{ height: 40 }} />
64
- <Text>Right</Text>
65
- </View>`,
66
- },
67
- };
68
- //# 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;IACxF,KAAK,EAAE;;;;;;;;CAQZ;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,kDAAkD;QAClD,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;;;;;;;;;;;;;CAqEhB,CAAC"}
@@ -1,68 +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 | 'mdi:\${IconName}' - The name of the icon to display
6
- - \`size\`: IconSizeVariant - The size variant of the icon
7
- - \`color\`: Color - Predefined color variant based on theme
8
- - \`intent\`: Intent - Intent variant for the icon
9
- `,
10
- features: [
11
- "Material Design Icons library",
12
- "Five predefined sizes plus custom numeric size",
13
- "Theme color variants",
14
- "Custom color support",
15
- "Accessible with labels",
16
- "Cross-platform support",
17
- ],
18
- bestPractices: [
19
- "Use semantic icon names that clearly convey meaning",
20
- "Provide accessibilityLabel for screen readers",
21
- "Use theme color variants for consistency",
22
- "Match icon size to surrounding text size",
23
- "Don't rely solely on icons - provide text labels when possible",
24
- ],
25
- usage: `
26
- import { Icon } from '@idealyst/components';
27
-
28
- <Icon name="home" size="md" color="primary" />
29
- `,
30
- examples: {
31
- basic: `import { Icon } from '@idealyst/components';
32
-
33
- <Icon name="star" size="md" />`,
34
- variants: `import { Icon, View } from '@idealyst/components';
35
-
36
- <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
37
- <Icon name="check" size="xs" />
38
- <Icon name="check" size="sm" />
39
- <Icon name="check" size="md" />
40
- <Icon name="check" size="lg" />
41
- <Icon name="check" size="xl" />
42
- </View>`,
43
- "with-icons": `import { Icon, View, Text } from '@idealyst/components';
44
-
45
- <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
46
- <Icon name="information" size="md" color="primary" />
47
- <Text>Informational message with icon</Text>
48
- </View>`,
49
- interactive: `import { Icon, Button, View } from '@idealyst/components';
50
- import { useState } from 'react';
51
-
52
- function Example() {
53
- const [favorited, setFavorited] = useState(false);
54
-
55
- return (
56
- <Button
57
- icon={favorited ? 'heart' : 'heart-outline'}
58
- intent={favorited ? 'error' : 'neutral'}
59
- type="text"
60
- onPress={() => setFavorited(!favorited)}
61
- >
62
- {favorited ? 'Favorited' : 'Favorite'}
63
- </Button>
64
- );
65
- }`,
66
- },
67
- };
68
- //# 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;IAC9E,KAAK,EAAE;;;;;CAKZ;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;;;;;;;;;;;;;CAwHjB,CAAC"}
@@ -1,119 +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 - The image source URL or source object
6
- - \`alt\`: string - Alternative text for accessibility
7
- - \`width\`: number | string - The width of the image
8
- - \`height\`: number | string - The height of the image
9
- - \`aspectRatio\`: number - The aspect ratio of the image
10
- - \`objectFit\`: ImageObjectFit - How the image should be fitted (cover, contain, fill, none, scale-down)
11
- - \`loading\`: 'lazy' | 'eager' - When to load the image (lazy for below the fold, eager for above)
12
- - \`placeholder\`: React.ReactNode - Content to show while the image is loading
13
- - \`fallback\`: React.ReactNode - Content to show if the image fails to load
14
- - \`onLoad\`: function - Called when the image successfully loads
15
- - \`onError\`: function - Called when the image fails to load
16
- - \`borderRadius\`: number - The border radius of the image
17
- `,
18
- features: [
19
- "Remote and local image sources",
20
- "Lazy loading support (web)",
21
- "Loading placeholder",
22
- "Error fallback",
23
- "Multiple object-fit modes",
24
- "Aspect ratio control",
25
- "Border radius support",
26
- "Load/error callbacks",
27
- ],
28
- bestPractices: [
29
- "Always provide alt text for accessibility",
30
- "Use lazy loading for images below the fold",
31
- "Provide placeholder for better perceived performance",
32
- "Use fallback for graceful error handling",
33
- "Use objectFit: 'cover' for thumbnails",
34
- "Use objectFit: 'contain' to show full image",
35
- ],
36
- usage: `
37
- import { Image, ActivityIndicator } from '@idealyst/components';
38
-
39
- <Image
40
- source="https://example.com/image.jpg"
41
- alt="Product photo"
42
- width={300}
43
- height={200}
44
- objectFit="cover"
45
- borderRadius={8}
46
- placeholder={<ActivityIndicator />}
47
- fallback={<Text>Failed to load</Text>}
48
- />
49
- `,
50
- examples: {
51
- basic: `import { Image } from '@idealyst/components';
52
-
53
- <Image
54
- source="https://picsum.photos/200/300"
55
- alt="Random image"
56
- width={200}
57
- height={300}
58
- />`,
59
- variants: `import { Image, View } from '@idealyst/components';
60
-
61
- <View spacing="md">
62
- <Image
63
- source="https://picsum.photos/300/200"
64
- alt="Cover"
65
- width={300}
66
- height={200}
67
- objectFit="cover"
68
- />
69
- <Image
70
- source="https://picsum.photos/300/200"
71
- alt="Contain"
72
- width={300}
73
- height={200}
74
- objectFit="contain"
75
- />
76
- </View>`,
77
- "with-icons": `import { Image, Card, View, Text } from '@idealyst/components';
78
-
79
- <Card type="outlined">
80
- <Image
81
- source="https://picsum.photos/400/250"
82
- alt="Card image"
83
- width="100%"
84
- aspectRatio={16 / 9}
85
- objectFit="cover"
86
- borderRadius={8}
87
- />
88
- <View spacing="sm" style={{ padding: 16 }}>
89
- <Text weight="bold">Image Title</Text>
90
- <Text size="sm">Description text</Text>
91
- </View>
92
- </Card>`,
93
- interactive: `import { Image, ActivityIndicator, Text, View } from '@idealyst/components';
94
- import { useState } from 'react';
95
-
96
- function Example() {
97
- const [loaded, setLoaded] = useState(false);
98
- const [error, setError] = useState(false);
99
-
100
- return (
101
- <View spacing="sm">
102
- <Image
103
- source="https://picsum.photos/300/200"
104
- alt="Example"
105
- width={300}
106
- height={200}
107
- onLoad={() => setLoaded(true)}
108
- onError={() => setError(true)}
109
- placeholder={<ActivityIndicator />}
110
- fallback={<Text>Failed to load image</Text>}
111
- />
112
- {loaded && <Text color="success">Image loaded!</Text>}
113
- {error && <Text color="error">Failed to load</Text>}
114
- </View>
115
- );
116
- }`,
117
- },
118
- };
119
- //# 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;IAC9F,KAAK,EAAE;;;;;;;;;;;;;CAaZ;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;;;;;;;;;;;;;CAyJjB,CAAC"}