@tomny-dev/uzi 0.5.0 → 0.6.0-pr.60.173.1.802e4f7

package/dist/index35.cjs

@@ -1,66 +1,115 @@
 "use client";
-const require_cx = require("./index4.cjs");
-const require_Button = require("./index6.cjs");
-const require_ThemeProvider = require("./index33.cjs");
-const require_theme_toggle_button_module = require("./index34.cjs");
+const require_ToastContext = require("./index20.cjs");
+const require_constants = require("./index34.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/theme-toggle-button/ThemeToggleButton.tsx
-function MoonIcon() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		viewBox: "0 0 24 24",
-		"aria-hidden": "true",
-		width: "16",
-		height: "16",
-		fill: "none",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: "M20 15.2A8.5 8.5 0 0 1 8.8 4 9 9 0 1 0 20 15.2Z",
-			stroke: "currentColor",
-			strokeWidth: "1.8",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})
-	});
+//#region src/theme/ThemeProvider.tsx
+var THEME_STORAGE_KEY = require_constants.THEME_STORAGE_KEY;
+var ACCENT_STORAGE_KEY = require_constants.ACCENT_STORAGE_KEY;
+var THEME_ATTRIBUTE = "data-uzi-theme";
+var ACCENT_ATTRIBUTE = "data-uzi-accent";
+var ThemeContext = (0, react.createContext)(void 0);
+function isTheme(value) {
+	return require_constants.UZI_THEMES.includes(value);
 }
-function SunIcon() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		viewBox: "0 0 24 24",
-		"aria-hidden": "true",
-		width: "16",
-		height: "16",
-		fill: "none",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: "12",
-			cy: "12",
-			r: "4",
-			stroke: "currentColor",
-			strokeWidth: "1.8"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			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",
-			stroke: "currentColor",
-			strokeWidth: "1.8",
-			strokeLinecap: "round"
-		})]
-	});
+function isAccent(value) {
+	return require_constants.UZI_ACCENTS.includes(value);
 }
-function ThemeToggleButton({ showLabel = false, lightLabel = "Light mode", darkLabel = "Dark mode", className, onClick, ...rest }) {
-	const { resolvedTheme, toggleTheme } = require_ThemeProvider.useTheme();
-	const nextThemeLabel = resolvedTheme === "dark" ? lightLabel : darkLabel;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
-		type: "button",
-		variant: "ghost",
-		size: showLabel ? "sm" : "icon",
-		className: require_cx.cx(showLabel && require_theme_toggle_button_module.default.withLabel, className),
-		"aria-label": `Switch to ${nextThemeLabel.toLowerCase()}`,
-		title: `Switch to ${nextThemeLabel.toLowerCase()}`,
-		onClick: (event) => {
-			onClick?.(event);
-			if (!event.defaultPrevented) toggleTheme();
-		},
-		...rest,
-		children: [resolvedTheme === "dark" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoonIcon, {}), showLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: nextThemeLabel })]
+function getSystemTheme() {
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeProvider({ children, theme, defaultTheme = "system", accent, defaultAccent = "blue", onThemeChange, onAccentChange, storageKey = THEME_STORAGE_KEY, accentStorageKey = ACCENT_STORAGE_KEY, disableStorage = false, toastConfig }) {
+	const [internalTheme, setInternalTheme] = (0, react.useState)(defaultTheme);
+	const [internalAccent, setInternalAccent] = (0, react.useState)(defaultAccent);
+	const [systemTheme, setSystemTheme] = (0, react.useState)("light");
+	(0, react.useEffect)(() => {
+		setSystemTheme(getSystemTheme());
+		if (!disableStorage) {
+			const storedTheme = window.localStorage.getItem(storageKey);
+			if (isTheme(storedTheme)) setInternalTheme(storedTheme);
+			const storedAccent = window.localStorage.getItem(accentStorageKey);
+			if (isAccent(storedAccent)) setInternalAccent(storedAccent);
+		}
+	}, [
+		disableStorage,
+		storageKey,
+		accentStorageKey
+	]);
+	const isThemeControlled = theme !== void 0;
+	const isAccentControlled = accent !== void 0;
+	const currentTheme = isThemeControlled ? theme : internalTheme;
+	const currentAccent = isAccentControlled ? accent : internalAccent;
+	const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined") return;
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
+		handleChange();
+		mediaQuery.addEventListener("change", handleChange);
+		return () => mediaQuery.removeEventListener("change", handleChange);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
+		root.setAttribute(ACCENT_ATTRIBUTE, currentAccent);
+		root.style.colorScheme = resolvedTheme;
+		root.classList.toggle("dark", resolvedTheme === "dark");
+	}, [currentAccent, resolvedTheme]);
+	const setTheme = (0, react.useCallback)((nextTheme) => {
+		if (!isThemeControlled) setInternalTheme(nextTheme);
+		if (!disableStorage && typeof window !== "undefined") window.localStorage.setItem(storageKey, nextTheme);
+		onThemeChange?.(nextTheme);
+	}, [
+		disableStorage,
+		isThemeControlled,
+		onThemeChange,
+		storageKey
+	]);
+	const setAccent = (0, react.useCallback)((nextAccent) => {
+		if (!isAccentControlled) setInternalAccent(nextAccent);
+		if (!disableStorage && typeof window !== "undefined") window.localStorage.setItem(accentStorageKey, nextAccent);
+		onAccentChange?.(nextAccent);
+	}, [
+		accentStorageKey,
+		disableStorage,
+		isAccentControlled,
+		onAccentChange
+	]);
+	const toggleTheme = (0, react.useCallback)(() => {
+		setTheme(resolvedTheme === "dark" ? "light" : "dark");
+	}, [resolvedTheme, setTheme]);
+	const value = (0, react.useMemo)(() => ({
+		theme: currentTheme,
+		resolvedTheme,
+		accent: currentAccent,
+		setTheme,
+		setAccent,
+		toggleTheme
+	}), [
+		currentAccent,
+		currentTheme,
+		resolvedTheme,
+		setAccent,
+		setTheme,
+		toggleTheme
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToastContext.ToastProvider, {
+			config: toastConfig,
+			children
+		})
 	});
 }
+function useTheme() {
+	const context = (0, react.useContext)(ThemeContext);
+	if (!context) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
+}
 //#endregion
-exports.ThemeToggleButton = ThemeToggleButton;
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
 
 //# sourceMappingURL=index35.cjs.map

package/dist/index35.cjs.map

@@ -1 +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"}
+{"version":3,"file":"index35.cjs","names":[],"sources":["../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { UZI_THEMES, UZI_ACCENTS, THEME_STORAGE_KEY as DEFAULT_THEME_KEY, ACCENT_STORAGE_KEY as DEFAULT_ACCENT_KEY } from \"./constants\";\nimport { ToastProvider } from \"../components/toast/ToastContext\";\nimport type { ToastConfig } from \"../components/toast/types\";\n\nexport type UziTheme = typeof UZI_THEMES[number];\nexport type UziResolvedTheme = \"light\" | \"dark\";\nexport type UziAccent = typeof UZI_ACCENTS[number];\n\ntype ThemeContextValue = {\n  theme: UziTheme;\n  resolvedTheme: UziResolvedTheme;\n  accent: UziAccent;\n  setTheme: (theme: UziTheme) => void;\n  setAccent: (accent: UziAccent) => void;\n  toggleTheme: () => void;\n};\n\ntype ThemeProviderProps = {\n  children: ReactNode;\n  theme?: UziTheme;\n  defaultTheme?: UziTheme;\n  accent?: UziAccent;\n  defaultAccent?: UziAccent;\n  onThemeChange?: (theme: UziTheme) => void;\n  onAccentChange?: (accent: UziAccent) => void;\n  storageKey?: string;\n  accentStorageKey?: string;\n  disableStorage?: boolean;\n  toastConfig?: ToastConfig;\n};\n\nconst THEME_STORAGE_KEY = DEFAULT_THEME_KEY;\nconst ACCENT_STORAGE_KEY = DEFAULT_ACCENT_KEY;\nconst THEME_ATTRIBUTE = \"data-uzi-theme\";\nconst ACCENT_ATTRIBUTE = \"data-uzi-accent\";\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nfunction isTheme(value: string | null): value is UziTheme {\n  return UZI_THEMES.includes(value as UziTheme);\n}\n\nfunction isAccent(value: string | null): value is UziAccent {\n  return UZI_ACCENTS.includes(value as UziAccent);\n}\n\nfunction getSystemTheme(): UziResolvedTheme {\n  if (typeof window === \"undefined\") return \"light\";\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\nexport function ThemeProvider({\n  children,\n  theme,\n  defaultTheme = \"system\",\n  accent,\n  defaultAccent = \"blue\",\n  onThemeChange,\n  onAccentChange,\n  storageKey = THEME_STORAGE_KEY,\n  accentStorageKey = ACCENT_STORAGE_KEY,\n  disableStorage = false,\n  toastConfig,\n}: ThemeProviderProps) {\n  const [internalTheme, setInternalTheme] = useState<UziTheme>(defaultTheme);\n  const [internalAccent, setInternalAccent] = useState<UziAccent>(defaultAccent);\n  const [systemTheme, setSystemTheme] = useState<UziResolvedTheme>(\"light\");\n\n  useEffect(() => {\n    setSystemTheme(getSystemTheme());\n    if (!disableStorage) {\n      const storedTheme = window.localStorage.getItem(storageKey);\n      if (isTheme(storedTheme)) setInternalTheme(storedTheme);\n      const storedAccent = window.localStorage.getItem(accentStorageKey);\n      if (isAccent(storedAccent)) setInternalAccent(storedAccent);\n    }\n  }, [disableStorage, storageKey, accentStorageKey]);\n\n  const isThemeControlled = theme !== undefined;\n  const isAccentControlled = accent !== undefined;\n\n  const currentTheme = isThemeControlled ? theme : internalTheme;\n  const currentAccent = isAccentControlled ? accent : internalAccent;\n  const resolvedTheme = currentTheme === \"system\" ? systemTheme : currentTheme;\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    const handleChange = () => setSystemTheme(mediaQuery.matches ? \"dark\" : \"light\");\n\n    handleChange();\n    mediaQuery.addEventListener(\"change\", handleChange);\n    return () => mediaQuery.removeEventListener(\"change\", handleChange);\n  }, []);\n\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const root = document.documentElement;\n    root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);\n    root.setAttribute(ACCENT_ATTRIBUTE, currentAccent);\n    root.style.colorScheme = resolvedTheme;\n    root.classList.toggle(\"dark\", resolvedTheme === \"dark\");\n  }, [currentAccent, resolvedTheme]);\n\n  const setTheme = useCallback(\n    (nextTheme: UziTheme) => {\n      if (!isThemeControlled) setInternalTheme(nextTheme);\n      if (!disableStorage && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, nextTheme);\n      }\n      onThemeChange?.(nextTheme);\n    },\n    [disableStorage, isThemeControlled, onThemeChange, storageKey],\n  );\n\n  const setAccent = useCallback(\n    (nextAccent: UziAccent) => {\n      if (!isAccentControlled) setInternalAccent(nextAccent);\n      if (!disableStorage && typeof window !== \"undefined\") {\n        window.localStorage.setItem(accentStorageKey, nextAccent);\n      }\n      onAccentChange?.(nextAccent);\n    },\n    [accentStorageKey, disableStorage, isAccentControlled, onAccentChange],\n  );\n\n  const toggleTheme = useCallback(() => {\n    setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\");\n  }, [resolvedTheme, setTheme]);\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({\n      theme: currentTheme,\n      resolvedTheme,\n      accent: currentAccent,\n      setTheme,\n      setAccent,\n      toggleTheme,\n    }),\n    [currentAccent, currentTheme, resolvedTheme, setAccent, setTheme, toggleTheme],\n  );\n\n  return (\n    <ThemeContext.Provider value={value}>\n      <ToastProvider config={toastConfig}>{children}</ToastProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme must be used within a ThemeProvider\");\n  return context;\n}\n"],"mappings":"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"}

package/dist/index35.js

@@ -1,25 +1,7 @@
-//#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
-};
+//#region src/components/theme-toggle-button/theme-toggle-button.module.css
+var withLabel = "uzi-theme-toggle-button-module__withLabel__KqtDj";
+var theme_toggle_button_module_default = { withLabel };
 //#endregion
-export { top_bar_module_default as default, topBar, topBarActions, topBarBrand, topBarBrandContent, topBarCenter, topBarCenterGroup, topBarInner, topBarStart, topBarStatic };
+export { theme_toggle_button_module_default as default, withLabel };
 
 //# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -1 +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":""}
+{"version":3,"file":"index35.js","names":[],"sources":["../src/components/theme-toggle-button/theme-toggle-button.module.css"],"sourcesContent":[".withLabel {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n"],"mappings":""}

package/dist/index36.cjs

@@ -1,34 +1,8 @@
-//#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
-};
+//#region src/components/theme-toggle-button/theme-toggle-button.module.css
+var withLabel = "uzi-theme-toggle-button-module__withLabel__KqtDj";
+var theme_toggle_button_module_default = { withLabel };
 //#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;
+exports.default = theme_toggle_button_module_default;
+exports.withLabel = withLabel;
 
 //# sourceMappingURL=index36.cjs.map

package/dist/index36.cjs.map

@@ -1 +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":""}
+{"version":3,"file":"index36.cjs","names":[],"sources":["../src/components/theme-toggle-button/theme-toggle-button.module.css"],"sourcesContent":[".withLabel {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n"],"mappings":""}

package/dist/index36.js

@@ -1,55 +1,66 @@
 "use client";
 import { cx } from "./index3.js";
-import { ThemeToggleButton } from "./index34.js";
-import top_bar_module_default from "./index35.js";
+import { Button } from "./index5.js";
+import { useTheme } from "./index34.js";
+import theme_toggle_button_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
+//#region src/components/theme-toggle-button/ThemeToggleButton.tsx
+function MoonIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		width: "16",
+		height: "16",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M20 15.2A8.5 8.5 0 0 1 8.8 4 9 9 0 1 0 20 15.2Z",
+			stroke: "currentColor",
+			strokeWidth: "1.8",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
 		})
 	});
-	return /* @__PURE__ */ jsx("header", {
-		className: cx(top_bar_module_default.topBar, !shouldStick && top_bar_module_default.topBarStatic, className),
+}
+function SunIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		width: "16",
+		height: "16",
+		fill: "none",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "4",
+			stroke: "currentColor",
+			strokeWidth: "1.8"
+		}), /* @__PURE__ */ jsx("path", {
+			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",
+			stroke: "currentColor",
+			strokeWidth: "1.8",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function ThemeToggleButton({ showLabel = false, lightLabel = "Light mode", darkLabel = "Dark mode", className, onClick, ...rest }) {
+	const { resolvedTheme, toggleTheme } = useTheme();
+	const nextThemeLabel = resolvedTheme === "dark" ? lightLabel : darkLabel;
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: "ghost",
+		size: showLabel ? "sm" : "icon",
+		className: cx(showLabel && theme_toggle_button_module_default.withLabel, className),
+		"aria-label": `Switch to ${nextThemeLabel.toLowerCase()}`,
+		title: `Switch to ${nextThemeLabel.toLowerCase()}`,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) toggleTheme();
+		},
 		...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]
-				})
-			]
-		})
+		children: [resolvedTheme === "dark" ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {}), showLabel && /* @__PURE__ */ jsx("span", { children: nextThemeLabel })]
 	});
 }
 //#endregion
-export { TopBar };
+export { ThemeToggleButton };
 
 //# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -1 +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"}
+{"version":3,"file":"index36.js","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,oBAAC,OAAD;EAAK,SAAQ;EAAY,eAAY;EAAO,OAAM;EAAK,QAAO;EAAK,MAAK;YACtE,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAChB,CAAA;CACE,CAAA;AAET;AAEA,SAAS,UAAU;CACjB,OACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,eAAY;EAAO,OAAM;EAAK,QAAO;EAAK,MAAK;YAAxE,CACE,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAI,QAAO;GAAe,aAAY;EAAO,CAAA,GACvE,oBAAC,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,SAAS;CAChD,MAAM,iBAAiB,kBAAkB,SAAS,aAAa;CAE/D,OACE,qBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAM,YAAY,OAAO;EACzB,WAAW,GAAG,aAAa,mCAAO,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,oBAAC,SAAD,CAAU,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA,GACpD,aAAa,oBAAC,QAAD,EAAA,UAAO,eAAqB,CAAA,CACpC;;AAEZ"}

package/dist/index37.cjs

@@ -1,55 +1,66 @@
 "use client";
 const require_cx = require("./index4.cjs");
-const require_ThemeToggleButton = require("./index35.cjs");
-const require_top_bar_module = require("./index36.cjs");
+const require_Button = require("./index6.cjs");
+const require_ThemeProvider = require("./index35.cjs");
+const require_theme_toggle_button_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
+//#region src/components/theme-toggle-button/ThemeToggleButton.tsx
+function MoonIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		width: "16",
+		height: "16",
+		fill: "none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M20 15.2A8.5 8.5 0 0 1 8.8 4 9 9 0 1 0 20 15.2Z",
+			stroke: "currentColor",
+			strokeWidth: "1.8",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
 		})
 	});
-	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),
+}
+function SunIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		width: "16",
+		height: "16",
+		fill: "none",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "12",
+			cy: "12",
+			r: "4",
+			stroke: "currentColor",
+			strokeWidth: "1.8"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			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",
+			stroke: "currentColor",
+			strokeWidth: "1.8",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function ThemeToggleButton({ showLabel = false, lightLabel = "Light mode", darkLabel = "Dark mode", className, onClick, ...rest }) {
+	const { resolvedTheme, toggleTheme } = require_ThemeProvider.useTheme();
+	const nextThemeLabel = resolvedTheme === "dark" ? lightLabel : darkLabel;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+		type: "button",
+		variant: "ghost",
+		size: showLabel ? "sm" : "icon",
+		className: require_cx.cx(showLabel && require_theme_toggle_button_module.default.withLabel, className),
+		"aria-label": `Switch to ${nextThemeLabel.toLowerCase()}`,
+		title: `Switch to ${nextThemeLabel.toLowerCase()}`,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) toggleTheme();
+		},
 		...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]
-				})
-			]
-		})
+		children: [resolvedTheme === "dark" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoonIcon, {}), showLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: nextThemeLabel })]
 	});
 }
 //#endregion
-exports.TopBar = TopBar;
+exports.ThemeToggleButton = ThemeToggleButton;
 
 //# sourceMappingURL=index37.cjs.map

package/dist/index37.cjs.map

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