erp-pro-ui 0.2.3 → 0.2.5

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

@@ -85,6 +85,7 @@ function SidebarLinks({ items, activePath, onItemSelect, direction = "auto", cla
 					onClick: (event) => {
 						item.onSelect?.(event);
 						onItemSelect?.(item, event);
+						if (onItemSelect) event.preventDefault();
 					},
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -133,7 +134,7 @@ function Sidebar({ items, open, defaultOpen = false, onOpenChange, activePath, o
 	const [resolvedOpen, setOpen] = useControllableOpenState$1(open, defaultOpen, onOpenChange);
 	const content = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
 		dir: direction === "auto" ? void 0 : direction,
-		className: require_utils.mergeClassNames("fixed inset-y-2 z-50 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl", "transition-transform duration-200 ease-out xl:translate-x-0", direction === "rtl" ? "right-2" : "left-2", resolvedOpen ? "translate-x-0" : direction === "rtl" ? "translate-x-[110%] xl:translate-x-0" : "-translate-x-[110%] xl:translate-x-0", className),
+		className: require_utils.mergeClassNames("fixed inset-y-2 z-70 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl", "transition-transform duration-200 ease-out xl:translate-x-0", direction === "rtl" ? "right-2" : "left-2", resolvedOpen ? "translate-x-0" : direction === "rtl" ? "translate-x-[110%] xl:translate-x-0" : "-translate-x-[110%] xl:translate-x-0", className),
 		style: {
 			backdropFilter: "blur(14px) saturate(120%)",
 			WebkitBackdropFilter: "blur(14px) saturate(120%)"
@@ -197,7 +198,7 @@ function Sidebar({ items, open, defaultOpen = false, onOpenChange, activePath, o
 		size: "small",
 		"aria-hidden": !resolvedOpen,
 		tabIndex: resolvedOpen ? 0 : -1,
-		className: require_utils.mergeClassNames("fixed inset-0 z-40 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden", resolvedOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0", overlayClassName),
+		className: require_utils.mergeClassNames("fixed inset-0 z-65 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden", resolvedOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0", overlayClassName),
 		onClick: () => setOpen(false)
 	})] });
 }
@@ -247,7 +248,7 @@ function useControllableOpenState(open, defaultOpen, onOpenChange) {
 		onOpenChange?.(nextOpen);
 	}, [isControlled, onOpenChange])];
 }
-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 }) {
+function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange, direction = "auto", activePath, onItemSelect, brand, sidebarNavbar, sidebarFooter, sidebarClassName, sidebarLinksClassName, sidebarItemClassName, sidebarActiveItemClassName, sidebarOverlayClassName, sidebarCloseLabel, showSidebarOverlay, header, headerLeading, headerActions, headerActionsLeading, headerActionsTrailing, 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";
@@ -352,17 +353,7 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 				})]
 			})
 		}),
-		/* @__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_SunToMoonButton.SunToMoonButton, { showLabelAndImage: false }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 			type: "button",
 			variant: "tertiary",
@@ -444,7 +435,13 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 		toggleSidebar
 	]);
 	const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);
-	const resolvedHeaderActions = headerActions === void 0 ? defaultHeaderActions : resolveSlot(headerActions, headerContext);
+	const resolvedHeaderActionsLeading = headerActionsLeading ? resolveSlot(headerActionsLeading, headerContext) : null;
+	const resolvedHeaderActionsTrailing = headerActionsTrailing ? resolveSlot(headerActionsTrailing, headerContext) : null;
+	const resolvedHeaderActions = headerActions === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		resolvedHeaderActionsLeading,
+		defaultHeaderActions,
+		resolvedHeaderActionsTrailing
+	] }) : 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),
@@ -546,4 +543,4 @@ Object.defineProperty(exports, "SidebarLinks", {
 	}
 });
 
-//# sourceMappingURL=sidebar-Kkr45nuN.cjs.map
+//# sourceMappingURL=sidebar-3i4mGE6T.cjs.map

package/dist/chunks/sidebar-3i4mGE6T.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-3i4mGE6T.cjs","names":[],"sources":["../../src/components/navigation/sidebar/HamburgerIcon.tsx","../../src/components/navigation/sidebar/NavLink.tsx","../../src/components/navigation/sidebar/SidebarLinks.tsx","../../src/components/navigation/sidebar/Sidebar.tsx","../../src/components/navigation/sidebar/DashboardSidebarShell.tsx"],"sourcesContent":["import { mergeClassNames } from \"../../../utils\";\n\nexport interface HamburgerIconProps {\n  isOpen: boolean;\n  className?: string;\n}\n\nconst lineClassName =\n  \"block h-0.5 w-full rounded-lg bg-current transition-all duration-300 ease-in-out\";\n\nexport function HamburgerIcon({ isOpen, className }: HamburgerIconProps) {\n  return (\n    <span\n      className={mergeClassNames(\n        \"relative flex h-4 w-5 flex-col items-center justify-between\",\n        className,\n      )}\n      aria-hidden=\"true\"\n    >\n      <span\n        className={mergeClassNames(\n          lineClassName,\n          isOpen && \"translate-y-[5px] rotate-45 transform\",\n        )}\n      />\n      <span className={mergeClassNames(lineClassName, isOpen && \"w-0\")} />\n      <span\n        className={mergeClassNames(\n          lineClassName,\n          isOpen && \"-translate-y-[9px] -rotate-45 transform\",\n        )}\n      />\n    </span>\n  );\n}\n","import { useMemo } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport type { SidebarNavLinkProps } from \"./types\";\n\nexport function NavLink({\n  className,\n  children,\n  style,\n  borderRadius,\n  disabled = false,\n  href,\n  target,\n  rel,\n  onClick,\n}: SidebarNavLinkProps) {\n  const memoizedStyle = useMemo(\n    () => (borderRadius !== undefined ? { ...style, borderRadius } : style),\n    [borderRadius, style],\n  );\n\n  if (href) {\n    const resolvedRel = target === \"_blank\" ? (rel ?? \"noreferrer noopener\") : rel;\n\n    return (\n      <a\n        href={href}\n        className={className}\n        style={memoizedStyle}\n        target={target}\n        rel={resolvedRel}\n        aria-disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          onClick?.(event);\n        }}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"tertiary\"\n      className={className}\n      style={memoizedStyle}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  );\n}\n","import { mergeClassNames } from \"../../../utils\";\nimport { NavLink } from \"./NavLink\";\nimport type { SidebarDirection, SidebarItem, SidebarLinksProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: SidebarDirection,\n): Exclude<SidebarDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction isRouteActive(item: SidebarItem, activePath?: string): boolean {\n  if (typeof item.active === \"boolean\") {\n    return item.active;\n  }\n\n  if (!activePath || !item.href) {\n    return false;\n  }\n\n  return activePath === item.href || activePath.startsWith(`${item.href}/`);\n}\n\nexport function SidebarLinks({\n  items,\n  activePath,\n  onItemSelect,\n  direction = \"auto\",\n  className,\n  itemClassName,\n  activeItemClassName,\n}: SidebarLinksProps) {\n  const effectiveDirection = resolveDirection(direction);\n  const visibleItems = items.filter((item) => !item.hidden);\n\n  return (\n    <ul className={mergeClassNames(\"space-y-1.5\", className)}>\n      {visibleItems.map((item) => {\n        const active = isRouteActive(item, activePath);\n\n        return (\n          <li key={item.id} className=\"relative\">\n            <NavLink\n              href={item.href}\n              disabled={item.disabled}\n              className={mergeClassNames(\n                \"group relative flex w-full items-center gap-2.5 rounded-md border px-3 py-2.5 transition-all duration-200\",\n                effectiveDirection === \"rtl\" ? \"text-right\" : \"text-left\",\n                \"border-transparent text-ds-2 hover:border-ds-border-3 hover:bg-ds-surface-2/80 hover:text-ds-1\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-canvas\",\n                item.disabled && \"cursor-not-allowed opacity-50\",\n                active &&\n                  \"border-ds-border-accent/35 bg-ds-accent-subtle text-ds-1 shadow-[0_4px_12px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)]\",\n                active && activeItemClassName,\n                itemClassName,\n              )}\n              onClick={(event) => {\n                item.onSelect?.(event);\n                onItemSelect?.(item, event);\n                if (onItemSelect) {\n                  event.preventDefault();\n                }\n              }}\n            >\n              <span\n                className={mergeClassNames(\n                  \"inline-flex h-5 w-5 shrink-0 items-center justify-center\",\n                  active ? \"text-ds-1\" : \"text-ds-2 group-hover:text-ds-1\",\n                )}\n                aria-hidden=\"true\"\n              >\n                {item.icon}\n              </span>\n              <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n                {item.label}\n              </span>\n              {item.badge ? (\n                <span className=\"shrink-0 text-xs text-ds-2\">{item.badge}</span>\n              ) : null}\n            </NavLink>\n            {active ? (\n              <span\n                className={mergeClassNames(\n                  \"pointer-events-none absolute  top-1.5 h-[calc(100%-12px)] w-2\",\n                  effectiveDirection === \"rtl\" ? \"right-0\" : \"left-0\",\n                )}\n                aria-hidden=\"true\"\n              >\n                {/* <span className=\"absolute inset-y-1 left-1/2 w-2 -translate-x-1/2 rounded-full bg-ds-accent/25 blur-[4px]\" /> */}\n                {/* <span className=\"absolute inset-y-0 left-1/6 w-[2px] -translate-x-1/2 rounded-full bg-ds-accent motion-safe:animate-pulse\" /> */}\n                {/* <span className=\"absolute top-2.5 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-ds-accent shadow-[0_0_10px_color-mix(in_srgb,var(--ds-color-accent)_55%,transparent)] motion-safe:animate-pulse\" /> */}\n              </span>\n            ) : null}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n","import { useCallback, useMemo, useState } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { SidebarLinks } from \"./SidebarLinks\";\nimport type { SidebarProps } from \"./types\";\n\nfunction useControllableOpenState(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange?: (open: boolean) => void,\n) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return [resolvedOpen, setOpen] as const;\n}\n\nconst fallbackBrand = (\n  <div className=\"text-xl font-bold uppercase tracking-wide text-ds-1\">\n    <span className=\"text-ds-accent\">ERP</span>\n    <span className=\"font-medium\">PRO</span>\n  </div>\n);\n\nexport function Sidebar({\n  items,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  activePath,\n  onItemSelect,\n  direction = \"auto\",\n  navbar,\n  brand = fallbackBrand,\n  footer,\n  className,\n  linksClassName,\n  itemClassName,\n  activeItemClassName,\n  overlayClassName,\n  closeLabel = \"Toggle sidebar\",\n  showOverlay = true,\n}: SidebarProps) {\n  const [resolvedOpen, setOpen] = useControllableOpenState(\n    open,\n    defaultOpen,\n    onOpenChange,\n  );\n\n  const content = useMemo(\n    () => (\n      <aside\n        dir={direction === \"auto\" ? undefined : direction}\n        className={mergeClassNames(\n          \"fixed inset-y-2 z-70 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl\",\n          \"transition-transform duration-200 ease-out xl:translate-x-0\",\n          direction === \"rtl\" ? \"right-2\" : \"left-2\",\n          resolvedOpen\n            ? \"translate-x-0\"\n            : direction === \"rtl\"\n              ? \"translate-x-[110%] xl:translate-x-0\"\n              : \"-translate-x-[110%] xl:translate-x-0\",\n          className,\n        )}\n        style={{\n          backdropFilter: \"blur(14px) saturate(120%)\",\n          WebkitBackdropFilter: \"blur(14px) saturate(120%)\",\n        }}\n      >\n        {navbar ? (\n          <div className=\"mb-4\">{navbar}</div>\n        ) : (\n          <div className=\"mb-4 flex items-center justify-between gap-3 rounded-xl border border-ds-border-3 bg-ds-surface-2/85 px-3 py-2\">\n            <div className=\"min-w-0 flex-1\">{brand}</div>\n            <Button\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"small\"\n              aria-label={closeLabel}\n              className={mergeClassNames(\n                \"p-1! text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\",\n                \"xl:hidden\",\n              )}\n              onClick={() => setOpen(!resolvedOpen)}\n            >\n              <HamburgerIcon isOpen={resolvedOpen} />\n            </Button>\n          </div>\n        )}\n\n        <div className=\"mb-5 h-px bg-ds-border-3\" />\n\n        <div className=\"min-h-0 flex-1 overflow-y-auto pr-1\">\n          <SidebarLinks\n            items={items}\n            activePath={activePath}\n            onItemSelect={onItemSelect}\n            direction={direction}\n            className={linksClassName}\n            itemClassName={itemClassName}\n            activeItemClassName={activeItemClassName}\n          />\n        </div>\n\n        {footer ? <div className=\"mt-4\">{footer}</div> : null}\n      </aside>\n    ),\n    [\n      activeItemClassName,\n      activePath,\n      brand,\n      className,\n      closeLabel,\n      direction,\n      footer,\n      itemClassName,\n      items,\n      linksClassName,\n      onItemSelect,\n      resolvedOpen,\n      setOpen,\n    ],\n  );\n\n  if (!showOverlay) {\n    return content;\n  }\n\n  return (\n    <>\n      {content}\n      <Button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"small\"\n        aria-hidden={!resolvedOpen}\n        tabIndex={resolvedOpen ? 0 : -1}\n        className={mergeClassNames(\n          \"fixed inset-0 z-65 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden\",\n          resolvedOpen\n            ? \"pointer-events-auto opacity-100\"\n            : \"pointer-events-none opacity-0\",\n          overlayClassName,\n        )}\n        onClick={() => setOpen(false)}\n      />\n    </>\n  );\n}\n","import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\nimport { BellIcon, FullScreenIcon } from \"../../icons\";\nimport { Button } from \"../../forms/button\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { Typography } from \"../../typography\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { Sidebar } from \"./Sidebar\";\nimport type { SidebarItem, SidebarProps } from \"./types\";\nimport { SunToMoonButton } from \"../../effects\";\n\nexport interface DashboardHeaderRenderContext {\n  isSidebarOpen: boolean;\n  setSidebarOpen: (open: boolean) => void;\n  openSidebar: () => void;\n  closeSidebar: () => void;\n  toggleSidebar: () => void;\n  direction: Exclude<SidebarProps[\"direction\"], \"auto\">;\n  isRtl: boolean;\n}\n\ntype DashboardShellSlot =\n  | ReactNode\n  | ((context: DashboardHeaderRenderContext) => ReactNode);\n\nconst notificationItems = [\n  {\n    id: \"stock\",\n    title: \"Low stock alert\",\n    description: \"Wireless Mouse is below reorder point.\",\n    time: \"4m\",\n    toneClassName:\n      \"bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border\",\n  },\n  {\n    id: \"invoice\",\n    title: \"Invoice paid\",\n    description: \"INV-2048 was settled successfully.\",\n    time: \"18m\",\n    toneClassName:\n      \"bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border\",\n  },\n  {\n    id: \"sync\",\n    title: \"Catalog sync complete\",\n    description: \"128 product records refreshed.\",\n    time: \"42m\",\n    toneClassName:\n      \"bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border\",\n  },\n] as const;\n\nexport interface DashboardSidebarShellProps {\n  items: readonly SidebarItem[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  direction?: SidebarProps[\"direction\"];\n  activePath?: string;\n  onItemSelect?: SidebarProps[\"onItemSelect\"];\n  brand?: SidebarProps[\"brand\"];\n  sidebarNavbar?: SidebarProps[\"navbar\"];\n  sidebarFooter?: SidebarProps[\"footer\"];\n  sidebarClassName?: SidebarProps[\"className\"];\n  sidebarLinksClassName?: SidebarProps[\"linksClassName\"];\n  sidebarItemClassName?: SidebarProps[\"itemClassName\"];\n  sidebarActiveItemClassName?: SidebarProps[\"activeItemClassName\"];\n  sidebarOverlayClassName?: SidebarProps[\"overlayClassName\"];\n  sidebarCloseLabel?: SidebarProps[\"closeLabel\"];\n  showSidebarOverlay?: SidebarProps[\"showOverlay\"];\n  header?: DashboardShellSlot;\n  headerLeading?: DashboardShellSlot;\n  headerActions?: DashboardShellSlot;\n  headerActionsLeading?: DashboardShellSlot;\n  headerActionsTrailing?: DashboardShellSlot;\n  headerClassName?: string;\n  headerTitleClassName?: string;\n  headerActionsClassName?: string;\n  breadcrumb?: ReactNode;\n  title?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  mainClassName?: string;\n  autoHideOnMobileBreakpoint?: boolean;\n}\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: SidebarProps[\"direction\"],\n): Exclude<SidebarProps[\"direction\"], \"auto\"> {\n  if (direction === \"rtl\" || direction === \"ltr\") {\n    return direction;\n  }\n\n  if (typeof document !== \"undefined\") {\n    const documentDirection = document.documentElement.getAttribute(\"dir\");\n    if (documentDirection === \"rtl\" || documentDirection === \"ltr\") {\n      return documentDirection;\n    }\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction resolveSlot(\n  slot: DashboardShellSlot | undefined,\n  context: DashboardHeaderRenderContext,\n) {\n  return typeof slot === \"function\" ? slot(context) : slot;\n}\n\nfunction useControllableOpenState(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange?: (open: boolean) => void,\n) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return [resolvedOpen, setOpen] as const;\n}\n\nexport function DashboardSidebarShell({\n  items,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  direction = \"auto\",\n  activePath,\n  onItemSelect,\n  brand,\n  sidebarNavbar,\n  sidebarFooter,\n  sidebarClassName,\n  sidebarLinksClassName,\n  sidebarItemClassName,\n  sidebarActiveItemClassName,\n  sidebarOverlayClassName,\n  sidebarCloseLabel,\n  showSidebarOverlay,\n  header,\n  headerLeading,\n  headerActions,\n  headerActionsLeading,\n  headerActionsTrailing,\n  headerClassName,\n  headerTitleClassName,\n  headerActionsClassName,\n  breadcrumb = \"Pages / Dashboard\",\n  title = \"Dashboard\",\n  children,\n  className,\n  contentClassName,\n  mainClassName,\n  autoHideOnMobileBreakpoint = true,\n}: DashboardSidebarShellProps) {\n  const [resolvedOpen, setOpen] = useControllableOpenState(\n    open,\n    defaultOpen,\n    onOpenChange,\n  );\n  const resolvedDirection = resolveDirection(direction);\n  const isRtl = resolvedDirection === \"rtl\";\n  const openSidebar = useCallback(() => setOpen(true), [setOpen]);\n  const closeSidebar = useCallback(() => setOpen(false), [setOpen]);\n  const toggleSidebar = useCallback(\n    () => setOpen(!resolvedOpen),\n    [resolvedOpen, setOpen],\n  );\n\n  const headerContext = useMemo<DashboardHeaderRenderContext>(\n    () => ({\n      isSidebarOpen: resolvedOpen,\n      setSidebarOpen: setOpen,\n      openSidebar,\n      closeSidebar,\n      toggleSidebar,\n      direction: resolvedDirection,\n      isRtl,\n    }),\n    [\n      closeSidebar,\n      isRtl,\n      openSidebar,\n      resolvedDirection,\n      resolvedOpen,\n      setOpen,\n      toggleSidebar,\n    ],\n  );\n\n  useEffect(() => {\n    if (!autoHideOnMobileBreakpoint || typeof window === \"undefined\") {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia(\"(max-width: 1279px)\");\n\n    const handleMobileEnter = (event: MediaQueryListEvent | MediaQueryList) => {\n      if (event.matches) {\n        setOpen(false);\n      }\n    };\n\n    // Ensure first render on smaller screens starts closed.\n    handleMobileEnter(mediaQuery);\n\n    const listener = (event: MediaQueryListEvent) => handleMobileEnter(event);\n    mediaQuery.addEventListener(\"change\", listener);\n\n    return () => mediaQuery.removeEventListener(\"change\", listener);\n  }, [autoHideOnMobileBreakpoint, setOpen]);\n\n  const defaultHeaderActions = useMemo(\n    () => (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0! xl:hidden\"\n          aria-label=\"Toggle sidebar\"\n          onClick={toggleSidebar}\n        >\n          <HamburgerIcon isOpen={resolvedOpen} />\n        </Button>\n\n        <DropdownMenu\n          animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n          panelClassName={mergeClassNames(\n            \"top-[44px]\",\n            isRtl ? \"left-0\" : \"right-0\",\n          )}\n          trigger={\n            <Button\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"small\"\n              className=\"relative h-9 w-9 rounded-full p-0!\"\n              aria-label=\"Open notifications\"\n            >\n              <BellIcon className=\"h-5 w-5\" />\n              <span\n                className={mergeClassNames(\n                  \"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\",\n                  isRtl ? \"-left-0.5\" : \"-right-0.5\",\n                )}\n              >\n                {notificationItems.length}\n              </span>\n            </Button>\n          }\n        >\n          <div className=\"w-[340px] rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n            <div className=\"mb-2 flex items-center justify-between gap-3\">\n              <Typography variant=\"body2\" weight=\"black\">\n                Notifications\n              </Typography>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className=\"px-2 py-1 text-xs\"\n              >\n                Mark all read\n              </Button>\n            </div>\n            <div className=\"space-y-2\">\n              {notificationItems.map((item) => (\n                <Button\n                  key={item.id}\n                  type=\"button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  className={mergeClassNames(\n                    \"w-full rounded-lg border border-ds-border-3 px-2.5 py-2\",\n                    isRtl\n                      ? \"justify-end text-right\"\n                      : \"justify-start text-left\",\n                  )}\n                >\n                  <span\n                    className={`mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${item.toneClassName}`}\n                  >\n                    <BellIcon className=\"h-3.5 w-3.5\" />\n                  </span>\n                  <span className=\"min-w-0 flex-1\">\n                    <span className=\"block truncate text-xs font-semibold text-ds-1\">\n                      {item.title}\n                    </span>\n                    <span className=\"block truncate text-[11px] text-ds-3\">\n                      {item.description}\n                    </span>\n                  </span>\n                  <span className=\"text-[11px] text-ds-3\">{item.time}</span>\n                </Button>\n              ))}\n            </div>\n          </div>\n        </DropdownMenu>\n\n        <SunToMoonButton showLabelAndImage={false} />\n\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0!\"\n          aria-label=\"Toggle fullscreen\"\n          onClick={() => {\n            if (document.fullscreenElement) {\n              document.exitFullscreen();\n            } else {\n              document.documentElement.requestFullscreen();\n            }\n          }}\n        >\n          <FullScreenIcon className=\"h-5 w-5\" />\n        </Button>\n\n        <DropdownMenu\n          animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n          panelClassName={mergeClassNames(\n            \"top-[44px]\",\n            isRtl ? \"left-0\" : \"right-0\",\n          )}\n          trigger={\n            <Button\n              type=\"button\"\n              variant=\"primary\"\n              size=\"small\"\n              className=\"h-9 w-9 rounded-full p-0! text-sm font-black\"\n              aria-label=\"Open user menu\"\n            >\n              JD\n            </Button>\n          }\n        >\n          <div className=\"w-52 rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n            <div className=\"mb-2 flex items-center gap-2\">\n              <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\">\n                JD\n              </span>\n              <div className=\"min-w-0\">\n                <Typography variant=\"body2\" weight=\"black\" className=\"truncate\">\n                  John Doe\n                </Typography>\n                <Typography variant=\"caption\" className=\"text-ds-3\">\n                  Administrator\n                </Typography>\n              </div>\n            </div>\n            <div className=\"my-2 border-t border-ds-border-3\" />\n            <div className=\"flex flex-col gap-1\">\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Profile\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Settings\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm text-ds-state-error-text\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Log Out\n              </Button>\n            </div>\n          </div>\n        </DropdownMenu>\n      </>\n    ),\n    [isRtl, resolvedOpen, toggleSidebar],\n  );\n\n  const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);\n  const resolvedHeaderActionsLeading = headerActionsLeading\n    ? resolveSlot(headerActionsLeading, headerContext)\n    : null;\n  const resolvedHeaderActionsTrailing = headerActionsTrailing\n    ? resolveSlot(headerActionsTrailing, headerContext)\n    : null;\n  const resolvedHeaderActions =\n    headerActions === undefined ? (\n      <>\n        {resolvedHeaderActionsLeading}\n        {defaultHeaderActions}\n        {resolvedHeaderActionsTrailing}\n      </>\n    ) : (\n      resolveSlot(headerActions, headerContext)\n    );\n\n  const defaultHeader = useMemo(\n    () => (\n      <nav\n        dir={resolvedDirection}\n        className={mergeClassNames(\n          \"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\",\n          headerClassName,\n        )}\n      >\n        <div\n          className={mergeClassNames(\n            \"flex w-full justify-between gap-4\",\n            isRtl && \"flex-row-reverse\",\n          )}\n        >\n          <div\n            className={mergeClassNames(\n              \"flex min-w-0 items-center gap-3\",\n              isRtl && \"flex-row-reverse text-right\",\n              headerTitleClassName,\n            )}\n          >\n            {resolvedHeaderLeading}\n            <div className=\"min-w-0\">\n              <Typography variant=\"caption\" className=\"text-ds-3 capitalize\">\n                {breadcrumb}\n              </Typography>\n              <Typography\n                variant=\"h5\"\n                weight=\"black\"\n                className=\"truncate leading-7 capitalize\"\n              >\n                {title}\n              </Typography>\n            </div>\n          </div>\n\n          <div\n            className={mergeClassNames(\n              \"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)]\",\n              isRtl && \"flex-row-reverse\",\n              headerActionsClassName,\n            )}\n          >\n            {resolvedHeaderActions}\n          </div>\n        </div>\n      </nav>\n    ),\n    [\n      breadcrumb,\n      headerActionsClassName,\n      headerClassName,\n      headerTitleClassName,\n      isRtl,\n      resolvedDirection,\n      resolvedHeaderActions,\n      resolvedHeaderLeading,\n      title,\n    ],\n  );\n\n  const resolvedHeader =\n    header === undefined ? undefined : resolveSlot(header, headerContext);\n\n  return (\n    <div\n      dir={resolvedDirection}\n      className={mergeClassNames(\"flex h-full w-full\", className)}\n    >\n      <Sidebar\n        items={items}\n        open={resolvedOpen}\n        onOpenChange={setOpen}\n        activePath={activePath}\n        onItemSelect={onItemSelect}\n        direction={direction}\n        navbar={sidebarNavbar}\n        brand={brand}\n        footer={sidebarFooter}\n        className={sidebarClassName}\n        linksClassName={sidebarLinksClassName}\n        itemClassName={sidebarItemClassName}\n        activeItemClassName={sidebarActiveItemClassName}\n        overlayClassName={sidebarOverlayClassName}\n        closeLabel={sidebarCloseLabel}\n        showOverlay={showSidebarOverlay}\n      />\n\n      <div className=\"h-full w-full\">\n        <main\n          className={mergeClassNames(\n            \"mx-2 flex-none transition-all duration-200 ease-in-out\",\n            isRtl ? \"xl:mr-[18.5rem]\" : \"xl:ml-[18.5rem]\",\n            mainClassName,\n          )}\n        >\n          {resolvedHeader ?? defaultHeader}\n\n          <section\n            className={mergeClassNames(\n              \"mx-auto min-h-[calc(100dvh-180px)] rounded-md md:min-h-[calc(100dvh-116px)]\",\n              contentClassName,\n            )}\n          >\n            {children}\n          </section>\n        </main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{sidebar-DYEDFV2u.mjs → sidebar-Dhf_Arae.mjs}

@@ -84,6 +84,7 @@ function SidebarLinks({ items, activePath, onItemSelect, direction = "auto", cla
 					onClick: (event) => {
 						item.onSelect?.(event);
 						onItemSelect?.(item, event);
+						if (onItemSelect) event.preventDefault();
 					},
 					children: [
 						/* @__PURE__ */ jsx("span", {
@@ -132,7 +133,7 @@ function Sidebar({ items, open, defaultOpen = false, onOpenChange, activePath, o
 	const [resolvedOpen, setOpen] = useControllableOpenState$1(open, defaultOpen, onOpenChange);
 	const content = useMemo(() => /* @__PURE__ */ jsxs("aside", {
 		dir: direction === "auto" ? void 0 : direction,
-		className: mergeClassNames("fixed inset-y-2 z-50 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl", "transition-transform duration-200 ease-out xl:translate-x-0", direction === "rtl" ? "right-2" : "left-2", resolvedOpen ? "translate-x-0" : direction === "rtl" ? "translate-x-[110%] xl:translate-x-0" : "-translate-x-[110%] xl:translate-x-0", className),
+		className: mergeClassNames("fixed inset-y-2 z-70 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl", "transition-transform duration-200 ease-out xl:translate-x-0", direction === "rtl" ? "right-2" : "left-2", resolvedOpen ? "translate-x-0" : direction === "rtl" ? "translate-x-[110%] xl:translate-x-0" : "-translate-x-[110%] xl:translate-x-0", className),
 		style: {
 			backdropFilter: "blur(14px) saturate(120%)",
 			WebkitBackdropFilter: "blur(14px) saturate(120%)"
@@ -196,7 +197,7 @@ function Sidebar({ items, open, defaultOpen = false, onOpenChange, activePath, o
 		size: "small",
 		"aria-hidden": !resolvedOpen,
 		tabIndex: resolvedOpen ? 0 : -1,
-		className: mergeClassNames("fixed inset-0 z-40 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden", resolvedOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0", overlayClassName),
+		className: mergeClassNames("fixed inset-0 z-65 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden", resolvedOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0", overlayClassName),
 		onClick: () => setOpen(false)
 	})] });
 }
@@ -246,7 +247,7 @@ function useControllableOpenState(open, defaultOpen, onOpenChange) {
 		onOpenChange?.(nextOpen);
 	}, [isControlled, onOpenChange])];
 }
-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 }) {
+function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange, direction = "auto", activePath, onItemSelect, brand, sidebarNavbar, sidebarFooter, sidebarClassName, sidebarLinksClassName, sidebarItemClassName, sidebarActiveItemClassName, sidebarOverlayClassName, sidebarCloseLabel, showSidebarOverlay, header, headerLeading, headerActions, headerActionsLeading, headerActionsTrailing, 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";
@@ -351,17 +352,7 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 				})]
 			})
 		}),
-		/* @__PURE__ */ jsx(Button, {
-			type: "button",
-			variant: "tertiary",
-			size: "small",
-			className: "h-9 w-9 rounded-full p-0!",
-			"aria-label": "Toggle theme",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "flex cursor-pointer rounded-full",
-				children: /* @__PURE__ */ jsx(SunToMoonButton, { showLabelAndImage: false })
-			})
-		}),
+		/* @__PURE__ */ jsx(SunToMoonButton, { showLabelAndImage: false }),
 		/* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "tertiary",
@@ -443,7 +434,13 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 		toggleSidebar
 	]);
 	const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);
-	const resolvedHeaderActions = headerActions === void 0 ? defaultHeaderActions : resolveSlot(headerActions, headerContext);
+	const resolvedHeaderActionsLeading = headerActionsLeading ? resolveSlot(headerActionsLeading, headerContext) : null;
+	const resolvedHeaderActionsTrailing = headerActionsTrailing ? resolveSlot(headerActionsTrailing, headerContext) : null;
+	const resolvedHeaderActions = headerActions === void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		resolvedHeaderActionsLeading,
+		defaultHeaderActions,
+		resolvedHeaderActionsTrailing
+	] }) : resolveSlot(headerActions, headerContext);
 	const defaultHeader = useMemo(() => /* @__PURE__ */ jsx("nav", {
 		dir: resolvedDirection,
 		className: 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),
@@ -516,4 +513,4 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 //#endregion
 export { HamburgerIcon as a, NavLink as i, Sidebar as n, SidebarLinks as r, DashboardSidebarShell as t };
 
-//# sourceMappingURL=sidebar-DYEDFV2u.mjs.map
+//# sourceMappingURL=sidebar-Dhf_Arae.mjs.map

package/dist/chunks/sidebar-Dhf_Arae.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-Dhf_Arae.mjs","names":[],"sources":["../../src/components/navigation/sidebar/HamburgerIcon.tsx","../../src/components/navigation/sidebar/NavLink.tsx","../../src/components/navigation/sidebar/SidebarLinks.tsx","../../src/components/navigation/sidebar/Sidebar.tsx","../../src/components/navigation/sidebar/DashboardSidebarShell.tsx"],"sourcesContent":["import { mergeClassNames } from \"../../../utils\";\n\nexport interface HamburgerIconProps {\n  isOpen: boolean;\n  className?: string;\n}\n\nconst lineClassName =\n  \"block h-0.5 w-full rounded-lg bg-current transition-all duration-300 ease-in-out\";\n\nexport function HamburgerIcon({ isOpen, className }: HamburgerIconProps) {\n  return (\n    <span\n      className={mergeClassNames(\n        \"relative flex h-4 w-5 flex-col items-center justify-between\",\n        className,\n      )}\n      aria-hidden=\"true\"\n    >\n      <span\n        className={mergeClassNames(\n          lineClassName,\n          isOpen && \"translate-y-[5px] rotate-45 transform\",\n        )}\n      />\n      <span className={mergeClassNames(lineClassName, isOpen && \"w-0\")} />\n      <span\n        className={mergeClassNames(\n          lineClassName,\n          isOpen && \"-translate-y-[9px] -rotate-45 transform\",\n        )}\n      />\n    </span>\n  );\n}\n","import { useMemo } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport type { SidebarNavLinkProps } from \"./types\";\n\nexport function NavLink({\n  className,\n  children,\n  style,\n  borderRadius,\n  disabled = false,\n  href,\n  target,\n  rel,\n  onClick,\n}: SidebarNavLinkProps) {\n  const memoizedStyle = useMemo(\n    () => (borderRadius !== undefined ? { ...style, borderRadius } : style),\n    [borderRadius, style],\n  );\n\n  if (href) {\n    const resolvedRel = target === \"_blank\" ? (rel ?? \"noreferrer noopener\") : rel;\n\n    return (\n      <a\n        href={href}\n        className={className}\n        style={memoizedStyle}\n        target={target}\n        rel={resolvedRel}\n        aria-disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          onClick?.(event);\n        }}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"tertiary\"\n      className={className}\n      style={memoizedStyle}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  );\n}\n","import { mergeClassNames } from \"../../../utils\";\nimport { NavLink } from \"./NavLink\";\nimport type { SidebarDirection, SidebarItem, SidebarLinksProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: SidebarDirection,\n): Exclude<SidebarDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction isRouteActive(item: SidebarItem, activePath?: string): boolean {\n  if (typeof item.active === \"boolean\") {\n    return item.active;\n  }\n\n  if (!activePath || !item.href) {\n    return false;\n  }\n\n  return activePath === item.href || activePath.startsWith(`${item.href}/`);\n}\n\nexport function SidebarLinks({\n  items,\n  activePath,\n  onItemSelect,\n  direction = \"auto\",\n  className,\n  itemClassName,\n  activeItemClassName,\n}: SidebarLinksProps) {\n  const effectiveDirection = resolveDirection(direction);\n  const visibleItems = items.filter((item) => !item.hidden);\n\n  return (\n    <ul className={mergeClassNames(\"space-y-1.5\", className)}>\n      {visibleItems.map((item) => {\n        const active = isRouteActive(item, activePath);\n\n        return (\n          <li key={item.id} className=\"relative\">\n            <NavLink\n              href={item.href}\n              disabled={item.disabled}\n              className={mergeClassNames(\n                \"group relative flex w-full items-center gap-2.5 rounded-md border px-3 py-2.5 transition-all duration-200\",\n                effectiveDirection === \"rtl\" ? \"text-right\" : \"text-left\",\n                \"border-transparent text-ds-2 hover:border-ds-border-3 hover:bg-ds-surface-2/80 hover:text-ds-1\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-canvas\",\n                item.disabled && \"cursor-not-allowed opacity-50\",\n                active &&\n                  \"border-ds-border-accent/35 bg-ds-accent-subtle text-ds-1 shadow-[0_4px_12px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)]\",\n                active && activeItemClassName,\n                itemClassName,\n              )}\n              onClick={(event) => {\n                item.onSelect?.(event);\n                onItemSelect?.(item, event);\n                if (onItemSelect) {\n                  event.preventDefault();\n                }\n              }}\n            >\n              <span\n                className={mergeClassNames(\n                  \"inline-flex h-5 w-5 shrink-0 items-center justify-center\",\n                  active ? \"text-ds-1\" : \"text-ds-2 group-hover:text-ds-1\",\n                )}\n                aria-hidden=\"true\"\n              >\n                {item.icon}\n              </span>\n              <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n                {item.label}\n              </span>\n              {item.badge ? (\n                <span className=\"shrink-0 text-xs text-ds-2\">{item.badge}</span>\n              ) : null}\n            </NavLink>\n            {active ? (\n              <span\n                className={mergeClassNames(\n                  \"pointer-events-none absolute  top-1.5 h-[calc(100%-12px)] w-2\",\n                  effectiveDirection === \"rtl\" ? \"right-0\" : \"left-0\",\n                )}\n                aria-hidden=\"true\"\n              >\n                {/* <span className=\"absolute inset-y-1 left-1/2 w-2 -translate-x-1/2 rounded-full bg-ds-accent/25 blur-[4px]\" /> */}\n                {/* <span className=\"absolute inset-y-0 left-1/6 w-[2px] -translate-x-1/2 rounded-full bg-ds-accent motion-safe:animate-pulse\" /> */}\n                {/* <span className=\"absolute top-2.5 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-ds-accent shadow-[0_0_10px_color-mix(in_srgb,var(--ds-color-accent)_55%,transparent)] motion-safe:animate-pulse\" /> */}\n              </span>\n            ) : null}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n","import { useCallback, useMemo, useState } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { SidebarLinks } from \"./SidebarLinks\";\nimport type { SidebarProps } from \"./types\";\n\nfunction useControllableOpenState(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange?: (open: boolean) => void,\n) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return [resolvedOpen, setOpen] as const;\n}\n\nconst fallbackBrand = (\n  <div className=\"text-xl font-bold uppercase tracking-wide text-ds-1\">\n    <span className=\"text-ds-accent\">ERP</span>\n    <span className=\"font-medium\">PRO</span>\n  </div>\n);\n\nexport function Sidebar({\n  items,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  activePath,\n  onItemSelect,\n  direction = \"auto\",\n  navbar,\n  brand = fallbackBrand,\n  footer,\n  className,\n  linksClassName,\n  itemClassName,\n  activeItemClassName,\n  overlayClassName,\n  closeLabel = \"Toggle sidebar\",\n  showOverlay = true,\n}: SidebarProps) {\n  const [resolvedOpen, setOpen] = useControllableOpenState(\n    open,\n    defaultOpen,\n    onOpenChange,\n  );\n\n  const content = useMemo(\n    () => (\n      <aside\n        dir={direction === \"auto\" ? undefined : direction}\n        className={mergeClassNames(\n          \"fixed inset-y-2 z-70 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl\",\n          \"transition-transform duration-200 ease-out xl:translate-x-0\",\n          direction === \"rtl\" ? \"right-2\" : \"left-2\",\n          resolvedOpen\n            ? \"translate-x-0\"\n            : direction === \"rtl\"\n              ? \"translate-x-[110%] xl:translate-x-0\"\n              : \"-translate-x-[110%] xl:translate-x-0\",\n          className,\n        )}\n        style={{\n          backdropFilter: \"blur(14px) saturate(120%)\",\n          WebkitBackdropFilter: \"blur(14px) saturate(120%)\",\n        }}\n      >\n        {navbar ? (\n          <div className=\"mb-4\">{navbar}</div>\n        ) : (\n          <div className=\"mb-4 flex items-center justify-between gap-3 rounded-xl border border-ds-border-3 bg-ds-surface-2/85 px-3 py-2\">\n            <div className=\"min-w-0 flex-1\">{brand}</div>\n            <Button\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"small\"\n              aria-label={closeLabel}\n              className={mergeClassNames(\n                \"p-1! text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\",\n                \"xl:hidden\",\n              )}\n              onClick={() => setOpen(!resolvedOpen)}\n            >\n              <HamburgerIcon isOpen={resolvedOpen} />\n            </Button>\n          </div>\n        )}\n\n        <div className=\"mb-5 h-px bg-ds-border-3\" />\n\n        <div className=\"min-h-0 flex-1 overflow-y-auto pr-1\">\n          <SidebarLinks\n            items={items}\n            activePath={activePath}\n            onItemSelect={onItemSelect}\n            direction={direction}\n            className={linksClassName}\n            itemClassName={itemClassName}\n            activeItemClassName={activeItemClassName}\n          />\n        </div>\n\n        {footer ? <div className=\"mt-4\">{footer}</div> : null}\n      </aside>\n    ),\n    [\n      activeItemClassName,\n      activePath,\n      brand,\n      className,\n      closeLabel,\n      direction,\n      footer,\n      itemClassName,\n      items,\n      linksClassName,\n      onItemSelect,\n      resolvedOpen,\n      setOpen,\n    ],\n  );\n\n  if (!showOverlay) {\n    return content;\n  }\n\n  return (\n    <>\n      {content}\n      <Button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"small\"\n        aria-hidden={!resolvedOpen}\n        tabIndex={resolvedOpen ? 0 : -1}\n        className={mergeClassNames(\n          \"fixed inset-0 z-65 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden\",\n          resolvedOpen\n            ? \"pointer-events-auto opacity-100\"\n            : \"pointer-events-none opacity-0\",\n          overlayClassName,\n        )}\n        onClick={() => setOpen(false)}\n      />\n    </>\n  );\n}\n","import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\nimport { BellIcon, FullScreenIcon } from \"../../icons\";\nimport { Button } from \"../../forms/button\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { Typography } from \"../../typography\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { Sidebar } from \"./Sidebar\";\nimport type { SidebarItem, SidebarProps } from \"./types\";\nimport { SunToMoonButton } from \"../../effects\";\n\nexport interface DashboardHeaderRenderContext {\n  isSidebarOpen: boolean;\n  setSidebarOpen: (open: boolean) => void;\n  openSidebar: () => void;\n  closeSidebar: () => void;\n  toggleSidebar: () => void;\n  direction: Exclude<SidebarProps[\"direction\"], \"auto\">;\n  isRtl: boolean;\n}\n\ntype DashboardShellSlot =\n  | ReactNode\n  | ((context: DashboardHeaderRenderContext) => ReactNode);\n\nconst notificationItems = [\n  {\n    id: \"stock\",\n    title: \"Low stock alert\",\n    description: \"Wireless Mouse is below reorder point.\",\n    time: \"4m\",\n    toneClassName:\n      \"bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border\",\n  },\n  {\n    id: \"invoice\",\n    title: \"Invoice paid\",\n    description: \"INV-2048 was settled successfully.\",\n    time: \"18m\",\n    toneClassName:\n      \"bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border\",\n  },\n  {\n    id: \"sync\",\n    title: \"Catalog sync complete\",\n    description: \"128 product records refreshed.\",\n    time: \"42m\",\n    toneClassName:\n      \"bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border\",\n  },\n] as const;\n\nexport interface DashboardSidebarShellProps {\n  items: readonly SidebarItem[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  direction?: SidebarProps[\"direction\"];\n  activePath?: string;\n  onItemSelect?: SidebarProps[\"onItemSelect\"];\n  brand?: SidebarProps[\"brand\"];\n  sidebarNavbar?: SidebarProps[\"navbar\"];\n  sidebarFooter?: SidebarProps[\"footer\"];\n  sidebarClassName?: SidebarProps[\"className\"];\n  sidebarLinksClassName?: SidebarProps[\"linksClassName\"];\n  sidebarItemClassName?: SidebarProps[\"itemClassName\"];\n  sidebarActiveItemClassName?: SidebarProps[\"activeItemClassName\"];\n  sidebarOverlayClassName?: SidebarProps[\"overlayClassName\"];\n  sidebarCloseLabel?: SidebarProps[\"closeLabel\"];\n  showSidebarOverlay?: SidebarProps[\"showOverlay\"];\n  header?: DashboardShellSlot;\n  headerLeading?: DashboardShellSlot;\n  headerActions?: DashboardShellSlot;\n  headerActionsLeading?: DashboardShellSlot;\n  headerActionsTrailing?: DashboardShellSlot;\n  headerClassName?: string;\n  headerTitleClassName?: string;\n  headerActionsClassName?: string;\n  breadcrumb?: ReactNode;\n  title?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  mainClassName?: string;\n  autoHideOnMobileBreakpoint?: boolean;\n}\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: SidebarProps[\"direction\"],\n): Exclude<SidebarProps[\"direction\"], \"auto\"> {\n  if (direction === \"rtl\" || direction === \"ltr\") {\n    return direction;\n  }\n\n  if (typeof document !== \"undefined\") {\n    const documentDirection = document.documentElement.getAttribute(\"dir\");\n    if (documentDirection === \"rtl\" || documentDirection === \"ltr\") {\n      return documentDirection;\n    }\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction resolveSlot(\n  slot: DashboardShellSlot | undefined,\n  context: DashboardHeaderRenderContext,\n) {\n  return typeof slot === \"function\" ? slot(context) : slot;\n}\n\nfunction useControllableOpenState(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange?: (open: boolean) => void,\n) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return [resolvedOpen, setOpen] as const;\n}\n\nexport function DashboardSidebarShell({\n  items,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  direction = \"auto\",\n  activePath,\n  onItemSelect,\n  brand,\n  sidebarNavbar,\n  sidebarFooter,\n  sidebarClassName,\n  sidebarLinksClassName,\n  sidebarItemClassName,\n  sidebarActiveItemClassName,\n  sidebarOverlayClassName,\n  sidebarCloseLabel,\n  showSidebarOverlay,\n  header,\n  headerLeading,\n  headerActions,\n  headerActionsLeading,\n  headerActionsTrailing,\n  headerClassName,\n  headerTitleClassName,\n  headerActionsClassName,\n  breadcrumb = \"Pages / Dashboard\",\n  title = \"Dashboard\",\n  children,\n  className,\n  contentClassName,\n  mainClassName,\n  autoHideOnMobileBreakpoint = true,\n}: DashboardSidebarShellProps) {\n  const [resolvedOpen, setOpen] = useControllableOpenState(\n    open,\n    defaultOpen,\n    onOpenChange,\n  );\n  const resolvedDirection = resolveDirection(direction);\n  const isRtl = resolvedDirection === \"rtl\";\n  const openSidebar = useCallback(() => setOpen(true), [setOpen]);\n  const closeSidebar = useCallback(() => setOpen(false), [setOpen]);\n  const toggleSidebar = useCallback(\n    () => setOpen(!resolvedOpen),\n    [resolvedOpen, setOpen],\n  );\n\n  const headerContext = useMemo<DashboardHeaderRenderContext>(\n    () => ({\n      isSidebarOpen: resolvedOpen,\n      setSidebarOpen: setOpen,\n      openSidebar,\n      closeSidebar,\n      toggleSidebar,\n      direction: resolvedDirection,\n      isRtl,\n    }),\n    [\n      closeSidebar,\n      isRtl,\n      openSidebar,\n      resolvedDirection,\n      resolvedOpen,\n      setOpen,\n      toggleSidebar,\n    ],\n  );\n\n  useEffect(() => {\n    if (!autoHideOnMobileBreakpoint || typeof window === \"undefined\") {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia(\"(max-width: 1279px)\");\n\n    const handleMobileEnter = (event: MediaQueryListEvent | MediaQueryList) => {\n      if (event.matches) {\n        setOpen(false);\n      }\n    };\n\n    // Ensure first render on smaller screens starts closed.\n    handleMobileEnter(mediaQuery);\n\n    const listener = (event: MediaQueryListEvent) => handleMobileEnter(event);\n    mediaQuery.addEventListener(\"change\", listener);\n\n    return () => mediaQuery.removeEventListener(\"change\", listener);\n  }, [autoHideOnMobileBreakpoint, setOpen]);\n\n  const defaultHeaderActions = useMemo(\n    () => (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0! xl:hidden\"\n          aria-label=\"Toggle sidebar\"\n          onClick={toggleSidebar}\n        >\n          <HamburgerIcon isOpen={resolvedOpen} />\n        </Button>\n\n        <DropdownMenu\n          animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n          panelClassName={mergeClassNames(\n            \"top-[44px]\",\n            isRtl ? \"left-0\" : \"right-0\",\n          )}\n          trigger={\n            <Button\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"small\"\n              className=\"relative h-9 w-9 rounded-full p-0!\"\n              aria-label=\"Open notifications\"\n            >\n              <BellIcon className=\"h-5 w-5\" />\n              <span\n                className={mergeClassNames(\n                  \"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\",\n                  isRtl ? \"-left-0.5\" : \"-right-0.5\",\n                )}\n              >\n                {notificationItems.length}\n              </span>\n            </Button>\n          }\n        >\n          <div className=\"w-[340px] rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n            <div className=\"mb-2 flex items-center justify-between gap-3\">\n              <Typography variant=\"body2\" weight=\"black\">\n                Notifications\n              </Typography>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className=\"px-2 py-1 text-xs\"\n              >\n                Mark all read\n              </Button>\n            </div>\n            <div className=\"space-y-2\">\n              {notificationItems.map((item) => (\n                <Button\n                  key={item.id}\n                  type=\"button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  className={mergeClassNames(\n                    \"w-full rounded-lg border border-ds-border-3 px-2.5 py-2\",\n                    isRtl\n                      ? \"justify-end text-right\"\n                      : \"justify-start text-left\",\n                  )}\n                >\n                  <span\n                    className={`mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${item.toneClassName}`}\n                  >\n                    <BellIcon className=\"h-3.5 w-3.5\" />\n                  </span>\n                  <span className=\"min-w-0 flex-1\">\n                    <span className=\"block truncate text-xs font-semibold text-ds-1\">\n                      {item.title}\n                    </span>\n                    <span className=\"block truncate text-[11px] text-ds-3\">\n                      {item.description}\n                    </span>\n                  </span>\n                  <span className=\"text-[11px] text-ds-3\">{item.time}</span>\n                </Button>\n              ))}\n            </div>\n          </div>\n        </DropdownMenu>\n\n        <SunToMoonButton showLabelAndImage={false} />\n\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0!\"\n          aria-label=\"Toggle fullscreen\"\n          onClick={() => {\n            if (document.fullscreenElement) {\n              document.exitFullscreen();\n            } else {\n              document.documentElement.requestFullscreen();\n            }\n          }}\n        >\n          <FullScreenIcon className=\"h-5 w-5\" />\n        </Button>\n\n        <DropdownMenu\n          animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n          panelClassName={mergeClassNames(\n            \"top-[44px]\",\n            isRtl ? \"left-0\" : \"right-0\",\n          )}\n          trigger={\n            <Button\n              type=\"button\"\n              variant=\"primary\"\n              size=\"small\"\n              className=\"h-9 w-9 rounded-full p-0! text-sm font-black\"\n              aria-label=\"Open user menu\"\n            >\n              JD\n            </Button>\n          }\n        >\n          <div className=\"w-52 rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n            <div className=\"mb-2 flex items-center gap-2\">\n              <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\">\n                JD\n              </span>\n              <div className=\"min-w-0\">\n                <Typography variant=\"body2\" weight=\"black\" className=\"truncate\">\n                  John Doe\n                </Typography>\n                <Typography variant=\"caption\" className=\"text-ds-3\">\n                  Administrator\n                </Typography>\n              </div>\n            </div>\n            <div className=\"my-2 border-t border-ds-border-3\" />\n            <div className=\"flex flex-col gap-1\">\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Profile\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Settings\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm text-ds-state-error-text\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Log Out\n              </Button>\n            </div>\n          </div>\n        </DropdownMenu>\n      </>\n    ),\n    [isRtl, resolvedOpen, toggleSidebar],\n  );\n\n  const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);\n  const resolvedHeaderActionsLeading = headerActionsLeading\n    ? resolveSlot(headerActionsLeading, headerContext)\n    : null;\n  const resolvedHeaderActionsTrailing = headerActionsTrailing\n    ? resolveSlot(headerActionsTrailing, headerContext)\n    : null;\n  const resolvedHeaderActions =\n    headerActions === undefined ? (\n      <>\n        {resolvedHeaderActionsLeading}\n        {defaultHeaderActions}\n        {resolvedHeaderActionsTrailing}\n      </>\n    ) : (\n      resolveSlot(headerActions, headerContext)\n    );\n\n  const defaultHeader = useMemo(\n    () => (\n      <nav\n        dir={resolvedDirection}\n        className={mergeClassNames(\n          \"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\",\n          headerClassName,\n        )}\n      >\n        <div\n          className={mergeClassNames(\n            \"flex w-full justify-between gap-4\",\n            isRtl && \"flex-row-reverse\",\n          )}\n        >\n          <div\n            className={mergeClassNames(\n              \"flex min-w-0 items-center gap-3\",\n              isRtl && \"flex-row-reverse text-right\",\n              headerTitleClassName,\n            )}\n          >\n            {resolvedHeaderLeading}\n            <div className=\"min-w-0\">\n              <Typography variant=\"caption\" className=\"text-ds-3 capitalize\">\n                {breadcrumb}\n              </Typography>\n              <Typography\n                variant=\"h5\"\n                weight=\"black\"\n                className=\"truncate leading-7 capitalize\"\n              >\n                {title}\n              </Typography>\n            </div>\n          </div>\n\n          <div\n            className={mergeClassNames(\n              \"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)]\",\n              isRtl && \"flex-row-reverse\",\n              headerActionsClassName,\n            )}\n          >\n            {resolvedHeaderActions}\n          </div>\n        </div>\n      </nav>\n    ),\n    [\n      breadcrumb,\n      headerActionsClassName,\n      headerClassName,\n      headerTitleClassName,\n      isRtl,\n      resolvedDirection,\n      resolvedHeaderActions,\n      resolvedHeaderLeading,\n      title,\n    ],\n  );\n\n  const resolvedHeader =\n    header === undefined ? undefined : resolveSlot(header, headerContext);\n\n  return (\n    <div\n      dir={resolvedDirection}\n      className={mergeClassNames(\"flex h-full w-full\", className)}\n    >\n      <Sidebar\n        items={items}\n        open={resolvedOpen}\n        onOpenChange={setOpen}\n        activePath={activePath}\n        onItemSelect={onItemSelect}\n        direction={direction}\n        navbar={sidebarNavbar}\n        brand={brand}\n        footer={sidebarFooter}\n        className={sidebarClassName}\n        linksClassName={sidebarLinksClassName}\n        itemClassName={sidebarItemClassName}\n        activeItemClassName={sidebarActiveItemClassName}\n        overlayClassName={sidebarOverlayClassName}\n        closeLabel={sidebarCloseLabel}\n        showOverlay={showSidebarOverlay}\n      />\n\n      <div className=\"h-full w-full\">\n        <main\n          className={mergeClassNames(\n            \"mx-2 flex-none transition-all duration-200 ease-in-out\",\n            isRtl ? \"xl:mr-[18.5rem]\" : \"xl:ml-[18.5rem]\",\n            mainClassName,\n          )}\n        >\n          {resolvedHeader ?? defaultHeader}\n\n          <section\n            className={mergeClassNames(\n              \"mx-auto min-h-[calc(100dvh-180px)] rounded-md md:min-h-[calc(100dvh-116px)]\",\n              contentClassName,\n            )}\n          >\n            {children}\n          </section>\n        </main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/navigation/sidebar/DashboardSidebarShell.d.ts

@@ -31,6 +31,8 @@ export interface DashboardSidebarShellProps {
     header?: DashboardShellSlot;
     headerLeading?: DashboardShellSlot;
     headerActions?: DashboardShellSlot;
+    headerActionsLeading?: DashboardShellSlot;
+    headerActionsTrailing?: DashboardShellSlot;
     headerClassName?: string;
     headerTitleClassName?: string;
     headerActionsClassName?: string;
@@ -42,6 +44,6 @@ export interface DashboardSidebarShellProps {
     mainClassName?: string;
     autoHideOnMobileBreakpoint?: boolean;
 }
-export declare function DashboardSidebarShell({ items, open, defaultOpen, onOpenChange, direction, activePath, onItemSelect, brand, sidebarNavbar, sidebarFooter, sidebarClassName, sidebarLinksClassName, sidebarItemClassName, sidebarActiveItemClassName, sidebarOverlayClassName, sidebarCloseLabel, showSidebarOverlay, header, headerLeading, headerActions, headerClassName, headerTitleClassName, headerActionsClassName, breadcrumb, title, children, className, contentClassName, mainClassName, autoHideOnMobileBreakpoint, }: DashboardSidebarShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardSidebarShell({ items, open, defaultOpen, onOpenChange, direction, activePath, onItemSelect, brand, sidebarNavbar, sidebarFooter, sidebarClassName, sidebarLinksClassName, sidebarItemClassName, sidebarActiveItemClassName, sidebarOverlayClassName, sidebarCloseLabel, showSidebarOverlay, header, headerLeading, headerActions, headerActionsLeading, headerActionsTrailing, headerClassName, headerTitleClassName, headerActionsClassName, breadcrumb, title, children, className, contentClassName, mainClassName, autoHideOnMobileBreakpoint, }: DashboardSidebarShellProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DashboardSidebarShell.d.ts.map

package/dist/components/navigation/sidebar/DashboardSidebarShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardSidebarShell.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/DashboardSidebarShell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DashboardSidebarShell.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/DashboardSidebarShell.tsx"],"names":[],"mappings":"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"}

package/dist/components/navigation/sidebar/SidebarLinks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLinks.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/SidebarLinks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA4ChF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,YAAY,EACZ,SAAkB,EAClB,SAAS,EACT,aAAa,EACb,mBAAmB,GACpB,EAAE,iBAAiB,2CAgEnB"}
+{"version":3,"file":"SidebarLinks.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/SidebarLinks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA4ChF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,YAAY,EACZ,SAAkB,EAClB,SAAS,EACT,aAAa,EACb,mBAAmB,GACpB,EAAE,iBAAiB,2CAmEnB"}

package/dist/components/navigation/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/Tabs.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAA2B,SAAS,EAAE,MAAM,SAAS,CAAC;AAqClE,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAY,EACZ,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,SAAmB,GACpB,EAAE,SAAS,2CAgPX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/Tabs.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAA2B,SAAS,EAAE,MAAM,SAAS,CAAC;AAqClE,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAY,EACZ,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,SAAmB,GACpB,EAAE,SAAS,2CA2PX"}

package/dist/components/navigation/tabs/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 export type TabsDirection = "auto" | "ltr" | "rtl";
-export type TabsAnimation = "slide" | "fade" | "none";
+export type TabsAnimation = "slide" | "fade" | "rise" | "none";
 export interface TabsItem {
     id: string;
     label: ReactNode;

package/dist/components/navigation/tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE/D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B"}

package/dist/index.cjs

@@ -17,7 +17,7 @@ const require_select = require("./chunks/select-bZ9WqLOc.cjs");
 const require_calendar = require("./chunks/calendar-CQJgQ5H_.cjs");
 const require_card = require("./chunks/card-RrT68nvu.cjs");
 const require_carousel = require("./chunks/carousel-Cv0m1Pp5.cjs");
-const require_sidebar = require("./chunks/sidebar-Kkr45nuN.cjs");
+const require_sidebar = require("./chunks/sidebar-3i4mGE6T.cjs");
 const require_typography = require("./chunks/typography-LwwY_MOy.cjs");
 const require_ascii_text = require("./chunks/ascii-text-BFnpVur6.cjs");
 const require_chroma_grid = require("./chunks/chroma-grid-DcZ9f4Ui.cjs");
@@ -399,11 +399,21 @@ function Tabs({ items, value, defaultValue, onValueChange, dir = "auto", classNa
 				transform: "translateX(0px)"
 			}], {
 				duration: animationDurationMs ?? 300,
-				easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+				easing: "cubic-bezier(0.42, 1, 0.36, 1)"
 			});
 		} else if (animation === "fade") panel.animate([{ opacity: 0 }, { opacity: 1 }], {
 			duration: animationDurationMs ?? 360,
-			easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+			easing: "cubic-bezier(0.42, 1, 0.36, 1)"
+		});
+		else if (animation === "rise") panel.animate([{
+			opacity: 0,
+			transform: "translateY(14px)"
+		}, {
+			opacity: 1,
+			transform: "translateY(0px)"
+		}], {
+			duration: animationDurationMs ?? 420,
+			easing: "cubic-bezier(0.534, 1, 0.3, 1)"
 		});
 		previousIndexRef.current = activeIndex;
 	}, [

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../src/components/effects/border-beam/BorderBeam.tsx","../src/components/data-display/dashboard-cards/StatCard.tsx","../src/components/data-display/dashboard-cards/ChartCard.tsx","../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../src/components/navigation/tabs/Tabs.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface BorderBeamProps {\n  className?: string;\n  size?: number;\n  duration?: number;\n  borderWidth?: number;\n  anchor?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n}\n\nexport function BorderBeam({\n  className = \"\",\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 0.5,\n  colorFrom = \"var(--ds-color-accent)\",\n  colorTo = \"var(--ds-color-accent-hover)\",\n  delay = 0,\n}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--size\": `${size}px`,\n          \"--duration\": `${duration}s`,\n          \"--anchor\": `${anchor}`,\n          \"--border-width\": `${borderWidth}px`,\n          \"--beam-color-from\": colorFrom,\n          \"--beam-color-to\": colorTo,\n          \"--delay\": `-${delay}s`,\n        } as CSSProperties\n      }\n      className={`border-beam ${className}`}\n    />\n  );\n}\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","import {\n  Fragment,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { TabsDirection, TabsItem, TabsProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: TabsDirection,\n): Exclude<TabsDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction getFirstEnabledId(items: readonly TabsItem[]): string {\n  const fallback = items.find((item) => !item.disabled) ?? items[0];\n  return fallback?.id ?? \"\";\n}\n\nexport function Tabs({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  dir = \"auto\",\n  className,\n  listClassName,\n  triggerClassName,\n  panelClassName,\n  animationDurationMs,\n  animation = \"slide\",\n}: TabsProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const tabSlotRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n\n  const fallbackId = useMemo(() => getFirstEnabledId(items), [items]);\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? fallbackId,\n  );\n  const rawActiveId = isControlled ? value : internalValue;\n  const activeId = items.some((item) => item.id === rawActiveId)\n    ? rawActiveId\n    : fallbackId;\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        items.findIndex((item) => item.id === activeId),\n        0,\n      ),\n    [items, activeId],\n  );\n\n  const previousIndexRef = useRef(activeIndex);\n  const [indicator, setIndicator] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  const getEffectiveDirection = useCallback(() => {\n    if (dir !== \"auto\") {\n      return dir;\n    }\n\n    if (typeof window !== \"undefined\" && listRef.current) {\n      const cssDirection = window.getComputedStyle(listRef.current).direction;\n      if (cssDirection === \"rtl\" || cssDirection === \"ltr\") {\n        return cssDirection;\n      }\n    }\n\n    return resolveDirection(\"auto\");\n  }, [dir]);\n\n  useEffect(() => {\n    const previousIndex = previousIndexRef.current;\n    if (activeIndex === previousIndex) {\n      return;\n    }\n\n    const panel = panelRef.current;\n    if (!panel) {\n      previousIndexRef.current = activeIndex;\n      return;\n    }\n\n    if (animation === \"slide\") {\n      const indexDelta = activeIndex - previousIndex;\n      const logicalDirection = indexDelta >= 0 ? 1 : -1;\n      const visualDirection =\n        getEffectiveDirection() === \"rtl\" ? -logicalDirection : logicalDirection;\n      const fromX = visualDirection > 0 ? -14 : 14;\n\n      panel.animate(\n        [\n          { opacity: 0, transform: `translateX(${fromX}px)` },\n          { opacity: 1, transform: \"translateX(0px)\" },\n        ],\n        {\n          duration: animationDurationMs ?? 300,\n          easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n        },\n      );\n    } else if (animation === \"fade\") {\n      panel.animate(\n        [{ opacity: 0 }, { opacity: 1 }],\n        {\n          duration: animationDurationMs ?? 360,\n          easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n        },\n      );\n    }\n\n    previousIndexRef.current = activeIndex;\n  }, [activeIndex, animationDurationMs, animation, getEffectiveDirection]);\n\n  const activeItem = items[activeIndex] ?? items[0];\n\n  useLayoutEffect(() => {\n    const updateIndicator = () => {\n      const selectedSlot = tabSlotRefs.current[activeItem?.id ?? \"\"];\n      if (!selectedSlot) {\n        setIndicator(null);\n        return;\n      }\n\n      setIndicator({\n        left: selectedSlot.offsetLeft,\n        width: selectedSlot.offsetWidth,\n      });\n    };\n\n    updateIndicator();\n    window.addEventListener(\"resize\", updateIndicator);\n    return () => window.removeEventListener(\"resize\", updateIndicator);\n  }, [activeItem?.id, items.length]);\n\n  const setValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onValueChange?.(nextValue);\n  };\n\n  const moveBy = (delta: number) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    let probe = activeIndex;\n    for (let step = 0; step < items.length; step++) {\n      probe = (probe + delta + items.length) % items.length;\n      const candidate = items[probe];\n      if (!candidate?.disabled) {\n        setValue(candidate.id);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      dir={dir === \"auto\" ? undefined : dir}\n      className={mergeClassNames(\"w-full\", className)}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        className={mergeClassNames(\n          \"relative flex h-9 w-full items-center gap-0 overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 p-1\",\n          listClassName,\n        )}\n      >\n        {items.length > 0 && indicator ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute bottom-1 top-1 rounded-md border border-ds-border-accent/45 bg-ds-accent shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out\"\n            style={{\n              width: `${indicator.width}px`,\n              transform: `translateX(${indicator.left}px)`,\n              left: 0,\n            }}\n          />\n        ) : null}\n        {items.map((item) => {\n          const selected = item.id === activeItem?.id;\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                tabSlotRefs.current[item.id] = node;\n              }}\n              className=\"relative z-10 h-full min-w-0 flex-1\"\n            >\n              <Button\n                role=\"tab\"\n                id={`tab-${item.id}`}\n                aria-selected={selected}\n                aria-controls={`tabpanel-${item.id}`}\n                tabIndex={selected ? 0 : -1}\n                disabled={item.disabled}\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"h-full w-full rounded-md px-3 py-1 text-base font-normal leading-[22px] transition-colors duration-200\",\n                  \"outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60\",\n                  selected ? \"text-ds-on-accent\" : \"text-ds-2 hover:text-ds-10\",\n                  item.disabled && \"cursor-not-allowed opacity-55\",\n                  triggerClassName,\n                )}\n                onClick={() => {\n                  if (!item.disabled) {\n                    setValue(item.id);\n                  }\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"ArrowRight\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? -1 : 1);\n                  }\n\n                  if (event.key === \"ArrowLeft\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? 1 : -1);\n                  }\n\n                  if (event.key === \"Home\") {\n                    event.preventDefault();\n                    const first = items.find((candidate) => !candidate.disabled);\n                    if (first) {\n                      setValue(first.id);\n                    }\n                  }\n\n                  if (event.key === \"End\") {\n                    event.preventDefault();\n                    const reversed = [...items].reverse();\n                    const last = reversed.find(\n                      (candidate) => !candidate.disabled,\n                    );\n                    if (last) {\n                      setValue(last.id);\n                    }\n                  }\n                }}\n              >\n                {item.label}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        ref={panelRef}\n        role=\"tabpanel\"\n        id={`tabpanel-${activeItem?.id ?? \"\"}`}\n        aria-labelledby={`tab-${activeItem?.id ?? \"\"}`}\n        className={mergeClassNames(\"mt-2 w-full\", panelClassName)}\n      >\n        <Fragment key={activeItem?.id}>\n          {activeItem?.content}\n        </Fragment>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/components/effects/border-beam/BorderBeam.tsx","../src/components/data-display/dashboard-cards/StatCard.tsx","../src/components/data-display/dashboard-cards/ChartCard.tsx","../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../src/components/navigation/tabs/Tabs.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface BorderBeamProps {\n  className?: string;\n  size?: number;\n  duration?: number;\n  borderWidth?: number;\n  anchor?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n}\n\nexport function BorderBeam({\n  className = \"\",\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 0.5,\n  colorFrom = \"var(--ds-color-accent)\",\n  colorTo = \"var(--ds-color-accent-hover)\",\n  delay = 0,\n}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--size\": `${size}px`,\n          \"--duration\": `${duration}s`,\n          \"--anchor\": `${anchor}`,\n          \"--border-width\": `${borderWidth}px`,\n          \"--beam-color-from\": colorFrom,\n          \"--beam-color-to\": colorTo,\n          \"--delay\": `-${delay}s`,\n        } as CSSProperties\n      }\n      className={`border-beam ${className}`}\n    />\n  );\n}\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","import {\n  Fragment,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { TabsDirection, TabsItem, TabsProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: TabsDirection,\n): Exclude<TabsDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction getFirstEnabledId(items: readonly TabsItem[]): string {\n  const fallback = items.find((item) => !item.disabled) ?? items[0];\n  return fallback?.id ?? \"\";\n}\n\nexport function Tabs({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  dir = \"auto\",\n  className,\n  listClassName,\n  triggerClassName,\n  panelClassName,\n  animationDurationMs,\n  animation = \"slide\",\n}: TabsProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const tabSlotRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n\n  const fallbackId = useMemo(() => getFirstEnabledId(items), [items]);\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? fallbackId,\n  );\n  const rawActiveId = isControlled ? value : internalValue;\n  const activeId = items.some((item) => item.id === rawActiveId)\n    ? rawActiveId\n    : fallbackId;\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        items.findIndex((item) => item.id === activeId),\n        0,\n      ),\n    [items, activeId],\n  );\n\n  const previousIndexRef = useRef(activeIndex);\n  const [indicator, setIndicator] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  const getEffectiveDirection = useCallback(() => {\n    if (dir !== \"auto\") {\n      return dir;\n    }\n\n    if (typeof window !== \"undefined\" && listRef.current) {\n      const cssDirection = window.getComputedStyle(listRef.current).direction;\n      if (cssDirection === \"rtl\" || cssDirection === \"ltr\") {\n        return cssDirection;\n      }\n    }\n\n    return resolveDirection(\"auto\");\n  }, [dir]);\n\n  useEffect(() => {\n    const previousIndex = previousIndexRef.current;\n    if (activeIndex === previousIndex) {\n      return;\n    }\n\n    const panel = panelRef.current;\n    if (!panel) {\n      previousIndexRef.current = activeIndex;\n      return;\n    }\n\n    if (animation === \"slide\") {\n      const indexDelta = activeIndex - previousIndex;\n      const logicalDirection = indexDelta >= 0 ? 1 : -1;\n      const visualDirection =\n        getEffectiveDirection() === \"rtl\" ? -logicalDirection : logicalDirection;\n      const fromX = visualDirection > 0 ? -14 : 14;\n\n      panel.animate(\n        [\n          { opacity: 0, transform: `translateX(${fromX}px)` },\n          { opacity: 1, transform: \"translateX(0px)\" },\n        ],\n        {\n          duration: animationDurationMs ?? 300,\n          easing: \"cubic-bezier(0.42, 1, 0.36, 1)\",\n        },\n      );\n    } else if (animation === \"fade\") {\n      panel.animate(\n        [{ opacity: 0 }, { opacity: 1 }],\n        {\n          duration: animationDurationMs ?? 360,\n          easing: \"cubic-bezier(0.42, 1, 0.36, 1)\",\n        },\n      );\n    } else if (animation === \"rise\") {\n      panel.animate(\n        [\n          { opacity: 0, transform: \"translateY(14px)\" },\n          { opacity: 1, transform: \"translateY(0px)\" },\n        ],\n        {\n          duration: animationDurationMs ?? 420,\n          easing: \"cubic-bezier(0.534, 1, 0.3, 1)\",\n        },\n      );\n    }\n\n    previousIndexRef.current = activeIndex;\n  }, [activeIndex, animationDurationMs, animation, getEffectiveDirection]);\n\n  const activeItem = items[activeIndex] ?? items[0];\n\n  useLayoutEffect(() => {\n    const updateIndicator = () => {\n      const selectedSlot = tabSlotRefs.current[activeItem?.id ?? \"\"];\n      if (!selectedSlot) {\n        setIndicator(null);\n        return;\n      }\n\n      setIndicator({\n        left: selectedSlot.offsetLeft,\n        width: selectedSlot.offsetWidth,\n      });\n    };\n\n    updateIndicator();\n    window.addEventListener(\"resize\", updateIndicator);\n    return () => window.removeEventListener(\"resize\", updateIndicator);\n  }, [activeItem?.id, items.length]);\n\n  const setValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onValueChange?.(nextValue);\n  };\n\n  const moveBy = (delta: number) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    let probe = activeIndex;\n    for (let step = 0; step < items.length; step++) {\n      probe = (probe + delta + items.length) % items.length;\n      const candidate = items[probe];\n      if (!candidate?.disabled) {\n        setValue(candidate.id);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      dir={dir === \"auto\" ? undefined : dir}\n      className={mergeClassNames(\"w-full\", className)}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        className={mergeClassNames(\n          \"relative flex h-9 w-full items-center gap-0 overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 p-1\",\n          listClassName,\n        )}\n      >\n        {items.length > 0 && indicator ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute bottom-1 top-1 rounded-md border border-ds-border-accent/45 bg-ds-accent shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out\"\n            style={{\n              width: `${indicator.width}px`,\n              transform: `translateX(${indicator.left}px)`,\n              left: 0,\n            }}\n          />\n        ) : null}\n        {items.map((item) => {\n          const selected = item.id === activeItem?.id;\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                tabSlotRefs.current[item.id] = node;\n              }}\n              className=\"relative z-10 h-full min-w-0 flex-1\"\n            >\n              <Button\n                role=\"tab\"\n                id={`tab-${item.id}`}\n                aria-selected={selected}\n                aria-controls={`tabpanel-${item.id}`}\n                tabIndex={selected ? 0 : -1}\n                disabled={item.disabled}\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"h-full w-full rounded-md px-3 py-1 text-base font-normal leading-[22px] transition-colors duration-200\",\n                  \"outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60\",\n                  selected ? \"text-ds-on-accent\" : \"text-ds-2 hover:text-ds-10\",\n                  item.disabled && \"cursor-not-allowed opacity-55\",\n                  triggerClassName,\n                )}\n                onClick={() => {\n                  if (!item.disabled) {\n                    setValue(item.id);\n                  }\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"ArrowRight\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? -1 : 1);\n                  }\n\n                  if (event.key === \"ArrowLeft\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? 1 : -1);\n                  }\n\n                  if (event.key === \"Home\") {\n                    event.preventDefault();\n                    const first = items.find((candidate) => !candidate.disabled);\n                    if (first) {\n                      setValue(first.id);\n                    }\n                  }\n\n                  if (event.key === \"End\") {\n                    event.preventDefault();\n                    const reversed = [...items].reverse();\n                    const last = reversed.find(\n                      (candidate) => !candidate.disabled,\n                    );\n                    if (last) {\n                      setValue(last.id);\n                    }\n                  }\n                }}\n              >\n                {item.label}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        ref={panelRef}\n        role=\"tabpanel\"\n        id={`tabpanel-${activeItem?.id ?? \"\"}`}\n        aria-labelledby={`tab-${activeItem?.id ?? \"\"}`}\n        className={mergeClassNames(\"mt-2 w-full\", panelClassName)}\n      >\n        <Fragment key={activeItem?.id}>\n          {activeItem?.content}\n        </Fragment>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/index.mjs

@@ -15,7 +15,7 @@ import { t as Select } from "./chunks/select-CUaSNR09.mjs";
 import { t as Calendar } from "./chunks/calendar-5XzPqKbE.mjs";
 import { t as Card } from "./chunks/card-BId1_zHw.mjs";
 import { t as Carousel } from "./chunks/carousel-Dd4rp-jr.mjs";
-import { a as HamburgerIcon, i as NavLink, n as Sidebar, r as SidebarLinks, t as DashboardSidebarShell } from "./chunks/sidebar-DYEDFV2u.mjs";
+import { a as HamburgerIcon, i as NavLink, n as Sidebar, r as SidebarLinks, t as DashboardSidebarShell } from "./chunks/sidebar-Dhf_Arae.mjs";
 import { t as Typography } from "./chunks/typography-Ct-jDJP3.mjs";
 import { t as ASCIIText } from "./chunks/ascii-text-Bdy4C5rU.mjs";
 import { t as ChromaGrid } from "./chunks/chroma-grid-opB2DBtS.mjs";
@@ -397,11 +397,21 @@ function Tabs({ items, value, defaultValue, onValueChange, dir = "auto", classNa
 				transform: "translateX(0px)"
 			}], {
 				duration: animationDurationMs ?? 300,
-				easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+				easing: "cubic-bezier(0.42, 1, 0.36, 1)"
 			});
 		} else if (animation === "fade") panel.animate([{ opacity: 0 }, { opacity: 1 }], {
 			duration: animationDurationMs ?? 360,
-			easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+			easing: "cubic-bezier(0.42, 1, 0.36, 1)"
+		});
+		else if (animation === "rise") panel.animate([{
+			opacity: 0,
+			transform: "translateY(14px)"
+		}, {
+			opacity: 1,
+			transform: "translateY(0px)"
+		}], {
+			duration: animationDurationMs ?? 420,
+			easing: "cubic-bezier(0.534, 1, 0.3, 1)"
 		});
 		previousIndexRef.current = activeIndex;
 	}, [

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/effects/border-beam/BorderBeam.tsx","../src/components/data-display/dashboard-cards/StatCard.tsx","../src/components/data-display/dashboard-cards/ChartCard.tsx","../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../src/components/navigation/tabs/Tabs.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface BorderBeamProps {\n  className?: string;\n  size?: number;\n  duration?: number;\n  borderWidth?: number;\n  anchor?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n}\n\nexport function BorderBeam({\n  className = \"\",\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 0.5,\n  colorFrom = \"var(--ds-color-accent)\",\n  colorTo = \"var(--ds-color-accent-hover)\",\n  delay = 0,\n}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--size\": `${size}px`,\n          \"--duration\": `${duration}s`,\n          \"--anchor\": `${anchor}`,\n          \"--border-width\": `${borderWidth}px`,\n          \"--beam-color-from\": colorFrom,\n          \"--beam-color-to\": colorTo,\n          \"--delay\": `-${delay}s`,\n        } as CSSProperties\n      }\n      className={`border-beam ${className}`}\n    />\n  );\n}\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","import {\n  Fragment,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { TabsDirection, TabsItem, TabsProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: TabsDirection,\n): Exclude<TabsDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction getFirstEnabledId(items: readonly TabsItem[]): string {\n  const fallback = items.find((item) => !item.disabled) ?? items[0];\n  return fallback?.id ?? \"\";\n}\n\nexport function Tabs({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  dir = \"auto\",\n  className,\n  listClassName,\n  triggerClassName,\n  panelClassName,\n  animationDurationMs,\n  animation = \"slide\",\n}: TabsProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const tabSlotRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n\n  const fallbackId = useMemo(() => getFirstEnabledId(items), [items]);\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? fallbackId,\n  );\n  const rawActiveId = isControlled ? value : internalValue;\n  const activeId = items.some((item) => item.id === rawActiveId)\n    ? rawActiveId\n    : fallbackId;\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        items.findIndex((item) => item.id === activeId),\n        0,\n      ),\n    [items, activeId],\n  );\n\n  const previousIndexRef = useRef(activeIndex);\n  const [indicator, setIndicator] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  const getEffectiveDirection = useCallback(() => {\n    if (dir !== \"auto\") {\n      return dir;\n    }\n\n    if (typeof window !== \"undefined\" && listRef.current) {\n      const cssDirection = window.getComputedStyle(listRef.current).direction;\n      if (cssDirection === \"rtl\" || cssDirection === \"ltr\") {\n        return cssDirection;\n      }\n    }\n\n    return resolveDirection(\"auto\");\n  }, [dir]);\n\n  useEffect(() => {\n    const previousIndex = previousIndexRef.current;\n    if (activeIndex === previousIndex) {\n      return;\n    }\n\n    const panel = panelRef.current;\n    if (!panel) {\n      previousIndexRef.current = activeIndex;\n      return;\n    }\n\n    if (animation === \"slide\") {\n      const indexDelta = activeIndex - previousIndex;\n      const logicalDirection = indexDelta >= 0 ? 1 : -1;\n      const visualDirection =\n        getEffectiveDirection() === \"rtl\" ? -logicalDirection : logicalDirection;\n      const fromX = visualDirection > 0 ? -14 : 14;\n\n      panel.animate(\n        [\n          { opacity: 0, transform: `translateX(${fromX}px)` },\n          { opacity: 1, transform: \"translateX(0px)\" },\n        ],\n        {\n          duration: animationDurationMs ?? 300,\n          easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n        },\n      );\n    } else if (animation === \"fade\") {\n      panel.animate(\n        [{ opacity: 0 }, { opacity: 1 }],\n        {\n          duration: animationDurationMs ?? 360,\n          easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n        },\n      );\n    }\n\n    previousIndexRef.current = activeIndex;\n  }, [activeIndex, animationDurationMs, animation, getEffectiveDirection]);\n\n  const activeItem = items[activeIndex] ?? items[0];\n\n  useLayoutEffect(() => {\n    const updateIndicator = () => {\n      const selectedSlot = tabSlotRefs.current[activeItem?.id ?? \"\"];\n      if (!selectedSlot) {\n        setIndicator(null);\n        return;\n      }\n\n      setIndicator({\n        left: selectedSlot.offsetLeft,\n        width: selectedSlot.offsetWidth,\n      });\n    };\n\n    updateIndicator();\n    window.addEventListener(\"resize\", updateIndicator);\n    return () => window.removeEventListener(\"resize\", updateIndicator);\n  }, [activeItem?.id, items.length]);\n\n  const setValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onValueChange?.(nextValue);\n  };\n\n  const moveBy = (delta: number) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    let probe = activeIndex;\n    for (let step = 0; step < items.length; step++) {\n      probe = (probe + delta + items.length) % items.length;\n      const candidate = items[probe];\n      if (!candidate?.disabled) {\n        setValue(candidate.id);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      dir={dir === \"auto\" ? undefined : dir}\n      className={mergeClassNames(\"w-full\", className)}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        className={mergeClassNames(\n          \"relative flex h-9 w-full items-center gap-0 overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 p-1\",\n          listClassName,\n        )}\n      >\n        {items.length > 0 && indicator ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute bottom-1 top-1 rounded-md border border-ds-border-accent/45 bg-ds-accent shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out\"\n            style={{\n              width: `${indicator.width}px`,\n              transform: `translateX(${indicator.left}px)`,\n              left: 0,\n            }}\n          />\n        ) : null}\n        {items.map((item) => {\n          const selected = item.id === activeItem?.id;\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                tabSlotRefs.current[item.id] = node;\n              }}\n              className=\"relative z-10 h-full min-w-0 flex-1\"\n            >\n              <Button\n                role=\"tab\"\n                id={`tab-${item.id}`}\n                aria-selected={selected}\n                aria-controls={`tabpanel-${item.id}`}\n                tabIndex={selected ? 0 : -1}\n                disabled={item.disabled}\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"h-full w-full rounded-md px-3 py-1 text-base font-normal leading-[22px] transition-colors duration-200\",\n                  \"outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60\",\n                  selected ? \"text-ds-on-accent\" : \"text-ds-2 hover:text-ds-10\",\n                  item.disabled && \"cursor-not-allowed opacity-55\",\n                  triggerClassName,\n                )}\n                onClick={() => {\n                  if (!item.disabled) {\n                    setValue(item.id);\n                  }\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"ArrowRight\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? -1 : 1);\n                  }\n\n                  if (event.key === \"ArrowLeft\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? 1 : -1);\n                  }\n\n                  if (event.key === \"Home\") {\n                    event.preventDefault();\n                    const first = items.find((candidate) => !candidate.disabled);\n                    if (first) {\n                      setValue(first.id);\n                    }\n                  }\n\n                  if (event.key === \"End\") {\n                    event.preventDefault();\n                    const reversed = [...items].reverse();\n                    const last = reversed.find(\n                      (candidate) => !candidate.disabled,\n                    );\n                    if (last) {\n                      setValue(last.id);\n                    }\n                  }\n                }}\n              >\n                {item.label}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        ref={panelRef}\n        role=\"tabpanel\"\n        id={`tabpanel-${activeItem?.id ?? \"\"}`}\n        aria-labelledby={`tab-${activeItem?.id ?? \"\"}`}\n        className={mergeClassNames(\"mt-2 w-full\", panelClassName)}\n      >\n        <Fragment key={activeItem?.id}>\n          {activeItem?.content}\n        </Fragment>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/components/effects/border-beam/BorderBeam.tsx","../src/components/data-display/dashboard-cards/StatCard.tsx","../src/components/data-display/dashboard-cards/ChartCard.tsx","../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../src/components/navigation/tabs/Tabs.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nexport interface BorderBeamProps {\n  className?: string;\n  size?: number;\n  duration?: number;\n  borderWidth?: number;\n  anchor?: number;\n  colorFrom?: string;\n  colorTo?: string;\n  delay?: number;\n}\n\nexport function BorderBeam({\n  className = \"\",\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 0.5,\n  colorFrom = \"var(--ds-color-accent)\",\n  colorTo = \"var(--ds-color-accent-hover)\",\n  delay = 0,\n}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--size\": `${size}px`,\n          \"--duration\": `${duration}s`,\n          \"--anchor\": `${anchor}`,\n          \"--border-width\": `${borderWidth}px`,\n          \"--beam-color-from\": colorFrom,\n          \"--beam-color-to\": colorTo,\n          \"--delay\": `-${delay}s`,\n        } as CSSProperties\n      }\n      className={`border-beam ${className}`}\n    />\n  );\n}\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","import {\n  Fragment,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { TabsDirection, TabsItem, TabsProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: TabsDirection,\n): Exclude<TabsDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction getFirstEnabledId(items: readonly TabsItem[]): string {\n  const fallback = items.find((item) => !item.disabled) ?? items[0];\n  return fallback?.id ?? \"\";\n}\n\nexport function Tabs({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  dir = \"auto\",\n  className,\n  listClassName,\n  triggerClassName,\n  panelClassName,\n  animationDurationMs,\n  animation = \"slide\",\n}: TabsProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const tabSlotRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n\n  const fallbackId = useMemo(() => getFirstEnabledId(items), [items]);\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? fallbackId,\n  );\n  const rawActiveId = isControlled ? value : internalValue;\n  const activeId = items.some((item) => item.id === rawActiveId)\n    ? rawActiveId\n    : fallbackId;\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        items.findIndex((item) => item.id === activeId),\n        0,\n      ),\n    [items, activeId],\n  );\n\n  const previousIndexRef = useRef(activeIndex);\n  const [indicator, setIndicator] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  const getEffectiveDirection = useCallback(() => {\n    if (dir !== \"auto\") {\n      return dir;\n    }\n\n    if (typeof window !== \"undefined\" && listRef.current) {\n      const cssDirection = window.getComputedStyle(listRef.current).direction;\n      if (cssDirection === \"rtl\" || cssDirection === \"ltr\") {\n        return cssDirection;\n      }\n    }\n\n    return resolveDirection(\"auto\");\n  }, [dir]);\n\n  useEffect(() => {\n    const previousIndex = previousIndexRef.current;\n    if (activeIndex === previousIndex) {\n      return;\n    }\n\n    const panel = panelRef.current;\n    if (!panel) {\n      previousIndexRef.current = activeIndex;\n      return;\n    }\n\n    if (animation === \"slide\") {\n      const indexDelta = activeIndex - previousIndex;\n      const logicalDirection = indexDelta >= 0 ? 1 : -1;\n      const visualDirection =\n        getEffectiveDirection() === \"rtl\" ? -logicalDirection : logicalDirection;\n      const fromX = visualDirection > 0 ? -14 : 14;\n\n      panel.animate(\n        [\n          { opacity: 0, transform: `translateX(${fromX}px)` },\n          { opacity: 1, transform: \"translateX(0px)\" },\n        ],\n        {\n          duration: animationDurationMs ?? 300,\n          easing: \"cubic-bezier(0.42, 1, 0.36, 1)\",\n        },\n      );\n    } else if (animation === \"fade\") {\n      panel.animate(\n        [{ opacity: 0 }, { opacity: 1 }],\n        {\n          duration: animationDurationMs ?? 360,\n          easing: \"cubic-bezier(0.42, 1, 0.36, 1)\",\n        },\n      );\n    } else if (animation === \"rise\") {\n      panel.animate(\n        [\n          { opacity: 0, transform: \"translateY(14px)\" },\n          { opacity: 1, transform: \"translateY(0px)\" },\n        ],\n        {\n          duration: animationDurationMs ?? 420,\n          easing: \"cubic-bezier(0.534, 1, 0.3, 1)\",\n        },\n      );\n    }\n\n    previousIndexRef.current = activeIndex;\n  }, [activeIndex, animationDurationMs, animation, getEffectiveDirection]);\n\n  const activeItem = items[activeIndex] ?? items[0];\n\n  useLayoutEffect(() => {\n    const updateIndicator = () => {\n      const selectedSlot = tabSlotRefs.current[activeItem?.id ?? \"\"];\n      if (!selectedSlot) {\n        setIndicator(null);\n        return;\n      }\n\n      setIndicator({\n        left: selectedSlot.offsetLeft,\n        width: selectedSlot.offsetWidth,\n      });\n    };\n\n    updateIndicator();\n    window.addEventListener(\"resize\", updateIndicator);\n    return () => window.removeEventListener(\"resize\", updateIndicator);\n  }, [activeItem?.id, items.length]);\n\n  const setValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onValueChange?.(nextValue);\n  };\n\n  const moveBy = (delta: number) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    let probe = activeIndex;\n    for (let step = 0; step < items.length; step++) {\n      probe = (probe + delta + items.length) % items.length;\n      const candidate = items[probe];\n      if (!candidate?.disabled) {\n        setValue(candidate.id);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      dir={dir === \"auto\" ? undefined : dir}\n      className={mergeClassNames(\"w-full\", className)}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        className={mergeClassNames(\n          \"relative flex h-9 w-full items-center gap-0 overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 p-1\",\n          listClassName,\n        )}\n      >\n        {items.length > 0 && indicator ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute bottom-1 top-1 rounded-md border border-ds-border-accent/45 bg-ds-accent shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out\"\n            style={{\n              width: `${indicator.width}px`,\n              transform: `translateX(${indicator.left}px)`,\n              left: 0,\n            }}\n          />\n        ) : null}\n        {items.map((item) => {\n          const selected = item.id === activeItem?.id;\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                tabSlotRefs.current[item.id] = node;\n              }}\n              className=\"relative z-10 h-full min-w-0 flex-1\"\n            >\n              <Button\n                role=\"tab\"\n                id={`tab-${item.id}`}\n                aria-selected={selected}\n                aria-controls={`tabpanel-${item.id}`}\n                tabIndex={selected ? 0 : -1}\n                disabled={item.disabled}\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"h-full w-full rounded-md px-3 py-1 text-base font-normal leading-[22px] transition-colors duration-200\",\n                  \"outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60\",\n                  selected ? \"text-ds-on-accent\" : \"text-ds-2 hover:text-ds-10\",\n                  item.disabled && \"cursor-not-allowed opacity-55\",\n                  triggerClassName,\n                )}\n                onClick={() => {\n                  if (!item.disabled) {\n                    setValue(item.id);\n                  }\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"ArrowRight\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? -1 : 1);\n                  }\n\n                  if (event.key === \"ArrowLeft\") {\n                    event.preventDefault();\n                    moveBy(getEffectiveDirection() === \"rtl\" ? 1 : -1);\n                  }\n\n                  if (event.key === \"Home\") {\n                    event.preventDefault();\n                    const first = items.find((candidate) => !candidate.disabled);\n                    if (first) {\n                      setValue(first.id);\n                    }\n                  }\n\n                  if (event.key === \"End\") {\n                    event.preventDefault();\n                    const reversed = [...items].reverse();\n                    const last = reversed.find(\n                      (candidate) => !candidate.disabled,\n                    );\n                    if (last) {\n                      setValue(last.id);\n                    }\n                  }\n                }}\n              >\n                {item.label}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        ref={panelRef}\n        role=\"tabpanel\"\n        id={`tabpanel-${activeItem?.id ?? \"\"}`}\n        aria-labelledby={`tab-${activeItem?.id ?? \"\"}`}\n        className={mergeClassNames(\"mt-2 w-full\", panelClassName)}\n      >\n        <Fragment key={activeItem?.id}>\n          {activeItem?.content}\n        </Fragment>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/sidebar.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_sidebar = require("./chunks/sidebar-Kkr45nuN.cjs");
+const require_sidebar = require("./chunks/sidebar-3i4mGE6T.cjs");
 exports.DashboardSidebarShell = require_sidebar.DashboardSidebarShell;
 exports.HamburgerIcon = require_sidebar.HamburgerIcon;
 exports.NavLink = require_sidebar.NavLink;

package/dist/sidebar.mjs

@@ -1,2 +1,2 @@
-import { a as HamburgerIcon, i as NavLink, n as Sidebar, r as SidebarLinks, t as DashboardSidebarShell } from "./chunks/sidebar-DYEDFV2u.mjs";
+import { a as HamburgerIcon, i as NavLink, n as Sidebar, r as SidebarLinks, t as DashboardSidebarShell } from "./chunks/sidebar-Dhf_Arae.mjs";
 export { DashboardSidebarShell, HamburgerIcon, NavLink, Sidebar, SidebarLinks };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "erp-pro-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Lightweight React UI component library for ERP and SaaS apps with tree-shakeable subpath exports.",
   "type": "module",
   "sideEffects": [

package/dist/chunks/sidebar-DYEDFV2u.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-DYEDFV2u.mjs","names":[],"sources":["../../src/components/navigation/sidebar/HamburgerIcon.tsx","../../src/components/navigation/sidebar/NavLink.tsx","../../src/components/navigation/sidebar/SidebarLinks.tsx","../../src/components/navigation/sidebar/Sidebar.tsx","../../src/components/navigation/sidebar/DashboardSidebarShell.tsx"],"sourcesContent":["import { mergeClassNames } from \"../../../utils\";\n\nexport interface HamburgerIconProps {\n  isOpen: boolean;\n  className?: string;\n}\n\nconst lineClassName =\n  \"block h-0.5 w-full rounded-lg bg-current transition-all duration-300 ease-in-out\";\n\nexport function HamburgerIcon({ isOpen, className }: HamburgerIconProps) {\n  return (\n    <span\n      className={mergeClassNames(\n        \"relative flex h-4 w-5 flex-col items-center justify-between\",\n        className,\n      )}\n      aria-hidden=\"true\"\n    >\n      <span\n        className={mergeClassNames(\n          lineClassName,\n          isOpen && \"translate-y-[5px] rotate-45 transform\",\n        )}\n      />\n      <span className={mergeClassNames(lineClassName, isOpen && \"w-0\")} />\n      <span\n        className={mergeClassNames(\n          lineClassName,\n          isOpen && \"-translate-y-[9px] -rotate-45 transform\",\n        )}\n      />\n    </span>\n  );\n}\n","import { useMemo } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport type { SidebarNavLinkProps } from \"./types\";\n\nexport function NavLink({\n  className,\n  children,\n  style,\n  borderRadius,\n  disabled = false,\n  href,\n  target,\n  rel,\n  onClick,\n}: SidebarNavLinkProps) {\n  const memoizedStyle = useMemo(\n    () => (borderRadius !== undefined ? { ...style, borderRadius } : style),\n    [borderRadius, style],\n  );\n\n  if (href) {\n    const resolvedRel = target === \"_blank\" ? (rel ?? \"noreferrer noopener\") : rel;\n\n    return (\n      <a\n        href={href}\n        className={className}\n        style={memoizedStyle}\n        target={target}\n        rel={resolvedRel}\n        aria-disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          onClick?.(event);\n        }}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"tertiary\"\n      className={className}\n      style={memoizedStyle}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  );\n}\n","import { mergeClassNames } from \"../../../utils\";\nimport { NavLink } from \"./NavLink\";\nimport type { SidebarDirection, SidebarItem, SidebarLinksProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: SidebarDirection,\n): Exclude<SidebarDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction isRouteActive(item: SidebarItem, activePath?: string): boolean {\n  if (typeof item.active === \"boolean\") {\n    return item.active;\n  }\n\n  if (!activePath || !item.href) {\n    return false;\n  }\n\n  return activePath === item.href || activePath.startsWith(`${item.href}/`);\n}\n\nexport function SidebarLinks({\n  items,\n  activePath,\n  onItemSelect,\n  direction = \"auto\",\n  className,\n  itemClassName,\n  activeItemClassName,\n}: SidebarLinksProps) {\n  const effectiveDirection = resolveDirection(direction);\n  const visibleItems = items.filter((item) => !item.hidden);\n\n  return (\n    <ul className={mergeClassNames(\"space-y-1.5\", className)}>\n      {visibleItems.map((item) => {\n        const active = isRouteActive(item, activePath);\n\n        return (\n          <li key={item.id} className=\"relative\">\n            <NavLink\n              href={item.href}\n              disabled={item.disabled}\n              className={mergeClassNames(\n                \"group relative flex w-full items-center gap-2.5 rounded-md border px-3 py-2.5 transition-all duration-200\",\n                effectiveDirection === \"rtl\" ? \"text-right\" : \"text-left\",\n                \"border-transparent text-ds-2 hover:border-ds-border-3 hover:bg-ds-surface-2/80 hover:text-ds-1\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-canvas\",\n                item.disabled && \"cursor-not-allowed opacity-50\",\n                active &&\n                  \"border-ds-border-accent/35 bg-ds-accent-subtle text-ds-1 shadow-[0_4px_12px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)]\",\n                active && activeItemClassName,\n                itemClassName,\n              )}\n              onClick={(event) => {\n                item.onSelect?.(event);\n                onItemSelect?.(item, event);\n              }}\n            >\n              <span\n                className={mergeClassNames(\n                  \"inline-flex h-5 w-5 shrink-0 items-center justify-center\",\n                  active ? \"text-ds-1\" : \"text-ds-2 group-hover:text-ds-1\",\n                )}\n                aria-hidden=\"true\"\n              >\n                {item.icon}\n              </span>\n              <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n                {item.label}\n              </span>\n              {item.badge ? (\n                <span className=\"shrink-0 text-xs text-ds-2\">{item.badge}</span>\n              ) : null}\n            </NavLink>\n            {active ? (\n              <span\n                className={mergeClassNames(\n                  \"pointer-events-none absolute  top-1.5 h-[calc(100%-12px)] w-2\",\n                  effectiveDirection === \"rtl\" ? \"right-0\" : \"left-0\",\n                )}\n                aria-hidden=\"true\"\n              >\n                {/* <span className=\"absolute inset-y-1 left-1/2 w-2 -translate-x-1/2 rounded-full bg-ds-accent/25 blur-[4px]\" /> */}\n                {/* <span className=\"absolute inset-y-0 left-1/6 w-[2px] -translate-x-1/2 rounded-full bg-ds-accent motion-safe:animate-pulse\" /> */}\n                {/* <span className=\"absolute top-2.5 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-ds-accent shadow-[0_0_10px_color-mix(in_srgb,var(--ds-color-accent)_55%,transparent)] motion-safe:animate-pulse\" /> */}\n              </span>\n            ) : null}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n","import { useCallback, useMemo, useState } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { SidebarLinks } from \"./SidebarLinks\";\nimport type { SidebarProps } from \"./types\";\n\nfunction useControllableOpenState(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange?: (open: boolean) => void,\n) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return [resolvedOpen, setOpen] as const;\n}\n\nconst fallbackBrand = (\n  <div className=\"text-xl font-bold uppercase tracking-wide text-ds-1\">\n    <span className=\"text-ds-accent\">ERP</span>\n    <span className=\"font-medium\">PRO</span>\n  </div>\n);\n\nexport function Sidebar({\n  items,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  activePath,\n  onItemSelect,\n  direction = \"auto\",\n  navbar,\n  brand = fallbackBrand,\n  footer,\n  className,\n  linksClassName,\n  itemClassName,\n  activeItemClassName,\n  overlayClassName,\n  closeLabel = \"Toggle sidebar\",\n  showOverlay = true,\n}: SidebarProps) {\n  const [resolvedOpen, setOpen] = useControllableOpenState(\n    open,\n    defaultOpen,\n    onOpenChange,\n  );\n\n  const content = useMemo(\n    () => (\n      <aside\n        dir={direction === \"auto\" ? undefined : direction}\n        className={mergeClassNames(\n          \"fixed inset-y-2 z-50 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl\",\n          \"transition-transform duration-200 ease-out xl:translate-x-0\",\n          direction === \"rtl\" ? \"right-2\" : \"left-2\",\n          resolvedOpen\n            ? \"translate-x-0\"\n            : direction === \"rtl\"\n              ? \"translate-x-[110%] xl:translate-x-0\"\n              : \"-translate-x-[110%] xl:translate-x-0\",\n          className,\n        )}\n        style={{\n          backdropFilter: \"blur(14px) saturate(120%)\",\n          WebkitBackdropFilter: \"blur(14px) saturate(120%)\",\n        }}\n      >\n        {navbar ? (\n          <div className=\"mb-4\">{navbar}</div>\n        ) : (\n          <div className=\"mb-4 flex items-center justify-between gap-3 rounded-xl border border-ds-border-3 bg-ds-surface-2/85 px-3 py-2\">\n            <div className=\"min-w-0 flex-1\">{brand}</div>\n            <Button\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"small\"\n              aria-label={closeLabel}\n              className={mergeClassNames(\n                \"p-1! text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\",\n                \"xl:hidden\",\n              )}\n              onClick={() => setOpen(!resolvedOpen)}\n            >\n              <HamburgerIcon isOpen={resolvedOpen} />\n            </Button>\n          </div>\n        )}\n\n        <div className=\"mb-5 h-px bg-ds-border-3\" />\n\n        <div className=\"min-h-0 flex-1 overflow-y-auto pr-1\">\n          <SidebarLinks\n            items={items}\n            activePath={activePath}\n            onItemSelect={onItemSelect}\n            direction={direction}\n            className={linksClassName}\n            itemClassName={itemClassName}\n            activeItemClassName={activeItemClassName}\n          />\n        </div>\n\n        {footer ? <div className=\"mt-4\">{footer}</div> : null}\n      </aside>\n    ),\n    [\n      activeItemClassName,\n      activePath,\n      brand,\n      className,\n      closeLabel,\n      direction,\n      footer,\n      itemClassName,\n      items,\n      linksClassName,\n      onItemSelect,\n      resolvedOpen,\n      setOpen,\n    ],\n  );\n\n  if (!showOverlay) {\n    return content;\n  }\n\n  return (\n    <>\n      {content}\n      <Button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"small\"\n        aria-hidden={!resolvedOpen}\n        tabIndex={resolvedOpen ? 0 : -1}\n        className={mergeClassNames(\n          \"fixed inset-0 z-40 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden\",\n          resolvedOpen\n            ? \"pointer-events-auto opacity-100\"\n            : \"pointer-events-none opacity-0\",\n          overlayClassName,\n        )}\n        onClick={() => setOpen(false)}\n      />\n    </>\n  );\n}\n","import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\nimport { BellIcon, FullScreenIcon } from \"../../icons\";\nimport { Button } from \"../../forms/button\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { Typography } from \"../../typography\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { Sidebar } from \"./Sidebar\";\nimport type { SidebarItem, SidebarProps } from \"./types\";\nimport { SunToMoonButton } from \"../../effects\";\n\nexport interface DashboardHeaderRenderContext {\n  isSidebarOpen: boolean;\n  setSidebarOpen: (open: boolean) => void;\n  openSidebar: () => void;\n  closeSidebar: () => void;\n  toggleSidebar: () => void;\n  direction: Exclude<SidebarProps[\"direction\"], \"auto\">;\n  isRtl: boolean;\n}\n\ntype DashboardShellSlot =\n  | ReactNode\n  | ((context: DashboardHeaderRenderContext) => ReactNode);\n\nconst notificationItems = [\n  {\n    id: \"stock\",\n    title: \"Low stock alert\",\n    description: \"Wireless Mouse is below reorder point.\",\n    time: \"4m\",\n    toneClassName:\n      \"bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border\",\n  },\n  {\n    id: \"invoice\",\n    title: \"Invoice paid\",\n    description: \"INV-2048 was settled successfully.\",\n    time: \"18m\",\n    toneClassName:\n      \"bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border\",\n  },\n  {\n    id: \"sync\",\n    title: \"Catalog sync complete\",\n    description: \"128 product records refreshed.\",\n    time: \"42m\",\n    toneClassName:\n      \"bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border\",\n  },\n] as const;\n\nexport interface DashboardSidebarShellProps {\n  items: readonly SidebarItem[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  direction?: SidebarProps[\"direction\"];\n  activePath?: string;\n  onItemSelect?: SidebarProps[\"onItemSelect\"];\n  brand?: SidebarProps[\"brand\"];\n  sidebarNavbar?: SidebarProps[\"navbar\"];\n  sidebarFooter?: SidebarProps[\"footer\"];\n  sidebarClassName?: SidebarProps[\"className\"];\n  sidebarLinksClassName?: SidebarProps[\"linksClassName\"];\n  sidebarItemClassName?: SidebarProps[\"itemClassName\"];\n  sidebarActiveItemClassName?: SidebarProps[\"activeItemClassName\"];\n  sidebarOverlayClassName?: SidebarProps[\"overlayClassName\"];\n  sidebarCloseLabel?: SidebarProps[\"closeLabel\"];\n  showSidebarOverlay?: SidebarProps[\"showOverlay\"];\n  header?: DashboardShellSlot;\n  headerLeading?: DashboardShellSlot;\n  headerActions?: DashboardShellSlot;\n  headerClassName?: string;\n  headerTitleClassName?: string;\n  headerActionsClassName?: string;\n  breadcrumb?: ReactNode;\n  title?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  mainClassName?: string;\n  autoHideOnMobileBreakpoint?: boolean;\n}\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: SidebarProps[\"direction\"],\n): Exclude<SidebarProps[\"direction\"], \"auto\"> {\n  if (direction === \"rtl\" || direction === \"ltr\") {\n    return direction;\n  }\n\n  if (typeof document !== \"undefined\") {\n    const documentDirection = document.documentElement.getAttribute(\"dir\");\n    if (documentDirection === \"rtl\" || documentDirection === \"ltr\") {\n      return documentDirection;\n    }\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction resolveSlot(\n  slot: DashboardShellSlot | undefined,\n  context: DashboardHeaderRenderContext,\n) {\n  return typeof slot === \"function\" ? slot(context) : slot;\n}\n\nfunction useControllableOpenState(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange?: (open: boolean) => void,\n) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return [resolvedOpen, setOpen] as const;\n}\n\nexport function DashboardSidebarShell({\n  items,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  direction = \"auto\",\n  activePath,\n  onItemSelect,\n  brand,\n  sidebarNavbar,\n  sidebarFooter,\n  sidebarClassName,\n  sidebarLinksClassName,\n  sidebarItemClassName,\n  sidebarActiveItemClassName,\n  sidebarOverlayClassName,\n  sidebarCloseLabel,\n  showSidebarOverlay,\n  header,\n  headerLeading,\n  headerActions,\n  headerClassName,\n  headerTitleClassName,\n  headerActionsClassName,\n  breadcrumb = \"Pages / Dashboard\",\n  title = \"Dashboard\",\n  children,\n  className,\n  contentClassName,\n  mainClassName,\n  autoHideOnMobileBreakpoint = true,\n}: DashboardSidebarShellProps) {\n  const [resolvedOpen, setOpen] = useControllableOpenState(\n    open,\n    defaultOpen,\n    onOpenChange,\n  );\n  const resolvedDirection = resolveDirection(direction);\n  const isRtl = resolvedDirection === \"rtl\";\n  const openSidebar = useCallback(() => setOpen(true), [setOpen]);\n  const closeSidebar = useCallback(() => setOpen(false), [setOpen]);\n  const toggleSidebar = useCallback(\n    () => setOpen(!resolvedOpen),\n    [resolvedOpen, setOpen],\n  );\n\n  const headerContext = useMemo<DashboardHeaderRenderContext>(\n    () => ({\n      isSidebarOpen: resolvedOpen,\n      setSidebarOpen: setOpen,\n      openSidebar,\n      closeSidebar,\n      toggleSidebar,\n      direction: resolvedDirection,\n      isRtl,\n    }),\n    [\n      closeSidebar,\n      isRtl,\n      openSidebar,\n      resolvedDirection,\n      resolvedOpen,\n      setOpen,\n      toggleSidebar,\n    ],\n  );\n\n  useEffect(() => {\n    if (!autoHideOnMobileBreakpoint || typeof window === \"undefined\") {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia(\"(max-width: 1279px)\");\n\n    const handleMobileEnter = (event: MediaQueryListEvent | MediaQueryList) => {\n      if (event.matches) {\n        setOpen(false);\n      }\n    };\n\n    // Ensure first render on smaller screens starts closed.\n    handleMobileEnter(mediaQuery);\n\n    const listener = (event: MediaQueryListEvent) => handleMobileEnter(event);\n    mediaQuery.addEventListener(\"change\", listener);\n\n    return () => mediaQuery.removeEventListener(\"change\", listener);\n  }, [autoHideOnMobileBreakpoint, setOpen]);\n\n  const defaultHeaderActions = useMemo(\n    () => (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0! xl:hidden\"\n          aria-label=\"Toggle sidebar\"\n          onClick={toggleSidebar}\n        >\n          <HamburgerIcon isOpen={resolvedOpen} />\n        </Button>\n\n        <DropdownMenu\n          animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n          panelClassName={mergeClassNames(\n            \"top-[44px]\",\n            isRtl ? \"left-0\" : \"right-0\",\n          )}\n          trigger={\n            <Button\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"small\"\n              className=\"relative h-9 w-9 rounded-full p-0!\"\n              aria-label=\"Open notifications\"\n            >\n              <BellIcon className=\"h-5 w-5\" />\n              <span\n                className={mergeClassNames(\n                  \"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\",\n                  isRtl ? \"-left-0.5\" : \"-right-0.5\",\n                )}\n              >\n                {notificationItems.length}\n              </span>\n            </Button>\n          }\n        >\n          <div className=\"w-[340px] rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n            <div className=\"mb-2 flex items-center justify-between gap-3\">\n              <Typography variant=\"body2\" weight=\"black\">\n                Notifications\n              </Typography>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className=\"px-2 py-1 text-xs\"\n              >\n                Mark all read\n              </Button>\n            </div>\n            <div className=\"space-y-2\">\n              {notificationItems.map((item) => (\n                <Button\n                  key={item.id}\n                  type=\"button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  className={mergeClassNames(\n                    \"w-full rounded-lg border border-ds-border-3 px-2.5 py-2\",\n                    isRtl\n                      ? \"justify-end text-right\"\n                      : \"justify-start text-left\",\n                  )}\n                >\n                  <span\n                    className={`mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${item.toneClassName}`}\n                  >\n                    <BellIcon className=\"h-3.5 w-3.5\" />\n                  </span>\n                  <span className=\"min-w-0 flex-1\">\n                    <span className=\"block truncate text-xs font-semibold text-ds-1\">\n                      {item.title}\n                    </span>\n                    <span className=\"block truncate text-[11px] text-ds-3\">\n                      {item.description}\n                    </span>\n                  </span>\n                  <span className=\"text-[11px] text-ds-3\">{item.time}</span>\n                </Button>\n              ))}\n            </div>\n          </div>\n        </DropdownMenu>\n\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0!\"\n          aria-label=\"Toggle theme\"\n        >\n          <span className=\"flex cursor-pointer rounded-full\">\n            <SunToMoonButton showLabelAndImage={false} />\n          </span>\n        </Button>\n\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0!\"\n          aria-label=\"Toggle fullscreen\"\n          onClick={() => {\n            if (document.fullscreenElement) {\n              document.exitFullscreen();\n            } else {\n              document.documentElement.requestFullscreen();\n            }\n          }}\n        >\n          <FullScreenIcon className=\"h-5 w-5\" />\n        </Button>\n\n        <DropdownMenu\n          animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n          panelClassName={mergeClassNames(\n            \"top-[44px]\",\n            isRtl ? \"left-0\" : \"right-0\",\n          )}\n          trigger={\n            <Button\n              type=\"button\"\n              variant=\"primary\"\n              size=\"small\"\n              className=\"h-9 w-9 rounded-full p-0! text-sm font-black\"\n              aria-label=\"Open user menu\"\n            >\n              JD\n            </Button>\n          }\n        >\n          <div className=\"w-52 rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n            <div className=\"mb-2 flex items-center gap-2\">\n              <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\">\n                JD\n              </span>\n              <div className=\"min-w-0\">\n                <Typography variant=\"body2\" weight=\"black\" className=\"truncate\">\n                  John Doe\n                </Typography>\n                <Typography variant=\"caption\" className=\"text-ds-3\">\n                  Administrator\n                </Typography>\n              </div>\n            </div>\n            <div className=\"my-2 border-t border-ds-border-3\" />\n            <div className=\"flex flex-col gap-1\">\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Profile\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Settings\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm text-ds-state-error-text\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Log Out\n              </Button>\n            </div>\n          </div>\n        </DropdownMenu>\n      </>\n    ),\n    [isRtl, resolvedOpen, toggleSidebar],\n  );\n\n  const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);\n  const resolvedHeaderActions =\n    headerActions === undefined\n      ? defaultHeaderActions\n      : resolveSlot(headerActions, headerContext);\n\n  const defaultHeader = useMemo(\n    () => (\n      <nav\n        dir={resolvedDirection}\n        className={mergeClassNames(\n          \"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\",\n          headerClassName,\n        )}\n      >\n        <div\n          className={mergeClassNames(\n            \"flex w-full justify-between gap-4\",\n            isRtl && \"flex-row-reverse\",\n          )}\n        >\n          <div\n            className={mergeClassNames(\n              \"flex min-w-0 items-center gap-3\",\n              isRtl && \"flex-row-reverse text-right\",\n              headerTitleClassName,\n            )}\n          >\n            {resolvedHeaderLeading}\n            <div className=\"min-w-0\">\n              <Typography variant=\"caption\" className=\"text-ds-3 capitalize\">\n                {breadcrumb}\n              </Typography>\n              <Typography\n                variant=\"h5\"\n                weight=\"black\"\n                className=\"truncate leading-7 capitalize\"\n              >\n                {title}\n              </Typography>\n            </div>\n          </div>\n\n          <div\n            className={mergeClassNames(\n              \"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)]\",\n              isRtl && \"flex-row-reverse\",\n              headerActionsClassName,\n            )}\n          >\n            {resolvedHeaderActions}\n          </div>\n        </div>\n      </nav>\n    ),\n    [\n      breadcrumb,\n      headerActionsClassName,\n      headerClassName,\n      headerTitleClassName,\n      isRtl,\n      resolvedDirection,\n      resolvedHeaderActions,\n      resolvedHeaderLeading,\n      title,\n    ],\n  );\n\n  const resolvedHeader =\n    header === undefined ? undefined : resolveSlot(header, headerContext);\n\n  return (\n    <div\n      dir={resolvedDirection}\n      className={mergeClassNames(\"flex h-full w-full\", className)}\n    >\n      <Sidebar\n        items={items}\n        open={resolvedOpen}\n        onOpenChange={setOpen}\n        activePath={activePath}\n        onItemSelect={onItemSelect}\n        direction={direction}\n        navbar={sidebarNavbar}\n        brand={brand}\n        footer={sidebarFooter}\n        className={sidebarClassName}\n        linksClassName={sidebarLinksClassName}\n        itemClassName={sidebarItemClassName}\n        activeItemClassName={sidebarActiveItemClassName}\n        overlayClassName={sidebarOverlayClassName}\n        closeLabel={sidebarCloseLabel}\n        showOverlay={showSidebarOverlay}\n      />\n\n      <div className=\"h-full w-full\">\n        <main\n          className={mergeClassNames(\n            \"mx-2 flex-none transition-all duration-200 ease-in-out\",\n            isRtl ? \"xl:mr-[18.5rem]\" : \"xl:ml-[18.5rem]\",\n            mainClassName,\n          )}\n        >\n          {resolvedHeader ?? defaultHeader}\n\n          <section\n            className={mergeClassNames(\n              \"mx-auto min-h-[calc(100dvh-180px)] rounded-md md:min-h-[calc(100dvh-116px)]\",\n              contentClassName,\n            )}\n          >\n            {children}\n          </section>\n        </main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/sidebar-Kkr45nuN.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-Kkr45nuN.cjs","names":[],"sources":["../../src/components/navigation/sidebar/HamburgerIcon.tsx","../../src/components/navigation/sidebar/NavLink.tsx","../../src/components/navigation/sidebar/SidebarLinks.tsx","../../src/components/navigation/sidebar/Sidebar.tsx","../../src/components/navigation/sidebar/DashboardSidebarShell.tsx"],"sourcesContent":["import { mergeClassNames } from \"../../../utils\";\n\nexport interface HamburgerIconProps {\n  isOpen: boolean;\n  className?: string;\n}\n\nconst lineClassName =\n  \"block h-0.5 w-full rounded-lg bg-current transition-all duration-300 ease-in-out\";\n\nexport function HamburgerIcon({ isOpen, className }: HamburgerIconProps) {\n  return (\n    <span\n      className={mergeClassNames(\n        \"relative flex h-4 w-5 flex-col items-center justify-between\",\n        className,\n      )}\n      aria-hidden=\"true\"\n    >\n      <span\n        className={mergeClassNames(\n          lineClassName,\n          isOpen && \"translate-y-[5px] rotate-45 transform\",\n        )}\n      />\n      <span className={mergeClassNames(lineClassName, isOpen && \"w-0\")} />\n      <span\n        className={mergeClassNames(\n          lineClassName,\n          isOpen && \"-translate-y-[9px] -rotate-45 transform\",\n        )}\n      />\n    </span>\n  );\n}\n","import { useMemo } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport type { SidebarNavLinkProps } from \"./types\";\n\nexport function NavLink({\n  className,\n  children,\n  style,\n  borderRadius,\n  disabled = false,\n  href,\n  target,\n  rel,\n  onClick,\n}: SidebarNavLinkProps) {\n  const memoizedStyle = useMemo(\n    () => (borderRadius !== undefined ? { ...style, borderRadius } : style),\n    [borderRadius, style],\n  );\n\n  if (href) {\n    const resolvedRel = target === \"_blank\" ? (rel ?? \"noreferrer noopener\") : rel;\n\n    return (\n      <a\n        href={href}\n        className={className}\n        style={memoizedStyle}\n        target={target}\n        rel={resolvedRel}\n        aria-disabled={disabled}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          onClick?.(event);\n        }}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"tertiary\"\n      className={className}\n      style={memoizedStyle}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  );\n}\n","import { mergeClassNames } from \"../../../utils\";\nimport { NavLink } from \"./NavLink\";\nimport type { SidebarDirection, SidebarItem, SidebarLinksProps } from \"./types\";\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: SidebarDirection,\n): Exclude<SidebarDirection, \"auto\"> {\n  if (direction !== \"auto\") {\n    return direction;\n  }\n\n  if (typeof document === \"undefined\") {\n    return \"ltr\";\n  }\n\n  const explicitDirection =\n    document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n  if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n    return explicitDirection;\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction isRouteActive(item: SidebarItem, activePath?: string): boolean {\n  if (typeof item.active === \"boolean\") {\n    return item.active;\n  }\n\n  if (!activePath || !item.href) {\n    return false;\n  }\n\n  return activePath === item.href || activePath.startsWith(`${item.href}/`);\n}\n\nexport function SidebarLinks({\n  items,\n  activePath,\n  onItemSelect,\n  direction = \"auto\",\n  className,\n  itemClassName,\n  activeItemClassName,\n}: SidebarLinksProps) {\n  const effectiveDirection = resolveDirection(direction);\n  const visibleItems = items.filter((item) => !item.hidden);\n\n  return (\n    <ul className={mergeClassNames(\"space-y-1.5\", className)}>\n      {visibleItems.map((item) => {\n        const active = isRouteActive(item, activePath);\n\n        return (\n          <li key={item.id} className=\"relative\">\n            <NavLink\n              href={item.href}\n              disabled={item.disabled}\n              className={mergeClassNames(\n                \"group relative flex w-full items-center gap-2.5 rounded-md border px-3 py-2.5 transition-all duration-200\",\n                effectiveDirection === \"rtl\" ? \"text-right\" : \"text-left\",\n                \"border-transparent text-ds-2 hover:border-ds-border-3 hover:bg-ds-surface-2/80 hover:text-ds-1\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-canvas\",\n                item.disabled && \"cursor-not-allowed opacity-50\",\n                active &&\n                  \"border-ds-border-accent/35 bg-ds-accent-subtle text-ds-1 shadow-[0_4px_12px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)]\",\n                active && activeItemClassName,\n                itemClassName,\n              )}\n              onClick={(event) => {\n                item.onSelect?.(event);\n                onItemSelect?.(item, event);\n              }}\n            >\n              <span\n                className={mergeClassNames(\n                  \"inline-flex h-5 w-5 shrink-0 items-center justify-center\",\n                  active ? \"text-ds-1\" : \"text-ds-2 group-hover:text-ds-1\",\n                )}\n                aria-hidden=\"true\"\n              >\n                {item.icon}\n              </span>\n              <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n                {item.label}\n              </span>\n              {item.badge ? (\n                <span className=\"shrink-0 text-xs text-ds-2\">{item.badge}</span>\n              ) : null}\n            </NavLink>\n            {active ? (\n              <span\n                className={mergeClassNames(\n                  \"pointer-events-none absolute  top-1.5 h-[calc(100%-12px)] w-2\",\n                  effectiveDirection === \"rtl\" ? \"right-0\" : \"left-0\",\n                )}\n                aria-hidden=\"true\"\n              >\n                {/* <span className=\"absolute inset-y-1 left-1/2 w-2 -translate-x-1/2 rounded-full bg-ds-accent/25 blur-[4px]\" /> */}\n                {/* <span className=\"absolute inset-y-0 left-1/6 w-[2px] -translate-x-1/2 rounded-full bg-ds-accent motion-safe:animate-pulse\" /> */}\n                {/* <span className=\"absolute top-2.5 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-ds-accent shadow-[0_0_10px_color-mix(in_srgb,var(--ds-color-accent)_55%,transparent)] motion-safe:animate-pulse\" /> */}\n              </span>\n            ) : null}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n","import { useCallback, useMemo, useState } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { SidebarLinks } from \"./SidebarLinks\";\nimport type { SidebarProps } from \"./types\";\n\nfunction useControllableOpenState(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange?: (open: boolean) => void,\n) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return [resolvedOpen, setOpen] as const;\n}\n\nconst fallbackBrand = (\n  <div className=\"text-xl font-bold uppercase tracking-wide text-ds-1\">\n    <span className=\"text-ds-accent\">ERP</span>\n    <span className=\"font-medium\">PRO</span>\n  </div>\n);\n\nexport function Sidebar({\n  items,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  activePath,\n  onItemSelect,\n  direction = \"auto\",\n  navbar,\n  brand = fallbackBrand,\n  footer,\n  className,\n  linksClassName,\n  itemClassName,\n  activeItemClassName,\n  overlayClassName,\n  closeLabel = \"Toggle sidebar\",\n  showOverlay = true,\n}: SidebarProps) {\n  const [resolvedOpen, setOpen] = useControllableOpenState(\n    open,\n    defaultOpen,\n    onOpenChange,\n  );\n\n  const content = useMemo(\n    () => (\n      <aside\n        dir={direction === \"auto\" ? undefined : direction}\n        className={mergeClassNames(\n          \"fixed inset-y-2 z-50 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl\",\n          \"transition-transform duration-200 ease-out xl:translate-x-0\",\n          direction === \"rtl\" ? \"right-2\" : \"left-2\",\n          resolvedOpen\n            ? \"translate-x-0\"\n            : direction === \"rtl\"\n              ? \"translate-x-[110%] xl:translate-x-0\"\n              : \"-translate-x-[110%] xl:translate-x-0\",\n          className,\n        )}\n        style={{\n          backdropFilter: \"blur(14px) saturate(120%)\",\n          WebkitBackdropFilter: \"blur(14px) saturate(120%)\",\n        }}\n      >\n        {navbar ? (\n          <div className=\"mb-4\">{navbar}</div>\n        ) : (\n          <div className=\"mb-4 flex items-center justify-between gap-3 rounded-xl border border-ds-border-3 bg-ds-surface-2/85 px-3 py-2\">\n            <div className=\"min-w-0 flex-1\">{brand}</div>\n            <Button\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"small\"\n              aria-label={closeLabel}\n              className={mergeClassNames(\n                \"p-1! text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\",\n                \"xl:hidden\",\n              )}\n              onClick={() => setOpen(!resolvedOpen)}\n            >\n              <HamburgerIcon isOpen={resolvedOpen} />\n            </Button>\n          </div>\n        )}\n\n        <div className=\"mb-5 h-px bg-ds-border-3\" />\n\n        <div className=\"min-h-0 flex-1 overflow-y-auto pr-1\">\n          <SidebarLinks\n            items={items}\n            activePath={activePath}\n            onItemSelect={onItemSelect}\n            direction={direction}\n            className={linksClassName}\n            itemClassName={itemClassName}\n            activeItemClassName={activeItemClassName}\n          />\n        </div>\n\n        {footer ? <div className=\"mt-4\">{footer}</div> : null}\n      </aside>\n    ),\n    [\n      activeItemClassName,\n      activePath,\n      brand,\n      className,\n      closeLabel,\n      direction,\n      footer,\n      itemClassName,\n      items,\n      linksClassName,\n      onItemSelect,\n      resolvedOpen,\n      setOpen,\n    ],\n  );\n\n  if (!showOverlay) {\n    return content;\n  }\n\n  return (\n    <>\n      {content}\n      <Button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"small\"\n        aria-hidden={!resolvedOpen}\n        tabIndex={resolvedOpen ? 0 : -1}\n        className={mergeClassNames(\n          \"fixed inset-0 z-40 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden\",\n          resolvedOpen\n            ? \"pointer-events-auto opacity-100\"\n            : \"pointer-events-none opacity-0\",\n          overlayClassName,\n        )}\n        onClick={() => setOpen(false)}\n      />\n    </>\n  );\n}\n","import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\nimport { BellIcon, FullScreenIcon } from \"../../icons\";\nimport { Button } from \"../../forms/button\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { Typography } from \"../../typography\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { Sidebar } from \"./Sidebar\";\nimport type { SidebarItem, SidebarProps } from \"./types\";\nimport { SunToMoonButton } from \"../../effects\";\n\nexport interface DashboardHeaderRenderContext {\n  isSidebarOpen: boolean;\n  setSidebarOpen: (open: boolean) => void;\n  openSidebar: () => void;\n  closeSidebar: () => void;\n  toggleSidebar: () => void;\n  direction: Exclude<SidebarProps[\"direction\"], \"auto\">;\n  isRtl: boolean;\n}\n\ntype DashboardShellSlot =\n  | ReactNode\n  | ((context: DashboardHeaderRenderContext) => ReactNode);\n\nconst notificationItems = [\n  {\n    id: \"stock\",\n    title: \"Low stock alert\",\n    description: \"Wireless Mouse is below reorder point.\",\n    time: \"4m\",\n    toneClassName:\n      \"bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border\",\n  },\n  {\n    id: \"invoice\",\n    title: \"Invoice paid\",\n    description: \"INV-2048 was settled successfully.\",\n    time: \"18m\",\n    toneClassName:\n      \"bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border\",\n  },\n  {\n    id: \"sync\",\n    title: \"Catalog sync complete\",\n    description: \"128 product records refreshed.\",\n    time: \"42m\",\n    toneClassName:\n      \"bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border\",\n  },\n] as const;\n\nexport interface DashboardSidebarShellProps {\n  items: readonly SidebarItem[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  direction?: SidebarProps[\"direction\"];\n  activePath?: string;\n  onItemSelect?: SidebarProps[\"onItemSelect\"];\n  brand?: SidebarProps[\"brand\"];\n  sidebarNavbar?: SidebarProps[\"navbar\"];\n  sidebarFooter?: SidebarProps[\"footer\"];\n  sidebarClassName?: SidebarProps[\"className\"];\n  sidebarLinksClassName?: SidebarProps[\"linksClassName\"];\n  sidebarItemClassName?: SidebarProps[\"itemClassName\"];\n  sidebarActiveItemClassName?: SidebarProps[\"activeItemClassName\"];\n  sidebarOverlayClassName?: SidebarProps[\"overlayClassName\"];\n  sidebarCloseLabel?: SidebarProps[\"closeLabel\"];\n  showSidebarOverlay?: SidebarProps[\"showOverlay\"];\n  header?: DashboardShellSlot;\n  headerLeading?: DashboardShellSlot;\n  headerActions?: DashboardShellSlot;\n  headerClassName?: string;\n  headerTitleClassName?: string;\n  headerActionsClassName?: string;\n  breadcrumb?: ReactNode;\n  title?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  mainClassName?: string;\n  autoHideOnMobileBreakpoint?: boolean;\n}\n\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n  direction: SidebarProps[\"direction\"],\n): Exclude<SidebarProps[\"direction\"], \"auto\"> {\n  if (direction === \"rtl\" || direction === \"ltr\") {\n    return direction;\n  }\n\n  if (typeof document !== \"undefined\") {\n    const documentDirection = document.documentElement.getAttribute(\"dir\");\n    if (documentDirection === \"rtl\" || documentDirection === \"ltr\") {\n      return documentDirection;\n    }\n  }\n\n  if (\n    typeof navigator !== \"undefined\" &&\n    rtlLanguages.test(navigator.language)\n  ) {\n    return \"rtl\";\n  }\n\n  return \"ltr\";\n}\n\nfunction resolveSlot(\n  slot: DashboardShellSlot | undefined,\n  context: DashboardHeaderRenderContext,\n) {\n  return typeof slot === \"function\" ? slot(context) : slot;\n}\n\nfunction useControllableOpenState(\n  open: boolean | undefined,\n  defaultOpen: boolean,\n  onOpenChange?: (open: boolean) => void,\n) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = open !== undefined;\n  const resolvedOpen = isControlled ? open : internalOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(nextOpen);\n      }\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  return [resolvedOpen, setOpen] as const;\n}\n\nexport function DashboardSidebarShell({\n  items,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  direction = \"auto\",\n  activePath,\n  onItemSelect,\n  brand,\n  sidebarNavbar,\n  sidebarFooter,\n  sidebarClassName,\n  sidebarLinksClassName,\n  sidebarItemClassName,\n  sidebarActiveItemClassName,\n  sidebarOverlayClassName,\n  sidebarCloseLabel,\n  showSidebarOverlay,\n  header,\n  headerLeading,\n  headerActions,\n  headerClassName,\n  headerTitleClassName,\n  headerActionsClassName,\n  breadcrumb = \"Pages / Dashboard\",\n  title = \"Dashboard\",\n  children,\n  className,\n  contentClassName,\n  mainClassName,\n  autoHideOnMobileBreakpoint = true,\n}: DashboardSidebarShellProps) {\n  const [resolvedOpen, setOpen] = useControllableOpenState(\n    open,\n    defaultOpen,\n    onOpenChange,\n  );\n  const resolvedDirection = resolveDirection(direction);\n  const isRtl = resolvedDirection === \"rtl\";\n  const openSidebar = useCallback(() => setOpen(true), [setOpen]);\n  const closeSidebar = useCallback(() => setOpen(false), [setOpen]);\n  const toggleSidebar = useCallback(\n    () => setOpen(!resolvedOpen),\n    [resolvedOpen, setOpen],\n  );\n\n  const headerContext = useMemo<DashboardHeaderRenderContext>(\n    () => ({\n      isSidebarOpen: resolvedOpen,\n      setSidebarOpen: setOpen,\n      openSidebar,\n      closeSidebar,\n      toggleSidebar,\n      direction: resolvedDirection,\n      isRtl,\n    }),\n    [\n      closeSidebar,\n      isRtl,\n      openSidebar,\n      resolvedDirection,\n      resolvedOpen,\n      setOpen,\n      toggleSidebar,\n    ],\n  );\n\n  useEffect(() => {\n    if (!autoHideOnMobileBreakpoint || typeof window === \"undefined\") {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia(\"(max-width: 1279px)\");\n\n    const handleMobileEnter = (event: MediaQueryListEvent | MediaQueryList) => {\n      if (event.matches) {\n        setOpen(false);\n      }\n    };\n\n    // Ensure first render on smaller screens starts closed.\n    handleMobileEnter(mediaQuery);\n\n    const listener = (event: MediaQueryListEvent) => handleMobileEnter(event);\n    mediaQuery.addEventListener(\"change\", listener);\n\n    return () => mediaQuery.removeEventListener(\"change\", listener);\n  }, [autoHideOnMobileBreakpoint, setOpen]);\n\n  const defaultHeaderActions = useMemo(\n    () => (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0! xl:hidden\"\n          aria-label=\"Toggle sidebar\"\n          onClick={toggleSidebar}\n        >\n          <HamburgerIcon isOpen={resolvedOpen} />\n        </Button>\n\n        <DropdownMenu\n          animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n          panelClassName={mergeClassNames(\n            \"top-[44px]\",\n            isRtl ? \"left-0\" : \"right-0\",\n          )}\n          trigger={\n            <Button\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"small\"\n              className=\"relative h-9 w-9 rounded-full p-0!\"\n              aria-label=\"Open notifications\"\n            >\n              <BellIcon className=\"h-5 w-5\" />\n              <span\n                className={mergeClassNames(\n                  \"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\",\n                  isRtl ? \"-left-0.5\" : \"-right-0.5\",\n                )}\n              >\n                {notificationItems.length}\n              </span>\n            </Button>\n          }\n        >\n          <div className=\"w-[340px] rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n            <div className=\"mb-2 flex items-center justify-between gap-3\">\n              <Typography variant=\"body2\" weight=\"black\">\n                Notifications\n              </Typography>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className=\"px-2 py-1 text-xs\"\n              >\n                Mark all read\n              </Button>\n            </div>\n            <div className=\"space-y-2\">\n              {notificationItems.map((item) => (\n                <Button\n                  key={item.id}\n                  type=\"button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  className={mergeClassNames(\n                    \"w-full rounded-lg border border-ds-border-3 px-2.5 py-2\",\n                    isRtl\n                      ? \"justify-end text-right\"\n                      : \"justify-start text-left\",\n                  )}\n                >\n                  <span\n                    className={`mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${item.toneClassName}`}\n                  >\n                    <BellIcon className=\"h-3.5 w-3.5\" />\n                  </span>\n                  <span className=\"min-w-0 flex-1\">\n                    <span className=\"block truncate text-xs font-semibold text-ds-1\">\n                      {item.title}\n                    </span>\n                    <span className=\"block truncate text-[11px] text-ds-3\">\n                      {item.description}\n                    </span>\n                  </span>\n                  <span className=\"text-[11px] text-ds-3\">{item.time}</span>\n                </Button>\n              ))}\n            </div>\n          </div>\n        </DropdownMenu>\n\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0!\"\n          aria-label=\"Toggle theme\"\n        >\n          <span className=\"flex cursor-pointer rounded-full\">\n            <SunToMoonButton showLabelAndImage={false} />\n          </span>\n        </Button>\n\n        <Button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"h-9 w-9 rounded-full p-0!\"\n          aria-label=\"Toggle fullscreen\"\n          onClick={() => {\n            if (document.fullscreenElement) {\n              document.exitFullscreen();\n            } else {\n              document.documentElement.requestFullscreen();\n            }\n          }}\n        >\n          <FullScreenIcon className=\"h-5 w-5\" />\n        </Button>\n\n        <DropdownMenu\n          animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n          panelClassName={mergeClassNames(\n            \"top-[44px]\",\n            isRtl ? \"left-0\" : \"right-0\",\n          )}\n          trigger={\n            <Button\n              type=\"button\"\n              variant=\"primary\"\n              size=\"small\"\n              className=\"h-9 w-9 rounded-full p-0! text-sm font-black\"\n              aria-label=\"Open user menu\"\n            >\n              JD\n            </Button>\n          }\n        >\n          <div className=\"w-52 rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n            <div className=\"mb-2 flex items-center gap-2\">\n              <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\">\n                JD\n              </span>\n              <div className=\"min-w-0\">\n                <Typography variant=\"body2\" weight=\"black\" className=\"truncate\">\n                  John Doe\n                </Typography>\n                <Typography variant=\"caption\" className=\"text-ds-3\">\n                  Administrator\n                </Typography>\n              </div>\n            </div>\n            <div className=\"my-2 border-t border-ds-border-3\" />\n            <div className=\"flex flex-col gap-1\">\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Profile\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Settings\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"small\"\n                className={mergeClassNames(\n                  \"px-2 py-1.5 text-sm text-ds-state-error-text\",\n                  isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n                )}\n              >\n                Log Out\n              </Button>\n            </div>\n          </div>\n        </DropdownMenu>\n      </>\n    ),\n    [isRtl, resolvedOpen, toggleSidebar],\n  );\n\n  const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);\n  const resolvedHeaderActions =\n    headerActions === undefined\n      ? defaultHeaderActions\n      : resolveSlot(headerActions, headerContext);\n\n  const defaultHeader = useMemo(\n    () => (\n      <nav\n        dir={resolvedDirection}\n        className={mergeClassNames(\n          \"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\",\n          headerClassName,\n        )}\n      >\n        <div\n          className={mergeClassNames(\n            \"flex w-full justify-between gap-4\",\n            isRtl && \"flex-row-reverse\",\n          )}\n        >\n          <div\n            className={mergeClassNames(\n              \"flex min-w-0 items-center gap-3\",\n              isRtl && \"flex-row-reverse text-right\",\n              headerTitleClassName,\n            )}\n          >\n            {resolvedHeaderLeading}\n            <div className=\"min-w-0\">\n              <Typography variant=\"caption\" className=\"text-ds-3 capitalize\">\n                {breadcrumb}\n              </Typography>\n              <Typography\n                variant=\"h5\"\n                weight=\"black\"\n                className=\"truncate leading-7 capitalize\"\n              >\n                {title}\n              </Typography>\n            </div>\n          </div>\n\n          <div\n            className={mergeClassNames(\n              \"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)]\",\n              isRtl && \"flex-row-reverse\",\n              headerActionsClassName,\n            )}\n          >\n            {resolvedHeaderActions}\n          </div>\n        </div>\n      </nav>\n    ),\n    [\n      breadcrumb,\n      headerActionsClassName,\n      headerClassName,\n      headerTitleClassName,\n      isRtl,\n      resolvedDirection,\n      resolvedHeaderActions,\n      resolvedHeaderLeading,\n      title,\n    ],\n  );\n\n  const resolvedHeader =\n    header === undefined ? undefined : resolveSlot(header, headerContext);\n\n  return (\n    <div\n      dir={resolvedDirection}\n      className={mergeClassNames(\"flex h-full w-full\", className)}\n    >\n      <Sidebar\n        items={items}\n        open={resolvedOpen}\n        onOpenChange={setOpen}\n        activePath={activePath}\n        onItemSelect={onItemSelect}\n        direction={direction}\n        navbar={sidebarNavbar}\n        brand={brand}\n        footer={sidebarFooter}\n        className={sidebarClassName}\n        linksClassName={sidebarLinksClassName}\n        itemClassName={sidebarItemClassName}\n        activeItemClassName={sidebarActiveItemClassName}\n        overlayClassName={sidebarOverlayClassName}\n        closeLabel={sidebarCloseLabel}\n        showOverlay={showSidebarOverlay}\n      />\n\n      <div className=\"h-full w-full\">\n        <main\n          className={mergeClassNames(\n            \"mx-2 flex-none transition-all duration-200 ease-in-out\",\n            isRtl ? \"xl:mr-[18.5rem]\" : \"xl:ml-[18.5rem]\",\n            mainClassName,\n          )}\n        >\n          {resolvedHeader ?? defaultHeader}\n\n          <section\n            className={mergeClassNames(\n              \"mx-auto min-h-[calc(100dvh-180px)] rounded-md md:min-h-[calc(100dvh-116px)]\",\n              contentClassName,\n            )}\n          >\n            {children}\n          </section>\n        </main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}