@vtx-ui/react 0.0.1-beta.3 → 0.0.1-beta.4
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.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/AdminHeader/AdminHeader.d.ts +176 -0
- package/dist/types/components/AdminHeader/AdminHeader.examples.d.ts +44 -0
- package/dist/types/components/AdminHeader/AdminHeader.stories.d.ts +53 -0
- package/dist/types/components/AdminHeader/AdminHeader.widgets.stories.d.ts +86 -0
- package/dist/types/components/AdminHeader/index.d.ts +2 -0
- package/dist/types/components/Alert/Alert.d.ts +2 -53
- package/dist/types/components/Avatar/Avatar.d.ts +2 -2
- package/dist/types/components/Badge/Badge.d.ts +2 -32
- package/dist/types/components/Button/Button.d.ts +2 -42
- package/dist/types/components/Card/Card.d.ts +2 -63
- package/dist/types/components/Checkbox/Checkbox.d.ts +2 -59
- package/dist/types/components/CheckboxGroup/CheckboxGroup.d.ts +2 -53
- package/dist/types/components/Chip/Chip.d.ts +2 -32
- package/dist/types/components/Divider/Divider.d.ts +2 -72
- package/dist/types/components/Flex/Flex.d.ts +2 -26
- package/dist/types/components/Grid/Grid.d.ts +2 -77
- package/dist/types/components/Header/Header.d.ts +2 -33
- package/dist/types/components/Input/Input.d.ts +2 -52
- package/dist/types/components/Menu/Menu.d.ts +2 -32
- package/dist/types/components/Modal/Modal.d.ts +4 -73
- package/dist/types/components/MultiSelect/MultiSelect.d.ts +2 -41
- package/dist/types/components/Radio/Radio.d.ts +2 -55
- package/dist/types/components/RadioGroup/RadioGroup.d.ts +2 -57
- package/dist/types/components/Select/Select.d.ts +2 -58
- package/dist/types/components/SideMenu/SideMenu.d.ts +139 -38
- package/dist/types/components/SideMenu/SideMenu.examples.d.ts +17 -0
- package/dist/types/components/SideMenu/index.d.ts +2 -4
- package/dist/types/components/Table/Table.d.ts +2 -58
- package/dist/types/components/Timeline/Timeline.d.ts +34 -0
- package/dist/types/components/Timeline/index.d.ts +2 -0
- package/dist/types/components/Toast/Toast.d.ts +2 -51
- package/dist/types/icons/IconComponents.d.ts +50 -0
- package/dist/types/icons/index.d.ts +1 -0
- package/dist/types/index.d.ts +19 -1
- package/dist/types/stories/components/Accordion.stories.d.ts +11 -0
- package/dist/types/stories/components/Alert.stories.d.ts +9 -0
- package/dist/types/stories/components/Avatar.stories.d.ts +13 -0
- package/dist/types/stories/components/Badge.stories.d.ts +8 -0
- package/dist/types/stories/components/Button.stories.d.ts +9 -0
- package/dist/types/stories/components/Card.stories.d.ts +8 -0
- package/dist/types/stories/components/Checkbox.stories.d.ts +17 -0
- package/dist/types/stories/components/CheckboxGroup.stories.d.ts +13 -0
- package/dist/types/stories/components/Chip.stories.d.ts +22 -0
- package/dist/types/stories/components/Divider.stories.d.ts +15 -0
- package/dist/types/stories/components/Flex.stories.d.ts +14 -0
- package/dist/types/stories/components/Grid.stories.d.ts +11 -0
- package/dist/types/stories/components/Header.stories.d.ts +14 -0
- package/dist/types/stories/components/Input.stories.d.ts +9 -0
- package/dist/types/stories/components/Menu.stories.d.ts +13 -0
- package/dist/types/stories/components/Modal.stories.d.ts +12 -0
- package/dist/types/stories/components/MultiSelect.stories.d.ts +19 -0
- package/dist/types/stories/components/Radio.stories.d.ts +16 -0
- package/dist/types/stories/components/RadioGroup.stories.d.ts +15 -0
- package/dist/types/stories/components/Select.stories.d.ts +17 -0
- package/dist/types/stories/components/SideMenu.stories.d.ts +131 -0
- package/dist/types/stories/components/Table.stories.d.ts +18 -0
- package/dist/types/stories/components/Text.stories.d.ts +18 -0
- package/dist/types/stories/components/Timeline.stories.d.ts +20 -0
- package/dist/types/stories/components/Toast.stories.d.ts +17 -0
- package/dist/types/stories/components/Tooltip.stories.d.ts +20 -0
- package/dist/types/stories/widgets/InfoCard.stories.d.ts +12 -0
- package/dist/types/stories/widgets/InfoListCard.stories.d.ts +19 -0
- package/dist/types/stories/widgets/InfoText.stories.d.ts +30 -0
- package/dist/types/stories/widgets/OrderCard.stories.d.ts +13 -0
- package/dist/types/stories/widgets/OrderConfirmation.stories.d.ts +36 -0
- package/dist/types/stories/widgets/OrderDetails.stories.d.ts +11 -0
- package/dist/types/stories/widgets/ProductCard.stories.d.ts +25 -0
- package/dist/types/widgets/Header/Header.d.ts +252 -0
- package/dist/types/widgets/Header/Header.examples.d.ts +17 -0
- package/dist/types/widgets/Header/Header.megamenu.examples.d.ts +22 -0
- package/dist/types/widgets/Header/Header.stories.d.ts +30 -0
- package/dist/types/widgets/Header/index.d.ts +2 -0
- package/dist/types/widgets/InfoCard/InfoCard.d.ts +40 -0
- package/dist/types/widgets/InfoCard/index.d.ts +1 -0
- package/dist/types/widgets/InfoListCard/InfoListCard.d.ts +40 -0
- package/dist/types/widgets/InfoListCard/index.d.ts +2 -0
- package/dist/types/widgets/InfoText/InfoText.d.ts +144 -0
- package/dist/types/widgets/InfoText/InfoText.examples.d.ts +33 -0
- package/dist/types/widgets/InfoText/index.d.ts +1 -0
- package/dist/types/widgets/OrderCard/OrderCard.d.ts +68 -0
- package/dist/types/widgets/OrderCard/index.d.ts +2 -0
- package/dist/types/widgets/OrderConfirmation/OrderConfirmation.d.ts +82 -0
- package/dist/types/widgets/OrderConfirmation/index.d.ts +3 -0
- package/dist/types/widgets/OrderDetails/OrderDetails.d.ts +88 -0
- package/dist/types/widgets/OrderDetails/index.d.ts +3 -0
- package/dist/types/widgets/ProductCard/ProductCard.d.ts +42 -0
- package/dist/types/widgets/ProductCard/index.d.ts +1 -0
- package/dist/types/widgets/product-card-old/ProductCard.d.ts +12 -0
- package/package.json +72 -59
|
@@ -73,62 +73,7 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
|
|
|
73
73
|
*/
|
|
74
74
|
className?: string;
|
|
75
75
|
}
|
|
76
|
-
|
|
77
|
-
* RadioGroup component - Manages a group of related radio buttons
|
|
78
|
-
*
|
|
79
|
-
* The RadioGroup component provides a convenient way to manage multiple
|
|
80
|
-
* radio buttons with shared state, labels, and error handling.
|
|
81
|
-
*
|
|
82
|
-
* @example
|
|
83
|
-
* Basic usage
|
|
84
|
-
* ```tsx
|
|
85
|
-
* <RadioGroup
|
|
86
|
-
* name="plan"
|
|
87
|
-
* label="Select your plan"
|
|
88
|
-
* options={[
|
|
89
|
-
* { value: 'basic', label: 'Basic' },
|
|
90
|
-
* { value: 'pro', label: 'Pro' },
|
|
91
|
-
* { value: 'enterprise', label: 'Enterprise' },
|
|
92
|
-
* ]}
|
|
93
|
-
* />
|
|
94
|
-
* ```
|
|
95
|
-
*
|
|
96
|
-
* @example
|
|
97
|
-
* Controlled mode
|
|
98
|
-
* ```tsx
|
|
99
|
-
* const [selected, setSelected] = useState('basic');
|
|
100
|
-
* <RadioGroup
|
|
101
|
-
* name="plan"
|
|
102
|
-
* label="Plan"
|
|
103
|
-
* options={options}
|
|
104
|
-
* value={selected}
|
|
105
|
-
* onChange={setSelected}
|
|
106
|
-
* />
|
|
107
|
-
* ```
|
|
108
|
-
*
|
|
109
|
-
* @example
|
|
110
|
-
* Horizontal layout
|
|
111
|
-
* ```tsx
|
|
112
|
-
* <RadioGroup
|
|
113
|
-
* name="answer"
|
|
114
|
-
* label="Your answer"
|
|
115
|
-
* options={options}
|
|
116
|
-
* orientation="horizontal"
|
|
117
|
-
* />
|
|
118
|
-
* ```
|
|
119
|
-
*
|
|
120
|
-
* @example
|
|
121
|
-
* With error state
|
|
122
|
-
* ```tsx
|
|
123
|
-
* <RadioGroup
|
|
124
|
-
* name="required"
|
|
125
|
-
* label="Required selection"
|
|
126
|
-
* options={options}
|
|
127
|
-
* error
|
|
128
|
-
* helperText="Please select an option"
|
|
129
|
-
* />
|
|
130
|
-
* ```
|
|
131
|
-
*/
|
|
132
|
-
export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
76
|
+
declare const RadioGroupWithParsedClasses: (props: RadioGroupProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
133
77
|
declare const _default: React.FC<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
134
78
|
export default _default;
|
|
79
|
+
export { RadioGroupWithParsedClasses as RadioGroup };
|
|
@@ -107,63 +107,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
|
|
|
107
107
|
*/
|
|
108
108
|
loading?: boolean;
|
|
109
109
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
*
|
|
113
|
-
* A comprehensive select component with support for grouped options, validation states,
|
|
114
|
-
* and enhanced accessibility features.
|
|
115
|
-
*
|
|
116
|
-
* @example
|
|
117
|
-
* Basic usage
|
|
118
|
-
* ```tsx
|
|
119
|
-
* <Select
|
|
120
|
-
* label="Country"
|
|
121
|
-
* placeholder="Select a country"
|
|
122
|
-
* options={[
|
|
123
|
-
* { value: 'us', label: 'United States' },
|
|
124
|
-
* { value: 'uk', label: 'United Kingdom' },
|
|
125
|
-
* ]}
|
|
126
|
-
* />
|
|
127
|
-
* ```
|
|
128
|
-
*
|
|
129
|
-
* @example
|
|
130
|
-
* With grouped options
|
|
131
|
-
* ```tsx
|
|
132
|
-
* <Select
|
|
133
|
-
* label="Framework"
|
|
134
|
-
* grouped
|
|
135
|
-
* options={[
|
|
136
|
-
* { value: 'react', label: 'React', group: 'Frontend' },
|
|
137
|
-
* { value: 'vue', label: 'Vue', group: 'Frontend' },
|
|
138
|
-
* { value: 'node', label: 'Node.js', group: 'Backend' },
|
|
139
|
-
* { value: 'django', label: 'Django', group: 'Backend' },
|
|
140
|
-
* ]}
|
|
141
|
-
* />
|
|
142
|
-
* ```
|
|
143
|
-
*
|
|
144
|
-
* @example
|
|
145
|
-
* With change callback
|
|
146
|
-
* ```tsx
|
|
147
|
-
* <Select
|
|
148
|
-
* label="Status"
|
|
149
|
-
* options={statusOptions}
|
|
150
|
-
* onSelectChange={(value, option) => {
|
|
151
|
-
* console.log('Selected:', value, option);
|
|
152
|
-
* }}
|
|
153
|
-
* />
|
|
154
|
-
* ```
|
|
155
|
-
*
|
|
156
|
-
* @example
|
|
157
|
-
* Customize loading spinner via CSS
|
|
158
|
-
* ```css
|
|
159
|
-
* .vtx-select-icon-spinner {
|
|
160
|
-
* --vtx-select-loader-color: #10b981;
|
|
161
|
-
* --vtx-select-loader-speed: 1.2s;
|
|
162
|
-
* --vtx-select-loader-track-opacity: 0.15;
|
|
163
|
-
* --vtx-select-loader-path-opacity: 0.85;
|
|
164
|
-
* }
|
|
165
|
-
* ```
|
|
166
|
-
*/
|
|
167
|
-
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
110
|
+
declare const SelectWithParsedClasses: (props: SelectProps & React.RefAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
|
|
111
|
+
export { SelectWithParsedClasses as Select };
|
|
168
112
|
declare const _default: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
169
113
|
export default _default;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './SideMenu.css';
|
|
3
3
|
export interface SideMenuItemProps {
|
|
4
|
+
/**
|
|
5
|
+
* Unique identifier for the menu item
|
|
6
|
+
*/
|
|
7
|
+
id: string;
|
|
4
8
|
/**
|
|
5
9
|
* Menu item label
|
|
6
10
|
*/
|
|
@@ -30,11 +34,19 @@ export interface SideMenuItemProps {
|
|
|
30
34
|
/**
|
|
31
35
|
* Badge content (number or text)
|
|
32
36
|
*/
|
|
33
|
-
badge?:
|
|
37
|
+
badge?: React.ReactNode;
|
|
34
38
|
/**
|
|
35
39
|
* Custom href for links
|
|
36
40
|
*/
|
|
37
41
|
href?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Description or subtitle
|
|
44
|
+
*/
|
|
45
|
+
description?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Custom data attributes
|
|
48
|
+
*/
|
|
49
|
+
dataAttributes?: Record<string, string>;
|
|
38
50
|
}
|
|
39
51
|
export interface SideMenuProps {
|
|
40
52
|
/**
|
|
@@ -56,12 +68,12 @@ export interface SideMenuProps {
|
|
|
56
68
|
className?: string;
|
|
57
69
|
/**
|
|
58
70
|
* Sidebar width when expanded
|
|
59
|
-
* @default '
|
|
71
|
+
* @default '280px'
|
|
60
72
|
*/
|
|
61
73
|
width?: string | number;
|
|
62
74
|
/**
|
|
63
75
|
* Sidebar width when collapsed
|
|
64
|
-
* @default '
|
|
76
|
+
* @default '72px'
|
|
65
77
|
*/
|
|
66
78
|
collapsedWidth?: string | number;
|
|
67
79
|
/**
|
|
@@ -72,47 +84,136 @@ export interface SideMenuProps {
|
|
|
72
84
|
* Footer content
|
|
73
85
|
*/
|
|
74
86
|
footer?: React.ReactNode;
|
|
87
|
+
children?: React.ReactNode;
|
|
88
|
+
/**
|
|
89
|
+
* Visual variant style
|
|
90
|
+
* @default 'default'
|
|
91
|
+
*/
|
|
92
|
+
variant?: 'default' | 'compact' | 'modern' | 'enterprise' | 'minimal';
|
|
93
|
+
/**
|
|
94
|
+
* Color theme
|
|
95
|
+
* @default 'light'
|
|
96
|
+
*/
|
|
97
|
+
theme?: 'light' | 'dark' | 'primary' | 'gradient';
|
|
98
|
+
/**
|
|
99
|
+
* Position of the sidebar
|
|
100
|
+
* @default 'left'
|
|
101
|
+
*/
|
|
102
|
+
position?: 'left' | 'right';
|
|
103
|
+
/**
|
|
104
|
+
* If true, sidebar has elevated shadow
|
|
105
|
+
* @default true
|
|
106
|
+
*/
|
|
107
|
+
elevated?: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* If true, sidebar has border
|
|
110
|
+
* @default false
|
|
111
|
+
*/
|
|
112
|
+
bordered?: boolean;
|
|
113
|
+
/**
|
|
114
|
+
* If true, shows collapse toggle button
|
|
115
|
+
* @default true
|
|
116
|
+
*/
|
|
117
|
+
collapsible?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* Collapse button position
|
|
120
|
+
* @default 'bottom'
|
|
121
|
+
*/
|
|
122
|
+
collapseButtonPosition?: 'top' | 'bottom' | 'header';
|
|
123
|
+
/**
|
|
124
|
+
* If true, shows tooltips for collapsed items
|
|
125
|
+
* @default true
|
|
126
|
+
*/
|
|
127
|
+
showTooltipsWhenCollapsed?: boolean;
|
|
128
|
+
/**
|
|
129
|
+
* If true, allows multiple submenus to be open at once
|
|
130
|
+
* @default true
|
|
131
|
+
*/
|
|
132
|
+
allowMultipleExpanded?: boolean;
|
|
133
|
+
/**
|
|
134
|
+
* Callback when menu item is clicked
|
|
135
|
+
*/
|
|
136
|
+
onItemClick?: (item: SideMenuItemProps) => void;
|
|
137
|
+
/**
|
|
138
|
+
* Custom style object
|
|
139
|
+
*/
|
|
140
|
+
style?: React.CSSProperties;
|
|
141
|
+
/**
|
|
142
|
+
* Custom ref
|
|
143
|
+
*/
|
|
144
|
+
ref?: React.Ref<HTMLElement>;
|
|
145
|
+
/**
|
|
146
|
+
* Whether the mobile menu is open (overlay mode)
|
|
147
|
+
* @default false
|
|
148
|
+
*/
|
|
149
|
+
mobileOpen?: boolean;
|
|
150
|
+
/**
|
|
151
|
+
* Mobile menu toggle handler
|
|
152
|
+
*/
|
|
153
|
+
onMobileToggle?: (open: boolean) => void;
|
|
154
|
+
/**
|
|
155
|
+
* Breakpoint for mobile mode (px)
|
|
156
|
+
* @default 768
|
|
157
|
+
*/
|
|
158
|
+
mobileBreakpoint?: number;
|
|
159
|
+
/**
|
|
160
|
+
* If true, shows backdrop when mobile menu is open
|
|
161
|
+
* @default true
|
|
162
|
+
*/
|
|
163
|
+
showBackdrop?: boolean;
|
|
164
|
+
/**
|
|
165
|
+
* If true, closes menu when item is clicked on mobile
|
|
166
|
+
* @default true
|
|
167
|
+
*/
|
|
168
|
+
closeOnItemClick?: boolean;
|
|
75
169
|
}
|
|
76
170
|
/**
|
|
77
|
-
*
|
|
78
|
-
*/
|
|
79
|
-
export declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & {
|
|
80
|
-
collapsed?: boolean;
|
|
81
|
-
level?: number;
|
|
82
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
83
|
-
/**
|
|
84
|
-
* SideMenu component - Professional sidebar navigation for admin panels
|
|
171
|
+
* MobileMenuButton - Button to toggle mobile menu
|
|
85
172
|
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
* ```tsx
|
|
89
|
-
* <SideMenu
|
|
90
|
-
* items={[
|
|
91
|
-
* { label: 'Dashboard', icon: <DashboardIcon />, active: true },
|
|
92
|
-
* {
|
|
93
|
-
* label: 'Products',
|
|
94
|
-
* icon: <ProductIcon />,
|
|
95
|
-
* items: [
|
|
96
|
-
* { label: 'All Products', onClick: () => {} },
|
|
97
|
-
* { label: 'Categories', onClick: () => {} }
|
|
98
|
-
* ]
|
|
99
|
-
* },
|
|
100
|
-
* { label: 'Settings', icon: <SettingsIcon />, onClick: () => {} }
|
|
101
|
-
* ]}
|
|
102
|
-
* />
|
|
103
|
-
* ```
|
|
173
|
+
* A dedicated button component for triggering mobile menu overlay.
|
|
174
|
+
* Shows only on mobile devices (customizable breakpoint).
|
|
104
175
|
*
|
|
105
176
|
* @example
|
|
106
|
-
* Collapsible sidebar with header
|
|
107
177
|
* ```tsx
|
|
108
|
-
*
|
|
109
|
-
*
|
|
110
|
-
*
|
|
111
|
-
*
|
|
112
|
-
*
|
|
178
|
+
* const [mobileOpen, setMobileOpen] = useState(false);
|
|
179
|
+
*
|
|
180
|
+
* <MobileMenuButton
|
|
181
|
+
* onClick={() => setMobileOpen(true)}
|
|
182
|
+
* label="Open navigation"
|
|
113
183
|
* />
|
|
114
184
|
* ```
|
|
115
185
|
*/
|
|
116
|
-
export
|
|
117
|
-
|
|
118
|
-
|
|
186
|
+
export interface MobileMenuButtonProps {
|
|
187
|
+
/**
|
|
188
|
+
* Click handler to open mobile menu
|
|
189
|
+
*/
|
|
190
|
+
onClick?: () => void;
|
|
191
|
+
/**
|
|
192
|
+
* Custom className
|
|
193
|
+
*/
|
|
194
|
+
className?: string;
|
|
195
|
+
/**
|
|
196
|
+
* Button label for accessibility
|
|
197
|
+
* @default 'Open menu'
|
|
198
|
+
*/
|
|
199
|
+
label?: string;
|
|
200
|
+
/**
|
|
201
|
+
* Button variant
|
|
202
|
+
* @default 'default'
|
|
203
|
+
*/
|
|
204
|
+
variant?: 'default' | 'ghost' | 'minimal';
|
|
205
|
+
/**
|
|
206
|
+
* Custom style
|
|
207
|
+
*/
|
|
208
|
+
style?: React.CSSProperties;
|
|
209
|
+
}
|
|
210
|
+
declare const MobileMenuButtonComponent: React.FC<MobileMenuButtonProps>;
|
|
211
|
+
export declare const SideMenu: {
|
|
212
|
+
Default: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
|
|
213
|
+
Compact: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
|
|
214
|
+
Modern: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
|
|
215
|
+
Enterprise: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
|
|
216
|
+
Minimal: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
|
|
217
|
+
};
|
|
218
|
+
export { MobileMenuButtonComponent as MobileMenuButton };
|
|
219
|
+
export default SideMenu;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Example: Responsive Layout with Mobile Overlay
|
|
3
|
+
*
|
|
4
|
+
* This example demonstrates a complete responsive layout with:
|
|
5
|
+
* - Desktop: Sidebar pushes content (collapsible)
|
|
6
|
+
* - Mobile: Sidebar overlays content (with backdrop)
|
|
7
|
+
* - Hamburger menu button for mobile
|
|
8
|
+
*/
|
|
9
|
+
export declare const ResponsiveLayoutExample: () => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* Example: Dark Theme Responsive
|
|
12
|
+
*/
|
|
13
|
+
export declare const DarkThemeResponsiveExample: () => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
/**
|
|
15
|
+
* Example: Enterprise Layout
|
|
16
|
+
*/
|
|
17
|
+
export declare const EnterpriseResponsiveExample: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
export { default
|
|
2
|
-
export type { SideMenuProps, SideMenuItemProps } from './SideMenu';
|
|
3
|
-
export { SideMenu as SideMenuComponent } from './SideMenu';
|
|
4
|
-
export { SideMenuItem } from './SideMenu';
|
|
1
|
+
export { SideMenu, default, MobileMenuButton } from './SideMenu';
|
|
2
|
+
export type { SideMenuProps, SideMenuItemProps, MobileMenuButtonProps } from './SideMenu';
|
|
@@ -149,63 +149,7 @@ export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTa
|
|
|
149
149
|
*/
|
|
150
150
|
containerClassName?: string;
|
|
151
151
|
}
|
|
152
|
-
|
|
153
|
-
* Table component - Displays data in rows and columns with advanced features
|
|
154
|
-
*
|
|
155
|
-
* A comprehensive table component with support for sorting, selection, loading states,
|
|
156
|
-
* sticky columns, and customizable rendering.
|
|
157
|
-
*
|
|
158
|
-
* @example
|
|
159
|
-
* Basic usage
|
|
160
|
-
* ```tsx
|
|
161
|
-
* const columns = [
|
|
162
|
-
* { key: 'name', header: 'Name' },
|
|
163
|
-
* { key: 'email', header: 'Email' },
|
|
164
|
-
* { key: 'role', header: 'Role', align: 'center' },
|
|
165
|
-
* ];
|
|
166
|
-
*
|
|
167
|
-
* const data = [
|
|
168
|
-
* { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
|
|
169
|
-
* ];
|
|
170
|
-
*
|
|
171
|
-
* <Table
|
|
172
|
-
* columns={columns}
|
|
173
|
-
* data={data}
|
|
174
|
-
* getRowKey={(row) => row.id}
|
|
175
|
-
* striped
|
|
176
|
-
* />
|
|
177
|
-
* ```
|
|
178
|
-
*
|
|
179
|
-
* @example
|
|
180
|
-
* With sorting and row click
|
|
181
|
-
* ```tsx
|
|
182
|
-
* <Table
|
|
183
|
-
* columns={columns}
|
|
184
|
-
* data={data}
|
|
185
|
-
* getRowKey={(row) => row.id}
|
|
186
|
-
* sortable
|
|
187
|
-
* onRowClick={(row) => console.log('Clicked:', row)}
|
|
188
|
-
* />
|
|
189
|
-
* ```
|
|
190
|
-
*
|
|
191
|
-
* @example
|
|
192
|
-
* With loading state and custom rendering
|
|
193
|
-
* ```tsx
|
|
194
|
-
* <Table
|
|
195
|
-
* columns={[
|
|
196
|
-
* { key: 'name', header: 'Name', sticky: 'left' },
|
|
197
|
-
* { key: 'status', header: 'Status', render: (row) => <Badge>{row.status}</Badge> }
|
|
198
|
-
* ]}
|
|
199
|
-
* data={data}
|
|
200
|
-
* getRowKey={(row) => row.id}
|
|
201
|
-
* loading={isLoading}
|
|
202
|
-
* maxHeight="400px"
|
|
203
|
-
* />
|
|
204
|
-
* ```
|
|
205
|
-
*/
|
|
206
|
-
export declare function Table<T = unknown>({ columns, data, getRowKey, striped, hoverable, bordered, size, caption, emptyMessage, loading, loadingContent, scrollable, maxHeight, onRowClick, isRowSelected, onRowSelect, sortable, sortConfig, onSortChange, className, containerClassName, ...props }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
207
|
-
export declare namespace Table {
|
|
208
|
-
var displayName: string;
|
|
209
|
-
}
|
|
152
|
+
declare const TableWithParsedClasses: (props: TableProps<unknown>) => import("react/jsx-runtime").JSX.Element;
|
|
210
153
|
declare const _default: React.FC<TableProps & React.RefAttributes<HTMLTableElement>>;
|
|
211
154
|
export default _default;
|
|
155
|
+
export { TableWithParsedClasses as Table };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Timeline.css';
|
|
3
|
+
export interface TimelineStep {
|
|
4
|
+
/** Label for the step */
|
|
5
|
+
label: string;
|
|
6
|
+
/** Optional description */
|
|
7
|
+
description?: string;
|
|
8
|
+
/** Optional custom icon */
|
|
9
|
+
icon?: React.ReactNode;
|
|
10
|
+
/** Optional click handler */
|
|
11
|
+
onClick?: () => void;
|
|
12
|
+
}
|
|
13
|
+
export interface TimelineProps {
|
|
14
|
+
/** Array of timeline steps */
|
|
15
|
+
steps: TimelineStep[] | string[];
|
|
16
|
+
/** Current active step index (0-based) */
|
|
17
|
+
currentStep: number;
|
|
18
|
+
/** Orientation of the timeline */
|
|
19
|
+
orientation?: 'horizontal' | 'vertical';
|
|
20
|
+
/** Visual variant */
|
|
21
|
+
variant?: 'default' | 'circle' | 'numbered' | 'simple';
|
|
22
|
+
/** Show checkmarks on completed steps */
|
|
23
|
+
showCheckmarks?: boolean;
|
|
24
|
+
/** Color scheme for active/completed steps */
|
|
25
|
+
color?: 'primary' | 'success' | 'info' | 'warning' | 'error';
|
|
26
|
+
/** Size of the timeline */
|
|
27
|
+
size?: 'sm' | 'md' | 'lg';
|
|
28
|
+
/** Additional class name */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** Inline styles */
|
|
31
|
+
style?: React.CSSProperties;
|
|
32
|
+
}
|
|
33
|
+
declare const Timeline: React.FC<TimelineProps>;
|
|
34
|
+
export default Timeline;
|
|
@@ -1,56 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ToastProps } from './types';
|
|
3
3
|
import './Toast.css';
|
|
4
|
-
|
|
5
|
-
* Toast component - Displays brief notifications to users
|
|
6
|
-
*
|
|
7
|
-
* A comprehensive toast notification component with auto-dismiss, progress bar,
|
|
8
|
-
* pause on hover, and various visual variants for different message types.
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* Basic success toast
|
|
12
|
-
* ```tsx
|
|
13
|
-
* <Toast variant="success">
|
|
14
|
-
* Your changes have been saved successfully!
|
|
15
|
-
* </Toast>
|
|
16
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* Toast with action button
|
|
20
|
-
* ```tsx
|
|
21
|
-
* <Toast
|
|
22
|
-
* variant="warning"
|
|
23
|
-
* action={<Button size="sm">Undo</Button>}
|
|
24
|
-
* autoClose={false}
|
|
25
|
-
* >
|
|
26
|
-
* Item moved to trash
|
|
27
|
-
* </Toast>
|
|
28
|
-
* ```
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* Custom toast with icon
|
|
32
|
-
* ```tsx
|
|
33
|
-
* <Toast
|
|
34
|
-
* variant="info"
|
|
35
|
-
* icon={<CustomIcon />}
|
|
36
|
-
* progressBar={false}
|
|
37
|
-
* >
|
|
38
|
-
* Update available for download
|
|
39
|
-
* </Toast>
|
|
40
|
-
* ```
|
|
41
|
-
*
|
|
42
|
-
* @example
|
|
43
|
-
* Toast with custom auto-close duration
|
|
44
|
-
* ```tsx
|
|
45
|
-
* <Toast
|
|
46
|
-
* variant="error"
|
|
47
|
-
* autoClose={10000}
|
|
48
|
-
* pauseOnHover={false}
|
|
49
|
-
* >
|
|
50
|
-
* Failed to connect to server
|
|
51
|
-
* </Toast>
|
|
52
|
-
* ```
|
|
53
|
-
*/
|
|
54
|
-
export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const ToastWithParsedClasses: (props: ToastProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
55
5
|
declare const _default: React.FC<ToastProps & React.RefAttributes<HTMLDivElement>>;
|
|
56
6
|
export default _default;
|
|
7
|
+
export { ToastWithParsedClasses as Toast };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export declare const SpinnerIcon: (props: {
|
|
2
|
+
size?: number;
|
|
3
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const CheckIcon: import("react-icons/lib").IconType;
|
|
5
|
+
export declare const CloseSmallIcon: (props: {
|
|
6
|
+
size?: number;
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const ChevronDownIcon: import("react-icons/lib").IconType;
|
|
9
|
+
export declare const PlusIcon: import("react-icons/lib").IconType;
|
|
10
|
+
export declare const MinusIcon: import("react-icons/lib").IconType;
|
|
11
|
+
export declare const BellIcon: import("react-icons/lib").IconType;
|
|
12
|
+
export declare const MenuIcon: import("react-icons/lib").IconType;
|
|
13
|
+
export declare const ChevronUpIcon: import("react-icons/lib").IconType;
|
|
14
|
+
export declare const ChevronLeftIcon: import("react-icons/lib").IconType;
|
|
15
|
+
export declare const ChevronRightIcon: import("react-icons/lib").IconType;
|
|
16
|
+
export declare const CheckCircleIcon: import("react-icons/lib").IconType;
|
|
17
|
+
export declare const ErrorIcon: import("react-icons/lib").IconType;
|
|
18
|
+
export declare const WarningIcon: import("react-icons/lib").IconType;
|
|
19
|
+
export declare const InfoIcon: import("react-icons/lib").IconType;
|
|
20
|
+
export declare const NeutralIcon: import("react-icons/lib").IconType;
|
|
21
|
+
export declare const DownloadIcon: import("react-icons/lib").IconType;
|
|
22
|
+
export declare const PackageIcon: import("react-icons/lib").IconType;
|
|
23
|
+
export declare const ShoppingBagIcon: import("react-icons/lib").IconType;
|
|
24
|
+
export declare const ShareIcon: import("react-icons/lib").IconType;
|
|
25
|
+
export declare const EyeIcon: import("react-icons/lib").IconType;
|
|
26
|
+
export declare const CreditCardIcon: import("react-icons/lib").IconType;
|
|
27
|
+
export declare const MessageIcon: import("react-icons/lib").IconType;
|
|
28
|
+
export declare const MapPinIcon: import("react-icons/lib").IconType;
|
|
29
|
+
export declare const PhoneIcon: import("react-icons/lib").IconType;
|
|
30
|
+
export declare const TruckIcon: import("react-icons/lib").IconType;
|
|
31
|
+
export declare const CloseIcon: import("react-icons/lib").IconType;
|
|
32
|
+
export declare const ReturnIcon: import("react-icons/lib").IconType;
|
|
33
|
+
export declare const RefreshIcon: import("react-icons/lib").IconType;
|
|
34
|
+
export declare const StarIcon: import("react-icons/lib").IconType;
|
|
35
|
+
export declare const SearchIcon: import("react-icons/lib").IconType;
|
|
36
|
+
export declare const UserIcon: import("react-icons/lib").IconType;
|
|
37
|
+
export declare const HomeIcon: import("react-icons/lib").IconType;
|
|
38
|
+
export declare const ShoppingCartIcon: import("react-icons/lib").IconType;
|
|
39
|
+
export declare const HeartIcon: import("react-icons/lib").IconType;
|
|
40
|
+
export declare const SettingsIcon: import("react-icons/lib").IconType;
|
|
41
|
+
export declare const HelpCircleIcon: import("react-icons/lib").IconType;
|
|
42
|
+
export declare const LogOutIcon: import("react-icons/lib").IconType;
|
|
43
|
+
export declare const TrendingUpIcon: import("react-icons/lib").IconType;
|
|
44
|
+
export declare const LayersIcon: import("react-icons/lib").IconType;
|
|
45
|
+
export declare const ServerIcon: import("react-icons/lib").IconType;
|
|
46
|
+
export declare const CodeIcon: import("react-icons/lib").IconType;
|
|
47
|
+
export declare const ZapIcon: import("react-icons/lib").IconType;
|
|
48
|
+
export declare const ChartBarIcon: import("react-icons/lib").IconType;
|
|
49
|
+
export declare const InboxIcon: import("react-icons/lib").IconType;
|
|
50
|
+
export declare const DocumentIcon: import("react-icons/lib").IconType;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './IconComponents';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -38,12 +38,14 @@ export { Divider } from './components/Divider';
|
|
|
38
38
|
export type { DividerProps } from './components/Divider';
|
|
39
39
|
export { Header } from './components/Header';
|
|
40
40
|
export type { HeaderProps, NotificationItem } from './components/Header';
|
|
41
|
-
export { SideMenu
|
|
41
|
+
export { SideMenu } from './components/SideMenu';
|
|
42
42
|
export type { SideMenuItemProps, SideMenuProps } from './components/SideMenu';
|
|
43
43
|
export { Table } from './components/Table';
|
|
44
44
|
export type { TableColumn, TableProps } from './components/Table';
|
|
45
45
|
export { Text } from './components/Text';
|
|
46
46
|
export type { TextProps } from './components/Text';
|
|
47
|
+
export { Timeline } from './components/Timeline';
|
|
48
|
+
export type { TimelineProps, TimelineStep } from './components/Timeline';
|
|
47
49
|
export { Flex } from './components/Flex';
|
|
48
50
|
export type { FlexProps } from './components/Flex';
|
|
49
51
|
export { Grid } from './components/Grid';
|
|
@@ -53,3 +55,19 @@ export type { Theme, ThemeProviderProps } from './theme';
|
|
|
53
55
|
export { tokens, generateCSSVariables, injectCSSVariables } from './theme';
|
|
54
56
|
export type { Tokens, ColorScale, ColorShade } from './theme';
|
|
55
57
|
export { useBodyScrollLock, useClickOutside, useDebounce, useEscapeKey, useFocusTrap, useId, } from './hooks';
|
|
58
|
+
export { InfoCard } from './widgets/InfoCard';
|
|
59
|
+
export type { InfoCardBaseProps, InfoCardMetricProps } from './widgets/InfoCard';
|
|
60
|
+
export { InfoText } from './widgets/InfoText';
|
|
61
|
+
export type { InfoTextBaseProps, InfoTextStatProps, InfoTextFeatureProps, InfoTextCompactProps, InfoTextVerticalProps, } from './widgets/InfoText';
|
|
62
|
+
export { ProductCard } from './widgets/ProductCard';
|
|
63
|
+
export type { ProductCardProps, ProductCardWideProps } from './widgets/ProductCard';
|
|
64
|
+
export { OrderCard } from './widgets/OrderCard';
|
|
65
|
+
export type { OrderCardProps, OrderItem } from './widgets/OrderCard';
|
|
66
|
+
export { InfoListCard } from './widgets/InfoListCard';
|
|
67
|
+
export type { InfoListCardProps, InfoListItem } from './widgets/InfoListCard';
|
|
68
|
+
export { OrderConfirmation } from './widgets/OrderConfirmation';
|
|
69
|
+
export type { OrderConfirmationProps, OrderConfirmationItem, OrderConfirmationAddress } from './widgets/OrderConfirmation';
|
|
70
|
+
export { OrderDetails } from './widgets/OrderDetails';
|
|
71
|
+
export type { OrderDetailsProps, OrderDetailsItem, OrderDetailsAddress } from './widgets/OrderDetails';
|
|
72
|
+
export { Header as HomeHeader } from './widgets/Header';
|
|
73
|
+
export type { NavigationItem, HeaderDesktopProps, HeaderMobileProps, HeaderResponsiveProps } from './widgets/Header';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Accordion } from '../../components/Accordion';
|
|
3
|
+
declare const meta: Meta<typeof Accordion>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const AllowMultiple: Story;
|
|
8
|
+
export declare const WithDefaultOpen: Story;
|
|
9
|
+
export declare const Bordered: Story;
|
|
10
|
+
export declare const Large: Story;
|
|
11
|
+
export declare const LeftChevron: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Alert } from '../../components/Alert';
|
|
3
|
+
declare const meta: Meta<typeof Alert>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Success: Story;
|
|
7
|
+
export declare const Error: Story;
|
|
8
|
+
export declare const Warning: Story;
|
|
9
|
+
export declare const Info: Story;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Avatar } from '../../components/Avatar';
|
|
3
|
+
declare const meta: Meta<typeof Avatar>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithFallback: Story;
|
|
8
|
+
export declare const Small: Story;
|
|
9
|
+
export declare const Large: Story;
|
|
10
|
+
export declare const Square: Story;
|
|
11
|
+
export declare const BrokenImage: Story;
|
|
12
|
+
export declare const LongFallbackText: Story;
|
|
13
|
+
export declare const AllSizes: Story;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Badge } from '../../components/Badge';
|
|
3
|
+
declare const meta: Meta<typeof Badge>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const Success: Story;
|
|
8
|
+
export declare const AllVariants: Story;
|