@tomny-dev/uzi 0.2.4 → 0.2.6

package/dist/index39.cjs

@@ -0,0 +1,150 @@
+"use client";
+const require_cx = require("./index4.cjs");
+const require_TopBar = require("./index37.cjs");
+const require_app_shell_module = require("./index38.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/app-shell/AppShell.tsx
+var DESKTOP_BREAKPOINT = 960;
+function getIsDesktop() {
+	if (typeof window === "undefined") return false;
+	return window.innerWidth >= DESKTOP_BREAKPOINT;
+}
+/**
+* Responsive application shell with a collapsible sidebar and sticky top bar.
+*
+* - Sidebar opens by default on desktop, collapses on mobile.
+* - Closes on outside click/scroll/touch when in mobile mode.
+* - Provides optional hook to close the sidebar when a prop value changes
+*   (e.g., route transitions).
+*/
+function AppShell({ children, sidebar, brand, brandHref, topbarStart, topbarEnd, showThemeToggle = false, themeToggleProps, topBarBrandingLocation = "left", className, sidebarClassName, topbarClassName, mainClassName, sidebarWidth, closeSidebarOnChangeKey, hamburgerLabel = "Toggle navigation", onSidebarToggle }) {
+	const [isDesktop, setIsDesktop] = (0, react.useState)(false);
+	const [sidebarOpen, setSidebarOpen] = (0, react.useState)(false);
+	const [transitionsReady, setTransitionsReady] = (0, react.useState)(false);
+	const prevIsDesktopRef = (0, react.useRef)(false);
+	const closeKeyRef = (0, react.useRef)(closeSidebarOnChangeKey);
+	const sidebarRef = (0, react.useRef)(null);
+	const hamburgerRef = (0, react.useRef)(null);
+	const mainRef = (0, react.useRef)(null);
+	const sidebarId = (0, react.useId)();
+	(0, react.useEffect)(() => {
+		const desktop = getIsDesktop();
+		setIsDesktop(desktop);
+		setSidebarOpen(desktop);
+		prevIsDesktopRef.current = desktop;
+		const transitionFrame = window.requestAnimationFrame(() => {
+			setTransitionsReady(true);
+		});
+		const handleResize = () => {
+			const nowDesktop = getIsDesktop();
+			setIsDesktop(nowDesktop);
+			if (nowDesktop !== prevIsDesktopRef.current) {
+				setSidebarOpen(nowDesktop);
+				prevIsDesktopRef.current = nowDesktop;
+			}
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.cancelAnimationFrame(transitionFrame);
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		if (isDesktop || !sidebarOpen) return;
+		const mainElement = mainRef.current;
+		const closeSidebar = () => setSidebarOpen(false);
+		const onPointerDown = (e) => {
+			const target = e.target;
+			if (!target) return;
+			if (sidebarRef.current?.contains(target)) return;
+			if (hamburgerRef.current?.contains(target)) return;
+			closeSidebar();
+		};
+		const timeoutId = window.setTimeout(() => {
+			document.addEventListener("pointerdown", onPointerDown);
+			window.addEventListener("scroll", closeSidebar, { passive: true });
+			mainElement?.addEventListener("scroll", closeSidebar, { passive: true });
+			document.addEventListener("touchmove", closeSidebar, { passive: true });
+		}, 10);
+		return () => {
+			window.clearTimeout(timeoutId);
+			document.removeEventListener("pointerdown", onPointerDown);
+			window.removeEventListener("scroll", closeSidebar);
+			mainElement?.removeEventListener("scroll", closeSidebar);
+			document.removeEventListener("touchmove", closeSidebar);
+		};
+	}, [sidebarOpen, isDesktop]);
+	(0, react.useEffect)(() => {
+		if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) setSidebarOpen(false);
+		closeKeyRef.current = closeSidebarOnChangeKey;
+	}, [closeSidebarOnChangeKey, isDesktop]);
+	(0, react.useEffect)(() => {
+		onSidebarToggle?.(sidebarOpen);
+	}, [sidebarOpen, onSidebarToggle]);
+	const toggleSidebar = () => setSidebarOpen((open) => !open);
+	const sidebarWidthValue = sidebarWidth === void 0 ? void 0 : typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
+	const shellStyle = sidebarWidthValue ? { ["--app-shell-sidebar-width"]: sidebarWidthValue } : void 0;
+	const shellClasses = require_cx.cx(require_app_shell_module.default.appShell, transitionsReady && require_app_shell_module.default.appShellAnimated, sidebarOpen ? require_app_shell_module.default.appShellOpen : require_app_shell_module.default.appShellCollapsed, className);
+	const sidebarClasses = require_cx.cx(require_app_shell_module.default.appShellSidebar, sidebarOpen && require_app_shell_module.default.appShellSidebarOpen, sidebarClassName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: shellClasses,
+		style: shellStyle,
+		"data-app-shell": true,
+		"data-desktop": isDesktop ? "true" : "false",
+		"data-sidebar-open": sidebarOpen ? "true" : "false",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TopBar.TopBar, {
+				className: require_cx.cx(require_app_shell_module.default.appShellTopbar, topbarClassName),
+				leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					ref: hamburgerRef,
+					type: "button",
+					className: require_app_shell_module.default.appShellHamburger,
+					onClick: toggleSidebar,
+					"aria-label": hamburgerLabel,
+					"aria-expanded": sidebarOpen,
+					"aria-controls": sidebarId,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						viewBox: "0 0 24 24",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: "M3 6h18M3 12h18M3 18h18",
+							stroke: "currentColor",
+							strokeWidth: "2.5",
+							strokeLinecap: "round"
+						})
+					})
+				}),
+				brand,
+				brandHref,
+				brandingLocation: topBarBrandingLocation,
+				start: topbarStart,
+				actions: topbarEnd,
+				showThemeToggle,
+				themeToggleProps
+			}),
+			!isDesktop && sidebarOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_app_shell_module.default.appShellBackdrop,
+				onClick: () => setSidebarOpen(false),
+				onTouchStart: () => setSidebarOpen(false),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+				ref: sidebarRef,
+				id: sidebarId,
+				className: sidebarClasses,
+				"aria-label": "Sidebar navigation",
+				children: sidebar
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+				ref: mainRef,
+				className: require_cx.cx(require_app_shell_module.default.appShellMain, mainClassName),
+				children
+			})
+		]
+	});
+}
+//#endregion
+exports.AppShell = AppShell;
+
+//# sourceMappingURL=index39.cjs.map

package/dist/index39.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index39.cjs","names":[],"sources":["../src/components/app-shell/AppShell.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { TopBar, type TopBarProps } from \"../top-bar/TopBar\";\nimport styles from \"./app-shell.module.css\";\n\nconst DESKTOP_BREAKPOINT = 960;\n\nfunction getIsDesktop() {\n  if (typeof window === \"undefined\") return false;\n  return window.innerWidth >= DESKTOP_BREAKPOINT;\n}\n\nexport type AppShellProps = {\n  /** Primary page content rendered in the main area. */\n  children: ReactNode;\n  /** Sidebar navigation or custom content. */\n  sidebar: ReactNode;\n  /** Brand element rendered next to the hamburger (text or JSX). */\n  brand?: ReactNode;\n  /** Optional brand href; when provided the brand renders as an anchor. */\n  brandHref?: string;\n  /** Optional content after the brand on the left side of the top bar. */\n  topbarStart?: ReactNode;\n  /** Optional content aligned to the right side of the top bar. */\n  topbarEnd?: ReactNode;\n  /** Optional built-in theme toggle for the top bar. */\n  showThemeToggle?: boolean;\n  themeToggleProps?: TopBarProps[\"themeToggleProps\"];\n  topBarBrandingLocation?: TopBarProps[\"brandingLocation\"];\n  /** Custom class names for styling overrides. */\n  className?: string;\n  sidebarClassName?: string;\n  topbarClassName?: string;\n  mainClassName?: string;\n  /** Sets the sidebar width (e.g., `260`, `\"18rem\"`). */\n  sidebarWidth?: number | string;\n  /**\n   * Closes the sidebar on mobile whenever this value changes.\n   * Useful for reacting to route/pathname changes.\n   */\n  closeSidebarOnChangeKey?: unknown;\n  /** Label for the hamburger button (aria-label). */\n  hamburgerLabel?: string;\n  /** Optional callback fired whenever the sidebar open state changes. */\n  onSidebarToggle?: (open: boolean) => void;\n};\n\n/**\n  * Responsive application shell with a collapsible sidebar and sticky top bar.\n  *\n  * - Sidebar opens by default on desktop, collapses on mobile.\n  * - Closes on outside click/scroll/touch when in mobile mode.\n  * - Provides optional hook to close the sidebar when a prop value changes\n  *   (e.g., route transitions).\n  */\nexport function AppShell({\n  children,\n  sidebar,\n  brand,\n  brandHref,\n  topbarStart,\n  topbarEnd,\n  showThemeToggle = false,\n  themeToggleProps,\n  topBarBrandingLocation = \"left\",\n  className,\n  sidebarClassName,\n  topbarClassName,\n  mainClassName,\n  sidebarWidth,\n  closeSidebarOnChangeKey,\n  hamburgerLabel = \"Toggle navigation\",\n  onSidebarToggle,\n}: AppShellProps) {\n  const [isDesktop, setIsDesktop] = useState(false);\n  const [sidebarOpen, setSidebarOpen] = useState(false);\n  const [transitionsReady, setTransitionsReady] = useState(false);\n  const prevIsDesktopRef = useRef(false);\n  const closeKeyRef = useRef(closeSidebarOnChangeKey);\n\n  const sidebarRef = useRef<HTMLElement | null>(null);\n  const hamburgerRef = useRef<HTMLButtonElement | null>(null);\n  const mainRef = useRef<HTMLElement | null>(null);\n  const sidebarId = useId();\n\n  useEffect(() => {\n    const desktop = getIsDesktop();\n    setIsDesktop(desktop);\n    setSidebarOpen(desktop);\n    prevIsDesktopRef.current = desktop;\n    const transitionFrame = window.requestAnimationFrame(() => {\n      setTransitionsReady(true);\n    });\n\n    const handleResize = () => {\n      const nowDesktop = getIsDesktop();\n      setIsDesktop(nowDesktop);\n      if (nowDesktop !== prevIsDesktopRef.current) {\n        setSidebarOpen(nowDesktop);\n        prevIsDesktopRef.current = nowDesktop;\n      }\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.cancelAnimationFrame(transitionFrame);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  // Close the sidebar when clicking outside or scrolling on mobile.\n  useEffect(() => {\n    if (isDesktop || !sidebarOpen) return;\n\n    const mainElement = mainRef.current;\n    const closeSidebar = () => setSidebarOpen(false);\n\n    const onPointerDown = (e: PointerEvent) => {\n      const target = e.target as Node | null;\n      if (!target) return;\n      if (sidebarRef.current?.contains(target)) return;\n      if (hamburgerRef.current?.contains(target)) return;\n      closeSidebar();\n    };\n\n    const timeoutId = window.setTimeout(() => {\n      document.addEventListener(\"pointerdown\", onPointerDown);\n      window.addEventListener(\"scroll\", closeSidebar, { passive: true });\n      mainElement?.addEventListener(\"scroll\", closeSidebar, { passive: true });\n      document.addEventListener(\"touchmove\", closeSidebar, { passive: true });\n    }, 10);\n\n    return () => {\n      window.clearTimeout(timeoutId);\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      window.removeEventListener(\"scroll\", closeSidebar);\n      mainElement?.removeEventListener(\"scroll\", closeSidebar);\n      document.removeEventListener(\"touchmove\", closeSidebar);\n    };\n  }, [sidebarOpen, isDesktop]);\n\n  // Allow consumers to request a mobile sidebar close when a value changes (e.g., pathname).\n  useEffect(() => {\n    if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {\n      setSidebarOpen(false);\n    }\n    closeKeyRef.current = closeSidebarOnChangeKey;\n  }, [closeSidebarOnChangeKey, isDesktop]);\n\n  useEffect(() => {\n    onSidebarToggle?.(sidebarOpen);\n  }, [sidebarOpen, onSidebarToggle]);\n\n  const toggleSidebar = () => setSidebarOpen((open) => !open);\n\n  const sidebarWidthValue =\n    sidebarWidth === undefined\n      ? undefined\n      : typeof sidebarWidth === \"number\"\n        ? `${sidebarWidth}px`\n        : sidebarWidth;\n\n  const shellStyle: CSSProperties | undefined = sidebarWidthValue\n    ? { [\"--app-shell-sidebar-width\" as string]: sidebarWidthValue }\n    : undefined;\n\n  const shellClasses = cx(\n    styles.appShell,\n    transitionsReady && styles.appShellAnimated,\n    sidebarOpen ? styles.appShellOpen : styles.appShellCollapsed,\n    className,\n  );\n\n  const sidebarClasses = cx(\n    styles.appShellSidebar,\n    sidebarOpen && styles.appShellSidebarOpen,\n    sidebarClassName,\n  );\n\n  return (\n    <div\n      className={shellClasses}\n      style={shellStyle}\n      data-app-shell\n      data-desktop={isDesktop ? \"true\" : \"false\"}\n      data-sidebar-open={sidebarOpen ? \"true\" : \"false\"}\n    >\n      <TopBar\n        className={cx(styles.appShellTopbar, topbarClassName)}\n        leading={\n          <button\n            ref={hamburgerRef}\n            type=\"button\"\n            className={styles.appShellHamburger}\n            onClick={toggleSidebar}\n            aria-label={hamburgerLabel}\n            aria-expanded={sidebarOpen}\n            aria-controls={sidebarId}\n          >\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M3 6h18M3 12h18M3 18h18\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n        }\n        brand={brand}\n        brandHref={brandHref}\n        brandingLocation={topBarBrandingLocation}\n        start={topbarStart}\n        actions={topbarEnd}\n        showThemeToggle={showThemeToggle}\n        themeToggleProps={themeToggleProps}\n      />\n      {!isDesktop && sidebarOpen && (\n        <div\n          className={styles.appShellBackdrop}\n          onClick={() => setSidebarOpen(false)}\n          onTouchStart={() => setSidebarOpen(false)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <aside ref={sidebarRef} id={sidebarId} className={sidebarClasses} aria-label=\"Sidebar navigation\">\n        {sidebar}\n      </aside>\n      <main ref={mainRef} className={cx(styles.appShellMain, mainClassName)}>\n        {children}\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/index39.js

@@ -0,0 +1,43 @@
+//#region src/components/sidebar-nav/sidebar-nav.module.css
+var sidebarNav = "uzi-sidebar-nav-module__sidebarNav__eUI5c";
+var sidebarNavCollapsed = "uzi-sidebar-nav-module__sidebarNavCollapsed__xTM9s";
+var header = "uzi-sidebar-nav-module__header__Y4NLy";
+var footer = "uzi-sidebar-nav-module__footer__GjWky";
+var sections = "uzi-sidebar-nav-module__sections__mXuGQ";
+var section = "uzi-sidebar-nav-module__section__yjtCY";
+var sectionItems = "uzi-sidebar-nav-module__sectionItems__tNcph";
+var sectionLabel = "uzi-sidebar-nav-module__sectionLabel__Wx94m";
+var item = "uzi-sidebar-nav-module__item__uMHkJ";
+var itemActive = "uzi-sidebar-nav-module__itemActive__wBbiS";
+var itemCollapsed = "uzi-sidebar-nav-module__itemCollapsed__jLJN-";
+var itemDisabled = "uzi-sidebar-nav-module__itemDisabled__Yf8Il";
+var icon = "uzi-sidebar-nav-module__icon__tyrUg";
+var itemBody = "uzi-sidebar-nav-module__itemBody__wI0iy";
+var labelRow = "uzi-sidebar-nav-module__labelRow__D8sEJ";
+var label = "uzi-sidebar-nav-module__label__A-nt6";
+var description = "uzi-sidebar-nav-module__description__Xf3Si";
+var badge = "uzi-sidebar-nav-module__badge__-hnFd";
+var sidebar_nav_module_default = {
+	sidebarNav,
+	sidebarNavCollapsed,
+	header,
+	footer,
+	sections,
+	section,
+	sectionItems,
+	sectionLabel,
+	item,
+	itemActive,
+	itemCollapsed,
+	itemDisabled,
+	icon,
+	itemBody,
+	labelRow,
+	label,
+	description,
+	badge
+};
+//#endregion
+export { badge, sidebar_nav_module_default as default, description, footer, header, icon, item, itemActive, itemBody, itemCollapsed, itemDisabled, label, labelRow, section, sectionItems, sectionLabel, sections, sidebarNav, sidebarNavCollapsed };
+
+//# sourceMappingURL=index39.js.map

package/dist/index39.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index39.js","names":[],"sources":["../src/components/sidebar-nav/sidebar-nav.module.css"],"sourcesContent":[".sidebarNav {\n  --sidebar-nav-icon-size: 18px;\n  --sidebar-nav-icon-size-mobile: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: stretch;\n  min-height: 0;\n}\n\n.sidebarNavCollapsed {\n  gap: 10px;\n}\n\n.header,\n.footer {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.footer {\n  margin-top: auto;\n  padding-top: 12px;\n  border-top: 1px solid var(--border);\n}\n\n.sections {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 14px;\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sectionItems {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sectionLabel {\n  padding: 0 10px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--muted-foreground);\n  opacity: 0.75;\n}\n\n.item {\n  color: var(--foreground);\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 10px 12px 10px 10px;\n  border-radius: 10px;\n  text-decoration: none;\n  font-size: 14px;\n  display: grid;\n  grid-template-columns: var(--sidebar-nav-icon-size) minmax(0, 1fr);\n  align-items: center;\n  column-gap: 10px;\n  width: 100%;\n  text-align: left;\n  box-sizing: border-box;\n  line-height: 1.2;\n  transition: background 120ms ease, color 120ms ease;\n}\n\nbutton.item {\n  font-family: inherit;\n  cursor: pointer;\n}\n\n.item:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.item:hover {\n  background: color-mix(in srgb, var(--primary) 10%, transparent);\n}\n\n.item.itemActive {\n  background: color-mix(in srgb, var(--primary) 18%, transparent);\n  color: var(--foreground);\n  font-weight: 700;\n}\n\n.itemCollapsed {\n  grid-template-columns: 1fr;\n  justify-items: center;\n  padding-right: 10px;\n  padding-left: 10px;\n}\n\n.itemDisabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.icon {\n  width: var(--sidebar-nav-icon-size);\n  height: var(--sidebar-nav-icon-size);\n  min-width: var(--sidebar-nav-icon-size);\n  color: var(--muted-foreground);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n}\n\n.icon > * {\n  width: 100% !important;\n  height: 100% !important;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.icon :where(svg) {\n  width: 100%;\n  height: 100%;\n  display: block;\n  stroke: currentColor;\n}\n\n.item.itemActive .icon {\n  color: var(--primary);\n}\n\n.itemBody {\n  display: flex;\n  min-width: 0;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 3px;\n  overflow: hidden;\n}\n\n.labelRow {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.description {\n  color: var(--muted-foreground);\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 999px;\n  border: 1px solid var(--border);\n  background: color-mix(in srgb, var(--foreground) 4%, transparent);\n  color: var(--muted-foreground);\n  font-size: 11px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n@media (max-width: 960px) {\n  .sidebarNav {\n    gap: 10px;\n  }\n\n  .sections {\n    gap: 12px;\n  }\n\n  .sectionItems {\n    gap: 6px;\n  }\n\n  .item {\n    padding: 9px 10px 9px 8px;\n    border-radius: 9px;\n    font-size: 14px;\n    grid-template-columns: var(--sidebar-nav-icon-size-mobile) minmax(0, 1fr);\n    column-gap: 8px;\n  }\n\n  .icon {\n    width: var(--sidebar-nav-icon-size-mobile);\n    height: var(--sidebar-nav-icon-size-mobile);\n    min-width: var(--sidebar-nav-icon-size-mobile);\n  }\n\n  .icon :where(svg) {\n    width: var(--sidebar-nav-icon-size-mobile);\n    height: var(--sidebar-nav-icon-size-mobile);\n  }\n\n  .description {\n    font-size: 11px;\n  }\n}\n\n@media (max-width: 480px) {\n  .item {\n    padding: 8px 9px 8px 7px;\n    font-size: 13px;\n  }\n}\n"],"mappings":""}

package/dist/index4.cjs

@@ -0,0 +1,8 @@
+//#region src/utils/cx.ts
+function cx(...values) {
+	return values.filter(Boolean).join(" ");
+}
+//#endregion
+exports.cx = cx;
+
+//# sourceMappingURL=index4.cjs.map

package/dist/index4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index4.cjs","names":[],"sources":["../src/utils/cx.ts"],"sourcesContent":["export function cx(...values: Array<string | false | null | undefined>): string {\n  return values.filter(Boolean).join(\" \");\n}\n"],"mappings":";AAAA,SAAgB,GAAG,GAAG,QAA0D;CAC9E,OAAO,OAAO,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACxC"}

package/dist/index4.js

@@ -0,0 +1,29 @@
+//#region src/components/button/button.module.css
+var button = "uzi-button-module__button__5dzDN";
+var sizeSm = "uzi-button-module__sizeSm__jb544";
+var sizeMd = "uzi-button-module__sizeMd__lIo8M";
+var sizeLg = "uzi-button-module__sizeLg__QSSuW";
+var sizeIcon = "uzi-button-module__sizeIcon__Aa9tN";
+var variantPrimary = "uzi-button-module__variantPrimary__zp2Pg";
+var variantSecondary = "uzi-button-module__variantSecondary__oX5CB";
+var variantOutline = "uzi-button-module__variantOutline__uXfiP";
+var variantGhost = "uzi-button-module__variantGhost__-OEB8";
+var variantDestructive = "uzi-button-module__variantDestructive__5IeYA";
+var variantLink = "uzi-button-module__variantLink__Olx4I";
+var button_module_default = {
+	button,
+	sizeSm,
+	sizeMd,
+	sizeLg,
+	sizeIcon,
+	variantPrimary,
+	variantSecondary,
+	variantOutline,
+	variantGhost,
+	variantDestructive,
+	variantLink
+};
+//#endregion
+export { button, button_module_default as default, sizeIcon, sizeLg, sizeMd, sizeSm, variantDestructive, variantGhost, variantLink, variantOutline, variantPrimary, variantSecondary };
+
+//# sourceMappingURL=index4.js.map

package/dist/index4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index4.js","names":[],"sources":["../src/components/button/button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-family: inherit;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  text-decoration: none;\n  transition:\n    opacity 0.15s,\n    border-color 0.15s,\n    color 0.15s,\n    background 0.15s;\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.button:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.button svg {\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n}\n\n.button:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n.sizeSm {\n  font-size: 0.82rem;\n  min-height: 2rem;\n  padding: 6px 14px;\n}\n\n.sizeMd {\n  font-size: 0.95rem;\n  min-height: 2.25rem;\n  padding: 10px 22px;\n}\n\n.sizeLg {\n  font-size: 1rem;\n  min-height: 2.5rem;\n  padding: 12px 28px;\n}\n\n.sizeIcon {\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n}\n\n/* Variants */\n.variantPrimary {\n  background: var(--ts-btn-primary-bg, var(--primary));\n  color: var(--ts-btn-primary-text, var(--primary-foreground));\n}\n\n.variantPrimary:hover:not(:disabled) {\n  opacity: 0.88;\n}\n\n.variantSecondary {\n  background: var(--ts-btn-secondary-bg, var(--secondary));\n  color: var(--ts-btn-secondary-text, var(--secondary-foreground));\n  border-color: var(--ts-btn-secondary-border, var(--border));\n}\n\n.variantSecondary:hover:not(:disabled) {\n  background: var(--ts-btn-secondary-hover-bg, color-mix(in srgb, var(--secondary) 90%, black));\n}\n\n.variantOutline {\n  background: var(--ts-btn-outline-bg, var(--background));\n  color: var(--ts-btn-outline-text, var(--foreground));\n  border-color: var(--ts-btn-outline-border, var(--border));\n}\n\n.variantOutline:hover:not(:disabled) {\n  background: var(--ts-btn-outline-hover-bg, var(--accent));\n  color: var(--ts-btn-outline-hover-text, var(--accent-foreground));\n}\n\n.variantGhost {\n  background: transparent;\n  color: var(--ts-btn-ghost-text, var(--muted-foreground));\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.variantGhost:hover:not(:disabled) {\n  background: var(--ts-btn-ghost-hover-bg, var(--accent));\n  color: var(--ts-btn-ghost-hover-text, var(--accent-foreground));\n}\n\n.variantDestructive {\n  background: var(--ts-btn-danger-bg, var(--destructive));\n  color: var(--ts-btn-danger-text, var(--destructive-foreground));\n}\n\n.variantDestructive:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.variantLink {\n  background: transparent;\n  color: var(--ts-btn-link-text, var(--primary));\n  border-color: transparent;\n  min-height: auto;\n  padding: 0;\n  border-radius: 0;\n}\n\n.variantLink:hover:not(:disabled) {\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n}\n"],"mappings":""}

package/dist/index40.cjs

@@ -0,0 +1,61 @@
+//#region src/components/sidebar-nav/sidebar-nav.module.css
+var sidebarNav = "uzi-sidebar-nav-module__sidebarNav__eUI5c";
+var sidebarNavCollapsed = "uzi-sidebar-nav-module__sidebarNavCollapsed__xTM9s";
+var header = "uzi-sidebar-nav-module__header__Y4NLy";
+var footer = "uzi-sidebar-nav-module__footer__GjWky";
+var sections = "uzi-sidebar-nav-module__sections__mXuGQ";
+var section = "uzi-sidebar-nav-module__section__yjtCY";
+var sectionItems = "uzi-sidebar-nav-module__sectionItems__tNcph";
+var sectionLabel = "uzi-sidebar-nav-module__sectionLabel__Wx94m";
+var item = "uzi-sidebar-nav-module__item__uMHkJ";
+var itemActive = "uzi-sidebar-nav-module__itemActive__wBbiS";
+var itemCollapsed = "uzi-sidebar-nav-module__itemCollapsed__jLJN-";
+var itemDisabled = "uzi-sidebar-nav-module__itemDisabled__Yf8Il";
+var icon = "uzi-sidebar-nav-module__icon__tyrUg";
+var itemBody = "uzi-sidebar-nav-module__itemBody__wI0iy";
+var labelRow = "uzi-sidebar-nav-module__labelRow__D8sEJ";
+var label = "uzi-sidebar-nav-module__label__A-nt6";
+var description = "uzi-sidebar-nav-module__description__Xf3Si";
+var badge = "uzi-sidebar-nav-module__badge__-hnFd";
+var sidebar_nav_module_default = {
+	sidebarNav,
+	sidebarNavCollapsed,
+	header,
+	footer,
+	sections,
+	section,
+	sectionItems,
+	sectionLabel,
+	item,
+	itemActive,
+	itemCollapsed,
+	itemDisabled,
+	icon,
+	itemBody,
+	labelRow,
+	label,
+	description,
+	badge
+};
+//#endregion
+exports.badge = badge;
+exports.default = sidebar_nav_module_default;
+exports.description = description;
+exports.footer = footer;
+exports.header = header;
+exports.icon = icon;
+exports.item = item;
+exports.itemActive = itemActive;
+exports.itemBody = itemBody;
+exports.itemCollapsed = itemCollapsed;
+exports.itemDisabled = itemDisabled;
+exports.label = label;
+exports.labelRow = labelRow;
+exports.section = section;
+exports.sectionItems = sectionItems;
+exports.sectionLabel = sectionLabel;
+exports.sections = sections;
+exports.sidebarNav = sidebarNav;
+exports.sidebarNavCollapsed = sidebarNavCollapsed;
+
+//# sourceMappingURL=index40.cjs.map

package/dist/index40.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index40.cjs","names":[],"sources":["../src/components/sidebar-nav/sidebar-nav.module.css"],"sourcesContent":[".sidebarNav {\n  --sidebar-nav-icon-size: 18px;\n  --sidebar-nav-icon-size-mobile: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: stretch;\n  min-height: 0;\n}\n\n.sidebarNavCollapsed {\n  gap: 10px;\n}\n\n.header,\n.footer {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.footer {\n  margin-top: auto;\n  padding-top: 12px;\n  border-top: 1px solid var(--border);\n}\n\n.sections {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 14px;\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sectionItems {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sectionLabel {\n  padding: 0 10px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--muted-foreground);\n  opacity: 0.75;\n}\n\n.item {\n  color: var(--foreground);\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 10px 12px 10px 10px;\n  border-radius: 10px;\n  text-decoration: none;\n  font-size: 14px;\n  display: grid;\n  grid-template-columns: var(--sidebar-nav-icon-size) minmax(0, 1fr);\n  align-items: center;\n  column-gap: 10px;\n  width: 100%;\n  text-align: left;\n  box-sizing: border-box;\n  line-height: 1.2;\n  transition: background 120ms ease, color 120ms ease;\n}\n\nbutton.item {\n  font-family: inherit;\n  cursor: pointer;\n}\n\n.item:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.item:hover {\n  background: color-mix(in srgb, var(--primary) 10%, transparent);\n}\n\n.item.itemActive {\n  background: color-mix(in srgb, var(--primary) 18%, transparent);\n  color: var(--foreground);\n  font-weight: 700;\n}\n\n.itemCollapsed {\n  grid-template-columns: 1fr;\n  justify-items: center;\n  padding-right: 10px;\n  padding-left: 10px;\n}\n\n.itemDisabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.icon {\n  width: var(--sidebar-nav-icon-size);\n  height: var(--sidebar-nav-icon-size);\n  min-width: var(--sidebar-nav-icon-size);\n  color: var(--muted-foreground);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n}\n\n.icon > * {\n  width: 100% !important;\n  height: 100% !important;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.icon :where(svg) {\n  width: 100%;\n  height: 100%;\n  display: block;\n  stroke: currentColor;\n}\n\n.item.itemActive .icon {\n  color: var(--primary);\n}\n\n.itemBody {\n  display: flex;\n  min-width: 0;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 3px;\n  overflow: hidden;\n}\n\n.labelRow {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.description {\n  color: var(--muted-foreground);\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 999px;\n  border: 1px solid var(--border);\n  background: color-mix(in srgb, var(--foreground) 4%, transparent);\n  color: var(--muted-foreground);\n  font-size: 11px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n@media (max-width: 960px) {\n  .sidebarNav {\n    gap: 10px;\n  }\n\n  .sections {\n    gap: 12px;\n  }\n\n  .sectionItems {\n    gap: 6px;\n  }\n\n  .item {\n    padding: 9px 10px 9px 8px;\n    border-radius: 9px;\n    font-size: 14px;\n    grid-template-columns: var(--sidebar-nav-icon-size-mobile) minmax(0, 1fr);\n    column-gap: 8px;\n  }\n\n  .icon {\n    width: var(--sidebar-nav-icon-size-mobile);\n    height: var(--sidebar-nav-icon-size-mobile);\n    min-width: var(--sidebar-nav-icon-size-mobile);\n  }\n\n  .icon :where(svg) {\n    width: var(--sidebar-nav-icon-size-mobile);\n    height: var(--sidebar-nav-icon-size-mobile);\n  }\n\n  .description {\n    font-size: 11px;\n  }\n}\n\n@media (max-width: 480px) {\n  .item {\n    padding: 8px 9px 8px 7px;\n    font-size: 13px;\n  }\n}\n"],"mappings":""}

package/dist/index40.js

@@ -0,0 +1,173 @@
+"use client";
+import { cx } from "./index3.js";
+import sidebar_nav_module_default from "./index39.js";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/sidebar-nav/SidebarNav.tsx
+var isActivePrefix = (item, path) => {
+	if (item.active !== void 0) return item.active;
+	if (!item.href) return false;
+	if (!path) return false;
+	if (item.href === "/") return path === "/";
+	return path.startsWith(item.href);
+};
+var isActiveExact = (item, path) => {
+	if (item.active !== void 0) return item.active;
+	if (!item.href) return false;
+	if (!path) return false;
+	if (item.href === "/") return path === "/";
+	const normalizedHref = item.href.endsWith("/") ? item.href.slice(0, -1) : item.href;
+	return normalizedHref === path || path.startsWith(`${normalizedHref}/`);
+};
+var isNaturalPrefixMatch = (href, path) => {
+	if (href === "/") return path === "/";
+	return path.startsWith(href);
+};
+var isNaturalExactMatch = (href, path) => {
+	if (href === "/") return path === "/";
+	return (href.endsWith("/") ? href.slice(0, -1) : href) === path;
+};
+var hrefLength = (href) => href.endsWith("/") ? href.length - 1 : href.length;
+var findMostSpecific = (items, currentPath) => {
+	const result = /* @__PURE__ */ new Set();
+	if (!currentPath) return result;
+	const matchingItems = items.filter((item) => {
+		if (item.disabled || !item.href) return false;
+		return item.exact ? isNaturalExactMatch(item.href, currentPath) : isNaturalPrefixMatch(item.href, currentPath);
+	});
+	if (matchingItems.length === 0) return result;
+	let maxLen = 0;
+	for (const item of matchingItems) {
+		if (!item.href) continue;
+		const len = hrefLength(item.href);
+		if (len > maxLen) maxLen = len;
+	}
+	for (const item of matchingItems) {
+		if (!item.href) continue;
+		if (hrefLength(item.href) === maxLen) result.add(item.href);
+	}
+	return result;
+};
+function SidebarNav({ items = [], sections, currentPath, getIsActive, matchStrategy = "prefix", onItemClick, header, footer, ariaLabel = "Sidebar navigation", collapsed = false, iconSize, className, itemClassName, sectionClassName }) {
+	const resolvedSections = useMemo(() => {
+		return sections?.length ? sections : [{
+			id: "default",
+			items
+		}];
+	}, [sections, items]);
+	const allItems = useMemo(() => resolvedSections.flatMap((section) => section.items), [resolvedSections]);
+	const defaultIsActiveFn = useMemo(() => {
+		if (matchStrategy === "most-specific") {
+			const mostSpecificHrefs = findMostSpecific(allItems, currentPath);
+			return (item) => {
+				if (item.active !== void 0) return item.active;
+				if (!item.href) return false;
+				return mostSpecificHrefs.has(item.href);
+			};
+		} else return (item, path) => {
+			if (item.active !== void 0) return item.active;
+			if (item.exact) return isActiveExact(item, path);
+			return isActivePrefix(item, path);
+		};
+	}, [
+		matchStrategy,
+		allItems,
+		currentPath
+	]);
+	const resolvedGetIsActive = getIsActive ?? defaultIsActiveFn;
+	const style = iconSize !== void 0 ? { ["--sidebar-nav-icon-size"]: typeof iconSize === "number" ? `${iconSize}px` : iconSize } : void 0;
+	return /* @__PURE__ */ jsxs("nav", {
+		className: cx(sidebar_nav_module_default.sidebarNav, collapsed && sidebar_nav_module_default.sidebarNavCollapsed, className),
+		"aria-label": ariaLabel,
+		style,
+		children: [
+			header ? /* @__PURE__ */ jsx("div", {
+				className: sidebar_nav_module_default.header,
+				children: header
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: sidebar_nav_module_default.sections,
+				children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", {
+					className: cx(sidebar_nav_module_default.section, sectionClassName),
+					children: [section.label && !collapsed ? /* @__PURE__ */ jsx("div", {
+						className: sidebar_nav_module_default.sectionLabel,
+						children: section.label
+					}) : null, /* @__PURE__ */ jsx("div", {
+						className: sidebar_nav_module_default.sectionItems,
+						children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsx(SidebarNavEntry, {
+							item,
+							active: resolvedGetIsActive(item, currentPath),
+							collapsed,
+							itemClassName,
+							onItemClick
+						}, `${section.id ?? sectionIndex}-${item.href ?? item.title ?? itemIndex}`))
+					})]
+				}, section.id ?? `section-${sectionIndex}`))
+			}),
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: sidebar_nav_module_default.footer,
+				children: footer
+			}) : null
+		]
+	});
+}
+function SidebarNavEntry({ item, active, collapsed, itemClassName, onItemClick }) {
+	const rel = item.rel ?? (item.target === "_blank" ? "noreferrer" : void 0);
+	const title = item.title ?? (typeof item.label === "string" ? item.label : void 0);
+	const classes = cx(sidebar_nav_module_default.item, active && sidebar_nav_module_default.itemActive, collapsed && sidebar_nav_module_default.itemCollapsed, item.disabled && sidebar_nav_module_default.itemDisabled, itemClassName);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [item.icon && /* @__PURE__ */ jsx("span", {
+		className: sidebar_nav_module_default.icon,
+		children: item.icon
+	}), !collapsed ? /* @__PURE__ */ jsxs("span", {
+		className: sidebar_nav_module_default.itemBody,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: sidebar_nav_module_default.labelRow,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: sidebar_nav_module_default.label,
+				children: item.label
+			}), item.badge && /* @__PURE__ */ jsx("span", {
+				className: sidebar_nav_module_default.badge,
+				children: item.badge
+			})]
+		}), item.description ? /* @__PURE__ */ jsx("span", {
+			className: sidebar_nav_module_default.description,
+			children: item.description
+		}) : null]
+	}) : null] });
+	const handleClick = () => {
+		if (item.disabled) return;
+		item.onClick?.();
+		onItemClick?.(item);
+	};
+	if (!item.href) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: classes,
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": item.disabled ? "true" : void 0,
+		disabled: item.disabled,
+		title: collapsed ? title : void 0,
+		onClick: handleClick,
+		children: content
+	});
+	if (item.disabled) return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": "true",
+		title: collapsed ? title : void 0,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("a", {
+		className: classes,
+		href: item.href,
+		target: item.target,
+		rel,
+		"aria-current": active ? "page" : void 0,
+		title: collapsed ? title : void 0,
+		onClick: handleClick,
+		children: content
+	});
+}
+//#endregion
+export { SidebarNav };
+
+//# sourceMappingURL=index40.js.map

package/dist/index40.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index40.js","names":[],"sources":["../src/components/sidebar-nav/SidebarNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { type AnchorHTMLAttributes, type CSSProperties, type ReactNode, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./sidebar-nav.module.css\";\n\nexport type SidebarNavItem = {\n  label: string;\n  href?: string;\n  icon?: ReactNode;\n  description?: ReactNode;\n  badge?: ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  /**\n   * When `true`, this item uses exact matching (matches its own path and paths starting with `{href}/`)\n   * instead of prefix matching. This flag takes precedence over the global `matchStrategy` prop on a\n   * per-item basis — even when `matchStrategy=\"prefix\"`, an item with `exact: true` will use exact matching.\n   * When `matchStrategy=\"most-specific\"`, exact-flagged items participate in the length-based tiebreaker\n   * like all other candidates, provided they pass their own match check first.\n   */\n  exact?: boolean;\n  title?: string;\n  target?: AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"];\n  rel?: AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  onClick?: () => void;\n};\n\nexport type SidebarNavSection = {\n  id?: string;\n  label?: ReactNode;\n  items: SidebarNavItem[];\n};\n\nexport type SidebarNavProps = {\n  items?: SidebarNavItem[];\n  sections?: SidebarNavSection[];\n  currentPath?: string;\n  getIsActive?: (item: SidebarNavItem, currentPath?: string) => boolean;\n  matchStrategy?: \"prefix\" | \"most-specific\";\n  onItemClick?: (item: SidebarNavItem) => void;\n  header?: ReactNode;\n  footer?: ReactNode;\n  ariaLabel?: string;\n  collapsed?: boolean;\n  iconSize?: number | string;\n  className?: string;\n  itemClassName?: string;\n  sectionClassName?: string;\n};\n\nconst isActivePrefix = (item: SidebarNavItem, path?: string) => {\n  if (item.active !== undefined) return item.active;\n  if (!item.href) return false;\n  if (!path) return false;\n  if (item.href === \"/\") return path === \"/\";\n  return path.startsWith(item.href);\n};\n\nconst isActiveExact = (item: SidebarNavItem, path?: string) => {\n  if (item.active !== undefined) return item.active;\n  if (!item.href) return false;\n  if (!path) return false;\n  // Root href \"/\" must match exactly — otherwise every path would match.\n  if (item.href === \"/\") return path === \"/\";\n  // Normalize trailing slashes for consistent matching with findMostSpecific length computation.\n  const normalizedHref = item.href.endsWith(\"/\") ? item.href.slice(0, -1) : item.href;\n  return normalizedHref === path || path.startsWith(`${normalizedHref}/`);\n};\n\n// Natural matching helpers that ignore manual `active` overrides — used inside findMostSpecific\n// so that manually-set active flags don't hijack the length-based tiebreaker.\nconst isNaturalPrefixMatch = (href: string, path: string) => {\n  if (href === \"/\") return path === \"/\";\n  return path.startsWith(href);\n};\n\nconst isNaturalExactMatch = (href: string, path: string) => {\n  if (href === \"/\") return path === \"/\";\n  const normalizedHref = href.endsWith(\"/\") ? href.slice(0, -1) : href;\n  return normalizedHref === path;\n};\n\nconst hrefLength = (href: string) => (href.endsWith(\"/\") ? href.length - 1 : href.length);\n\nconst findMostSpecific = (items: SidebarNavItem[], currentPath?: string): Set<string> => {\n  const result = new Set<string>();\n  if (!currentPath) return result;\n\n  // Collect all items that naturally match the path — use natural matching helpers so that\n  // manually-set `active` flags don't participate in the length-based tiebreaker.\n  // Exclude disabled items from matching since they are not interactive targets.\n  const matchingItems = items.filter(item => {\n    if (item.disabled || !item.href) return false;\n    return item.exact\n      ? isNaturalExactMatch(item.href, currentPath)\n      : isNaturalPrefixMatch(item.href, currentPath);\n  });\n\n  if (matchingItems.length === 0) return result;\n\n  // Find the longest href among prefix matches.\n  let maxLen = 0;\n  for (const item of matchingItems) {\n    if (!item.href) continue;\n    const len = hrefLength(item.href);\n    if (len > maxLen) maxLen = len;\n  }\n\n  // Only the items with the longest href are active.\n  for (const item of matchingItems) {\n    if (!item.href) continue;\n    if (hrefLength(item.href) === maxLen) result.add(item.href);\n  }\n\n  return result;\n};\n\nexport function SidebarNav({\n  items = [],\n  sections,\n  currentPath,\n  getIsActive,\n  matchStrategy = \"prefix\",\n  onItemClick,\n  header,\n  footer,\n  ariaLabel = \"Sidebar navigation\",\n  collapsed = false,\n  iconSize,\n  className,\n  itemClassName,\n  sectionClassName,\n}: SidebarNavProps) {\n  const resolvedSections = useMemo(() => {\n    return sections?.length ? sections : [{ id: \"default\", items }];\n  }, [sections, items]);\n\n  // Stable reference to all items — avoids recreating on every render when `sections` is falsy.\n  const allItems = useMemo(() => resolvedSections.flatMap(section => section.items), [resolvedSections]);\n\n  // Build the default isActive function based on matchStrategy.\n  const defaultIsActiveFn = useMemo<(item: SidebarNavItem, path?: string) => boolean>(() => {\n    if (matchStrategy === \"most-specific\") {\n      const mostSpecificHrefs = findMostSpecific(allItems, currentPath);\n      return (item: SidebarNavItem) => {\n        if (item.active !== undefined) return item.active;\n        if (!item.href) return false;\n        // Exact-flagged items participate in the length-based tiebreaker like all other candidates.\n        return mostSpecificHrefs.has(item.href);\n      };\n    } else {\n      return (item: SidebarNavItem, path?: string) => {\n        if (item.active !== undefined) return item.active;\n        if (item.exact) return isActiveExact(item, path);\n        return isActivePrefix(item, path);\n      };\n    }\n  }, [matchStrategy, allItems, currentPath]);\n\n  const resolvedGetIsActive = getIsActive ?? defaultIsActiveFn;\n\n  const style =\n    iconSize !== undefined\n      ? ({\n          [\"--sidebar-nav-icon-size\" as string]:\n            typeof iconSize === \"number\" ? `${iconSize}px` : iconSize,\n        } satisfies CSSProperties)\n      : undefined;\n\n  return (\n    <nav\n      className={cx(\n        styles.sidebarNav,\n        collapsed && styles.sidebarNavCollapsed,\n        className,\n      )}\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {header ? <div className={styles.header}>{header}</div> : null}\n      <div className={styles.sections}>\n        {resolvedSections.map((section, sectionIndex) => (\n          <div\n            key={section.id ?? `section-${sectionIndex}`}\n            className={cx(styles.section, sectionClassName)}\n          >\n            {section.label && !collapsed ? (\n              <div className={styles.sectionLabel}>{section.label}</div>\n            ) : null}\n            <div className={styles.sectionItems}>\n              {section.items.map((item, itemIndex) => (\n                <SidebarNavEntry\n                  key={`${section.id ?? sectionIndex}-${item.href ?? item.title ?? itemIndex}`}\n                  item={item}\n                  active={resolvedGetIsActive(item, currentPath)}\n                  collapsed={collapsed}\n                  itemClassName={itemClassName}\n                  onItemClick={onItemClick}\n                />\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n      {footer ? <div className={styles.footer}>{footer}</div> : null}\n    </nav>\n  );\n}\n\ntype SidebarNavEntryProps = {\n  item: SidebarNavItem;\n  active: boolean;\n  collapsed: boolean;\n  itemClassName?: string;\n  onItemClick?: (item: SidebarNavItem) => void;\n};\n\nfunction SidebarNavEntry({\n  item,\n  active,\n  collapsed,\n  itemClassName,\n  onItemClick,\n}: SidebarNavEntryProps) {\n  const rel = item.rel ?? (item.target === \"_blank\" ? \"noreferrer\" : undefined);\n  const title = item.title ?? (typeof item.label === \"string\" ? item.label : undefined);\n  const classes = cx(\n    styles.item,\n    active && styles.itemActive,\n    collapsed && styles.itemCollapsed,\n    item.disabled && styles.itemDisabled,\n    itemClassName,\n  );\n  const content = (\n    <>\n      {item.icon && <span className={styles.icon}>{item.icon}</span>}\n      {!collapsed ? (\n        <span className={styles.itemBody}>\n          <span className={styles.labelRow}>\n            <span className={styles.label}>{item.label}</span>\n            {item.badge && <span className={styles.badge}>{item.badge}</span>}\n          </span>\n          {item.description ? <span className={styles.description}>{item.description}</span> : null}\n        </span>\n      ) : null}\n    </>\n  );\n\n  const handleClick = () => {\n    if (item.disabled) return;\n    item.onClick?.();\n    onItemClick?.(item);\n  };\n\n  if (!item.href) {\n    return (\n      <button\n        type=\"button\"\n        className={classes}\n        aria-current={active ? \"page\" : undefined}\n        aria-disabled={item.disabled ? \"true\" : undefined}\n        disabled={item.disabled}\n        title={collapsed ? title : undefined}\n        onClick={handleClick}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  if (item.disabled) {\n    return (\n      <div\n        className={classes}\n        aria-current={active ? \"page\" : undefined}\n        aria-disabled=\"true\"\n        title={collapsed ? title : undefined}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  return (\n    <a\n      className={classes}\n      href={item.href}\n      target={item.target}\n      rel={rel}\n      aria-current={active ? \"page\" : undefined}\n      title={collapsed ? title : undefined}\n      onClick={handleClick}\n    >\n      {content}\n    </a>\n  );\n}\n"],"mappings":"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"}