@camstack/ui-library 1.2.271 → 1.2.273

package/dist/index.cjs

@@ -32023,7 +32023,7 @@ function useTabsContext() {
 	if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
 	return ctx;
 }
-function Tabs({ value: controlledValue, onValueChange, defaultValue = "", className, ...props }) {
+function Tabs({ value: controlledValue, onValueChange, defaultValue = "", appearance = "underline", className, ...props }) {
 	const [uncontrolledValue, setUncontrolledValue] = (0, react$1.useState)(defaultValue);
 	const value = controlledValue ?? uncontrolledValue;
 	const setValue = (0, react$1.useCallback)((next) => {
@@ -32033,7 +32033,8 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsContext.Provider, {
 		value: {
 			value,
-			setValue
+			setValue,
+			appearance
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className,
@@ -32059,14 +32060,15 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
 * pinned to `hidden` makes it impossible here.
 */
 function TabsList({ className, ...props }) {
+	const { appearance } = useTabsContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "tablist",
-		className: cn("flex flex-row overflow-x-auto overflow-y-hidden border-b border-border-subtle", className),
+		className: cn("flex flex-row overflow-x-auto overflow-y-hidden", appearance === "pills" ? "gap-1 border-b border-border-subtle py-1" : "border-b border-border-subtle", className),
 		...props
 	});
 }
 function TabsTrigger({ value, className, ...props }) {
-	const { value: activeValue, setValue } = useTabsContext();
+	const { value: activeValue, setValue, appearance } = useTabsContext();
 	const isActive = value === activeValue;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -32074,7 +32076,7 @@ function TabsTrigger({ value, className, ...props }) {
 		"aria-selected": isActive,
 		"aria-controls": `tabpanel-${value}`,
 		tabIndex: isActive ? 0 : -1,
-		className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
+		className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", appearance === "pills" ? isActive ? "rounded-md bg-primary/10 font-medium text-primary" : "rounded-md text-foreground-muted hover:bg-surface-hover hover:text-foreground" : isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
 		onClick: () => setValue(value),
 		...props
 	});
@@ -58419,12 +58421,23 @@ function ItemFormDialog({ open, onClose, title, icon: Icon, error, width = "lg",
 * Tiny URL query sync for surfaces that cannot assume react-router
 * (federated addon pages) or that only need a handful of params.
 *
-* Reads on mount + `popstate`; writes with `history.replaceState`. Empty /
-* null values are deleted so the URL stays short.
+* Reads on mount + whenever the query string changes (our writes, other
+* hook instances, react-router `setSearchParams`, back/forward). Writes
+* with `history.replaceState`. Empty / null values are deleted so the URL
+* stays short.
+*
+* Multiple `useUrlQueryParam` mounts (and a parent reading the same key via
+* this hook while a child writes) must stay in sync — otherwise a Rules
+* area pill updates `?section=` while the Notifications header still shows
+* "New rule" from a stale snapshot.
 */
+var URL_QUERY_EVENT = "camstack:url-query";
 function readParam(key) {
 	return new URLSearchParams(window.location.search).get(key);
 }
+function notifyUrlQuery() {
+	window.dispatchEvent(new Event(URL_QUERY_EVENT));
+}
 function writeParam(key, value) {
 	const params = new URLSearchParams(window.location.search);
 	if (value === null || value === "") params.delete(key);
@@ -58433,16 +58446,37 @@ function writeParam(key, value) {
 	const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
 	window.history.replaceState(null, "", url);
 }
+var historyPatched = false;
+/** So react-router (and anyone else) replaceState/pushState refresh every hook. */
+function ensureHistoryPatched() {
+	if (historyPatched || typeof window === "undefined") return;
+	historyPatched = true;
+	const originalReplace = window.history.replaceState.bind(window.history);
+	const originalPush = window.history.pushState.bind(window.history);
+	window.history.replaceState = (...args) => {
+		originalReplace(...args);
+		notifyUrlQuery();
+	};
+	window.history.pushState = (...args) => {
+		originalPush(...args);
+		notifyUrlQuery();
+	};
+}
 /**
 * One query param as React state. `null` means absent.
 * Changing it replaces the URL without a navigation.
 */
 function useUrlQueryParam(key) {
+	ensureHistoryPatched();
 	const [value, setValue] = (0, react$1.useState)(() => readParam(key));
 	(0, react$1.useEffect)(() => {
-		const onPop = () => setValue(readParam(key));
-		window.addEventListener("popstate", onPop);
-		return () => window.removeEventListener("popstate", onPop);
+		const sync = () => setValue(readParam(key));
+		window.addEventListener("popstate", sync);
+		window.addEventListener(URL_QUERY_EVENT, sync);
+		return () => {
+			window.removeEventListener("popstate", sync);
+			window.removeEventListener(URL_QUERY_EVENT, sync);
+		};
 	}, [key]);
 	return [value, (0, react$1.useCallback)((next) => {
 		writeParam(key, next);

package/dist/index.js

@@ -31999,7 +31999,7 @@ function useTabsContext() {
 	if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
 	return ctx;
 }
-function Tabs({ value: controlledValue, onValueChange, defaultValue = "", className, ...props }) {
+function Tabs({ value: controlledValue, onValueChange, defaultValue = "", appearance = "underline", className, ...props }) {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const value = controlledValue ?? uncontrolledValue;
 	const setValue = useCallback((next) => {
@@ -32009,7 +32009,8 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
 	return /* @__PURE__ */ jsx(TabsContext.Provider, {
 		value: {
 			value,
-			setValue
+			setValue,
+			appearance
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			className,
@@ -32035,14 +32036,15 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
 * pinned to `hidden` makes it impossible here.
 */
 function TabsList({ className, ...props }) {
+	const { appearance } = useTabsContext();
 	return /* @__PURE__ */ jsx("div", {
 		role: "tablist",
-		className: cn("flex flex-row overflow-x-auto overflow-y-hidden border-b border-border-subtle", className),
+		className: cn("flex flex-row overflow-x-auto overflow-y-hidden", appearance === "pills" ? "gap-1 border-b border-border-subtle py-1" : "border-b border-border-subtle", className),
 		...props
 	});
 }
 function TabsTrigger({ value, className, ...props }) {
-	const { value: activeValue, setValue } = useTabsContext();
+	const { value: activeValue, setValue, appearance } = useTabsContext();
 	const isActive = value === activeValue;
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -32050,7 +32052,7 @@ function TabsTrigger({ value, className, ...props }) {
 		"aria-selected": isActive,
 		"aria-controls": `tabpanel-${value}`,
 		tabIndex: isActive ? 0 : -1,
-		className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
+		className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", appearance === "pills" ? isActive ? "rounded-md bg-primary/10 font-medium text-primary" : "rounded-md text-foreground-muted hover:bg-surface-hover hover:text-foreground" : isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
 		onClick: () => setValue(value),
 		...props
 	});
@@ -58395,12 +58397,23 @@ function ItemFormDialog({ open, onClose, title, icon: Icon, error, width = "lg",
 * Tiny URL query sync for surfaces that cannot assume react-router
 * (federated addon pages) or that only need a handful of params.
 *
-* Reads on mount + `popstate`; writes with `history.replaceState`. Empty /
-* null values are deleted so the URL stays short.
+* Reads on mount + whenever the query string changes (our writes, other
+* hook instances, react-router `setSearchParams`, back/forward). Writes
+* with `history.replaceState`. Empty / null values are deleted so the URL
+* stays short.
+*
+* Multiple `useUrlQueryParam` mounts (and a parent reading the same key via
+* this hook while a child writes) must stay in sync — otherwise a Rules
+* area pill updates `?section=` while the Notifications header still shows
+* "New rule" from a stale snapshot.
 */
+var URL_QUERY_EVENT = "camstack:url-query";
 function readParam(key) {
 	return new URLSearchParams(window.location.search).get(key);
 }
+function notifyUrlQuery() {
+	window.dispatchEvent(new Event(URL_QUERY_EVENT));
+}
 function writeParam(key, value) {
 	const params = new URLSearchParams(window.location.search);
 	if (value === null || value === "") params.delete(key);
@@ -58409,16 +58422,37 @@ function writeParam(key, value) {
 	const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
 	window.history.replaceState(null, "", url);
 }
+var historyPatched = false;
+/** So react-router (and anyone else) replaceState/pushState refresh every hook. */
+function ensureHistoryPatched() {
+	if (historyPatched || typeof window === "undefined") return;
+	historyPatched = true;
+	const originalReplace = window.history.replaceState.bind(window.history);
+	const originalPush = window.history.pushState.bind(window.history);
+	window.history.replaceState = (...args) => {
+		originalReplace(...args);
+		notifyUrlQuery();
+	};
+	window.history.pushState = (...args) => {
+		originalPush(...args);
+		notifyUrlQuery();
+	};
+}
 /**
 * One query param as React state. `null` means absent.
 * Changing it replaces the URL without a navigation.
 */
 function useUrlQueryParam(key) {
+	ensureHistoryPatched();
 	const [value, setValue] = useState(() => readParam(key));
 	useEffect(() => {
-		const onPop = () => setValue(readParam(key));
-		window.addEventListener("popstate", onPop);
-		return () => window.removeEventListener("popstate", onPop);
+		const sync = () => setValue(readParam(key));
+		window.addEventListener("popstate", sync);
+		window.addEventListener(URL_QUERY_EVENT, sync);
+		return () => {
+			window.removeEventListener("popstate", sync);
+			window.removeEventListener(URL_QUERY_EVENT, sync);
+		};
 	}, [key]);
 	return [value, useCallback((next) => {
 		writeParam(key, next);

package/dist/primitives/tabs.d.ts

@@ -1,10 +1,17 @@
 import { type JSX, type ButtonHTMLAttributes, type HTMLAttributes } from "react";
+export type TabsAppearance = "underline" | "pills";
 interface TabsProps extends HTMLAttributes<HTMLDivElement> {
 	value?: string;
 	onValueChange?: (value: string) => void;
 	defaultValue?: string;
+	/**
+	* `underline` — border-b active (default, dialog editors).
+	* `pills` — chip active fill; scrollbar sits under chips so it cannot
+	* cover a bottom underline (Rules area strip).
+	*/
+	appearance?: TabsAppearance;
 }
-export declare function Tabs({ value: controlledValue, onValueChange, defaultValue, className, ...props }: TabsProps): JSX.Element | null;
+export declare function Tabs({ value: controlledValue, onValueChange, defaultValue, appearance, className, ...props }: TabsProps): JSX.Element | null;
 /**
 * The strip SCROLLS sideways; it never squashes and never clips.
 *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.271",
+  "version": "1.2.273",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",