@extrachill/components 0.4.6 → 0.4.8

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.4.8] - 2026-03-25
+
+### Changed
+- Refine shell tabs as a grouped header region
+
+## [0.4.7] - 2026-03-25
+
+### Changed
+- Add shell-level tabs layout for consistent block structure
+
 ## [0.4.6] - 2026-03-25
 
 ### Changed

package/dist/BlockShellHeader.d.ts

@@ -5,6 +5,7 @@ export interface BlockShellHeaderProps {
     actions?: ReactNode;
     className?: string;
     classPrefix?: string;
+    showDivider?: boolean;
 }
-export declare function BlockShellHeader({ title, description, actions, className, classPrefix, }: BlockShellHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlockShellHeader({ title, description, actions, className, classPrefix, showDivider, }: BlockShellHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BlockShellHeader.d.ts.map

package/dist/BlockShellHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockShellHeader.d.ts","sourceRoot":"","sources":["../src/BlockShellHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAE,EACjC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,EACd,WAAqC,GACrC,EAAE,qBAAqB,2CAUvB"}
+{"version":3,"file":"BlockShellHeader.d.ts","sourceRoot":"","sources":["../src/BlockShellHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAE,EACjC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,EACd,WAAqC,EACrC,WAAkB,GAClB,EAAE,qBAAqB,2CAgBvB"}

package/dist/BlockShellHeader.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function BlockShellHeader({ title, description, actions, className = '', classPrefix = 'ec-block-shell-header', }) {
-    return (_jsxs("div", { className: [classPrefix, className].filter(Boolean).join(' '), children: [_jsxs("div", { className: `${classPrefix}__main`, children: [title && _jsx("div", { className: `${classPrefix}__title`, children: title }), description && _jsx("div", { className: `${classPrefix}__description`, children: description })] }), actions && _jsx("div", { className: `${classPrefix}__actions`, children: actions })] }));
+export function BlockShellHeader({ title, description, actions, className = '', classPrefix = 'ec-block-shell-header', showDivider = true, }) {
+    return (_jsxs("div", { className: [
+            classPrefix,
+            showDivider ? `${classPrefix}--with-divider` : `${classPrefix}--without-divider`,
+            className,
+        ].filter(Boolean).join(' '), children: [_jsxs("div", { className: `${classPrefix}__main`, children: [title && _jsx("div", { className: `${classPrefix}__title`, children: title }), description && _jsx("div", { className: `${classPrefix}__description`, children: description })] }), actions && _jsx("div", { className: `${classPrefix}__actions`, children: actions })] }));
 }

package/dist/ShellTabs.d.ts

@@ -0,0 +1,13 @@
+import { type TabsProps } from './Tabs.tsx';
+export interface ShellTabsProps {
+    tabs: TabsProps['tabs'];
+    active: TabsProps['active'];
+    onChange: TabsProps['onChange'];
+    className?: string;
+    classPrefix?: string;
+    tabsClassName?: string;
+    tabsClassPrefix?: string;
+    showDivider?: boolean;
+}
+export declare function ShellTabs({ tabs, active, onChange, className, classPrefix, tabsClassName, tabsClassPrefix, showDivider, }: ShellTabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShellTabs.d.ts.map

package/dist/ShellTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellTabs.d.ts","sourceRoot":"","sources":["../src/ShellTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,WAAW,cAAc;IAC9B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAE,EAC1B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAc,EACd,WAA6B,EAC7B,aAAkB,EAClB,eAA2B,EAC3B,WAAkB,GAClB,EAAE,cAAc,2CAkBhB"}

package/dist/ShellTabs.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "./Tabs.js";
+export function ShellTabs({ tabs, active, onChange, className = '', classPrefix = 'ec-shell-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', showDivider = true, }) {
+    return (_jsx("div", { className: [
+            classPrefix,
+            showDivider ? `${classPrefix}--with-divider` : `${classPrefix}--without-divider`,
+            className,
+        ].filter(Boolean).join(' '), children: _jsx(Tabs, { tabs: tabs, active: active, onChange: onChange, className: tabsClassName, classPrefix: tabsClassPrefix }) }));
+}

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 { ShellTabs, type ShellTabsProps } from './ShellTabs.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';
 export { PanelHeader, type PanelHeaderProps } from './PanelHeader.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,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,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 { ShellTabs } from "./ShellTabs.js";
 export { Panel } from "./Panel.js";
 export { Surface } from "./Surface.js";
 export { PanelHeader } from "./PanelHeader.js";

package/package.json

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

package/src/BlockShellHeader.tsx

@@ -6,6 +6,7 @@ export interface BlockShellHeaderProps {
 	actions?: ReactNode;
 	className?: string;
 	classPrefix?: string;
+	showDivider?: boolean;
 }
 
 export function BlockShellHeader( {
@@ -14,9 +15,16 @@ export function BlockShellHeader( {
 	actions,
 	className = '',
 	classPrefix = 'ec-block-shell-header',
+	showDivider = true,
 }: BlockShellHeaderProps ) {
 	return (
-		<div className={ [ classPrefix, className ].filter( Boolean ).join( ' ' ) }>
+		<div
+			className={ [
+				classPrefix,
+				showDivider ? `${ classPrefix }--with-divider` : `${ classPrefix }--without-divider`,
+				className,
+			].filter( Boolean ).join( ' ' ) }
+		>
 			<div className={ `${ classPrefix }__main` }>
 				{ title && <div className={ `${ classPrefix }__title` }>{ title }</div> }
 				{ description && <div className={ `${ classPrefix }__description` }>{ description }</div> }

package/src/ShellTabs.tsx

@@ -0,0 +1,41 @@
+import { Tabs, type TabsProps } from './Tabs.tsx';
+
+export interface ShellTabsProps {
+	tabs: TabsProps['tabs'];
+	active: TabsProps['active'];
+	onChange: TabsProps['onChange'];
+	className?: string;
+	classPrefix?: string;
+	tabsClassName?: string;
+	tabsClassPrefix?: string;
+	showDivider?: boolean;
+}
+
+export function ShellTabs( {
+	tabs,
+	active,
+	onChange,
+	className = '',
+	classPrefix = 'ec-shell-tabs',
+	tabsClassName = '',
+	tabsClassPrefix = 'ec-tabs',
+	showDivider = true,
+}: ShellTabsProps ) {
+	return (
+		<div
+			className={ [
+				classPrefix,
+				showDivider ? `${ classPrefix }--with-divider` : `${ classPrefix }--without-divider`,
+				className,
+			].filter( Boolean ).join( ' ' ) }
+		>
+			<Tabs
+				tabs={ tabs }
+				active={ active }
+				onChange={ onChange }
+				className={ tabsClassName }
+				classPrefix={ tabsClassPrefix }
+			/>
+		</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 { ShellTabs, type ShellTabsProps } from './ShellTabs.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';
 export { PanelHeader, type PanelHeaderProps } from './PanelHeader.tsx';

package/styles/components.scss

@@ -128,6 +128,22 @@
 	}
 }
 
+.ec-shell-tabs {
+	display: grid;
+	gap: var(--spacing-sm, 0.5rem);
+	padding-bottom: var(--spacing-md, 1rem);
+	background: var(--card-background, #f1f5f9);
+}
+
+.ec-shell-tabs--with-divider {
+	border-bottom: 1px solid var(--border-color, #ddd);
+}
+
+.ec-shell-tabs--without-divider {
+	border-bottom: 0;
+	padding-bottom: 0;
+}
+
 // Panel
 .ec-panel {
 	border: 1px solid var(--border-color, #ddd);
@@ -195,10 +211,18 @@
 	gap: var(--spacing-md, 1rem);
 	flex-wrap: wrap;
 	padding-bottom: var(--spacing-md, 1rem);
-	border-bottom: 1px solid var(--border-color, #ddd);
 	background: var(--card-background, #f1f5f9);
 }
 
+.ec-block-shell-header--with-divider {
+	border-bottom: 1px solid var(--border-color, #ddd);
+}
+
+.ec-block-shell-header--without-divider {
+	border-bottom: 0;
+	padding-bottom: 0;
+}
+
 .ec-block-shell-header__main {
 	display: grid;
 	gap: var(--spacing-xs, 0.25rem);
@@ -385,6 +409,13 @@
 		padding-bottom: var(--spacing-sm, 0.5rem);
 	}
 
+	.ec-shell-tabs {
+		margin-left: calc(var(--spacing-md, 1rem) * -1);
+		margin-right: calc(var(--spacing-md, 1rem) * -1);
+		padding-left: var(--spacing-md, 1rem);
+		padding-right: var(--spacing-md, 1rem);
+	}
+
 	.ec-panel {
 		background: var(--background-color, #fff);
 		border-radius: 0;