dgz-ui 1.3.12 → 1.3.14
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 +99 -25
- package/dist/calendar/index.es.js +1 -1
- package/dist/calendar/index.umd.js +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/{timepicker-DdhoZwPA.cjs → timepicker-ClcygnC1.cjs} +1 -1
- package/dist/{timepicker-CPwvP6ii.js → timepicker-Dr1Kj_Bk.js} +594 -597
- package/dist/types/App.d.ts +6 -0
- package/dist/types/App.d.ts.map +1 -1
- package/dist/types/hooks/use-mobile.d.ts +6 -0
- package/dist/types/hooks/use-mobile.d.ts.map +1 -1
- package/dist/types/index.d.ts +4 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/lib/day.d.ts +4 -0
- package/dist/types/lib/day.d.ts.map +1 -1
- package/dist/types/lib/index.d.ts +3 -0
- package/dist/types/lib/index.d.ts.map +1 -1
- package/dist/types/lib/utils.d.ts +7 -0
- package/dist/types/lib/utils.d.ts.map +1 -1
- package/dist/types/ui/alert/alert.d.ts +2 -2
- package/dist/types/ui/alert-dialog/alert-dialog.d.ts +6 -0
- package/dist/types/ui/alert-dialog/alert-dialog.d.ts.map +1 -1
- package/dist/types/ui/badge/badge.d.ts +1 -1
- package/dist/types/ui/calendar/timepicker.d.ts.map +1 -1
- package/dist/types/ui/form/form.d.ts +29 -0
- package/dist/types/ui/form/form.d.ts.map +1 -1
- package/dist/types/ui/form/input-mask.d.ts +17 -17
- package/dist/types/ui/progress/progress.d.ts +10 -0
- package/dist/types/ui/progress/progress.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,25 +1,99 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
-
|
|
4
|
-
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
# dgz-ui
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/dgz-ui)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
Custom UI library built with React, Radix UI, Tailwind CSS v4, and TypeScript.
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- 🚀 **Modern Stack**: Built with React 19, TypeScript, and Tailwind CSS 4.
|
|
11
|
+
- 🎨 **Beautifully Styled**: Includes a comprehensive set of UI components.
|
|
12
|
+
- ♿ **Accessible**: Built on top of Radix UI primitives for accessibility.
|
|
13
|
+
- 🛠️ **Customizable**: Easy to extend and customize.
|
|
14
|
+
- 📦 **Tree-shakeable**: Import only what you need.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install dgz-ui
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Setup
|
|
23
|
+
|
|
24
|
+
To use the styles, import the CSS file in your root entry file (e.g., `main.tsx`, `App.tsx`, or `index.js`).
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import 'dgz-ui/dist/dgz-ui.css';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
Import components directly from the package:
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Button } from 'dgz-ui';
|
|
36
|
+
|
|
37
|
+
function App() {
|
|
38
|
+
return (
|
|
39
|
+
<Button variant="default" onClick={() => console.log('Clicked!')}>
|
|
40
|
+
Click me
|
|
41
|
+
</Button>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
You can also import specific components to optimize bundle size:
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { Alert, AlertTitle, AlertDescription } from 'dgz-ui/alert';
|
|
50
|
+
|
|
51
|
+
<Alert>
|
|
52
|
+
<AlertTitle>Heads up!</AlertTitle>
|
|
53
|
+
<AlertDescription>
|
|
54
|
+
This is a description inside an alert component.
|
|
55
|
+
</AlertDescription>
|
|
56
|
+
</Alert>;
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Components
|
|
60
|
+
|
|
61
|
+
The library includes the following components:
|
|
62
|
+
|
|
63
|
+
- **Accordion**: Vertically stacked set of interactive headings.
|
|
64
|
+
- **Alert**: Displays a callout for user attention.
|
|
65
|
+
- **Alert Dialog**: A modal dialog that interrupts the user with important content.
|
|
66
|
+
- **Avatar**: An image element with a fallback for representing the user.
|
|
67
|
+
- **Badge**: Displays a status or a count.
|
|
68
|
+
- **Breadcrumb**: Displays the path to the current resource.
|
|
69
|
+
- **Button**: Displays a button or a component that looks like a button.
|
|
70
|
+
- **Calendar**: Date and time pickers.
|
|
71
|
+
- **Card**: Displays a card with header, content, and footer.
|
|
72
|
+
- **Collapsible**: An interactive component which expands/collapses a panel.
|
|
73
|
+
- **Dialog**: A window overlaid on either the primary window or another dialog window.
|
|
74
|
+
- **Dropdown Menu**: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
|
|
75
|
+
- **Form**: Building blocks for forms, including Inputs, Checkboxes, Selects, Switches, Radio Groups, and Textareas.
|
|
76
|
+
- **Pagination**: Pagination controls.
|
|
77
|
+
- **Popover**: Displays rich content in a portal, triggered by a button.
|
|
78
|
+
- **Progress**: Displays an indicator showing the completion progress of a task.
|
|
79
|
+
- **Scroll Area**: Augments native scroll functionality for custom, cross-browser styling.
|
|
80
|
+
- **Separator**: Visually or semantically separates content.
|
|
81
|
+
- **Sheet**: Extends the Dialog component to display content that complements the main screen.
|
|
82
|
+
- **Skeleton**: Used to show a placeholder while content is loading.
|
|
83
|
+
- **Tabs**: A set of layered sections of content—known as tab panels—that are displayed one at a time.
|
|
84
|
+
- **Table**: A responsive table component.
|
|
85
|
+
- **Tooltip**: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
|
|
86
|
+
|
|
87
|
+
## Requirements
|
|
88
|
+
|
|
89
|
+
- React >= 19
|
|
90
|
+
- React DOM >= 19
|
|
91
|
+
- Tailwind CSS >= 4
|
|
92
|
+
|
|
93
|
+
## License
|
|
94
|
+
|
|
95
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
96
|
+
|
|
97
|
+
## Author
|
|
98
|
+
|
|
99
|
+
[Alisher Khayrillaev](https://github.com/Alisher1119)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../timepicker-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../timepicker-ClcygnC1.cjs");exports.Calendar=e.Calendar;exports.DATE=e.DATE;exports.DatePicker=e.DatePicker;exports.HOUR=e.HOUR;exports.MINUTE=e.MINUTE;exports.TIME=e.TIME;exports.TimePicker=e.TimePicker;
|
package/dist/index.es.js
CHANGED
|
@@ -5,7 +5,7 @@ import { B as P, b as w } from "./badge-D2CR6NO-.js";
|
|
|
5
5
|
import { B as h, e as B, b as I, a as v, c as k, d as H } from "./breadcrumb-DWK6qxiO.js";
|
|
6
6
|
import { B as L, b as V } from "./button-CdZDBhmr.js";
|
|
7
7
|
import { C as G, e as j, d as y, b as O, a as U, c as N } from "./card-jTI0i7Zi.js";
|
|
8
|
-
import { C as z, D as J, a as K, H as Q, M as W, T as X, b as Y } from "./timepicker-
|
|
8
|
+
import { C as z, D as J, a as K, H as Q, M as W, T as X, b as Y } from "./timepicker-Dr1Kj_Bk.js";
|
|
9
9
|
import { D as _, c as $, e as aa, i as ea, g as oa, f as ra, b as sa, a as ta, h as la, d as ia } from "./dialog-CLhboMXI.js";
|
|
10
10
|
import { D as pa, d as ga, b as da, i as ca, c as ba, f as ma, j as Da, n as ua, e as Ta, g as Sa, h as Ca, k as fa, l as xa, m as Aa, a as Ma } from "./dropdown-menu-TWRSm6RK.js";
|
|
11
11
|
import { C as wa, F as Fa, a as ha, d as Ba, e as Ia, g as va, b as ka, c as Ha, f as Ra, H as La, I as Va, L as Ea, M as Ga, R as ja, s as ya, h as Oa, m as Ua, j as Na, o as qa, n as za, r as Ja, q as Ka, p as Qa, l as Wa, k as Xa, S as Ya, T as Za, V as _a, i as $a, u as ae } from "./input-mask-DBLFIvhN.js";
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-BkZdKELe.cjs"),r=require("./alert-dialog-DdHkE_nt.cjs"),p=require("./avatar-Dj6P8xQl.cjs"),T=require("./badge-B9m8bLAC.cjs"),u=require("./breadcrumb-rEHKVP0f.cjs"),S=require("./button-BZdVaLIh.cjs"),g=require("./card-DBumDeUS.cjs"),i=require("./timepicker-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-BkZdKELe.cjs"),r=require("./alert-dialog-DdHkE_nt.cjs"),p=require("./avatar-Dj6P8xQl.cjs"),T=require("./badge-B9m8bLAC.cjs"),u=require("./breadcrumb-rEHKVP0f.cjs"),S=require("./button-BZdVaLIh.cjs"),g=require("./card-DBumDeUS.cjs"),i=require("./timepicker-ClcygnC1.cjs"),t=require("./dialog-DGqPgUeW.cjs"),o=require("./dropdown-menu-D6p70KXA.cjs"),e=require("./input-mask-qrWLn-2_.cjs"),m=require("./react-select-YYVvM9vk.cjs"),n=require("./pagination-B1JSQm2e.cjs"),D=require("./popover-CEurO9kv.cjs"),C=require("./scroll-area-DQV58vEk.cjs"),A=require("./separator-CxrVgSkd.cjs"),a=require("./sheet-I8VjGdFC.cjs"),d=require("./tabs-Crzu5XkT.cjs"),l=require("./table-CezLz0VZ.cjs"),s=require("./tooltip-Dw-emkm7.cjs"),M=require("./skeleton-C2OQgX4D.cjs"),b=require("./collapsible-CR8VV_4x.cjs"),w=require("./utils-BeXF6FlA.cjs");exports.Alert=c.Alert;exports.AlertDescription=c.AlertDescription;exports.AlertTitle=c.AlertTitle;exports.alertVariants=c.alertVariants;exports.AlertDialog=r.AlertDialog;exports.AlertDialogAction=r.AlertDialogAction;exports.AlertDialogCancel=r.AlertDialogCancel;exports.AlertDialogContent=r.AlertDialogContent;exports.AlertDialogDescription=r.AlertDialogDescription;exports.AlertDialogFooter=r.AlertDialogFooter;exports.AlertDialogHeader=r.AlertDialogHeader;exports.AlertDialogOverlay=r.AlertDialogOverlay;exports.AlertDialogPortal=r.AlertDialogPortal;exports.AlertDialogTitle=r.AlertDialogTitle;exports.AlertDialogTrigger=r.AlertDialogTrigger;exports.Avatar=p.Avatar;exports.AvatarFallback=p.AvatarFallback;exports.AvatarImage=p.AvatarImage;exports.avatarVariants=p.avatarVariants;exports.Badge=T.Badge;exports.badgeVariants=T.badgeVariants;exports.Breadcrumb=u.Breadcrumb;exports.BreadcrumbEllipsis=u.BreadcrumbEllipsis;exports.BreadcrumbItem=u.BreadcrumbItem;exports.BreadcrumbList=u.BreadcrumbList;exports.BreadcrumbPage=u.BreadcrumbPage;exports.BreadcrumbSeparator=u.BreadcrumbSeparator;exports.Button=S.Button;exports.buttonVariants=S.buttonVariants;exports.Card=g.Card;exports.CardContent=g.CardContent;exports.CardDescription=g.CardDescription;exports.CardFooter=g.CardFooter;exports.CardHeader=g.CardHeader;exports.CardTitle=g.CardTitle;exports.Calendar=i.Calendar;exports.DATE=i.DATE;exports.DatePicker=i.DatePicker;exports.HOUR=i.HOUR;exports.MINUTE=i.MINUTE;exports.TIME=i.TIME;exports.TimePicker=i.TimePicker;exports.Dialog=t.Dialog;exports.DialogClose=t.DialogClose;exports.DialogContent=t.DialogContent;exports.DialogDescription=t.DialogDescription;exports.DialogFooter=t.DialogFooter;exports.DialogHeader=t.DialogHeader;exports.DialogOverlay=t.DialogOverlay;exports.DialogPortal=t.DialogPortal;exports.DialogTitle=t.DialogTitle;exports.DialogTrigger=t.DialogTrigger;exports.DropdownMenu=o.DropdownMenu;exports.DropdownMenuCheckboxItem=o.DropdownMenuCheckboxItem;exports.DropdownMenuContent=o.DropdownMenuContent;exports.DropdownMenuGroup=o.DropdownMenuGroup;exports.DropdownMenuItem=o.DropdownMenuItem;exports.DropdownMenuLabel=o.DropdownMenuLabel;exports.DropdownMenuPortal=o.DropdownMenuPortal;exports.DropdownMenuRadioGroup=o.DropdownMenuRadioGroup;exports.DropdownMenuRadioItem=o.DropdownMenuRadioItem;exports.DropdownMenuSeparator=o.DropdownMenuSeparator;exports.DropdownMenuShortcut=o.DropdownMenuShortcut;exports.DropdownMenuSub=o.DropdownMenuSub;exports.DropdownMenuSubContent=o.DropdownMenuSubContent;exports.DropdownMenuSubTrigger=o.DropdownMenuSubTrigger;exports.DropdownMenuTrigger=o.DropdownMenuTrigger;exports.Checkbox=e.Checkbox;exports.FilepondContainer=e.FilepondContainer;exports.Form=e.Form;exports.FormControl=e.FormControl;exports.FormDescription=e.FormDescription;exports.FormField=e.FormField;exports.FormItem=e.FormItem;exports.FormLabel=e.FormLabel;exports.FormMessage=e.FormMessage;exports.HtmlEditor=e.HtmlEditor;exports.Input=e.Input;exports.Label=e.Label;exports.MaskInput=e.MaskInput;exports.RadioGroup=e.RadioGroup;exports.RadioGroupItem=e.RadioGroupItem;exports.Select=e.Select;exports.SelectContent=e.SelectContent;exports.SelectGroup=e.SelectGroup;exports.SelectItem=e.SelectItem;exports.SelectLabel=e.SelectLabel;exports.SelectScrollDownButton=e.SelectScrollDownButton;exports.SelectScrollUpButton=e.SelectScrollUpButton;exports.SelectSeparator=e.SelectSeparator;exports.SelectTrigger=e.SelectTrigger;exports.SelectValue=e.SelectValue;exports.Switch=e.Switch;exports.Textarea=e.Textarea;exports.VirtualizedSelectContent=e.VirtualizedSelectContent;exports.inputVariants=e.inputVariants;exports.useFormField=e.useFormField;exports.ReactSelect=m.ReactSelect;exports.Pagination=n.Pagination;exports.PaginationContent=n.PaginationContent;exports.PaginationEllipsis=n.PaginationEllipsis;exports.PaginationItem=n.PaginationItem;exports.PaginationLink=n.PaginationLink;exports.PaginationNext=n.PaginationNext;exports.PaginationPrevious=n.PaginationPrevious;exports.Popover=D.Popover;exports.PopoverContent=D.PopoverContent;exports.PopoverTrigger=D.PopoverTrigger;exports.ScrollArea=C.ScrollArea;exports.ScrollBar=C.ScrollBar;exports.Separator=A.Separator;exports.Sheet=a.Sheet;exports.SheetClose=a.SheetClose;exports.SheetContent=a.SheetContent;exports.SheetDescription=a.SheetDescription;exports.SheetFooter=a.SheetFooter;exports.SheetHeader=a.SheetHeader;exports.SheetTitle=a.SheetTitle;exports.SheetTrigger=a.SheetTrigger;exports.Tabs=d.Tabs;exports.TabsContent=d.TabsContent;exports.TabsList=d.TabsList;exports.TabsTrigger=d.TabsTrigger;exports.Table=l.Table;exports.TableBody=l.TableBody;exports.TableCaption=l.TableCaption;exports.TableCell=l.TableCell;exports.TableFooter=l.TableFooter;exports.TableHead=l.TableHead;exports.TableHeader=l.TableHeader;exports.TableRow=l.TableRow;exports.Tooltip=s.Tooltip;exports.TooltipContent=s.TooltipContent;exports.TooltipProvider=s.TooltipProvider;exports.TooltipTrigger=s.TooltipTrigger;exports.Skeleton=M.Skeleton;exports.Collapsible=b.Collapsible;exports.CollapsibleContent=b.CollapsibleContent;exports.CollapsibleTrigger=b.CollapsibleTrigger;exports.cn=w.cn;
|