@sandurtech/sandui 0.0.2 → 0.1.1
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 +23 -5
- package/dist/index.d.ts +1 -284
- package/dist/sandui.js +1536 -902
- package/dist/sandui.umd.js +2 -2
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
- 📘 **TypeScript First**: Full IntelliSense support with comprehensive JSDoc documentation.
|
|
21
21
|
- 🎨 **Modern Aesthetics**: Premium, high-performance UI primitives tailored for SaaS and dashboards.
|
|
22
22
|
- 📱 **Fully Responsive**: Mobile-optimized layouts and documentation.
|
|
23
|
+
- 🔌 **Composable API**: Declarative component composition with compound components.
|
|
24
|
+
- 🎯 **Icon System**: Custom icon provider supporting Lucide, Radix, and other libraries.
|
|
23
25
|
|
|
24
26
|
## 🚀 Quick Start
|
|
25
27
|
|
|
@@ -29,6 +31,20 @@
|
|
|
29
31
|
npm install @sandurtech/sandui
|
|
30
32
|
```
|
|
31
33
|
|
|
34
|
+
### Icon Dependency
|
|
35
|
+
|
|
36
|
+
SandUI uses **Google Material Symbols (Rounded)** for all internal icons. To ensure icons render correctly, you must include the following link in your `index.html` or import it in your CSS:
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Or in your CSS:
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
|
|
46
|
+
```
|
|
47
|
+
|
|
32
48
|
### Usage
|
|
33
49
|
|
|
34
50
|
1. **Wrap your app** with the `SandThemeProvider` to enable styling and tokens.
|
|
@@ -59,13 +75,15 @@ SandUI provides a growing set of modular components categorized for efficiency:
|
|
|
59
75
|
|
|
60
76
|
| Category | Primitives |
|
|
61
77
|
| :--- | :--- |
|
|
62
|
-
| **Foundation** | `SandThemeProvider`, `SandBox`, `SandStack`, `SandGrid` |
|
|
78
|
+
| **Foundation** | `SandThemeProvider`, `SandIconProvider`, `SandBox`, `SandStack`, `SandGrid` |
|
|
79
|
+
| **Layout** | `SandContainer`, `SandHeader`, `SandAppLayout`, `SandMicroserviceLayout` |
|
|
63
80
|
| **Typography** | `SandTitle`, `SandText`, `SandCode`, `SandKBD` |
|
|
64
|
-
| **Form Controls** | `SandInput`, `SandInputGroup`, `SandCheckbox`, `SandRadio`, `SandSwitch` |
|
|
65
|
-
| **Data Display** | `SandTable`, `SandTabs`, `SandAccordion`, `SandCard`, `SandBadge` |
|
|
66
|
-
| **Feedback** | `SandAlert`, `SandToast`, `SandSnackbar`, `SandLoader`, `SandProgress` |
|
|
81
|
+
| **Form Controls** | `SandInput`, `SandInputGroup`, `SandCheckbox`, `SandRadio`, `SandSwitch`, `SandChoiceGroup` |
|
|
82
|
+
| **Data Display** | `SandTable`, `SandTabs`, `SandAccordion`, `SandCard`, `SandBadge`, `SandDivider` |
|
|
83
|
+
| **Feedback** | `SandAlert`, `SandToast`, `SandSnackbar`, `SandLoader`, `SandProgress`, `SandSkeleton` |
|
|
67
84
|
| **Navigation** | `SandNavbar`, `SandDrawer`, `SandBreadcrumbs`, `SandPagination` |
|
|
68
|
-
| **Overlays** | `SandModal`, `
|
|
85
|
+
| **Overlays** | `SandModal`, `SandDialog`, `SandTooltip` |
|
|
86
|
+
| **Icons** | `SandIcon` (with custom provider support) |
|
|
69
87
|
|
|
70
88
|
## 📖 Documentation
|
|
71
89
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,284 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { SandAccordionItem } from './components/Accordion/Accordion';
|
|
3
|
-
import { SandAccordionProps } from './components/Accordion/Accordion';
|
|
4
|
-
import { SandAlert } from './components/Alert/Alert';
|
|
5
|
-
import { SandAlertProps } from './components/Alert/Alert';
|
|
6
|
-
import { SandBadge } from './components/Badge/Badge';
|
|
7
|
-
import { SandBadgeProps } from './components/Badge/Badge';
|
|
8
|
-
import { SandBox } from './components/Box/Box';
|
|
9
|
-
import { SandBoxOwnProps as SandBoxProps } from './components/Box/Box';
|
|
10
|
-
import { SandBreadcrumbItem } from './components/Breadcrumbs/Breadcrumbs';
|
|
11
|
-
import { SandBreadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
|
|
12
|
-
import { SandBreadcrumbsProps } from './components/Breadcrumbs/Breadcrumbs';
|
|
13
|
-
import { SandButton } from './components/Button/Button';
|
|
14
|
-
import { SandButtonProps } from './components/Button/Button';
|
|
15
|
-
import { SandCard } from './components/Card/Card';
|
|
16
|
-
import { SandCardProps } from './components/Card/Card';
|
|
17
|
-
import { SandCheckbox } from './components/Selection/Selection';
|
|
18
|
-
import { SandChoiceBaseProps } from './components/Selection/Selection';
|
|
19
|
-
import { SandChoiceGroup } from './components/Selection/Selection';
|
|
20
|
-
import { SandChoiceGroupProps } from './components/Selection/Selection';
|
|
21
|
-
import { SandCode } from './components/Typography/Typography';
|
|
22
|
-
import { SandCodeBlock } from './components/CodeBlock/CodeBlock';
|
|
23
|
-
import { SandCodeBlockProps } from './components/CodeBlock/CodeBlock';
|
|
24
|
-
import { SandCodeOwnProps as SandCodeProps } from './components/Typography/Typography';
|
|
25
|
-
import { SandCodeTabs } from './components/CodeBlock/CodeBlock';
|
|
26
|
-
import { SandCodeTabsProps } from './components/CodeBlock/CodeBlock';
|
|
27
|
-
import { SandContainer } from './components/Layout/Layout';
|
|
28
|
-
import { SandContainerProps } from './components/Layout/Layout';
|
|
29
|
-
import { SandDivider } from './components/Divider/Divider';
|
|
30
|
-
import { SandDividerProps } from './components/Divider/Divider';
|
|
31
|
-
import { SandDrawer } from './components/Navbar/Navbar';
|
|
32
|
-
import { SandDrawerProps } from './components/Navbar/Navbar';
|
|
33
|
-
import { SandFeedbackProps } from './components/Feedback/Feedback';
|
|
34
|
-
import { SandFormGroup } from './components/Input/Input';
|
|
35
|
-
import { SandFormGroupProps } from './components/Input/Input';
|
|
36
|
-
import { SandGrid } from './components/Grid';
|
|
37
|
-
import { SandGridItemProps } from './components/Grid';
|
|
38
|
-
import { SandGridProps } from './components/Grid';
|
|
39
|
-
import { SandHeader } from './components/Layout/Layout';
|
|
40
|
-
import { SandHeaderProps } from './components/Layout/Layout';
|
|
41
|
-
import { SandIcon } from './components/Icon/Icon';
|
|
42
|
-
import { SandIconProps } from './components/Icon/Icon';
|
|
43
|
-
import { SandInput } from './components/Input/Input';
|
|
44
|
-
import { SandInputGroup } from './components/Input/Input';
|
|
45
|
-
import { SandInputGroupProps } from './components/Input/Input';
|
|
46
|
-
import { SandInputProps } from './components/Input/Input';
|
|
47
|
-
import { SandKBD } from './components/Kbd/Kbd';
|
|
48
|
-
import { SandKBDProps } from './components/Kbd/Kbd';
|
|
49
|
-
import { SandLoader } from './components/Loader/Loader';
|
|
50
|
-
import { SandLoaderProps } from './components/Loader/Loader';
|
|
51
|
-
import { SandModal } from './components/Modal/Modal';
|
|
52
|
-
import { SandModalBodyProps } from './components/Modal/Modal';
|
|
53
|
-
import { SandModalDescriptionProps } from './components/Modal/Modal';
|
|
54
|
-
import { SandModalFooterProps } from './components/Modal/Modal';
|
|
55
|
-
import { SandModalHeaderProps } from './components/Modal/Modal';
|
|
56
|
-
import { SandModalProps } from './components/Modal/Modal';
|
|
57
|
-
import { SandModalTitleProps } from './components/Modal/Modal';
|
|
58
|
-
import { SandNavbar } from './components/Navbar/Navbar';
|
|
59
|
-
import { SandNavbarItem } from './components/Navbar/Navbar';
|
|
60
|
-
import { SandNavbarProps } from './components/Navbar/Navbar';
|
|
61
|
-
import { SandPagination } from './components/Pagination/Pagination';
|
|
62
|
-
import { SandPaginationProps } from './components/Pagination/Pagination';
|
|
63
|
-
import { SandProgress } from './components/Progress/Progress';
|
|
64
|
-
import { SandProgressProps } from './components/Progress/Progress';
|
|
65
|
-
import { SandRadio } from './components/Selection/Selection';
|
|
66
|
-
import { SandResultPanel } from './components/Layout/Layout';
|
|
67
|
-
import { SandResultPanelProps } from './components/Layout/Layout';
|
|
68
|
-
import { SandSkeleton } from './components/Loader/Loader';
|
|
69
|
-
import { SandSkeletonProps } from './components/Loader/Loader';
|
|
70
|
-
import { SandSnackbar } from './components/Feedback/Feedback';
|
|
71
|
-
import { SandStack } from './components/Stack/Stack';
|
|
72
|
-
import { SandStackOwnProps as SandStackProps } from './components/Stack/Stack';
|
|
73
|
-
import { SandSwitch } from './components/Selection/Selection';
|
|
74
|
-
import { SandTabItem } from './components/Tabs/Tabs';
|
|
75
|
-
import { SandTable } from './components/Table/Table';
|
|
76
|
-
import { SandTableProps } from './components/Table/Table';
|
|
77
|
-
import { SandTabs } from './components/Tabs/Tabs';
|
|
78
|
-
import { SandTabsProps } from './components/Tabs/Tabs';
|
|
79
|
-
import { SandText } from './components/Typography/Typography';
|
|
80
|
-
import { SandTextOwnProps as SandTextProps } from './components/Typography/Typography';
|
|
81
|
-
import { SandThemeContextValue } from './components/ThemeProvider/ThemeProvider';
|
|
82
|
-
import { SandThemeProvider } from './components/ThemeProvider/ThemeProvider';
|
|
83
|
-
import { SandThemeProviderProps } from './components/ThemeProvider/ThemeProvider';
|
|
84
|
-
import { SandThemeTokens } from './components/ThemeProvider/ThemeProvider';
|
|
85
|
-
import { SandTitle } from './components/Typography/Typography';
|
|
86
|
-
import { SandTitleOwnProps as SandTitleProps } from './components/Typography/Typography';
|
|
87
|
-
import { SandToast } from './components/Feedback/Feedback';
|
|
88
|
-
import { SandToolLayout } from './components/Layout/Layout';
|
|
89
|
-
import { SandToolLayoutProps } from './components/Layout/Layout';
|
|
90
|
-
import { SandToolPanel } from './components/Layout/Layout';
|
|
91
|
-
import { SandToolPanelProps } from './components/Layout/Layout';
|
|
92
|
-
import { SandTooltip } from './components/Tooltip/Tooltip';
|
|
93
|
-
import { SandTooltipProps } from './components/Tooltip/Tooltip';
|
|
94
|
-
import { useSandTheme } from './components/ThemeProvider/ThemeProvider';
|
|
95
|
-
|
|
96
|
-
export { SandAccordion }
|
|
97
|
-
|
|
98
|
-
export { SandAccordionItem }
|
|
99
|
-
|
|
100
|
-
export { SandAccordionProps }
|
|
101
|
-
|
|
102
|
-
export { SandAlert }
|
|
103
|
-
|
|
104
|
-
export { SandAlertProps }
|
|
105
|
-
|
|
106
|
-
export { SandBadge }
|
|
107
|
-
|
|
108
|
-
export { SandBadgeProps }
|
|
109
|
-
|
|
110
|
-
export { SandBox }
|
|
111
|
-
|
|
112
|
-
export { SandBoxProps }
|
|
113
|
-
|
|
114
|
-
export { SandBreadcrumbItem }
|
|
115
|
-
|
|
116
|
-
export { SandBreadcrumbs }
|
|
117
|
-
|
|
118
|
-
export { SandBreadcrumbsProps }
|
|
119
|
-
|
|
120
|
-
export { SandButton }
|
|
121
|
-
|
|
122
|
-
export { SandButtonProps }
|
|
123
|
-
|
|
124
|
-
export { SandCard }
|
|
125
|
-
|
|
126
|
-
export { SandCardProps }
|
|
127
|
-
|
|
128
|
-
export { SandCheckbox }
|
|
129
|
-
|
|
130
|
-
export { SandChoiceBaseProps }
|
|
131
|
-
|
|
132
|
-
export { SandChoiceGroup }
|
|
133
|
-
|
|
134
|
-
export { SandChoiceGroupProps }
|
|
135
|
-
|
|
136
|
-
export { SandCode }
|
|
137
|
-
|
|
138
|
-
export { SandCodeBlock }
|
|
139
|
-
|
|
140
|
-
export { SandCodeBlockProps }
|
|
141
|
-
|
|
142
|
-
export { SandCodeProps }
|
|
143
|
-
|
|
144
|
-
export { SandCodeTabs }
|
|
145
|
-
|
|
146
|
-
export { SandCodeTabsProps }
|
|
147
|
-
|
|
148
|
-
export { SandContainer }
|
|
149
|
-
|
|
150
|
-
export { SandContainerProps }
|
|
151
|
-
|
|
152
|
-
export { SandDivider }
|
|
153
|
-
|
|
154
|
-
export { SandDividerProps }
|
|
155
|
-
|
|
156
|
-
export { SandDrawer }
|
|
157
|
-
|
|
158
|
-
export { SandDrawerProps }
|
|
159
|
-
|
|
160
|
-
export { SandFeedbackProps }
|
|
161
|
-
|
|
162
|
-
export { SandFormGroup }
|
|
163
|
-
|
|
164
|
-
export { SandFormGroupProps }
|
|
165
|
-
|
|
166
|
-
export { SandGrid }
|
|
167
|
-
|
|
168
|
-
export { SandGridItemProps }
|
|
169
|
-
|
|
170
|
-
export { SandGridProps }
|
|
171
|
-
|
|
172
|
-
export { SandHeader }
|
|
173
|
-
|
|
174
|
-
export { SandHeaderProps }
|
|
175
|
-
|
|
176
|
-
export { SandIcon }
|
|
177
|
-
|
|
178
|
-
export { SandIconProps }
|
|
179
|
-
|
|
180
|
-
export { SandInput }
|
|
181
|
-
|
|
182
|
-
export { SandInputGroup }
|
|
183
|
-
|
|
184
|
-
export { SandInputGroupProps }
|
|
185
|
-
|
|
186
|
-
export { SandInputProps }
|
|
187
|
-
|
|
188
|
-
export { SandKBD }
|
|
189
|
-
|
|
190
|
-
export { SandKBDProps }
|
|
191
|
-
|
|
192
|
-
export { SandLoader }
|
|
193
|
-
|
|
194
|
-
export { SandLoaderProps }
|
|
195
|
-
|
|
196
|
-
export { SandModal }
|
|
197
|
-
|
|
198
|
-
export { SandModalBodyProps }
|
|
199
|
-
|
|
200
|
-
export { SandModalDescriptionProps }
|
|
201
|
-
|
|
202
|
-
export { SandModalFooterProps }
|
|
203
|
-
|
|
204
|
-
export { SandModalHeaderProps }
|
|
205
|
-
|
|
206
|
-
export { SandModalProps }
|
|
207
|
-
|
|
208
|
-
export { SandModalTitleProps }
|
|
209
|
-
|
|
210
|
-
export { SandNavbar }
|
|
211
|
-
|
|
212
|
-
export { SandNavbarItem }
|
|
213
|
-
|
|
214
|
-
export { SandNavbarProps }
|
|
215
|
-
|
|
216
|
-
export { SandPagination }
|
|
217
|
-
|
|
218
|
-
export { SandPaginationProps }
|
|
219
|
-
|
|
220
|
-
export { SandProgress }
|
|
221
|
-
|
|
222
|
-
export { SandProgressProps }
|
|
223
|
-
|
|
224
|
-
export { SandRadio }
|
|
225
|
-
|
|
226
|
-
export { SandResultPanel }
|
|
227
|
-
|
|
228
|
-
export { SandResultPanelProps }
|
|
229
|
-
|
|
230
|
-
export { SandSkeleton }
|
|
231
|
-
|
|
232
|
-
export { SandSkeletonProps }
|
|
233
|
-
|
|
234
|
-
export { SandSnackbar }
|
|
235
|
-
|
|
236
|
-
export { SandStack }
|
|
237
|
-
|
|
238
|
-
export { SandStackProps }
|
|
239
|
-
|
|
240
|
-
export { SandSwitch }
|
|
241
|
-
|
|
242
|
-
export { SandTabItem }
|
|
243
|
-
|
|
244
|
-
export { SandTable }
|
|
245
|
-
|
|
246
|
-
export { SandTableProps }
|
|
247
|
-
|
|
248
|
-
export { SandTabs }
|
|
249
|
-
|
|
250
|
-
export { SandTabsProps }
|
|
251
|
-
|
|
252
|
-
export { SandText }
|
|
253
|
-
|
|
254
|
-
export { SandTextProps }
|
|
255
|
-
|
|
256
|
-
export { SandThemeContextValue }
|
|
257
|
-
|
|
258
|
-
export { SandThemeProvider }
|
|
259
|
-
|
|
260
|
-
export { SandThemeProviderProps }
|
|
261
|
-
|
|
262
|
-
export { SandThemeTokens }
|
|
263
|
-
|
|
264
|
-
export { SandTitle }
|
|
265
|
-
|
|
266
|
-
export { SandTitleProps }
|
|
267
|
-
|
|
268
|
-
export { SandToast }
|
|
269
|
-
|
|
270
|
-
export { SandToolLayout }
|
|
271
|
-
|
|
272
|
-
export { SandToolLayoutProps }
|
|
273
|
-
|
|
274
|
-
export { SandToolPanel }
|
|
275
|
-
|
|
276
|
-
export { SandToolPanelProps }
|
|
277
|
-
|
|
278
|
-
export { SandTooltip }
|
|
279
|
-
|
|
280
|
-
export { SandTooltipProps }
|
|
281
|
-
|
|
282
|
-
export { useSandTheme }
|
|
283
|
-
|
|
284
|
-
export { }
|
|
1
|
+
export {}
|