shru-design-system 0.1.12 → 0.3.0
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/README.md +95 -5
- package/dist/index.d.mts +812 -43
- package/dist/index.d.ts +812 -43
- package/dist/index.js +5884 -200
- package/dist/index.mjs +5576 -183
- package/package.json +63 -3
package/README.md
CHANGED
|
@@ -20,19 +20,89 @@ A React component library with atoms and molecules built on Radix UI and Tailwin
|
|
|
20
20
|
|
|
21
21
|
#### Atoms (`src/atoms/`)
|
|
22
22
|
Basic UI building blocks:
|
|
23
|
-
- **`
|
|
23
|
+
- **`Alert.tsx`** - Alert component for notifications
|
|
24
|
+
- **`Avatar.tsx`** - Avatar component with image and fallback
|
|
24
25
|
- **`Badge.tsx`** - Badge component for labels and tags
|
|
25
|
-
- **`
|
|
26
|
+
- **`Button.tsx`** - Button component with variants and sizes
|
|
27
|
+
- **`Checkbox.tsx`** - Checkbox input component
|
|
28
|
+
- **`Empty.tsx`** - Empty state component
|
|
29
|
+
- **`ErrorBoundary.tsx`** - Error boundary component
|
|
30
|
+
- **`Image.tsx`** - Image component with loading states
|
|
31
|
+
- **`InputOTP.tsx`** - OTP input component
|
|
32
|
+
- **`Kbd.tsx`** - Keyboard key display component
|
|
26
33
|
- **`Label.tsx`** - Form label component
|
|
27
|
-
- **`
|
|
34
|
+
- **`Progress.tsx`** - Progress bar component
|
|
35
|
+
- **`Radio.tsx`** - Radio button group component
|
|
28
36
|
- **`Separator.tsx`** - Horizontal/vertical divider component
|
|
29
|
-
- **`
|
|
37
|
+
- **`Skeleton.tsx`** - Skeleton loading component
|
|
38
|
+
- **`Slider.tsx`** - Slider input component
|
|
39
|
+
- **`Spinner.tsx`** - Loading spinner component
|
|
40
|
+
- **`Switch.tsx`** - Toggle switch component
|
|
41
|
+
- **`Text.tsx`** - Typography text component
|
|
42
|
+
- **`TextInput.tsx`** - Text input field component
|
|
43
|
+
- **`Textarea.tsx`** - Multi-line text input component
|
|
44
|
+
- **`Toggle.tsx`** - Toggle button component
|
|
45
|
+
- **`Upload.tsx`** - File upload component
|
|
30
46
|
|
|
31
47
|
#### Molecules (`src/molecules/`)
|
|
32
48
|
Composite components:
|
|
49
|
+
- **`Accordion.tsx`** - Collapsible accordion component
|
|
50
|
+
- **`AlertDialog.tsx`** - Alert dialog component
|
|
51
|
+
- **`Breadcrumb.tsx`** - Breadcrumb navigation component
|
|
52
|
+
- **`Calendar.tsx`** - Calendar date picker component
|
|
53
|
+
- **`Carousel.tsx`** - Image/content carousel component
|
|
54
|
+
- **`Chart.tsx`** - Chart component (Recharts wrapper)
|
|
55
|
+
- **`Collapsible.tsx`** - Collapsible content component
|
|
56
|
+
- **`Command.tsx`** - Command palette component
|
|
57
|
+
- **`ConfirmModal.tsx`** - Confirmation modal component
|
|
58
|
+
- **`ContextMenu.tsx`** - Right-click context menu
|
|
59
|
+
- **`CopyButton.tsx`** - Copy to clipboard button
|
|
60
|
+
- **`Drawer.tsx`** - Drawer/side panel component
|
|
61
|
+
- **`DropdownMenu.tsx`** - Dropdown menu component
|
|
62
|
+
- **`Field.tsx`** - Form field wrapper component
|
|
63
|
+
- **`Form.tsx`** - Form component (react-hook-form)
|
|
64
|
+
- **`FormInput.tsx`** - Form input with label and error
|
|
65
|
+
- **`FormModal.tsx`** - Modal with form integration
|
|
66
|
+
- **`HistoryControlButtons.tsx`** - Browser history controls
|
|
67
|
+
- **`HoverCard.tsx`** - Hover card component
|
|
68
|
+
- **`InfoBanner.tsx`** - Information banner component
|
|
69
|
+
- **`InlineEdit.tsx`** - Inline editing component
|
|
70
|
+
- **`InputGroup.tsx`** - Input with addons/buttons
|
|
71
|
+
- **`Menubar.tsx`** - Menu bar component
|
|
33
72
|
- **`Modal.tsx`** - Modal dialog component
|
|
73
|
+
- **`NavigationMenu.tsx`** - Navigation menu component
|
|
74
|
+
- **`Pagination.tsx`** - Pagination component
|
|
75
|
+
- **`Popover.tsx`** - Popover component
|
|
34
76
|
- **`Select.tsx`** - Dropdown select component
|
|
77
|
+
- **`Sheet.tsx`** - Sheet/side panel component
|
|
78
|
+
- **`Snackbar.tsx`** - Snackbar notification component
|
|
79
|
+
- **`StatusText.tsx`** - Status text with icons
|
|
80
|
+
- **`Stepper.tsx`** - Step indicator component
|
|
81
|
+
- **`Tabs.tsx`** - Tabs component
|
|
82
|
+
- **`Toast.tsx`** - Toast notification component
|
|
83
|
+
- **`Toaster.tsx`** - Toast provider component
|
|
84
|
+
- **`ToggleGroup.tsx`** - Toggle group component
|
|
35
85
|
- **`Tooltip.tsx`** - Tooltip component
|
|
86
|
+
- **`TriggerModal.tsx`** - Modal with trigger component
|
|
87
|
+
|
|
88
|
+
#### Layout (`src/layout/`)
|
|
89
|
+
Layout and container components:
|
|
90
|
+
- **`AspectRatio.tsx`** - Aspect ratio container
|
|
91
|
+
- **`Box.tsx`** - Generic box container
|
|
92
|
+
- **`Card.tsx`** - Card container component
|
|
93
|
+
- **`CollapsiblePanel.tsx`** - Collapsible panel component
|
|
94
|
+
- **`Container.tsx`** - Responsive container component
|
|
95
|
+
- **`EmptyScreen.tsx`** - Empty screen component
|
|
96
|
+
- **`Footer.tsx`** - Footer component
|
|
97
|
+
- **`Grid.tsx`** - Grid layout component
|
|
98
|
+
- **`Header.tsx`** - Header component
|
|
99
|
+
- **`List.tsx`** - List component
|
|
100
|
+
- **`Resizable.tsx`** - Resizable panels component
|
|
101
|
+
- **`ResizeContainer.tsx`** - Resizable container wrapper
|
|
102
|
+
- **`ScrollArea.tsx`** - Scrollable area component
|
|
103
|
+
- **`Sidebar.tsx`** - Sidebar navigation component
|
|
104
|
+
- **`Stack.tsx`** - Stack layout component
|
|
105
|
+
- **`Table.tsx`** - Table component
|
|
36
106
|
|
|
37
107
|
#### Theme System (`src/themes/`)
|
|
38
108
|
- **`themeConfig.ts`** - Theme configuration and category definitions
|
|
@@ -107,9 +177,29 @@ npx shru-design-system-init # copies tokens into public/tokens if you want sta
|
|
|
107
177
|
|
|
108
178
|
Import components:
|
|
109
179
|
```tsx
|
|
110
|
-
import {
|
|
180
|
+
import {
|
|
181
|
+
Button,
|
|
182
|
+
Modal,
|
|
183
|
+
ThemeToggle,
|
|
184
|
+
Alert,
|
|
185
|
+
Avatar,
|
|
186
|
+
Accordion,
|
|
187
|
+
Calendar,
|
|
188
|
+
Carousel,
|
|
189
|
+
Form,
|
|
190
|
+
Field,
|
|
191
|
+
// ... and many more
|
|
192
|
+
registerThemeFromFile
|
|
193
|
+
} from 'shru-design-system'
|
|
111
194
|
```
|
|
112
195
|
|
|
196
|
+
### Available Components
|
|
197
|
+
|
|
198
|
+
The library includes 67+ components organized into:
|
|
199
|
+
- **Atoms** (23): Basic UI elements like Button, Input, Badge, etc.
|
|
200
|
+
- **Molecules** (35): Composite components like Modal, Form, Calendar, etc.
|
|
201
|
+
- **Layout** (16): Layout components like Grid, Stack, Sidebar, etc.
|
|
202
|
+
|
|
113
203
|
Registering themes:
|
|
114
204
|
- Add a custom theme file at your token base, e.g. `/tokens/themes/custom/my-brand.json`.
|
|
115
205
|
- Call at runtime (after page load):
|