@extrachill/components 0.4.9 → 0.4.11

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.4.11] - 2026-03-25
+
+### Changed
+- Add plain shell and mobile edge options to shared tabs
+
+## [0.4.10] - 2026-03-25
+
+### Changed
+- Port shared tab styling into responsive tabs component
+
 ## [0.4.9] - 2026-03-25
 
 ### Changed

package/dist/BlockShell.d.ts

@@ -5,6 +5,7 @@ export interface BlockShellProps {
     classPrefix?: string;
     compact?: boolean;
     depth?: 0 | 1 | 2 | 3;
+    variant?: 'card' | 'plain';
 }
-export declare function BlockShell({ children, className, classPrefix, compact, depth, }: BlockShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlockShell({ children, className, classPrefix, compact, depth, variant, }: BlockShellProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BlockShell.d.ts.map

package/dist/BlockShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockShell.d.ts","sourceRoot":"","sources":["../src/BlockShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAE,EAC3B,QAAQ,EACR,SAAc,EACd,WAA8B,EAC9B,OAAe,EACf,KAAS,GACT,EAAE,eAAe,2CASjB"}
+{"version":3,"file":"BlockShell.d.ts","sourceRoot":"","sources":["../src/BlockShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAE,EAC3B,QAAQ,EACR,SAAc,EACd,WAA8B,EAC9B,OAAe,EACf,KAAS,EACT,OAAgB,GAChB,EAAE,eAAe,2CAUjB"}

package/dist/BlockShell.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function BlockShell({ children, className = '', classPrefix = 'ec-block-shell', compact = false, depth = 0, }) {
+export function BlockShell({ children, className = '', classPrefix = 'ec-block-shell', compact = false, depth = 0, variant = 'card', }) {
     const shellClass = [
         classPrefix,
         compact ? `${classPrefix}--compact` : '',
         `${classPrefix}--depth-${depth}`,
+        `${classPrefix}--${variant}`,
         className,
     ].filter(Boolean).join(' ');
     return _jsx("div", { className: shellClass, children: children });

package/dist/ResponsiveTabs.d.ts

@@ -12,6 +12,7 @@ export interface ResponsiveTabsProps {
     mobileBreakpoint?: number;
     accordionClassName?: string;
     showDesktopTabs?: boolean;
+    mobileEdgeToEdge?: boolean;
 }
-export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, mobileEdgeToEdge, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ResponsiveTabs.d.ts.map

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,kDA8ErB"}
+{"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;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;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,EACtB,gBAAwB,GACxB,EAAE,mBAAmB,kDAmFrB"}

package/dist/ResponsiveTabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { Tabs } from "./Tabs.js";
-export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 768, accordionClassName = '', showDesktopTabs = true, }) {
+export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 768, accordionClassName = '', showDesktopTabs = true, mobileEdgeToEdge = false, }) {
     const [isMobile, setIsMobile] = useState(() => {
         if (typeof window === 'undefined') {
             return false;
@@ -19,9 +19,14 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, [mobileBreakpoint]);
-    const rootClass = useMemo(() => [classPrefix, isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`, className]
+    const rootClass = useMemo(() => [
+        classPrefix,
+        isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`,
+        mobileEdgeToEdge ? `${classPrefix}--mobile-edge-to-edge` : '',
+        className,
+    ]
         .filter(Boolean)
-        .join(' '), [className, classPrefix, isMobile]);
+        .join(' '), [className, classPrefix, isMobile, mobileEdgeToEdge]);
     if (tabs.length === 0) {
         return null;
     }

package/package.json

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

package/src/BlockShell.tsx

@@ -6,6 +6,7 @@ export interface BlockShellProps {
 	classPrefix?: string;
 	compact?: boolean;
 	depth?: 0 | 1 | 2 | 3;
+	variant?: 'card' | 'plain';
 }
 
 export function BlockShell( {
@@ -14,11 +15,13 @@ export function BlockShell( {
 	classPrefix = 'ec-block-shell',
 	compact = false,
 	depth = 0,
+	variant = 'card',
 }: BlockShellProps ) {
 	const shellClass = [
 		classPrefix,
 		compact ? `${ classPrefix }--compact` : '',
 		`${ classPrefix }--depth-${ depth }`,
+		`${ classPrefix }--${ variant }`,
 		className,
 	].filter( Boolean ).join( ' ' );
 

package/src/ResponsiveTabs.tsx

@@ -14,6 +14,7 @@ export interface ResponsiveTabsProps {
 	mobileBreakpoint?: number;
 	accordionClassName?: string;
 	showDesktopTabs?: boolean;
+	mobileEdgeToEdge?: boolean;
 }
 
 export function ResponsiveTabs( {
@@ -28,6 +29,7 @@ export function ResponsiveTabs( {
 	mobileBreakpoint = 768,
 	accordionClassName = '',
 	showDesktopTabs = true,
+	mobileEdgeToEdge = false,
 }: ResponsiveTabsProps ) {
 	const [ isMobile, setIsMobile ] = useState( () => {
 		if ( typeof window === 'undefined' ) {
@@ -53,10 +55,15 @@ export function ResponsiveTabs( {
 	}, [ mobileBreakpoint ] );
 
 	const rootClass = useMemo(
-		() => [ classPrefix, isMobile ? `${ classPrefix }--mobile` : `${ classPrefix }--desktop`, className ]
+		() => [
+			classPrefix,
+			isMobile ? `${ classPrefix }--mobile` : `${ classPrefix }--desktop`,
+			mobileEdgeToEdge ? `${ classPrefix }--mobile-edge-to-edge` : '',
+			className,
+		]
 			.filter( Boolean )
 			.join( ' ' ),
-		[ className, classPrefix, isMobile ]
+		[ className, classPrefix, isMobile, mobileEdgeToEdge ]
 	);
 
 	if ( tabs.length === 0 ) {

package/styles/components.scss

@@ -151,6 +151,14 @@
 
 .ec-responsive-tabs__desktop-panel {
 	display: grid;
+	background: var(--background-color, #fff);
+	border: 1px solid var(--border-color, #ddd);
+	border-radius: 0 var(--border-radius-md, 8px) var(--border-radius-md, 8px) var(--border-radius-md, 8px);
+	padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
+	margin-bottom: var(--spacing-sm, 0.5rem);
+	position: relative;
+	z-index: 1;
+	box-sizing: border-box;
 }
 
 .ec-responsive-tabs__accordion {
@@ -160,9 +168,15 @@
 
 .ec-responsive-tabs__item {
 	border: 1px solid var(--border-color, #ddd);
-	border-radius: var(--border-radius-md, 6px);
+	border-radius: var(--border-radius-md, 8px);
+	margin-bottom: var(--spacing-md, 1rem);
 	overflow: hidden;
 	background: var(--card-background, #f8f8f8);
+	box-sizing: border-box;
+}
+
+.ec-responsive-tabs__item:last-of-type {
+	margin-bottom: 0;
 }
 
 .ec-responsive-tabs__trigger {
@@ -176,14 +190,17 @@
 	border-bottom: 1px solid var(--border-color, #ddd);
 	background: var(--card-background, #f8f8f8);
 	color: var(--text-color, #111);
-	font: inherit;
+	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;
 }
 
-.ec-responsive-tabs__trigger:not(.is-active) {
-	border-bottom-color: transparent;
+.ec-responsive-tabs__item:last-of-type .ec-responsive-tabs__trigger:not(.is-active) {
+	border-bottom: 0;
 }
 
 .ec-responsive-tabs__trigger.is-active {
@@ -191,14 +208,81 @@
 	color: var(--link-color, #0b5394);
 }
 
+.ec-responsive-tabs__trigger:hover {
+	background: var(--background-color, #fff);
+	color: var(--link-color, #0b5394);
+}
+
+.ec-responsive-tabs__trigger:focus-visible {
+	outline: 2px solid var(--focus-border-color, #53940b);
+	outline-offset: -2px;
+	box-shadow: inset 0 0 0 1px var(--focus-border-color, #53940b);
+}
+
 .ec-responsive-tabs__panel {
 	padding: var(--spacing-sm, 0.5rem);
 	background: var(--background-color, #fff);
+	margin-bottom: 0;
+}
+
+.ec-responsive-tabs__panel > .ec-panel:first-child {
+	margin-top: 0;
 }
 
 .ec-responsive-tabs__arrow {
 	flex-shrink: 0;
 	font-size: var(--font-size-sm, 0.875rem);
+	margin-left: var(--spacing-sm, 0.5rem);
+	color: currentColor;
+}
+
+@media (min-width: 769px) {
+	.ec-responsive-tabs__accordion {
+		display: none;
+	}
+
+	.ec-responsive-tabs .ec-tabs__tabs {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: -1px;
+		position: relative;
+	}
+
+	.ec-responsive-tabs .ec-tabs__tab {
+		border: 1px solid var(--border-color, #ddd);
+		border-bottom: 1px solid var(--border-color, #ddd);
+		border-radius: var(--border-radius-md, 8px) var(--border-radius-md, 8px) 0 0;
+		padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+		font-size: var(--font-size-base, 1rem);
+		position: relative;
+		top: 1px;
+		margin-right: var(--spacing-xs, 0.25rem);
+		background: var(--card-background, #f8f8f8);
+		color: var(--text-color, #111);
+		z-index: 2;
+	}
+
+	.ec-responsive-tabs .ec-tabs__tab.is-active {
+		background: var(--background-color, #fff);
+		color: var(--link-color, #0b5394);
+		border-bottom: 1px solid var(--background-color, #fff);
+		z-index: 3;
+	}
+}
+
+@media (max-width: 768px) {
+	.ec-responsive-tabs .ec-tabs__tabs,
+	.ec-responsive-tabs__desktop-panel {
+		display: none;
+	}
+
+	.ec-responsive-tabs--mobile-edge-to-edge .ec-responsive-tabs__item {
+		margin-left: calc(var(--spacing-md, 1rem) * -1);
+		margin-right: calc(var(--spacing-md, 1rem) * -1);
+		border-left: 0;
+		border-right: 0;
+		border-radius: 0;
+	}
 }
 
 // Panel
@@ -222,6 +306,13 @@
 	gap: var(--spacing-lg, 1.5rem);
 }
 
+.ec-block-shell--plain {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	padding: 0;
+}
+
 .ec-block-shell--depth-0 {
 	background: var(--card-background, #f1f5f9);
 }