@datum-cloud/datum-ui 2.0.0 → 2.3.0

package/dist/{sidebar-BRUNOqXi.mjs → sidebar-D6BoAr6C.mjs}

@@ -78,18 +78,30 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		return () => mql.removeEventListener("change", onChange);
 	}, [isMobile, setOpen]);
 	const effectiveOpen = open || expandOnHover && isHovered;
+	const isIconRail = !effectiveOpen;
 	const handleMouseEnter = React.useCallback(() => {
 		if (!expandOnHover) return;
 		if (hoverLockRef.current) return;
-		if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
 		setIsHovered(true);
 	}, [expandOnHover]);
 	const handleMouseLeave = React.useCallback(() => {
 		if (!expandOnHover) return;
-		hoverTimeoutRef.current = setTimeout(() => {
-			setIsHovered(false);
-		}, expandBehavior === "overlay" ? 200 : 300);
-	}, [expandOnHover, expandBehavior]);
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
+		setIsHovered(false);
+	}, [expandOnHover]);
+	const cancelHoverLeave = React.useCallback(() => {
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
+	}, []);
 	const toggleSidebar = React.useCallback(() => {
 		if (isMobile) {
 			setOpenMobile((current) => !current);
@@ -154,6 +166,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 	const state = effectiveOpen ? "expanded" : "collapsed";
 	const contextValue = React.useMemo(() => ({
 		state,
+		isIconRail,
 		open: effectiveOpen,
 		setOpen,
 		isMobile,
@@ -162,6 +175,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		toggleSidebar,
 		handleMouseEnter,
 		handleMouseLeave,
+		cancelHoverLeave,
 		forceClose,
 		closeForNavigation,
 		hasSubLayout,
@@ -170,6 +184,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		showBackdrop
 	}), [
 		state,
+		isIconRail,
 		effectiveOpen,
 		setOpen,
 		isMobile,
@@ -178,6 +193,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		toggleSidebar,
 		handleMouseEnter,
 		handleMouseLeave,
+		cancelHoverLeave,
 		forceClose,
 		closeForNavigation,
 		hasSubLayout,
@@ -341,7 +357,7 @@ function SidebarMenuSub({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "sidebar-menu-sub",
 		"data-sidebar": "menu-sub",
-		className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col px-2.5", "group-data-[collapsible=icon]:hidden", className),
+		className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-0.5 border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
 		...props
 	});
 }
@@ -366,7 +382,7 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
 //#endregion
 //#region src/components/base/sidebar/shell.tsx
 function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
-	const { isMobile, state, openMobile, setOpenMobile, handleMouseEnter, handleMouseLeave, expandBehavior, showBackdrop, forceClose } = useSidebar();
+	const { isMobile, state, openMobile, setOpenMobile, expandBehavior, showBackdrop, forceClose } = useSidebar();
 	const sidebarRef = React.useRef(null);
 	const [showBackdropElement, setShowBackdropElement] = React.useState(false);
 	const [backdropVisible, setBackdropVisible] = React.useState(false);
@@ -422,18 +438,19 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 		"data-variant": variant,
 		"data-side": side,
 		"data-slot": "sidebar",
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
 		children: [
-			/* @__PURE__ */ jsx("div", { className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", expandBehavior === "overlay" ? variant === "floating" || variant === "inset" ? "w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "w-(--sidebar-width-icon)" : variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }),
+			/* @__PURE__ */ jsx("div", { className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", expandBehavior === "overlay" ? variant === "floating" || variant === "inset" ? "w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "w-(--sidebar-width-icon)" : variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }),
 			/* @__PURE__ */ jsx("div", {
 				ref: sidebarRef,
-				className: cn("border-sidebar-border fixed inset-y-0 hidden w-(--sidebar-width) transition-[left,right,width] duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] md:flex", expandBehavior === "overlay" ? "z-50" : "z-10", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
+				className: cn("fixed inset-y-0 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", expandBehavior === "overlay" ? "z-50" : "z-20", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "bg-sidebar group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
 				...props,
-				children: /* @__PURE__ */ jsx("div", {
+				children: /* @__PURE__ */ jsxs("div", {
 					"data-sidebar": "sidebar",
-					className: cn("bg-sidebar flex h-full w-full flex-col", "group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", expandBehavior === "overlay" && state === "expanded" && "shadow-lg"),
-					children
+					className: cn("relative flex h-full w-full flex-col", variant === "floating" || variant === "inset" ? "bg-sidebar" : null, "group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", expandBehavior === "overlay" && state === "expanded" && "shadow-lg"),
+					children: [children, variant !== "floating" && variant !== "inset" && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: cn("bg-sidebar-border pointer-events-none absolute inset-y-0 z-20 w-px", side === "left" ? "right-0" : "left-0")
+					})]
 				})
 			}),
 			showBackdropElement && /* @__PURE__ */ jsx("div", {
@@ -512,11 +529,21 @@ function SidebarHeader({ className, ...props }) {
 		...props
 	});
 }
-function SidebarFooter({ className, ...props }) {
+function SidebarFooter({ className, onMouseEnter, onMouseLeave, ...props }) {
+	const { cancelHoverLeave, handleMouseLeave } = useSidebar();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar-footer",
 		"data-sidebar": "footer",
 		className: cn("flex flex-col gap-2 p-2", className),
+		onMouseEnter: (event) => {
+			cancelHoverLeave();
+			onMouseEnter?.(event);
+		},
+		onMouseLeave: (event) => {
+			const next = event.relatedTarget;
+			if (!(next instanceof Element && next.closest("[data-sidebar=\"content\"]"))) handleMouseLeave();
+			onMouseLeave?.(event);
+		},
 		...props
 	});
 }
@@ -528,11 +555,21 @@ function SidebarSeparator({ className, ...props }) {
 		...props
 	});
 }
-function SidebarContent({ className, ...props }) {
+function SidebarContent({ className, onMouseEnter, onMouseLeave, ...props }) {
+	const { handleMouseEnter, handleMouseLeave } = useSidebar();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar-content",
 		"data-sidebar": "content",
 		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
+		onMouseEnter: (event) => {
+			handleMouseEnter();
+			onMouseEnter?.(event);
+		},
+		onMouseLeave: (event) => {
+			const next = event.relatedTarget;
+			if (!(next instanceof Element && next.closest("[data-sidebar=\"footer\"]"))) handleMouseLeave();
+			onMouseLeave?.(event);
+		},
 		...props
 	});
 }

package/dist/styles/shadcn/animations.css

@@ -92,10 +92,10 @@
   }
 
   .animate-collapsible-down {
-    animation: collapsibleDown 0.2s ease-out;
+    animation: collapsibleDown 0.28s cubic-bezier(0.32, 0.72, 0, 1);
   }
 
   .animate-collapsible-up {
-    animation: collapsibleUp 0.2s ease-out;
+    animation: collapsibleUp 0.22s cubic-bezier(0.32, 0.72, 0, 1);
   }
 }

package/dist/task-queue/index.mjs

@@ -1,2 +1,2 @@
-import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-pqFd4rSf.mjs";
+import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-ClLLTMxU.mjs";
 export { LocalTaskStorage, RedisTaskStorage, TaskPanel, TaskPanelActions, TaskPanelCounter, TaskPanelHeader, TaskPanelItem, TaskQueue, TaskQueueDropdown, TaskQueueProvider, TaskQueueTrigger, TaskSummaryDialog, createOrgMetadata, createProjectMetadata, createUserMetadata, detectStorage, getContextLabel, matchesCurrentScope, useCurrentScope, useTaskQueue, useTasksWithLabels };

package/dist/{task-queue-dropdown-pqFd4rSf.mjs → task-queue-dropdown-ClLLTMxU.mjs}

@@ -4,7 +4,7 @@ import { t as SpinnerIcon } from "./spinner.icon-BYUMQ8H-.mjs";
 import { t as Button } from "./button-A1qTjZ8U.mjs";
 import { t as Icon } from "./icon-wrapper-DKfJlJd0.mjs";
 import { t as Dialog } from "./dialog-N2pkQIc4.mjs";
-import { t as ResponsiveDropdown } from "./responsive-dropdown-fCmduKaz.mjs";
+import { t as ResponsiveDropdown } from "./responsive-dropdown-n0Txkax5.mjs";
 import { a as TooltipTrigger, n as Tooltip, r as TooltipContent, t as Tooltip$1 } from "./tooltip-C_SL1imw.mjs";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table/index.mjs";
 import { Ban, CheckCircle2, CircleAlert, CircleCheck, CornerDownRightIcon, FileIcon, ListTodo, X, XCircle } from "lucide-react";

package/dist/time-picker/index.mjs

@@ -1,2 +1,2 @@
-import { t as TimePicker } from "../time-picker-B_fN5vhO.mjs";
+import { t as TimePicker } from "../time-picker-CFhaHTtI.mjs";
 export { TimePicker };

package/dist/{time-picker-B_fN5vhO.mjs → time-picker-CFhaHTtI.mjs}

@@ -1,5 +1,5 @@
-import { n as TimePicker$1 } from "./picker-b5-x-EHs.mjs";
 import { t as useDeprecationWarning } from "./use-deprecation-warning-DXrGc0jX.mjs";
+import { n as TimePicker$1 } from "./picker-raVuDxsh.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/features/time-picker/time-picker.tsx
 const STEP_VALUES = [

package/dist/{to-api-format-43Boq7OR.mjs → to-api-format-WC7b9Mcv.mjs}

@@ -2,9 +2,9 @@ import { t as cn } from "./utils-Bu32wN-x.mjs";
 import { t as Button } from "./button-A1qTjZ8U.mjs";
 import { Calendar } from "./calendar/index.mjs";
 import { t as Input } from "./input-j4tbmYYz.mjs";
-import { t as ResponsivePopover } from "./responsive-popover-DJZgXWIE.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-C_1nzIvm.mjs";
 import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-DCU44UO6.mjs";
-import { G as getTimezoneOffset, K as isoToZonedDate, U as formatTimezoneLabel, W as getBrowserTimezone, nt as startOfDayInTz, q as zonedDateToIso, r as DateTimeRangePicker, tt as endOfDayInTz } from "./picker-b5-x-EHs.mjs";
+import { F as zonedDateToIso, M as getBrowserTimezone, N as getTimezoneOffset, P as isoToZonedDate, U as endOfDayInTz, W as startOfDayInTz, j as formatTimezoneLabel, t as DateTimeRangePicker } from "./date-time-range-picker-Dog33Ry0.mjs";
 import { t as useDeprecationWarning } from "./use-deprecation-warning-DXrGc0jX.mjs";
 import { CalendarIcon, Globe } from "lucide-react";
 import { useCallback, useEffect, useId, useRef, useState } from "react";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.3.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
@@ -203,6 +203,16 @@
       "types": "./dist/components/features/grouped-table/index.d.ts",
       "default": "./dist/grouped-table/index.mjs"
     },
+    "./logs": {
+      "source": "./src/components/features/logs/index.ts",
+      "types": "./dist/components/features/logs/index.d.ts",
+      "default": "./dist/logs/index.mjs"
+    },
+    "./logs/fixtures": {
+      "source": "./src/components/features/logs/fixtures/index.ts",
+      "types": "./dist/components/features/logs/fixtures/index.d.ts",
+      "default": "./dist/logs/fixtures/index.mjs"
+    },
     "./tabs": {
       "source": "./src/components/base/tabs/index.ts",
       "types": "./dist/components/base/tabs/index.d.ts",
@@ -375,6 +385,11 @@
       "types": "./dist/components/features/data-table/index.d.ts",
       "default": "./dist/data-table/index.mjs"
     },
+    "./date-time": {
+      "source": "./src/components/features/date-time/index.ts",
+      "types": "./dist/components/features/date-time/index.d.ts",
+      "default": "./dist/date-time/index.mjs"
+    },
     "./date-time-picker": {
       "source": "./src/components/features/date-time-picker/index.ts",
       "types": "./dist/components/features/date-time-picker/index.d.ts",