@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/shell/top-bar.js

@@ -1,239 +1,205 @@
 "use client";
-import { jsx as e, jsxs as d, Fragment as j } from "react/jsx-runtime";
-import * as c from "react";
-import { useColorMode as D } from "../hooks/use-color-mode.js";
-import { Avatar as U, AvatarImage as z, AvatarFallback as A } from "../ui/avatar.js";
-import { DropdownMenu as L, DropdownMenuTrigger as S, DropdownMenuContent as F, DropdownMenuItem as f, DropdownMenuSeparator as h } from "../ui/dropdown-menu.js";
-import { Tooltip as x, TooltipTrigger as b, TooltipContent as N } from "../ui/tooltip.js";
-import { IconUser as O, IconSun as _, IconMoon as E, IconLogout as P } from "@tabler/icons-react";
-import { Icon as p } from "../ui/icon.js";
-import { cn as n } from "../ui/lib/utils.js";
-const w = c.forwardRef(
-  ({ className: r, children: s, ...o }, t) => {
-    const l = c.Children.toArray(s).some(
-      (i) => c.isValidElement(i) && i.type === m
-    );
-    return /* @__PURE__ */ e(
-      "header",
-      {
-        ...o,
-        ref: t,
-        className: n(
-          "z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06",
-          l ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center",
-          r
-        ),
-        children: s
-      }
-    );
-  }
-);
-w.displayName = "TopBar";
-const v = c.forwardRef(
-  ({ className: r, children: s, ...o }, t) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: t,
-      className: n("flex items-center gap-ds-04", r),
-      ...o,
-      children: s
-    }
-  )
-);
-v.displayName = "TopBar.Left";
-const m = c.forwardRef(
-  ({ className: r, children: s, ...o }, t) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: t,
-      className: n("flex items-center justify-center px-ds-04", r),
-      ...o,
-      children: s
-    }
-  )
-);
-m.displayName = "TopBar.Center";
-const y = c.forwardRef(
-  ({ className: r, children: s, ...o }, t) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: t,
-      className: n("ml-auto flex items-center gap-ds-04", r),
-      ...o,
-      children: s
-    }
-  )
-);
-y.displayName = "TopBar.Right";
-const V = {
-  tight: "gap-ds-02",
-  default: "gap-ds-04",
-  loose: "gap-ds-06"
-}, T = c.forwardRef(
-  ({ gap: r = "default", className: s, children: o, ...t }, l) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: l,
-      className: n("flex items-center", V[r], s),
-      ...t,
-      children: o
-    }
-  )
-);
-T.displayName = "TopBar.Section";
-const B = c.forwardRef(({ icon: r, tooltip: s, className: o, ...t }, l) => /* @__PURE__ */ d(x, { children: [
-  /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
-    "button",
-    {
-      ref: l,
-      type: "button",
-      "aria-label": s,
-      className: n(
-        "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard",
-        o
-      ),
-      ...t,
-      children: /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm", "aria-hidden": "true", children: r })
-    }
-  ) }),
-  /* @__PURE__ */ e(N, { side: "bottom", align: "center", children: s })
-] }));
-B.displayName = "TopBar.IconButton";
-const C = c.forwardRef(
-  ({ className: r, children: s, ...o }, t) => /* @__PURE__ */ e(
-    "h2",
-    {
-      ref: t,
-      className: n(
-        "hidden text-ds-lg text-surface-fg md:block",
-        r
-      ),
-      ...o,
-      children: s
-    }
-  )
-);
-C.displayName = "TopBar.Title";
-const M = c.forwardRef(
-  ({ user: r, onNavigate: s, onLogout: o, userMenuItems: t, className: l }, i) => {
-    const { colorMode: u, toggleColorMode: k } = D();
-    return /* @__PURE__ */ d(L, { children: [
-      /* @__PURE__ */ d(x, { children: [
-        /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ e(
-          "button",
-          {
-            ref: i,
-            type: "button",
-            className: n("flex items-center gap-ds-03 outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", l),
-            children: /* @__PURE__ */ d(U, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
-              r.image ? /* @__PURE__ */ e(z, { src: r.image, alt: r.name }) : null,
-              /* @__PURE__ */ e(A, { className: "bg-surface-raised-hover text-surface-fg", children: r.name?.charAt(0).toUpperCase() })
-            ] })
-          }
-        ) }) }),
-        /* @__PURE__ */ e(N, { side: "bottom", align: "center", children: "User Menu" })
-      ] }),
-      /* @__PURE__ */ d(
-        F,
-        {
-          className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
-          sideOffset: 8,
-          align: "end",
-          children: [
-            /* @__PURE__ */ d("div", { className: "border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
-              /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg", children: r.name }),
-              r.email && /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle truncate", children: r.email })
-            ] }),
-            /* @__PURE__ */ d(
-              f,
-              {
-                className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
-                onClick: () => s?.("/profile"),
-                children: [
-                  /* @__PURE__ */ e(p, { icon: O, size: "sm", className: "text-surface-fg-muted" }),
-                  /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: "Profile" })
-                ]
-              }
-            ),
-            t?.map((a, R) => {
-              const I = {
-                error: "text-error-11",
-                success: "text-success-11",
-                warning: "text-warning-11",
-                info: "text-info-11"
-              }, g = a.color ? I[a.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
-              return /* @__PURE__ */ d(c.Fragment, { children: [
-                a.separator && /* @__PURE__ */ e(h, { className: "bg-surface-border" }),
-                /* @__PURE__ */ d(
-                  f,
-                  {
-                    className: n(
-                      "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
-                      a.disabled && "pointer-events-none opacity-action-disabled"
-                    ),
-                    disabled: a.disabled,
-                    onClick: () => {
-                      a.disabled || (a.onClick ? a.onClick() : a.href && s?.(a.href));
-                    },
-                    children: [
-                      a.icon && /* @__PURE__ */ e(
-                        "span",
-                        {
-                          className: n(
-                            "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-                            g
-                          ),
-                          children: a.icon
-                        }
-                      ),
-                      /* @__PURE__ */ e("span", { className: n("text-ds-md", g), children: a.label }),
-                      a.badge != null && a.badge !== !1 && (typeof a.badge == "string" ? /* @__PURE__ */ e("span", { className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-accent-fg", children: a.badge }) : /* @__PURE__ */ e("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
-                    ]
-                  }
-                )
-              ] }, a.label + R);
-            }),
-            /* @__PURE__ */ d(
-              f,
-              {
-                className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
-                onClick: k,
-                children: [
-                  u === "dark" ? /* @__PURE__ */ e(p, { icon: _, size: "sm", className: "text-surface-fg-muted" }) : /* @__PURE__ */ e(p, { icon: E, size: "sm", className: "text-surface-fg-muted" }),
-                  /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: u === "dark" ? "Light Mode" : "Dark Mode" })
-                ]
-              }
-            ),
-            o && /* @__PURE__ */ d(j, { children: [
-              /* @__PURE__ */ e(h, { className: "bg-surface-border" }),
-              /* @__PURE__ */ d(
-                f,
-                {
-                  className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
-                  onClick: o,
-                  children: [
-                    /* @__PURE__ */ e(p, { icon: P, size: "sm", className: "text-error-11" }),
-                    /* @__PURE__ */ e("span", { className: "text-ds-md text-error-11", children: "Logout" })
-                  ]
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    ] });
-  }
-);
-M.displayName = "TopBar.UserMenu";
-const Y = Object.assign(w, {
-  Left: v,
-  Center: m,
-  Right: y,
-  Section: T,
-  IconButton: B,
-  Title: C,
-  UserMenu: M
+import { cn as e } from "../ui/lib/utils.js";
+import { Icon as t } from "../ui/icon.js";
+import { Avatar as n, AvatarFallback as r, AvatarImage as i } from "../ui/avatar.js";
+import { DropdownMenu as a, DropdownMenuContent as o, DropdownMenuItem as s, DropdownMenuSeparator as c, DropdownMenuTrigger as l } from "../ui/dropdown-menu.js";
+import { Tooltip as u, TooltipContent as d, TooltipTrigger as f } from "../ui/tooltip.js";
+import { useColorMode as p } from "../hooks/use-color-mode.js";
+import * as m from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { IconLogout as v, IconMoon as y, IconSun as b, IconUser as x } from "@tabler/icons-react";
+//#region src/shell/top-bar.tsx
+var S = m.forwardRef(({ className: t, children: n, ...r }, i) => {
+	let a = m.Children.toArray(n).some((e) => m.isValidElement(e) && e.type === w);
+	return /* @__PURE__ */ g("header", {
+		...r,
+		ref: i,
+		className: e("z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06", a ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center", t),
+		children: n
+	});
 });
-export {
-  Y as TopBar
-};
+S.displayName = "TopBar";
+var C = m.forwardRef(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ g("div", {
+	ref: i,
+	className: e("flex items-center gap-ds-04", t),
+	...r,
+	children: n
+}));
+C.displayName = "TopBar.Left";
+var w = m.forwardRef(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ g("div", {
+	ref: i,
+	className: e("flex items-center justify-center px-ds-04", t),
+	...r,
+	children: n
+}));
+w.displayName = "TopBar.Center";
+var T = m.forwardRef(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ g("div", {
+	ref: i,
+	className: e("ml-auto flex items-center gap-ds-04", t),
+	...r,
+	children: n
+}));
+T.displayName = "TopBar.Right";
+var E = {
+	tight: "gap-ds-02",
+	default: "gap-ds-04",
+	loose: "gap-ds-06"
+}, D = m.forwardRef(({ gap: t = "default", className: n, children: r, ...i }, a) => /* @__PURE__ */ g("div", {
+	ref: a,
+	className: e("flex items-center", E[t], n),
+	...i,
+	children: r
+}));
+D.displayName = "TopBar.Section";
+var O = m.forwardRef(({ icon: t, tooltip: n, className: r, ...i }, a) => /* @__PURE__ */ _(u, { children: [/* @__PURE__ */ g(f, {
+	asChild: !0,
+	children: /* @__PURE__ */ g("button", {
+		ref: a,
+		type: "button",
+		"aria-label": n,
+		className: e("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard", r),
+		...i,
+		children: /* @__PURE__ */ g("span", {
+			className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",
+			"aria-hidden": "true",
+			children: t
+		})
+	})
+}), /* @__PURE__ */ g(d, {
+	side: "bottom",
+	align: "center",
+	children: n
+})] }));
+O.displayName = "TopBar.IconButton";
+var k = m.forwardRef(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ g("h2", {
+	ref: i,
+	className: e("hidden text-ds-lg text-surface-fg md:block", t),
+	...r,
+	children: n
+}));
+k.displayName = "TopBar.Title";
+var A = m.forwardRef(({ user: S, onNavigate: C, onLogout: w, userMenuItems: T, className: E }, D) => {
+	let { colorMode: O, toggleColorMode: k } = p();
+	return /* @__PURE__ */ _(a, { children: [/* @__PURE__ */ _(u, { children: [/* @__PURE__ */ g(f, {
+		asChild: !0,
+		children: /* @__PURE__ */ g(l, {
+			asChild: !0,
+			children: /* @__PURE__ */ g("button", {
+				ref: D,
+				type: "button",
+				className: e("flex items-center gap-ds-03 outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", E),
+				children: /* @__PURE__ */ _(n, {
+					className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer",
+					children: [S.image ? /* @__PURE__ */ g(i, {
+						src: S.image,
+						alt: S.name
+					}) : null, /* @__PURE__ */ g(r, {
+						className: "bg-surface-raised-hover text-surface-fg",
+						children: S.name?.charAt(0).toUpperCase()
+					})]
+				})
+			})
+		})
+	}), /* @__PURE__ */ g(d, {
+		side: "bottom",
+		align: "center",
+		children: "User Menu"
+	})] }), /* @__PURE__ */ _(o, {
+		className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
+		sideOffset: 8,
+		align: "end",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "border-b border-surface-border-strong px-ds-05 py-ds-04",
+				children: [/* @__PURE__ */ g("p", {
+					className: "text-ds-md text-surface-fg",
+					children: S.name
+				}), S.email && /* @__PURE__ */ g("p", {
+					className: "text-ds-sm text-surface-fg-subtle truncate",
+					children: S.email
+				})]
+			}),
+			/* @__PURE__ */ _(s, {
+				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
+				onClick: () => C?.("/profile"),
+				children: [/* @__PURE__ */ g(t, {
+					icon: x,
+					size: "sm",
+					className: "text-surface-fg-muted"
+				}), /* @__PURE__ */ g("span", {
+					className: "text-ds-md text-surface-fg-muted",
+					children: "Profile"
+				})]
+			}),
+			T?.map((t, n) => {
+				let r = t.color ? {
+					error: "text-error-11",
+					success: "text-success-11",
+					warning: "text-warning-11",
+					info: "text-info-11"
+				}[t.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
+				return /* @__PURE__ */ _(m.Fragment, { children: [t.separator && /* @__PURE__ */ g(c, { className: "bg-surface-border" }), /* @__PURE__ */ _(s, {
+					className: e("flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised", t.disabled && "pointer-events-none opacity-action-disabled"),
+					disabled: t.disabled,
+					onClick: () => {
+						t.disabled || (t.onClick ? t.onClick() : t.href && C?.(t.href));
+					},
+					children: [
+						t.icon && /* @__PURE__ */ g("span", {
+							className: e("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", r),
+							children: t.icon
+						}),
+						/* @__PURE__ */ g("span", {
+							className: e("text-ds-md", r),
+							children: t.label
+						}),
+						t.badge != null && t.badge !== !1 && (typeof t.badge == "string" ? /* @__PURE__ */ g("span", {
+							className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-error-fg",
+							children: t.badge
+						}) : /* @__PURE__ */ g("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
+					]
+				})] }, t.label + n);
+			}),
+			/* @__PURE__ */ _(s, {
+				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
+				onClick: k,
+				children: [O === "dark" ? /* @__PURE__ */ g(t, {
+					icon: b,
+					size: "sm",
+					className: "text-surface-fg-muted"
+				}) : /* @__PURE__ */ g(t, {
+					icon: y,
+					size: "sm",
+					className: "text-surface-fg-muted"
+				}), /* @__PURE__ */ g("span", {
+					className: "text-ds-md text-surface-fg-muted",
+					children: O === "dark" ? "Light Mode" : "Dark Mode"
+				})]
+			}),
+			w && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(c, { className: "bg-surface-border" }), /* @__PURE__ */ _(s, {
+				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
+				onClick: w,
+				children: [/* @__PURE__ */ g(t, {
+					icon: v,
+					size: "sm",
+					className: "text-error-11"
+				}), /* @__PURE__ */ g("span", {
+					className: "text-ds-md text-error-11",
+					children: "Logout"
+				})]
+			})] })
+		]
+	})] });
+});
+A.displayName = "TopBar.UserMenu";
+var j = Object.assign(S, {
+	Left: C,
+	Center: w,
+	Right: T,
+	Section: D,
+	IconButton: O,
+	Title: k,
+	UserMenu: A
+});
+//#endregion
+export { j as TopBar };

package/dist/shell/top-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar.js","names":[],"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["'use client'\n\n/**\n * TopBar v2 — Composition-based application top bar.\n *\n * Subcomponents: TopBar.Left, TopBar.Center, TopBar.Right,\n * TopBar.Section, TopBar.IconButton, TopBar.Title, TopBar.UserMenu.\n */\nimport * as React from 'react'\nimport { useColorMode } from '../hooks/use-color-mode'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { IconLogout, IconUser, IconMoon, IconSun } from '@tabler/icons-react'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface TopBarUser {\n  name: string\n  email?: string\n  image?: string | null\n}\n\nexport interface UserMenuItem {\n  /** Display label */\n  label: string\n  /** Optional icon (ReactNode) */\n  icon?: React.ReactNode\n  /** Navigate via onNavigate when clicked */\n  href?: string\n  /** Custom click handler */\n  onClick?: () => void\n  /** Render a separator before this item */\n  separator?: boolean\n  /** Text color semantic token (e.g. \"error\") — maps to text-{color} */\n  color?: string\n  /** Badge content — string for count, true for dot indicator */\n  badge?: string | boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n}\n\n// -----------------------------------------------------------------------\n// TopBar (root)\n// -----------------------------------------------------------------------\n\ninterface TopBarRootProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  className?: string\n}\n\nconst TopBarRoot = React.forwardRef<HTMLElement, TopBarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    // Detect if a Center zone is present to switch to grid layout\n    const hasCenter = React.Children.toArray(children).some(\n      (child) => React.isValidElement(child) && child.type === TopBarCenter,\n    )\n\n    return (\n      <header\n        {...props}\n        ref={ref}\n        className={cn(\n          'z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06',\n          hasCenter\n            ? 'grid grid-cols-[1fr_auto_1fr] items-center'\n            : 'flex items-center',\n          className,\n        )}\n      >\n        {children}\n      </header>\n    )\n  },\n)\nTopBarRoot.displayName = 'TopBar'\n\n// -----------------------------------------------------------------------\n// TopBar.Left\n// -----------------------------------------------------------------------\n\ninterface TopBarLeftProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarLeft = React.forwardRef<HTMLDivElement, TopBarLeftProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarLeft.displayName = 'TopBar.Left'\n\n// -----------------------------------------------------------------------\n// TopBar.Center\n// -----------------------------------------------------------------------\n\ninterface TopBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarCenter = React.forwardRef<HTMLDivElement, TopBarCenterProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-center px-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarCenter.displayName = 'TopBar.Center'\n\n// -----------------------------------------------------------------------\n// TopBar.Right\n// -----------------------------------------------------------------------\n\ninterface TopBarRightProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarRight = React.forwardRef<HTMLDivElement, TopBarRightProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('ml-auto flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarRight.displayName = 'TopBar.Right'\n\n// -----------------------------------------------------------------------\n// TopBar.Section\n// -----------------------------------------------------------------------\n\nconst gapMap = {\n  tight: 'gap-ds-02',\n  default: 'gap-ds-04',\n  loose: 'gap-ds-06',\n} as const\n\ninterface TopBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: keyof typeof gapMap\n  children: React.ReactNode\n}\n\nconst TopBarSection = React.forwardRef<HTMLDivElement, TopBarSectionProps>(\n  ({ gap = 'default', className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center', gapMap[gap], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarSection.displayName = 'TopBar.Section'\n\n// -----------------------------------------------------------------------\n// TopBar.IconButton\n// -----------------------------------------------------------------------\n\ninterface TopBarIconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: React.ReactNode\n  tooltip: string\n}\n\nconst TopBarIconButton = React.forwardRef<\n  HTMLButtonElement,\n  TopBarIconButtonProps\n>(({ icon, tooltip, className, ...props }, ref) => (\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={tooltip}\n        className={cn(\n          'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard',\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      </button>\n    </TooltipTrigger>\n    <TooltipContent side=\"bottom\" align=\"center\">\n      {tooltip}\n    </TooltipContent>\n  </Tooltip>\n))\nTopBarIconButton.displayName = 'TopBar.IconButton'\n\n// -----------------------------------------------------------------------\n// TopBar.Title\n// -----------------------------------------------------------------------\n\ninterface TopBarTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode\n}\n\nconst TopBarTitle = React.forwardRef<HTMLHeadingElement, TopBarTitleProps>(\n  ({ className, children, ...props }, ref) => (\n    <h2\n      ref={ref}\n      className={cn(\n        'hidden text-ds-lg text-surface-fg md:block',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  ),\n)\nTopBarTitle.displayName = 'TopBar.Title'\n\n// -----------------------------------------------------------------------\n// TopBar.UserMenu\n// -----------------------------------------------------------------------\n\ninterface TopBarUserMenuProps {\n  user: TopBarUser\n  onNavigate?: (path: string) => void\n  onLogout?: () => void\n  userMenuItems?: UserMenuItem[]\n  className?: string\n}\n\nconst TopBarUserMenu = React.forwardRef<HTMLButtonElement, TopBarUserMenuProps>(\n  ({ user, onNavigate, onLogout, userMenuItems, className }, ref) => {\n    const { colorMode, toggleColorMode } = useColorMode()\n\n    return (\n      <DropdownMenu>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <DropdownMenuTrigger asChild>\n              <button\n                ref={ref}\n                type=\"button\"\n                className={cn('flex items-center gap-ds-03 outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2', className)}\n              >\n                <Avatar className=\"h-ds-sm-plus w-ds-sm-plus cursor-pointer\">\n                  {user.image ? (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  ) : null}\n                  <AvatarFallback className=\"bg-surface-raised-hover text-surface-fg\">\n                    {user.name?.charAt(0).toUpperCase()}\n                  </AvatarFallback>\n                </Avatar>\n              </button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            User Menu\n          </TooltipContent>\n        </Tooltip>\n\n        <DropdownMenuContent\n          className=\"w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating\"\n          sideOffset={8}\n          align=\"end\"\n        >\n          {/* User Info */}\n          <div className=\"border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <p className=\"text-ds-md text-surface-fg\">{user.name}</p>\n            {user.email && (\n              <p className=\"text-ds-sm text-surface-fg-subtle truncate\">{user.email}</p>\n            )}\n          </div>\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={() => onNavigate?.('/profile')}\n          >\n            <Icon icon={IconUser} size=\"sm\" className=\"text-surface-fg-muted\" />\n            <span className=\"text-ds-md text-surface-fg-muted\">Profile</span>\n          </DropdownMenuItem>\n\n          {/* Custom user menu items */}\n          {userMenuItems?.map((item, index) => {\n            const colorMap: Record<string, string> = {\n              error: 'text-error-11',\n              success: 'text-success-11',\n              warning: 'text-warning-11',\n              info: 'text-info-11',\n            }\n            const textColor = item.color\n              ? (colorMap[item.color] ?? 'text-surface-fg-muted')\n              : 'text-surface-fg-muted'\n            return (\n              <React.Fragment key={item.label + index}>\n                {item.separator && (\n                  <DropdownMenuSeparator className=\"bg-surface-border\" />\n                )}\n                <DropdownMenuItem\n                  className={cn(\n                    'flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised',\n                    item.disabled && 'pointer-events-none opacity-action-disabled',\n                  )}\n                  disabled={item.disabled}\n                  onClick={() => {\n                    if (item.disabled) return\n                    if (item.onClick) item.onClick()\n                    else if (item.href) onNavigate?.(item.href)\n                  }}\n                >\n                  {item.icon && (\n                    <span\n                      className={cn(\n                        '[&>svg]:h-ico-sm [&>svg]:w-ico-sm',\n                        textColor,\n                      )}\n                    >\n                      {item.icon}\n                    </span>\n                  )}\n                  <span className={cn('text-ds-md', textColor)}>\n                    {item.label}\n                  </span>\n                  {item.badge != null &&\n                    item.badge !== false &&\n                    (typeof item.badge === 'string' ? (\n                      <span className=\"ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-error-fg\">\n                        {item.badge}\n                      </span>\n                    ) : (\n                      <span className=\"ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9\" />\n                    ))}\n                </DropdownMenuItem>\n              </React.Fragment>\n            )\n          })}\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={toggleColorMode}\n          >\n            {colorMode === 'dark' ? (\n              <Icon icon={IconSun} size=\"sm\" className=\"text-surface-fg-muted\" />\n            ) : (\n              <Icon icon={IconMoon} size=\"sm\" className=\"text-surface-fg-muted\" />\n            )}\n            <span className=\"text-ds-md text-surface-fg-muted\">\n              {colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}\n            </span>\n          </DropdownMenuItem>\n\n          {onLogout && (\n            <>\n              <DropdownMenuSeparator className=\"bg-surface-border\" />\n              <DropdownMenuItem\n                className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n                onClick={onLogout}\n              >\n                <Icon icon={IconLogout} size=\"sm\" className=\"text-error-11\" />\n                <span className=\"text-ds-md text-error-11\">Logout</span>\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    )\n  },\n)\nTopBarUserMenu.displayName = 'TopBar.UserMenu'\n\n// -----------------------------------------------------------------------\n// Compound export\n// -----------------------------------------------------------------------\n\nexport type TopBarProps = TopBarRootProps\n\nconst TopBar = Object.assign(TopBarRoot, {\n  Left: TopBarLeft,\n  Center: TopBarCenter,\n  Right: TopBarRight,\n  Section: TopBarSection,\n  IconButton: TopBarIconButton,\n  Title: TopBarTitle,\n  UserMenu: TopBarUserMenu,\n})\n\nexport { TopBar }\n"],"mappings":"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"}