@extrachill/components 0.4.24 → 0.4.25

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 (7) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/ResponsiveTabs.d.ts +3 -1
  3. package/dist/ResponsiveTabs.d.ts.map +1 -1
  4. package/dist/ResponsiveTabs.js +14 -13
  5. package/package.json +1 -1
  6. package/src/ResponsiveTabs.tsx +20 -11
  7. package/styles/components.scss +25 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,10 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.4.25] - 2026-03-26
4
+
5
+ ### Changed
6
+ - move shared tab layout into components
7
+
3
8
  ## [0.4.23] - 2026-03-25
4
9
 
5
10
  ### Changed
package/dist/ResponsiveTabs.d.ts CHANGED
@@ -7,6 +7,8 @@ export interface ResponsiveTabsProps {
7
7
  renderPanel: (id: string) => ReactNode;
8
8
  className?: string;
9
9
  classPrefix?: string;
10
+ innerClassName?: string;
11
+ innerMaxWidth?: 'none' | 'narrow' | 'wide';
10
12
  tabsClassName?: string;
11
13
  tabsClassPrefix?: string;
12
14
  mobileBreakpoint?: number;
@@ -15,5 +17,5 @@ export interface ResponsiveTabsProps {
15
17
  syncWithHash?: boolean;
16
18
  hashPrefix?: string;
17
19
  }
18
- export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, syncWithHash, hashPrefix, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
20
+ export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, innerClassName, innerMaxWidth, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, syncWithHash, hashPrefix, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
19
21
  //# sourceMappingURL=ResponsiveTabs.d.ts.map
package/dist/ResponsiveTabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,EACtB,YAAoB,EACpB,UAAmB,GACnB,EAAE,mBAAmB,kDA6IrB"}
1
+ {"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,cAAmB,EACnB,aAAsB,EACtB,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,EACtB,YAAoB,EACpB,UAAmB,GACnB,EAAE,mBAAmB,kDAkJrB"}
package/dist/ResponsiveTabs.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useEffect, useMemo, useState } from 'react';
3
3
  import { Tabs } from "./Tabs.js";
4
- export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 480, accordionClassName = '', showDesktopTabs = true, syncWithHash = false, hashPrefix = 'tab-', }) {
4
+ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', innerClassName = '', innerMaxWidth = 'none', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 480, accordionClassName = '', showDesktopTabs = true, syncWithHash = false, hashPrefix = 'tab-', }) {
5
5
  const [isMobile, setIsMobile] = useState(() => {
6
6
  if (typeof window === 'undefined') {
7
7
  return false;
@@ -62,6 +62,7 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
62
62
  const rootClass = useMemo(() => [
63
63
  classPrefix,
64
64
  isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`,
65
+ innerMaxWidth !== 'none' ? `${classPrefix}--inner-${innerMaxWidth}` : '',
65
66
  className,
66
67
  ]
67
68
  .filter(Boolean)
@@ -70,17 +71,17 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
70
71
  return null;
71
72
  }
72
73
  if (!isMobile) {
73
- return (_jsxs("div", { className: rootClass, children: [showDesktopTabs && (_jsx(Tabs, { tabs: tabs, active: active, onChange: handleChange, className: tabsClassName, classPrefix: tabsClassPrefix })), _jsx("div", { className: `${classPrefix}__desktop-panel`, children: renderPanel(active) })] }));
74
+ return (_jsx("div", { className: rootClass, children: _jsxs("div", { className: [`${classPrefix}__inner`, innerClassName].filter(Boolean).join(' '), children: [showDesktopTabs && (_jsx(Tabs, { tabs: tabs, active: active, onChange: handleChange, className: tabsClassName, classPrefix: tabsClassPrefix })), _jsx("div", { className: `${classPrefix}__desktop-panel`, children: renderPanel(active) })] }) }));
74
75
  }
75
- return (_jsx("div", { className: rootClass, children: _jsx("div", { className: [`${classPrefix}__accordion`, accordionClassName].filter(Boolean).join(' '), children: tabs.map((tab) => {
76
- const isActive = tab.id === mobileActive;
77
- return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => {
78
- if (isActive) {
79
- setMobileActive(null);
80
- return;
81
- }
82
- setMobileActive(tab.id);
83
- handleChange(tab.id);
84
- }, 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
- }) }) }));
76
+ return (_jsx("div", { className: rootClass, children: _jsx("div", { className: [`${classPrefix}__inner`, innerClassName].filter(Boolean).join(' '), children: _jsx("div", { className: [`${classPrefix}__accordion`, accordionClassName].filter(Boolean).join(' '), children: tabs.map((tab) => {
77
+ const isActive = tab.id === mobileActive;
78
+ return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => {
79
+ if (isActive) {
80
+ setMobileActive(null);
81
+ return;
82
+ }
83
+ setMobileActive(tab.id);
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));
86
+ }) }) }) }));
86
87
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@extrachill/components",
3
- "version": "0.4.24",
3
+ "version": "0.4.25",
4
4
  "description": "Shared React components for the Extra Chill Platform.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/ResponsiveTabs.tsx CHANGED
@@ -9,6 +9,8 @@ export interface ResponsiveTabsProps {
9
9
  renderPanel: ( id: string ) => ReactNode;
10
10
  className?: string;
11
11
  classPrefix?: string;
12
+ innerClassName?: string;
13
+ innerMaxWidth?: 'none' | 'narrow' | 'wide';
12
14
  tabsClassName?: string;
13
15
  tabsClassPrefix?: string;
14
16
  mobileBreakpoint?: number;
@@ -25,6 +27,8 @@ export function ResponsiveTabs( {
25
27
  renderPanel,
26
28
  className = '',
27
29
  classPrefix = 'ec-responsive-tabs',
30
+ innerClassName = '',
31
+ innerMaxWidth = 'none',
28
32
  tabsClassName = '',
29
33
  tabsClassPrefix = 'ec-tabs',
30
34
  mobileBreakpoint = 480,
@@ -111,6 +115,7 @@ export function ResponsiveTabs( {
111
115
  () => [
112
116
  classPrefix,
113
117
  isMobile ? `${ classPrefix }--mobile` : `${ classPrefix }--desktop`,
118
+ innerMaxWidth !== 'none' ? `${ classPrefix }--inner-${ innerMaxWidth }` : '',
114
119
  className,
115
120
  ]
116
121
  .filter( Boolean )
@@ -125,23 +130,26 @@ export function ResponsiveTabs( {
125
130
  if ( ! isMobile ) {
126
131
  return (
127
132
  <div className={ rootClass }>
128
- { showDesktopTabs && (
129
- <Tabs
130
- tabs={ tabs }
131
- active={ active }
132
- onChange={ handleChange }
133
- className={ tabsClassName }
134
- classPrefix={ tabsClassPrefix }
135
- />
136
- ) }
137
- <div className={ `${ classPrefix }__desktop-panel` }>{ renderPanel( active ) }</div>
133
+ <div className={ [ `${ classPrefix }__inner`, innerClassName ].filter( Boolean ).join( ' ' ) }>
134
+ { showDesktopTabs && (
135
+ <Tabs
136
+ tabs={ tabs }
137
+ active={ active }
138
+ onChange={ handleChange }
139
+ className={ tabsClassName }
140
+ classPrefix={ tabsClassPrefix }
141
+ />
142
+ ) }
143
+ <div className={ `${ classPrefix }__desktop-panel` }>{ renderPanel( active ) }</div>
144
+ </div>
138
145
  </div>
139
146
  );
140
147
  }
141
148
 
142
149
  return (
143
150
  <div className={ rootClass }>
144
- <div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
151
+ <div className={ [ `${ classPrefix }__inner`, innerClassName ].filter( Boolean ).join( ' ' ) }>
152
+ <div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
145
153
  { tabs.map( ( tab ) => {
146
154
  const isActive = tab.id === mobileActive;
147
155
 
@@ -170,6 +178,7 @@ export function ResponsiveTabs( {
170
178
  </div>
171
179
  );
172
180
  } ) }
181
+ </div>
173
182
  </div>
174
183
  </div>
175
184
  );
package/styles/components.scss CHANGED
@@ -149,6 +149,25 @@
149
149
  gap: var(--spacing-md, 1rem);
150
150
  }
151
151
 
152
+ .ec-responsive-tabs__inner {
153
+ width: 100%;
154
+ min-width: 0;
155
+ }
156
+
157
+ .ec-responsive-tabs--inner-narrow .ec-responsive-tabs__inner {
158
+ max-width: 700px;
159
+ }
160
+
161
+ .ec-responsive-tabs--inner-wide .ec-responsive-tabs__inner {
162
+ max-width: 1080px;
163
+ }
164
+
165
+ .ec-responsive-tabs .ec-tabs__tabs {
166
+ padding-bottom: calc(var(--spacing-md, 1rem) + var(--spacing-sm, 0.5rem));
167
+ margin-bottom: var(--spacing-sm, 0.5rem);
168
+ border-bottom: 1px solid var(--border-color, #ddd);
169
+ }
170
+
152
171
  .ec-responsive-tabs__desktop-panel {
153
172
  display: grid;
154
173
  background: var(--background-color, #fff);
@@ -230,6 +249,12 @@
230
249
  }
231
250
 
232
251
  @media (max-width: 480px) {
252
+ .ec-responsive-tabs__inner {
253
+ max-width: none;
254
+ padding-left: var(--spacing-md, 1rem);
255
+ padding-right: var(--spacing-md, 1rem);
256
+ }
257
+
233
258
  .ec-responsive-tabs .ec-tabs__tabs,
234
259
  .ec-responsive-tabs__desktop-panel {
235
260
  display: none;