@tomny-dev/uzi 0.5.0 → 0.6.0

package/dist/index42.js

@@ -1,22 +1,174 @@
+"use client";
 import { cx } from "./index3.js";
-import page_container_module_default from "./index41.js";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/page-container/PageContainer.tsx
-var WIDTH_CLASS = {
-	sm: "width-sm",
-	md: "width-md",
-	lg: "width-lg",
-	xl: "width-xl",
-	full: "width-full"
+import sidebar_nav_module_default from "./index41.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);
 };
-function PageContainer({ maxWidth = "lg", bleed = false, className, children, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(page_container_module_default.container, page_container_module_default[WIDTH_CLASS[maxWidth]], bleed && page_container_module_default.bleed, className),
-		...rest,
-		children
+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 hasIcon = Boolean(item.icon);
+	const classes = cx(sidebar_nav_module_default.item, !hasIcon && sidebar_nav_module_default.itemWithoutIcon, 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: [hasIcon ? /* @__PURE__ */ jsx("span", {
+		className: sidebar_nav_module_default.icon,
+		children: item.icon
+	}) : null, !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 { PageContainer };
+export { SidebarNav };
 
 //# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.js","names":[],"sources":["../src/components/page-container/PageContainer.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./page-container.module.css\";\n\nexport type PageContainerWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport type PageContainerProps = HTMLAttributes<HTMLDivElement> & {\n  /** Maximum content width. Defaults to `lg`. */\n  maxWidth?: PageContainerWidth;\n  /** Removes the responsive horizontal gutters. */\n  bleed?: boolean;\n};\n\nconst WIDTH_CLASS: Record<PageContainerWidth, string> = {\n  sm: \"width-sm\",\n  md: \"width-md\",\n  lg: \"width-lg\",\n  xl: \"width-xl\",\n  full: \"width-full\",\n};\n\nexport function PageContainer({\n  maxWidth = \"lg\",\n  bleed = false,\n  className,\n  children,\n  ...rest\n}: PageContainerProps) {\n  return (\n    <div\n      className={cx(styles.container, styles[WIDTH_CLASS[maxWidth]], bleed && styles.bleed, className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAaA,IAAM,cAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,SAAgB,cAAc,EAC5B,WAAW,MACX,QAAQ,OACR,WACA,UACA,GAAG,QACkB;CACrB,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,8BAAO,WAAW,8BAAO,YAAY,YAAY,SAAS,8BAAO,OAAO,SAAS;EAC/F,GAAI;EAEH;CACE,CAAA;AAET"}
+{"version":3,"file":"index42.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 hasIcon = Boolean(item.icon);\n  const classes = cx(\n    styles.item,\n    !hasIcon && styles.itemWithoutIcon,\n    active && styles.itemActive,\n    collapsed && styles.itemCollapsed,\n    item.disabled && styles.itemDisabled,\n    itemClassName,\n  );\n  const content = (\n    <>\n      {hasIcon ? <span className={styles.icon}>{item.icon}</span> : null}\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":";;;;;;AAmDA,IAAM,kBAAkB,MAAsB,SAAkB;CAC9D,IAAI,KAAK,WAAW,KAAA,GAAW,OAAO,KAAK;CAC3C,IAAI,CAAC,KAAK,MAAM,OAAO;CACvB,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,KAAK,SAAS,KAAK,OAAO,SAAS;CACvC,OAAO,KAAK,WAAW,KAAK,IAAI;AAClC;AAEA,IAAM,iBAAiB,MAAsB,SAAkB;CAC7D,IAAI,KAAK,WAAW,KAAA,GAAW,OAAO,KAAK;CAC3C,IAAI,CAAC,KAAK,MAAM,OAAO;CACvB,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,KAAK,SAAS,KAAK,OAAO,SAAS;CAEvC,MAAM,iBAAiB,KAAK,KAAK,SAAS,GAAG,IAAI,KAAK,KAAK,MAAM,GAAG,EAAE,IAAI,KAAK;CAC/E,OAAO,mBAAmB,QAAQ,KAAK,WAAW,GAAG,eAAe,EAAE;AACxE;AAIA,IAAM,wBAAwB,MAAc,SAAiB;CAC3D,IAAI,SAAS,KAAK,OAAO,SAAS;CAClC,OAAO,KAAK,WAAW,IAAI;AAC7B;AAEA,IAAM,uBAAuB,MAAc,SAAiB;CAC1D,IAAI,SAAS,KAAK,OAAO,SAAS;CAElC,QADuB,KAAK,SAAS,GAAG,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI,UACtC;AAC5B;AAEA,IAAM,cAAc,SAAkB,KAAK,SAAS,GAAG,IAAI,KAAK,SAAS,IAAI,KAAK;AAElF,IAAM,oBAAoB,OAAyB,gBAAsC;CACvF,MAAM,yBAAS,IAAI,IAAY;CAC/B,IAAI,CAAC,aAAa,OAAO;CAKzB,MAAM,gBAAgB,MAAM,QAAO,SAAQ;EACzC,IAAI,KAAK,YAAY,CAAC,KAAK,MAAM,OAAO;EACxC,OAAO,KAAK,QACR,oBAAoB,KAAK,MAAM,WAAW,IAC1C,qBAAqB,KAAK,MAAM,WAAW;CACjD,CAAC;CAED,IAAI,cAAc,WAAW,GAAG,OAAO;CAGvC,IAAI,SAAS;CACb,KAAK,MAAM,QAAQ,eAAe;EAChC,IAAI,CAAC,KAAK,MAAM;EAChB,MAAM,MAAM,WAAW,KAAK,IAAI;EAChC,IAAI,MAAM,QAAQ,SAAS;CAC7B;CAGA,KAAK,MAAM,QAAQ,eAAe;EAChC,IAAI,CAAC,KAAK,MAAM;EAChB,IAAI,WAAW,KAAK,IAAI,MAAM,QAAQ,OAAO,IAAI,KAAK,IAAI;CAC5D;CAEA,OAAO;AACT;AAEA,SAAgB,WAAW,EACzB,QAAQ,CAAC,GACT,UACA,aACA,aACA,gBAAgB,UAChB,aACA,QACA,QACA,YAAY,sBACZ,YAAY,OACZ,UACA,WACA,eACA,oBACkB;CAClB,MAAM,mBAAmB,cAAc;EACrC,OAAO,UAAU,SAAS,WAAW,CAAC;GAAE,IAAI;GAAW;EAAM,CAAC;CAChE,GAAG,CAAC,UAAU,KAAK,CAAC;CAGpB,MAAM,WAAW,cAAc,iBAAiB,SAAQ,YAAW,QAAQ,KAAK,GAAG,CAAC,gBAAgB,CAAC;CAGrG,MAAM,oBAAoB,cAAgE;EACxF,IAAI,kBAAkB,iBAAiB;GACrC,MAAM,oBAAoB,iBAAiB,UAAU,WAAW;GAChE,QAAQ,SAAyB;IAC/B,IAAI,KAAK,WAAW,KAAA,GAAW,OAAO,KAAK;IAC3C,IAAI,CAAC,KAAK,MAAM,OAAO;IAEvB,OAAO,kBAAkB,IAAI,KAAK,IAAI;GACxC;EACF,OACE,QAAQ,MAAsB,SAAkB;GAC9C,IAAI,KAAK,WAAW,KAAA,GAAW,OAAO,KAAK;GAC3C,IAAI,KAAK,OAAO,OAAO,cAAc,MAAM,IAAI;GAC/C,OAAO,eAAe,MAAM,IAAI;EAClC;CAEJ,GAAG;EAAC;EAAe;EAAU;CAAW,CAAC;CAEzC,MAAM,sBAAsB,eAAe;CAE3C,MAAM,QACJ,aAAa,KAAA,IACR,GACE,4BACC,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM,SACrD,IACA,KAAA;CAEN,OACE,qBAAC,OAAD;EACE,WAAW,GACT,2BAAO,YACP,aAAa,2BAAO,qBACpB,SACF;EACA,cAAY;EACL;YAPT;GASG,SAAS,oBAAC,OAAD;IAAK,WAAW,2BAAO;cAAS;GAAY,CAAA,IAAI;GAC1D,oBAAC,OAAD;IAAK,WAAW,2BAAO;cACpB,iBAAiB,KAAK,SAAS,iBAC9B,qBAAC,OAAD;KAEE,WAAW,GAAG,2BAAO,SAAS,gBAAgB;eAFhD,CAIG,QAAQ,SAAS,CAAC,YACjB,oBAAC,OAAD;MAAK,WAAW,2BAAO;gBAAe,QAAQ;KAAW,CAAA,IACvD,MACJ,oBAAC,OAAD;MAAK,WAAW,2BAAO;gBACpB,QAAQ,MAAM,KAAK,MAAM,cACxB,oBAAC,iBAAD;OAEQ;OACN,QAAQ,oBAAoB,MAAM,WAAW;OAClC;OACI;OACF;MACd,GANM,GAAG,QAAQ,MAAM,aAAa,GAAG,KAAK,QAAQ,KAAK,SAAS,WAMlE,CACF;KACE,CAAA,CACF;OAlBE,QAAQ,MAAM,WAAW,cAkB3B,CACN;GACE,CAAA;GACJ,SAAS,oBAAC,OAAD;IAAK,WAAW,2BAAO;cAAS;GAAY,CAAA,IAAI;EACvD;;AAET;AAUA,SAAS,gBAAgB,EACvB,MACA,QACA,WACA,eACA,eACuB;CACvB,MAAM,MAAM,KAAK,QAAQ,KAAK,WAAW,WAAW,eAAe,KAAA;CACnE,MAAM,QAAQ,KAAK,UAAU,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAA;CAC3E,MAAM,UAAU,QAAQ,KAAK,IAAI;CACjC,MAAM,UAAU,GACd,2BAAO,MACP,CAAC,WAAW,2BAAO,iBACnB,UAAU,2BAAO,YACjB,aAAa,2BAAO,eACpB,KAAK,YAAY,2BAAO,cACxB,aACF;CACA,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,oBAAC,QAAD;EAAM,WAAW,2BAAO;YAAO,KAAK;CAAW,CAAA,IAAI,MAC7D,CAAC,YACA,qBAAC,QAAD;EAAM,WAAW,2BAAO;YAAxB,CACE,qBAAC,QAAD;GAAM,WAAW,2BAAO;aAAxB,CACE,oBAAC,QAAD;IAAM,WAAW,2BAAO;cAAQ,KAAK;GAAY,CAAA,GAChD,KAAK,SAAS,oBAAC,QAAD;IAAM,WAAW,2BAAO;cAAQ,KAAK;GAAY,CAAA,CAC5D;MACL,KAAK,cAAc,oBAAC,QAAD;GAAM,WAAW,2BAAO;aAAc,KAAK;EAAkB,CAAA,IAAI,IACjF;MACJ,IACJ,EAAA,CAAA;CAGJ,MAAM,oBAAoB;EACxB,IAAI,KAAK,UAAU;EACnB,KAAK,UAAU;EACf,cAAc,IAAI;CACpB;CAEA,IAAI,CAAC,KAAK,MACR,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,gBAAc,SAAS,SAAS,KAAA;EAChC,iBAAe,KAAK,WAAW,SAAS,KAAA;EACxC,UAAU,KAAK;EACf,OAAO,YAAY,QAAQ,KAAA;EAC3B,SAAS;YAER;CACK,CAAA;CAIZ,IAAI,KAAK,UACP,OACE,oBAAC,OAAD;EACE,WAAW;EACX,gBAAc,SAAS,SAAS,KAAA;EAChC,iBAAc;EACd,OAAO,YAAY,QAAQ,KAAA;YAE1B;CACE,CAAA;CAIT,OACE,oBAAC,KAAD;EACE,WAAW;EACX,MAAM,KAAK;EACX,QAAQ,KAAK;EACR;EACL,gBAAc,SAAS,SAAS,KAAA;EAChC,OAAO,YAAY,QAAQ,KAAA;EAC3B,SAAS;YAER;CACA,CAAA;AAEP"}

package/dist/index43.cjs

@@ -1,22 +1,174 @@
+"use client";
 const require_cx = require("./index4.cjs");
-const require_page_container_module = require("./index42.cjs");
+const require_sidebar_nav_module = require("./index42.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/page-container/PageContainer.tsx
-var WIDTH_CLASS = {
-	sm: "width-sm",
-	md: "width-md",
-	lg: "width-lg",
-	xl: "width-xl",
-	full: "width-full"
+//#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);
 };
-function PageContainer({ maxWidth = "lg", bleed = false, className, children, ...rest }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_cx.cx(require_page_container_module.default.container, require_page_container_module.default[WIDTH_CLASS[maxWidth]], bleed && require_page_container_module.default.bleed, className),
-		...rest,
-		children
+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 = (0, react.useMemo)(() => {
+		return sections?.length ? sections : [{
+			id: "default",
+			items
+		}];
+	}, [sections, items]);
+	const allItems = (0, react.useMemo)(() => resolvedSections.flatMap((section) => section.items), [resolvedSections]);
+	const defaultIsActiveFn = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("nav", {
+		className: require_cx.cx(require_sidebar_nav_module.default.sidebarNav, collapsed && require_sidebar_nav_module.default.sidebarNavCollapsed, className),
+		"aria-label": ariaLabel,
+		style,
+		children: [
+			header ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_sidebar_nav_module.default.header,
+				children: header
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_sidebar_nav_module.default.sections,
+				children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_cx.cx(require_sidebar_nav_module.default.section, sectionClassName),
+					children: [section.label && !collapsed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: require_sidebar_nav_module.default.sectionLabel,
+						children: section.label
+					}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: require_sidebar_nav_module.default.sectionItems,
+						children: section.items.map((item, itemIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarNavEntry, {
+							item,
+							active: resolvedGetIsActive(item, currentPath),
+							collapsed,
+							itemClassName,
+							onItemClick
+						}, `${section.id ?? sectionIndex}-${item.href ?? item.title ?? itemIndex}`))
+					})]
+				}, section.id ?? `section-${sectionIndex}`))
+			}),
+			footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_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 hasIcon = Boolean(item.icon);
+	const classes = require_cx.cx(require_sidebar_nav_module.default.item, !hasIcon && require_sidebar_nav_module.default.itemWithoutIcon, active && require_sidebar_nav_module.default.itemActive, collapsed && require_sidebar_nav_module.default.itemCollapsed, item.disabled && require_sidebar_nav_module.default.itemDisabled, itemClassName);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [hasIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_sidebar_nav_module.default.icon,
+		children: item.icon
+	}) : null, !collapsed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_sidebar_nav_module.default.itemBody,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: require_sidebar_nav_module.default.labelRow,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_sidebar_nav_module.default.label,
+				children: item.label
+			}), item.badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_sidebar_nav_module.default.badge,
+				children: item.badge
+			})]
+		}), item.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes,
+		"aria-current": active ? "page" : void 0,
+		"aria-disabled": "true",
+		title: collapsed ? title : void 0,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.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
-exports.PageContainer = PageContainer;
+exports.SidebarNav = SidebarNav;
 
 //# sourceMappingURL=index43.cjs.map

package/dist/index43.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index43.cjs","names":[],"sources":["../src/components/page-container/PageContainer.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./page-container.module.css\";\n\nexport type PageContainerWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport type PageContainerProps = HTMLAttributes<HTMLDivElement> & {\n  /** Maximum content width. Defaults to `lg`. */\n  maxWidth?: PageContainerWidth;\n  /** Removes the responsive horizontal gutters. */\n  bleed?: boolean;\n};\n\nconst WIDTH_CLASS: Record<PageContainerWidth, string> = {\n  sm: \"width-sm\",\n  md: \"width-md\",\n  lg: \"width-lg\",\n  xl: \"width-xl\",\n  full: \"width-full\",\n};\n\nexport function PageContainer({\n  maxWidth = \"lg\",\n  bleed = false,\n  className,\n  children,\n  ...rest\n}: PageContainerProps) {\n  return (\n    <div\n      className={cx(styles.container, styles[WIDTH_CLASS[maxWidth]], bleed && styles.bleed, className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAaA,IAAM,cAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,SAAgB,cAAc,EAC5B,WAAW,MACX,QAAQ,OACR,WACA,UACA,GAAG,QACkB;CACrB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAW,WAAA,GAAG,8BAAA,QAAO,WAAW,8BAAA,QAAO,YAAY,YAAY,SAAS,8BAAA,QAAO,OAAO,SAAS;EAC/F,GAAI;EAEH;CACE,CAAA;AAET"}
+{"version":3,"file":"index43.cjs","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 hasIcon = Boolean(item.icon);\n  const classes = cx(\n    styles.item,\n    !hasIcon && styles.itemWithoutIcon,\n    active && styles.itemActive,\n    collapsed && styles.itemCollapsed,\n    item.disabled && styles.itemDisabled,\n    itemClassName,\n  );\n  const content = (\n    <>\n      {hasIcon ? <span className={styles.icon}>{item.icon}</span> : null}\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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"}

package/dist/index43.js

@@ -1,19 +1,16 @@
-//#region src/components/page-header/page-header.module.css
-var header = "uzi-page-header-module__header__LpR9k";
-var content = "uzi-page-header-module__content__lJh9C";
-var eyebrow = "uzi-page-header-module__eyebrow__xP-Qr";
-var title = "uzi-page-header-module__title__kkZon";
-var description = "uzi-page-header-module__description__zNQ1m";
-var actions = "uzi-page-header-module__actions__6KfL2";
-var page_header_module_default = {
-	header,
-	content,
-	eyebrow,
-	title,
-	description,
-	actions
+//#region src/components/page-container/page-container.module.css
+var container = "uzi-page-container-module__container__o7e1A";
+var bleed = "uzi-page-container-module__bleed__8rKR8";
+var page_container_module_default = {
+	container,
+	"width-sm": "uzi-page-container-module__width-sm__8Mpln",
+	"width-md": "uzi-page-container-module__width-md__KSmd5",
+	"width-lg": "uzi-page-container-module__width-lg__GpJ-B",
+	"width-xl": "uzi-page-container-module__width-xl__S2q8u",
+	"width-full": "uzi-page-container-module__width-full__eHJdY",
+	bleed
 };
 //#endregion
-export { actions, content, page_header_module_default as default, description, eyebrow, header, title };
+export { bleed, container, page_container_module_default as default };
 
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","names":[],"sources":["../src/components/page-header/page-header.module.css"],"sourcesContent":[".header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1.5rem;\n}\n\n.content {\n  min-width: 0;\n  display: grid;\n  gap: 0.5rem;\n}\n\n.eyebrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--muted-foreground);\n  font-size: 0.8125rem;\n  font-weight: 600;\n}\n\n.title {\n  margin: 0;\n  color: var(--foreground);\n  font-size: clamp(1.75rem, 3vw, 2.5rem);\n  line-height: 1.12;\n  letter-spacing: -0.025em;\n}\n\n.description {\n  max-width: 48rem;\n  color: var(--muted-foreground);\n  font-size: 0.95rem;\n  line-height: 1.65;\n}\n\n.actions {\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.625rem;\n}\n\n@media (max-width: 40rem) {\n  .header {\n    flex-direction: column;\n  }\n\n  .actions {\n    width: 100%;\n    justify-content: flex-start;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"index43.js","names":[],"sources":["../src/components/page-container/page-container.module.css"],"sourcesContent":[".container {\n  width: 100%;\n  margin-inline: auto;\n  padding-inline: var(--uzi-page-gutter, clamp(1rem, 3vw, 2rem));\n}\n\n.width-sm { max-width: 48rem; }\n.width-md { max-width: 64rem; }\n.width-lg { max-width: 75rem; }\n.width-xl { max-width: 90rem; }\n.width-full { max-width: none; }\n\n.bleed {\n  padding-inline: 0;\n}\n"],"mappings":""}

package/dist/index44.cjs

@@ -1,25 +1,18 @@
-//#region src/components/page-header/page-header.module.css
-var header = "uzi-page-header-module__header__LpR9k";
-var content = "uzi-page-header-module__content__lJh9C";
-var eyebrow = "uzi-page-header-module__eyebrow__xP-Qr";
-var title = "uzi-page-header-module__title__kkZon";
-var description = "uzi-page-header-module__description__zNQ1m";
-var actions = "uzi-page-header-module__actions__6KfL2";
-var page_header_module_default = {
-	header,
-	content,
-	eyebrow,
-	title,
-	description,
-	actions
+//#region src/components/page-container/page-container.module.css
+var container = "uzi-page-container-module__container__o7e1A";
+var bleed = "uzi-page-container-module__bleed__8rKR8";
+var page_container_module_default = {
+	container,
+	"width-sm": "uzi-page-container-module__width-sm__8Mpln",
+	"width-md": "uzi-page-container-module__width-md__KSmd5",
+	"width-lg": "uzi-page-container-module__width-lg__GpJ-B",
+	"width-xl": "uzi-page-container-module__width-xl__S2q8u",
+	"width-full": "uzi-page-container-module__width-full__eHJdY",
+	bleed
 };
 //#endregion
-exports.actions = actions;
-exports.content = content;
-exports.default = page_header_module_default;
-exports.description = description;
-exports.eyebrow = eyebrow;
-exports.header = header;
-exports.title = title;
+exports.bleed = bleed;
+exports.container = container;
+exports.default = page_container_module_default;
 
 //# sourceMappingURL=index44.cjs.map

package/dist/index44.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index44.cjs","names":[],"sources":["../src/components/page-header/page-header.module.css"],"sourcesContent":[".header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1.5rem;\n}\n\n.content {\n  min-width: 0;\n  display: grid;\n  gap: 0.5rem;\n}\n\n.eyebrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--muted-foreground);\n  font-size: 0.8125rem;\n  font-weight: 600;\n}\n\n.title {\n  margin: 0;\n  color: var(--foreground);\n  font-size: clamp(1.75rem, 3vw, 2.5rem);\n  line-height: 1.12;\n  letter-spacing: -0.025em;\n}\n\n.description {\n  max-width: 48rem;\n  color: var(--muted-foreground);\n  font-size: 0.95rem;\n  line-height: 1.65;\n}\n\n.actions {\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.625rem;\n}\n\n@media (max-width: 40rem) {\n  .header {\n    flex-direction: column;\n  }\n\n  .actions {\n    width: 100%;\n    justify-content: flex-start;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"index44.cjs","names":[],"sources":["../src/components/page-container/page-container.module.css"],"sourcesContent":[".container {\n  width: 100%;\n  margin-inline: auto;\n  padding-inline: var(--uzi-page-gutter, clamp(1rem, 3vw, 2rem));\n}\n\n.width-sm { max-width: 48rem; }\n.width-md { max-width: 64rem; }\n.width-lg { max-width: 75rem; }\n.width-xl { max-width: 90rem; }\n.width-full { max-width: none; }\n\n.bleed {\n  padding-inline: 0;\n}\n"],"mappings":""}

package/dist/index44.js

@@ -1,35 +1,22 @@
 import { cx } from "./index3.js";
-import page_header_module_default from "./index43.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/page-header/PageHeader.tsx
-function PageHeader({ title, description, eyebrow, actions, headingLevel = 1, className, ...rest }) {
-	const Heading = `h${headingLevel}`;
-	return /* @__PURE__ */ jsxs("header", {
-		className: cx(page_header_module_default.header, className),
+import page_container_module_default from "./index43.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/page-container/PageContainer.tsx
+var WIDTH_CLASS = {
+	sm: "width-sm",
+	md: "width-md",
+	lg: "width-lg",
+	xl: "width-xl",
+	full: "width-full"
+};
+function PageContainer({ maxWidth = "lg", bleed = false, className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(page_container_module_default.container, page_container_module_default[WIDTH_CLASS[maxWidth]], bleed && page_container_module_default.bleed, className),
 		...rest,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: page_header_module_default.content,
-			children: [
-				eyebrow != null && /* @__PURE__ */ jsx("div", {
-					className: page_header_module_default.eyebrow,
-					children: eyebrow
-				}),
-				/* @__PURE__ */ jsx(Heading, {
-					className: page_header_module_default.title,
-					children: title
-				}),
-				description != null && /* @__PURE__ */ jsx("div", {
-					className: page_header_module_default.description,
-					children: description
-				})
-			]
-		}), actions != null && /* @__PURE__ */ jsx("div", {
-			className: page_header_module_default.actions,
-			children: actions
-		})]
+		children
 	});
 }
 //#endregion
-export { PageHeader };
+export { PageContainer };
 
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","names":[],"sources":["../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./page-header.module.css\";\n\nexport type PageHeaderHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type PageHeaderProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> & {\n  title: ReactNode;\n  description?: ReactNode;\n  eyebrow?: ReactNode;\n  actions?: ReactNode;\n  headingLevel?: PageHeaderHeadingLevel;\n};\n\nexport function PageHeader({\n  title,\n  description,\n  eyebrow,\n  actions,\n  headingLevel = 1,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = `h${headingLevel}` as `h${PageHeaderHeadingLevel}`;\n\n  return (\n    <header className={cx(styles.header, className)} {...rest}>\n      <div className={styles.content}>\n        {eyebrow != null && <div className={styles.eyebrow}>{eyebrow}</div>}\n        <Heading className={styles.title}>{title}</Heading>\n        {description != null && <div className={styles.description}>{description}</div>}\n      </div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </header>\n  );\n}\n"],"mappings":";;;;AAcA,SAAgB,WAAW,EACzB,OACA,aACA,SACA,SACA,eAAe,GACf,WACA,GAAG,QACe;CAClB,MAAM,UAAU,IAAI;CAEpB,OACE,qBAAC,UAAD;EAAQ,WAAW,GAAG,2BAAO,QAAQ,SAAS;EAAG,GAAI;YAArD,CACE,qBAAC,OAAD;GAAK,WAAW,2BAAO;aAAvB;IACG,WAAW,QAAQ,oBAAC,OAAD;KAAK,WAAW,2BAAO;eAAU;IAAa,CAAA;IAClE,oBAAC,SAAD;KAAS,WAAW,2BAAO;eAAQ;IAAe,CAAA;IACjD,eAAe,QAAQ,oBAAC,OAAD;KAAK,WAAW,2BAAO;eAAc;IAAiB,CAAA;GAC3E;MACJ,WAAW,QAAQ,oBAAC,OAAD;GAAK,WAAW,2BAAO;aAAU;EAAa,CAAA,CAC5D;;AAEZ"}
+{"version":3,"file":"index44.js","names":[],"sources":["../src/components/page-container/PageContainer.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./page-container.module.css\";\n\nexport type PageContainerWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport type PageContainerProps = HTMLAttributes<HTMLDivElement> & {\n  /** Maximum content width. Defaults to `lg`. */\n  maxWidth?: PageContainerWidth;\n  /** Removes the responsive horizontal gutters. */\n  bleed?: boolean;\n};\n\nconst WIDTH_CLASS: Record<PageContainerWidth, string> = {\n  sm: \"width-sm\",\n  md: \"width-md\",\n  lg: \"width-lg\",\n  xl: \"width-xl\",\n  full: \"width-full\",\n};\n\nexport function PageContainer({\n  maxWidth = \"lg\",\n  bleed = false,\n  className,\n  children,\n  ...rest\n}: PageContainerProps) {\n  return (\n    <div\n      className={cx(styles.container, styles[WIDTH_CLASS[maxWidth]], bleed && styles.bleed, className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAaA,IAAM,cAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,SAAgB,cAAc,EAC5B,WAAW,MACX,QAAQ,OACR,WACA,UACA,GAAG,QACkB;CACrB,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,8BAAO,WAAW,8BAAO,YAAY,YAAY,SAAS,8BAAO,OAAO,SAAS;EAC/F,GAAI;EAEH;CACE,CAAA;AAET"}