@idealyst/mcp-server 1.0.93 → 1.0.94
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.
- package/dist/data/cli-commands.d.ts +2 -0
- package/dist/data/cli-commands.d.ts.map +1 -0
- package/dist/data/cli-commands.js +100 -0
- package/dist/data/cli-commands.js.map +1 -0
- package/dist/data/components/Accordion.d.ts +15 -0
- package/dist/data/components/Accordion.d.ts.map +1 -0
- package/{src/data/components/Accordion.ts → dist/data/components/Accordion.js} +26 -28
- package/dist/data/components/Accordion.js.map +1 -0
- package/dist/data/components/ActivityIndicator.d.ts +15 -0
- package/dist/data/components/ActivityIndicator.d.ts.map +1 -0
- package/{src/data/components/ActivityIndicator.ts → dist/data/components/ActivityIndicator.js} +26 -28
- package/dist/data/components/ActivityIndicator.js.map +1 -0
- package/dist/data/components/Alert.d.ts +15 -0
- package/dist/data/components/Alert.d.ts.map +1 -0
- package/{src/data/components/Alert.ts → dist/data/components/Alert.js} +28 -30
- package/dist/data/components/Alert.js.map +1 -0
- package/dist/data/components/Avatar.d.ts +15 -0
- package/dist/data/components/Avatar.d.ts.map +1 -0
- package/{src/data/components/Avatar.ts → dist/data/components/Avatar.js} +26 -28
- package/dist/data/components/Avatar.js.map +1 -0
- package/dist/data/components/Badge.d.ts +15 -0
- package/dist/data/components/Badge.d.ts.map +1 -0
- package/{src/data/components/Badge.ts → dist/data/components/Badge.js} +16 -15
- package/dist/data/components/Badge.js.map +1 -0
- package/dist/data/components/Breadcrumb.d.ts +15 -0
- package/dist/data/components/Breadcrumb.d.ts.map +1 -0
- package/{src/data/components/Breadcrumb.ts → dist/data/components/Breadcrumb.js} +27 -29
- package/dist/data/components/Breadcrumb.js.map +1 -0
- package/dist/data/components/Button.d.ts +15 -0
- package/dist/data/components/Button.d.ts.map +1 -0
- package/{src/data/components/Button.ts → dist/data/components/Button.js} +18 -17
- package/dist/data/components/Button.js.map +1 -0
- package/dist/data/components/Card.d.ts +15 -0
- package/dist/data/components/Card.d.ts.map +1 -0
- package/{src/data/components/Card.ts → dist/data/components/Card.js} +16 -15
- package/dist/data/components/Card.js.map +1 -0
- package/dist/data/components/Checkbox.d.ts +15 -0
- package/dist/data/components/Checkbox.d.ts.map +1 -0
- package/{src/data/components/Checkbox.ts → dist/data/components/Checkbox.js} +27 -29
- package/dist/data/components/Checkbox.js.map +1 -0
- package/dist/data/components/Chip.d.ts +15 -0
- package/dist/data/components/Chip.d.ts.map +1 -0
- package/{src/data/components/Chip.ts → dist/data/components/Chip.js} +19 -18
- package/dist/data/components/Chip.js.map +1 -0
- package/dist/data/components/Dialog.d.ts +15 -0
- package/dist/data/components/Dialog.d.ts.map +1 -0
- package/{src/data/components/Dialog.ts → dist/data/components/Dialog.js} +18 -17
- package/dist/data/components/Dialog.js.map +1 -0
- package/dist/data/components/Divider.d.ts +15 -0
- package/dist/data/components/Divider.d.ts.map +1 -0
- package/{src/data/components/Divider.ts → dist/data/components/Divider.js} +26 -28
- package/dist/data/components/Divider.js.map +1 -0
- package/dist/data/components/Icon.d.ts +15 -0
- package/dist/data/components/Icon.d.ts.map +1 -0
- package/{src/data/components/Icon.ts → dist/data/components/Icon.js} +26 -28
- package/dist/data/components/Icon.js.map +1 -0
- package/dist/data/components/Image.d.ts +15 -0
- package/dist/data/components/Image.d.ts.map +1 -0
- package/{src/data/components/Image.ts → dist/data/components/Image.js} +29 -31
- package/dist/data/components/Image.js.map +1 -0
- package/dist/data/components/Input.d.ts +15 -0
- package/dist/data/components/Input.d.ts.map +1 -0
- package/{src/data/components/Input.ts → dist/data/components/Input.js} +20 -19
- package/dist/data/components/Input.js.map +1 -0
- package/dist/data/components/List.d.ts +15 -0
- package/dist/data/components/List.d.ts.map +1 -0
- package/{src/data/components/List.ts → dist/data/components/List.js} +18 -17
- package/dist/data/components/List.js.map +1 -0
- package/dist/data/components/Menu.d.ts +15 -0
- package/dist/data/components/Menu.d.ts.map +1 -0
- package/{src/data/components/Menu.ts → dist/data/components/Menu.js} +27 -29
- package/dist/data/components/Menu.js.map +1 -0
- package/dist/data/components/Popover.d.ts +15 -0
- package/dist/data/components/Popover.d.ts.map +1 -0
- package/{src/data/components/Popover.ts → dist/data/components/Popover.js} +28 -30
- package/dist/data/components/Popover.js.map +1 -0
- package/dist/data/components/Pressable.d.ts +15 -0
- package/dist/data/components/Pressable.d.ts.map +1 -0
- package/{src/data/components/Pressable.ts → dist/data/components/Pressable.js} +27 -29
- package/dist/data/components/Pressable.js.map +1 -0
- package/dist/data/components/Progress.d.ts +15 -0
- package/dist/data/components/Progress.d.ts.map +1 -0
- package/{src/data/components/Progress.ts → dist/data/components/Progress.js} +27 -29
- package/dist/data/components/Progress.js.map +1 -0
- package/dist/data/components/RadioButton.d.ts +15 -0
- package/dist/data/components/RadioButton.d.ts.map +1 -0
- package/{src/data/components/RadioButton.ts → dist/data/components/RadioButton.js} +28 -30
- package/dist/data/components/RadioButton.js.map +1 -0
- package/dist/data/components/SVGImage.d.ts +15 -0
- package/dist/data/components/SVGImage.d.ts.map +1 -0
- package/{src/data/components/SVGImage.ts → dist/data/components/SVGImage.js} +27 -29
- package/dist/data/components/SVGImage.js.map +1 -0
- package/dist/data/components/Screen.d.ts +15 -0
- package/dist/data/components/Screen.d.ts.map +1 -0
- package/{src/data/components/Screen.ts → dist/data/components/Screen.js} +27 -29
- package/dist/data/components/Screen.js.map +1 -0
- package/dist/data/components/Select.d.ts +15 -0
- package/dist/data/components/Select.d.ts.map +1 -0
- package/{src/data/components/Select.ts → dist/data/components/Select.js} +30 -32
- package/dist/data/components/Select.js.map +1 -0
- package/dist/data/components/Skeleton.d.ts +15 -0
- package/dist/data/components/Skeleton.d.ts.map +1 -0
- package/{src/data/components/Skeleton.ts → dist/data/components/Skeleton.js} +27 -29
- package/dist/data/components/Skeleton.js.map +1 -0
- package/dist/data/components/Slider.d.ts +15 -0
- package/dist/data/components/Slider.d.ts.map +1 -0
- package/{src/data/components/Slider.ts → dist/data/components/Slider.js} +31 -33
- package/dist/data/components/Slider.js.map +1 -0
- package/dist/data/components/Switch.d.ts +15 -0
- package/dist/data/components/Switch.d.ts.map +1 -0
- package/{src/data/components/Switch.ts → dist/data/components/Switch.js} +28 -30
- package/dist/data/components/Switch.js.map +1 -0
- package/dist/data/components/TabBar.d.ts +15 -0
- package/dist/data/components/TabBar.d.ts.map +1 -0
- package/{src/data/components/TabBar.ts → dist/data/components/TabBar.js} +27 -29
- package/dist/data/components/TabBar.js.map +1 -0
- package/dist/data/components/Table.d.ts +15 -0
- package/dist/data/components/Table.d.ts.map +1 -0
- package/{src/data/components/Table.ts → dist/data/components/Table.js} +29 -31
- package/dist/data/components/Table.js.map +1 -0
- package/dist/data/components/Tabs.d.ts +15 -0
- package/dist/data/components/Tabs.d.ts.map +1 -0
- package/{src/data/components/Tabs.ts → dist/data/components/Tabs.js} +28 -30
- package/dist/data/components/Tabs.js.map +1 -0
- package/dist/data/components/Text.d.ts +15 -0
- package/dist/data/components/Text.d.ts.map +1 -0
- package/{src/data/components/Text.ts → dist/data/components/Text.js} +27 -29
- package/dist/data/components/Text.js.map +1 -0
- package/dist/data/components/TextArea.d.ts +15 -0
- package/dist/data/components/TextArea.d.ts.map +1 -0
- package/{src/data/components/TextArea.ts → dist/data/components/TextArea.js} +31 -33
- package/dist/data/components/TextArea.js.map +1 -0
- package/dist/data/components/Tooltip.d.ts +15 -0
- package/dist/data/components/Tooltip.d.ts.map +1 -0
- package/{src/data/components/Tooltip.ts → dist/data/components/Tooltip.js} +28 -30
- package/dist/data/components/Tooltip.js.map +1 -0
- package/dist/data/components/Video.d.ts +15 -0
- package/dist/data/components/Video.d.ts.map +1 -0
- package/{src/data/components/Video.ts → dist/data/components/Video.js} +31 -33
- package/dist/data/components/Video.js.map +1 -0
- package/dist/data/components/View.d.ts +15 -0
- package/dist/data/components/View.d.ts.map +1 -0
- package/{src/data/components/View.ts → dist/data/components/View.js} +28 -30
- package/dist/data/components/View.js.map +1 -0
- package/dist/data/components/index.d.ts +37 -0
- package/dist/data/components/index.d.ts.map +1 -0
- package/{src/data/components/index.ts → dist/data/components/index.js} +37 -38
- package/dist/data/components/index.js.map +1 -0
- package/dist/data/framework-guides.d.ts +2 -0
- package/dist/data/framework-guides.d.ts.map +1 -0
- package/{src/data/framework-guides.ts → dist/data/framework-guides.js} +8 -12
- package/dist/data/framework-guides.js.map +1 -0
- package/dist/data/icon-guide.d.ts +2 -0
- package/dist/data/icon-guide.d.ts.map +1 -0
- package/{src/data/icon-guide.ts → dist/data/icon-guide.js} +1 -0
- package/dist/data/icon-guide.js.map +1 -0
- package/dist/data/icons.json +7452 -0
- package/dist/data/navigation-guides.d.ts +2 -0
- package/dist/data/navigation-guides.d.ts.map +1 -0
- package/{src/data/navigation-guides.ts → dist/data/navigation-guides.js} +7 -10
- package/dist/data/navigation-guides.js.map +1 -0
- package/dist/generated/types.json +2556 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js.map +1 -0
- package/dist/tools/get-types.d.ts +26 -0
- package/dist/tools/get-types.d.ts.map +1 -0
- package/dist/tools/get-types.js +123 -0
- package/dist/tools/get-types.js.map +1 -0
- package/package.json +7 -2
- package/ARCHITECTURE.md +0 -313
- package/TYPE-SYSTEM.md +0 -397
- package/scripts/extract-types.ts +0 -71
- package/scripts/type-extractor.ts +0 -286
- package/scripts/validate-examples.ts +0 -142
- package/src/data/cli-commands.ts +0 -103
- package/src/data/icons.json +0 -7452
- package/src/index.ts +0 -653
- package/src/tools/get-types.ts +0 -169
- package/test-client.js +0 -86
- package/tsconfig.examples.json +0 -14
- package/tsconfig.json +0 -20
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Badge = {
|
|
2
|
-
category: "display",
|
|
2
|
+
category: "display",
|
|
3
3
|
description: "Small status indicator with various styles and colors",
|
|
4
|
-
|
|
4
|
+
props: `
|
|
5
5
|
- \`children\`: React.ReactNode - The content to display inside the badge
|
|
6
6
|
- \`size\`: BadgeSizeVariant - The size of the badge
|
|
7
7
|
- \`type\`: BadgeType - The visual style variant of the badge
|
|
@@ -9,17 +9,17 @@ category: "display",
|
|
|
9
9
|
- \`icon\`: IconName | React.ReactNode - Icon to display. Can be an icon name or custom component (ReactNode)
|
|
10
10
|
`,
|
|
11
11
|
features: [
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
"Three visual variants",
|
|
13
|
+
"Theme palette color support",
|
|
14
|
+
"Three sizes",
|
|
15
|
+
"Icon support",
|
|
16
|
+
"Dot variant for minimal indicators",
|
|
17
17
|
],
|
|
18
18
|
bestPractices: [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
23
|
],
|
|
24
24
|
usage: `
|
|
25
25
|
import { Badge } from '@idealyst/components';
|
|
@@ -29,20 +29,20 @@ import { Badge } from '@idealyst/components';
|
|
|
29
29
|
</Badge>
|
|
30
30
|
`,
|
|
31
31
|
examples: {
|
|
32
|
-
|
|
32
|
+
basic: `import { Badge } from '@idealyst/components';
|
|
33
33
|
|
|
34
34
|
<Badge>New</Badge>`,
|
|
35
|
-
|
|
35
|
+
variants: `import { Badge } from '@idealyst/components';
|
|
36
36
|
|
|
37
37
|
<Badge type="filled" color="blue">5</Badge>
|
|
38
38
|
<Badge type="outlined" color="green">Active</Badge>
|
|
39
39
|
<Badge type="dot" color="red" />`,
|
|
40
|
-
|
|
40
|
+
"with-icons": `import { Badge } from '@idealyst/components';
|
|
41
41
|
|
|
42
42
|
<Badge icon="star" color="yellow">
|
|
43
43
|
Featured
|
|
44
44
|
</Badge>`,
|
|
45
|
-
|
|
45
|
+
interactive: `import { Badge, Button, View } from '@idealyst/components';
|
|
46
46
|
import { useState } from 'react';
|
|
47
47
|
|
|
48
48
|
function Example() {
|
|
@@ -61,3 +61,4 @@ function Example() {
|
|
|
61
61
|
}`,
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;IAChE,KAAK,EAAE;;;;;;CAMd;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;;;;iCAIiB;QAC3B,YAAY,EAAE;;;;SAIX;QACH,WAAW,EAAE;;;;;;;;;;;;;;;;EAgBjB;KACG;CACJ,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/data/components/Breadcrumb.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;CA6FtB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Breadcrumb = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
category: "navigation",
|
|
3
|
+
description: "Navigation aid showing the current location within a hierarchy",
|
|
4
|
+
props: `
|
|
5
5
|
- \`items\`: BreadcrumbItem[] - Array of breadcrumb items
|
|
6
6
|
- \`separator\`: React.ReactNode - Custom separator between items (default: '/')
|
|
7
7
|
- \`maxItems\`: number - Maximum number of items to show before truncating
|
|
@@ -12,23 +12,23 @@ export const Breadcrumb = {
|
|
|
12
12
|
- \`responsive\`: boolean - Enable responsive collapsing on narrow screens
|
|
13
13
|
- \`minVisibleItems\`: number - Minimum number of items to show before collapsing (default: 3)
|
|
14
14
|
`,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
15
|
+
features: [
|
|
16
|
+
"Icon support with string names or custom components",
|
|
17
|
+
"Custom separators",
|
|
18
|
+
"Truncation with maxItems",
|
|
19
|
+
"Two intent colors",
|
|
20
|
+
"Three sizes",
|
|
21
|
+
"Disabled items",
|
|
22
|
+
"Click handlers for navigation",
|
|
23
|
+
],
|
|
24
|
+
bestPractices: [
|
|
25
|
+
"Keep breadcrumb labels short and clear",
|
|
26
|
+
"Last item should represent current page (typically not clickable)",
|
|
27
|
+
"Use icons sparingly for visual clarity",
|
|
28
|
+
"Set maxItems for deep hierarchies to avoid overflow",
|
|
29
|
+
"Use 'neutral' intent for subtle breadcrumbs",
|
|
30
|
+
],
|
|
31
|
+
usage: `
|
|
32
32
|
import { Breadcrumb } from '@idealyst/components';
|
|
33
33
|
|
|
34
34
|
const items = [
|
|
@@ -40,8 +40,8 @@ const items = [
|
|
|
40
40
|
|
|
41
41
|
<Breadcrumb items={items} intent="primary" />
|
|
42
42
|
`,
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
examples: {
|
|
44
|
+
basic: `import { Breadcrumb } from '@idealyst/components';
|
|
45
45
|
|
|
46
46
|
const items = [
|
|
47
47
|
{ label: 'Home', onPress: () => console.log('Home') },
|
|
@@ -50,8 +50,7 @@ const items = [
|
|
|
50
50
|
];
|
|
51
51
|
|
|
52
52
|
<Breadcrumb items={items} />`,
|
|
53
|
-
|
|
54
|
-
variants: `import { Breadcrumb, View } from '@idealyst/components';
|
|
53
|
+
variants: `import { Breadcrumb, View } from '@idealyst/components';
|
|
55
54
|
|
|
56
55
|
const items = [
|
|
57
56
|
{ label: 'Home', onPress: () => {} },
|
|
@@ -64,8 +63,7 @@ const items = [
|
|
|
64
63
|
<Breadcrumb items={items} size="md" />
|
|
65
64
|
<Breadcrumb items={items} size="lg" />
|
|
66
65
|
</View>`,
|
|
67
|
-
|
|
68
|
-
"with-icons": `import { Breadcrumb } from '@idealyst/components';
|
|
66
|
+
"with-icons": `import { Breadcrumb } from '@idealyst/components';
|
|
69
67
|
|
|
70
68
|
const items = [
|
|
71
69
|
{ label: 'Home', icon: 'home', onPress: () => navigate('/') },
|
|
@@ -74,8 +72,7 @@ const items = [
|
|
|
74
72
|
];
|
|
75
73
|
|
|
76
74
|
<Breadcrumb items={items} intent="primary" />`,
|
|
77
|
-
|
|
78
|
-
interactive: `import { Breadcrumb } from '@idealyst/components';
|
|
75
|
+
interactive: `import { Breadcrumb } from '@idealyst/components';
|
|
79
76
|
import { useState } from 'react';
|
|
80
77
|
|
|
81
78
|
function Example() {
|
|
@@ -90,5 +87,6 @@ function Example() {
|
|
|
90
87
|
|
|
91
88
|
return <Breadcrumb items={items} maxItems={4} />;
|
|
92
89
|
}`,
|
|
93
|
-
|
|
90
|
+
},
|
|
94
91
|
};
|
|
92
|
+
//# sourceMappingURL=Breadcrumb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/data/components/Breadcrumb.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,gEAAgE;IACzE,KAAK,EAAE;;;;;;;;;;CAUZ;IACC,QAAQ,EAAE;QACR,qDAAqD;QACrD,mBAAmB;QACnB,0BAA0B;QAC1B,mBAAmB;QACnB,aAAa;QACb,gBAAgB;QAChB,+BAA+B;KAChC;IACD,aAAa,EAAE;QACb,wCAAwC;QACxC,mEAAmE;QACnE,wCAAwC;QACxC,qDAAqD;QACrD,6CAA6C;KAC9C;IACD,KAAK,EAAE;;;;;;;;;;;CAWR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;6BAQkB;QAEzB,QAAQ,EAAE;;;;;;;;;;;;QAYN;QAEJ,YAAY,EAAE;;;;;;;;8CAQ4B;QAE1C,WAAW,EAAE;;;;;;;;;;;;;;EAcf;KACC;CACF,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Button: {
|
|
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=Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/data/components/Button.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAqFlB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Button = {
|
|
2
|
-
category: "form",
|
|
2
|
+
category: "form",
|
|
3
3
|
description: "Interactive button component with multiple variants, sizes, and icon support",
|
|
4
|
-
|
|
4
|
+
props: `
|
|
5
5
|
- \`children\`: React.ReactNode - The text or content to display inside the button
|
|
6
6
|
- \`title\`: string - The text title to display inside the button (for web)
|
|
7
7
|
- \`onPress\`: function - Called when the button is pressed
|
|
@@ -13,19 +13,19 @@ category: "form",
|
|
|
13
13
|
- \`rightIcon\`: IconName | React.ReactNode - Icon to display on the right side. Can be an icon name or custom component (ReactNode)
|
|
14
14
|
`,
|
|
15
15
|
features: [
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
"Three variants: contained, outlined, text",
|
|
17
|
+
"Five intent colors for semantic meaning",
|
|
18
|
+
"Three sizes: sm, md, lg",
|
|
19
|
+
"Icon support with string names or custom React elements",
|
|
20
|
+
"Loading and disabled states",
|
|
21
|
+
"Full width option",
|
|
22
|
+
"Cross-platform (React & React Native)",
|
|
23
23
|
],
|
|
24
24
|
bestPractices: [
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
"Use 'primary' intent for main actions",
|
|
26
|
+
"Use 'contained' variant for prominent actions",
|
|
27
|
+
"Use icon names (strings) for consistency with design system",
|
|
28
|
+
"Keep button labels concise and action-oriented",
|
|
29
29
|
],
|
|
30
30
|
usage: `
|
|
31
31
|
import { Button } from '@idealyst/components';
|
|
@@ -40,19 +40,19 @@ import { Button } from '@idealyst/components';
|
|
|
40
40
|
</Button>
|
|
41
41
|
`,
|
|
42
42
|
examples: {
|
|
43
|
-
|
|
43
|
+
basic: `import { Button } from '@idealyst/components';
|
|
44
44
|
|
|
45
45
|
// Basic button
|
|
46
46
|
<Button onPress={() => console.log('Clicked')}>
|
|
47
47
|
Click Me
|
|
48
48
|
</Button>`,
|
|
49
|
-
|
|
49
|
+
variants: `import { Button } from '@idealyst/components';
|
|
50
50
|
|
|
51
51
|
// Different variants
|
|
52
52
|
<Button type="contained" intent="primary">Contained</Button>
|
|
53
53
|
<Button type="outlined" intent="primary">Outlined</Button>
|
|
54
54
|
<Button type="text" intent="primary">Text</Button>`,
|
|
55
|
-
|
|
55
|
+
"with-icons": `import { Button } from '@idealyst/components';
|
|
56
56
|
|
|
57
57
|
// Button with icon
|
|
58
58
|
<Button icon="check" iconPosition="left">
|
|
@@ -61,7 +61,7 @@ import { Button } from '@idealyst/components';
|
|
|
61
61
|
|
|
62
62
|
// Icon-only button
|
|
63
63
|
<Button icon="close" />`,
|
|
64
|
-
|
|
64
|
+
interactive: `import { Button } from '@idealyst/components';
|
|
65
65
|
import { useState } from 'react';
|
|
66
66
|
|
|
67
67
|
function Example() {
|
|
@@ -84,3 +84,4 @@ function Example() {
|
|
|
84
84
|
}`,
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/data/components/Button.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACtB,QAAQ,EAAE,MAAM;IACZ,WAAW,EAAE,8EAA8E;IACvF,KAAK,EAAE;;;;;;;;;;CAUd;IACG,QAAQ,EAAE;QACR,2CAA2C;QAC3C,yCAAyC;QACzC,yBAAyB;QACzB,yDAAyD;QACzD,6BAA6B;QAC7B,mBAAmB;QACnB,uCAAuC;KACxC;IACD,aAAa,EAAE;QACb,uCAAuC;QACvC,+CAA+C;QAC/C,6DAA6D;QAC7D,gDAAgD;KACjD;IACD,KAAK,EAAE;;;;;;;;;;;CAWV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;UAKH;QACJ,QAAQ,EAAE;;;;;mDAKmC;QAC7C,YAAY,EAAE;;;;;;;;wBAQI;QAClB,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;EAoBjB;KACG;CACJ,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Card: {
|
|
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=Card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/data/components/Card.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAkEhB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Card = {
|
|
2
|
-
category: "display",
|
|
2
|
+
category: "display",
|
|
3
3
|
description: "Container component for grouping related content with various visual styles",
|
|
4
|
-
|
|
4
|
+
props: `
|
|
5
5
|
- \`children\`: React.ReactNode - The content to display inside the card
|
|
6
6
|
- \`type\`: CardType - The visual style variant of the card
|
|
7
7
|
- \`padding\`: CardPaddingVariant - The padding size inside the card
|
|
@@ -12,17 +12,17 @@ category: "display",
|
|
|
12
12
|
- \`disabled\`: boolean - Whether the card is disabled
|
|
13
13
|
`,
|
|
14
14
|
features: [
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
"Four visual variants",
|
|
16
|
+
"Intent-based color schemes",
|
|
17
|
+
"Configurable padding and border radius",
|
|
18
|
+
"Clickable with press handler",
|
|
19
|
+
"Flexible content container",
|
|
20
20
|
],
|
|
21
21
|
bestPractices: [
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
"Use 'elevated' variant for prominent content",
|
|
23
|
+
"Group related content within cards",
|
|
24
|
+
"Use appropriate padding for content density",
|
|
25
|
+
"Make cards clickable only when they represent an action",
|
|
26
26
|
],
|
|
27
27
|
usage: `
|
|
28
28
|
import { Card, Text, View } from '@idealyst/components';
|
|
@@ -35,18 +35,18 @@ import { Card, Text, View } from '@idealyst/components';
|
|
|
35
35
|
</Card>
|
|
36
36
|
`,
|
|
37
37
|
examples: {
|
|
38
|
-
|
|
38
|
+
basic: `import { Card, Text } from '@idealyst/components';
|
|
39
39
|
|
|
40
40
|
<Card>
|
|
41
41
|
<Text>Simple card content</Text>
|
|
42
42
|
</Card>`,
|
|
43
|
-
|
|
43
|
+
variants: `import { Card, Text } from '@idealyst/components';
|
|
44
44
|
|
|
45
45
|
<Card type="default"><Text>Default</Text></Card>
|
|
46
46
|
<Card type="outlined"><Text>Outlined</Text></Card>
|
|
47
47
|
<Card type="elevated"><Text>Elevated</Text></Card>
|
|
48
48
|
<Card type="filled"><Text>Filled</Text></Card>`,
|
|
49
|
-
|
|
49
|
+
"with-icons": `import { Card, View, Text, Icon } from '@idealyst/components';
|
|
50
50
|
|
|
51
51
|
<Card type="outlined">
|
|
52
52
|
<View spacing="sm">
|
|
@@ -54,7 +54,7 @@ import { Card, Text, View } from '@idealyst/components';
|
|
|
54
54
|
<Text>Card with icon header</Text>
|
|
55
55
|
</View>
|
|
56
56
|
</Card>`,
|
|
57
|
-
|
|
57
|
+
interactive: `import { Card, Text } from '@idealyst/components';
|
|
58
58
|
|
|
59
59
|
<Card
|
|
60
60
|
clickable
|
|
@@ -65,3 +65,4 @@ import { Card, Text, View } from '@idealyst/components';
|
|
|
65
65
|
</Card>`,
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/data/components/Card.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IACpB,QAAQ,EAAE,SAAS;IACf,WAAW,EAAE,6EAA6E;IACtF,KAAK,EAAE;;;;;;;;;CASd;IACG,QAAQ,EAAE;QACR,sBAAsB;QACtB,4BAA4B;QAC5B,wCAAwC;QACxC,8BAA8B;QAC9B,4BAA4B;KAC7B;IACD,aAAa,EAAE;QACb,8CAA8C;QAC9C,oCAAoC;QACpC,6CAA6C;QAC7C,yDAAyD;KAC1D;IACD,KAAK,EAAE;;;;;;;;;CASV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;QAIL;QACF,QAAQ,EAAE;;;;;+CAK+B;QACzC,YAAY,EAAE;;;;;;;QAOZ;QACF,WAAW,EAAE;;;;;;;;QAQX;KACH;CACJ,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Checkbox: {
|
|
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=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/data/components/Checkbox.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAoHpB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Checkbox = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
category: "form",
|
|
3
|
+
description: "Form checkbox for boolean selection with label and validation support",
|
|
4
|
+
props: `
|
|
5
5
|
- \`checked\`: boolean - Whether the checkbox is checked
|
|
6
6
|
- \`indeterminate\`: boolean - Whether the checkbox is in an indeterminate state
|
|
7
7
|
- \`disabled\`: boolean - Whether the checkbox is disabled
|
|
@@ -15,23 +15,23 @@ export const Checkbox = {
|
|
|
15
15
|
- \`error\`: string - Error message to display
|
|
16
16
|
- \`helperText\`: string - Helper text to display
|
|
17
17
|
`,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
18
|
+
features: [
|
|
19
|
+
"Checked, unchecked, and indeterminate states",
|
|
20
|
+
"Label support (string or custom ReactNode)",
|
|
21
|
+
"Three sizes",
|
|
22
|
+
"Intent-based colors",
|
|
23
|
+
"Error and helper text",
|
|
24
|
+
"Required field support",
|
|
25
|
+
"Accessible with proper ARIA attributes",
|
|
26
|
+
],
|
|
27
|
+
bestPractices: [
|
|
28
|
+
"Always provide a label for accessibility",
|
|
29
|
+
"Use indeterminate state for parent checkboxes with partial children selection",
|
|
30
|
+
"Show error messages inline",
|
|
31
|
+
"Use helperText to clarify checkbox meaning",
|
|
32
|
+
"Group related checkboxes visually",
|
|
33
|
+
],
|
|
34
|
+
usage: `
|
|
35
35
|
import { Checkbox } from '@idealyst/components';
|
|
36
36
|
import { useState } from 'react';
|
|
37
37
|
|
|
@@ -48,20 +48,18 @@ function Example() {
|
|
|
48
48
|
);
|
|
49
49
|
}
|
|
50
50
|
`,
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
examples: {
|
|
52
|
+
basic: `import { Checkbox } from '@idealyst/components';
|
|
53
53
|
|
|
54
54
|
<Checkbox label="Subscribe to newsletter" />`,
|
|
55
|
-
|
|
56
|
-
variants: `import { Checkbox, View } from '@idealyst/components';
|
|
55
|
+
variants: `import { Checkbox, View } from '@idealyst/components';
|
|
57
56
|
|
|
58
57
|
<View spacing="sm">
|
|
59
58
|
<Checkbox label="Small" size="sm" />
|
|
60
59
|
<Checkbox label="Medium" size="md" />
|
|
61
60
|
<Checkbox label="Large" size="lg" />
|
|
62
61
|
</View>`,
|
|
63
|
-
|
|
64
|
-
"with-icons": `import { Checkbox, View } from '@idealyst/components';
|
|
62
|
+
"with-icons": `import { Checkbox, View } from '@idealyst/components';
|
|
65
63
|
|
|
66
64
|
<View spacing="sm">
|
|
67
65
|
<Checkbox
|
|
@@ -75,8 +73,7 @@ function Example() {
|
|
|
75
73
|
checked
|
|
76
74
|
/>
|
|
77
75
|
</View>`,
|
|
78
|
-
|
|
79
|
-
interactive: `import { Checkbox, View, Text } from '@idealyst/components';
|
|
76
|
+
interactive: `import { Checkbox, View, Text } from '@idealyst/components';
|
|
80
77
|
import { useState } from 'react';
|
|
81
78
|
|
|
82
79
|
function Example() {
|
|
@@ -113,5 +110,6 @@ function Example() {
|
|
|
113
110
|
</View>
|
|
114
111
|
);
|
|
115
112
|
}`,
|
|
116
|
-
|
|
113
|
+
},
|
|
117
114
|
};
|
|
115
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/data/components/Checkbox.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,uEAAuE;IAChF,KAAK,EAAE;;;;;;;;;;;;;CAaZ;IACC,QAAQ,EAAE;QACR,8CAA8C;QAC9C,4CAA4C;QAC5C,aAAa;QACb,qBAAqB;QACrB,uBAAuB;QACvB,wBAAwB;QACxB,wCAAwC;KACzC;IACD,aAAa,EAAE;QACb,0CAA0C;QAC1C,+EAA+E;QAC/E,4BAA4B;QAC5B,4CAA4C;QAC5C,mCAAmC;KACpC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;6CAEkC;QAEzC,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;QAaV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCf;KACC;CACF,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Chip: {
|
|
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=Chip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/data/components/Chip.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CA4FhB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Chip = {
|
|
2
|
-
category: "display",
|
|
2
|
+
category: "display",
|
|
3
3
|
description: "Compact element for tags, filters, and selections with optional delete action",
|
|
4
|
-
|
|
4
|
+
props: `
|
|
5
5
|
- \`label\`: string - The text content of the chip
|
|
6
6
|
- \`type\`: ChipType - Visual style variant
|
|
7
7
|
- \`intent\`: ChipIntent - Color intent/semantic meaning
|
|
@@ -16,20 +16,20 @@ category: "display",
|
|
|
16
16
|
- \`disabled\`: boolean - Whether the chip is disabled
|
|
17
17
|
`,
|
|
18
18
|
features: [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
27
|
],
|
|
28
28
|
bestPractices: [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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
33
|
],
|
|
34
34
|
usage: `
|
|
35
35
|
import { Chip } from '@idealyst/components';
|
|
@@ -42,15 +42,15 @@ import { Chip } from '@idealyst/components';
|
|
|
42
42
|
/>
|
|
43
43
|
`,
|
|
44
44
|
examples: {
|
|
45
|
-
|
|
45
|
+
basic: `import { Chip } from '@idealyst/components';
|
|
46
46
|
|
|
47
47
|
<Chip label="Tag" />`,
|
|
48
|
-
|
|
48
|
+
variants: `import { Chip } from '@idealyst/components';
|
|
49
49
|
|
|
50
50
|
<Chip label="Filled" type="filled" intent="primary" />
|
|
51
51
|
<Chip label="Outlined" type="outlined" intent="success" />
|
|
52
52
|
<Chip label="Soft" type="soft" intent="warning" />`,
|
|
53
|
-
|
|
53
|
+
"with-icons": `import { Chip } from '@idealyst/components';
|
|
54
54
|
|
|
55
55
|
<Chip label="Star" icon="star" />
|
|
56
56
|
<Chip label="Heart" icon="heart" intent="error" />
|
|
@@ -70,7 +70,7 @@ import { Chip } from '@idealyst/components';
|
|
|
70
70
|
deleteIcon="delete"
|
|
71
71
|
onDelete={() => console.log('deleted')}
|
|
72
72
|
/>`,
|
|
73
|
-
|
|
73
|
+
interactive: `import { Chip, View } from '@idealyst/components';
|
|
74
74
|
import { useState } from 'react';
|
|
75
75
|
|
|
76
76
|
function Example() {
|
|
@@ -91,3 +91,4 @@ function Example() {
|
|
|
91
91
|
}`,
|
|
92
92
|
}
|
|
93
93
|
};
|
|
94
|
+
//# sourceMappingURL=Chip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/data/components/Dialog.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAuIlB,CAAC"}
|