@nuskin/nextgen-header 1.5.0 → 1.6.0
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.
- package/package-dist/index.css +0 -325
- package/package-dist/index.css.map +1 -1
- package/package-dist/index.d.ts +1 -65
- package/package-dist/index.js +481 -100946
- package/package-dist/index.js.map +1 -1
- package/package-dist/index.mjs +465 -100566
- package/package-dist/index.mjs.map +1 -1
- package/package.json +5 -5
- package/package-dist/2630a3e3eab21c607e21.svg +0 -14
- package/package-dist/295183786cd8a1389865.woff +0 -0
- package/package-dist/a4e97f5a2a64f0ab1323.eot +0 -0
- package/package-dist/c94f7671dcc99dce43e2.ttf +0 -0
- package/package-dist/fb6f3c230cb846e25247.gif +0 -0
package/package-dist/index.css
CHANGED
|
@@ -70,330 +70,5 @@ img {
|
|
|
70
70
|
padding: 0 10px;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
-
@charset 'UTF-8';
|
|
74
|
-
/* Slider */
|
|
75
|
-
.slick-loading .slick-list
|
|
76
|
-
{
|
|
77
|
-
background: #fff url(fb6f3c230cb846e25247.gif) center center no-repeat;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
/* Icons */
|
|
81
|
-
@font-face
|
|
82
|
-
{
|
|
83
|
-
font-family: 'slick';
|
|
84
|
-
font-weight: normal;
|
|
85
|
-
font-style: normal;
|
|
86
|
-
|
|
87
|
-
src: url(a4e97f5a2a64f0ab1323.eot);
|
|
88
|
-
src: url(a4e97f5a2a64f0ab1323.eot?#iefix) format('embedded-opentype'), url(295183786cd8a1389865.woff) format('woff'), url(c94f7671dcc99dce43e2.ttf) format('truetype'), url(2630a3e3eab21c607e21.svg#slick) format('svg');
|
|
89
|
-
}
|
|
90
|
-
/* Arrows */
|
|
91
|
-
.slick-prev,
|
|
92
|
-
.slick-next
|
|
93
|
-
{
|
|
94
|
-
font-size: 0;
|
|
95
|
-
line-height: 0;
|
|
96
|
-
|
|
97
|
-
position: absolute;
|
|
98
|
-
top: 50%;
|
|
99
|
-
|
|
100
|
-
display: block;
|
|
101
|
-
|
|
102
|
-
width: 20px;
|
|
103
|
-
height: 20px;
|
|
104
|
-
padding: 0;
|
|
105
|
-
-webkit-transform: translate(0, -50%);
|
|
106
|
-
-ms-transform: translate(0, -50%);
|
|
107
|
-
transform: translate(0, -50%);
|
|
108
|
-
|
|
109
|
-
cursor: pointer;
|
|
110
|
-
|
|
111
|
-
color: transparent;
|
|
112
|
-
border: none;
|
|
113
|
-
outline: none;
|
|
114
|
-
background: transparent;
|
|
115
|
-
}
|
|
116
|
-
.slick-prev:hover,
|
|
117
|
-
.slick-prev:focus,
|
|
118
|
-
.slick-next:hover,
|
|
119
|
-
.slick-next:focus
|
|
120
|
-
{
|
|
121
|
-
color: transparent;
|
|
122
|
-
outline: none;
|
|
123
|
-
background: transparent;
|
|
124
|
-
}
|
|
125
|
-
.slick-prev:hover:before,
|
|
126
|
-
.slick-prev:focus:before,
|
|
127
|
-
.slick-next:hover:before,
|
|
128
|
-
.slick-next:focus:before
|
|
129
|
-
{
|
|
130
|
-
opacity: 1;
|
|
131
|
-
}
|
|
132
|
-
.slick-prev.slick-disabled:before,
|
|
133
|
-
.slick-next.slick-disabled:before
|
|
134
|
-
{
|
|
135
|
-
opacity: .25;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.slick-prev:before,
|
|
139
|
-
.slick-next:before
|
|
140
|
-
{
|
|
141
|
-
font-family: 'slick';
|
|
142
|
-
font-size: 20px;
|
|
143
|
-
line-height: 1;
|
|
144
|
-
|
|
145
|
-
opacity: .75;
|
|
146
|
-
color: white;
|
|
147
|
-
|
|
148
|
-
-webkit-font-smoothing: antialiased;
|
|
149
|
-
-moz-osx-font-smoothing: grayscale;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.slick-prev
|
|
153
|
-
{
|
|
154
|
-
left: -25px;
|
|
155
|
-
}
|
|
156
|
-
[dir='rtl'] .slick-prev
|
|
157
|
-
{
|
|
158
|
-
right: -25px;
|
|
159
|
-
left: auto;
|
|
160
|
-
}
|
|
161
|
-
.slick-prev:before
|
|
162
|
-
{
|
|
163
|
-
content: '←';
|
|
164
|
-
}
|
|
165
|
-
[dir='rtl'] .slick-prev:before
|
|
166
|
-
{
|
|
167
|
-
content: '→';
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.slick-next
|
|
171
|
-
{
|
|
172
|
-
right: -25px;
|
|
173
|
-
}
|
|
174
|
-
[dir='rtl'] .slick-next
|
|
175
|
-
{
|
|
176
|
-
right: auto;
|
|
177
|
-
left: -25px;
|
|
178
|
-
}
|
|
179
|
-
.slick-next:before
|
|
180
|
-
{
|
|
181
|
-
content: '→';
|
|
182
|
-
}
|
|
183
|
-
[dir='rtl'] .slick-next:before
|
|
184
|
-
{
|
|
185
|
-
content: '←';
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
/* Dots */
|
|
189
|
-
.slick-dotted.slick-slider
|
|
190
|
-
{
|
|
191
|
-
margin-bottom: 30px;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.slick-dots
|
|
195
|
-
{
|
|
196
|
-
position: absolute;
|
|
197
|
-
bottom: -25px;
|
|
198
|
-
|
|
199
|
-
display: block;
|
|
200
|
-
|
|
201
|
-
width: 100%;
|
|
202
|
-
padding: 0;
|
|
203
|
-
margin: 0;
|
|
204
|
-
|
|
205
|
-
list-style: none;
|
|
206
|
-
|
|
207
|
-
text-align: center;
|
|
208
|
-
}
|
|
209
|
-
.slick-dots li
|
|
210
|
-
{
|
|
211
|
-
position: relative;
|
|
212
|
-
|
|
213
|
-
display: inline-block;
|
|
214
|
-
|
|
215
|
-
width: 20px;
|
|
216
|
-
height: 20px;
|
|
217
|
-
margin: 0 5px;
|
|
218
|
-
padding: 0;
|
|
219
|
-
|
|
220
|
-
cursor: pointer;
|
|
221
|
-
}
|
|
222
|
-
.slick-dots li button
|
|
223
|
-
{
|
|
224
|
-
font-size: 0;
|
|
225
|
-
line-height: 0;
|
|
226
|
-
|
|
227
|
-
display: block;
|
|
228
|
-
|
|
229
|
-
width: 20px;
|
|
230
|
-
height: 20px;
|
|
231
|
-
padding: 5px;
|
|
232
|
-
|
|
233
|
-
cursor: pointer;
|
|
234
|
-
|
|
235
|
-
color: transparent;
|
|
236
|
-
border: 0;
|
|
237
|
-
outline: none;
|
|
238
|
-
background: transparent;
|
|
239
|
-
}
|
|
240
|
-
.slick-dots li button:hover,
|
|
241
|
-
.slick-dots li button:focus
|
|
242
|
-
{
|
|
243
|
-
outline: none;
|
|
244
|
-
}
|
|
245
|
-
.slick-dots li button:hover:before,
|
|
246
|
-
.slick-dots li button:focus:before
|
|
247
|
-
{
|
|
248
|
-
opacity: 1;
|
|
249
|
-
}
|
|
250
|
-
.slick-dots li button:before
|
|
251
|
-
{
|
|
252
|
-
font-family: 'slick';
|
|
253
|
-
font-size: 6px;
|
|
254
|
-
line-height: 20px;
|
|
255
|
-
|
|
256
|
-
position: absolute;
|
|
257
|
-
top: 0;
|
|
258
|
-
left: 0;
|
|
259
|
-
|
|
260
|
-
width: 20px;
|
|
261
|
-
height: 20px;
|
|
262
|
-
|
|
263
|
-
content: '•';
|
|
264
|
-
text-align: center;
|
|
265
|
-
|
|
266
|
-
opacity: .25;
|
|
267
|
-
color: black;
|
|
268
|
-
|
|
269
|
-
-webkit-font-smoothing: antialiased;
|
|
270
|
-
-moz-osx-font-smoothing: grayscale;
|
|
271
|
-
}
|
|
272
|
-
.slick-dots li.slick-active button:before
|
|
273
|
-
{
|
|
274
|
-
opacity: .75;
|
|
275
|
-
color: black;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
/* Slider */
|
|
279
|
-
.slick-slider
|
|
280
|
-
{
|
|
281
|
-
position: relative;
|
|
282
|
-
|
|
283
|
-
display: block;
|
|
284
|
-
box-sizing: border-box;
|
|
285
|
-
|
|
286
|
-
-webkit-user-select: none;
|
|
287
|
-
-moz-user-select: none;
|
|
288
|
-
-ms-user-select: none;
|
|
289
|
-
user-select: none;
|
|
290
|
-
|
|
291
|
-
-webkit-touch-callout: none;
|
|
292
|
-
-khtml-user-select: none;
|
|
293
|
-
-ms-touch-action: pan-y;
|
|
294
|
-
touch-action: pan-y;
|
|
295
|
-
-webkit-tap-highlight-color: transparent;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.slick-list
|
|
299
|
-
{
|
|
300
|
-
position: relative;
|
|
301
|
-
|
|
302
|
-
display: block;
|
|
303
|
-
overflow: hidden;
|
|
304
|
-
|
|
305
|
-
margin: 0;
|
|
306
|
-
padding: 0;
|
|
307
|
-
}
|
|
308
|
-
.slick-list:focus
|
|
309
|
-
{
|
|
310
|
-
outline: none;
|
|
311
|
-
}
|
|
312
|
-
.slick-list.dragging
|
|
313
|
-
{
|
|
314
|
-
cursor: pointer;
|
|
315
|
-
cursor: hand;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.slick-slider .slick-track,
|
|
319
|
-
.slick-slider .slick-list
|
|
320
|
-
{
|
|
321
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
322
|
-
-moz-transform: translate3d(0, 0, 0);
|
|
323
|
-
-ms-transform: translate3d(0, 0, 0);
|
|
324
|
-
-o-transform: translate3d(0, 0, 0);
|
|
325
|
-
transform: translate3d(0, 0, 0);
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
.slick-track
|
|
329
|
-
{
|
|
330
|
-
position: relative;
|
|
331
|
-
top: 0;
|
|
332
|
-
left: 0;
|
|
333
|
-
|
|
334
|
-
display: block;
|
|
335
|
-
margin-left: auto;
|
|
336
|
-
margin-right: auto;
|
|
337
|
-
}
|
|
338
|
-
.slick-track:before,
|
|
339
|
-
.slick-track:after
|
|
340
|
-
{
|
|
341
|
-
display: table;
|
|
342
|
-
|
|
343
|
-
content: '';
|
|
344
|
-
}
|
|
345
|
-
.slick-track:after
|
|
346
|
-
{
|
|
347
|
-
clear: both;
|
|
348
|
-
}
|
|
349
|
-
.slick-loading .slick-track
|
|
350
|
-
{
|
|
351
|
-
visibility: hidden;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
.slick-slide
|
|
355
|
-
{
|
|
356
|
-
display: none;
|
|
357
|
-
float: left;
|
|
358
|
-
|
|
359
|
-
height: 100%;
|
|
360
|
-
min-height: 1px;
|
|
361
|
-
}
|
|
362
|
-
[dir='rtl'] .slick-slide
|
|
363
|
-
{
|
|
364
|
-
float: right;
|
|
365
|
-
}
|
|
366
|
-
.slick-slide img
|
|
367
|
-
{
|
|
368
|
-
display: block;
|
|
369
|
-
}
|
|
370
|
-
.slick-slide.slick-loading img
|
|
371
|
-
{
|
|
372
|
-
display: none;
|
|
373
|
-
}
|
|
374
|
-
.slick-slide.dragging img
|
|
375
|
-
{
|
|
376
|
-
pointer-events: none;
|
|
377
|
-
}
|
|
378
|
-
.slick-initialized .slick-slide
|
|
379
|
-
{
|
|
380
|
-
display: block;
|
|
381
|
-
}
|
|
382
|
-
.slick-loading .slick-slide
|
|
383
|
-
{
|
|
384
|
-
visibility: hidden;
|
|
385
|
-
}
|
|
386
|
-
.slick-vertical .slick-slide
|
|
387
|
-
{
|
|
388
|
-
display: block;
|
|
389
|
-
|
|
390
|
-
height: auto;
|
|
391
|
-
|
|
392
|
-
border: 1px solid transparent;
|
|
393
|
-
}
|
|
394
|
-
.slick-arrow.slick-hidden {
|
|
395
|
-
display: none;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
73
|
|
|
399
74
|
/*# sourceMappingURL=index.css.map*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.css","mappings":"AAAA,kBAAkB;AAClB;EACE,SAAS;EACT,UAAU;EACV,sBAAsB;AACxB;;AAEA;EACE;;cAEY;EACZ,mCAAmC;EACnC,kCAAkC;EAClC,gBAAgB;EAChB,WAAW;AACb;;AAEA;EACE,iBAAiB;EACjB,cAAc;EACd,eAAe;AACjB;;AAEA,eAAe;AACf;EACE,gBAAgB;EAChB,gBAAgB;EAChB,mBAAmB;AACrB;;AAEA;EACE,mBAAmB;AACrB;;AAEA,YAAY;AACZ;EACE,oBAAoB;EACpB,eAAe;EACf,YAAY;EACZ,aAAa;AACf;;AAEA,UAAU;AACV;EACE,cAAc;EACd,qBAAqB;AACvB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,0BAA0B;AAC5B;;AAEA,WAAW;AACX;EACE,eAAe;EACf,YAAY;AACd;;AAEA,eAAe;AACf;EACE;IACE,eAAe;EACjB;AACF,C
|
|
1
|
+
{"version":3,"file":"index.css","mappings":"AAAA,kBAAkB;AAClB;EACE,SAAS;EACT,UAAU;EACV,sBAAsB;AACxB;;AAEA;EACE;;cAEY;EACZ,mCAAmC;EACnC,kCAAkC;EAClC,gBAAgB;EAChB,WAAW;AACb;;AAEA;EACE,iBAAiB;EACjB,cAAc;EACd,eAAe;AACjB;;AAEA,eAAe;AACf;EACE,gBAAgB;EAChB,gBAAgB;EAChB,mBAAmB;AACrB;;AAEA;EACE,mBAAmB;AACrB;;AAEA,YAAY;AACZ;EACE,oBAAoB;EACpB,eAAe;EACf,YAAY;EACZ,aAAa;AACf;;AAEA,UAAU;AACV;EACE,cAAc;EACd,qBAAqB;AACvB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,0BAA0B;AAC5B;;AAEA,WAAW;AACX;EACE,eAAe;EACf,YAAY;AACd;;AAEA,eAAe;AACf;EACE;IACE,eAAe;EACjB;AACF,C","sources":["webpack://@nuskin/nextgen-header/./src/styles/globals.css"],"sourcesContent":["/* Global styles */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n line-height: 1.6;\n color: #333;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 10px;\n}\n\n/* Typography */\nh1, h2, h3, h4, h5, h6 {\n font-weight: 600;\n line-height: 1.2;\n margin-bottom: 1rem;\n}\n\np {\n margin-bottom: 1rem;\n}\n\n/* Buttons */\nbutton {\n font-family: inherit;\n cursor: pointer;\n border: none;\n outline: none;\n}\n\n/* Links */\na {\n color: #008ab0;\n text-decoration: none;\n}\n\na:link {\n color: #008ab0;\n}\n\na:visited {\n color: #008ab0;\n}\n\na:hover {\n text-decoration: underline;\n}\n\n/* Images */\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .container {\n padding: 0 10px;\n }\n}"],"names":[],"sourceRoot":""}
|
package/package-dist/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import type { FC
|
|
2
|
-
import type { ValidationMap, WeakValidationMap } from "prop-types";
|
|
1
|
+
import type { FC } from "react";
|
|
3
2
|
|
|
4
3
|
export interface HeaderProps {
|
|
5
4
|
/** Geographic / market code (e.g. US). Required on SSR unless `requestUrl` is passed into `renderAndExtractContext`. */
|
|
@@ -12,66 +11,3 @@ export interface HeaderProps {
|
|
|
12
11
|
* Shell entry: styled container + resolves locale from `market`/`language` or the browser URL, then renders the header placeholder.
|
|
13
12
|
*/
|
|
14
13
|
export const Header: FC<HeaderProps>;
|
|
15
|
-
|
|
16
|
-
/** Tabs */
|
|
17
|
-
export interface TabItem {
|
|
18
|
-
id: string;
|
|
19
|
-
label: string;
|
|
20
|
-
data?: unknown;
|
|
21
|
-
}
|
|
22
|
-
export interface TabsProps {
|
|
23
|
-
/** Ordered list of tab descriptors. */
|
|
24
|
-
tabs: TabItem[];
|
|
25
|
-
/** "click" — tab activates on click/Enter/Space. "hover" — tab activates on hover/focus. */
|
|
26
|
-
activationMode: "click" | "hover";
|
|
27
|
-
/** Id of the tab that should be selected on mount. */
|
|
28
|
-
defaultActiveId?: string;
|
|
29
|
-
/** Called whenever the active tab changes. */
|
|
30
|
-
onActiveChange?: (tab: TabItem) => void;
|
|
31
|
-
/** Renders the panel content for the currently active tab. Return `null` to show no panel. */
|
|
32
|
-
renderPanel: (activeTab: TabItem) => ReactNode;
|
|
33
|
-
/** Horizontal alignment of desktop tab buttons. Defaults to "flex-start". */
|
|
34
|
-
tabAlign?: "center" | "flex-start";
|
|
35
|
-
className?: string;
|
|
36
|
-
/** Accessible label for the tab list */
|
|
37
|
-
ariaLabel?: string;
|
|
38
|
-
/**
|
|
39
|
-
* When `true`, applies top-navigation layout constraints to the root element
|
|
40
|
-
* (max-width: 1920px, padding: 32px 32px 16px). Defaults to `false`.
|
|
41
|
-
*/
|
|
42
|
-
isTopNav?: boolean;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Primitive tab component. Caller owns tab data and panel rendering.
|
|
47
|
-
* Wrap with {@link TabsMobileDrawerProvider} when using multiple Tabs instances on the same page.
|
|
48
|
-
*/
|
|
49
|
-
export const Tabs: FC<TabsProps>;
|
|
50
|
-
|
|
51
|
-
/** MarketOrTopNavTabs */
|
|
52
|
-
export interface MarketOrTopNavTabsProps {
|
|
53
|
-
/**
|
|
54
|
-
* "marketSelector" — click-to-activate, centered tabs, built from market-region CMS data.
|
|
55
|
-
* "topNav" — hover-to-activate, left-aligned tabs, built from top-navigation CMS data.
|
|
56
|
-
*/
|
|
57
|
-
variant: "marketSelector" | "topNav";
|
|
58
|
-
/** Raw CMS response. Shape is normalised internally for each variant. */
|
|
59
|
-
data?: unknown;
|
|
60
|
-
/** Id of the tab that should be pre-selected on mount. */
|
|
61
|
-
defaultActiveId?: string;
|
|
62
|
-
/** Called whenever the active tab changes. */
|
|
63
|
-
onActiveChange?: (tab: TabItem) => void;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Opinionated wrapper around {@link Tabs} that normalises raw CMS data, sets activation mode,
|
|
68
|
-
* tab alignment, and ARIA labels based on `variant`.
|
|
69
|
-
*/
|
|
70
|
-
export const MarketOrTopNavTabs: FC<MarketOrTopNavTabsProps>;
|
|
71
|
-
|
|
72
|
-
/** TabsMobileDrawerProvider */
|
|
73
|
-
export interface TabsMobileDrawerProviderProps {
|
|
74
|
-
children?: ReactNode;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export const TabsMobileDrawerProvider: FC<TabsMobileDrawerProviderProps>;
|