@extrachill/components 0.4.15 → 0.4.17

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.4.16] - 2026-03-25
+
+### Changed
+- Tune shared tabs and panel surfaces to current settings design
+
 ## [0.4.13] - 2026-03-25
 
 ### Changed

package/dist/ResponsiveTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,GACtB,EAAE,mBAAmB,kDAkFrB"}
+{"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,GACtB,EAAE,mBAAmB,kDA0FrB"}

package/dist/ResponsiveTabs.js

@@ -8,6 +8,7 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
         }
         return window.innerWidth < mobileBreakpoint;
     });
+    const [mobileActive, setMobileActive] = useState(active);
     useEffect(() => {
         if (typeof window === 'undefined') {
             return undefined;
@@ -19,6 +20,9 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, [mobileBreakpoint]);
+    useEffect(() => {
+        setMobileActive(active);
+    }, [active]);
     const rootClass = useMemo(() => [
         classPrefix,
         isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`,
@@ -33,7 +37,10 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
         return (_jsxs("div", { className: rootClass, children: [showDesktopTabs && (_jsx(Tabs, { tabs: tabs, active: active, onChange: onChange, className: tabsClassName, classPrefix: tabsClassPrefix })), _jsx("div", { className: `${classPrefix}__desktop-panel`, children: renderPanel(active) })] }));
     }
     return (_jsx("div", { className: rootClass, children: _jsx("div", { className: [`${classPrefix}__accordion`, accordionClassName].filter(Boolean).join(' '), children: tabs.map((tab) => {
-                const isActive = tab.id === active;
-                return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => onChange(tab.id), children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel`, children: renderPanel(tab.id) })] }, tab.id));
+                const isActive = tab.id === mobileActive;
+                return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => {
+                                setMobileActive(tab.id);
+                                onChange(tab.id);
+                            }, children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel`, children: renderPanel(tab.id) })] }, tab.id));
             }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/components",
-  "version": "0.4.15",
+  "version": "0.4.17",
   "description": "Shared React components for the Extra Chill Platform.",
   "type": "module",
   "main": "./dist/index.js",

package/src/ResponsiveTabs.tsx

@@ -36,6 +36,7 @@ export function ResponsiveTabs( {
 
 		return window.innerWidth < mobileBreakpoint;
 	} );
+	const [ mobileActive, setMobileActive ] = useState( active );
 
 	useEffect( () => {
 		if ( typeof window === 'undefined' ) {
@@ -52,6 +53,10 @@ export function ResponsiveTabs( {
 		return () => window.removeEventListener( 'resize', handleResize );
 	}, [ mobileBreakpoint ] );
 
+	useEffect( () => {
+		setMobileActive( active );
+	}, [ active ] );
+
 	const rootClass = useMemo(
 		() => [
 			classPrefix,
@@ -88,7 +93,7 @@ export function ResponsiveTabs( {
 		<div className={ rootClass }>
 			<div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
 				{ tabs.map( ( tab ) => {
-					const isActive = tab.id === active;
+					const isActive = tab.id === mobileActive;
 
 					return (
 						<div key={ tab.id } className={ `${ classPrefix }__item${ isActive ? ' is-active' : '' }` }>
@@ -96,7 +101,10 @@ export function ResponsiveTabs( {
 								type="button"
 								className={ `${ classPrefix }__trigger${ isActive ? ' is-active' : '' }` }
 								aria-expanded={ isActive }
-								onClick={ () => onChange( tab.id ) }
+								onClick={ () => {
+									setMobileActive( tab.id );
+									onChange( tab.id );
+								} }
 							>
 								<span>{ tab.label }</span>
 								<span className={ `${ classPrefix }__arrow` } aria-hidden="true">

package/styles/components.scss

@@ -88,7 +88,7 @@
 	align-items: center;
 	gap: var(--spacing-xs, 0.25rem);
 	border: 1px solid var(--border-color, #ddd);
-	background: var(--background-color, #fff);
+	background: var(--card-background, #f1f5f9);
 	padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 	border-radius: var(--border-radius-sm, 4px);
 	cursor: pointer;
@@ -147,12 +147,12 @@
 .ec-responsive-tabs {
 	display: grid;
 	gap: var(--spacing-md, 1rem);
+	background: var(--card-background, #f1f5f9);
 }
 
 .ec-responsive-tabs__desktop-panel {
 	display: grid;
 	background: var(--background-color, #fff);
-	border: 1px solid var(--border-color, #ddd);
 	border-radius: 0 0 var(--border-radius-md, 8px) var(--border-radius-md, 8px);
 	padding: 0;
 	margin-bottom: 0;
@@ -210,7 +210,7 @@
 
 .ec-responsive-tabs__trigger:hover {
 	background: var(--background-color, #fff);
-	color: var(--link-color, #0b5394);
+	color: var(--link-color-hover, var(--link-color, #0b5394));
 }
 
 .ec-responsive-tabs__trigger:focus-visible {
@@ -324,7 +324,6 @@
 	gap: var(--spacing-md, 1rem);
 	flex-wrap: wrap;
 	padding-bottom: var(--spacing-md, 1rem);
-	background: var(--card-background, #f1f5f9);
 }
 
 .ec-block-shell-header--with-divider {
@@ -375,7 +374,7 @@
 
 .ec-panel--depth-1,
 .ec-panel--depth-3 {
-	background: var(--background-color, #fff);
+	background: var(--card-background, #f8f8f8);
 }
 
 .ec-section {