@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.
- package/dist/index.cjs +22366 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +0 -2
- package/dist/index.js +22186 -1034
- package/dist/index.js.map +1 -1
- package/package.json +17 -7
- package/dist/data/cli-commands.d.ts +0 -2
- package/dist/data/cli-commands.d.ts.map +0 -1
- package/dist/data/cli-commands.js +0 -100
- package/dist/data/cli-commands.js.map +0 -1
- package/dist/data/components/Accordion.d.ts +0 -15
- package/dist/data/components/Accordion.d.ts.map +0 -1
- package/dist/data/components/Accordion.js +0 -113
- package/dist/data/components/Accordion.js.map +0 -1
- package/dist/data/components/ActivityIndicator.d.ts +0 -15
- package/dist/data/components/ActivityIndicator.d.ts.map +0 -1
- package/dist/data/components/ActivityIndicator.js +0 -80
- package/dist/data/components/ActivityIndicator.js.map +0 -1
- package/dist/data/components/Alert.d.ts +0 -15
- package/dist/data/components/Alert.d.ts.map +0 -1
- package/dist/data/components/Alert.js +0 -130
- package/dist/data/components/Alert.js.map +0 -1
- package/dist/data/components/Avatar.d.ts +0 -15
- package/dist/data/components/Avatar.d.ts.map +0 -1
- package/dist/data/components/Avatar.js +0 -91
- package/dist/data/components/Avatar.js.map +0 -1
- package/dist/data/components/Badge.d.ts +0 -15
- package/dist/data/components/Badge.d.ts.map +0 -1
- package/dist/data/components/Badge.js +0 -64
- package/dist/data/components/Badge.js.map +0 -1
- package/dist/data/components/Breadcrumb.d.ts +0 -15
- package/dist/data/components/Breadcrumb.d.ts.map +0 -1
- package/dist/data/components/Breadcrumb.js +0 -92
- package/dist/data/components/Breadcrumb.js.map +0 -1
- package/dist/data/components/Button.d.ts +0 -16
- package/dist/data/components/Button.d.ts.map +0 -1
- package/dist/data/components/Button.js +0 -118
- package/dist/data/components/Button.js.map +0 -1
- package/dist/data/components/Card.d.ts +0 -15
- package/dist/data/components/Card.d.ts.map +0 -1
- package/dist/data/components/Card.js +0 -75
- package/dist/data/components/Card.js.map +0 -1
- package/dist/data/components/Checkbox.d.ts +0 -15
- package/dist/data/components/Checkbox.d.ts.map +0 -1
- package/dist/data/components/Checkbox.js +0 -118
- package/dist/data/components/Checkbox.js.map +0 -1
- package/dist/data/components/Chip.d.ts +0 -15
- package/dist/data/components/Chip.d.ts.map +0 -1
- package/dist/data/components/Chip.js +0 -94
- package/dist/data/components/Chip.js.map +0 -1
- package/dist/data/components/Dialog.d.ts +0 -15
- package/dist/data/components/Dialog.d.ts.map +0 -1
- package/dist/data/components/Dialog.js +0 -137
- package/dist/data/components/Dialog.js.map +0 -1
- package/dist/data/components/Divider.d.ts +0 -15
- package/dist/data/components/Divider.d.ts.map +0 -1
- package/dist/data/components/Divider.js +0 -68
- package/dist/data/components/Divider.js.map +0 -1
- package/dist/data/components/Icon.d.ts +0 -15
- package/dist/data/components/Icon.d.ts.map +0 -1
- package/dist/data/components/Icon.js +0 -68
- package/dist/data/components/Icon.js.map +0 -1
- package/dist/data/components/Image.d.ts +0 -15
- package/dist/data/components/Image.d.ts.map +0 -1
- package/dist/data/components/Image.js +0 -119
- package/dist/data/components/Image.js.map +0 -1
- package/dist/data/components/Input.d.ts +0 -15
- package/dist/data/components/Input.d.ts.map +0 -1
- package/dist/data/components/Input.js +0 -155
- package/dist/data/components/Input.js.map +0 -1
- package/dist/data/components/Link.d.ts +0 -15
- package/dist/data/components/Link.d.ts.map +0 -1
- package/dist/data/components/Link.js +0 -142
- package/dist/data/components/Link.js.map +0 -1
- package/dist/data/components/List.d.ts +0 -15
- package/dist/data/components/List.d.ts.map +0 -1
- package/dist/data/components/List.js +0 -113
- package/dist/data/components/List.js.map +0 -1
- package/dist/data/components/Menu.d.ts +0 -15
- package/dist/data/components/Menu.d.ts.map +0 -1
- package/dist/data/components/Menu.js +0 -123
- package/dist/data/components/Menu.js.map +0 -1
- package/dist/data/components/Popover.d.ts +0 -15
- package/dist/data/components/Popover.d.ts.map +0 -1
- package/dist/data/components/Popover.js +0 -157
- package/dist/data/components/Popover.js.map +0 -1
- package/dist/data/components/Pressable.d.ts +0 -15
- package/dist/data/components/Pressable.d.ts.map +0 -1
- package/dist/data/components/Pressable.js +0 -125
- package/dist/data/components/Pressable.js.map +0 -1
- package/dist/data/components/Progress.d.ts +0 -15
- package/dist/data/components/Progress.d.ts.map +0 -1
- package/dist/data/components/Progress.js +0 -93
- package/dist/data/components/Progress.js.map +0 -1
- package/dist/data/components/RadioButton.d.ts +0 -15
- package/dist/data/components/RadioButton.d.ts.map +0 -1
- package/dist/data/components/RadioButton.js +0 -131
- package/dist/data/components/RadioButton.js.map +0 -1
- package/dist/data/components/SVGImage.d.ts +0 -15
- package/dist/data/components/SVGImage.d.ts.map +0 -1
- package/dist/data/components/SVGImage.js +0 -112
- package/dist/data/components/SVGImage.js.map +0 -1
- package/dist/data/components/Screen.d.ts +0 -15
- package/dist/data/components/Screen.d.ts.map +0 -1
- package/dist/data/components/Screen.js +0 -109
- package/dist/data/components/Screen.js.map +0 -1
- package/dist/data/components/Select.d.ts +0 -15
- package/dist/data/components/Select.d.ts.map +0 -1
- package/dist/data/components/Select.js +0 -141
- package/dist/data/components/Select.js.map +0 -1
- package/dist/data/components/Skeleton.d.ts +0 -15
- package/dist/data/components/Skeleton.d.ts.map +0 -1
- package/dist/data/components/Skeleton.js +0 -100
- package/dist/data/components/Skeleton.js.map +0 -1
- package/dist/data/components/Slider.d.ts +0 -15
- package/dist/data/components/Slider.d.ts.map +0 -1
- package/dist/data/components/Slider.js +0 -151
- package/dist/data/components/Slider.js.map +0 -1
- package/dist/data/components/Switch.d.ts +0 -15
- package/dist/data/components/Switch.d.ts.map +0 -1
- package/dist/data/components/Switch.js +0 -128
- package/dist/data/components/Switch.js.map +0 -1
- package/dist/data/components/TabBar.d.ts +0 -17
- package/dist/data/components/TabBar.d.ts.map +0 -1
- package/dist/data/components/TabBar.js +0 -244
- package/dist/data/components/TabBar.js.map +0 -1
- package/dist/data/components/Table.d.ts +0 -15
- package/dist/data/components/Table.d.ts.map +0 -1
- package/dist/data/components/Table.js +0 -159
- package/dist/data/components/Table.js.map +0 -1
- package/dist/data/components/Tabs.d.ts +0 -15
- package/dist/data/components/Tabs.d.ts.map +0 -1
- package/dist/data/components/Tabs.js +0 -150
- package/dist/data/components/Tabs.js.map +0 -1
- package/dist/data/components/Text.d.ts +0 -15
- package/dist/data/components/Text.d.ts.map +0 -1
- package/dist/data/components/Text.js +0 -97
- package/dist/data/components/Text.js.map +0 -1
- package/dist/data/components/TextArea.d.ts +0 -15
- package/dist/data/components/TextArea.d.ts.map +0 -1
- package/dist/data/components/TextArea.js +0 -156
- package/dist/data/components/TextArea.js.map +0 -1
- package/dist/data/components/Tooltip.d.ts +0 -15
- package/dist/data/components/Tooltip.d.ts.map +0 -1
- package/dist/data/components/Tooltip.js +0 -103
- package/dist/data/components/Tooltip.js.map +0 -1
- package/dist/data/components/Video.d.ts +0 -15
- package/dist/data/components/Video.d.ts.map +0 -1
- package/dist/data/components/Video.js +0 -166
- package/dist/data/components/Video.js.map +0 -1
- package/dist/data/components/View.d.ts +0 -15
- package/dist/data/components/View.d.ts.map +0 -1
- package/dist/data/components/View.js +0 -127
- package/dist/data/components/View.js.map +0 -1
- package/dist/data/components/index.d.ts +0 -38
- package/dist/data/components/index.d.ts.map +0 -1
- package/dist/data/components/index.js +0 -113
- package/dist/data/components/index.js.map +0 -1
- package/dist/data/framework-guides.d.ts +0 -2
- package/dist/data/framework-guides.d.ts.map +0 -1
- package/dist/data/framework-guides.js +0 -1730
- package/dist/data/framework-guides.js.map +0 -1
- package/dist/data/icon-guide.d.ts +0 -2
- package/dist/data/icon-guide.d.ts.map +0 -1
- package/dist/data/icon-guide.js +0 -285
- package/dist/data/icon-guide.js.map +0 -1
- package/dist/data/icons.json +0 -7452
- package/dist/data/navigation-guides.d.ts +0 -2
- package/dist/data/navigation-guides.d.ts.map +0 -1
- package/dist/data/navigation-guides.js +0 -2144
- package/dist/data/navigation-guides.js.map +0 -1
- package/dist/data/packages.d.ts +0 -39
- package/dist/data/packages.d.ts.map +0 -1
- package/dist/data/packages.js +0 -550
- package/dist/data/packages.js.map +0 -1
- package/dist/data/recipes.d.ts +0 -36
- package/dist/data/recipes.d.ts.map +0 -1
- package/dist/data/recipes.js +0 -2945
- package/dist/data/recipes.js.map +0 -1
- package/dist/data/storage-guides.d.ts +0 -2
- package/dist/data/storage-guides.d.ts.map +0 -1
- package/dist/data/storage-guides.js +0 -418
- package/dist/data/storage-guides.js.map +0 -1
- package/dist/data/translate-guides.d.ts +0 -2
- package/dist/data/translate-guides.d.ts.map +0 -1
- package/dist/data/translate-guides.js +0 -1030
- package/dist/data/translate-guides.js.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/tools/get-types.d.ts +0 -37
- package/dist/tools/get-types.d.ts.map +0 -1
- package/dist/tools/get-types.js +0 -148
- package/dist/tools/get-types.js.map +0 -1
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
export const Slider = {
|
|
2
|
-
category: "form",
|
|
3
|
-
description: "Input slider with margin variants for selecting numeric values from a range",
|
|
4
|
-
props: `
|
|
5
|
-
- \`value\`: number - The current value of the slider (controlled)
|
|
6
|
-
- \`defaultValue\`: number - The default value for uncontrolled usage
|
|
7
|
-
- \`min\`: number - The minimum value of the slider range
|
|
8
|
-
- \`max\`: number - The maximum value of the slider range
|
|
9
|
-
- \`step\`: number - The increment step when moving the slider
|
|
10
|
-
- \`disabled\`: boolean - Whether the slider is disabled
|
|
11
|
-
- \`showValue\`: boolean - Whether to display the current value
|
|
12
|
-
- \`showMinMax\`: boolean - Whether to show min and max labels
|
|
13
|
-
- \`marks\`: SliderMark[] - Array of marks to display on the slider track
|
|
14
|
-
- \`intent\`: SliderIntentVariant - The intent/color scheme of the slider
|
|
15
|
-
- \`size\`: SliderSizeVariant - The size variant of the slider
|
|
16
|
-
- \`margin\`: Size - Margin on all sides ('xs' | 'sm' | 'md' | 'lg' | 'xl')
|
|
17
|
-
- \`marginVertical\`: Size - Top and bottom margin
|
|
18
|
-
- \`marginHorizontal\`: Size - Left and right margin
|
|
19
|
-
- \`icon\`: IconName | React.ReactNode - Icon to display in the slider thumb
|
|
20
|
-
- \`onValueChange\`: function - Called when the slider value changes during dragging
|
|
21
|
-
- \`onValueCommit\`: function - Called when the user finishes changing the value (on release)
|
|
22
|
-
`,
|
|
23
|
-
features: [
|
|
24
|
-
"Controlled and uncontrolled modes",
|
|
25
|
-
"Min/max value constraints",
|
|
26
|
-
"Step increment",
|
|
27
|
-
"Custom marks",
|
|
28
|
-
"Value display",
|
|
29
|
-
"Min/max labels",
|
|
30
|
-
"Three sizes",
|
|
31
|
-
"Five intent colors",
|
|
32
|
-
"Icon support in thumb",
|
|
33
|
-
"Change and commit callbacks",
|
|
34
|
-
],
|
|
35
|
-
bestPractices: [
|
|
36
|
-
"Use for continuous numeric values",
|
|
37
|
-
"Show current value for user feedback",
|
|
38
|
-
"Use marks for important values",
|
|
39
|
-
"Set appropriate step size for precision",
|
|
40
|
-
"Use onValueCommit for expensive operations",
|
|
41
|
-
"Provide min/max labels for context",
|
|
42
|
-
],
|
|
43
|
-
usage: `
|
|
44
|
-
import { Slider } from '@idealyst/components';
|
|
45
|
-
import { useState } from 'react';
|
|
46
|
-
|
|
47
|
-
function Example() {
|
|
48
|
-
const [value, setValue] = useState(50);
|
|
49
|
-
|
|
50
|
-
return (
|
|
51
|
-
<Slider
|
|
52
|
-
value={value}
|
|
53
|
-
onValueChange={setValue}
|
|
54
|
-
min={0}
|
|
55
|
-
max={100}
|
|
56
|
-
step={5}
|
|
57
|
-
showValue
|
|
58
|
-
showMinMax
|
|
59
|
-
/>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
`,
|
|
63
|
-
examples: {
|
|
64
|
-
basic: `import { Slider } from '@idealyst/components';
|
|
65
|
-
|
|
66
|
-
<Slider min={0} max={100} defaultValue={50} />`,
|
|
67
|
-
variants: `import { Slider, View } from '@idealyst/components';
|
|
68
|
-
|
|
69
|
-
<View spacing="md">
|
|
70
|
-
<Slider size="sm" value={25} />
|
|
71
|
-
<Slider size="md" value={50} />
|
|
72
|
-
<Slider size="lg" value={75} />
|
|
73
|
-
</View>`,
|
|
74
|
-
"with-icons": `import { Slider, View, Text, Icon } from '@idealyst/components';
|
|
75
|
-
import { useState } from 'react';
|
|
76
|
-
|
|
77
|
-
function VolumeControl() {
|
|
78
|
-
const [volume, setVolume] = useState(50);
|
|
79
|
-
|
|
80
|
-
return (
|
|
81
|
-
<View spacing="sm">
|
|
82
|
-
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
|
83
|
-
<Icon name="volume-low" size="md" />
|
|
84
|
-
<Slider
|
|
85
|
-
value={volume}
|
|
86
|
-
onValueChange={setVolume}
|
|
87
|
-
min={0}
|
|
88
|
-
max={100}
|
|
89
|
-
icon="volume-medium"
|
|
90
|
-
style={{ flex: 1 }}
|
|
91
|
-
/>
|
|
92
|
-
<Icon name="volume-high" size="md" />
|
|
93
|
-
</View>
|
|
94
|
-
<Text align="center">{volume}%</Text>
|
|
95
|
-
</View>
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// Brightness control with icon in thumb
|
|
100
|
-
function BrightnessControl() {
|
|
101
|
-
const [brightness, setBrightness] = useState(75);
|
|
102
|
-
|
|
103
|
-
return (
|
|
104
|
-
<View spacing="sm">
|
|
105
|
-
<Text>Brightness: {brightness}%</Text>
|
|
106
|
-
<Slider
|
|
107
|
-
value={brightness}
|
|
108
|
-
onValueChange={setBrightness}
|
|
109
|
-
min={0}
|
|
110
|
-
max={100}
|
|
111
|
-
icon="brightness-6"
|
|
112
|
-
intent="warning"
|
|
113
|
-
showMinMax
|
|
114
|
-
/>
|
|
115
|
-
</View>
|
|
116
|
-
);
|
|
117
|
-
}`,
|
|
118
|
-
interactive: `import { Slider, View, Text, Button } from '@idealyst/components';
|
|
119
|
-
import { useState } from 'react';
|
|
120
|
-
|
|
121
|
-
function Example() {
|
|
122
|
-
const [price, setPrice] = useState(50);
|
|
123
|
-
|
|
124
|
-
const marks = [
|
|
125
|
-
{ value: 0, label: '$0' },
|
|
126
|
-
{ value: 50, label: '$50' },
|
|
127
|
-
{ value: 100, label: '$100' },
|
|
128
|
-
];
|
|
129
|
-
|
|
130
|
-
return (
|
|
131
|
-
<View spacing="md">
|
|
132
|
-
<Text weight="bold">Price Range: \${price}</Text>
|
|
133
|
-
<Slider
|
|
134
|
-
value={price}
|
|
135
|
-
onValueChange={setPrice}
|
|
136
|
-
min={0}
|
|
137
|
-
max={100}
|
|
138
|
-
step={5}
|
|
139
|
-
marks={marks}
|
|
140
|
-
showValue
|
|
141
|
-
intent="primary"
|
|
142
|
-
/>
|
|
143
|
-
<Button onPress={() => console.log('Filter:', price)}>
|
|
144
|
-
Apply Filter
|
|
145
|
-
</Button>
|
|
146
|
-
</View>
|
|
147
|
-
);
|
|
148
|
-
}`,
|
|
149
|
-
},
|
|
150
|
-
};
|
|
151
|
-
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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,6EAA6E;IACtF,KAAK,EAAE;;;;;;;;;;;;;;;;;;CAkBZ;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"}
|
|
@@ -1,15 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/data/components/Switch.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAiIlB,CAAC"}
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
export const Switch = {
|
|
2
|
-
category: "form",
|
|
3
|
-
description: "Toggle switch with margin variants for binary on/off states",
|
|
4
|
-
props: `
|
|
5
|
-
- \`checked\`: boolean - Whether the switch is in the on/checked state
|
|
6
|
-
- \`onCheckedChange\`: function - Called when the switch state changes
|
|
7
|
-
- \`disabled\`: boolean - Whether the switch is disabled
|
|
8
|
-
- \`label\`: string - Label text to display next to the switch
|
|
9
|
-
- \`labelPosition\`: 'left' | 'right' - Position of the label relative to the switch
|
|
10
|
-
- \`intent\`: SwitchIntentVariant - The intent/color scheme of the switch
|
|
11
|
-
- \`size\`: SwitchSizeVariant - The size variant of the switch
|
|
12
|
-
- \`margin\`: Size - Margin on all sides ('xs' | 'sm' | 'md' | 'lg' | 'xl')
|
|
13
|
-
- \`marginVertical\`: Size - Top and bottom margin
|
|
14
|
-
- \`marginHorizontal\`: Size - Left and right margin
|
|
15
|
-
- \`enabledIcon\`: IconName | React.ReactNode - Icon to display when switch is on
|
|
16
|
-
- \`disabledIcon\`: IconName | React.ReactNode - Icon to display when switch is off
|
|
17
|
-
`,
|
|
18
|
-
features: [
|
|
19
|
-
"Binary on/off toggle",
|
|
20
|
-
"Label with configurable position",
|
|
21
|
-
"Three sizes",
|
|
22
|
-
"Five intent colors",
|
|
23
|
-
"Custom icons for states",
|
|
24
|
-
"Disabled state",
|
|
25
|
-
"Animated transition",
|
|
26
|
-
],
|
|
27
|
-
bestPractices: [
|
|
28
|
-
"Use for binary settings (on/off, enabled/disabled)",
|
|
29
|
-
"Provide clear labels",
|
|
30
|
-
"Use intent colors to indicate state meaning",
|
|
31
|
-
"Place label on left for form layouts",
|
|
32
|
-
"Use icons sparingly for clarity",
|
|
33
|
-
"Immediate effect - no submit button needed",
|
|
34
|
-
],
|
|
35
|
-
usage: `
|
|
36
|
-
import { Switch } from '@idealyst/components';
|
|
37
|
-
import { useState } from 'react';
|
|
38
|
-
|
|
39
|
-
function Example() {
|
|
40
|
-
const [enabled, setEnabled] = useState(false);
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<Switch
|
|
44
|
-
checked={enabled}
|
|
45
|
-
onCheckedChange={setEnabled}
|
|
46
|
-
label="Enable notifications"
|
|
47
|
-
intent="primary"
|
|
48
|
-
/>
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
`,
|
|
52
|
-
examples: {
|
|
53
|
-
basic: `import { Switch } from '@idealyst/components';
|
|
54
|
-
|
|
55
|
-
<Switch label="Enable feature" />`,
|
|
56
|
-
variants: `import { Switch, View } from '@idealyst/components';
|
|
57
|
-
|
|
58
|
-
<View spacing="md">
|
|
59
|
-
<Switch label="Small" size="sm" checked />
|
|
60
|
-
<Switch label="Medium" size="md" checked />
|
|
61
|
-
<Switch label="Large" size="lg" checked />
|
|
62
|
-
</View>`,
|
|
63
|
-
"with-icons": `import { Switch, View } from '@idealyst/components';
|
|
64
|
-
import { useState } from 'react';
|
|
65
|
-
|
|
66
|
-
function Example() {
|
|
67
|
-
const [darkMode, setDarkMode] = useState(false);
|
|
68
|
-
|
|
69
|
-
return (
|
|
70
|
-
<Switch
|
|
71
|
-
checked={darkMode}
|
|
72
|
-
onCheckedChange={setDarkMode}
|
|
73
|
-
label="Dark Mode"
|
|
74
|
-
enabledIcon="weather-night"
|
|
75
|
-
disabledIcon="white-balance-sunny"
|
|
76
|
-
intent="primary"
|
|
77
|
-
/>
|
|
78
|
-
);
|
|
79
|
-
}`,
|
|
80
|
-
interactive: `import { Switch, View, Text, Card } from '@idealyst/components';
|
|
81
|
-
import { useState } from 'react';
|
|
82
|
-
|
|
83
|
-
function SettingsPanel() {
|
|
84
|
-
const [settings, setSettings] = useState({
|
|
85
|
-
notifications: true,
|
|
86
|
-
location: false,
|
|
87
|
-
analytics: true,
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
const toggle = (key: string) => {
|
|
91
|
-
setSettings({ ...settings, [key]: !settings[key] });
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
return (
|
|
95
|
-
<Card type="outlined" padding="md">
|
|
96
|
-
<View spacing="md">
|
|
97
|
-
<Text weight="bold">Privacy Settings</Text>
|
|
98
|
-
|
|
99
|
-
<Switch
|
|
100
|
-
checked={settings.notifications}
|
|
101
|
-
onCheckedChange={() => toggle('notifications')}
|
|
102
|
-
label="Push Notifications"
|
|
103
|
-
labelPosition="left"
|
|
104
|
-
intent="primary"
|
|
105
|
-
/>
|
|
106
|
-
|
|
107
|
-
<Switch
|
|
108
|
-
checked={settings.location}
|
|
109
|
-
onCheckedChange={() => toggle('location')}
|
|
110
|
-
label="Location Services"
|
|
111
|
-
labelPosition="left"
|
|
112
|
-
intent="warning"
|
|
113
|
-
/>
|
|
114
|
-
|
|
115
|
-
<Switch
|
|
116
|
-
checked={settings.analytics}
|
|
117
|
-
onCheckedChange={() => toggle('analytics')}
|
|
118
|
-
label="Analytics & Data"
|
|
119
|
-
labelPosition="left"
|
|
120
|
-
intent="neutral"
|
|
121
|
-
/>
|
|
122
|
-
</View>
|
|
123
|
-
</Card>
|
|
124
|
-
);
|
|
125
|
-
}`,
|
|
126
|
-
},
|
|
127
|
-
};
|
|
128
|
-
//# sourceMappingURL=Switch.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/data/components/Switch.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,6DAA6D;IACtE,KAAK,EAAE;;;;;;;;;;;;;CAaZ;IACC,QAAQ,EAAE;QACR,sBAAsB;QACtB,kCAAkC;QAClC,aAAa;QACb,oBAAoB;QACpB,yBAAyB;QACzB,gBAAgB;QAChB,qBAAqB;KACtB;IACD,aAAa,EAAE;QACb,oDAAoD;QACpD,sBAAsB;QACtB,6CAA6C;QAC7C,sCAAsC;QACtC,iCAAiC;QACjC,4CAA4C;KAC7C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;kCAEuB;QAE9B,QAAQ,EAAE;;;;;;QAMN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;EAgBhB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Cf;KACC;CACF,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export declare const TabBar: {
|
|
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
|
-
justify: string;
|
|
14
|
-
"bottom-nav": string;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=TabBar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/data/components/TabBar.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAuPlB,CAAC"}
|
|
@@ -1,244 +0,0 @@
|
|
|
1
|
-
export const TabBar = {
|
|
2
|
-
category: "navigation",
|
|
3
|
-
description: "Tab bar navigation component with icons, layout options, and spacing variants for switching between views or sections",
|
|
4
|
-
props: `
|
|
5
|
-
- \`items\`: TabBarItem[] - Array of tab items to display
|
|
6
|
-
- \`value\`: string - Unique identifier for the tab
|
|
7
|
-
- \`label\`: string - Display text for the tab
|
|
8
|
-
- \`icon\`: ReactNode | ((props: { active: boolean; size: number }) => ReactNode) - Optional icon
|
|
9
|
-
- \`disabled\`: boolean - Whether the tab is disabled
|
|
10
|
-
- \`value\`: string - The currently selected tab value (controlled)
|
|
11
|
-
- \`defaultValue\`: string - The default selected tab for uncontrolled usage
|
|
12
|
-
- \`onChange\`: function - Called when the selected tab changes
|
|
13
|
-
- \`type\`: 'standard' | 'pills' | 'underline' - The visual style variant
|
|
14
|
-
- \`size\`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' - The size variant of the tabs
|
|
15
|
-
- \`iconPosition\`: 'left' | 'top' - Position of icon relative to label (default: 'left')
|
|
16
|
-
- \`justify\`: 'start' | 'center' | 'equal' | 'space-between' - Layout justification (default: 'start')
|
|
17
|
-
- \`pillMode\`: 'light' | 'dark' - Mode for pills variant
|
|
18
|
-
- \`gap\`: Size - Space between tabs
|
|
19
|
-
- \`padding\`: Size - Padding on all sides
|
|
20
|
-
- \`paddingVertical\`: Size - Top and bottom padding
|
|
21
|
-
- \`paddingHorizontal\`: Size - Left and right padding
|
|
22
|
-
- \`margin\`: Size - Margin on all sides
|
|
23
|
-
- \`marginVertical\`: Size - Top and bottom margin
|
|
24
|
-
- \`marginHorizontal\`: Size - Left and right margin
|
|
25
|
-
`,
|
|
26
|
-
features: [
|
|
27
|
-
"Three visual variants (standard, pills, underline)",
|
|
28
|
-
"Icon support with render function for active state",
|
|
29
|
-
"Icon position: left (horizontal) or top (stacked)",
|
|
30
|
-
"Layout justification: start, center, equal, space-between",
|
|
31
|
-
"Controlled and uncontrolled modes",
|
|
32
|
-
"Five sizes (xs, sm, md, lg, xl)",
|
|
33
|
-
"Gap, padding, and margin variants",
|
|
34
|
-
"Disabled tabs",
|
|
35
|
-
],
|
|
36
|
-
bestPractices: [
|
|
37
|
-
"Use 'underline' variant for page-level navigation",
|
|
38
|
-
"Use 'pills' variant for contained sections",
|
|
39
|
-
"Use justify='equal' with iconPosition='top' for bottom navigation style",
|
|
40
|
-
"Use icon render function to change color based on active state",
|
|
41
|
-
"Keep tab labels short (1-2 words)",
|
|
42
|
-
"Use 3-5 tabs for optimal UX",
|
|
43
|
-
"Disable tabs when content is unavailable",
|
|
44
|
-
],
|
|
45
|
-
usage: `
|
|
46
|
-
import { TabBar } from '@idealyst/components';
|
|
47
|
-
import { useState } from 'react';
|
|
48
|
-
|
|
49
|
-
function Example() {
|
|
50
|
-
const [activeTab, setActiveTab] = useState('home');
|
|
51
|
-
|
|
52
|
-
const items = [
|
|
53
|
-
{ value: 'home', label: 'Home' },
|
|
54
|
-
{ value: 'profile', label: 'Profile' },
|
|
55
|
-
{ value: 'settings', label: 'Settings' },
|
|
56
|
-
];
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<TabBar
|
|
60
|
-
items={items}
|
|
61
|
-
value={activeTab}
|
|
62
|
-
onChange={setActiveTab}
|
|
63
|
-
type="underline"
|
|
64
|
-
/>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
`,
|
|
68
|
-
examples: {
|
|
69
|
-
basic: `import { TabBar } from '@idealyst/components';
|
|
70
|
-
|
|
71
|
-
const items = [
|
|
72
|
-
{ value: '1', label: 'Tab 1' },
|
|
73
|
-
{ value: '2', label: 'Tab 2' },
|
|
74
|
-
];
|
|
75
|
-
|
|
76
|
-
<TabBar items={items} defaultValue="1" />`,
|
|
77
|
-
variants: `import { TabBar, View } from '@idealyst/components';
|
|
78
|
-
|
|
79
|
-
const items = [
|
|
80
|
-
{ value: 'a', label: 'First' },
|
|
81
|
-
{ value: 'b', label: 'Second' },
|
|
82
|
-
];
|
|
83
|
-
|
|
84
|
-
<View gap="md">
|
|
85
|
-
<TabBar items={items} type="standard" />
|
|
86
|
-
<TabBar items={items} type="pills" />
|
|
87
|
-
<TabBar items={items} type="underline" />
|
|
88
|
-
</View>`,
|
|
89
|
-
"with-icons": `import { TabBar, View, Icon } from '@idealyst/components';
|
|
90
|
-
import { useState } from 'react';
|
|
91
|
-
|
|
92
|
-
function Example() {
|
|
93
|
-
const [tab, setTab] = useState('home');
|
|
94
|
-
|
|
95
|
-
const items = [
|
|
96
|
-
{
|
|
97
|
-
value: 'home',
|
|
98
|
-
label: 'Home',
|
|
99
|
-
icon: ({ active, size }) => (
|
|
100
|
-
<Icon name="home" size={size} color={active ? 'primary' : 'secondary'} />
|
|
101
|
-
),
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
value: 'search',
|
|
105
|
-
label: 'Search',
|
|
106
|
-
icon: ({ active, size }) => (
|
|
107
|
-
<Icon name="magnify" size={size} color={active ? 'primary' : 'secondary'} />
|
|
108
|
-
),
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
value: 'profile',
|
|
112
|
-
label: 'Profile',
|
|
113
|
-
icon: ({ active, size }) => (
|
|
114
|
-
<Icon name="account" size={size} color={active ? 'primary' : 'secondary'} />
|
|
115
|
-
),
|
|
116
|
-
},
|
|
117
|
-
];
|
|
118
|
-
|
|
119
|
-
return (
|
|
120
|
-
<View gap="md">
|
|
121
|
-
{/* Icons on left (default) */}
|
|
122
|
-
<TabBar items={items} value={tab} onChange={setTab} iconPosition="left" />
|
|
123
|
-
|
|
124
|
-
{/* Icons on top (stacked) */}
|
|
125
|
-
<TabBar items={items} value={tab} onChange={setTab} iconPosition="top" />
|
|
126
|
-
</View>
|
|
127
|
-
);
|
|
128
|
-
}`,
|
|
129
|
-
interactive: `import { TabBar, View, Text, Card } from '@idealyst/components';
|
|
130
|
-
import { useState } from 'react';
|
|
131
|
-
|
|
132
|
-
function Example() {
|
|
133
|
-
const [activeTab, setActiveTab] = useState('personal');
|
|
134
|
-
|
|
135
|
-
const items = [
|
|
136
|
-
{ value: 'personal', label: 'Personal Info' },
|
|
137
|
-
{ value: 'security', label: 'Security' },
|
|
138
|
-
{ value: 'notifications', label: 'Notifications' },
|
|
139
|
-
{ value: 'billing', label: 'Billing', disabled: true },
|
|
140
|
-
];
|
|
141
|
-
|
|
142
|
-
const renderContent = () => {
|
|
143
|
-
switch (activeTab) {
|
|
144
|
-
case 'personal':
|
|
145
|
-
return <Text>Personal information settings</Text>;
|
|
146
|
-
case 'security':
|
|
147
|
-
return <Text>Security and privacy settings</Text>;
|
|
148
|
-
case 'notifications':
|
|
149
|
-
return <Text>Notification preferences</Text>;
|
|
150
|
-
default:
|
|
151
|
-
return null;
|
|
152
|
-
}
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
return (
|
|
156
|
-
<View gap="md">
|
|
157
|
-
<TabBar
|
|
158
|
-
items={items}
|
|
159
|
-
value={activeTab}
|
|
160
|
-
onChange={setActiveTab}
|
|
161
|
-
type="pills"
|
|
162
|
-
/>
|
|
163
|
-
<Card type="outlined" padding="md">
|
|
164
|
-
{renderContent()}
|
|
165
|
-
</Card>
|
|
166
|
-
</View>
|
|
167
|
-
);
|
|
168
|
-
}`,
|
|
169
|
-
justify: `import { TabBar, View, Text } from '@idealyst/components';
|
|
170
|
-
|
|
171
|
-
const items = [
|
|
172
|
-
{ value: 'tab1', label: 'Tab 1' },
|
|
173
|
-
{ value: 'tab2', label: 'Tab 2' },
|
|
174
|
-
{ value: 'tab3', label: 'Tab 3' },
|
|
175
|
-
];
|
|
176
|
-
|
|
177
|
-
<View gap="md">
|
|
178
|
-
{/* Left aligned (default) */}
|
|
179
|
-
<Text typography="caption">justify="start"</Text>
|
|
180
|
-
<TabBar items={items} justify="start" />
|
|
181
|
-
|
|
182
|
-
{/* Centered */}
|
|
183
|
-
<Text typography="caption">justify="center"</Text>
|
|
184
|
-
<TabBar items={items} justify="center" />
|
|
185
|
-
|
|
186
|
-
{/* Full width, equal sized tabs */}
|
|
187
|
-
<Text typography="caption">justify="equal"</Text>
|
|
188
|
-
<TabBar items={items} justify="equal" />
|
|
189
|
-
|
|
190
|
-
{/* Space between tabs */}
|
|
191
|
-
<Text typography="caption">justify="space-between"</Text>
|
|
192
|
-
<TabBar items={items} justify="space-between" />
|
|
193
|
-
</View>`,
|
|
194
|
-
"bottom-nav": `import { TabBar, Icon } from '@idealyst/components';
|
|
195
|
-
import { useState } from 'react';
|
|
196
|
-
|
|
197
|
-
// Bottom navigation style: full width with stacked icons
|
|
198
|
-
function BottomNav() {
|
|
199
|
-
const [tab, setTab] = useState('home');
|
|
200
|
-
|
|
201
|
-
const items = [
|
|
202
|
-
{
|
|
203
|
-
value: 'home',
|
|
204
|
-
label: 'Home',
|
|
205
|
-
icon: ({ active, size }) => (
|
|
206
|
-
<Icon name="home" size={size} color={active ? 'primary' : 'secondary'} />
|
|
207
|
-
),
|
|
208
|
-
},
|
|
209
|
-
{
|
|
210
|
-
value: 'search',
|
|
211
|
-
label: 'Search',
|
|
212
|
-
icon: ({ active, size }) => (
|
|
213
|
-
<Icon name="magnify" size={size} color={active ? 'primary' : 'secondary'} />
|
|
214
|
-
),
|
|
215
|
-
},
|
|
216
|
-
{
|
|
217
|
-
value: 'notifications',
|
|
218
|
-
label: 'Alerts',
|
|
219
|
-
icon: ({ active, size }) => (
|
|
220
|
-
<Icon name="bell" size={size} color={active ? 'primary' : 'secondary'} />
|
|
221
|
-
),
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
value: 'profile',
|
|
225
|
-
label: 'Profile',
|
|
226
|
-
icon: ({ active, size }) => (
|
|
227
|
-
<Icon name="account" size={size} color={active ? 'primary' : 'secondary'} />
|
|
228
|
-
),
|
|
229
|
-
},
|
|
230
|
-
];
|
|
231
|
-
|
|
232
|
-
return (
|
|
233
|
-
<TabBar
|
|
234
|
-
items={items}
|
|
235
|
-
value={tab}
|
|
236
|
-
onChange={setTab}
|
|
237
|
-
justify="equal"
|
|
238
|
-
iconPosition="top"
|
|
239
|
-
/>
|
|
240
|
-
);
|
|
241
|
-
}`,
|
|
242
|
-
},
|
|
243
|
-
};
|
|
244
|
-
//# sourceMappingURL=TabBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../../src/data/components/TabBar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,uHAAuH;IAChI,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;CAqBZ;IACC,QAAQ,EAAE;QACR,oDAAoD;QACpD,oDAAoD;QACpD,mDAAmD;QACnD,2DAA2D;QAC3D,mCAAmC;QACnC,iCAAiC;QACjC,mCAAmC;QACnC,eAAe;KAChB;IACD,aAAa,EAAE;QACb,mDAAmD;QACnD,4CAA4C;QAC5C,yEAAyE;QACzE,gEAAgE;QAChE,mCAAmC;QACnC,6BAA6B;QAC7B,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;CAsBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;0CAO+B;QAEtC,QAAQ,EAAE;;;;;;;;;;;QAWN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuChB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCf;QAEE,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;QAwBL;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+ChB;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Table: {
|
|
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=Table.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/data/components/Table.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAgKjB,CAAC"}
|