@extrachill/components 0.4.34 → 0.4.36

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 (17) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/BlockShell.js +1 -1
  3. package/dist/BlockShellHeader.d.ts +1 -2
  4. package/dist/BlockShellHeader.d.ts.map +1 -1
  5. package/dist/BlockShellHeader.js +1 -3
  6. package/dist/ResponsiveTabs.js +1 -1
  7. package/dist/ShellTabs.d.ts +1 -2
  8. package/dist/ShellTabs.d.ts.map +1 -1
  9. package/dist/ShellTabs.js +1 -2
  10. package/dist/initResponsiveTabsDom.js +1 -1
  11. package/package.json +1 -1
  12. package/src/BlockShell.tsx +1 -1
  13. package/src/BlockShellHeader.tsx +0 -4
  14. package/src/ResponsiveTabs.tsx +1 -1
  15. package/src/ShellTabs.tsx +0 -3
  16. package/src/initResponsiveTabsDom.ts +1 -1
  17. package/styles/components.scss +52 -25
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.4.36] - 2026-03-26
4
+
5
+ ### Changed
6
+ - split global and mobile full-width utilities
7
+
8
+ ## [0.4.35] - 2026-03-26
9
+
10
+ ### Changed
11
+ - unify shared card vertical padding
12
+ - remove shell divider variants
13
+
3
14
  ## [0.4.34] - 2026-03-26
4
15
 
5
16
  ### Fixed
package/dist/BlockShell.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  export function BlockShell({ children, className = '', classPrefix = 'ec-block-shell', compact = false, depth = 0, }) {
3
3
  const shellClass = [
4
4
  classPrefix,
5
- 'ec-edge-shell',
5
+ 'ec-mobile-full-width-panel',
6
6
  compact ? `${classPrefix}--compact` : '',
7
7
  `${classPrefix}--depth-${depth}`,
8
8
  className,
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,2CAiBvB"}
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,2CAevB"}
package/dist/BlockShellHeader.js CHANGED
@@ -1,9 +1,7 @@
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
- 'ec-edge-gutter',
6
- showDivider ? `${classPrefix}--with-divider` : `${classPrefix}--without-divider`,
7
5
  className,
8
6
  ].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 })] }));
9
7
  }
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 ec-edge-gutter`, 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`, 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 ec-edge-gutter';
48
+ panel.className = 'ec-responsive-tabs__panel';
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.34",
3
+ "version": "0.4.36",
4
4
  "description": "Shared React components for the Extra Chill Platform.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/BlockShell.tsx CHANGED
@@ -17,7 +17,7 @@ export function BlockShell( {
17
17
  }: BlockShellProps ) {
18
18
  const shellClass = [
19
19
  classPrefix,
20
- 'ec-edge-shell',
20
+ 'ec-mobile-full-width-panel',
21
21
  compact ? `${ classPrefix }--compact` : '',
22
22
  `${ classPrefix }--depth-${ depth }`,
23
23
  className,
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,14 +14,11 @@ 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
- 'ec-edge-gutter',
25
- showDivider ? `${ classPrefix }--with-divider` : `${ classPrefix }--without-divider`,
26
22
  className,
27
23
  ].filter( Boolean ).join( ' ' ) }
28
24
  >
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 ec-edge-gutter` }>{ renderPanel( tab.id ) }</div>}
177
+ { isActive && <div className={ `${ classPrefix }__panel` }>{ 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 ec-edge-gutter';
77
+ panel.className = 'ec-responsive-tabs__panel';
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);
@@ -264,7 +254,8 @@
264
254
  display: none;
265
255
  }
266
256
 
267
- .ec-edge-shell .ec-responsive-tabs__item {
257
+ .ec-edge-shell .ec-responsive-tabs__item,
258
+ .ec-mobile-full-width-panel .ec-responsive-tabs__item {
268
259
  margin-left: calc(var(--spacing-md, 1rem) * -1);
269
260
  margin-right: calc(var(--spacing-md, 1rem) * -1);
270
261
  border-left: 0;
@@ -283,6 +274,13 @@
283
274
  gap: var(--spacing-md, 1rem);
284
275
  }
285
276
 
277
+ .ec-panel,
278
+ .ec-section,
279
+ .ec-surface-card {
280
+ padding-top: var(--spacing-md, 1rem);
281
+ padding-bottom: var(--spacing-md, 1rem);
282
+ }
283
+
286
284
  // Block shell / top-level wrapper
287
285
  .ec-block-shell {
288
286
  background: transparent;
@@ -357,16 +355,6 @@
357
355
  align-items: center;
358
356
  gap: var(--spacing-md, 1rem);
359
357
  flex-wrap: wrap;
360
- padding-bottom: var(--spacing-md, 1rem);
361
- }
362
-
363
- .ec-block-shell-header--with-divider {
364
- border-bottom: 1px solid var(--border-color, #ddd);
365
- }
366
-
367
- .ec-block-shell-header--without-divider {
368
- border-bottom: 0;
369
- padding-bottom: 0;
370
358
  }
371
359
 
372
360
  .ec-block-shell-header__main {
@@ -503,6 +491,39 @@
503
491
  gap: var(--spacing-xs, 0.25rem);
504
492
  }
505
493
 
494
+ .ec-field-group__control > input:not([type='checkbox']):not([type='radio']):not([type='file']),
495
+ .ec-field-group__control > select,
496
+ .ec-field-group__control > textarea {
497
+ width: 100%;
498
+ padding: var(--spacing-sm, 0.5rem);
499
+ border: 1px solid var(--border-color, #ddd);
500
+ border-radius: var(--border-radius-sm, 4px);
501
+ background: var(--background-color, #fff);
502
+ color: var(--text-color, #111);
503
+ font: inherit;
504
+ font-size: var(--font-size-base, 1rem);
505
+ box-sizing: border-box;
506
+ max-width: 100%;
507
+ }
508
+
509
+ .ec-field-group__control > textarea {
510
+ min-height: 120px;
511
+ resize: vertical;
512
+ font-family: inherit;
513
+ }
514
+
515
+ .ec-field-group__control > input[disabled],
516
+ .ec-field-group__control > select[disabled],
517
+ .ec-field-group__control > textarea[disabled] {
518
+ cursor: not-allowed;
519
+ opacity: 0.6;
520
+ }
521
+
522
+ .ec-field-group__control > input[type='checkbox'],
523
+ .ec-field-group__control > input[type='radio'] {
524
+ margin: 0;
525
+ }
526
+
506
527
  .ec-field-group__help {
507
528
  font-size: var(--font-size-sm, 0.875rem);
508
529
  color: var(--muted-text, #666);
@@ -543,25 +564,31 @@
543
564
  padding-bottom: var(--spacing-sm, 0.5rem);
544
565
  }
545
566
 
546
- .ec-edge-shell .ec-shell-tabs {
567
+ .ec-edge-shell .ec-shell-tabs,
568
+ .ec-mobile-full-width-panel .ec-shell-tabs {
547
569
  margin-left: calc(var(--spacing-md, 1rem) * -1);
548
570
  margin-right: calc(var(--spacing-md, 1rem) * -1);
549
571
  padding-left: var(--spacing-md, 1rem);
550
572
  padding-right: var(--spacing-md, 1rem);
551
573
  }
552
574
 
553
- .ec-edge-shell .ec-panel {
575
+ .ec-edge-shell .ec-panel,
576
+ .ec-mobile-full-width-panel .ec-panel {
554
577
  border-radius: 0;
555
578
  border-left: 0;
556
579
  border-right: 0;
557
- padding: var(--spacing-sm, 0.5rem) 0;
580
+ padding-top: var(--spacing-md, 1rem);
581
+ padding-bottom: var(--spacing-md, 1rem);
582
+ padding-left: 0;
583
+ padding-right: 0;
558
584
  margin-left: calc(var(--spacing-md, 1rem) * -1);
559
585
  margin-right: calc(var(--spacing-md, 1rem) * -1);
560
586
  padding-left: var(--spacing-md, 1rem);
561
587
  padding-right: var(--spacing-md, 1rem);
562
588
  }
563
589
 
564
- .ec-edge-shell .ec-section {
590
+ .ec-edge-shell .ec-section,
591
+ .ec-mobile-full-width-panel .ec-section {
565
592
  border-radius: 0;
566
593
  border-left: 0;
567
594
  border-right: 0;