erp-pro-ui 0.1.8 → 0.2.0

package/dist/chunks/{sidebar-D9D651F6.cjs → sidebar-Kkr45nuN.cjs}

@@ -1,9 +1,9 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_utils = require("./utils-LRbEQHYs.cjs");
 const require_icons = require("./icons-CRanVZB1.cjs");
-const require_button = require("./button-xqernofO.cjs");
-const require_DropdownMenu = require("./DropdownMenu-DOvo5pV_.cjs");
-const require_typography = require("./typography-DUD6Dzd5.cjs");
+const require_button = require("./button-C4MXPxsC.cjs");
+const require_DropdownMenu = require("./DropdownMenu-BDrNYO-D.cjs");
+const require_typography = require("./typography-LwwY_MOy.cjs");
 const require_SunToMoonButton = require("./SunToMoonButton-jS4BJD9q.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -55,13 +55,13 @@ function NavLink({ className, children, style, borderRadius, disabled = false, h
 }
 //#endregion
 //#region src/components/navigation/sidebar/SidebarLinks.tsx
-var rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;
-function resolveDirection(direction) {
+var rtlLanguages$1 = /^(ar|fa|ur|he)(-|$)/i;
+function resolveDirection$1(direction) {
 	if (direction !== "auto") return direction;
 	if (typeof document === "undefined") return "ltr";
 	const explicitDirection = document.documentElement.getAttribute("dir") ?? void 0;
 	if (explicitDirection === "rtl" || explicitDirection === "ltr") return explicitDirection;
-	if (typeof navigator !== "undefined" && rtlLanguages.test(navigator.language)) return "rtl";
+	if (typeof navigator !== "undefined" && rtlLanguages$1.test(navigator.language)) return "rtl";
 	return "ltr";
 }
 function isRouteActive(item, activePath) {
@@ -70,7 +70,7 @@ function isRouteActive(item, activePath) {
 	return activePath === item.href || activePath.startsWith(`${item.href}/`);
 }
 function SidebarLinks({ items, activePath, onItemSelect, direction = "auto", className, itemClassName, activeItemClassName }) {
-	const effectiveDirection = resolveDirection(direction);
+	const effectiveDirection = resolveDirection$1(direction);
 	const visibleItems = items.filter((item) => !item.hidden);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 		className: require_utils.mergeClassNames("space-y-1.5", className),
@@ -226,6 +226,19 @@ var notificationItems = [
 		toneClassName: "bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border"
 	}
 ];
+var rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;
+function resolveDirection(direction) {
+	if (direction === "rtl" || direction === "ltr") return direction;
+	if (typeof document !== "undefined") {
+		const documentDirection = document.documentElement.getAttribute("dir");
+		if (documentDirection === "rtl" || documentDirection === "ltr") return documentDirection;
+	}
+	if (typeof navigator !== "undefined" && rtlLanguages.test(navigator.language)) return "rtl";
+	return "ltr";
+}
+function resolveSlot(slot, context) {
+	return typeof slot === "function" ? slot(context) : slot;
+}
 function useControllableOpenState(open, defaultOpen, onOpenChange) {
 	const [internalOpen, setInternalOpen] = (0, react.useState)(defaultOpen);
 	const isControlled = open !== void 0;
@@ -234,8 +247,30 @@ function useControllableOpenState(open, defaultOpen, onOpenChange) {
 		onOpenChange?.(nextOpen);
 	}, [isControlled, onOpenChange])];
 }
-function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange, direction = "auto", activePath, onItemSelect, brand, sidebarFooter, header, breadcrumb = "Pages / Dashboard", title = "Dashboard", children, className, contentClassName, mainClassName, autoHideOnMobileBreakpoint = true }) {
+function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange, direction = "auto", activePath, onItemSelect, brand, sidebarNavbar, sidebarFooter, sidebarClassName, sidebarLinksClassName, sidebarItemClassName, sidebarActiveItemClassName, sidebarOverlayClassName, sidebarCloseLabel, showSidebarOverlay, header, headerLeading, headerActions, headerClassName, headerTitleClassName, headerActionsClassName, breadcrumb = "Pages / Dashboard", title = "Dashboard", children, className, contentClassName, mainClassName, autoHideOnMobileBreakpoint = true }) {
 	const [resolvedOpen, setOpen] = useControllableOpenState(open, defaultOpen, onOpenChange);
+	const resolvedDirection = resolveDirection(direction);
+	const isRtl = resolvedDirection === "rtl";
+	const openSidebar = (0, react.useCallback)(() => setOpen(true), [setOpen]);
+	const closeSidebar = (0, react.useCallback)(() => setOpen(false), [setOpen]);
+	const toggleSidebar = (0, react.useCallback)(() => setOpen(!resolvedOpen), [resolvedOpen, setOpen]);
+	const headerContext = (0, react.useMemo)(() => ({
+		isSidebarOpen: resolvedOpen,
+		setSidebarOpen: setOpen,
+		openSidebar,
+		closeSidebar,
+		toggleSidebar,
+		direction: resolvedDirection,
+		isRtl
+	}), [
+		closeSidebar,
+		isRtl,
+		openSidebar,
+		resolvedDirection,
+		resolvedOpen,
+		setOpen,
+		toggleSidebar
+	]);
 	(0, react.useEffect)(() => {
 		if (!autoHideOnMobileBreakpoint || typeof window === "undefined") return;
 		const mediaQuery = window.matchMedia("(max-width: 1279px)");
@@ -247,240 +282,208 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 		mediaQuery.addEventListener("change", listener);
 		return () => mediaQuery.removeEventListener("change", listener);
 	}, [autoHideOnMobileBreakpoint, setOpen]);
-	const defaultHeader = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
-		className: "sticky top-2 z-40 mb-4 rounded-md border border-ds-border-3 bg-ds-surface-1/95  px-4 py-3 shadow-[0_4px_14px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)] backdrop-blur-md flex items-center  ",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex w-full justify-between gap-4",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "min-w-0",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
-					variant: "caption",
-					className: "text-ds-3 capitalize",
-					children: breadcrumb
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
-					variant: "h5",
-					weight: "black",
-					className: "truncate leading-7 capitalize",
-					children: title
+	const defaultHeaderActions = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			type: "button",
+			variant: "tertiary",
+			size: "small",
+			className: "h-9 w-9 rounded-full p-0! xl:hidden",
+			"aria-label": "Toggle sidebar",
+			onClick: toggleSidebar,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HamburgerIcon, { isOpen: resolvedOpen })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu, {
+			animationClassName: isRtl ? "origin-top-left" : "origin-top-right",
+			panelClassName: require_utils.mergeClassNames("top-[44px]", isRtl ? "left-0" : "right-0"),
+			trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
+				type: "button",
+				variant: "tertiary",
+				size: "small",
+				className: "relative h-9 w-9 rounded-full p-0!",
+				"aria-label": "Open notifications",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.BellIcon, { className: "h-5 w-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_utils.mergeClassNames("bg-ds-state-danger text-ds-on-accent absolute -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[0.68rem] font-bold", isRtl ? "-left-0.5" : "-right-0.5"),
+					children: notificationItems.length
 				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "border-ds-border-4 hidden min-h-11 items-center gap-1 rounded-full border bg-ds-surface-1 px-2 py-1 shadow-[0_2px_8px_color-mix(in_srgb,var(--ds-color-fg)_6%,transparent)] sm:flex",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-						type: "button",
-						variant: "tertiary",
-						size: "small",
-						className: "h-9 w-9 rounded-full p-0! xl:hidden",
-						"aria-label": "Toggle sidebar",
-						onClick: () => setOpen(!resolvedOpen),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HamburgerIcon, { isOpen: resolvedOpen })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu, {
-						panelClassName: "right-0 top-[44px]",
-						trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
-							type: "button",
-							variant: "tertiary",
-							size: "small",
-							className: "relative h-9 w-9 rounded-full p-0!",
-							"aria-label": "Open notifications",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.BellIcon, { className: "h-5 w-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "bg-ds-state-danger text-ds-on-accent absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[0.68rem] font-bold",
-								children: notificationItems.length
-							})]
-						}),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "w-[340px] rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "mb-2 flex items-center justify-between",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
-									variant: "body2",
-									weight: "black",
-									children: "Notifications"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-									type: "button",
-									variant: "tertiary",
-									size: "small",
-									className: "px-2 py-1 text-xs",
-									children: "Mark all read"
-								})]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "space-y-2",
-								children: notificationItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
-									type: "button",
-									variant: "tertiary",
-									size: "small",
-									className: "w-full justify-start rounded-lg border border-ds-border-3 px-2.5 py-2 text-left",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: `mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${item.toneClassName}`,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.BellIcon, { className: "h-3.5 w-3.5" })
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "min-w-0 flex-1",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "block truncate text-xs font-semibold text-ds-1",
-												children: item.title
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "block truncate text-[11px] text-ds-3",
-												children: item.description
-											})]
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "text-[11px] text-ds-3",
-											children: item.time
-										})
-									]
-								}, item.id))
-							})]
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "w-[340px] rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mb-2 flex items-center justify-between gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
+						variant: "body2",
+						weight: "black",
+						children: "Notifications"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 						type: "button",
 						variant: "tertiary",
 						size: "small",
-						className: "h-9 w-9 rounded-full p-0!",
-						"aria-label": "Toggle theme",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "flex  cursor-pointer rounded-full",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SunToMoonButton.SunToMoonButton, { showLabelAndImage: false })
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						className: "px-2 py-1 text-xs",
+						children: "Mark all read"
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "space-y-2",
+					children: notificationItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
 						type: "button",
 						variant: "tertiary",
 						size: "small",
-						className: "h-9 w-9 rounded-full p-0!",
-						"aria-label": "Toggle fullscreen",
-						onClick: () => {
-							if (document.fullscreenElement) document.exitFullscreen();
-							else document.documentElement.requestFullscreen();
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FullScreenIcon, { className: "h-5 w-5" })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu, {
-						panelClassName: "right-0 top-[44px]",
-						trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-							type: "button",
-							variant: "primary",
-							size: "small",
-							className: "h-9 w-9 rounded-full p-0! text-sm font-black",
-							"aria-label": "Open user menu",
+						className: require_utils.mergeClassNames("w-full rounded-lg border border-ds-border-3 px-2.5 py-2", isRtl ? "justify-end text-right" : "justify-start text-left"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${item.toneClassName}`,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.BellIcon, { className: "h-3.5 w-3.5" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "block truncate text-xs font-semibold text-ds-1",
+									children: item.title
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "block truncate text-[11px] text-ds-3",
+									children: item.description
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-[11px] text-ds-3",
+								children: item.time
+							})
+						]
+					}, item.id))
+				})]
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			type: "button",
+			variant: "tertiary",
+			size: "small",
+			className: "h-9 w-9 rounded-full p-0!",
+			"aria-label": "Toggle theme",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex cursor-pointer rounded-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SunToMoonButton.SunToMoonButton, { showLabelAndImage: false })
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			type: "button",
+			variant: "tertiary",
+			size: "small",
+			className: "h-9 w-9 rounded-full p-0!",
+			"aria-label": "Toggle fullscreen",
+			onClick: () => {
+				if (document.fullscreenElement) document.exitFullscreen();
+				else document.documentElement.requestFullscreen();
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FullScreenIcon, { className: "h-5 w-5" })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu, {
+			animationClassName: isRtl ? "origin-top-left" : "origin-top-right",
+			panelClassName: require_utils.mergeClassNames("top-[44px]", isRtl ? "left-0" : "right-0"),
+			trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				type: "button",
+				variant: "primary",
+				size: "small",
+				className: "h-9 w-9 rounded-full p-0! text-sm font-black",
+				"aria-label": "Open user menu",
+				children: "JD"
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "w-52 rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mb-2 flex items-center gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "bg-ds-accent text-ds-on-accent inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-black",
 							children: "JD"
-						}),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "w-52 rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "mb-2 flex items-center gap-2",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "bg-ds-accent text-ds-on-accent inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-black",
-										children: "JD"
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "min-w-0",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
-											variant: "body2",
-											weight: "black",
-											className: "truncate",
-											children: "John Doe"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
-											variant: "caption",
-											className: "text-ds-3",
-											children: "Administrator"
-										})]
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "my-2 border-t border-ds-border-3" }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-col gap-1",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-											type: "button",
-											variant: "tertiary",
-											size: "small",
-											className: "justify-start px-2 py-1.5 text-sm",
-											children: "Profile"
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-											type: "button",
-											variant: "tertiary",
-											size: "small",
-											className: "justify-start px-2 py-1.5 text-sm",
-											children: "Settings"
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-											type: "button",
-											variant: "tertiary",
-											size: "small",
-											className: "justify-start px-2 py-1.5 text-sm text-ds-state-error-text",
-											children: "Log Out"
-										})
-									]
-								})
-							]
-						})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
+								variant: "body2",
+								weight: "black",
+								className: "truncate",
+								children: "John Doe"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
+								variant: "caption",
+								className: "text-ds-3",
+								children: "Administrator"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "my-2 border-t border-ds-border-3" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col gap-1",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+								type: "button",
+								variant: "tertiary",
+								size: "small",
+								className: require_utils.mergeClassNames("px-2 py-1.5 text-sm", isRtl ? "justify-end text-right" : "justify-start text-left"),
+								children: "Profile"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+								type: "button",
+								variant: "tertiary",
+								size: "small",
+								className: require_utils.mergeClassNames("px-2 py-1.5 text-sm", isRtl ? "justify-end text-right" : "justify-start text-left"),
+								children: "Settings"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+								type: "button",
+								variant: "tertiary",
+								size: "small",
+								className: require_utils.mergeClassNames("px-2 py-1.5 text-sm text-ds-state-error-text", isRtl ? "justify-end text-right" : "justify-start text-left"),
+								children: "Log Out"
+							})
+						]
 					})
 				]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mt-2 flex items-center gap-1 sm:hidden",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-					type: "button",
-					variant: "tertiary",
-					size: "small",
-					className: "p-1!",
-					"aria-label": "Toggle sidebar",
-					onClick: () => setOpen(!resolvedOpen),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HamburgerIcon, { isOpen: resolvedOpen })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
-					type: "button",
-					variant: "tertiary",
-					size: "small",
-					className: "relative h-9 w-9 rounded-full p-0!",
-					"aria-label": "Open notifications",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.BellIcon, { className: "h-5 w-5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-ds-1 absolute -right-3 top-2 text-xs font-bold",
-						children: "3"
+			})
+		})
+	] }), [
+		isRtl,
+		resolvedOpen,
+		toggleSidebar
+	]);
+	const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);
+	const resolvedHeaderActions = headerActions === void 0 ? defaultHeaderActions : resolveSlot(headerActions, headerContext);
+	const defaultHeader = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		dir: resolvedDirection,
+		className: require_utils.mergeClassNames("sticky top-2 z-40 mb-4 flex items-center rounded-md border border-ds-border-3 bg-ds-surface-1/95 px-4 py-3 shadow-[0_4px_14px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)] backdrop-blur-md", headerClassName),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_utils.mergeClassNames("flex w-full justify-between gap-4", isRtl && "flex-row-reverse"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.mergeClassNames("flex min-w-0 items-center gap-3", isRtl && "flex-row-reverse text-right", headerTitleClassName),
+				children: [resolvedHeaderLeading, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
+						variant: "caption",
+						className: "text-ds-3 capitalize",
+						children: breadcrumb
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
+						variant: "h5",
+						weight: "black",
+						className: "truncate leading-7 capitalize",
+						children: title
 					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-					type: "button",
-					variant: "tertiary",
-					size: "small",
-					className: "h-9 w-9 rounded-full p-0!",
-					"aria-label": "Toggle theme",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CircleIcon, { className: "h-4 w-4 text-ds-warning" })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-					type: "button",
-					variant: "tertiary",
-					size: "small",
-					className: "h-9 w-9 rounded-full p-0!",
-					"aria-label": "Toggle fullscreen",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FullScreenIcon, { className: "h-5 w-5" })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-					type: "button",
-					variant: "primary",
-					size: "small",
-					className: "ml-1 h-9 w-9 rounded-full p-0! text-sm font-black",
-					"aria-label": "Open user menu",
-					children: "JD"
-				})
-			]
-		})]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_utils.mergeClassNames("border-ds-border-4 flex min-h-11 shrink-0 items-center gap-1 rounded-full border bg-ds-surface-1 px-2 py-1 shadow-[0_2px_8px_color-mix(in_srgb,var(--ds-color-fg)_6%,transparent)]", isRtl && "flex-row-reverse", headerActionsClassName),
+				children: resolvedHeaderActions
+			})]
+		})
 	}), [
 		breadcrumb,
-		resolvedOpen,
-		setOpen,
+		headerActionsClassName,
+		headerClassName,
+		headerTitleClassName,
+		isRtl,
+		resolvedDirection,
+		resolvedHeaderActions,
+		resolvedHeaderLeading,
 		title
 	]);
-	const resolvedHeader = typeof header === "function" ? header({
-		isSidebarOpen: resolvedOpen,
-		toggleSidebar: () => setOpen(!resolvedOpen)
-	}) : header;
+	const resolvedHeader = header === void 0 ? void 0 : resolveSlot(header, headerContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		dir: resolvedDirection,
 		className: require_utils.mergeClassNames("flex h-full w-full", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {
 			items,
@@ -489,12 +492,20 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 			activePath,
 			onItemSelect,
 			direction,
+			navbar: sidebarNavbar,
 			brand,
-			footer: sidebarFooter
+			footer: sidebarFooter,
+			className: sidebarClassName,
+			linksClassName: sidebarLinksClassName,
+			itemClassName: sidebarItemClassName,
+			activeItemClassName: sidebarActiveItemClassName,
+			overlayClassName: sidebarOverlayClassName,
+			closeLabel: sidebarCloseLabel,
+			showOverlay: showSidebarOverlay
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "h-full w-full",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
-				className: require_utils.mergeClassNames("mx-2 flex-none transition-all duration-200 ease-in-out", direction === "rtl" ? "xl:mr-[18.5rem]" : "xl:ml-[18.5rem]", mainClassName),
+				className: require_utils.mergeClassNames("mx-2 flex-none transition-all duration-200 ease-in-out", isRtl ? "xl:mr-[18.5rem]" : "xl:ml-[18.5rem]", mainClassName),
 				children: [resolvedHeader ?? defaultHeader, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 					className: require_utils.mergeClassNames("mx-auto min-h-[calc(100dvh-180px)] rounded-md md:min-h-[calc(100dvh-116px)]", contentClassName),
 					children
@@ -535,4 +546,4 @@ Object.defineProperty(exports, "SidebarLinks", {
 	}
 });
 
-//# sourceMappingURL=sidebar-D9D651F6.cjs.map
+//# sourceMappingURL=sidebar-Kkr45nuN.cjs.map