tw-react-components 0.0.173 → 0.0.175

package/index.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
@@ -142,6 +142,42 @@ function resolveTargetObject(payload, fieldChain, defaultValue) {
     return resolveTargetObject(payload[key], rest, defaultValue);
 }
 
+const Block = (_a) => {
+    var { children, className, centered, container, fullWidth, fullHeight, dataTestId = 'block' } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
+};
+
+const directionClasses = {
+    row: {
+        normal: 'flex-row',
+        reverse: 'flex-row-reverse',
+    },
+    column: {
+        normal: 'flex-col',
+        reverse: 'flex-col-reverse',
+    },
+};
+const alignClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+};
+const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    between: 'justify-between',
+    end: 'justify-end',
+};
+const Flex = (_a) => {
+    var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start', dataTestId = 'flex' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify", "dataTestId"]);
+    return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className), dataTestId: dataTestId }, blockProps, { children: children })));
+};
+
+const Spinner = ({ className, fullScreen, dataTestId = 'spinner' }) => (jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
+        'h-screen': fullScreen,
+        'h-full': !fullScreen,
+    }, className), "data-testid": dataTestId, children: jsxs("svg", { className: "h-8 w-8 animate-spin text-black dark:text-white", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
+
 const variantClassNames = {
     filled: {
         slate: {
@@ -565,12 +601,12 @@ const sizeClassNames = {
     },
 };
 const Button = (_a) => {
-    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled, dataTestId = 'button' } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon", "unstyled", "dataTestId"]);
-    return (jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', props.disabled
+    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, loading, disabled, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled, dataTestId = 'button' } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "loading", "disabled", "prefixIcon", "suffixIcon", "unstyled", "dataTestId"]);
+    return (jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', disabled || loading
             ? 'cursor-not-allowed opacity-50'
             : !unstyled
                 ? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active} cursor-pointer`
-                : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button" }, props, { children: [PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
+                : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button", disabled: disabled || loading }, props, { children: [loading && (jsx(Flex, { className: cn('absolute inset-0', rounded ? 'rounded-full' : 'rounded-md'), align: "center", justify: "center", children: jsx(Spinner, { className: "h-5 w-5 animate-spin bg-transparent dark:bg-transparent", dataTestId: `${dataTestId}-spinner` }) })), PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 };
 
 const Badge = (_a) => {
@@ -578,11 +614,6 @@ const Badge = (_a) => {
     return (jsx(Button, Object.assign({ size: size, dataTestId: dataTestId }, props)));
 };
 
-const Block = (_a) => {
-    var { children, className, centered, container, fullWidth, fullHeight, dataTestId = 'block' } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight", "dataTestId"]);
-    return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
-};
-
 const Card = (_a) => {
     var { children, className, dataTestId = 'card' } = _a, blockProps = __rest(_a, ["children", "className", "dataTestId"]);
     return (jsx(Block, Object.assign({ className: cn('bg-background rounded-lg border p-2 dark:border-slate-700', className), dataTestId: dataTestId }, blockProps, { children: children })));
@@ -605,32 +636,6 @@ const Collapsible = Object.assign(CollapsibleRoot, {
     Content: CollapsibleContent,
 });
 
-const directionClasses = {
-    row: {
-        normal: 'flex-row',
-        reverse: 'flex-row-reverse',
-    },
-    column: {
-        normal: 'flex-col',
-        reverse: 'flex-col-reverse',
-    },
-};
-const alignClasses = {
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-};
-const justifyClasses = {
-    start: 'justify-start',
-    center: 'justify-center',
-    between: 'justify-between',
-    end: 'justify-end',
-};
-const Flex = (_a) => {
-    var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start', dataTestId = 'flex' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify", "dataTestId"]);
-    return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className), dataTestId: dataTestId }, blockProps, { children: children })));
-};
-
 dayjs.extend(localeData);
 function useDays(locale = 'en') {
     return useMemo(() => {
@@ -1500,11 +1505,6 @@ const PaginationItem = (_a) => {
         }), align: "center", justify: "center", fullHeight: true }, props, { children: children })));
 };
 
-const Spinner = ({ className, fullScreen, dataTestId = 'spinner' }) => (jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
-        'h-screen': fullScreen,
-        'h-full': !fullScreen,
-    }, className), "data-testid": dataTestId, children: jsxs("svg", { className: "h-8 w-8 animate-spin text-black dark:text-white", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
-
 const $Table = (_a) => {
     var { children, className, dataTestId = 'table' } = _a, props = __rest(_a, ["children", "className", "dataTestId"]);
     return (jsx(Flex, { className: cn('overflow-auto rounded-lg', className), fullWidth: true, children: jsx("table", Object.assign({ className: "min-w-full divide-y divide-slate-200 dark:divide-slate-800 dark:text-white", "data-testid": dataTestId }, props, { children: children })) }));
@@ -1679,7 +1679,15 @@ const Dialog = Object.assign($Dialog, {
     Description: DialogDescription,
 });
 
-const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, dataTestId = 'confirm-dialog', }) => (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), children, jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", "data-testid": `${dataTestId}-no-button`, children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "green", onClick: onConfirm, "data-testid": `${dataTestId}-yes-button`, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
+const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, dataTestId = 'confirm-dialog', }) => {
+    const [loading, setLoading] = useState(false);
+    const handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        yield onConfirm();
+        setLoading(false);
+    });
+    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), children, jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", disabled: loading, "data-testid": `${dataTestId}-no-button`, children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Button, { color: "green", loading: loading, onClick: handleConfirm, "data-testid": `${dataTestId}-yes-button`, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' })] })] }) }));
+};
 
 const SheetTrigger = DialogPrimitive.Trigger;
 const SheetClose = DialogPrimitive.Close;
@@ -1741,7 +1749,7 @@ const Sheet = Object.assign(DialogPrimitive.Root, {
 
 const FormDialog = ({ className, formClassName, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, as: As = Sheet, onSubmit, onInvalid, onClose, dataTestId = 'form-dialog', }) => {
     const id = useId();
-    return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, dataTestId: `${dataTestId}-content`, children: [jsx(As.Header, { dataTestId: `${dataTestId}-header`, children: jsx(As.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-2 overflow-auto', formClassName), onSubmit: form.handleSubmit(onSubmit, onInvalid), "data-testid": `${dataTestId}-form`, children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", dataTestId: `${dataTestId}-footer`, children: [extraAction, jsxs(As.Footer, { className: "ml-auto", dataTestId: `${dataTestId}-actions`, children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, dataTestId: `${dataTestId}-submit-button`, children: submitLabel })] })] })] }) }));
+    return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, dataTestId: `${dataTestId}-content`, children: [jsx(As.Header, { dataTestId: `${dataTestId}-header`, children: jsx(As.Title, { dataTestId: `${dataTestId}-title`, children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-2 overflow-auto', formClassName), onSubmit: form.handleSubmit(onSubmit, onInvalid), "data-testid": `${dataTestId}-form`, children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", dataTestId: `${dataTestId}-footer`, children: [extraAction, jsxs(As.Footer, { className: "ml-auto", dataTestId: `${dataTestId}-actions`, children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", dataTestId: `${dataTestId}-cancel-button`, disabled: form.formState.isSubmitting, children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, loading: form.formState.isSubmitting, dataTestId: `${dataTestId}-submit-button`, children: submitLabel })] })] })] }) }));
 };
 
 function ListSorter({ className, items, dataTestId = 'list-sorter', idResolver, renderer, onChange, }) {
@@ -1772,14 +1780,19 @@ function SortableItem({ item, index, dataTestId, renderer, }) {
 
 function ListSorterDialog({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, dataTestId = 'list-sorter-dialog', }) {
     const [sortedItems, setSortedItems] = useState(structuredClone(items));
+    const [loading, setLoading] = useState(false);
     useEffect(() => {
         if (!open) {
             setSortedItems(structuredClone(items));
         }
     }, [items, open]);
-    const preFinish = () => onSubmit(sortedItems);
+    const handleSubmit = () => __awaiter(this, void 0, void 0, function* () {
+        setLoading(true);
+        yield onSubmit(sortedItems);
+        setLoading(false);
+    });
     const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-hidden dark:bg-slate-900 hover:dark:bg-slate-800", "data-testid": `${dataTestId}-item-${index}`, 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", "data-testid": `${dataTestId}-drag-handle-${index}` }, 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: className, onPointerDownOutside: (event) => event.preventDefault(), dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-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, dataTestId: `${dataTestId}-sorter` }), jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, dataTestId: `${dataTestId}-submit-button`, 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(), dataTestId: `${dataTestId}-content`, children: [jsx(Dialog.Header, { dataTestId: `${dataTestId}-header`, children: jsx(Dialog.Title, { dataTestId: `${dataTestId}-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, dataTestId: `${dataTestId}-sorter` }), jsxs(Dialog.Footer, { dataTestId: `${dataTestId}-footer`, children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", disabled: loading, dataTestId: `${dataTestId}-cancel-button`, children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", loading: loading, onClick: handleSubmit, dataTestId: `${dataTestId}-submit-button`, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
 }
 
 const PdfViewerDialog = ({ open, title, url, data, onClose, dataTestId = 'pdf-viewer-dialog', }) => {
@@ -1835,7 +1848,15 @@ const SidebarContextProvider = (_a) => {
         return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
     }, [isMobile, setOpen, setOpenMobile]);
     // Add swipe gesture support for opening and closing the sidebar.
-    useOnSwipe(screenRef, (direction) => direction === 'right' ? setOpen(true) : direction === 'left' && setOpen(false));
+    useOnSwipe(screenRef, (direction) => {
+        const _setOpen = isMobile ? setOpenMobile : setOpen;
+        if (direction === 'right') {
+            _setOpen(true);
+        }
+        else if (direction === 'left') {
+            _setOpen(false);
+        }
+    });
     // Adds a keyboard shortcut to toggle the sidebar.
     useEffect(() => {
         const handleKeyDown = (event) => {

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.173",
+  "version": "0.0.175",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

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

@@ -7,6 +7,7 @@ export type ButtonProps = ComponentProps<'button'> & {
     color?: Color;
     variant?: ButtonVariant;
     rounded?: boolean;
+    loading?: boolean;
     prefixIcon?: LucideIcon;
     suffixIcon?: LucideIcon;
     unstyled?: boolean;

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

@@ -1,10 +1,10 @@
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { type FC, type PropsWithChildren, type ReactNode } from 'react';
 type Props = {
     open: boolean;
     title: ReactNode;
     yesLabel?: string;
     noLabel?: string;
-    onConfirm: () => void;
+    onConfirm: () => void | Promise<void>;
     onClose: () => void;
     dataTestId?: string;
 };

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

@@ -8,6 +8,6 @@ export type ListSorterDialogProps<T extends ListSorterItem> = {
 } & Omit<ListSorterProps<T>, 'onChange'> & {
     cancelLabel?: string;
     submitLabel?: string;
-    onSubmit: (items: T[]) => void;
+    onSubmit: (items: T[]) => void | Promise<void>;
 };
 export declare function ListSorterDialog<T extends ListSorterItem>({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, dataTestId, }: ListSorterDialogProps<T>): import("react/jsx-runtime").JSX.Element;