sevatech-library 1.0.4 → 1.0.5
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 +25 -25
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# SevaTech Library
|
|
2
2
|
|
|
3
|
-
[](https://badge.fury.io/js/sevatech-library)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
[](https://www.typescriptlang.org/)
|
|
6
6
|
|
|
@@ -46,7 +46,7 @@ Ensure you have the following peer dependencies installed:
|
|
|
46
46
|
|
|
47
47
|
```tsx
|
|
48
48
|
import React, { useState } from 'react';
|
|
49
|
-
import { ButtonComponent, TextFieldComponent, ModalComponent } from '
|
|
49
|
+
import { ButtonComponent, TextFieldComponent, ModalComponent } from 'sevatech-library';
|
|
50
50
|
|
|
51
51
|
function App() {
|
|
52
52
|
const [email, setEmail] = useState('');
|
|
@@ -98,7 +98,7 @@ export default App;
|
|
|
98
98
|
A versatile button component supporting multiple variants, colors, sizes, and icon integration.
|
|
99
99
|
|
|
100
100
|
```tsx
|
|
101
|
-
import { ButtonComponent } from '
|
|
101
|
+
import { ButtonComponent } from 'sevatech-library';
|
|
102
102
|
|
|
103
103
|
// Basic usage
|
|
104
104
|
<ButtonComponent variant="solid" color="brand" onClick={handleClick}>
|
|
@@ -125,7 +125,7 @@ import { ButtonComponent } from 'SevaTech-library';
|
|
|
125
125
|
Advanced input field with validation states, icons, and accessibility features.
|
|
126
126
|
|
|
127
127
|
```tsx
|
|
128
|
-
import { TextFieldComponent } from '
|
|
128
|
+
import { TextFieldComponent } from 'sevatech-library';
|
|
129
129
|
|
|
130
130
|
const [value, setValue] = useState('');
|
|
131
131
|
|
|
@@ -159,7 +159,7 @@ const [value, setValue] = useState('');
|
|
|
159
159
|
Multi-line text input with customizable rows and validation.
|
|
160
160
|
|
|
161
161
|
```tsx
|
|
162
|
-
import { TextAreaComponent } from '
|
|
162
|
+
import { TextAreaComponent } from 'sevatech-library';
|
|
163
163
|
|
|
164
164
|
const [description, setDescription] = useState('');
|
|
165
165
|
|
|
@@ -178,7 +178,7 @@ const [description, setDescription] = useState('');
|
|
|
178
178
|
Custom-styled checkbox with label support.
|
|
179
179
|
|
|
180
180
|
```tsx
|
|
181
|
-
import { CheckboxComponent } from '
|
|
181
|
+
import { CheckboxComponent } from 'sevatech-library';
|
|
182
182
|
|
|
183
183
|
const [agreed, setAgreed] = useState(false);
|
|
184
184
|
|
|
@@ -194,7 +194,7 @@ const [agreed, setAgreed] = useState(false);
|
|
|
194
194
|
Toggle switch with smooth animations.
|
|
195
195
|
|
|
196
196
|
```tsx
|
|
197
|
-
import { SwitchComponent } from '
|
|
197
|
+
import { SwitchComponent } from 'sevatech-library';
|
|
198
198
|
|
|
199
199
|
const [notifications, setNotifications] = useState(true);
|
|
200
200
|
|
|
@@ -210,7 +210,7 @@ const [notifications, setNotifications] = useState(true);
|
|
|
210
210
|
Select dropdown with search and multi-select capabilities.
|
|
211
211
|
|
|
212
212
|
```tsx
|
|
213
|
-
import { DropdownFieldComponent } from '
|
|
213
|
+
import { DropdownFieldComponent } from 'sevatech-library';
|
|
214
214
|
|
|
215
215
|
const options = [
|
|
216
216
|
{ label: 'Option 1', value: '1' },
|
|
@@ -232,7 +232,7 @@ const options = [
|
|
|
232
232
|
Debounced search input with clear functionality.
|
|
233
233
|
|
|
234
234
|
```tsx
|
|
235
|
-
import { SearchFieldComponent } from '
|
|
235
|
+
import { SearchFieldComponent } from 'sevatech-library';
|
|
236
236
|
|
|
237
237
|
const [searchTerm, setSearchTerm] = useState('');
|
|
238
238
|
|
|
@@ -250,7 +250,7 @@ const [searchTerm, setSearchTerm] = useState('');
|
|
|
250
250
|
Date picker with customizable format and locale support.
|
|
251
251
|
|
|
252
252
|
```tsx
|
|
253
|
-
import { DateFieldComponent } from '
|
|
253
|
+
import { DateFieldComponent } from 'sevatech-library';
|
|
254
254
|
import dayjs from 'dayjs';
|
|
255
255
|
|
|
256
256
|
const [selectedDate, setSelectedDate] = useState(dayjs());
|
|
@@ -268,7 +268,7 @@ const [selectedDate, setSelectedDate] = useState(dayjs());
|
|
|
268
268
|
Currency input with automatic formatting.
|
|
269
269
|
|
|
270
270
|
```tsx
|
|
271
|
-
import { MoneyFieldComponent } from '
|
|
271
|
+
import { MoneyFieldComponent } from 'sevatech-library';
|
|
272
272
|
|
|
273
273
|
const [price, setPrice] = useState('');
|
|
274
274
|
|
|
@@ -288,7 +288,7 @@ const [price, setPrice] = useState('');
|
|
|
288
288
|
Flexible modal dialog with customizable actions and content.
|
|
289
289
|
|
|
290
290
|
```tsx
|
|
291
|
-
import { ModalComponent } from '
|
|
291
|
+
import { ModalComponent } from 'sevatech-library';
|
|
292
292
|
|
|
293
293
|
<ModalComponent
|
|
294
294
|
open={isOpen}
|
|
@@ -310,7 +310,7 @@ import { ModalComponent } from 'SevaTech-library';
|
|
|
310
310
|
Animated tabbed interface with icon support.
|
|
311
311
|
|
|
312
312
|
```tsx
|
|
313
|
-
import { TabsComponent } from '
|
|
313
|
+
import { TabsComponent } from 'sevatech-library';
|
|
314
314
|
|
|
315
315
|
const tabs = [
|
|
316
316
|
{ id: 'tab1', name: 'Home', icon: 'home' },
|
|
@@ -330,7 +330,7 @@ const tabs = [
|
|
|
330
330
|
Responsive grid system based on Material-UI's Grid.
|
|
331
331
|
|
|
332
332
|
```tsx
|
|
333
|
-
import { Grid } from '
|
|
333
|
+
import { Grid } from 'sevatech-library';
|
|
334
334
|
|
|
335
335
|
<Grid container spacing={2}>
|
|
336
336
|
<Grid item xs={12} sm={6} md={4}>
|
|
@@ -352,7 +352,7 @@ import { Grid } from 'SevaTech-library';
|
|
|
352
352
|
User avatar with image and fallback support.
|
|
353
353
|
|
|
354
354
|
```tsx
|
|
355
|
-
import { AvatarComponent } from '
|
|
355
|
+
import { AvatarComponent } from 'sevatech-library';
|
|
356
356
|
|
|
357
357
|
<AvatarComponent
|
|
358
358
|
url="https://example.com/avatar.jpg"
|
|
@@ -372,7 +372,7 @@ import { AvatarComponent } from 'SevaTech-library';
|
|
|
372
372
|
Grouped avatars with overflow indicators.
|
|
373
373
|
|
|
374
374
|
```tsx
|
|
375
|
-
import { AvatarGroupComponent } from '
|
|
375
|
+
import { AvatarGroupComponent } from 'sevatech-library';
|
|
376
376
|
|
|
377
377
|
const avatars = [
|
|
378
378
|
{ id: '1', url: 'avatar1.jpg', name: 'User 1' },
|
|
@@ -391,7 +391,7 @@ const avatars = [
|
|
|
391
391
|
Compact information display with optional delete action.
|
|
392
392
|
|
|
393
393
|
```tsx
|
|
394
|
-
import { ChipComponent } from '
|
|
394
|
+
import { ChipComponent } from 'sevatech-library';
|
|
395
395
|
|
|
396
396
|
<ChipComponent label="New" color="success" />
|
|
397
397
|
<ChipComponent label="Important" color="error" variant="outlined" />
|
|
@@ -406,7 +406,7 @@ import { ChipComponent } from 'SevaTech-library';
|
|
|
406
406
|
Text styling with semantic variants.
|
|
407
407
|
|
|
408
408
|
```tsx
|
|
409
|
-
import { TypographyComponent } from '
|
|
409
|
+
import { TypographyComponent } from 'sevatech-library';
|
|
410
410
|
|
|
411
411
|
<TypographyComponent variant="h1">Main Heading</TypographyComponent>
|
|
412
412
|
<TypographyComponent variant="body1">
|
|
@@ -424,7 +424,7 @@ import { TypographyComponent } from 'SevaTech-library';
|
|
|
424
424
|
Breadcrumb navigation with customizable separators.
|
|
425
425
|
|
|
426
426
|
```tsx
|
|
427
|
-
import { BreadCumbsComponent } from '
|
|
427
|
+
import { BreadCumbsComponent } from 'sevatech-library';
|
|
428
428
|
|
|
429
429
|
const breadcrumbs = [
|
|
430
430
|
{ label: 'Home', href: '/' },
|
|
@@ -440,7 +440,7 @@ const breadcrumbs = [
|
|
|
440
440
|
Styled navigation link with external link support.
|
|
441
441
|
|
|
442
442
|
```tsx
|
|
443
|
-
import { LinkElement } from '
|
|
443
|
+
import { LinkElement } from 'sevatech-library';
|
|
444
444
|
|
|
445
445
|
<LinkElement href="/dashboard">Go to Dashboard</LinkElement>
|
|
446
446
|
<LinkElement href="https://example.com" external>
|
|
@@ -455,7 +455,7 @@ import { LinkElement } from 'SevaTech-library';
|
|
|
455
455
|
Material Icons integration with size and color options.
|
|
456
456
|
|
|
457
457
|
```tsx
|
|
458
|
-
import { IconElement } from '
|
|
458
|
+
import { IconElement } from 'sevatech-library';
|
|
459
459
|
|
|
460
460
|
<IconElement icon="home" />
|
|
461
461
|
<IconElement icon="search" size="large" />
|
|
@@ -467,7 +467,7 @@ import { IconElement } from 'SevaTech-library';
|
|
|
467
467
|
Optimized image component with lazy loading and fallbacks.
|
|
468
468
|
|
|
469
469
|
```tsx
|
|
470
|
-
import { ImageElement } from '
|
|
470
|
+
import { ImageElement } from 'sevatech-library';
|
|
471
471
|
|
|
472
472
|
<ImageElement
|
|
473
473
|
url="https://example.com/image.jpg"
|
|
@@ -481,7 +481,7 @@ import { ImageElement } from 'SevaTech-library';
|
|
|
481
481
|
File upload with drag-and-drop and progress tracking.
|
|
482
482
|
|
|
483
483
|
```tsx
|
|
484
|
-
import { UploaderComponent } from '
|
|
484
|
+
import { UploaderComponent } from 'sevatech-library';
|
|
485
485
|
|
|
486
486
|
<UploaderComponent
|
|
487
487
|
onFilesSelected={(files) => {
|
|
@@ -548,7 +548,7 @@ SevaTech Library uses Material-UI's powerful theming system. Customize the theme
|
|
|
548
548
|
```tsx
|
|
549
549
|
import React from 'react';
|
|
550
550
|
import { ThemeProvider, createTheme } from '@mui/material';
|
|
551
|
-
import { ButtonComponent } from '
|
|
551
|
+
import { ButtonComponent } from 'sevatech-library';
|
|
552
552
|
|
|
553
553
|
const theme = createTheme({
|
|
554
554
|
palette: {
|
|
@@ -647,7 +647,7 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
|
|
|
647
647
|
## 📞 Support
|
|
648
648
|
|
|
649
649
|
- 📧 Email:
|
|
650
|
-
- 🐛 Issues: [GitHub Issues](https://github.com/your-username/
|
|
650
|
+
- 🐛 Issues: [GitHub Issues](https://github.com/your-username/sevatech-library/issues)
|
|
651
651
|
- 📚 Documentation: [Full Documentation](https://github.com/golden-lotus-core-web/sevatech-library)
|
|
652
652
|
|
|
653
653
|
---
|
package/package.json
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sevatech-library",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React component library by SevaTech",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
7
7
|
"module": "dist/esm/index.js",
|
|
8
8
|
"types": "dist/types/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
|
-
"dist"
|
|
10
|
+
"dist",
|
|
11
|
+
"README.md",
|
|
12
|
+
"LICENSE",
|
|
13
|
+
"CHANGELOG.md"
|
|
11
14
|
],
|
|
12
15
|
"scripts": {
|
|
13
16
|
"build": "rollup -c && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
|