@extrachill/components 0.4.33 → 0.4.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/BlockShellHeader.d.ts +1 -2
  3. package/dist/BlockShellHeader.d.ts.map +1 -1
  4. package/dist/BlockShellHeader.js +2 -2
  5. package/dist/ResponsiveTabs.js +1 -1
  6. package/dist/ShellTabs.d.ts +1 -2
  7. package/dist/ShellTabs.d.ts.map +1 -1
  8. package/dist/ShellTabs.js +1 -2
  9. package/dist/initResponsiveTabsDom.js +1 -1
  10. package/package.json +1 -1
  11. package/src/BlockShellHeader.tsx +1 -3
  12. package/src/ResponsiveTabs.tsx +1 -1
  13. package/src/ShellTabs.tsx +0 -3
  14. package/src/initResponsiveTabsDom.ts +1 -1
  15. package/styles/components.scss +50 -23
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.4.35] - 2026-03-26
4
+
5
+ ### Changed
6
+ - unify shared card vertical padding
7
+ - remove shell divider variants
8
+
9
+ ## [0.4.34] - 2026-03-26
10
+
11
+ ### Fixed
12
+ - keep active tabs on card background
13
+
3
14
  ## [0.4.33] - 2026-03-26
4
15
 
5
16
  ### Changed
package/dist/BlockShellHeader.d.ts CHANGED
@@ -5,7 +5,6 @@ export interface BlockShellHeaderProps {
5
5
  actions?: ReactNode;
6
6
  className?: string;
7
7
  classPrefix?: string;
8
- showDivider?: boolean;
9
8
  }
10
- export declare function BlockShellHeader({ title, description, actions, className, classPrefix, showDivider, }: BlockShellHeaderProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function BlockShellHeader({ title, description, actions, className, classPrefix, }: BlockShellHeaderProps): import("react/jsx-runtime").JSX.Element;
11
10
  //# sourceMappingURL=BlockShellHeader.d.ts.map
package/dist/BlockShellHeader.d.ts.map CHANGED
@@ -1 +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;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"}
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,2CAgBvB"}
package/dist/BlockShellHeader.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- export function BlockShellHeader({ title, description, actions, className = '', classPrefix = 'ec-block-shell-header', showDivider = true, }) {
2
+ export function BlockShellHeader({ title, description, actions, className = '', classPrefix = 'ec-block-shell-header', }) {
3
3
  return (_jsxs("div", { className: [
4
4
  classPrefix,
5
- showDivider ? `${classPrefix}--with-divider` : `${classPrefix}--without-divider`,
5
+ 'ec-edge-gutter',
6
6
  className,
7
7
  ].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 })] }));
8
8
  }
package/dist/ResponsiveTabs.js CHANGED
@@ -82,6 +82,6 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
82
82
  }
83
83
  setMobileActive(tab.id);
84
84
  handleChange(tab.id);
85
- }, 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));
85
+ }, children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel ec-edge-gutter`, children: renderPanel(tab.id) })] }, tab.id));
86
86
  }) }) }) }));
87
87
  }
package/dist/ShellTabs.d.ts CHANGED
@@ -7,7 +7,6 @@ export interface ShellTabsProps {
7
7
  classPrefix?: string;
8
8
  tabsClassName?: string;
9
9
  tabsClassPrefix?: string;
10
- showDivider?: boolean;
11
10
  }
12
- export declare function ShellTabs({ tabs, active, onChange, className, classPrefix, tabsClassName, tabsClassPrefix, showDivider, }: ShellTabsProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function ShellTabs({ tabs, active, onChange, className, classPrefix, tabsClassName, tabsClassPrefix, }: ShellTabsProps): import("react/jsx-runtime").JSX.Element;
13
12
  //# sourceMappingURL=ShellTabs.d.ts.map
package/dist/ShellTabs.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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;CACzB;AAED,wBAAgB,SAAS,CAAE,EAC1B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAc,EACd,WAA6B,EAC7B,aAAkB,EAClB,eAA2B,GAC3B,EAAE,cAAc,2CAiBhB"}
package/dist/ShellTabs.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Tabs } from "./Tabs.js";
3
- export function ShellTabs({ tabs, active, onChange, className = '', classPrefix = 'ec-shell-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', showDivider = true, }) {
3
+ export function ShellTabs({ tabs, active, onChange, className = '', classPrefix = 'ec-shell-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', }) {
4
4
  return (_jsx("div", { className: [
5
5
  classPrefix,
6
- showDivider ? `${classPrefix}--with-divider` : `${classPrefix}--without-divider`,
7
6
  className,
8
7
  ].filter(Boolean).join(' '), children: _jsx(Tabs, { tabs: tabs, active: active, onChange: onChange, className: tabsClassName, classPrefix: tabsClassPrefix }) }));
9
8
  }
package/dist/initResponsiveTabsDom.js CHANGED
@@ -45,7 +45,7 @@ function renderAccordion(root, activeTabId, hashPrefix, onPanelRender) {
45
45
  const template = root.querySelector(`template[data-tab-panel="${tabId}"]`);
46
46
  if (template) {
47
47
  const panel = document.createElement('div');
48
- panel.className = 'ec-responsive-tabs__panel';
48
+ panel.className = 'ec-responsive-tabs__panel ec-edge-gutter';
49
49
  const content = createNodeFromTemplate(template);
50
50
  if (content) {
51
51
  panel.appendChild(content);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@extrachill/components",
3
- "version": "0.4.33",
3
+ "version": "0.4.35",
4
4
  "description": "Shared React components for the Extra Chill Platform.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/BlockShellHeader.tsx CHANGED
@@ -6,7 +6,6 @@ export interface BlockShellHeaderProps {
6
6
  actions?: ReactNode;
7
7
  className?: string;
8
8
  classPrefix?: string;
9
- showDivider?: boolean;
10
9
  }
11
10
 
12
11
  export function BlockShellHeader( {
@@ -15,13 +14,12 @@ export function BlockShellHeader( {
15
14
  actions,
16
15
  className = '',
17
16
  classPrefix = 'ec-block-shell-header',
18
- showDivider = true,
19
17
  }: BlockShellHeaderProps ) {
20
18
  return (
21
19
  <div
22
20
  className={ [
23
21
  classPrefix,
24
- showDivider ? `${ classPrefix }--with-divider` : `${ classPrefix }--without-divider`,
22
+ 'ec-edge-gutter',
25
23
  className,
26
24
  ].filter( Boolean ).join( ' ' ) }
27
25
  >
package/src/ResponsiveTabs.tsx CHANGED
@@ -174,7 +174,7 @@ export function ResponsiveTabs( {
174
174
  { isActive ? '▲' : '▼' }
175
175
  </span>
176
176
  </button>
177
- { isActive && <div className={ `${ classPrefix }__panel` }>{ renderPanel( tab.id ) }</div>}
177
+ { isActive && <div className={ `${ classPrefix }__panel ec-edge-gutter` }>{ renderPanel( tab.id ) }</div>}
178
178
  </div>
179
179
  );
180
180
  } ) }
package/src/ShellTabs.tsx CHANGED
@@ -8,7 +8,6 @@ export interface ShellTabsProps {
8
8
  classPrefix?: string;
9
9
  tabsClassName?: string;
10
10
  tabsClassPrefix?: string;
11
- showDivider?: boolean;
12
11
  }
13
12
 
14
13
  export function ShellTabs( {
@@ -19,13 +18,11 @@ export function ShellTabs( {
19
18
  classPrefix = 'ec-shell-tabs',
20
19
  tabsClassName = '',
21
20
  tabsClassPrefix = 'ec-tabs',
22
- showDivider = true,
23
21
  }: ShellTabsProps ) {
24
22
  return (
25
23
  <div
26
24
  className={ [
27
25
  classPrefix,
28
- showDivider ? `${ classPrefix }--with-divider` : `${ classPrefix }--without-divider`,
29
26
  className,
30
27
  ].filter( Boolean ).join( ' ' ) }
31
28
  >
package/src/initResponsiveTabsDom.ts CHANGED
@@ -74,7 +74,7 @@ function renderAccordion(
74
74
  const template = root.querySelector<HTMLTemplateElement>( `template[data-tab-panel="${ tabId }"]` );
75
75
  if ( template ) {
76
76
  const panel = document.createElement( 'div' );
77
- panel.className = 'ec-responsive-tabs__panel';
77
+ panel.className = 'ec-responsive-tabs__panel ec-edge-gutter';
78
78
  const content = createNodeFromTemplate( template );
79
79
  if ( content ) {
80
80
  panel.appendChild( content );
package/styles/components.scss CHANGED
@@ -131,19 +131,9 @@
131
131
  .ec-shell-tabs {
132
132
  display: grid;
133
133
  gap: var(--spacing-sm, 0.5rem);
134
- padding-bottom: var(--spacing-md, 1rem);
135
134
  background: var(--card-background, #f1f5f9);
136
135
  }
137
136
 
138
- .ec-shell-tabs--with-divider {
139
- border-bottom: 1px solid var(--border-color, #ddd);
140
- }
141
-
142
- .ec-shell-tabs--without-divider {
143
- border-bottom: 0;
144
- padding-bottom: 0;
145
- }
146
-
147
137
  .ec-responsive-tabs {
148
138
  display: grid;
149
139
  gap: var(--spacing-md, 1rem);
@@ -213,7 +203,7 @@
213
203
  }
214
204
 
215
205
  .ec-responsive-tabs__trigger.is-active {
216
- background: var(--background-color, #fff);
206
+ background: var(--card-background, #f8f8f8);
217
207
  color: var(--link-color, #0b5394);
218
208
  }
219
209
 
@@ -224,7 +214,6 @@
224
214
  }
225
215
 
226
216
  .ec-responsive-tabs__panel {
227
- padding: 0 var(--spacing-md, 1rem);
228
217
  background: var(--background-color, #fff);
229
218
  margin-bottom: 0;
230
219
  }
@@ -284,6 +273,13 @@
284
273
  gap: var(--spacing-md, 1rem);
285
274
  }
286
275
 
276
+ .ec-panel,
277
+ .ec-section,
278
+ .ec-surface-card {
279
+ padding-top: var(--spacing-md, 1rem);
280
+ padding-bottom: var(--spacing-md, 1rem);
281
+ }
282
+
287
283
  // Block shell / top-level wrapper
288
284
  .ec-block-shell {
289
285
  background: transparent;
@@ -326,6 +322,11 @@
326
322
  max-width: 1080px;
327
323
  }
328
324
 
325
+ .ec-block-shell-inner--centered {
326
+ margin-left: auto;
327
+ margin-right: auto;
328
+ }
329
+
329
330
  .ec-block-intro {
330
331
  display: grid;
331
332
  gap: var(--spacing-sm, 0.5rem);
@@ -353,16 +354,6 @@
353
354
  align-items: center;
354
355
  gap: var(--spacing-md, 1rem);
355
356
  flex-wrap: wrap;
356
- padding-bottom: var(--spacing-md, 1rem);
357
- }
358
-
359
- .ec-block-shell-header--with-divider {
360
- border-bottom: 1px solid var(--border-color, #ddd);
361
- }
362
-
363
- .ec-block-shell-header--without-divider {
364
- border-bottom: 0;
365
- padding-bottom: 0;
366
357
  }
367
358
 
368
359
  .ec-block-shell-header__main {
@@ -499,6 +490,39 @@
499
490
  gap: var(--spacing-xs, 0.25rem);
500
491
  }
501
492
 
493
+ .ec-field-group__control > input:not([type='checkbox']):not([type='radio']):not([type='file']),
494
+ .ec-field-group__control > select,
495
+ .ec-field-group__control > textarea {
496
+ width: 100%;
497
+ padding: var(--spacing-sm, 0.5rem);
498
+ border: 1px solid var(--border-color, #ddd);
499
+ border-radius: var(--border-radius-sm, 4px);
500
+ background: var(--background-color, #fff);
501
+ color: var(--text-color, #111);
502
+ font: inherit;
503
+ font-size: var(--font-size-base, 1rem);
504
+ box-sizing: border-box;
505
+ max-width: 100%;
506
+ }
507
+
508
+ .ec-field-group__control > textarea {
509
+ min-height: 120px;
510
+ resize: vertical;
511
+ font-family: inherit;
512
+ }
513
+
514
+ .ec-field-group__control > input[disabled],
515
+ .ec-field-group__control > select[disabled],
516
+ .ec-field-group__control > textarea[disabled] {
517
+ cursor: not-allowed;
518
+ opacity: 0.6;
519
+ }
520
+
521
+ .ec-field-group__control > input[type='checkbox'],
522
+ .ec-field-group__control > input[type='radio'] {
523
+ margin: 0;
524
+ }
525
+
502
526
  .ec-field-group__help {
503
527
  font-size: var(--font-size-sm, 0.875rem);
504
528
  color: var(--muted-text, #666);
@@ -550,7 +574,10 @@
550
574
  border-radius: 0;
551
575
  border-left: 0;
552
576
  border-right: 0;
553
- padding: var(--spacing-sm, 0.5rem) 0;
577
+ padding-top: var(--spacing-md, 1rem);
578
+ padding-bottom: var(--spacing-md, 1rem);
579
+ padding-left: 0;
580
+ padding-right: 0;
554
581
  margin-left: calc(var(--spacing-md, 1rem) * -1);
555
582
  margin-right: calc(var(--spacing-md, 1rem) * -1);
556
583
  padding-left: var(--spacing-md, 1rem);