@tomny-dev/uzi 0.2.5 → 0.2.6

package/dist/index35.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index35.cjs","names":[],"sources":["../src/components/theme-toggle-button/ThemeToggleButton.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { Button } from \"../button/Button\";\nimport { useTheme } from \"../../theme/ThemeProvider\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./theme-toggle-button.module.css\";\n\nexport type ThemeToggleButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  showLabel?: boolean;\n  lightLabel?: string;\n  darkLabel?: string;\n};\n\nfunction MoonIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" width=\"16\" height=\"16\" fill=\"none\">\n      <path\n        d=\"M20 15.2A8.5 8.5 0 0 1 8.8 4 9 9 0 1 0 20 15.2Z\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction SunIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" width=\"16\" height=\"16\" fill=\"none\">\n      <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" strokeWidth=\"1.8\" />\n      <path\n        d=\"M12 2.75v2.5M12 18.75v2.5M21.25 12h-2.5M5.25 12h-2.5M18.54 5.46l-1.77 1.77M7.23 16.77l-1.77 1.77M18.54 18.54l-1.77-1.77M7.23 7.23 5.46 5.46\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport function ThemeToggleButton({\n  showLabel = false,\n  lightLabel = \"Light mode\",\n  darkLabel = \"Dark mode\",\n  className,\n  onClick,\n  ...rest\n}: ThemeToggleButtonProps) {\n  const { resolvedTheme, toggleTheme } = useTheme();\n  const nextThemeLabel = resolvedTheme === \"dark\" ? lightLabel : darkLabel;\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size={showLabel ? \"sm\" : \"icon\"}\n      className={cx(showLabel && styles.withLabel, className)}\n      aria-label={`Switch to ${nextThemeLabel.toLowerCase()}`}\n      title={`Switch to ${nextThemeLabel.toLowerCase()}`}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) toggleTheme();\n      }}\n      {...rest}\n    >\n      {resolvedTheme === \"dark\" ? <SunIcon /> : <MoonIcon />}\n      {showLabel && <span>{nextThemeLabel}</span>}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,SAAS,WAAW;CAClB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,SAAQ;EAAY,eAAY;EAAO,OAAM;EAAK,QAAO;EAAK,MAAK;YACtE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAChB,CAAA;CACE,CAAA;AAET;AAEA,SAAS,UAAU;CACjB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,SAAQ;EAAY,eAAY;EAAO,OAAM;EAAK,QAAO;EAAK,MAAK;YAAxE,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAI,QAAO;GAAe,aAAY;EAAO,CAAA,GACvE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACf,CAAA,CACE;;AAET;AAEA,SAAgB,kBAAkB,EAChC,YAAY,OACZ,aAAa,cACb,YAAY,aACZ,WACA,SACA,GAAG,QACsB;CACzB,MAAM,EAAE,eAAe,gBAAgB,sBAAA,SAAS;CAChD,MAAM,iBAAiB,kBAAkB,SAAS,aAAa;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAA,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAM,YAAY,OAAO;EACzB,WAAW,WAAA,GAAG,aAAa,mCAAA,QAAO,WAAW,SAAS;EACtD,cAAY,aAAa,eAAe,YAAY;EACpD,OAAO,aAAa,eAAe,YAAY;EAC/C,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,kBAAkB,YAAY;EAC3C;EACA,GAAI;YAXN,CAaG,kBAAkB,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,CAAU,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,CAAW,CAAA,GACpD,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,eAAqB,CAAA,CACpC;;AAEZ"}

package/dist/index35.js

@@ -0,0 +1,25 @@
+//#region src/components/top-bar/top-bar.module.css
+var topBar = "uzi-top-bar-module__topBar__MJ-7S";
+var topBarStatic = "uzi-top-bar-module__topBarStatic__JvEwt";
+var topBarInner = "uzi-top-bar-module__topBarInner__PBbi8";
+var topBarStart = "uzi-top-bar-module__topBarStart__DrdN2";
+var topBarBrand = "uzi-top-bar-module__topBarBrand__80VV3";
+var topBarBrandContent = "uzi-top-bar-module__topBarBrandContent__O4Uto";
+var topBarCenter = "uzi-top-bar-module__topBarCenter__Kwxg-";
+var topBarCenterGroup = "uzi-top-bar-module__topBarCenterGroup__7Ishp";
+var topBarActions = "uzi-top-bar-module__topBarActions__mgMd8";
+var top_bar_module_default = {
+	topBar,
+	topBarStatic,
+	topBarInner,
+	topBarStart,
+	topBarBrand,
+	topBarBrandContent,
+	topBarCenter,
+	topBarCenterGroup,
+	topBarActions
+};
+//#endregion
+export { top_bar_module_default as default, topBar, topBarActions, topBarBrand, topBarBrandContent, topBarCenter, topBarCenterGroup, topBarInner, topBarStart, topBarStatic };
+
+//# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index35.js","names":[],"sources":["../src/components/top-bar/top-bar.module.css"],"sourcesContent":[".topBar {\n  position: sticky;\n  top: 0;\n  z-index: 30;\n  border-bottom: 1px solid var(--ts-topbar-border, var(--border));\n  background: var(--ts-topbar-bg, color-mix(in srgb, var(--background) 92%, transparent));\n  box-shadow: var(--ts-topbar-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));\n  backdrop-filter: blur(12px);\n}\n\n.topBarStatic {\n  position: relative;\n}\n\n.topBarInner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  min-height: 4.25rem;\n  padding: env(safe-area-inset-top, 0) 1rem 0 1rem;\n}\n\n.topBarStart {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.topBarBrand {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  min-width: 0;\n  color: var(--ts-topbar-brand-fg, var(--foreground));\n  text-decoration: none;\n}\n\n.topBarBrandContent {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.topBarCenter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.topBarCenterGroup {\n  display: inline-flex;\n  align-items: center;\n  gap: 1rem;\n  min-width: 0;\n}\n\n.topBarActions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n@media (max-width: 768px) {\n  .topBarInner {\n    min-height: 4rem;\n    gap: 0.75rem;\n    padding-left: max(0.75rem, env(safe-area-inset-left));\n    padding-right: max(0.75rem, env(safe-area-inset-right));\n  }\n\n  .topBarStart {\n    gap: 0.75rem;\n  }\n\n  .topBarActions {\n    gap: 0.5rem;\n  }\n}\n"],"mappings":""}

package/dist/index36.cjs

@@ -0,0 +1,34 @@
+//#region src/components/top-bar/top-bar.module.css
+var topBar = "uzi-top-bar-module__topBar__MJ-7S";
+var topBarStatic = "uzi-top-bar-module__topBarStatic__JvEwt";
+var topBarInner = "uzi-top-bar-module__topBarInner__PBbi8";
+var topBarStart = "uzi-top-bar-module__topBarStart__DrdN2";
+var topBarBrand = "uzi-top-bar-module__topBarBrand__80VV3";
+var topBarBrandContent = "uzi-top-bar-module__topBarBrandContent__O4Uto";
+var topBarCenter = "uzi-top-bar-module__topBarCenter__Kwxg-";
+var topBarCenterGroup = "uzi-top-bar-module__topBarCenterGroup__7Ishp";
+var topBarActions = "uzi-top-bar-module__topBarActions__mgMd8";
+var top_bar_module_default = {
+	topBar,
+	topBarStatic,
+	topBarInner,
+	topBarStart,
+	topBarBrand,
+	topBarBrandContent,
+	topBarCenter,
+	topBarCenterGroup,
+	topBarActions
+};
+//#endregion
+exports.default = top_bar_module_default;
+exports.topBar = topBar;
+exports.topBarActions = topBarActions;
+exports.topBarBrand = topBarBrand;
+exports.topBarBrandContent = topBarBrandContent;
+exports.topBarCenter = topBarCenter;
+exports.topBarCenterGroup = topBarCenterGroup;
+exports.topBarInner = topBarInner;
+exports.topBarStart = topBarStart;
+exports.topBarStatic = topBarStatic;
+
+//# sourceMappingURL=index36.cjs.map

package/dist/index36.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index36.cjs","names":[],"sources":["../src/components/top-bar/top-bar.module.css"],"sourcesContent":[".topBar {\n  position: sticky;\n  top: 0;\n  z-index: 30;\n  border-bottom: 1px solid var(--ts-topbar-border, var(--border));\n  background: var(--ts-topbar-bg, color-mix(in srgb, var(--background) 92%, transparent));\n  box-shadow: var(--ts-topbar-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));\n  backdrop-filter: blur(12px);\n}\n\n.topBarStatic {\n  position: relative;\n}\n\n.topBarInner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  min-height: 4.25rem;\n  padding: env(safe-area-inset-top, 0) 1rem 0 1rem;\n}\n\n.topBarStart {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.topBarBrand {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  min-width: 0;\n  color: var(--ts-topbar-brand-fg, var(--foreground));\n  text-decoration: none;\n}\n\n.topBarBrandContent {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.topBarCenter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.topBarCenterGroup {\n  display: inline-flex;\n  align-items: center;\n  gap: 1rem;\n  min-width: 0;\n}\n\n.topBarActions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n@media (max-width: 768px) {\n  .topBarInner {\n    min-height: 4rem;\n    gap: 0.75rem;\n    padding-left: max(0.75rem, env(safe-area-inset-left));\n    padding-right: max(0.75rem, env(safe-area-inset-right));\n  }\n\n  .topBarStart {\n    gap: 0.75rem;\n  }\n\n  .topBarActions {\n    gap: 0.5rem;\n  }\n}\n"],"mappings":""}

package/dist/index36.js

@@ -0,0 +1,55 @@
+"use client";
+import { cx } from "./index3.js";
+import { ThemeToggleButton } from "./index34.js";
+import top_bar_module_default from "./index35.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/top-bar/TopBar.tsx
+function TopBar({ leading, brand, brandHref, brandingLocation = "left", start, center, actions, showThemeToggle = false, themeToggleProps, className, innerClassName, isSticky, sticky = true, children, ...rest }) {
+	const shouldStick = isSticky ?? sticky;
+	const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ jsx("a", {
+		href: brandHref,
+		className: top_bar_module_default.topBarBrand,
+		children: /* @__PURE__ */ jsx("span", {
+			className: top_bar_module_default.topBarBrandContent,
+			children: brand
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: top_bar_module_default.topBarBrand,
+		children: /* @__PURE__ */ jsx("span", {
+			className: top_bar_module_default.topBarBrandContent,
+			children: brand
+		})
+	});
+	return /* @__PURE__ */ jsx("header", {
+		className: cx(top_bar_module_default.topBar, !shouldStick && top_bar_module_default.topBarStatic, className),
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx(top_bar_module_default.topBarInner, innerClassName),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: top_bar_module_default.topBarStart,
+					children: [
+						leading,
+						brandingLocation === "left" && brandNode,
+						start
+					]
+				}),
+				brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ jsx("div", {
+					className: top_bar_module_default.topBarCenter,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: top_bar_module_default.topBarCenterGroup,
+						children: [brandingLocation === "center" && brandNode, center ?? children]
+					})
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: top_bar_module_default.topBarActions,
+					children: [showThemeToggle && /* @__PURE__ */ jsx(ThemeToggleButton, { ...themeToggleProps }), actions]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { TopBar };
+
+//# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index36.js","names":[],"sources":["../src/components/top-bar/TopBar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport {\n  ThemeToggleButton,\n  type ThemeToggleButtonProps,\n} from \"../theme-toggle-button/ThemeToggleButton\";\nimport styles from \"./top-bar.module.css\";\n\nexport type TopBarProps = HTMLAttributes<HTMLElement> & {\n  leading?: ReactNode;\n  brand?: ReactNode;\n  brandHref?: string;\n  brandingLocation?: \"left\" | \"center\";\n  /** Content rendered after the brand in the left region (e.g. breadcrumbs, search). */\n  start?: ReactNode;\n  /** Content rendered in the center region. */\n  center?: ReactNode;\n  actions?: ReactNode;\n  showThemeToggle?: boolean;\n  themeToggleProps?: ThemeToggleButtonProps;\n  innerClassName?: string;\n  isSticky?: boolean;\n  sticky?: boolean;\n};\n\nexport function TopBar({\n  leading,\n  brand,\n  brandHref,\n  brandingLocation = \"left\",\n  start,\n  center,\n  actions,\n  showThemeToggle = false,\n  themeToggleProps,\n  className,\n  innerClassName,\n  isSticky,\n  sticky = true,\n  children,\n  ...rest\n}: TopBarProps) {\n  const shouldStick = isSticky ?? sticky;\n  const brandNode = !brand ? null : brandHref ? (\n    <a href={brandHref} className={styles.topBarBrand}>\n      <span className={styles.topBarBrandContent}>{brand}</span>\n    </a>\n  ) : (\n    <div className={styles.topBarBrand}>\n      <span className={styles.topBarBrandContent}>{brand}</span>\n    </div>\n  );\n\n  return (\n    <header\n      className={cx(styles.topBar, !shouldStick && styles.topBarStatic, className)}\n      {...rest}\n    >\n      <div className={cx(styles.topBarInner, innerClassName)}>\n        <div className={styles.topBarStart}>\n          {leading}\n          {brandingLocation === \"left\" && brandNode}\n          {start}\n        </div>\n        {(brandNode && brandingLocation === \"center\") || center || children ? (\n          <div className={styles.topBarCenter}>\n            <div className={styles.topBarCenterGroup}>\n              {brandingLocation === \"center\" && brandNode}\n              {center ?? children}\n            </div>\n          </div>\n        ) : null}\n        <div className={styles.topBarActions}>\n          {showThemeToggle && <ThemeToggleButton {...themeToggleProps} />}\n          {actions}\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgB,OAAO,EACrB,SACA,OACA,WACA,mBAAmB,QACnB,OACA,QACA,SACA,kBAAkB,OAClB,kBACA,WACA,gBACA,UACA,SAAS,MACT,UACA,GAAG,QACW;CACd,MAAM,cAAc,YAAY;CAChC,MAAM,YAAY,CAAC,QAAQ,OAAO,YAChC,oBAAC,KAAD;EAAG,MAAM;EAAW,WAAW,uBAAO;YACpC,oBAAC,QAAD;GAAM,WAAW,uBAAO;aAAqB;EAAY,CAAA;CACxD,CAAA,IAEH,oBAAC,OAAD;EAAK,WAAW,uBAAO;YACrB,oBAAC,QAAD;GAAM,WAAW,uBAAO;aAAqB;EAAY,CAAA;CACtD,CAAA;CAGP,OACE,oBAAC,UAAD;EACE,WAAW,GAAG,uBAAO,QAAQ,CAAC,eAAe,uBAAO,cAAc,SAAS;EAC3E,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAW,GAAG,uBAAO,aAAa,cAAc;aAArD;IACE,qBAAC,OAAD;KAAK,WAAW,uBAAO;eAAvB;MACG;MACA,qBAAqB,UAAU;MAC/B;KACE;;IACH,aAAa,qBAAqB,YAAa,UAAU,WACzD,oBAAC,OAAD;KAAK,WAAW,uBAAO;eACrB,qBAAC,OAAD;MAAK,WAAW,uBAAO;gBAAvB,CACG,qBAAqB,YAAY,WACjC,UAAU,QACR;;IACF,CAAA,IACH;IACJ,qBAAC,OAAD;KAAK,WAAW,uBAAO;eAAvB,CACG,mBAAmB,oBAAC,mBAAD,EAAmB,GAAI,iBAAmB,CAAA,GAC7D,OACE;;GACF;;CACC,CAAA;AAEZ"}

package/dist/index37.cjs

@@ -0,0 +1,55 @@
+"use client";
+const require_cx = require("./index4.cjs");
+const require_ThemeToggleButton = require("./index35.cjs");
+const require_top_bar_module = require("./index36.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/top-bar/TopBar.tsx
+function TopBar({ leading, brand, brandHref, brandingLocation = "left", start, center, actions, showThemeToggle = false, themeToggleProps, className, innerClassName, isSticky, sticky = true, children, ...rest }) {
+	const shouldStick = isSticky ?? sticky;
+	const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: brandHref,
+		className: require_top_bar_module.default.topBarBrand,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_top_bar_module.default.topBarBrandContent,
+			children: brand
+		})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_top_bar_module.default.topBarBrand,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_top_bar_module.default.topBarBrandContent,
+			children: brand
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+		className: require_cx.cx(require_top_bar_module.default.topBar, !shouldStick && require_top_bar_module.default.topBarStatic, className),
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_cx.cx(require_top_bar_module.default.topBarInner, innerClassName),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_top_bar_module.default.topBarStart,
+					children: [
+						leading,
+						brandingLocation === "left" && brandNode,
+						start
+					]
+				}),
+				brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_top_bar_module.default.topBarCenter,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_top_bar_module.default.topBarCenterGroup,
+						children: [brandingLocation === "center" && brandNode, center ?? children]
+					})
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_top_bar_module.default.topBarActions,
+					children: [showThemeToggle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThemeToggleButton.ThemeToggleButton, { ...themeToggleProps }), actions]
+				})
+			]
+		})
+	});
+}
+//#endregion
+exports.TopBar = TopBar;
+
+//# sourceMappingURL=index37.cjs.map

package/dist/index37.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index37.cjs","names":[],"sources":["../src/components/top-bar/TopBar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport {\n  ThemeToggleButton,\n  type ThemeToggleButtonProps,\n} from \"../theme-toggle-button/ThemeToggleButton\";\nimport styles from \"./top-bar.module.css\";\n\nexport type TopBarProps = HTMLAttributes<HTMLElement> & {\n  leading?: ReactNode;\n  brand?: ReactNode;\n  brandHref?: string;\n  brandingLocation?: \"left\" | \"center\";\n  /** Content rendered after the brand in the left region (e.g. breadcrumbs, search). */\n  start?: ReactNode;\n  /** Content rendered in the center region. */\n  center?: ReactNode;\n  actions?: ReactNode;\n  showThemeToggle?: boolean;\n  themeToggleProps?: ThemeToggleButtonProps;\n  innerClassName?: string;\n  isSticky?: boolean;\n  sticky?: boolean;\n};\n\nexport function TopBar({\n  leading,\n  brand,\n  brandHref,\n  brandingLocation = \"left\",\n  start,\n  center,\n  actions,\n  showThemeToggle = false,\n  themeToggleProps,\n  className,\n  innerClassName,\n  isSticky,\n  sticky = true,\n  children,\n  ...rest\n}: TopBarProps) {\n  const shouldStick = isSticky ?? sticky;\n  const brandNode = !brand ? null : brandHref ? (\n    <a href={brandHref} className={styles.topBarBrand}>\n      <span className={styles.topBarBrandContent}>{brand}</span>\n    </a>\n  ) : (\n    <div className={styles.topBarBrand}>\n      <span className={styles.topBarBrandContent}>{brand}</span>\n    </div>\n  );\n\n  return (\n    <header\n      className={cx(styles.topBar, !shouldStick && styles.topBarStatic, className)}\n      {...rest}\n    >\n      <div className={cx(styles.topBarInner, innerClassName)}>\n        <div className={styles.topBarStart}>\n          {leading}\n          {brandingLocation === \"left\" && brandNode}\n          {start}\n        </div>\n        {(brandNode && brandingLocation === \"center\") || center || children ? (\n          <div className={styles.topBarCenter}>\n            <div className={styles.topBarCenterGroup}>\n              {brandingLocation === \"center\" && brandNode}\n              {center ?? children}\n            </div>\n          </div>\n        ) : null}\n        <div className={styles.topBarActions}>\n          {showThemeToggle && <ThemeToggleButton {...themeToggleProps} />}\n          {actions}\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgB,OAAO,EACrB,SACA,OACA,WACA,mBAAmB,QACnB,OACA,QACA,SACA,kBAAkB,OAClB,kBACA,WACA,gBACA,UACA,SAAS,MACT,UACA,GAAG,QACW;CACd,MAAM,cAAc,YAAY;CAChC,MAAM,YAAY,CAAC,QAAQ,OAAO,YAChC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EAAG,MAAM;EAAW,WAAW,uBAAA,QAAO;YACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,uBAAA,QAAO;aAAqB;EAAY,CAAA;CACxD,CAAA,IAEH,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,uBAAA,QAAO;YACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,uBAAA,QAAO;aAAqB;EAAY,CAAA;CACtD,CAAA;CAGP,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,WAAW,WAAA,GAAG,uBAAA,QAAO,QAAQ,CAAC,eAAe,uBAAA,QAAO,cAAc,SAAS;EAC3E,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW,WAAA,GAAG,uBAAA,QAAO,aAAa,cAAc;aAArD;IACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,uBAAA,QAAO;eAAvB;MACG;MACA,qBAAqB,UAAU;MAC/B;KACE;;IACH,aAAa,qBAAqB,YAAa,UAAU,WACzD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAW,uBAAA,QAAO;eACrB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAW,uBAAA,QAAO;gBAAvB,CACG,qBAAqB,YAAY,WACjC,UAAU,QACR;;IACF,CAAA,IACH;IACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,uBAAA,QAAO;eAAvB,CACG,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,0BAAA,mBAAD,EAAmB,GAAI,iBAAmB,CAAA,GAC7D,OACE;;GACF;;CACC,CAAA;AAEZ"}

package/dist/index37.js

@@ -0,0 +1,35 @@
+//#region src/components/app-shell/app-shell.module.css
+var appShell = "uzi-app-shell-module__appShell__S0cVI";
+var appShellAnimated = "uzi-app-shell-module__appShellAnimated__-CRIl";
+var appShellOpen = "uzi-app-shell-module__appShellOpen__1rZUl";
+var appShellCollapsed = "uzi-app-shell-module__appShellCollapsed__fSasN";
+var appShellTopbar = "uzi-app-shell-module__appShellTopbar__rgXsW";
+var appShellTopbarLeft = "uzi-app-shell-module__appShellTopbarLeft__-EVuB";
+var appShellTopbarStart = "uzi-app-shell-module__appShellTopbarStart__XXQpq";
+var appShellTopbarRight = "uzi-app-shell-module__appShellTopbarRight__l1G57";
+var appShellBrand = "uzi-app-shell-module__appShellBrand__TXwyN";
+var appShellHamburger = "uzi-app-shell-module__appShellHamburger__BciFA";
+var appShellSidebar = "uzi-app-shell-module__appShellSidebar__oY7uj";
+var appShellMain = "uzi-app-shell-module__appShellMain__eHP2r";
+var appShellBackdrop = "uzi-app-shell-module__appShellBackdrop__y31xs";
+var appShellSidebarOpen = "uzi-app-shell-module__appShellSidebarOpen__Z5AIo";
+var app_shell_module_default = {
+	appShell,
+	appShellAnimated,
+	appShellOpen,
+	appShellCollapsed,
+	appShellTopbar,
+	appShellTopbarLeft,
+	appShellTopbarStart,
+	appShellTopbarRight,
+	appShellBrand,
+	appShellHamburger,
+	appShellSidebar,
+	appShellMain,
+	appShellBackdrop,
+	appShellSidebarOpen
+};
+//#endregion
+export { appShell, appShellAnimated, appShellBackdrop, appShellBrand, appShellCollapsed, appShellHamburger, appShellMain, appShellOpen, appShellSidebar, appShellSidebarOpen, appShellTopbar, appShellTopbarLeft, appShellTopbarRight, appShellTopbarStart, app_shell_module_default as default };
+
+//# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index37.js","names":[],"sources":["../src/components/app-shell/app-shell.module.css"],"sourcesContent":[".appShell {\n  display: grid;\n  grid-template-rows: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top)) 1fr;\n  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\n  height: 100vh;\n  height: 100dvh;\n}\n\n.appShellAnimated {\n  transition: grid-template-columns 200ms ease;\n}\n\n.appShell.appShellOpen {\n  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\n}\n\n.appShell.appShellCollapsed {\n  grid-template-columns: 0 1fr;\n}\n\n.appShellTopbar {\n  --ts-topbar-bg: var(--surface-topbar, color-mix(in srgb, var(--background) 92%, transparent));\n  --ts-topbar-border: var(--border);\n  --ts-topbar-brand-fg: var(--foreground);\n  grid-column: 1 / -1;\n  min-height: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top));\n  padding-left: 0;\n  padding-right: 0;\n  box-shadow: none;\n}\n\n.appShellTopbarLeft {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.appShellTopbarStart {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.appShellTopbarRight {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-shrink: 0;\n}\n\n.appShellTopbarRight > * {\n  min-width: 0;\n}\n\n.appShellBrand {\n  font-size: 26px;\n  color: var(--foreground);\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.appShellHamburger {\n  background: transparent;\n  border: none;\n  padding: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground);\n  cursor: pointer;\n  transition: background 120ms ease;\n}\n\n.appShellHamburger:hover {\n  background: var(--accent);\n}\n\n.appShellHamburger:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.appShellHamburger svg {\n  width: 28px;\n  height: 28px;\n}\n\n.appShellSidebar {\n  border-right: 1px solid var(--border);\n  background: var(--panel);\n  padding: 24px;\n  overflow-y: auto;\n}\n\n.appShellAnimated .appShellSidebar {\n  transition: transform 200ms ease, opacity 200ms ease;\n}\n\n.appShell.appShellCollapsed .appShellSidebar {\n  transform: translateX(-110%);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.appShellMain {\n  overflow-y: auto;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.appShellBackdrop {\n  display: none;\n}\n\n@media (max-width: 960px) {\n  .appShellBackdrop {\n    display: block;\n    position: fixed;\n    inset: 0;\n    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 14;\n  }\n\n  .appShell {\n    --app-shell-topbar-height: 56px;\n    grid-template-columns: 1fr;\n    grid-template-rows: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top)) 1fr;\n  }\n\n  .appShell.appShellOpen,\n  .appShell.appShellCollapsed {\n    grid-template-columns: 1fr;\n  }\n\n  .appShellSidebar {\n    display: block;\n    position: fixed;\n    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\n    left: 0;\n    bottom: 0;\n    width: var(--app-shell-sidebar-width, 240px);\n    max-width: 80vw;\n    background: var(--panel);\n    padding: 16px 12px;\n    transform: translateX(-105%);\n    z-index: 15;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\n  }\n\n  .appShellSidebar.appShellSidebarOpen {\n    transform: translateX(0);\n  }\n\n  .appShellTopbar {\n    padding-left: max(12px, env(safe-area-inset-left));\n    padding-right: max(12px, env(safe-area-inset-right));\n    gap: 10px;\n  }\n\n  .appShellTopbarLeft {\n    gap: 10px;\n    flex: 1;\n  }\n\n  .appShellTopbarStart {\n    min-width: 0;\n  }\n\n  .appShellTopbarRight {\n    gap: 6px;\n  }\n\n  .appShellBrand {\n    font-size: 24px;\n    max-width: 50vw;\n  }\n\n  .appShellHamburger {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n  }\n\n  .appShellHamburger svg {\n    width: 24px;\n    height: 24px;\n  }\n}\n\n@media (max-width: 640px) {\n  .appShellTopbar {\n    gap: 8px;\n  }\n\n  .appShellBrand {\n    font-size: 22px;\n    max-width: 34vw;\n  }\n\n  .appShellTopbarRight {\n    max-width: 44vw;\n  }\n}\n\n@media (max-width: 480px) {\n  .appShellBrand {\n    font-size: 20px;\n    max-width: 30vw;\n  }\n}\n"],"mappings":""}

package/dist/index38.cjs

@@ -0,0 +1,49 @@
+//#region src/components/app-shell/app-shell.module.css
+var appShell = "uzi-app-shell-module__appShell__S0cVI";
+var appShellAnimated = "uzi-app-shell-module__appShellAnimated__-CRIl";
+var appShellOpen = "uzi-app-shell-module__appShellOpen__1rZUl";
+var appShellCollapsed = "uzi-app-shell-module__appShellCollapsed__fSasN";
+var appShellTopbar = "uzi-app-shell-module__appShellTopbar__rgXsW";
+var appShellTopbarLeft = "uzi-app-shell-module__appShellTopbarLeft__-EVuB";
+var appShellTopbarStart = "uzi-app-shell-module__appShellTopbarStart__XXQpq";
+var appShellTopbarRight = "uzi-app-shell-module__appShellTopbarRight__l1G57";
+var appShellBrand = "uzi-app-shell-module__appShellBrand__TXwyN";
+var appShellHamburger = "uzi-app-shell-module__appShellHamburger__BciFA";
+var appShellSidebar = "uzi-app-shell-module__appShellSidebar__oY7uj";
+var appShellMain = "uzi-app-shell-module__appShellMain__eHP2r";
+var appShellBackdrop = "uzi-app-shell-module__appShellBackdrop__y31xs";
+var appShellSidebarOpen = "uzi-app-shell-module__appShellSidebarOpen__Z5AIo";
+var app_shell_module_default = {
+	appShell,
+	appShellAnimated,
+	appShellOpen,
+	appShellCollapsed,
+	appShellTopbar,
+	appShellTopbarLeft,
+	appShellTopbarStart,
+	appShellTopbarRight,
+	appShellBrand,
+	appShellHamburger,
+	appShellSidebar,
+	appShellMain,
+	appShellBackdrop,
+	appShellSidebarOpen
+};
+//#endregion
+exports.appShell = appShell;
+exports.appShellAnimated = appShellAnimated;
+exports.appShellBackdrop = appShellBackdrop;
+exports.appShellBrand = appShellBrand;
+exports.appShellCollapsed = appShellCollapsed;
+exports.appShellHamburger = appShellHamburger;
+exports.appShellMain = appShellMain;
+exports.appShellOpen = appShellOpen;
+exports.appShellSidebar = appShellSidebar;
+exports.appShellSidebarOpen = appShellSidebarOpen;
+exports.appShellTopbar = appShellTopbar;
+exports.appShellTopbarLeft = appShellTopbarLeft;
+exports.appShellTopbarRight = appShellTopbarRight;
+exports.appShellTopbarStart = appShellTopbarStart;
+exports.default = app_shell_module_default;
+
+//# sourceMappingURL=index38.cjs.map

package/dist/index38.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index38.cjs","names":[],"sources":["../src/components/app-shell/app-shell.module.css"],"sourcesContent":[".appShell {\n  display: grid;\n  grid-template-rows: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top)) 1fr;\n  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\n  height: 100vh;\n  height: 100dvh;\n}\n\n.appShellAnimated {\n  transition: grid-template-columns 200ms ease;\n}\n\n.appShell.appShellOpen {\n  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\n}\n\n.appShell.appShellCollapsed {\n  grid-template-columns: 0 1fr;\n}\n\n.appShellTopbar {\n  --ts-topbar-bg: var(--surface-topbar, color-mix(in srgb, var(--background) 92%, transparent));\n  --ts-topbar-border: var(--border);\n  --ts-topbar-brand-fg: var(--foreground);\n  grid-column: 1 / -1;\n  min-height: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top));\n  padding-left: 0;\n  padding-right: 0;\n  box-shadow: none;\n}\n\n.appShellTopbarLeft {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.appShellTopbarStart {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.appShellTopbarRight {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  flex-shrink: 0;\n}\n\n.appShellTopbarRight > * {\n  min-width: 0;\n}\n\n.appShellBrand {\n  font-size: 26px;\n  color: var(--foreground);\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.appShellHamburger {\n  background: transparent;\n  border: none;\n  padding: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground);\n  cursor: pointer;\n  transition: background 120ms ease;\n}\n\n.appShellHamburger:hover {\n  background: var(--accent);\n}\n\n.appShellHamburger:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.appShellHamburger svg {\n  width: 28px;\n  height: 28px;\n}\n\n.appShellSidebar {\n  border-right: 1px solid var(--border);\n  background: var(--panel);\n  padding: 24px;\n  overflow-y: auto;\n}\n\n.appShellAnimated .appShellSidebar {\n  transition: transform 200ms ease, opacity 200ms ease;\n}\n\n.appShell.appShellCollapsed .appShellSidebar {\n  transform: translateX(-110%);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.appShellMain {\n  overflow-y: auto;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.appShellBackdrop {\n  display: none;\n}\n\n@media (max-width: 960px) {\n  .appShellBackdrop {\n    display: block;\n    position: fixed;\n    inset: 0;\n    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 14;\n  }\n\n  .appShell {\n    --app-shell-topbar-height: 56px;\n    grid-template-columns: 1fr;\n    grid-template-rows: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top)) 1fr;\n  }\n\n  .appShell.appShellOpen,\n  .appShell.appShellCollapsed {\n    grid-template-columns: 1fr;\n  }\n\n  .appShellSidebar {\n    display: block;\n    position: fixed;\n    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\n    left: 0;\n    bottom: 0;\n    width: var(--app-shell-sidebar-width, 240px);\n    max-width: 80vw;\n    background: var(--panel);\n    padding: 16px 12px;\n    transform: translateX(-105%);\n    z-index: 15;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\n  }\n\n  .appShellSidebar.appShellSidebarOpen {\n    transform: translateX(0);\n  }\n\n  .appShellTopbar {\n    padding-left: max(12px, env(safe-area-inset-left));\n    padding-right: max(12px, env(safe-area-inset-right));\n    gap: 10px;\n  }\n\n  .appShellTopbarLeft {\n    gap: 10px;\n    flex: 1;\n  }\n\n  .appShellTopbarStart {\n    min-width: 0;\n  }\n\n  .appShellTopbarRight {\n    gap: 6px;\n  }\n\n  .appShellBrand {\n    font-size: 24px;\n    max-width: 50vw;\n  }\n\n  .appShellHamburger {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n  }\n\n  .appShellHamburger svg {\n    width: 24px;\n    height: 24px;\n  }\n}\n\n@media (max-width: 640px) {\n  .appShellTopbar {\n    gap: 8px;\n  }\n\n  .appShellBrand {\n    font-size: 22px;\n    max-width: 34vw;\n  }\n\n  .appShellTopbarRight {\n    max-width: 44vw;\n  }\n}\n\n@media (max-width: 480px) {\n  .appShellBrand {\n    font-size: 20px;\n    max-width: 30vw;\n  }\n}\n"],"mappings":""}

package/dist/index38.js

@@ -0,0 +1,150 @@
+"use client";
+import { cx } from "./index3.js";
+import { TopBar } from "./index36.js";
+import app_shell_module_default from "./index37.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "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] = useState(false);
+	const [sidebarOpen, setSidebarOpen] = useState(false);
+	const [transitionsReady, setTransitionsReady] = useState(false);
+	const prevIsDesktopRef = useRef(false);
+	const closeKeyRef = useRef(closeSidebarOnChangeKey);
+	const sidebarRef = useRef(null);
+	const hamburgerRef = useRef(null);
+	const mainRef = useRef(null);
+	const sidebarId = useId();
+	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);
+		};
+	}, []);
+	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]);
+	useEffect(() => {
+		if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) setSidebarOpen(false);
+		closeKeyRef.current = closeSidebarOnChangeKey;
+	}, [closeSidebarOnChangeKey, isDesktop]);
+	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 = cx(app_shell_module_default.appShell, transitionsReady && app_shell_module_default.appShellAnimated, sidebarOpen ? app_shell_module_default.appShellOpen : app_shell_module_default.appShellCollapsed, className);
+	const sidebarClasses = cx(app_shell_module_default.appShellSidebar, sidebarOpen && app_shell_module_default.appShellSidebarOpen, sidebarClassName);
+	return /* @__PURE__ */ jsxs("div", {
+		className: shellClasses,
+		style: shellStyle,
+		"data-app-shell": true,
+		"data-desktop": isDesktop ? "true" : "false",
+		"data-sidebar-open": sidebarOpen ? "true" : "false",
+		children: [
+			/* @__PURE__ */ jsx(TopBar, {
+				className: cx(app_shell_module_default.appShellTopbar, topbarClassName),
+				leading: /* @__PURE__ */ jsx("button", {
+					ref: hamburgerRef,
+					type: "button",
+					className: app_shell_module_default.appShellHamburger,
+					onClick: toggleSidebar,
+					"aria-label": hamburgerLabel,
+					"aria-expanded": sidebarOpen,
+					"aria-controls": sidebarId,
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ 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__ */ jsx("div", {
+				className: app_shell_module_default.appShellBackdrop,
+				onClick: () => setSidebarOpen(false),
+				onTouchStart: () => setSidebarOpen(false),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("aside", {
+				ref: sidebarRef,
+				id: sidebarId,
+				className: sidebarClasses,
+				"aria-label": "Sidebar navigation",
+				children: sidebar
+			}),
+			/* @__PURE__ */ jsx("main", {
+				ref: mainRef,
+				className: cx(app_shell_module_default.appShellMain, mainClassName),
+				children
+			})
+		]
+	});
+}
+//#endregion
+export { AppShell };
+
+//# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index38.js","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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"}