@extrachill/components 0.4.8 → 0.4.10

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.4.10] - 2026-03-25
+
+### Changed
+- Port shared tab styling into responsive tabs component
+
+## [0.4.9] - 2026-03-25
+
+### Changed
+- Add responsive mobile accordion mode for shared tabs
+
 ## [0.4.8] - 2026-03-25
 
 ### Changed

package/dist/ResponsiveTabs.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { type TabItem } from './Tabs.tsx';
+export interface ResponsiveTabsProps {
+    tabs: TabItem[];
+    active: string;
+    onChange: (id: string) => void;
+    renderPanel: (id: string) => ReactNode;
+    className?: string;
+    classPrefix?: string;
+    tabsClassName?: string;
+    tabsClassPrefix?: string;
+    mobileBreakpoint?: number;
+    accordionClassName?: string;
+    showDesktopTabs?: boolean;
+}
+export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ResponsiveTabs.d.ts.map

package/dist/ResponsiveTabs.d.ts.map

@@ -0,0 +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"}

package/dist/ResponsiveTabs.js

@@ -0,0 +1,35 @@
+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, }) {
+    const [isMobile, setIsMobile] = useState(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.innerWidth < mobileBreakpoint;
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        const handleResize = () => {
+            setIsMobile(window.innerWidth < mobileBreakpoint);
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [mobileBreakpoint]);
+    const rootClass = useMemo(() => [classPrefix, isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`, className]
+        .filter(Boolean)
+        .join(' '), [className, classPrefix, isMobile]);
+    if (tabs.length === 0) {
+        return null;
+    }
+    if (!isMobile) {
+        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));
+            }) }) }));
+}

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { Pagination, type PaginationProps } from './Pagination.tsx';
 export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
 export { Modal, type ModalProps } from './Modal.tsx';
 export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';
+export { ResponsiveTabs, type ResponsiveTabsProps } from './ResponsiveTabs.tsx';
 export { ShellTabs, type ShellTabsProps } from './ShellTabs.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -8,6 +8,7 @@ export { Pagination } from "./Pagination.js";
 export { SearchBox } from "./SearchBox.js";
 export { Modal } from "./Modal.js";
 export { Tabs } from "./Tabs.js";
+export { ResponsiveTabs } from "./ResponsiveTabs.js";
 export { ShellTabs } from "./ShellTabs.js";
 export { Panel } from "./Panel.js";
 export { Surface } from "./Surface.js";

package/package.json

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

package/src/ResponsiveTabs.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { Tabs, type TabItem } from './Tabs.tsx';
+
+export interface ResponsiveTabsProps {
+	tabs: TabItem[];
+	active: string;
+	onChange: ( id: string ) => void;
+	renderPanel: ( id: string ) => ReactNode;
+	className?: string;
+	classPrefix?: string;
+	tabsClassName?: string;
+	tabsClassPrefix?: string;
+	mobileBreakpoint?: number;
+	accordionClassName?: string;
+	showDesktopTabs?: boolean;
+}
+
+export function ResponsiveTabs( {
+	tabs,
+	active,
+	onChange,
+	renderPanel,
+	className = '',
+	classPrefix = 'ec-responsive-tabs',
+	tabsClassName = '',
+	tabsClassPrefix = 'ec-tabs',
+	mobileBreakpoint = 768,
+	accordionClassName = '',
+	showDesktopTabs = true,
+}: ResponsiveTabsProps ) {
+	const [ isMobile, setIsMobile ] = useState( () => {
+		if ( typeof window === 'undefined' ) {
+			return false;
+		}
+
+		return window.innerWidth < mobileBreakpoint;
+	} );
+
+	useEffect( () => {
+		if ( typeof window === 'undefined' ) {
+			return undefined;
+		}
+
+		const handleResize = () => {
+			setIsMobile( window.innerWidth < mobileBreakpoint );
+		};
+
+		handleResize();
+		window.addEventListener( 'resize', handleResize );
+
+		return () => window.removeEventListener( 'resize', handleResize );
+	}, [ mobileBreakpoint ] );
+
+	const rootClass = useMemo(
+		() => [ classPrefix, isMobile ? `${ classPrefix }--mobile` : `${ classPrefix }--desktop`, className ]
+			.filter( Boolean )
+			.join( ' ' ),
+		[ className, classPrefix, isMobile ]
+	);
+
+	if ( tabs.length === 0 ) {
+		return null;
+	}
+
+	if ( ! isMobile ) {
+		return (
+			<div className={ rootClass }>
+				{ showDesktopTabs && (
+					<Tabs
+						tabs={ tabs }
+						active={ active }
+						onChange={ onChange }
+						className={ tabsClassName }
+						classPrefix={ tabsClassPrefix }
+					/>
+				) }
+				<div className={ `${ classPrefix }__desktop-panel` }>{ renderPanel( active ) }</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className={ rootClass }>
+			<div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
+				{ tabs.map( ( tab ) => {
+					const isActive = tab.id === active;
+
+					return (
+						<div key={ tab.id } className={ `${ classPrefix }__item${ isActive ? ' is-active' : '' }` }>
+							<button
+								type="button"
+								className={ `${ classPrefix }__trigger${ isActive ? ' is-active' : '' }` }
+								aria-expanded={ isActive }
+								onClick={ () => onChange( tab.id ) }
+							>
+								<span>{ tab.label }</span>
+								<span className={ `${ classPrefix }__arrow` } aria-hidden="true">
+									{ isActive ? '▲' : '▼' }
+								</span>
+							</button>
+							{ isActive && <div className={ `${ classPrefix }__panel` }>{ renderPanel( tab.id ) }</div>}
+						</div>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+}

package/src/index.tsx

@@ -9,6 +9,7 @@ export { Pagination, type PaginationProps } from './Pagination.tsx';
 export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
 export { Modal, type ModalProps } from './Modal.tsx';
 export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';
+export { ResponsiveTabs, type ResponsiveTabsProps } from './ResponsiveTabs.tsx';
 export { ShellTabs, type ShellTabsProps } from './ShellTabs.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';

package/styles/components.scss

@@ -144,6 +144,139 @@
 	padding-bottom: 0;
 }
 
+.ec-responsive-tabs {
+	display: grid;
+	gap: var(--spacing-md, 1rem);
+}
+
+.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 {
+	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);
+	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 {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	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;
+}
+
+.ec-responsive-tabs__item:last-of-type .ec-responsive-tabs__trigger:not(.is-active) {
+	border-bottom: 0;
+}
+
+.ec-responsive-tabs__trigger.is-active {
+	background: var(--background-color, #fff);
+	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;
+	}
+}
+
 // Panel
 .ec-panel {
 	border: 1px solid var(--border-color, #ddd);