@extrachill/components 0.4.3 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.4.5] - 2026-03-25
+
+### Changed
+- Add shared shell-contained header primitive
+
 ## [0.4.2] - 2026-03-25
 
 ### Changed

package/dist/BlockShellHeader.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface BlockShellHeaderProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+    classPrefix?: string;
+}
+export declare function BlockShellHeader({ title, description, actions, className, classPrefix, }: BlockShellHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlockShellHeader.d.ts.map

package/dist/BlockShellHeader.d.ts.map

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

package/dist/BlockShellHeader.js

@@ -0,0 +1,4 @@
+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 })] }));
+}

package/dist/index.d.ts

@@ -18,4 +18,5 @@ export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
 export { MediaField, type MediaFieldProps } from './MediaField.tsx';
 export { BlockShell, type BlockShellProps } from './BlockShell.tsx';
 export { BlockIntro, type BlockIntroProps } from './BlockIntro.tsx';
+export { BlockShellHeader, type BlockShellHeaderProps } from './BlockShellHeader.tsx';
 //# sourceMappingURL=index.d.ts.map

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,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,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"}
+{"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,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,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

@@ -18,3 +18,4 @@ export { ImagePreview } from "./ImagePreview.js";
 export { MediaField } from "./MediaField.js";
 export { BlockShell } from "./BlockShell.js";
 export { BlockIntro } from "./BlockIntro.js";
+export { BlockShellHeader } from "./BlockShellHeader.js";

package/package.json

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

package/src/BlockShellHeader.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+export interface BlockShellHeaderProps {
+	title?: ReactNode;
+	description?: ReactNode;
+	actions?: ReactNode;
+	className?: string;
+	classPrefix?: string;
+}
+
+export function BlockShellHeader( {
+	title,
+	description,
+	actions,
+	className = '',
+	classPrefix = 'ec-block-shell-header',
+}: BlockShellHeaderProps ) {
+	return (
+		<div className={ [ classPrefix, className ].filter( Boolean ).join( ' ' ) }>
+			<div className={ `${ classPrefix }__main` }>
+				{ title && <div className={ `${ classPrefix }__title` }>{ title }</div> }
+				{ description && <div className={ `${ classPrefix }__description` }>{ description }</div> }
+			</div>
+			{ actions && <div className={ `${ classPrefix }__actions` }>{ actions }</div> }
+		</div>
+	);
+}

package/src/index.tsx

@@ -19,3 +19,4 @@ export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
 export { MediaField, type MediaFieldProps } from './MediaField.tsx';
 export { BlockShell, type BlockShellProps } from './BlockShell.tsx';
 export { BlockIntro, type BlockIntroProps } from './BlockIntro.tsx';
+export { BlockShellHeader, type BlockShellHeaderProps } from './BlockShellHeader.tsx';

package/styles/components.scss

@@ -175,6 +175,44 @@
 	color: var(--text-color, #111);
 }
 
+.ec-block-shell-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	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__main {
+	display: grid;
+	gap: var(--spacing-xs, 0.25rem);
+}
+
+.ec-block-shell-header__title {
+	margin: 0;
+	font-family: var(--font-family-heading, inherit);
+	font-size: var(--font-size-2xl, 1.75rem);
+	font-weight: 700;
+	color: var(--text-color, #111);
+}
+
+.ec-block-shell-header__description {
+	margin: 0;
+	font-size: var(--font-size-body, 1.125rem);
+	line-height: 1.6;
+	color: var(--text-color, #111);
+}
+
+.ec-block-shell-header__actions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm, 0.5rem);
+	flex-wrap: wrap;
+}
+
 .ec-panel--compact {
 	padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 	border-radius: var(--border-radius-md, 6px);
@@ -295,13 +333,22 @@
 		border-radius: 0;
 		border-left: 0;
 		border-right: 0;
+		border-top: 1px solid var(--border-color, #ddd);
+		border-bottom: 1px solid var(--border-color, #ddd);
 		margin: 0;
 		max-width: 100%;
 		padding: var(--spacing-md, 1rem);
 	}
 
+	.ec-block-shell-header {
+		padding-bottom: var(--spacing-sm, 0.5rem);
+	}
+
 	.ec-panel {
+		background: var(--background-color, #fff);
 		border-radius: 0;
+		border-left: 0;
+		border-right: 0;
 		padding: var(--spacing-sm, 0.5rem) 0;
 		margin-left: calc(var(--spacing-md, 1rem) * -1);
 		margin-right: calc(var(--spacing-md, 1rem) * -1);
@@ -309,6 +356,10 @@
 		padding-right: var(--spacing-md, 1rem);
 	}
 
+	.ec-panel .ec-panel {
+		background: var(--card-background, #f1f5f9);
+	}
+
 	.ec-panel-header {
 		padding-bottom: var(--spacing-sm, 0.5rem);
 	}