erp-pro-ui 0.1.8 → 0.2.0

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

@@ -0,0 +1 @@
+{"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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"}