tw-react-components 0.0.137 → 0.0.139

package/index.css

@@ -13,8 +13,8 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 47.4% 11.2%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 47.4% 11.2%;
@@ -58,8 +58,8 @@
     --popover: 224 71% 4%;
     --popover-foreground: 215 20.2% 65.1%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+    --border: 215 25% 27%;
+    --input: 215 25% 27%;
 
     --card: 224 71% 4%;
     --card-foreground: 213 31% 91%;
@@ -92,6 +92,7 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
     font-feature-settings:

package/index.esm.js

@@ -1,23 +1,22 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
 import { forwardRef, useMemo, useState, useEffect, useId, useCallback, useRef, createContext, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
-import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, X, PanelLeft, MoonIcon, SunIcon } from 'lucide-react';
+import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, PanelLeft, MoonIcon, SunIcon } from 'lucide-react';
 import localeData from 'dayjs/plugin/localeData';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { useFormContext, Controller, FormProvider } from 'react-hook-form';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Link, useLocation } from 'react-router-dom';
 import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -1571,18 +1570,19 @@ const ExpandButton = ({ folded, foldComponent, unfoldComponent, onClick, }) => {
     return (jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick }));
 };
 
-const $Dialog = DialogPrimitive.Root;
+const $Dialog = (props) => (jsx(DialogPrimitive.Root, Object.assign({}, props)));
+$Dialog.displayName = DialogPrimitive.Root.displayName;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm', className) }, props)));
+    return (jsx(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className) }, props)));
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = forwardRef((_a, ref) => {
     var { className, fullScreen, children } = _a, props = __rest(_a, ["className", "fullScreen", "children"]);
-    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed left-[50%] top-[50%] z-50 flex w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-3 rounded-lg border bg-white p-3 shadow-md duration-200 xl:gap-4 xl:p-4 dark:border-slate-700 dark:bg-slate-900 dark:text-white', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none') }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "!absolute right-1 top-1 opacity-70 ring-offset-white transition-opacity hover:opacity-100 disabled:pointer-events-none xl:right-2 xl:top-2", asChild: true, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) })] }))] }));
+    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed left-[50%] top-[50%] z-50 flex max-h-[95dvh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-lg border p-4 shadow-lg duration-200', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none'), "aria-describedby": "dialog-content" }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {
@@ -1597,12 +1597,12 @@ const DialogFooter = (_a) => {
 DialogFooter.displayName = 'DialogFooter';
 const DialogTitle = forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className) }, props)));
+    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-sm text-slate-600 dark:text-slate-400', className) }, props)));
+    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 const Dialog = Object.assign($Dialog, {
@@ -1617,9 +1617,69 @@ const Dialog = Object.assign($Dialog, {
     Description: DialogDescription,
 });
 
-const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, }) => (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), children, jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "green", onClick: onConfirm, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
+const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, }) => (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), children, jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "green", onClick: onConfirm, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
+
+const $Sheet = (props) => (jsx(DialogPrimitive.Root, Object.assign({}, props)));
+$Sheet.displayName = DialogPrimitive.Root.displayName;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
+const SheetOverlay = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.Overlay, Object.assign({ className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className) }, props, { ref: ref })));
+});
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const sheetVariants = cva('fixed flex flex-col z-50 gap-4 bg-background p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+    variants: {
+        side: {
+            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+            right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+    },
+});
+const SheetContent = forwardRef((_a, ref) => {
+    var { side = 'right', className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
+});
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+const SheetHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-2 text-center sm:text-left', className) }, props)));
+};
+SheetHeader.displayName = 'SheetHeader';
+const SheetFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
+};
+SheetFooter.displayName = 'SheetFooter';
+const SheetTitle = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
+});
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+const SheetDescription = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
+});
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+const Sheet = Object.assign($Sheet, {
+    Portal: SheetPortal,
+    Overlay: SheetOverlay,
+    Trigger: SheetTrigger,
+    Close: SheetClose,
+    Content: SheetContent,
+    Header: SheetHeader,
+    Footer: SheetFooter,
+    Title: SheetTitle,
+    Description: SheetDescription,
+});
 
-const FormDialog = ({ className, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, onSubmit, onInvalid, onClose, }) => {
+const FormDialog = ({ className, formClassName, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, as: As = Sheet, onSubmit, onInvalid, onClose, }) => {
     const id = useId();
     const handleSubmit = (data, event) => __awaiter(void 0, void 0, void 0, function* () {
         try {
@@ -1629,7 +1689,7 @@ const FormDialog = ({ className, open, title, form, children, submitLabel = 'Sub
             // do nothering
         }
     });
-    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxs(Dialog.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxs(Dialog.Footer, { className: "ml-auto", children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
+    return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, children: [jsx(As.Header, { children: jsx(As.Title, { children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-3 overflow-auto', formClassName), onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxs(As.Footer, { className: "ml-auto", children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
 };
 
 function ListSorter({ className, items, idResolver, renderer, onChange, }) {
@@ -1667,11 +1727,11 @@ function ListSorterDialog({ className, open, title, items, idResolver, renderer,
     }, [items]);
     const preFinish = () => onSubmit(sortedItems);
     const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-none dark:bg-slate-900 hover:dark:bg-slate-800", children: [jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700" }, listeners, { children: jsx(ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
-    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: cn('max-h-[90dvh]', className), onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: title }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems }), jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
+    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems }), jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
 }
 
 const PdfViewerDialog = ({ open, title, url, data, onClose }) => {
-    return !(url || data) ? null : (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: "h-[90dvh] max-w-[90dvw]", children: [jsx(Dialog.Header, { children: title }), (url || data) && (jsx("embed", { className: "rounded-lg", src: url !== null && url !== void 0 ? url : `data:application/pdf;base64,${data}`, type: "application/pdf", width: "100%", height: "100%" }))] }) }));
+    return !(url || data) ? null : (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: "h-[95dvh] max-w-[95dvw]", children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), (url || data) && (jsx("embed", { className: "rounded-lg", src: url !== null && url !== void 0 ? url : `data:application/pdf;base64,${data}`, type: "application/pdf", width: "100%", height: "100%" }))] }) }));
 };
 
 const Separator = forwardRef((_a, ref) => {
@@ -1680,65 +1740,6 @@ const Separator = forwardRef((_a, ref) => {
 });
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-const $Sheet = DialogPrimitive.Root;
-const SheetTrigger = DialogPrimitive.Trigger;
-const SheetClose = DialogPrimitive.Close;
-const SheetPortal = DialogPrimitive.Portal;
-const SheetOverlay = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Overlay, Object.assign({ className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className) }, props, { ref: ref })));
-});
-SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
-    variants: {
-        side: {
-            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-            bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-            right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-        },
-    },
-    defaultVariants: {
-        side: 'right',
-    },
-});
-const SheetContent = React.forwardRef((_a, ref) => {
-    var { side = 'right', className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
-    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [jsx(X, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
-});
-SheetContent.displayName = DialogPrimitive.Content.displayName;
-const SheetHeader = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-2 text-center sm:text-left', className) }, props)));
-};
-SheetHeader.displayName = 'SheetHeader';
-const SheetFooter = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
-};
-SheetFooter.displayName = 'SheetFooter';
-const SheetTitle = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
-});
-SheetTitle.displayName = DialogPrimitive.Title.displayName;
-const SheetDescription = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
-});
-SheetDescription.displayName = DialogPrimitive.Description.displayName;
-const Sheet = Object.assign($Sheet, {
-    Portal: SheetPortal,
-    Overlay: SheetOverlay,
-    Trigger: SheetTrigger,
-    Close: SheetClose,
-    Content: SheetContent,
-    Header: SheetHeader,
-    Footer: SheetFooter,
-    Title: SheetTitle,
-    Description: SheetDescription,
-});
-
 const Skeleton = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsx("div", Object.assign({ className: cn('bg-muted animate-pulse rounded-md', className) }, props)));
@@ -2007,10 +2008,11 @@ const Sidebar = Object.assign($Sidebar, {
     Trigger: SidebarTrigger,
 });
 
-const Navbar = ({ leftSlot, rightSlot }) => (jsx(Block, { className: "border-b p-3 dark:border-slate-700", fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
+const Navbar = ({ className, leftSlot, rightSlot }) => (jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
 
-const Layout = ({ children, className, sidebarProps, navbarProps, }) => {
-    return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps.root, { children: [jsx(Sidebar.Header, { children: sidebarProps.smallLogo && sidebarProps.fullLogo && (jsx("div", { className: "cursor-pointer overflow-hidden whitespace-nowrap py-2 text-center text-lg", children: jsxs(Link, { to: "/", children: [jsx("span", { className: "group-data-[state=collapsed]:hidden", children: sidebarProps.fullLogo }), jsx("span", { className: "group-data-[state=expanded]:hidden", children: sidebarProps.smallLogo })] }) })) }), jsx(Sidebar.Content, { className: "gap-0", children: sidebarProps.items.map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: sidebarProps.basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items.map((item, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: sidebarProps.basePath }, item), index))) }) })] }, index))) }), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+const Layout = (_a) => {
+    var { children, className } = _a, _b = _a.sidebarProps, { basePath, smallLogo, fullLogo, items } = _b, sidebarProps = __rest(_b, ["basePath", "smallLogo", "fullLogo", "items"]), { navbarProps } = _a;
+    return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [jsx(Sidebar.Header, { children: smallLogo && fullLogo && (jsx("div", { className: "cursor-pointer overflow-hidden whitespace-nowrap py-2 text-center text-lg", children: jsxs(Link, { to: "/", children: [jsx("span", { className: "group-data-[state=collapsed]:hidden", children: fullLogo }), jsx("span", { className: "group-data-[state=expanded]:hidden", children: smallLogo })] }) })) }), jsx(Sidebar.Content, { className: "gap-0", children: items.map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items.map((item, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item), index))) }) })] }, index))) }), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
 };
 const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
     const location = useLocation();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.137",
+  "version": "0.0.139",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {

package/src/components/Dialog/Dialog.d.ts

@@ -1,7 +1,7 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { HTMLAttributes } from 'react';
-export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps> & {
-    Portal: import("react").FC<DialogPrimitive.DialogPortalProps>;
+import { FC, HTMLAttributes } from 'react';
+export declare const Dialog: FC<DialogPrimitive.DialogProps> & {
+    Portal: FC<DialogPrimitive.DialogPortalProps>;
     Overlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Close: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
     Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/src/components/Dialog/FormDialog.d.ts

@@ -1,16 +1,20 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
+import { Sheet } from '../Sheet';
+import { Dialog } from './Dialog';
 type Props<T extends FieldValues> = {
     className?: string;
+    formClassName?: string;
     open: boolean;
     title: ReactNode;
     form: UseFormReturn<T>;
     submitLabel?: string;
     cancelLabel?: string;
     extraAction?: ReactNode;
+    as?: typeof Dialog | typeof Sheet;
     onSubmit: SubmitHandler<T>;
     onInvalid?: SubmitErrorHandler<T>;
     onClose: () => void;
 };
-export declare const FormDialog: <T extends FieldValues>({ className, open, title, form, children, submitLabel, cancelLabel, extraAction, onSubmit, onInvalid, onClose, }: PropsWithChildren<Props<T>>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDialog: <T extends FieldValues>({ className, formClassName, open, title, form, children, submitLabel, cancelLabel, extraAction, as: As, onSubmit, onInvalid, onClose, }: PropsWithChildren<Props<T>>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Layout/index.d.ts

@@ -9,8 +9,7 @@ export type SidebarItem = {
     hidden?: boolean;
     items?: SidebarItem[];
 };
-export type SidebarProps = {
-    root?: ComponentProps<typeof Sidebar>;
+export type SidebarProps = ComponentProps<typeof Sidebar> & {
     basePath?: string;
     smallLogo?: ReactNode;
     fullLogo?: ReactNode;

package/src/components/Navbar/index.d.ts

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react';
 export type NavbarProps = {
+    className?: string;
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
 };

package/src/components/Sheet/index.d.ts

@@ -1,26 +1,26 @@
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import { ComponentPropsWithoutRef, FC, HTMLAttributes } from 'react';
 declare const sheetVariants: (props?: ({
     side?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+interface SheetContentProps extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
-export declare const Sheet: React.FC<SheetPrimitive.DialogProps> & {
-    Portal: React.FC<SheetPrimitive.DialogPortalProps>;
-    Overlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Close: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Sheet: FC<SheetPrimitive.DialogProps> & {
+    Portal: FC<SheetPrimitive.DialogPortalProps>;
+    Overlay: import("react").ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<SheetContentProps & import("react").RefAttributes<HTMLDivElement>>;
     Header: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Title: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 };
 export {};