tw-react-components 0.0.191 → 0.0.197

package/index.esm.js

@@ -569,7 +569,7 @@ const sizeClassNames = {
 const Button = (_a) => {
     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('inline-flex aspect-square shrink-0 items-center justify-center font-medium whitespace-nowrap transition-all outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0', 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:ring-[3px]', sizeClassNames[size].base, variantClassNames[variant].base, variantClassNames[variant].colors[color].base, !unstyled &&
-            `${variantClassNames[variant].colors[color].hover} ${variantClassNames[variant].colors[color].focus} ${variantClassNames[variant].colors[color].active} cursor-pointer`, unstyled && 'cursor-default', rounded ? 'rounded-full' : 'rounded-md', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button", disabled: disabled || loading }, props, { children: [PrefixIcon && !loading && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), loading && (jsx(Spinner, { className: "bg-transparent dark:bg-transparent", spinnerClassName: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base, dataTestId: `${dataTestId}-spinner` })), children, SuffixIcon && !loading && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
+            `${variantClassNames[variant].colors[color].hover} ${variantClassNames[variant].colors[color].focus} ${variantClassNames[variant].colors[color].active} cursor-pointer`, unstyled && 'cursor-default', rounded ? 'rounded-full' : 'rounded-md', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button", disabled: disabled || loading }, props, { children: [loading ? (jsx(Spinner, { className: "w-fit bg-transparent dark:bg-transparent", spinnerClassName: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base, dataTestId: `${dataTestId}-spinner` })) : (PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))), children, SuffixIcon && !loading && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 };
 
 const Badge = (_a) => {
@@ -680,8 +680,8 @@ function useIsMobile() {
         const onChange = () => {
             setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
         };
+        onChange();
         mql.addEventListener('change', onChange);
-        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
         return () => mql.removeEventListener('change', onChange);
     }, []);
     return !!isMobile;
@@ -1207,18 +1207,20 @@ const DateTimeInput = (_a) => {
     var { className, value, clearable, type = 'datetime-local', step = 1, minDate, maxDate, hasErrors, onChange, onBlur, displayFormat = 'dddd, MMMM Do YYYY, HH:mm:ss', displayLocale = 'en', ref, dataTestId = 'date-time-input' } = _a, props = __rest(_a, ["className", "value", "clearable", "type", "step", "minDate", "maxDate", "hasErrors", "onChange", "onBlur", "displayFormat", "displayLocale", "ref", "dataTestId"]);
     const [isOpen, setIsOpen] = useState();
     const [calendarView, setCalendarView] = useState('days');
+    const now = useMemo(() => new Date(), []);
     const date = useMemo(() => {
         const result = value
             ? new Date(value)
-            : new Date(Math.min(Math.max(new Date(minDate !== null && minDate !== void 0 ? minDate : Date.now()).getTime(), Date.now()), new Date(maxDate !== null && maxDate !== void 0 ? maxDate : Date.now()).getTime()));
+            : new Date(Math.min(Math.max(new Date(minDate !== null && minDate !== void 0 ? minDate : now).getTime(), now.getTime()), new Date(maxDate !== null && maxDate !== void 0 ? maxDate : now).getTime()));
         result.setMinutes(result.getMinutes() - ((result.getMinutes() + step) % step));
         return result;
-    }, [step, maxDate, minDate, value]);
+    }, [step, maxDate, minDate, value, now]);
     const displayDate = useMemo(() => value && getDisplayDate(date, { format: displayFormat, locale: displayLocale }), [date, value, displayFormat, displayLocale]);
     const calendarRef = useRef(null);
     useOutsideClick(calendarRef, () => setIsOpen(false));
     useEffect(() => {
         if (!isOpen) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setCalendarView('days');
         }
     }, [isOpen]);
@@ -2167,9 +2169,8 @@ SidebarMenuBadge.displayName = 'SidebarMenuBadge';
 const SidebarMenuSkeleton = (_a) => {
     var { className, showIcon = false, dataTestId = 'sidebar-menu-skeleton' } = _a, props = __rest(_a, ["className", "showIcon", "dataTestId"]);
     // Random width between 50 to 90%.
-    const width = useMemo(() => {
-        return `${Math.floor(Math.random() * 40) + 50}%`;
-    }, []);
+    // eslint-disable-next-line react-hooks/purity
+    const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
     return (jsxs("div", Object.assign({ "data-testid": dataTestId, "data-sidebar": "menu-skeleton", className: cn('flex h-9 items-center gap-2 rounded-md px-2', className) }, props, { children: [showIcon && jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
                     '--skeleton-width': width,
                 } })] })));
@@ -2217,14 +2218,14 @@ const Sidebar = Object.assign(SidebarComp, {
 
 const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, dataTestId = 'navbar', }) => (jsx(Block, { className: cn('border-b p-2 dark:border-slate-700', className), fullWidth: true, dataTestId: dataTestId, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
+const Wrapper = ({ children, variant }) => variant === 'inset' ? (jsx(Block, { className: "overflow-hidden p-2", fullHeight: true, fullWidth: true, children: jsx(Block, { className: "bg-background overflow-hidden rounded-xl shadow-sm", fullHeight: true, fullWidth: true, children: children }) })) : (children);
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps, NavLink, useLocation } = _a;
-    const Wrapper = ({ children }) => sidebarProps.variant === 'inset' ? (jsx(Block, { className: "overflow-hidden p-2", fullHeight: true, fullWidth: true, children: jsx(Block, { className: "bg-background overflow-hidden rounded-xl shadow-sm", fullHeight: true, fullWidth: true, children: children }) })) : (children);
     return (jsxs(Flex, { className: "bg-sidebar h-screen w-screen gap-0 text-black dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { className: cn('h-full overflow-hidden', sidebarProps.className), children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
                                 .filter((item) => !item.hidden)
                                 .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item, { NavLink: NavLink, useLocation: useLocation })) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
                                                 .filter((subItem) => !subItem.hidden)
-                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem, { NavLink: NavLink, useLocation: useLocation }), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), sidebarProps.variant === 'sidebar' && jsx(Sidebar.Rail, {})] })), jsx(Wrapper, { children: jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullWidth: true, fullHeight: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] }) })] }));
+                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem, { NavLink: NavLink, useLocation: useLocation }), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), sidebarProps.variant === 'sidebar' && jsx(Sidebar.Rail, {})] })), jsx(Wrapper, { variant: sidebarProps.variant, children: jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullWidth: true, fullHeight: true, children: [navbarProps && 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, NavLink, useLocation }) => {
     const location = useLocation();
@@ -2257,22 +2258,22 @@ const Popover = Object.assign($Popover, {
     Content: PopoverContent,
 });
 
-const ResizablePanelGroup = (_a) => {
-    var { className, dataTestId = 'resizable-panel-group' } = _a, props = __rest(_a, ["className", "dataTestId"]);
-    return (jsx(ResizablePrimitive.PanelGroup, Object.assign({ className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), "data-testid": dataTestId }, props)));
+const ResizableGroup = (_a) => {
+    var { className, dataTestId } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(ResizablePrimitive.Group, Object.assign({ className: cn('flex h-full w-full', className), id: dataTestId }, props)));
 };
 const ResizablePanel = (_a) => {
-    var { dataTestId = 'resizable-panel' } = _a, props = __rest(_a, ["dataTestId"]);
-    return (jsx(ResizablePrimitive.Panel, Object.assign({ "data-testid": dataTestId }, props)));
+    var { dataTestId } = _a, props = __rest(_a, ["dataTestId"]);
+    return (jsx(ResizablePrimitive.Panel, Object.assign({ id: dataTestId }, props)));
 };
-const ResizableHandle = (_a) => {
-    var { withHandle, className, dataTestId = 'resizable-handle' } = _a, props = __rest(_a, ["withHandle", "className", "dataTestId"]);
-    return (jsx(ResizablePrimitive.PanelResizeHandle, Object.assign({ className: cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden', 'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), "data-testid": dataTestId }, props, { children: withHandle && (jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", "data-testid": `${dataTestId}-handle`, children: jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) })));
+const ResizableSeparator = (_a) => {
+    var { withHandle, className, dataTestId } = _a, props = __rest(_a, ["withHandle", "className", "dataTestId"]);
+    return (jsx(ResizablePrimitive.Separator, Object.assign({ className: cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden', 'aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90', className), id: dataTestId }, props, { children: withHandle && (jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", "data-testid": `${dataTestId}-handle`, children: jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) })));
 };
 const Resizable = {
-    PanelGroup: ResizablePanelGroup,
+    Group: ResizableGroup,
     Panel: ResizablePanel,
-    Handle: ResizableHandle,
+    Separator: ResizableSeparator,
 };
 
 const Switch = (_a) => {
@@ -2327,6 +2328,7 @@ const LayoutContextProvider = ({ children, theme: defaultTheme, showIds: default
     }, [resolvedTheme]);
     useEffect(() => {
         if (theme !== 'system') {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setResolvedTheme(theme);
             return;
         }

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

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

@@ -1,17 +1,17 @@
 import type { FC } from 'react';
 import * as ResizablePrimitive from 'react-resizable-panels';
-export type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup> & {
+export type ResizableGroupProps = React.ComponentProps<typeof ResizablePrimitive.Group> & {
     dataTestId?: string;
 };
 export type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive.Panel> & {
     dataTestId?: string;
 };
-export type ResizableHandleProps = React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+export type ResizableSeparatorProps = React.ComponentProps<typeof ResizablePrimitive.Separator> & {
     withHandle?: boolean;
     dataTestId?: string;
 };
 export declare const Resizable: {
-    PanelGroup: FC<ResizablePanelGroupProps>;
+    Group: FC<ResizableGroupProps>;
     Panel: FC<ResizablePanelProps>;
-    Handle: FC<ResizableHandleProps>;
+    Separator: FC<ResizableSeparatorProps>;
 };

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

@@ -5,7 +5,7 @@ type SheetOverlayProps = ComponentProps<typeof SheetPrimitive.Overlay> & {
     dataTestId?: string;
 };
 declare const sheetVariants: (props?: ({
-    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+    side?: "left" | "bottom" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
     dataTestId?: string;