@extrachill/components 0.4.21 → 0.4.23

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,kDA+FrB"}
+{"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,kDAiGrB"}

package/dist/ResponsiveTabs.js

@@ -21,8 +21,10 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
         return () => window.removeEventListener('resize', handleResize);
     }, [mobileBreakpoint]);
     useEffect(() => {
-        setMobileActive(active);
-    }, [active]);
+        if (!isMobile) {
+            setMobileActive(active);
+        }
+    }, [active, isMobile]);
     const rootClass = useMemo(() => [
         classPrefix,
         isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`,

package/package.json

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

package/src/ResponsiveTabs.tsx

@@ -54,8 +54,10 @@ export function ResponsiveTabs( {
 	}, [ mobileBreakpoint ] );
 
 	useEffect( () => {
-		setMobileActive( active );
-	}, [ active ] );
+		if ( ! isMobile ) {
+			setMobileActive( active );
+		}
+	}, [ active, isMobile ] );
 
 	const rootClass = useMemo(
 		() => [

package/styles/components.scss

@@ -160,11 +160,6 @@
 	box-sizing: border-box;
 }
 
-.ec-responsive-tabs__accordion {
-	display: grid;
-	gap: var(--spacing-md, 1rem);
-}
-
 .ec-responsive-tabs__item {
 	border: 1px solid var(--border-color, #ddd);
 	border-radius: var(--border-radius-md, 8px);
@@ -186,13 +181,11 @@
 	gap: var(--spacing-sm, 0.5rem);
 	padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 	border: 0;
-	border-bottom: 1px solid var(--border-color, #ddd);
 	background: var(--card-background, #f8f8f8);
 	color: var(--text-color, #111);
 	font-family: var(--font-family-body, inherit);
 	font-size: var(--font-size-body, 1.125rem);
 	font-weight: 600;
-	line-height: 1.4;
 	cursor: pointer;
 	text-align: left;
 	transition: background 0.15s ease, color 0.15s ease;
@@ -207,11 +200,6 @@
 	color: var(--link-color, #0b5394);
 }
 
-.ec-responsive-tabs__trigger:hover {
-	background: var(--background-color, #fff);
-	color: var(--link-color-hover, var(--link-color, #0b5394));
-}
-
 .ec-responsive-tabs__trigger:focus-visible {
 	outline: 2px solid var(--focus-border-color, #53940b);
 	outline-offset: -2px;
@@ -219,7 +207,7 @@
 }
 
 .ec-responsive-tabs__panel {
-	padding: var(--spacing-sm, 0.5rem);
+	padding: 0 var(--spacing-md, 1rem);
 	background: var(--background-color, #fff);
 	margin-bottom: 0;
 }