@extrachill/components 0.4.25 → 0.4.27

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.4.27] - 2026-03-26
+
+### Changed
+- remove responsive tab divider styling
+
+## [0.4.26] - 2026-03-26
+
+### Changed
+- add shared block inner wrapper
+
 ## [0.4.25] - 2026-03-26
 
 ### Changed

package/dist/BlockShellInner.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface BlockShellInnerProps {
+    children: ReactNode;
+    className?: string;
+    classPrefix?: string;
+    maxWidth?: 'none' | 'narrow' | 'wide';
+}
+export declare function BlockShellInner({ children, className, classPrefix, maxWidth, }: BlockShellInnerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlockShellInner.d.ts.map

package/dist/BlockShellInner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockShellInner.d.ts","sourceRoot":"","sources":["../src/BlockShellInner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;CACtC;AAED,wBAAgB,eAAe,CAAE,EAChC,QAAQ,EACR,SAAc,EACd,WAAoC,EACpC,QAAiB,GACjB,EAAE,oBAAoB,2CAUtB"}

package/dist/BlockShellInner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BlockShellInner({ children, className = '', classPrefix = 'ec-block-shell-inner', maxWidth = 'none', }) {
+    const innerClass = [
+        classPrefix,
+        maxWidth !== 'none' ? `${classPrefix}--${maxWidth}` : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return _jsx("div", { className: innerClass, children: children });
+}

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { Badge, type BadgeProps } from './Badge.tsx';
 export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
 export { MediaField, type MediaFieldProps } from './MediaField.tsx';
 export { BlockShell, type BlockShellProps } from './BlockShell.tsx';
+export { BlockShellInner, type BlockShellInnerProps } from './BlockShellInner.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,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,KAAK,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAClG,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,qBAAqB,EAAE,KAAK,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAClG,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,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACnF,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

@@ -23,5 +23,6 @@ export { Badge } from "./Badge.js";
 export { ImagePreview } from "./ImagePreview.js";
 export { MediaField } from "./MediaField.js";
 export { BlockShell } from "./BlockShell.js";
+export { BlockShellInner } from "./BlockShellInner.js";
 export { BlockIntro } from "./BlockIntro.js";
 export { BlockShellHeader } from "./BlockShellHeader.js";

package/package.json

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

package/src/BlockShellInner.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface BlockShellInnerProps {
+	children: ReactNode;
+	className?: string;
+	classPrefix?: string;
+	maxWidth?: 'none' | 'narrow' | 'wide';
+}
+
+export function BlockShellInner( {
+	children,
+	className = '',
+	classPrefix = 'ec-block-shell-inner',
+	maxWidth = 'none',
+}: BlockShellInnerProps ) {
+	const innerClass = [
+		classPrefix,
+		maxWidth !== 'none' ? `${ classPrefix }--${ maxWidth }` : '',
+		className,
+	]
+		.filter( Boolean )
+		.join( ' ' );
+
+	return <div className={ innerClass }>{ children }</div>;
+}

package/src/index.tsx

@@ -24,5 +24,6 @@ export { Badge, type BadgeProps } from './Badge.tsx';
 export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
 export { MediaField, type MediaFieldProps } from './MediaField.tsx';
 export { BlockShell, type BlockShellProps } from './BlockShell.tsx';
+export { BlockShellInner, type BlockShellInnerProps } from './BlockShellInner.tsx';
 export { BlockIntro, type BlockIntroProps } from './BlockIntro.tsx';
 export { BlockShellHeader, type BlockShellHeaderProps } from './BlockShellHeader.tsx';

package/styles/components.scss

@@ -162,12 +162,6 @@
 	max-width: 1080px;
 }
 
-.ec-responsive-tabs .ec-tabs__tabs {
-	padding-bottom: calc(var(--spacing-md, 1rem) + var(--spacing-sm, 0.5rem));
-	margin-bottom: var(--spacing-sm, 0.5rem);
-	border-bottom: 1px solid var(--border-color, #ddd);
-}
-
 .ec-responsive-tabs__desktop-panel {
 	display: grid;
 	background: var(--background-color, #fff);
@@ -249,12 +243,16 @@
 }
 
 @media (max-width: 480px) {
-	.ec-responsive-tabs__inner {
+	.ec-block-shell-inner {
 		max-width: none;
 		padding-left: var(--spacing-md, 1rem);
 		padding-right: var(--spacing-md, 1rem);
 	}
 
+	.ec-responsive-tabs__inner {
+		max-width: none;
+	}
+
 	.ec-responsive-tabs .ec-tabs__tabs,
 	.ec-responsive-tabs__desktop-panel {
 		display: none;
@@ -308,6 +306,21 @@
 	border-radius: var(--border-radius-lg, 8px);
 }
 
+.ec-block-shell-inner {
+	width: 100%;
+	min-width: 0;
+	display: grid;
+	gap: var(--spacing-lg, 1.5rem);
+}
+
+.ec-block-shell-inner--narrow {
+	max-width: 700px;
+}
+
+.ec-block-shell-inner--wide {
+	max-width: 1080px;
+}
+
 .ec-block-intro {
 	display: grid;
 	gap: var(--spacing-sm, 0.5rem);