@idealyst/mcp-server 1.0.92 → 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} +307 -8
- 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 +1 -1
- 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 +10 -5
- 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 SVGImage = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
category: "media",
|
|
3
|
+
description: "SVG image component with color, size, and intent support",
|
|
4
|
+
props: `
|
|
5
5
|
- \`source\`: string | { uri: string } | React.FC<SvgProps> - SVG source (local file, URL, or component)
|
|
6
6
|
- \`width\`: number | string - Image width
|
|
7
7
|
- \`height\`: number | string - Image height
|
|
@@ -11,23 +11,23 @@ export const SVGImage = {
|
|
|
11
11
|
- \`resizeMode\`: 'contain' | 'cover' | 'stretch' - How SVG fits container
|
|
12
12
|
- \`style\`: ViewProps - Additional styles
|
|
13
13
|
`,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
14
|
+
features: [
|
|
15
|
+
"Multiple source types (file, URL, component)",
|
|
16
|
+
"Size and dimension control",
|
|
17
|
+
"Color customization",
|
|
18
|
+
"Theme intent colors",
|
|
19
|
+
"Resize modes",
|
|
20
|
+
"Cross-platform support",
|
|
21
|
+
],
|
|
22
|
+
bestPractices: [
|
|
23
|
+
"Use local SVG files for icons and logos",
|
|
24
|
+
"Use remote URLs for dynamic SVGs",
|
|
25
|
+
"Set explicit size for consistent rendering",
|
|
26
|
+
"Use intent colors for theme consistency",
|
|
27
|
+
"Prefer 'contain' resizeMode to preserve aspect ratio",
|
|
28
|
+
"Optimize SVG files for web performance",
|
|
29
|
+
],
|
|
30
|
+
usage: `
|
|
31
31
|
import { SVGImage } from '@idealyst/components';
|
|
32
32
|
import LogoIcon from './assets/logo.svg';
|
|
33
33
|
|
|
@@ -42,13 +42,12 @@ import LogoIcon from './assets/logo.svg';
|
|
|
42
42
|
color="#FF0000"
|
|
43
43
|
/>
|
|
44
44
|
`,
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
examples: {
|
|
46
|
+
basic: `import { SVGImage } from '@idealyst/components';
|
|
47
47
|
import Icon from './icon.svg';
|
|
48
48
|
|
|
49
49
|
<SVGImage source={Icon} size={24} />`,
|
|
50
|
-
|
|
51
|
-
variants: `import { SVGImage, View } from '@idealyst/components';
|
|
50
|
+
variants: `import { SVGImage, View } from '@idealyst/components';
|
|
52
51
|
import Logo from './logo.svg';
|
|
53
52
|
|
|
54
53
|
<View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
|
|
@@ -57,8 +56,7 @@ import Logo from './logo.svg';
|
|
|
57
56
|
<SVGImage source={Logo} size={48} />
|
|
58
57
|
<SVGImage source={Logo} size={64} />
|
|
59
58
|
</View>`,
|
|
60
|
-
|
|
61
|
-
"with-icons": `import { SVGImage, View, Text } from '@idealyst/components';
|
|
59
|
+
"with-icons": `import { SVGImage, View, Text } from '@idealyst/components';
|
|
62
60
|
import ReactLogo from './react-logo.svg';
|
|
63
61
|
|
|
64
62
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
|
@@ -68,8 +66,7 @@ import ReactLogo from './react-logo.svg';
|
|
|
68
66
|
<Text size="sm">Built with React & React Native</Text>
|
|
69
67
|
</View>
|
|
70
68
|
</View>`,
|
|
71
|
-
|
|
72
|
-
interactive: `import { SVGImage, View, Button, Text } from '@idealyst/components';
|
|
69
|
+
interactive: `import { SVGImage, View, Button, Text } from '@idealyst/components';
|
|
73
70
|
import { useState } from 'react';
|
|
74
71
|
import AppIcon from './app-icon.svg';
|
|
75
72
|
|
|
@@ -110,5 +107,6 @@ function Example() {
|
|
|
110
107
|
</View>
|
|
111
108
|
);
|
|
112
109
|
}`,
|
|
113
|
-
|
|
110
|
+
},
|
|
114
111
|
};
|
|
112
|
+
//# sourceMappingURL=SVGImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SVGImage.js","sourceRoot":"","sources":["../../../src/data/components/SVGImage.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,OAAO;IACjB,WAAW,EAAE,0DAA0D;IACvE,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,8CAA8C;QAC9C,4BAA4B;QAC5B,qBAAqB;QACrB,qBAAqB;QACrB,cAAc;QACd,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,yCAAyC;QACzC,kCAAkC;QAClC,4CAA4C;QAC5C,yCAAyC;QACzC,sDAAsD;QACtD,wCAAwC;KACzC;IACD,KAAK,EAAE;;;;;;;;;;;;;;CAcR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;qCAG0B;QAEjC,QAAQ,EAAE;;;;;;;;QAQN;QAEJ,YAAY,EAAE;;;;;;;;;QASV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCf;KACC;CACF,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Screen: {
|
|
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=Screen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/data/components/Screen.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAsGlB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Screen = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
category: "layout",
|
|
3
|
+
description: "Full-screen container component with background variants, padding, and safe area support",
|
|
4
|
+
props: `
|
|
5
5
|
- \`children\`: React.ReactNode - The content to display inside the screen
|
|
6
6
|
- \`background\`: Surface | 'transparent' - Background variant - controls the background color
|
|
7
7
|
- \`padding\`: Size | 'none' - Screen padding variant
|
|
@@ -12,23 +12,23 @@ export const Screen = {
|
|
|
12
12
|
- \`right\`: number - Right content inset padding for scrollable content
|
|
13
13
|
- \`scrollable\`: boolean - Whether the screen content is scrollable
|
|
14
14
|
`,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
15
|
+
features: [
|
|
16
|
+
"Four background color variants",
|
|
17
|
+
"Five padding options",
|
|
18
|
+
"Safe area support for notches/home indicators",
|
|
19
|
+
"Optional scrollable content",
|
|
20
|
+
"Full-screen container",
|
|
21
|
+
"Cross-platform support",
|
|
22
|
+
],
|
|
23
|
+
bestPractices: [
|
|
24
|
+
"Use as root container for app screens",
|
|
25
|
+
"Enable safeArea for mobile apps",
|
|
26
|
+
"Use 'primary' background for main content",
|
|
27
|
+
"Use 'inverse' background for dark mode or special screens",
|
|
28
|
+
"Combine with View for internal spacing",
|
|
29
|
+
"Enable scrollable for long content",
|
|
30
|
+
],
|
|
31
|
+
usage: `
|
|
32
32
|
import { Screen, View, Text } from '@idealyst/components';
|
|
33
33
|
|
|
34
34
|
<Screen background="primary" padding="md" safeArea>
|
|
@@ -38,22 +38,20 @@ import { Screen, View, Text } from '@idealyst/components';
|
|
|
38
38
|
</View>
|
|
39
39
|
</Screen>
|
|
40
40
|
`,
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
examples: {
|
|
42
|
+
basic: `import { Screen, Text } from '@idealyst/components';
|
|
43
43
|
|
|
44
44
|
<Screen background="primary" padding="md">
|
|
45
45
|
<Text>Basic screen content</Text>
|
|
46
46
|
</Screen>`,
|
|
47
|
-
|
|
48
|
-
variants: `import { Screen, Text } from '@idealyst/components';
|
|
47
|
+
variants: `import { Screen, Text } from '@idealyst/components';
|
|
49
48
|
|
|
50
49
|
// Different backgrounds
|
|
51
50
|
<Screen background="primary"><Text>Primary</Text></Screen>
|
|
52
51
|
<Screen background="secondary"><Text>Secondary</Text></Screen>
|
|
53
52
|
<Screen background="tertiary"><Text>Tertiary</Text></Screen>
|
|
54
53
|
<Screen background="inverse"><Text>Inverse</Text></Screen>`,
|
|
55
|
-
|
|
56
|
-
"with-icons": `import { Screen, View, Icon, Text } from '@idealyst/components';
|
|
54
|
+
"with-icons": `import { Screen, View, Icon, Text } from '@idealyst/components';
|
|
57
55
|
|
|
58
56
|
<Screen background="primary" padding="lg" safeArea>
|
|
59
57
|
<View spacing="md">
|
|
@@ -68,8 +66,7 @@ import { Screen, View, Text } from '@idealyst/components';
|
|
|
68
66
|
</Text>
|
|
69
67
|
</View>
|
|
70
68
|
</Screen>`,
|
|
71
|
-
|
|
72
|
-
interactive: `import { Screen, View, Text, Button } from '@idealyst/components';
|
|
69
|
+
interactive: `import { Screen, View, Text, Button } from '@idealyst/components';
|
|
73
70
|
import { useState } from 'react';
|
|
74
71
|
|
|
75
72
|
function Example() {
|
|
@@ -99,5 +96,6 @@ function Example() {
|
|
|
99
96
|
</Screen>
|
|
100
97
|
);
|
|
101
98
|
}`,
|
|
102
|
-
|
|
99
|
+
},
|
|
103
100
|
};
|
|
101
|
+
//# sourceMappingURL=Screen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../../src/data/components/Screen.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,WAAW,EAAE,0FAA0F;IACnG,KAAK,EAAE;;;;;;;;;;CAUZ;IACC,QAAQ,EAAE;QACR,gCAAgC;QAChC,sBAAsB;QACtB,+CAA+C;QAC/C,6BAA6B;QAC7B,uBAAuB;QACvB,wBAAwB;KACzB;IACD,aAAa,EAAE;QACb,uCAAuC;QACvC,iCAAiC;QACjC,2CAA2C;QAC3C,2DAA2D;QAC3D,wCAAwC;QACxC,oCAAoC;KACrC;IACD,KAAK,EAAE;;;;;;;;;CASR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;UAID;QAEN,QAAQ,EAAE;;;;;;2DAM6C;QAEvD,YAAY,EAAE;;;;;;;;;;;;;;UAcR;QAEN,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Bf;KACC;CACF,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Select: {
|
|
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=Select.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/data/components/Select.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CA2IlB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Select = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
category: "form",
|
|
3
|
+
description: "Dropdown select component for choosing from a list of options",
|
|
4
|
+
props: `
|
|
5
5
|
- \`options\`: SelectOption[] - Array of options to display in the select
|
|
6
6
|
- \`value\`: string - The currently selected value
|
|
7
7
|
- \`onValueChange\`: function - Called when the selected value changes
|
|
@@ -17,26 +17,26 @@ export const Select = {
|
|
|
17
17
|
- \`presentationMode\`: 'dropdown' | 'actionSheet' - Native iOS presentation mode (native only) 'dropdown' uses a standard dropdown overlay 'actionSheet' uses iOS ActionSheet for selection
|
|
18
18
|
- \`maxHeight\`: number - Maximum height for the dropdown content
|
|
19
19
|
`,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
20
|
+
features: [
|
|
21
|
+
"Single selection from options",
|
|
22
|
+
"Searchable dropdown (web)",
|
|
23
|
+
"Icon support for options",
|
|
24
|
+
"Two visual variants",
|
|
25
|
+
"Label and helper text",
|
|
26
|
+
"Error state",
|
|
27
|
+
"Disabled options",
|
|
28
|
+
"Custom filtering",
|
|
29
|
+
"Platform-specific presentation modes",
|
|
30
|
+
],
|
|
31
|
+
bestPractices: [
|
|
32
|
+
"Use for 5+ options (use RadioGroup for fewer)",
|
|
33
|
+
"Enable searchable for long option lists",
|
|
34
|
+
"Provide clear placeholder text",
|
|
35
|
+
"Group related options visually",
|
|
36
|
+
"Show error states inline with helperText",
|
|
37
|
+
"Consider icons for visual categorization",
|
|
38
|
+
],
|
|
39
|
+
usage: `
|
|
40
40
|
import { Select } from '@idealyst/components';
|
|
41
41
|
import { useState } from 'react';
|
|
42
42
|
|
|
@@ -60,8 +60,8 @@ function Example() {
|
|
|
60
60
|
);
|
|
61
61
|
}
|
|
62
62
|
`,
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
examples: {
|
|
64
|
+
basic: `import { Select } from '@idealyst/components';
|
|
65
65
|
|
|
66
66
|
const options = [
|
|
67
67
|
{ value: '1', label: 'Option 1' },
|
|
@@ -69,8 +69,7 @@ const options = [
|
|
|
69
69
|
];
|
|
70
70
|
|
|
71
71
|
<Select options={options} placeholder="Choose..." />`,
|
|
72
|
-
|
|
73
|
-
variants: `import { Select, View } from '@idealyst/components';
|
|
72
|
+
variants: `import { Select, View } from '@idealyst/components';
|
|
74
73
|
|
|
75
74
|
const options = [{ value: '1', label: 'Option' }];
|
|
76
75
|
|
|
@@ -79,8 +78,7 @@ const options = [{ value: '1', label: 'Option' }];
|
|
|
79
78
|
<Select options={options} type="filled" size="md" />
|
|
80
79
|
<Select options={options} type="outlined" size="lg" />
|
|
81
80
|
</View>`,
|
|
82
|
-
|
|
83
|
-
"with-icons": `import { Select } from '@idealyst/components';
|
|
81
|
+
"with-icons": `import { Select } from '@idealyst/components';
|
|
84
82
|
|
|
85
83
|
const options = [
|
|
86
84
|
{ value: 'light', label: 'Light Mode', icon: <Icon name="white-balance-sunny" /> },
|
|
@@ -94,8 +92,7 @@ const options = [
|
|
|
94
92
|
value={theme}
|
|
95
93
|
onValueChange={setTheme}
|
|
96
94
|
/>`,
|
|
97
|
-
|
|
98
|
-
interactive: `import { Select, View, Text } from '@idealyst/components';
|
|
95
|
+
interactive: `import { Select, View, Text } from '@idealyst/components';
|
|
99
96
|
import { useState } from 'react';
|
|
100
97
|
|
|
101
98
|
function Example() {
|
|
@@ -136,5 +133,6 @@ function Example() {
|
|
|
136
133
|
</View>
|
|
137
134
|
);
|
|
138
135
|
}`,
|
|
139
|
-
|
|
136
|
+
},
|
|
140
137
|
};
|
|
138
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/data/components/Select.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,+DAA+D;IACxE,KAAK,EAAE;;;;;;;;;;;;;;;CAeZ;IACC,QAAQ,EAAE;QACR,+BAA+B;QAC/B,2BAA2B;QAC3B,0BAA0B;QAC1B,qBAAqB;QACrB,uBAAuB;QACvB,aAAa;QACb,kBAAkB;QAClB,kBAAkB;QAClB,sCAAsC;KACvC;IACD,aAAa,EAAE;QACb,+CAA+C;QAC/C,yCAAyC;QACzC,gCAAgC;QAChC,gCAAgC;QAChC,0CAA0C;QAC1C,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAuBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;qDAO0C;QAEjD,QAAQ,EAAE;;;;;;;;QAQN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;GAaf;QAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCf;KACC;CACF,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Skeleton: {
|
|
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=Skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/data/components/Skeleton.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAqGpB,CAAC"}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
export const Skeleton = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
category: "feedback",
|
|
3
|
+
description: "Loading placeholder that mimics content structure while data loads",
|
|
4
|
+
props: `
|
|
5
5
|
- \`width\`: number | string - Width of the skeleton (number in pixels or string with units)
|
|
6
6
|
- \`height\`: number | string - Height of the skeleton (number in pixels or string with units)
|
|
7
7
|
- \`shape\`: SkeletonShape - Shape of the skeleton
|
|
8
8
|
- \`borderRadius\`: number - Border radius for 'rounded' shape (in pixels)
|
|
9
9
|
- \`animation\`: SkeletonAnimation - Animation type
|
|
10
10
|
`,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
11
|
+
features: [
|
|
12
|
+
"Three shapes: rectangle, circle, rounded",
|
|
13
|
+
"Three animation types",
|
|
14
|
+
"Configurable dimensions",
|
|
15
|
+
"Group component for multiple skeletons",
|
|
16
|
+
"Customizable spacing",
|
|
17
|
+
"Mimics content structure",
|
|
18
|
+
],
|
|
19
|
+
bestPractices: [
|
|
20
|
+
"Match skeleton shape to actual content",
|
|
21
|
+
"Use pulse animation for general loading",
|
|
22
|
+
"Use wave animation for feed-like content",
|
|
23
|
+
"Show skeleton while data is loading",
|
|
24
|
+
"Replace skeleton with actual content smoothly",
|
|
25
|
+
"Use SkeletonGroup for consistent layouts",
|
|
26
|
+
],
|
|
27
|
+
usage: `
|
|
28
28
|
import { Skeleton, SkeletonGroup } from '@idealyst/components';
|
|
29
29
|
|
|
30
30
|
// Single skeleton
|
|
@@ -37,20 +37,18 @@ import { Skeleton, SkeletonGroup } from '@idealyst/components';
|
|
|
37
37
|
skeletonProps={{ width: '100%', height: 60, shape: 'rounded' }}
|
|
38
38
|
/>
|
|
39
39
|
`,
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
examples: {
|
|
41
|
+
basic: `import { Skeleton } from '@idealyst/components';
|
|
42
42
|
|
|
43
43
|
<Skeleton width={150} height={20} />`,
|
|
44
|
-
|
|
45
|
-
variants: `import { Skeleton, View } from '@idealyst/components';
|
|
44
|
+
variants: `import { Skeleton, View } from '@idealyst/components';
|
|
46
45
|
|
|
47
46
|
<View spacing="md">
|
|
48
47
|
<Skeleton width="100%" height={20} shape="rectangle" />
|
|
49
48
|
<Skeleton width={100} height={100} shape="circle" />
|
|
50
49
|
<Skeleton width={200} height={40} shape="rounded" />
|
|
51
50
|
</View>`,
|
|
52
|
-
|
|
53
|
-
"with-icons": `import { Skeleton, View } from '@idealyst/components';
|
|
51
|
+
"with-icons": `import { Skeleton, View } from '@idealyst/components';
|
|
54
52
|
|
|
55
53
|
// Mimicking a user card
|
|
56
54
|
<View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
|
|
@@ -60,8 +58,7 @@ import { Skeleton, SkeletonGroup } from '@idealyst/components';
|
|
|
60
58
|
<Skeleton width="40%" height={14} />
|
|
61
59
|
</View>
|
|
62
60
|
</View>`,
|
|
63
|
-
|
|
64
|
-
interactive: `import { Skeleton, SkeletonGroup, View, Card, Text, Button } from '@idealyst/components';
|
|
61
|
+
interactive: `import { Skeleton, SkeletonGroup, View, Card, Text, Button } from '@idealyst/components';
|
|
65
62
|
import { useState, useEffect } from 'react';
|
|
66
63
|
|
|
67
64
|
function Example() {
|
|
@@ -98,5 +95,6 @@ function Example() {
|
|
|
98
95
|
</Card>
|
|
99
96
|
);
|
|
100
97
|
}`,
|
|
101
|
-
|
|
98
|
+
},
|
|
102
99
|
};
|
|
100
|
+
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/data/components/Skeleton.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,oEAAoE;IAC7E,KAAK,EAAE;;;;;;CAMZ;IACC,QAAQ,EAAE;QACR,0CAA0C;QAC1C,uBAAuB;QACvB,yBAAyB;QACzB,wCAAwC;QACxC,sBAAsB;QACtB,0BAA0B;KAC3B;IACD,aAAa,EAAE;QACb,wCAAwC;QACxC,yCAAyC;QACzC,0CAA0C;QAC1C,qCAAqC;QACrC,+CAA+C;QAC/C,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;CAYR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;qCAE0B;QAEjC,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;QASV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCf;KACC;CACF,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Slider: {
|
|
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=Slider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/data/components/Slider.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAqJlB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const Slider = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
category: "form",
|
|
3
|
+
description: "Input slider for selecting numeric values from a range",
|
|
4
|
+
props: `
|
|
5
5
|
- \`value\`: number - The current value of the slider (controlled)
|
|
6
6
|
- \`defaultValue\`: number - The default value for uncontrolled usage
|
|
7
7
|
- \`min\`: number - The minimum value of the slider range
|
|
@@ -17,27 +17,27 @@ export const Slider = {
|
|
|
17
17
|
- \`onValueChange\`: function - Called when the slider value changes during dragging
|
|
18
18
|
- \`onValueCommit\`: function - Called when the user finishes changing the value (on release)
|
|
19
19
|
`,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
20
|
+
features: [
|
|
21
|
+
"Controlled and uncontrolled modes",
|
|
22
|
+
"Min/max value constraints",
|
|
23
|
+
"Step increment",
|
|
24
|
+
"Custom marks",
|
|
25
|
+
"Value display",
|
|
26
|
+
"Min/max labels",
|
|
27
|
+
"Three sizes",
|
|
28
|
+
"Five intent colors",
|
|
29
|
+
"Icon support in thumb",
|
|
30
|
+
"Change and commit callbacks",
|
|
31
|
+
],
|
|
32
|
+
bestPractices: [
|
|
33
|
+
"Use for continuous numeric values",
|
|
34
|
+
"Show current value for user feedback",
|
|
35
|
+
"Use marks for important values",
|
|
36
|
+
"Set appropriate step size for precision",
|
|
37
|
+
"Use onValueCommit for expensive operations",
|
|
38
|
+
"Provide min/max labels for context",
|
|
39
|
+
],
|
|
40
|
+
usage: `
|
|
41
41
|
import { Slider } from '@idealyst/components';
|
|
42
42
|
import { useState } from 'react';
|
|
43
43
|
|
|
@@ -57,20 +57,18 @@ function Example() {
|
|
|
57
57
|
);
|
|
58
58
|
}
|
|
59
59
|
`,
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
examples: {
|
|
61
|
+
basic: `import { Slider } from '@idealyst/components';
|
|
62
62
|
|
|
63
63
|
<Slider min={0} max={100} defaultValue={50} />`,
|
|
64
|
-
|
|
65
|
-
variants: `import { Slider, View } from '@idealyst/components';
|
|
64
|
+
variants: `import { Slider, View } from '@idealyst/components';
|
|
66
65
|
|
|
67
66
|
<View spacing="md">
|
|
68
67
|
<Slider size="sm" value={25} />
|
|
69
68
|
<Slider size="md" value={50} />
|
|
70
69
|
<Slider size="lg" value={75} />
|
|
71
70
|
</View>`,
|
|
72
|
-
|
|
73
|
-
"with-icons": `import { Slider, View, Text, Icon } from '@idealyst/components';
|
|
71
|
+
"with-icons": `import { Slider, View, Text, Icon } from '@idealyst/components';
|
|
74
72
|
import { useState } from 'react';
|
|
75
73
|
|
|
76
74
|
function VolumeControl() {
|
|
@@ -114,8 +112,7 @@ function BrightnessControl() {
|
|
|
114
112
|
</View>
|
|
115
113
|
);
|
|
116
114
|
}`,
|
|
117
|
-
|
|
118
|
-
interactive: `import { Slider, View, Text, Button } from '@idealyst/components';
|
|
115
|
+
interactive: `import { Slider, View, Text, Button } from '@idealyst/components';
|
|
119
116
|
import { useState } from 'react';
|
|
120
117
|
|
|
121
118
|
function Example() {
|
|
@@ -146,5 +143,6 @@ function Example() {
|
|
|
146
143
|
</View>
|
|
147
144
|
);
|
|
148
145
|
}`,
|
|
149
|
-
|
|
146
|
+
},
|
|
150
147
|
};
|
|
148
|
+
//# sourceMappingURL=Slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/data/components/Slider.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,wDAAwD;IACjE,KAAK,EAAE;;;;;;;;;;;;;;;CAeZ;IACC,QAAQ,EAAE;QACR,mCAAmC;QACnC,2BAA2B;QAC3B,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,gBAAgB;QAChB,aAAa;QACb,oBAAoB;QACpB,uBAAuB;QACvB,6BAA6B;KAC9B;IACD,aAAa,EAAE;QACb,mCAAmC;QACnC,sCAAsC;QACtC,gCAAgC;QAChC,yCAAyC;QACzC,4CAA4C;QAC5C,oCAAoC;KACrC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;CAmBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;+CAEoC;QAE3C,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2ChB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Bf;KACC;CACF,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const Switch: {
|
|
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=Switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/data/components/Switch.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CA8HlB,CAAC"}
|