@idealyst/mcp-server 1.0.86 → 1.0.88
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ARCHITECTURE.md +313 -0
- package/README.md +292 -104
- package/TYPE-SYSTEM.md +397 -0
- package/dist/index.js +170 -1
- package/examples/components/Accordion.examples.tsx +147 -0
- package/examples/components/ActivityIndicator.examples.tsx +350 -0
- package/examples/components/Alert.examples.tsx +335 -0
- package/examples/components/Avatar.examples.tsx +188 -0
- package/examples/components/Badge.examples.tsx +242 -0
- package/examples/components/Breadcrumb.examples.tsx +303 -0
- package/examples/components/Button.examples.tsx +113 -0
- package/examples/components/Card.examples.tsx +131 -0
- package/examples/components/Checkbox.examples.tsx +195 -0
- package/examples/components/Chip.examples.tsx +87 -0
- package/examples/components/Dialog.examples.tsx +344 -0
- package/examples/components/Divider.examples.tsx +258 -0
- package/examples/components/Icon.examples.tsx +202 -0
- package/examples/components/Input.examples.tsx +205 -0
- package/examples/components/Menu.examples.tsx +321 -0
- package/examples/components/Popover.examples.tsx +439 -0
- package/examples/components/Progress.examples.tsx +340 -0
- package/examples/components/RadioButton.examples.tsx +443 -0
- package/examples/components/Screen.examples.tsx +347 -0
- package/examples/components/Select.examples.tsx +279 -0
- package/examples/components/Skeleton.examples.tsx +278 -0
- package/examples/components/Slider.examples.tsx +249 -0
- package/examples/components/Switch.examples.tsx +94 -0
- package/examples/components/TabBar.examples.tsx +356 -0
- package/examples/components/Text.examples.tsx +177 -0
- package/examples/components/TextArea.examples.tsx +203 -0
- package/examples/components/Tooltip.examples.tsx +318 -0
- package/examples/components/View.examples.tsx +307 -0
- package/package.json +15 -2
- package/scripts/extract-types.ts +71 -0
- package/scripts/type-extractor.ts +286 -0
- package/scripts/validate-examples.ts +142 -0
- package/src/data/components/Icon.ts +1 -1
- package/src/data/components/index.ts +2 -0
- package/src/index.ts +181 -1
- package/src/tools/get-types.ts +169 -0
- package/tsconfig.examples.json +14 -0
- 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 -112
- 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 -82
- 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 -132
- 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 -93
- 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 -96
- package/dist/data/components/Breadcrumb.js.map +0 -1
- package/dist/data/components/Button.d.ts +0 -15
- package/dist/data/components/Button.d.ts.map +0 -1
- package/dist/data/components/Button.js +0 -87
- 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 -67
- 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 -76
- 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 -71
- 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 -70
- 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 -122
- 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 -109
- package/dist/data/components/Input.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 -132
- 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 -159
- 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 -95
- 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 -140
- 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 -99
- 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 -146
- 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 -110
- 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 -129
- 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 -127
- package/dist/data/components/Switch.js.map +0 -1
- package/dist/data/components/TabBar.d.ts +0 -15
- package/dist/data/components/TabBar.d.ts.map +0 -1
- package/dist/data/components/TabBar.js +0 -145
- 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 -151
- 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 -85
- 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 -155
- 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 -105
- 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 -168
- 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 -126
- package/dist/data/components/View.js.map +0 -1
- package/dist/data/components/index.d.ts +0 -37
- package/dist/data/components/index.d.ts.map +0 -1
- package/dist/data/components/index.js +0 -110
- 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 -589
- 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 -1196
- package/dist/data/navigation-guides.js.map +0 -1
- package/dist/index.d.ts +0 -3
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
export const TabBar = {
|
|
2
|
-
category: "navigation",
|
|
3
|
-
description: "Tab bar navigation component for switching between views or sections",
|
|
4
|
-
props: `
|
|
5
|
-
- \`items\`: TabBarItem[] - Array of tab items
|
|
6
|
-
- \`value\`: string - Unique tab value
|
|
7
|
-
- \`label\`: string - Tab label text
|
|
8
|
-
- \`disabled\`: boolean - Whether tab is disabled
|
|
9
|
-
- \`value\`: string - Currently active tab value
|
|
10
|
-
- \`defaultValue\`: string - Default tab (uncontrolled)
|
|
11
|
-
- \`onChange\`: (value: string) => void - Tab change handler
|
|
12
|
-
- \`variant\`: 'default' | 'pills' | 'underline' - Visual style
|
|
13
|
-
- \`size\`: 'small' | 'medium' | 'large' - Tab size
|
|
14
|
-
- \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
|
|
15
|
-
- \`style\`: ViewStyle - Additional styles
|
|
16
|
-
- \`testID\`: string - Test identifier
|
|
17
|
-
`,
|
|
18
|
-
features: [
|
|
19
|
-
"Three visual variants",
|
|
20
|
-
"Controlled and uncontrolled modes",
|
|
21
|
-
"Three sizes",
|
|
22
|
-
"Five intent colors",
|
|
23
|
-
"Disabled tabs",
|
|
24
|
-
"Simple configuration",
|
|
25
|
-
],
|
|
26
|
-
bestPractices: [
|
|
27
|
-
"Use 'underline' variant for page-level navigation",
|
|
28
|
-
"Use 'pills' variant for contained sections",
|
|
29
|
-
"Keep tab labels short (1-2 words)",
|
|
30
|
-
"Use 3-5 tabs for optimal UX",
|
|
31
|
-
"Disable tabs when content is unavailable",
|
|
32
|
-
"Preload tab content for smooth transitions",
|
|
33
|
-
],
|
|
34
|
-
usage: `
|
|
35
|
-
import { TabBar } from '@idealyst/components';
|
|
36
|
-
import { useState } from 'react';
|
|
37
|
-
|
|
38
|
-
function Example() {
|
|
39
|
-
const [activeTab, setActiveTab] = useState('home');
|
|
40
|
-
|
|
41
|
-
const items = [
|
|
42
|
-
{ value: 'home', label: 'Home' },
|
|
43
|
-
{ value: 'profile', label: 'Profile' },
|
|
44
|
-
{ value: 'settings', label: 'Settings' },
|
|
45
|
-
];
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<TabBar
|
|
49
|
-
items={items}
|
|
50
|
-
value={activeTab}
|
|
51
|
-
onChange={setActiveTab}
|
|
52
|
-
variant="underline"
|
|
53
|
-
/>
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
`,
|
|
57
|
-
examples: {
|
|
58
|
-
basic: `import { TabBar } from '@idealyst/components';
|
|
59
|
-
|
|
60
|
-
const items = [
|
|
61
|
-
{ value: '1', label: 'Tab 1' },
|
|
62
|
-
{ value: '2', label: 'Tab 2' },
|
|
63
|
-
];
|
|
64
|
-
|
|
65
|
-
<TabBar items={items} defaultValue="1" />`,
|
|
66
|
-
variants: `import { TabBar, View } from '@idealyst/components';
|
|
67
|
-
|
|
68
|
-
const items = [
|
|
69
|
-
{ value: 'a', label: 'First' },
|
|
70
|
-
{ value: 'b', label: 'Second' },
|
|
71
|
-
];
|
|
72
|
-
|
|
73
|
-
<View spacing="md">
|
|
74
|
-
<TabBar items={items} variant="default" />
|
|
75
|
-
<TabBar items={items} variant="pills" />
|
|
76
|
-
<TabBar items={items} variant="underline" />
|
|
77
|
-
</View>`,
|
|
78
|
-
"with-icons": `import { TabBar, View, Text } from '@idealyst/components';
|
|
79
|
-
import { useState } from 'react';
|
|
80
|
-
|
|
81
|
-
function Example() {
|
|
82
|
-
const [tab, setTab] = useState('overview');
|
|
83
|
-
|
|
84
|
-
const items = [
|
|
85
|
-
{ value: 'overview', label: 'Overview' },
|
|
86
|
-
{ value: 'analytics', label: 'Analytics' },
|
|
87
|
-
{ value: 'reports', label: 'Reports' },
|
|
88
|
-
];
|
|
89
|
-
|
|
90
|
-
return (
|
|
91
|
-
<View spacing="md">
|
|
92
|
-
<TabBar
|
|
93
|
-
items={items}
|
|
94
|
-
value={tab}
|
|
95
|
-
onChange={setTab}
|
|
96
|
-
variant="underline"
|
|
97
|
-
intent="primary"
|
|
98
|
-
/>
|
|
99
|
-
<Text>{tab} content here</Text>
|
|
100
|
-
</View>
|
|
101
|
-
);
|
|
102
|
-
}`,
|
|
103
|
-
interactive: `import { TabBar, View, Text, Card } from '@idealyst/components';
|
|
104
|
-
import { useState } from 'react';
|
|
105
|
-
|
|
106
|
-
function Example() {
|
|
107
|
-
const [activeTab, setActiveTab] = useState('personal');
|
|
108
|
-
|
|
109
|
-
const items = [
|
|
110
|
-
{ value: 'personal', label: 'Personal Info' },
|
|
111
|
-
{ value: 'security', label: 'Security' },
|
|
112
|
-
{ value: 'notifications', label: 'Notifications' },
|
|
113
|
-
{ value: 'billing', label: 'Billing', disabled: true },
|
|
114
|
-
];
|
|
115
|
-
|
|
116
|
-
const renderContent = () => {
|
|
117
|
-
switch (activeTab) {
|
|
118
|
-
case 'personal':
|
|
119
|
-
return <Text>Personal information settings</Text>;
|
|
120
|
-
case 'security':
|
|
121
|
-
return <Text>Security and privacy settings</Text>;
|
|
122
|
-
case 'notifications':
|
|
123
|
-
return <Text>Notification preferences</Text>;
|
|
124
|
-
default:
|
|
125
|
-
return null;
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
return (
|
|
130
|
-
<View spacing="md">
|
|
131
|
-
<TabBar
|
|
132
|
-
items={items}
|
|
133
|
-
value={activeTab}
|
|
134
|
-
onChange={setActiveTab}
|
|
135
|
-
variant="pills"
|
|
136
|
-
/>
|
|
137
|
-
<Card variant="outlined" padding="medium">
|
|
138
|
-
{renderContent()}
|
|
139
|
-
</Card>
|
|
140
|
-
</View>
|
|
141
|
-
);
|
|
142
|
-
}`,
|
|
143
|
-
},
|
|
144
|
-
};
|
|
145
|
-
//# 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,sEAAsE;IACnF,KAAK,EAAE;;;;;;;;;;;;;CAaR;IACC,QAAQ,EAAE;QACR,uBAAuB;QACvB,mCAAmC;QACnC,aAAa;QACb,oBAAoB;QACpB,eAAe;QACf,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,mDAAmD;QACnD,4CAA4C;QAC5C,mCAAmC;QACnC,6BAA6B;QAC7B,0CAA0C;QAC1C,4CAA4C;KAC7C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;CAsBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;0CAO+B;QAEtC,QAAQ,EAAE;;;;;;;;;;;QAWN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;EAwBhB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCf;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;;;;;;;;;;;;;CAwJjB,CAAC"}
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
export const Table = {
|
|
2
|
-
category: "data",
|
|
3
|
-
description: "Data table component for displaying structured tabular data",
|
|
4
|
-
props: `
|
|
5
|
-
- \`columns\`: TableColumn<T>[] - Column definitions
|
|
6
|
-
- \`key\`: string - Unique column key
|
|
7
|
-
- \`title\`: string - Column header title
|
|
8
|
-
- \`dataIndex\`: string - Key in data object (optional)
|
|
9
|
-
- \`render\`: (value, row, index) => ReactNode - Custom cell renderer
|
|
10
|
-
- \`width\`: number | string - Column width
|
|
11
|
-
- \`align\`: 'left' | 'center' | 'right' - Text alignment
|
|
12
|
-
- \`data\`: T[] - Array of data objects
|
|
13
|
-
- \`variant\`: 'default' | 'bordered' | 'striped' - Visual style
|
|
14
|
-
- \`size\`: 'small' | 'medium' | 'large' - Cell padding/size
|
|
15
|
-
- \`stickyHeader\`: boolean - Keep header fixed on scroll
|
|
16
|
-
- \`onRowPress\`: (row: T, index: number) => void - Row click handler
|
|
17
|
-
- \`style\`: ViewStyle - Additional styles
|
|
18
|
-
- \`testID\`: string - Test identifier
|
|
19
|
-
`,
|
|
20
|
-
features: [
|
|
21
|
-
"Column-based configuration",
|
|
22
|
-
"Custom cell renderers",
|
|
23
|
-
"Three visual variants",
|
|
24
|
-
"Three sizes",
|
|
25
|
-
"Sticky header support",
|
|
26
|
-
"Row click handling",
|
|
27
|
-
"Column alignment",
|
|
28
|
-
"Custom column widths",
|
|
29
|
-
],
|
|
30
|
-
bestPractices: [
|
|
31
|
-
"Use render function for complex cell content",
|
|
32
|
-
"Enable stickyHeader for long tables",
|
|
33
|
-
"Use 'striped' variant for better readability",
|
|
34
|
-
"Set column widths for important columns",
|
|
35
|
-
"Keep column count reasonable for mobile",
|
|
36
|
-
"Use appropriate size for data density",
|
|
37
|
-
],
|
|
38
|
-
usage: `
|
|
39
|
-
import { Table } from '@idealyst/components';
|
|
40
|
-
|
|
41
|
-
const columns = [
|
|
42
|
-
{ key: 'name', title: 'Name', dataIndex: 'name' },
|
|
43
|
-
{ key: 'email', title: 'Email', dataIndex: 'email' },
|
|
44
|
-
{
|
|
45
|
-
key: 'status',
|
|
46
|
-
title: 'Status',
|
|
47
|
-
render: (_, row) => <Badge>{row.status}</Badge>,
|
|
48
|
-
},
|
|
49
|
-
];
|
|
50
|
-
|
|
51
|
-
const data = [
|
|
52
|
-
{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
|
|
53
|
-
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
|
|
54
|
-
];
|
|
55
|
-
|
|
56
|
-
<Table columns={columns} data={data} variant="striped" />
|
|
57
|
-
`,
|
|
58
|
-
examples: {
|
|
59
|
-
basic: `import { Table } from '@idealyst/components';
|
|
60
|
-
|
|
61
|
-
const columns = [
|
|
62
|
-
{ key: 'id', title: 'ID', dataIndex: 'id' },
|
|
63
|
-
{ key: 'name', title: 'Name', dataIndex: 'name' },
|
|
64
|
-
];
|
|
65
|
-
|
|
66
|
-
const data = [
|
|
67
|
-
{ id: 1, name: 'Item 1' },
|
|
68
|
-
{ id: 2, name: 'Item 2' },
|
|
69
|
-
];
|
|
70
|
-
|
|
71
|
-
<Table columns={columns} data={data} />`,
|
|
72
|
-
variants: `import { Table, View } from '@idealyst/components';
|
|
73
|
-
|
|
74
|
-
const columns = [{ key: 'name', title: 'Name', dataIndex: 'name' }];
|
|
75
|
-
const data = [{ name: 'Test' }];
|
|
76
|
-
|
|
77
|
-
<View spacing="md">
|
|
78
|
-
<Table columns={columns} data={data} variant="default" />
|
|
79
|
-
<Table columns={columns} data={data} variant="bordered" />
|
|
80
|
-
<Table columns={columns} data={data} variant="striped" />
|
|
81
|
-
</View>`,
|
|
82
|
-
"with-icons": `import { Table, Badge, Icon, View, Text } from '@idealyst/components';
|
|
83
|
-
|
|
84
|
-
const columns = [
|
|
85
|
-
{
|
|
86
|
-
key: 'user',
|
|
87
|
-
title: 'User',
|
|
88
|
-
render: (_, row) => (
|
|
89
|
-
<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
|
|
90
|
-
<Icon name="account-circle" size="sm" />
|
|
91
|
-
<Text>{row.name}</Text>
|
|
92
|
-
</View>
|
|
93
|
-
),
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
key: 'status',
|
|
97
|
-
title: 'Status',
|
|
98
|
-
render: (_, row) => (
|
|
99
|
-
<Badge color={row.active ? 'green' : 'gray'}>
|
|
100
|
-
{row.active ? 'Active' : 'Inactive'}
|
|
101
|
-
</Badge>
|
|
102
|
-
),
|
|
103
|
-
},
|
|
104
|
-
];
|
|
105
|
-
|
|
106
|
-
<Table columns={columns} data={users} />`,
|
|
107
|
-
interactive: `import { Table, Button, View, Text } from '@idealyst/components';
|
|
108
|
-
import { useState } from 'react';
|
|
109
|
-
|
|
110
|
-
function Example() {
|
|
111
|
-
const [selected, setSelected] = useState(null);
|
|
112
|
-
|
|
113
|
-
const columns = [
|
|
114
|
-
{ key: 'id', title: 'ID', dataIndex: 'id', width: 60 },
|
|
115
|
-
{ key: 'product', title: 'Product', dataIndex: 'name' },
|
|
116
|
-
{ key: 'price', title: 'Price', dataIndex: 'price', align: 'right' },
|
|
117
|
-
{
|
|
118
|
-
key: 'actions',
|
|
119
|
-
title: 'Actions',
|
|
120
|
-
render: (_, row) => (
|
|
121
|
-
<Button
|
|
122
|
-
size="small"
|
|
123
|
-
variant="outlined"
|
|
124
|
-
onPress={() => setSelected(row)}
|
|
125
|
-
>
|
|
126
|
-
View
|
|
127
|
-
</Button>
|
|
128
|
-
),
|
|
129
|
-
},
|
|
130
|
-
];
|
|
131
|
-
|
|
132
|
-
const data = [
|
|
133
|
-
{ id: 1, name: 'Product A', price: '$29.99' },
|
|
134
|
-
{ id: 2, name: 'Product B', price: '$49.99' },
|
|
135
|
-
];
|
|
136
|
-
|
|
137
|
-
return (
|
|
138
|
-
<View spacing="md">
|
|
139
|
-
<Table
|
|
140
|
-
columns={columns}
|
|
141
|
-
data={data}
|
|
142
|
-
variant="bordered"
|
|
143
|
-
onRowPress={(row) => setSelected(row)}
|
|
144
|
-
/>
|
|
145
|
-
{selected && <Text>Selected: {selected.name}</Text>}
|
|
146
|
-
</View>
|
|
147
|
-
);
|
|
148
|
-
}`,
|
|
149
|
-
},
|
|
150
|
-
};
|
|
151
|
-
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/data/components/Table.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,6DAA6D;IAC1E,KAAK,EAAE;;;;;;;;;;;;;;;CAeR;IACC,QAAQ,EAAE;QACR,4BAA4B;QAC5B,uBAAuB;QACvB,uBAAuB;QACvB,aAAa;QACb,uBAAuB;QACvB,oBAAoB;QACpB,kBAAkB;QAClB,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,8CAA8C;QAC9C,qCAAqC;QACrC,8CAA8C;QAC9C,yCAAyC;QACzC,yCAAyC;QACzC,uCAAuC;KACxC;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;CAmBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;;;;wCAY6B;QAEpC,QAAQ,EAAE;;;;;;;;;QASN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;yCAwBuB;QAErC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Tabs: {
|
|
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=Tabs.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/data/components/Tabs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAuJhB,CAAC"}
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
export const Tabs = {
|
|
2
|
-
category: "navigation",
|
|
3
|
-
description: "Tabs component with content panels for organizing information into tabbed sections",
|
|
4
|
-
props: `
|
|
5
|
-
Tab Props:
|
|
6
|
-
- \`value\`: string - Unique tab identifier
|
|
7
|
-
- \`label\`: string - Tab label text
|
|
8
|
-
- \`disabled\`: boolean - Whether tab is disabled
|
|
9
|
-
- \`children\`: ReactNode - Tab panel content
|
|
10
|
-
|
|
11
|
-
Tabs Props:
|
|
12
|
-
- \`value\`: string - Currently active tab value
|
|
13
|
-
- \`defaultValue\`: string - Default tab (uncontrolled)
|
|
14
|
-
- \`onChange\`: (value: string) => void - Tab change handler
|
|
15
|
-
- \`variant\`: 'default' | 'pills' | 'underline' - Visual style
|
|
16
|
-
- \`size\`: 'small' | 'medium' | 'large' - Tab size
|
|
17
|
-
- \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
|
|
18
|
-
- \`style\`: ViewStyle - Additional styles
|
|
19
|
-
- \`testID\`: string - Test identifier
|
|
20
|
-
- \`children\`: ReactNode - Tab components
|
|
21
|
-
`,
|
|
22
|
-
features: [
|
|
23
|
-
"Integrated tab navigation and content panels",
|
|
24
|
-
"Three visual variants",
|
|
25
|
-
"Controlled and uncontrolled modes",
|
|
26
|
-
"Three sizes",
|
|
27
|
-
"Five intent colors",
|
|
28
|
-
"Disabled tabs",
|
|
29
|
-
"Automatic content switching",
|
|
30
|
-
],
|
|
31
|
-
bestPractices: [
|
|
32
|
-
"Use Tabs for content that belongs together",
|
|
33
|
-
"Use TabBar for navigation without content management",
|
|
34
|
-
"Keep 3-5 tabs for optimal UX",
|
|
35
|
-
"Lazy load tab content if heavy",
|
|
36
|
-
"Use descriptive tab labels",
|
|
37
|
-
"Consider vertical tabs for many options",
|
|
38
|
-
],
|
|
39
|
-
usage: `
|
|
40
|
-
import { Tabs, Tab, Text } from '@idealyst/components';
|
|
41
|
-
|
|
42
|
-
<Tabs defaultValue="tab1" variant="underline">
|
|
43
|
-
<Tab value="tab1" label="Overview">
|
|
44
|
-
<Text>Overview content</Text>
|
|
45
|
-
</Tab>
|
|
46
|
-
<Tab value="tab2" label="Details">
|
|
47
|
-
<Text>Details content</Text>
|
|
48
|
-
</Tab>
|
|
49
|
-
<Tab value="tab3" label="Settings">
|
|
50
|
-
<Text>Settings content</Text>
|
|
51
|
-
</Tab>
|
|
52
|
-
</Tabs>
|
|
53
|
-
`,
|
|
54
|
-
examples: {
|
|
55
|
-
basic: `import { Tabs, Tab, Text } from '@idealyst/components';
|
|
56
|
-
|
|
57
|
-
<Tabs defaultValue="1">
|
|
58
|
-
<Tab value="1" label="First">
|
|
59
|
-
<Text>First tab content</Text>
|
|
60
|
-
</Tab>
|
|
61
|
-
<Tab value="2" label="Second">
|
|
62
|
-
<Text>Second tab content</Text>
|
|
63
|
-
</Tab>
|
|
64
|
-
</Tabs>`,
|
|
65
|
-
variants: `import { Tabs, Tab, View, Text } from '@idealyst/components';
|
|
66
|
-
|
|
67
|
-
<View spacing="lg">
|
|
68
|
-
<Tabs defaultValue="a" variant="default">
|
|
69
|
-
<Tab value="a" label="Default"><Text>Content A</Text></Tab>
|
|
70
|
-
<Tab value="b" label="Style"><Text>Content B</Text></Tab>
|
|
71
|
-
</Tabs>
|
|
72
|
-
|
|
73
|
-
<Tabs defaultValue="a" variant="pills">
|
|
74
|
-
<Tab value="a" label="Pills"><Text>Content A</Text></Tab>
|
|
75
|
-
<Tab value="b" label="Style"><Text>Content B</Text></Tab>
|
|
76
|
-
</Tabs>
|
|
77
|
-
|
|
78
|
-
<Tabs defaultValue="a" variant="underline">
|
|
79
|
-
<Tab value="a" label="Underline"><Text>Content A</Text></Tab>
|
|
80
|
-
<Tab value="b" label="Style"><Text>Content B</Text></Tab>
|
|
81
|
-
</Tabs>
|
|
82
|
-
</View>`,
|
|
83
|
-
"with-icons": `import { Tabs, Tab, View, Text, Card } from '@idealyst/components';
|
|
84
|
-
|
|
85
|
-
<Tabs defaultValue="profile" variant="pills" intent="primary">
|
|
86
|
-
<Tab value="profile" label="Profile">
|
|
87
|
-
<Card padding="medium">
|
|
88
|
-
<View spacing="md">
|
|
89
|
-
<Text weight="bold">Profile Settings</Text>
|
|
90
|
-
<Text>Update your profile information</Text>
|
|
91
|
-
</View>
|
|
92
|
-
</Card>
|
|
93
|
-
</Tab>
|
|
94
|
-
<Tab value="security" label="Security">
|
|
95
|
-
<Card padding="medium">
|
|
96
|
-
<View spacing="md">
|
|
97
|
-
<Text weight="bold">Security Settings</Text>
|
|
98
|
-
<Text>Manage your security preferences</Text>
|
|
99
|
-
</View>
|
|
100
|
-
</Card>
|
|
101
|
-
</Tab>
|
|
102
|
-
</Tabs>`,
|
|
103
|
-
interactive: `import { Tabs, Tab, View, Text, Input, Button } from '@idealyst/components';
|
|
104
|
-
import { useState } from 'react';
|
|
105
|
-
|
|
106
|
-
function Example() {
|
|
107
|
-
const [activeTab, setActiveTab] = useState('account');
|
|
108
|
-
const [name, setName] = useState('');
|
|
109
|
-
const [email, setEmail] = useState('');
|
|
110
|
-
|
|
111
|
-
return (
|
|
112
|
-
<Tabs value={activeTab} onChange={setActiveTab} variant="underline">
|
|
113
|
-
<Tab value="account" label="Account">
|
|
114
|
-
<View spacing="md" style={{ padding: 16 }}>
|
|
115
|
-
<Text weight="bold">Account Information</Text>
|
|
116
|
-
<Input
|
|
117
|
-
label="Name"
|
|
118
|
-
value={name}
|
|
119
|
-
onChangeText={setName}
|
|
120
|
-
placeholder="Enter your name"
|
|
121
|
-
/>
|
|
122
|
-
<Input
|
|
123
|
-
label="Email"
|
|
124
|
-
value={email}
|
|
125
|
-
onChangeText={setEmail}
|
|
126
|
-
placeholder="Enter your email"
|
|
127
|
-
/>
|
|
128
|
-
<Button intent="primary">Save Changes</Button>
|
|
129
|
-
</View>
|
|
130
|
-
</Tab>
|
|
131
|
-
|
|
132
|
-
<Tab value="privacy" label="Privacy">
|
|
133
|
-
<View spacing="md" style={{ padding: 16 }}>
|
|
134
|
-
<Text weight="bold">Privacy Settings</Text>
|
|
135
|
-
<Text>Manage your privacy preferences here</Text>
|
|
136
|
-
</View>
|
|
137
|
-
</Tab>
|
|
138
|
-
|
|
139
|
-
<Tab value="notifications" label="Notifications">
|
|
140
|
-
<View spacing="md" style={{ padding: 16 }}>
|
|
141
|
-
<Text weight="bold">Notification Preferences</Text>
|
|
142
|
-
<Text>Configure how you receive notifications</Text>
|
|
143
|
-
</View>
|
|
144
|
-
</Tab>
|
|
145
|
-
</Tabs>
|
|
146
|
-
);
|
|
147
|
-
}`,
|
|
148
|
-
},
|
|
149
|
-
};
|
|
150
|
-
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/data/components/Tabs.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,oFAAoF;IACjG,KAAK,EAAE;;;;;;;;;;;;;;;;;CAiBR;IACC,QAAQ,EAAE;QACR,8CAA8C;QAC9C,uBAAuB;QACvB,mCAAmC;QACnC,aAAa;QACb,oBAAoB;QACpB,eAAe;QACf,6BAA6B;KAC9B;IACD,aAAa,EAAE;QACb,4CAA4C;QAC5C,sDAAsD;QACtD,8BAA8B;QAC9B,gCAAgC;QAChC,4BAA4B;QAC5B,yCAAyC;KAC1C;IACD,KAAK,EAAE;;;;;;;;;;;;;;CAcR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;;;QASH;QAEJ,QAAQ,EAAE;;;;;;;;;;;;;;;;;QAiBN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;QAmBV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4Cf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const Text: {
|
|
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=Text.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/data/components/Text.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAsFhB,CAAC"}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
export const Text = {
|
|
2
|
-
category: "typography",
|
|
3
|
-
description: "Styled text component with size, weight, and color variants",
|
|
4
|
-
props: `
|
|
5
|
-
- \`children\`: ReactNode - The text content to display
|
|
6
|
-
- \`size\`: 'small' | 'medium' | 'large' | 'xlarge' - Text size variant
|
|
7
|
-
- \`weight\`: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' - Font weight
|
|
8
|
-
- \`color\`: DisplayColorVariant - Text color from theme
|
|
9
|
-
- \`align\`: 'left' | 'center' | 'right' - Text alignment
|
|
10
|
-
- \`style\`: any - Additional custom styles
|
|
11
|
-
- \`testID\`: string - Test identifier
|
|
12
|
-
`,
|
|
13
|
-
features: [
|
|
14
|
-
"Four size variants",
|
|
15
|
-
"Five weight options",
|
|
16
|
-
"Theme color variants",
|
|
17
|
-
"Three alignment options",
|
|
18
|
-
"Cross-platform support",
|
|
19
|
-
"Inherits parent text styles",
|
|
20
|
-
],
|
|
21
|
-
bestPractices: [
|
|
22
|
-
"Use semantic sizes (xlarge for headings, small for captions)",
|
|
23
|
-
"Use appropriate weights for hierarchy",
|
|
24
|
-
"Prefer theme colors over custom colors",
|
|
25
|
-
"Use 'left' alignment for body text",
|
|
26
|
-
"Use 'center' for short, important text",
|
|
27
|
-
"Nest Text components for mixed styles",
|
|
28
|
-
],
|
|
29
|
-
usage: `
|
|
30
|
-
import { Text } from '@idealyst/components';
|
|
31
|
-
|
|
32
|
-
<Text size="xlarge" weight="bold" color="primary">
|
|
33
|
-
Heading Text
|
|
34
|
-
</Text>
|
|
35
|
-
|
|
36
|
-
<Text size="medium" color="secondary">
|
|
37
|
-
Body text with normal weight
|
|
38
|
-
</Text>
|
|
39
|
-
`,
|
|
40
|
-
examples: {
|
|
41
|
-
basic: `import { Text } from '@idealyst/components';
|
|
42
|
-
|
|
43
|
-
<Text>Simple text content</Text>`,
|
|
44
|
-
variants: `import { Text, View } from '@idealyst/components';
|
|
45
|
-
|
|
46
|
-
<View spacing="md">
|
|
47
|
-
<Text size="small">Small text</Text>
|
|
48
|
-
<Text size="medium">Medium text</Text>
|
|
49
|
-
<Text size="large">Large text</Text>
|
|
50
|
-
<Text size="xlarge">Extra large text</Text>
|
|
51
|
-
</View>`,
|
|
52
|
-
"with-icons": `import { Text, View, Icon } from '@idealyst/components';
|
|
53
|
-
|
|
54
|
-
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
55
|
-
<Icon name="check-circle" size="md" color="success" />
|
|
56
|
-
<Text color="success" weight="medium">
|
|
57
|
-
Verified Account
|
|
58
|
-
</Text>
|
|
59
|
-
</View>`,
|
|
60
|
-
interactive: `import { Text, View, Button } from '@idealyst/components';
|
|
61
|
-
import { useState } from 'react';
|
|
62
|
-
|
|
63
|
-
function Example() {
|
|
64
|
-
const [count, setCount] = useState(0);
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<View spacing="md">
|
|
68
|
-
<Text size="xlarge" weight="bold" align="center">
|
|
69
|
-
Counter: {count}
|
|
70
|
-
</Text>
|
|
71
|
-
|
|
72
|
-
<View style={{ flexDirection: 'row', gap: 8, justifyContent: 'center' }}>
|
|
73
|
-
<Button onPress={() => setCount(count - 1)}>-</Button>
|
|
74
|
-
<Button onPress={() => setCount(count + 1)}>+</Button>
|
|
75
|
-
</View>
|
|
76
|
-
|
|
77
|
-
<Text size="small" color="secondary" align="center">
|
|
78
|
-
Click buttons to change the count
|
|
79
|
-
</Text>
|
|
80
|
-
</View>
|
|
81
|
-
);
|
|
82
|
-
}`,
|
|
83
|
-
},
|
|
84
|
-
};
|
|
85
|
-
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/data/components/Text.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,6DAA6D;IAC1E,KAAK,EAAE;;;;;;;;CAQR;IACC,QAAQ,EAAE;QACR,oBAAoB;QACpB,qBAAqB;QACrB,sBAAsB;QACtB,yBAAyB;QACzB,wBAAwB;QACxB,6BAA6B;KAC9B;IACD,aAAa,EAAE;QACb,8DAA8D;QAC9D,uCAAuC;QACvC,wCAAwC;QACxC,oCAAoC;QACpC,wCAAwC;QACxC,uCAAuC;KACxC;IACD,KAAK,EAAE;;;;;;;;;;CAUR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;iCAEsB;QAE7B,QAAQ,EAAE;;;;;;;QAON;QAEJ,YAAY,EAAE;;;;;;;QAOV;QAEJ,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBf;KACC;CACF,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const TextArea: {
|
|
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=TextArea.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/data/components/TextArea.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CA4JpB,CAAC"}
|