aravint-ui-navigation 1.0.19 → 1.0.21

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/dist/navigation.cjs.js +75 -4
  2. package/dist/navigation.css +1 -1
  3. package/dist/navigation.es.js +202 -4625
  4. package/dist/types/components/{Tabs/custom-tabs.d.ts → CustomTabs.d.ts} +7 -3
  5. package/dist/types/index.d.ts +2 -3
  6. package/package.json +1 -3
  7. package/dist/types/components/ui/tabs.d.ts +0 -14
package/dist/navigation.es.js CHANGED
@@ -1,4642 +1,219 @@
1
- var bn = Object.defineProperty;
2
- var hn = (e, t, n) => t in e ? bn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
3
- var ne = (e, t, n) => hn(e, typeof t != "symbol" ? t + "" : t, n);
4
- import { jsx as G, jsxs as ft } from "react/jsx-runtime";
5
- import * as d from "react";
6
- import vn, { createElement as pt } from "react";
7
- import * as yn from "react-dom";
8
- function _t(e) {
9
- var t, n, r = "";
10
- if (typeof e == "string" || typeof e == "number") r += e;
11
- else if (typeof e == "object") if (Array.isArray(e)) {
12
- var o = e.length;
13
- for (t = 0; t < o; t++) e[t] && (n = _t(e[t])) && (r && (r += " "), r += n);
14
- } else for (n in e) e[n] && (r && (r += " "), r += n);
15
- return r;
16
- }
17
- function zt() {
18
- for (var e, t, n = 0, r = "", o = arguments.length; n < o; n++) (e = arguments[n]) && (t = _t(e)) && (r && (r += " "), r += t);
19
- return r;
20
- }
21
- const et = "-", xn = (e) => {
22
- const t = kn(e), {
23
- conflictingClassGroups: n,
24
- conflictingClassGroupModifiers: r
25
- } = e;
26
- return {
27
- getClassGroupId: (i) => {
28
- const c = i.split(et);
29
- return c[0] === "" && c.length !== 1 && c.shift(), Dt(c, t) || wn(i);
30
- },
31
- getConflictingClassGroupIds: (i, c) => {
32
- const a = n[i] || [];
33
- return c && r[i] ? [...a, ...r[i]] : a;
34
- }
35
- };
36
- }, Dt = (e, t) => {
37
- var i;
38
- if (e.length === 0)
39
- return t.classGroupId;
40
- const n = e[0], r = t.nextPart.get(n), o = r ? Dt(e.slice(1), r) : void 0;
41
- if (o)
42
- return o;
43
- if (t.validators.length === 0)
44
- return;
45
- const s = e.join(et);
46
- return (i = t.validators.find(({
47
- validator: c
48
- }) => c(s))) == null ? void 0 : i.classGroupId;
49
- }, mt = /^\[(.+)\]$/, wn = (e) => {
50
- if (mt.test(e)) {
51
- const t = mt.exec(e)[1], n = t == null ? void 0 : t.substring(0, t.indexOf(":"));
52
- if (n)
53
- return "arbitrary.." + n;
54
- }
55
- }, kn = (e) => {
56
- const {
57
- theme: t,
58
- classGroups: n
59
- } = e, r = {
60
- nextPart: /* @__PURE__ */ new Map(),
61
- validators: []
62
- };
63
- for (const o in n)
64
- Ge(n[o], r, o, t);
65
- return r;
66
- }, Ge = (e, t, n, r) => {
67
- e.forEach((o) => {
68
- if (typeof o == "string") {
69
- const s = o === "" ? t : gt(t, o);
70
- s.classGroupId = n;
71
- return;
72
- }
73
- if (typeof o == "function") {
74
- if (En(o)) {
75
- Ge(o(r), t, n, r);
76
- return;
77
- }
78
- t.validators.push({
79
- validator: o,
80
- classGroupId: n
81
- });
82
- return;
83
- }
84
- Object.entries(o).forEach(([s, i]) => {
85
- Ge(i, gt(t, s), n, r);
86
- });
87
- });
88
- }, gt = (e, t) => {
89
- let n = e;
90
- return t.split(et).forEach((r) => {
91
- n.nextPart.has(r) || n.nextPart.set(r, {
92
- nextPart: /* @__PURE__ */ new Map(),
93
- validators: []
94
- }), n = n.nextPart.get(r);
95
- }), n;
96
- }, En = (e) => e.isThemeGetter, Rn = (e) => {
97
- if (e < 1)
98
- return {
99
- get: () => {
1
+ import { jsxs as p, jsx as e } from "react/jsx-runtime";
2
+ import { useState as I } from "react";
3
+ const E = ({
4
+ tabs: o,
5
+ defaultValue: c,
6
+ value: a,
7
+ onValueChange: i,
8
+ className: b = "",
9
+ tabListClassName: x = "",
10
+ tabButtonClassName: h = "",
11
+ contentClassName: g = "",
12
+ showTabNumbers: f = !0,
13
+ showContent: m = !0,
14
+ animated: u = !0
15
+ }) => {
16
+ var l;
17
+ const r = a !== void 0, [w, y] = I(
18
+ c || ((l = o[0]) == null ? void 0 : l.id) || ""
19
+ ), n = r ? a : w, F = (t) => {
20
+ r || y(t), i == null || i(t);
21
+ }, d = o.find((t) => t.id === n), v = {
22
+ display: "flex",
23
+ alignItems: "flex-end",
24
+ borderBottom: "1px solid #059669",
25
+ position: "sticky",
26
+ top: 0,
27
+ zIndex: 100,
28
+ flexShrink: 0
29
+ // padding + gap now come from .ctabs-list (responsive)
30
+ }, T = {
31
+ display: "flex",
32
+ alignItems: "center",
33
+ fontFamily: "inherit",
34
+ background: "transparent",
35
+ cursor: "pointer",
36
+ outline: "none",
37
+ transition: "all .2s ease",
38
+ position: "relative"
39
+ // padding + font-size + gap now come from .ctabs-btn (responsive)
40
+ }, k = {
41
+ background: "#E8F7F1",
42
+ color: "#059669",
43
+ fontWeight: 700,
44
+ borderTop: "3px solid #059669",
45
+ borderLeft: "1px solid #059669",
46
+ borderRight: "1px solid #059669",
47
+ // Paint over the green line
48
+ borderBottom: "1px solid #E8F7F1",
49
+ borderTopLeftRadius: 8,
50
+ borderTopRightRadius: 8,
51
+ marginBottom: -1,
52
+ zIndex: 2
53
+ }, R = {
54
+ background: "transparent",
55
+ color: "#2D3748",
56
+ borderTop: "3px solid transparent",
57
+ borderLeft: "1px solid transparent",
58
+ borderRight: "1px solid transparent",
59
+ borderBottom: "1px solid transparent",
60
+ borderTopLeftRadius: 8,
61
+ borderTopRightRadius: 8
62
+ }, S = {
63
+ background: "#FFFFFF",
64
+ color: "#059669",
65
+ fontWeight: 700,
66
+ border: "1px solid #059669"
67
+ }, z = {
68
+ background: "#FFFFFF",
69
+ color: "#374151",
70
+ fontWeight: "500",
71
+ border: "1px solid #D1D5DB"
72
+ }, B = {
73
+ background: "#FFFFFF",
74
+ border: "1px solid #D9E1E7",
75
+ borderTop: "none",
76
+ borderBottomLeftRadius: 12,
77
+ borderBottomRightRadius: 12,
78
+ boxShadow: "0 2px 6px rgba(0,0,0,.05)",
79
+ transition: u ? "opacity .2s ease" : void 0,
80
+ opacity: 1,
81
+ flex: 1,
82
+ overflowY: "auto",
83
+ minHeight: 0
84
+ };
85
+ return /* @__PURE__ */ p(
86
+ "div",
87
+ {
88
+ className: b,
89
+ style: {
90
+ display: "flex",
91
+ flexDirection: "column",
92
+ width: "100%",
93
+ height: "100%",
94
+ minHeight: 0,
95
+ overflow: "hidden"
100
96
  },
101
- set: () => {
102
- }
103
- };
104
- let t = 0, n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
105
- const o = (s, i) => {
106
- n.set(s, i), t++, t > e && (t = 0, r = n, n = /* @__PURE__ */ new Map());
107
- };
108
- return {
109
- get(s) {
110
- let i = n.get(s);
111
- if (i !== void 0)
112
- return i;
113
- if ((i = r.get(s)) !== void 0)
114
- return o(s, i), i;
115
- },
116
- set(s, i) {
117
- n.has(s) ? n.set(s, i) : o(s, i);
118
- }
119
- };
120
- }, He = "!", Ke = ":", In = Ke.length, Tn = (e) => {
121
- const {
122
- prefix: t,
123
- experimentalParseClassName: n
124
- } = e;
125
- let r = (o) => {
126
- const s = [];
127
- let i = 0, c = 0, a = 0, l;
128
- for (let p = 0; p < o.length; p++) {
129
- let m = o[p];
130
- if (i === 0 && c === 0) {
131
- if (m === Ke) {
132
- s.push(o.slice(a, p)), a = p + In;
133
- continue;
134
- }
135
- if (m === "/") {
136
- l = p;
137
- continue;
138
- }
139
- }
140
- m === "[" ? i++ : m === "]" ? i-- : m === "(" ? c++ : m === ")" && c--;
141
- }
142
- const u = s.length === 0 ? o : o.substring(a), g = Cn(u), A = g !== u, T = l && l > a ? l - a : void 0;
143
- return {
144
- modifiers: s,
145
- hasImportantModifier: A,
146
- baseClassName: g,
147
- maybePostfixModifierPosition: T
148
- };
149
- };
150
- if (t) {
151
- const o = t + Ke, s = r;
152
- r = (i) => i.startsWith(o) ? s(i.substring(o.length)) : {
153
- isExternal: !0,
154
- modifiers: [],
155
- hasImportantModifier: !1,
156
- baseClassName: i,
157
- maybePostfixModifierPosition: void 0
158
- };
159
- }
160
- if (n) {
161
- const o = r;
162
- r = (s) => n({
163
- className: s,
164
- parseClassName: o
165
- });
166
- }
167
- return r;
168
- }, Cn = (e) => e.endsWith(He) ? e.substring(0, e.length - 1) : e.startsWith(He) ? e.substring(1) : e, Nn = (e) => {
169
- const t = Object.fromEntries(e.orderSensitiveModifiers.map((r) => [r, !0]));
170
- return (r) => {
171
- if (r.length <= 1)
172
- return r;
173
- const o = [];
174
- let s = [];
175
- return r.forEach((i) => {
176
- i[0] === "[" || t[i] ? (o.push(...s.sort(), i), s = []) : s.push(i);
177
- }), o.push(...s.sort()), o;
178
- };
179
- }, Sn = (e) => ({
180
- cache: Rn(e.cacheSize),
181
- parseClassName: Tn(e),
182
- sortModifiers: Nn(e),
183
- ...xn(e)
184
- }), Mn = /\s+/, An = (e, t) => {
185
- const {
186
- parseClassName: n,
187
- getClassGroupId: r,
188
- getConflictingClassGroupIds: o,
189
- sortModifiers: s
190
- } = t, i = [], c = e.trim().split(Mn);
191
- let a = "";
192
- for (let l = c.length - 1; l >= 0; l -= 1) {
193
- const u = c[l], {
194
- isExternal: g,
195
- modifiers: A,
196
- hasImportantModifier: T,
197
- baseClassName: p,
198
- maybePostfixModifierPosition: m
199
- } = n(u);
200
- if (g) {
201
- a = u + (a.length > 0 ? " " + a : a);
202
- continue;
203
- }
204
- let x = !!m, E = r(x ? p.substring(0, m) : p);
205
- if (!E) {
206
- if (!x) {
207
- a = u + (a.length > 0 ? " " + a : a);
208
- continue;
209
- }
210
- if (E = r(p), !E) {
211
- a = u + (a.length > 0 ? " " + a : a);
212
- continue;
213
- }
214
- x = !1;
215
- }
216
- const w = s(A).join(":"), I = T ? w + He : w, f = I + E;
217
- if (i.includes(f))
218
- continue;
219
- i.push(f);
220
- const N = o(E, x);
221
- for (let z = 0; z < N.length; ++z) {
222
- const D = N[z];
223
- i.push(I + D);
224
- }
225
- a = u + (a.length > 0 ? " " + a : a);
226
- }
227
- return a;
228
- };
229
- function Pn() {
230
- let e = 0, t, n, r = "";
231
- for (; e < arguments.length; )
232
- (t = arguments[e++]) && (n = Vt(t)) && (r && (r += " "), r += n);
233
- return r;
234
- }
235
- const Vt = (e) => {
236
- if (typeof e == "string")
237
- return e;
238
- let t, n = "";
239
- for (let r = 0; r < e.length; r++)
240
- e[r] && (t = Vt(e[r])) && (n && (n += " "), n += t);
241
- return n;
242
- };
243
- function On(e, ...t) {
244
- let n, r, o, s = i;
245
- function i(a) {
246
- const l = t.reduce((u, g) => g(u), e());
247
- return n = Sn(l), r = n.cache.get, o = n.cache.set, s = c, c(a);
248
- }
249
- function c(a) {
250
- const l = r(a);
251
- if (l)
252
- return l;
253
- const u = An(a, n);
254
- return o(a, u), u;
255
- }
256
- return function() {
257
- return s(Pn.apply(null, arguments));
258
- };
259
- }
260
- const j = (e) => {
261
- const t = (n) => n[e] || [];
262
- return t.isThemeGetter = !0, t;
263
- }, Bt = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Ft = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Ln = /^\d+\/\d+$/, _n = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, zn = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Dn = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, Vn = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Bn = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, de = (e) => Ln.test(e), M = (e) => !!e && !Number.isNaN(Number(e)), ie = (e) => !!e && Number.isInteger(Number(e)), Ue = (e) => e.endsWith("%") && M(e.slice(0, -1)), re = (e) => _n.test(e), Fn = () => !0, Un = (e) => (
264
- // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
265
- // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
266
- // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
267
- zn.test(e) && !Dn.test(e)
268
- ), Ut = () => !1, $n = (e) => Vn.test(e), Wn = (e) => Bn.test(e), jn = (e) => !h(e) && !v(e), Gn = (e) => pe(e, jt, Ut), h = (e) => Bt.test(e), ce = (e) => pe(e, Gt, Un), $e = (e) => pe(e, Xn, M), bt = (e) => pe(e, $t, Ut), Hn = (e) => pe(e, Wt, Wn), ke = (e) => pe(e, Ht, $n), v = (e) => Ft.test(e), be = (e) => me(e, Gt), Kn = (e) => me(e, Zn), ht = (e) => me(e, $t), Yn = (e) => me(e, jt), qn = (e) => me(e, Wt), Ee = (e) => me(e, Ht, !0), pe = (e, t, n) => {
269
- const r = Bt.exec(e);
270
- return r ? r[1] ? t(r[1]) : n(r[2]) : !1;
271
- }, me = (e, t, n = !1) => {
272
- const r = Ft.exec(e);
273
- return r ? r[1] ? t(r[1]) : n : !1;
274
- }, $t = (e) => e === "position" || e === "percentage", Wt = (e) => e === "image" || e === "url", jt = (e) => e === "length" || e === "size" || e === "bg-size", Gt = (e) => e === "length", Xn = (e) => e === "number", Zn = (e) => e === "family-name", Ht = (e) => e === "shadow", Jn = () => {
275
- const e = j("color"), t = j("font"), n = j("text"), r = j("font-weight"), o = j("tracking"), s = j("leading"), i = j("breakpoint"), c = j("container"), a = j("spacing"), l = j("radius"), u = j("shadow"), g = j("inset-shadow"), A = j("text-shadow"), T = j("drop-shadow"), p = j("blur"), m = j("perspective"), x = j("aspect"), E = j("ease"), w = j("animate"), I = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], f = () => [
276
- "center",
277
- "top",
278
- "bottom",
279
- "left",
280
- "right",
281
- "top-left",
282
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
283
- "left-top",
284
- "top-right",
285
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
286
- "right-top",
287
- "bottom-right",
288
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
289
- "right-bottom",
290
- "bottom-left",
291
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
292
- "left-bottom"
293
- ], N = () => [...f(), v, h], z = () => ["auto", "hidden", "clip", "visible", "scroll"], D = () => ["auto", "contain", "none"], y = () => [v, h, a], O = () => [de, "full", "auto", ...y()], b = () => [ie, "none", "subgrid", v, h], R = () => ["auto", {
294
- span: ["full", ie, v, h]
295
- }, ie, v, h], C = () => [ie, "auto", v, h], F = () => ["auto", "min", "max", "fr", v, h], U = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], Y = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], V = () => ["auto", ...y()], q = () => [de, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...y()], k = () => [e, v, h], _ = () => [...f(), ht, bt, {
296
- position: [v, h]
297
- }], ee = () => ["no-repeat", {
298
- repeat: ["", "x", "y", "space", "round"]
299
- }], J = () => ["auto", "cover", "contain", Yn, Gn, {
300
- size: [v, h]
301
- }], te = () => [Ue, be, ce], S = () => [
302
- // Deprecated since Tailwind CSS v4.0.0
303
- "",
304
- "none",
305
- "full",
306
- l,
307
- v,
308
- h
309
- ], B = () => ["", M, be, ce], X = () => ["solid", "dashed", "dotted", "double"], ae = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], $ = () => [M, Ue, ht, bt], we = () => [
310
- // Deprecated since Tailwind CSS v4.0.0
311
- "",
312
- "none",
313
- p,
314
- v,
315
- h
316
- ], P = () => ["none", M, v, h], L = () => ["none", M, v, h], W = () => [M, v, h], Q = () => [de, "full", ...y()];
317
- return {
318
- cacheSize: 500,
319
- theme: {
320
- animate: ["spin", "ping", "pulse", "bounce"],
321
- aspect: ["video"],
322
- blur: [re],
323
- breakpoint: [re],
324
- color: [Fn],
325
- container: [re],
326
- "drop-shadow": [re],
327
- ease: ["in", "out", "in-out"],
328
- font: [jn],
329
- "font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
330
- "inset-shadow": [re],
331
- leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
332
- perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
333
- radius: [re],
334
- shadow: [re],
335
- spacing: ["px", M],
336
- text: [re],
337
- "text-shadow": [re],
338
- tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
339
- },
340
- classGroups: {
341
- // --------------
342
- // --- Layout ---
343
- // --------------
344
- /**
345
- * Aspect Ratio
346
- * @see https://tailwindcss.com/docs/aspect-ratio
347
- */
348
- aspect: [{
349
- aspect: ["auto", "square", de, h, v, x]
350
- }],
351
- /**
352
- * Container
353
- * @see https://tailwindcss.com/docs/container
354
- * @deprecated since Tailwind CSS v4.0.0
355
- */
356
- container: ["container"],
357
- /**
358
- * Columns
359
- * @see https://tailwindcss.com/docs/columns
360
- */
361
- columns: [{
362
- columns: [M, h, v, c]
363
- }],
364
- /**
365
- * Break After
366
- * @see https://tailwindcss.com/docs/break-after
367
- */
368
- "break-after": [{
369
- "break-after": I()
370
- }],
371
- /**
372
- * Break Before
373
- * @see https://tailwindcss.com/docs/break-before
374
- */
375
- "break-before": [{
376
- "break-before": I()
377
- }],
378
- /**
379
- * Break Inside
380
- * @see https://tailwindcss.com/docs/break-inside
381
- */
382
- "break-inside": [{
383
- "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
384
- }],
385
- /**
386
- * Box Decoration Break
387
- * @see https://tailwindcss.com/docs/box-decoration-break
388
- */
389
- "box-decoration": [{
390
- "box-decoration": ["slice", "clone"]
391
- }],
392
- /**
393
- * Box Sizing
394
- * @see https://tailwindcss.com/docs/box-sizing
395
- */
396
- box: [{
397
- box: ["border", "content"]
398
- }],
399
- /**
400
- * Display
401
- * @see https://tailwindcss.com/docs/display
402
- */
403
- display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
404
- /**
405
- * Screen Reader Only
406
- * @see https://tailwindcss.com/docs/display#screen-reader-only
407
- */
408
- sr: ["sr-only", "not-sr-only"],
409
- /**
410
- * Floats
411
- * @see https://tailwindcss.com/docs/float
412
- */
413
- float: [{
414
- float: ["right", "left", "none", "start", "end"]
415
- }],
416
- /**
417
- * Clear
418
- * @see https://tailwindcss.com/docs/clear
419
- */
420
- clear: [{
421
- clear: ["left", "right", "both", "none", "start", "end"]
422
- }],
423
- /**
424
- * Isolation
425
- * @see https://tailwindcss.com/docs/isolation
426
- */
427
- isolation: ["isolate", "isolation-auto"],
428
- /**
429
- * Object Fit
430
- * @see https://tailwindcss.com/docs/object-fit
431
- */
432
- "object-fit": [{
433
- object: ["contain", "cover", "fill", "none", "scale-down"]
434
- }],
435
- /**
436
- * Object Position
437
- * @see https://tailwindcss.com/docs/object-position
438
- */
439
- "object-position": [{
440
- object: N()
441
- }],
442
- /**
443
- * Overflow
444
- * @see https://tailwindcss.com/docs/overflow
445
- */
446
- overflow: [{
447
- overflow: z()
448
- }],
449
- /**
450
- * Overflow X
451
- * @see https://tailwindcss.com/docs/overflow
452
- */
453
- "overflow-x": [{
454
- "overflow-x": z()
455
- }],
456
- /**
457
- * Overflow Y
458
- * @see https://tailwindcss.com/docs/overflow
459
- */
460
- "overflow-y": [{
461
- "overflow-y": z()
462
- }],
463
- /**
464
- * Overscroll Behavior
465
- * @see https://tailwindcss.com/docs/overscroll-behavior
466
- */
467
- overscroll: [{
468
- overscroll: D()
469
- }],
470
- /**
471
- * Overscroll Behavior X
472
- * @see https://tailwindcss.com/docs/overscroll-behavior
473
- */
474
- "overscroll-x": [{
475
- "overscroll-x": D()
476
- }],
477
- /**
478
- * Overscroll Behavior Y
479
- * @see https://tailwindcss.com/docs/overscroll-behavior
480
- */
481
- "overscroll-y": [{
482
- "overscroll-y": D()
483
- }],
484
- /**
485
- * Position
486
- * @see https://tailwindcss.com/docs/position
487
- */
488
- position: ["static", "fixed", "absolute", "relative", "sticky"],
489
- /**
490
- * Top / Right / Bottom / Left
491
- * @see https://tailwindcss.com/docs/top-right-bottom-left
492
- */
493
- inset: [{
494
- inset: O()
495
- }],
496
- /**
497
- * Right / Left
498
- * @see https://tailwindcss.com/docs/top-right-bottom-left
499
- */
500
- "inset-x": [{
501
- "inset-x": O()
502
- }],
503
- /**
504
- * Top / Bottom
505
- * @see https://tailwindcss.com/docs/top-right-bottom-left
506
- */
507
- "inset-y": [{
508
- "inset-y": O()
509
- }],
510
- /**
511
- * Start
512
- * @see https://tailwindcss.com/docs/top-right-bottom-left
513
- */
514
- start: [{
515
- start: O()
516
- }],
517
- /**
518
- * End
519
- * @see https://tailwindcss.com/docs/top-right-bottom-left
520
- */
521
- end: [{
522
- end: O()
523
- }],
524
- /**
525
- * Top
526
- * @see https://tailwindcss.com/docs/top-right-bottom-left
527
- */
528
- top: [{
529
- top: O()
530
- }],
531
- /**
532
- * Right
533
- * @see https://tailwindcss.com/docs/top-right-bottom-left
534
- */
535
- right: [{
536
- right: O()
537
- }],
538
- /**
539
- * Bottom
540
- * @see https://tailwindcss.com/docs/top-right-bottom-left
541
- */
542
- bottom: [{
543
- bottom: O()
544
- }],
545
- /**
546
- * Left
547
- * @see https://tailwindcss.com/docs/top-right-bottom-left
548
- */
549
- left: [{
550
- left: O()
551
- }],
552
- /**
553
- * Visibility
554
- * @see https://tailwindcss.com/docs/visibility
555
- */
556
- visibility: ["visible", "invisible", "collapse"],
557
- /**
558
- * Z-Index
559
- * @see https://tailwindcss.com/docs/z-index
560
- */
561
- z: [{
562
- z: [ie, "auto", v, h]
563
- }],
564
- // ------------------------
565
- // --- Flexbox and Grid ---
566
- // ------------------------
567
- /**
568
- * Flex Basis
569
- * @see https://tailwindcss.com/docs/flex-basis
570
- */
571
- basis: [{
572
- basis: [de, "full", "auto", c, ...y()]
573
- }],
574
- /**
575
- * Flex Direction
576
- * @see https://tailwindcss.com/docs/flex-direction
577
- */
578
- "flex-direction": [{
579
- flex: ["row", "row-reverse", "col", "col-reverse"]
580
- }],
581
- /**
582
- * Flex Wrap
583
- * @see https://tailwindcss.com/docs/flex-wrap
584
- */
585
- "flex-wrap": [{
586
- flex: ["nowrap", "wrap", "wrap-reverse"]
587
- }],
588
- /**
589
- * Flex
590
- * @see https://tailwindcss.com/docs/flex
591
- */
592
- flex: [{
593
- flex: [M, de, "auto", "initial", "none", h]
594
- }],
595
- /**
596
- * Flex Grow
597
- * @see https://tailwindcss.com/docs/flex-grow
598
- */
599
- grow: [{
600
- grow: ["", M, v, h]
601
- }],
602
- /**
603
- * Flex Shrink
604
- * @see https://tailwindcss.com/docs/flex-shrink
605
- */
606
- shrink: [{
607
- shrink: ["", M, v, h]
608
- }],
609
- /**
610
- * Order
611
- * @see https://tailwindcss.com/docs/order
612
- */
613
- order: [{
614
- order: [ie, "first", "last", "none", v, h]
615
- }],
616
- /**
617
- * Grid Template Columns
618
- * @see https://tailwindcss.com/docs/grid-template-columns
619
- */
620
- "grid-cols": [{
621
- "grid-cols": b()
622
- }],
623
- /**
624
- * Grid Column Start / End
625
- * @see https://tailwindcss.com/docs/grid-column
626
- */
627
- "col-start-end": [{
628
- col: R()
629
- }],
630
- /**
631
- * Grid Column Start
632
- * @see https://tailwindcss.com/docs/grid-column
633
- */
634
- "col-start": [{
635
- "col-start": C()
636
- }],
637
- /**
638
- * Grid Column End
639
- * @see https://tailwindcss.com/docs/grid-column
640
- */
641
- "col-end": [{
642
- "col-end": C()
643
- }],
644
- /**
645
- * Grid Template Rows
646
- * @see https://tailwindcss.com/docs/grid-template-rows
647
- */
648
- "grid-rows": [{
649
- "grid-rows": b()
650
- }],
651
- /**
652
- * Grid Row Start / End
653
- * @see https://tailwindcss.com/docs/grid-row
654
- */
655
- "row-start-end": [{
656
- row: R()
657
- }],
658
- /**
659
- * Grid Row Start
660
- * @see https://tailwindcss.com/docs/grid-row
661
- */
662
- "row-start": [{
663
- "row-start": C()
664
- }],
665
- /**
666
- * Grid Row End
667
- * @see https://tailwindcss.com/docs/grid-row
668
- */
669
- "row-end": [{
670
- "row-end": C()
671
- }],
672
- /**
673
- * Grid Auto Flow
674
- * @see https://tailwindcss.com/docs/grid-auto-flow
675
- */
676
- "grid-flow": [{
677
- "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
678
- }],
679
- /**
680
- * Grid Auto Columns
681
- * @see https://tailwindcss.com/docs/grid-auto-columns
682
- */
683
- "auto-cols": [{
684
- "auto-cols": F()
685
- }],
686
- /**
687
- * Grid Auto Rows
688
- * @see https://tailwindcss.com/docs/grid-auto-rows
689
- */
690
- "auto-rows": [{
691
- "auto-rows": F()
692
- }],
693
- /**
694
- * Gap
695
- * @see https://tailwindcss.com/docs/gap
696
- */
697
- gap: [{
698
- gap: y()
699
- }],
700
- /**
701
- * Gap X
702
- * @see https://tailwindcss.com/docs/gap
703
- */
704
- "gap-x": [{
705
- "gap-x": y()
706
- }],
707
- /**
708
- * Gap Y
709
- * @see https://tailwindcss.com/docs/gap
710
- */
711
- "gap-y": [{
712
- "gap-y": y()
713
- }],
714
- /**
715
- * Justify Content
716
- * @see https://tailwindcss.com/docs/justify-content
717
- */
718
- "justify-content": [{
719
- justify: [...U(), "normal"]
720
- }],
721
- /**
722
- * Justify Items
723
- * @see https://tailwindcss.com/docs/justify-items
724
- */
725
- "justify-items": [{
726
- "justify-items": [...Y(), "normal"]
727
- }],
728
- /**
729
- * Justify Self
730
- * @see https://tailwindcss.com/docs/justify-self
731
- */
732
- "justify-self": [{
733
- "justify-self": ["auto", ...Y()]
734
- }],
735
- /**
736
- * Align Content
737
- * @see https://tailwindcss.com/docs/align-content
738
- */
739
- "align-content": [{
740
- content: ["normal", ...U()]
741
- }],
742
- /**
743
- * Align Items
744
- * @see https://tailwindcss.com/docs/align-items
745
- */
746
- "align-items": [{
747
- items: [...Y(), {
748
- baseline: ["", "last"]
749
- }]
750
- }],
751
- /**
752
- * Align Self
753
- * @see https://tailwindcss.com/docs/align-self
754
- */
755
- "align-self": [{
756
- self: ["auto", ...Y(), {
757
- baseline: ["", "last"]
758
- }]
759
- }],
760
- /**
761
- * Place Content
762
- * @see https://tailwindcss.com/docs/place-content
763
- */
764
- "place-content": [{
765
- "place-content": U()
766
- }],
767
- /**
768
- * Place Items
769
- * @see https://tailwindcss.com/docs/place-items
770
- */
771
- "place-items": [{
772
- "place-items": [...Y(), "baseline"]
773
- }],
774
- /**
775
- * Place Self
776
- * @see https://tailwindcss.com/docs/place-self
777
- */
778
- "place-self": [{
779
- "place-self": ["auto", ...Y()]
780
- }],
781
- // Spacing
782
- /**
783
- * Padding
784
- * @see https://tailwindcss.com/docs/padding
785
- */
786
- p: [{
787
- p: y()
788
- }],
789
- /**
790
- * Padding X
791
- * @see https://tailwindcss.com/docs/padding
792
- */
793
- px: [{
794
- px: y()
795
- }],
796
- /**
797
- * Padding Y
798
- * @see https://tailwindcss.com/docs/padding
799
- */
800
- py: [{
801
- py: y()
802
- }],
803
- /**
804
- * Padding Start
805
- * @see https://tailwindcss.com/docs/padding
806
- */
807
- ps: [{
808
- ps: y()
809
- }],
810
- /**
811
- * Padding End
812
- * @see https://tailwindcss.com/docs/padding
813
- */
814
- pe: [{
815
- pe: y()
816
- }],
817
- /**
818
- * Padding Top
819
- * @see https://tailwindcss.com/docs/padding
820
- */
821
- pt: [{
822
- pt: y()
823
- }],
824
- /**
825
- * Padding Right
826
- * @see https://tailwindcss.com/docs/padding
827
- */
828
- pr: [{
829
- pr: y()
830
- }],
831
- /**
832
- * Padding Bottom
833
- * @see https://tailwindcss.com/docs/padding
834
- */
835
- pb: [{
836
- pb: y()
837
- }],
838
- /**
839
- * Padding Left
840
- * @see https://tailwindcss.com/docs/padding
841
- */
842
- pl: [{
843
- pl: y()
844
- }],
845
- /**
846
- * Margin
847
- * @see https://tailwindcss.com/docs/margin
848
- */
849
- m: [{
850
- m: V()
851
- }],
852
- /**
853
- * Margin X
854
- * @see https://tailwindcss.com/docs/margin
855
- */
856
- mx: [{
857
- mx: V()
858
- }],
859
- /**
860
- * Margin Y
861
- * @see https://tailwindcss.com/docs/margin
862
- */
863
- my: [{
864
- my: V()
865
- }],
866
- /**
867
- * Margin Start
868
- * @see https://tailwindcss.com/docs/margin
869
- */
870
- ms: [{
871
- ms: V()
872
- }],
873
- /**
874
- * Margin End
875
- * @see https://tailwindcss.com/docs/margin
876
- */
877
- me: [{
878
- me: V()
879
- }],
880
- /**
881
- * Margin Top
882
- * @see https://tailwindcss.com/docs/margin
883
- */
884
- mt: [{
885
- mt: V()
886
- }],
887
- /**
888
- * Margin Right
889
- * @see https://tailwindcss.com/docs/margin
890
- */
891
- mr: [{
892
- mr: V()
893
- }],
894
- /**
895
- * Margin Bottom
896
- * @see https://tailwindcss.com/docs/margin
897
- */
898
- mb: [{
899
- mb: V()
900
- }],
901
- /**
902
- * Margin Left
903
- * @see https://tailwindcss.com/docs/margin
904
- */
905
- ml: [{
906
- ml: V()
907
- }],
908
- /**
909
- * Space Between X
910
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
911
- */
912
- "space-x": [{
913
- "space-x": y()
914
- }],
915
- /**
916
- * Space Between X Reverse
917
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
918
- */
919
- "space-x-reverse": ["space-x-reverse"],
920
- /**
921
- * Space Between Y
922
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
923
- */
924
- "space-y": [{
925
- "space-y": y()
926
- }],
927
- /**
928
- * Space Between Y Reverse
929
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
930
- */
931
- "space-y-reverse": ["space-y-reverse"],
932
- // --------------
933
- // --- Sizing ---
934
- // --------------
935
- /**
936
- * Size
937
- * @see https://tailwindcss.com/docs/width#setting-both-width-and-height
938
- */
939
- size: [{
940
- size: q()
941
- }],
942
- /**
943
- * Width
944
- * @see https://tailwindcss.com/docs/width
945
- */
946
- w: [{
947
- w: [c, "screen", ...q()]
948
- }],
949
- /**
950
- * Min-Width
951
- * @see https://tailwindcss.com/docs/min-width
952
- */
953
- "min-w": [{
954
- "min-w": [
955
- c,
956
- "screen",
957
- /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
958
- "none",
959
- ...q()
960
- ]
961
- }],
962
- /**
963
- * Max-Width
964
- * @see https://tailwindcss.com/docs/max-width
965
- */
966
- "max-w": [{
967
- "max-w": [
968
- c,
969
- "screen",
970
- "none",
971
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
972
- "prose",
973
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
974
- {
975
- screen: [i]
976
- },
977
- ...q()
978
- ]
979
- }],
980
- /**
981
- * Height
982
- * @see https://tailwindcss.com/docs/height
983
- */
984
- h: [{
985
- h: ["screen", ...q()]
986
- }],
987
- /**
988
- * Min-Height
989
- * @see https://tailwindcss.com/docs/min-height
990
- */
991
- "min-h": [{
992
- "min-h": ["screen", "none", ...q()]
993
- }],
994
- /**
995
- * Max-Height
996
- * @see https://tailwindcss.com/docs/max-height
997
- */
998
- "max-h": [{
999
- "max-h": ["screen", ...q()]
1000
- }],
1001
- // ------------------
1002
- // --- Typography ---
1003
- // ------------------
1004
- /**
1005
- * Font Size
1006
- * @see https://tailwindcss.com/docs/font-size
1007
- */
1008
- "font-size": [{
1009
- text: ["base", n, be, ce]
1010
- }],
1011
- /**
1012
- * Font Smoothing
1013
- * @see https://tailwindcss.com/docs/font-smoothing
1014
- */
1015
- "font-smoothing": ["antialiased", "subpixel-antialiased"],
1016
- /**
1017
- * Font Style
1018
- * @see https://tailwindcss.com/docs/font-style
1019
- */
1020
- "font-style": ["italic", "not-italic"],
1021
- /**
1022
- * Font Weight
1023
- * @see https://tailwindcss.com/docs/font-weight
1024
- */
1025
- "font-weight": [{
1026
- font: [r, v, $e]
1027
- }],
1028
- /**
1029
- * Font Stretch
1030
- * @see https://tailwindcss.com/docs/font-stretch
1031
- */
1032
- "font-stretch": [{
1033
- "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", Ue, h]
1034
- }],
1035
- /**
1036
- * Font Family
1037
- * @see https://tailwindcss.com/docs/font-family
1038
- */
1039
- "font-family": [{
1040
- font: [Kn, h, t]
1041
- }],
1042
- /**
1043
- * Font Variant Numeric
1044
- * @see https://tailwindcss.com/docs/font-variant-numeric
1045
- */
1046
- "fvn-normal": ["normal-nums"],
1047
- /**
1048
- * Font Variant Numeric
1049
- * @see https://tailwindcss.com/docs/font-variant-numeric
1050
- */
1051
- "fvn-ordinal": ["ordinal"],
1052
- /**
1053
- * Font Variant Numeric
1054
- * @see https://tailwindcss.com/docs/font-variant-numeric
1055
- */
1056
- "fvn-slashed-zero": ["slashed-zero"],
1057
- /**
1058
- * Font Variant Numeric
1059
- * @see https://tailwindcss.com/docs/font-variant-numeric
1060
- */
1061
- "fvn-figure": ["lining-nums", "oldstyle-nums"],
1062
- /**
1063
- * Font Variant Numeric
1064
- * @see https://tailwindcss.com/docs/font-variant-numeric
1065
- */
1066
- "fvn-spacing": ["proportional-nums", "tabular-nums"],
1067
- /**
1068
- * Font Variant Numeric
1069
- * @see https://tailwindcss.com/docs/font-variant-numeric
1070
- */
1071
- "fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
1072
- /**
1073
- * Letter Spacing
1074
- * @see https://tailwindcss.com/docs/letter-spacing
1075
- */
1076
- tracking: [{
1077
- tracking: [o, v, h]
1078
- }],
1079
- /**
1080
- * Line Clamp
1081
- * @see https://tailwindcss.com/docs/line-clamp
1082
- */
1083
- "line-clamp": [{
1084
- "line-clamp": [M, "none", v, $e]
1085
- }],
1086
- /**
1087
- * Line Height
1088
- * @see https://tailwindcss.com/docs/line-height
1089
- */
1090
- leading: [{
1091
- leading: [
1092
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1093
- s,
1094
- ...y()
1095
- ]
1096
- }],
1097
- /**
1098
- * List Style Image
1099
- * @see https://tailwindcss.com/docs/list-style-image
1100
- */
1101
- "list-image": [{
1102
- "list-image": ["none", v, h]
1103
- }],
1104
- /**
1105
- * List Style Position
1106
- * @see https://tailwindcss.com/docs/list-style-position
1107
- */
1108
- "list-style-position": [{
1109
- list: ["inside", "outside"]
1110
- }],
1111
- /**
1112
- * List Style Type
1113
- * @see https://tailwindcss.com/docs/list-style-type
1114
- */
1115
- "list-style-type": [{
1116
- list: ["disc", "decimal", "none", v, h]
1117
- }],
1118
- /**
1119
- * Text Alignment
1120
- * @see https://tailwindcss.com/docs/text-align
1121
- */
1122
- "text-alignment": [{
1123
- text: ["left", "center", "right", "justify", "start", "end"]
1124
- }],
1125
- /**
1126
- * Placeholder Color
1127
- * @deprecated since Tailwind CSS v3.0.0
1128
- * @see https://v3.tailwindcss.com/docs/placeholder-color
1129
- */
1130
- "placeholder-color": [{
1131
- placeholder: k()
1132
- }],
1133
- /**
1134
- * Text Color
1135
- * @see https://tailwindcss.com/docs/text-color
1136
- */
1137
- "text-color": [{
1138
- text: k()
1139
- }],
1140
- /**
1141
- * Text Decoration
1142
- * @see https://tailwindcss.com/docs/text-decoration
1143
- */
1144
- "text-decoration": ["underline", "overline", "line-through", "no-underline"],
1145
- /**
1146
- * Text Decoration Style
1147
- * @see https://tailwindcss.com/docs/text-decoration-style
1148
- */
1149
- "text-decoration-style": [{
1150
- decoration: [...X(), "wavy"]
1151
- }],
1152
- /**
1153
- * Text Decoration Thickness
1154
- * @see https://tailwindcss.com/docs/text-decoration-thickness
1155
- */
1156
- "text-decoration-thickness": [{
1157
- decoration: [M, "from-font", "auto", v, ce]
1158
- }],
1159
- /**
1160
- * Text Decoration Color
1161
- * @see https://tailwindcss.com/docs/text-decoration-color
1162
- */
1163
- "text-decoration-color": [{
1164
- decoration: k()
1165
- }],
1166
- /**
1167
- * Text Underline Offset
1168
- * @see https://tailwindcss.com/docs/text-underline-offset
1169
- */
1170
- "underline-offset": [{
1171
- "underline-offset": [M, "auto", v, h]
1172
- }],
1173
- /**
1174
- * Text Transform
1175
- * @see https://tailwindcss.com/docs/text-transform
1176
- */
1177
- "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
1178
- /**
1179
- * Text Overflow
1180
- * @see https://tailwindcss.com/docs/text-overflow
1181
- */
1182
- "text-overflow": ["truncate", "text-ellipsis", "text-clip"],
1183
- /**
1184
- * Text Wrap
1185
- * @see https://tailwindcss.com/docs/text-wrap
1186
- */
1187
- "text-wrap": [{
1188
- text: ["wrap", "nowrap", "balance", "pretty"]
1189
- }],
1190
- /**
1191
- * Text Indent
1192
- * @see https://tailwindcss.com/docs/text-indent
1193
- */
1194
- indent: [{
1195
- indent: y()
1196
- }],
1197
- /**
1198
- * Vertical Alignment
1199
- * @see https://tailwindcss.com/docs/vertical-align
1200
- */
1201
- "vertical-align": [{
1202
- align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", v, h]
1203
- }],
1204
- /**
1205
- * Whitespace
1206
- * @see https://tailwindcss.com/docs/whitespace
1207
- */
1208
- whitespace: [{
1209
- whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
1210
- }],
1211
- /**
1212
- * Word Break
1213
- * @see https://tailwindcss.com/docs/word-break
1214
- */
1215
- break: [{
1216
- break: ["normal", "words", "all", "keep"]
1217
- }],
1218
- /**
1219
- * Overflow Wrap
1220
- * @see https://tailwindcss.com/docs/overflow-wrap
1221
- */
1222
- wrap: [{
1223
- wrap: ["break-word", "anywhere", "normal"]
1224
- }],
1225
- /**
1226
- * Hyphens
1227
- * @see https://tailwindcss.com/docs/hyphens
1228
- */
1229
- hyphens: [{
1230
- hyphens: ["none", "manual", "auto"]
1231
- }],
1232
- /**
1233
- * Content
1234
- * @see https://tailwindcss.com/docs/content
1235
- */
1236
- content: [{
1237
- content: ["none", v, h]
1238
- }],
1239
- // -------------------
1240
- // --- Backgrounds ---
1241
- // -------------------
1242
- /**
1243
- * Background Attachment
1244
- * @see https://tailwindcss.com/docs/background-attachment
1245
- */
1246
- "bg-attachment": [{
1247
- bg: ["fixed", "local", "scroll"]
1248
- }],
1249
- /**
1250
- * Background Clip
1251
- * @see https://tailwindcss.com/docs/background-clip
1252
- */
1253
- "bg-clip": [{
1254
- "bg-clip": ["border", "padding", "content", "text"]
1255
- }],
1256
- /**
1257
- * Background Origin
1258
- * @see https://tailwindcss.com/docs/background-origin
1259
- */
1260
- "bg-origin": [{
1261
- "bg-origin": ["border", "padding", "content"]
1262
- }],
1263
- /**
1264
- * Background Position
1265
- * @see https://tailwindcss.com/docs/background-position
1266
- */
1267
- "bg-position": [{
1268
- bg: _()
1269
- }],
1270
- /**
1271
- * Background Repeat
1272
- * @see https://tailwindcss.com/docs/background-repeat
1273
- */
1274
- "bg-repeat": [{
1275
- bg: ee()
1276
- }],
1277
- /**
1278
- * Background Size
1279
- * @see https://tailwindcss.com/docs/background-size
1280
- */
1281
- "bg-size": [{
1282
- bg: J()
1283
- }],
1284
- /**
1285
- * Background Image
1286
- * @see https://tailwindcss.com/docs/background-image
1287
- */
1288
- "bg-image": [{
1289
- bg: ["none", {
1290
- linear: [{
1291
- to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
1292
- }, ie, v, h],
1293
- radial: ["", v, h],
1294
- conic: [ie, v, h]
1295
- }, qn, Hn]
1296
- }],
1297
- /**
1298
- * Background Color
1299
- * @see https://tailwindcss.com/docs/background-color
1300
- */
1301
- "bg-color": [{
1302
- bg: k()
1303
- }],
1304
- /**
1305
- * Gradient Color Stops From Position
1306
- * @see https://tailwindcss.com/docs/gradient-color-stops
1307
- */
1308
- "gradient-from-pos": [{
1309
- from: te()
1310
- }],
1311
- /**
1312
- * Gradient Color Stops Via Position
1313
- * @see https://tailwindcss.com/docs/gradient-color-stops
1314
- */
1315
- "gradient-via-pos": [{
1316
- via: te()
1317
- }],
1318
- /**
1319
- * Gradient Color Stops To Position
1320
- * @see https://tailwindcss.com/docs/gradient-color-stops
1321
- */
1322
- "gradient-to-pos": [{
1323
- to: te()
1324
- }],
1325
- /**
1326
- * Gradient Color Stops From
1327
- * @see https://tailwindcss.com/docs/gradient-color-stops
1328
- */
1329
- "gradient-from": [{
1330
- from: k()
1331
- }],
1332
- /**
1333
- * Gradient Color Stops Via
1334
- * @see https://tailwindcss.com/docs/gradient-color-stops
1335
- */
1336
- "gradient-via": [{
1337
- via: k()
1338
- }],
1339
- /**
1340
- * Gradient Color Stops To
1341
- * @see https://tailwindcss.com/docs/gradient-color-stops
1342
- */
1343
- "gradient-to": [{
1344
- to: k()
1345
- }],
1346
- // ---------------
1347
- // --- Borders ---
1348
- // ---------------
1349
- /**
1350
- * Border Radius
1351
- * @see https://tailwindcss.com/docs/border-radius
1352
- */
1353
- rounded: [{
1354
- rounded: S()
1355
- }],
1356
- /**
1357
- * Border Radius Start
1358
- * @see https://tailwindcss.com/docs/border-radius
1359
- */
1360
- "rounded-s": [{
1361
- "rounded-s": S()
1362
- }],
1363
- /**
1364
- * Border Radius End
1365
- * @see https://tailwindcss.com/docs/border-radius
1366
- */
1367
- "rounded-e": [{
1368
- "rounded-e": S()
1369
- }],
1370
- /**
1371
- * Border Radius Top
1372
- * @see https://tailwindcss.com/docs/border-radius
1373
- */
1374
- "rounded-t": [{
1375
- "rounded-t": S()
1376
- }],
1377
- /**
1378
- * Border Radius Right
1379
- * @see https://tailwindcss.com/docs/border-radius
1380
- */
1381
- "rounded-r": [{
1382
- "rounded-r": S()
1383
- }],
1384
- /**
1385
- * Border Radius Bottom
1386
- * @see https://tailwindcss.com/docs/border-radius
1387
- */
1388
- "rounded-b": [{
1389
- "rounded-b": S()
1390
- }],
1391
- /**
1392
- * Border Radius Left
1393
- * @see https://tailwindcss.com/docs/border-radius
1394
- */
1395
- "rounded-l": [{
1396
- "rounded-l": S()
1397
- }],
1398
- /**
1399
- * Border Radius Start Start
1400
- * @see https://tailwindcss.com/docs/border-radius
1401
- */
1402
- "rounded-ss": [{
1403
- "rounded-ss": S()
1404
- }],
1405
- /**
1406
- * Border Radius Start End
1407
- * @see https://tailwindcss.com/docs/border-radius
1408
- */
1409
- "rounded-se": [{
1410
- "rounded-se": S()
1411
- }],
1412
- /**
1413
- * Border Radius End End
1414
- * @see https://tailwindcss.com/docs/border-radius
1415
- */
1416
- "rounded-ee": [{
1417
- "rounded-ee": S()
1418
- }],
1419
- /**
1420
- * Border Radius End Start
1421
- * @see https://tailwindcss.com/docs/border-radius
1422
- */
1423
- "rounded-es": [{
1424
- "rounded-es": S()
1425
- }],
1426
- /**
1427
- * Border Radius Top Left
1428
- * @see https://tailwindcss.com/docs/border-radius
1429
- */
1430
- "rounded-tl": [{
1431
- "rounded-tl": S()
1432
- }],
1433
- /**
1434
- * Border Radius Top Right
1435
- * @see https://tailwindcss.com/docs/border-radius
1436
- */
1437
- "rounded-tr": [{
1438
- "rounded-tr": S()
1439
- }],
1440
- /**
1441
- * Border Radius Bottom Right
1442
- * @see https://tailwindcss.com/docs/border-radius
1443
- */
1444
- "rounded-br": [{
1445
- "rounded-br": S()
1446
- }],
1447
- /**
1448
- * Border Radius Bottom Left
1449
- * @see https://tailwindcss.com/docs/border-radius
1450
- */
1451
- "rounded-bl": [{
1452
- "rounded-bl": S()
1453
- }],
1454
- /**
1455
- * Border Width
1456
- * @see https://tailwindcss.com/docs/border-width
1457
- */
1458
- "border-w": [{
1459
- border: B()
1460
- }],
1461
- /**
1462
- * Border Width X
1463
- * @see https://tailwindcss.com/docs/border-width
1464
- */
1465
- "border-w-x": [{
1466
- "border-x": B()
1467
- }],
1468
- /**
1469
- * Border Width Y
1470
- * @see https://tailwindcss.com/docs/border-width
1471
- */
1472
- "border-w-y": [{
1473
- "border-y": B()
1474
- }],
1475
- /**
1476
- * Border Width Start
1477
- * @see https://tailwindcss.com/docs/border-width
1478
- */
1479
- "border-w-s": [{
1480
- "border-s": B()
1481
- }],
1482
- /**
1483
- * Border Width End
1484
- * @see https://tailwindcss.com/docs/border-width
1485
- */
1486
- "border-w-e": [{
1487
- "border-e": B()
1488
- }],
1489
- /**
1490
- * Border Width Top
1491
- * @see https://tailwindcss.com/docs/border-width
1492
- */
1493
- "border-w-t": [{
1494
- "border-t": B()
1495
- }],
1496
- /**
1497
- * Border Width Right
1498
- * @see https://tailwindcss.com/docs/border-width
1499
- */
1500
- "border-w-r": [{
1501
- "border-r": B()
1502
- }],
1503
- /**
1504
- * Border Width Bottom
1505
- * @see https://tailwindcss.com/docs/border-width
1506
- */
1507
- "border-w-b": [{
1508
- "border-b": B()
1509
- }],
1510
- /**
1511
- * Border Width Left
1512
- * @see https://tailwindcss.com/docs/border-width
1513
- */
1514
- "border-w-l": [{
1515
- "border-l": B()
1516
- }],
1517
- /**
1518
- * Divide Width X
1519
- * @see https://tailwindcss.com/docs/border-width#between-children
1520
- */
1521
- "divide-x": [{
1522
- "divide-x": B()
1523
- }],
1524
- /**
1525
- * Divide Width X Reverse
1526
- * @see https://tailwindcss.com/docs/border-width#between-children
1527
- */
1528
- "divide-x-reverse": ["divide-x-reverse"],
1529
- /**
1530
- * Divide Width Y
1531
- * @see https://tailwindcss.com/docs/border-width#between-children
1532
- */
1533
- "divide-y": [{
1534
- "divide-y": B()
1535
- }],
1536
- /**
1537
- * Divide Width Y Reverse
1538
- * @see https://tailwindcss.com/docs/border-width#between-children
1539
- */
1540
- "divide-y-reverse": ["divide-y-reverse"],
1541
- /**
1542
- * Border Style
1543
- * @see https://tailwindcss.com/docs/border-style
1544
- */
1545
- "border-style": [{
1546
- border: [...X(), "hidden", "none"]
1547
- }],
1548
- /**
1549
- * Divide Style
1550
- * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
1551
- */
1552
- "divide-style": [{
1553
- divide: [...X(), "hidden", "none"]
1554
- }],
1555
- /**
1556
- * Border Color
1557
- * @see https://tailwindcss.com/docs/border-color
1558
- */
1559
- "border-color": [{
1560
- border: k()
1561
- }],
1562
- /**
1563
- * Border Color X
1564
- * @see https://tailwindcss.com/docs/border-color
1565
- */
1566
- "border-color-x": [{
1567
- "border-x": k()
1568
- }],
1569
- /**
1570
- * Border Color Y
1571
- * @see https://tailwindcss.com/docs/border-color
1572
- */
1573
- "border-color-y": [{
1574
- "border-y": k()
1575
- }],
1576
- /**
1577
- * Border Color S
1578
- * @see https://tailwindcss.com/docs/border-color
1579
- */
1580
- "border-color-s": [{
1581
- "border-s": k()
1582
- }],
1583
- /**
1584
- * Border Color E
1585
- * @see https://tailwindcss.com/docs/border-color
1586
- */
1587
- "border-color-e": [{
1588
- "border-e": k()
1589
- }],
1590
- /**
1591
- * Border Color Top
1592
- * @see https://tailwindcss.com/docs/border-color
1593
- */
1594
- "border-color-t": [{
1595
- "border-t": k()
1596
- }],
1597
- /**
1598
- * Border Color Right
1599
- * @see https://tailwindcss.com/docs/border-color
1600
- */
1601
- "border-color-r": [{
1602
- "border-r": k()
1603
- }],
1604
- /**
1605
- * Border Color Bottom
1606
- * @see https://tailwindcss.com/docs/border-color
1607
- */
1608
- "border-color-b": [{
1609
- "border-b": k()
1610
- }],
1611
- /**
1612
- * Border Color Left
1613
- * @see https://tailwindcss.com/docs/border-color
1614
- */
1615
- "border-color-l": [{
1616
- "border-l": k()
1617
- }],
1618
- /**
1619
- * Divide Color
1620
- * @see https://tailwindcss.com/docs/divide-color
1621
- */
1622
- "divide-color": [{
1623
- divide: k()
1624
- }],
1625
- /**
1626
- * Outline Style
1627
- * @see https://tailwindcss.com/docs/outline-style
1628
- */
1629
- "outline-style": [{
1630
- outline: [...X(), "none", "hidden"]
1631
- }],
1632
- /**
1633
- * Outline Offset
1634
- * @see https://tailwindcss.com/docs/outline-offset
1635
- */
1636
- "outline-offset": [{
1637
- "outline-offset": [M, v, h]
1638
- }],
1639
- /**
1640
- * Outline Width
1641
- * @see https://tailwindcss.com/docs/outline-width
1642
- */
1643
- "outline-w": [{
1644
- outline: ["", M, be, ce]
1645
- }],
1646
- /**
1647
- * Outline Color
1648
- * @see https://tailwindcss.com/docs/outline-color
1649
- */
1650
- "outline-color": [{
1651
- outline: k()
1652
- }],
1653
- // ---------------
1654
- // --- Effects ---
1655
- // ---------------
1656
- /**
1657
- * Box Shadow
1658
- * @see https://tailwindcss.com/docs/box-shadow
1659
- */
1660
- shadow: [{
1661
- shadow: [
1662
- // Deprecated since Tailwind CSS v4.0.0
1663
- "",
1664
- "none",
1665
- u,
1666
- Ee,
1667
- ke
1668
- ]
1669
- }],
1670
- /**
1671
- * Box Shadow Color
1672
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
1673
- */
1674
- "shadow-color": [{
1675
- shadow: k()
1676
- }],
1677
- /**
1678
- * Inset Box Shadow
1679
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
1680
- */
1681
- "inset-shadow": [{
1682
- "inset-shadow": ["none", g, Ee, ke]
1683
- }],
1684
- /**
1685
- * Inset Box Shadow Color
1686
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
1687
- */
1688
- "inset-shadow-color": [{
1689
- "inset-shadow": k()
1690
- }],
1691
- /**
1692
- * Ring Width
1693
- * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
1694
- */
1695
- "ring-w": [{
1696
- ring: B()
1697
- }],
1698
- /**
1699
- * Ring Width Inset
1700
- * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
1701
- * @deprecated since Tailwind CSS v4.0.0
1702
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
1703
- */
1704
- "ring-w-inset": ["ring-inset"],
1705
- /**
1706
- * Ring Color
1707
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
1708
- */
1709
- "ring-color": [{
1710
- ring: k()
1711
- }],
1712
- /**
1713
- * Ring Offset Width
1714
- * @see https://v3.tailwindcss.com/docs/ring-offset-width
1715
- * @deprecated since Tailwind CSS v4.0.0
1716
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
1717
- */
1718
- "ring-offset-w": [{
1719
- "ring-offset": [M, ce]
1720
- }],
1721
- /**
1722
- * Ring Offset Color
1723
- * @see https://v3.tailwindcss.com/docs/ring-offset-color
1724
- * @deprecated since Tailwind CSS v4.0.0
1725
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
1726
- */
1727
- "ring-offset-color": [{
1728
- "ring-offset": k()
1729
- }],
1730
- /**
1731
- * Inset Ring Width
1732
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
1733
- */
1734
- "inset-ring-w": [{
1735
- "inset-ring": B()
1736
- }],
1737
- /**
1738
- * Inset Ring Color
1739
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
1740
- */
1741
- "inset-ring-color": [{
1742
- "inset-ring": k()
1743
- }],
1744
- /**
1745
- * Text Shadow
1746
- * @see https://tailwindcss.com/docs/text-shadow
1747
- */
1748
- "text-shadow": [{
1749
- "text-shadow": ["none", A, Ee, ke]
1750
- }],
1751
- /**
1752
- * Text Shadow Color
1753
- * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
1754
- */
1755
- "text-shadow-color": [{
1756
- "text-shadow": k()
1757
- }],
1758
- /**
1759
- * Opacity
1760
- * @see https://tailwindcss.com/docs/opacity
1761
- */
1762
- opacity: [{
1763
- opacity: [M, v, h]
1764
- }],
1765
- /**
1766
- * Mix Blend Mode
1767
- * @see https://tailwindcss.com/docs/mix-blend-mode
1768
- */
1769
- "mix-blend": [{
1770
- "mix-blend": [...ae(), "plus-darker", "plus-lighter"]
1771
- }],
1772
- /**
1773
- * Background Blend Mode
1774
- * @see https://tailwindcss.com/docs/background-blend-mode
1775
- */
1776
- "bg-blend": [{
1777
- "bg-blend": ae()
1778
- }],
1779
- /**
1780
- * Mask Clip
1781
- * @see https://tailwindcss.com/docs/mask-clip
1782
- */
1783
- "mask-clip": [{
1784
- "mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
1785
- }, "mask-no-clip"],
1786
- /**
1787
- * Mask Composite
1788
- * @see https://tailwindcss.com/docs/mask-composite
1789
- */
1790
- "mask-composite": [{
1791
- mask: ["add", "subtract", "intersect", "exclude"]
1792
- }],
1793
- /**
1794
- * Mask Image
1795
- * @see https://tailwindcss.com/docs/mask-image
1796
- */
1797
- "mask-image-linear-pos": [{
1798
- "mask-linear": [M]
1799
- }],
1800
- "mask-image-linear-from-pos": [{
1801
- "mask-linear-from": $()
1802
- }],
1803
- "mask-image-linear-to-pos": [{
1804
- "mask-linear-to": $()
1805
- }],
1806
- "mask-image-linear-from-color": [{
1807
- "mask-linear-from": k()
1808
- }],
1809
- "mask-image-linear-to-color": [{
1810
- "mask-linear-to": k()
1811
- }],
1812
- "mask-image-t-from-pos": [{
1813
- "mask-t-from": $()
1814
- }],
1815
- "mask-image-t-to-pos": [{
1816
- "mask-t-to": $()
1817
- }],
1818
- "mask-image-t-from-color": [{
1819
- "mask-t-from": k()
1820
- }],
1821
- "mask-image-t-to-color": [{
1822
- "mask-t-to": k()
1823
- }],
1824
- "mask-image-r-from-pos": [{
1825
- "mask-r-from": $()
1826
- }],
1827
- "mask-image-r-to-pos": [{
1828
- "mask-r-to": $()
1829
- }],
1830
- "mask-image-r-from-color": [{
1831
- "mask-r-from": k()
1832
- }],
1833
- "mask-image-r-to-color": [{
1834
- "mask-r-to": k()
1835
- }],
1836
- "mask-image-b-from-pos": [{
1837
- "mask-b-from": $()
1838
- }],
1839
- "mask-image-b-to-pos": [{
1840
- "mask-b-to": $()
1841
- }],
1842
- "mask-image-b-from-color": [{
1843
- "mask-b-from": k()
1844
- }],
1845
- "mask-image-b-to-color": [{
1846
- "mask-b-to": k()
1847
- }],
1848
- "mask-image-l-from-pos": [{
1849
- "mask-l-from": $()
1850
- }],
1851
- "mask-image-l-to-pos": [{
1852
- "mask-l-to": $()
1853
- }],
1854
- "mask-image-l-from-color": [{
1855
- "mask-l-from": k()
1856
- }],
1857
- "mask-image-l-to-color": [{
1858
- "mask-l-to": k()
1859
- }],
1860
- "mask-image-x-from-pos": [{
1861
- "mask-x-from": $()
1862
- }],
1863
- "mask-image-x-to-pos": [{
1864
- "mask-x-to": $()
1865
- }],
1866
- "mask-image-x-from-color": [{
1867
- "mask-x-from": k()
1868
- }],
1869
- "mask-image-x-to-color": [{
1870
- "mask-x-to": k()
1871
- }],
1872
- "mask-image-y-from-pos": [{
1873
- "mask-y-from": $()
1874
- }],
1875
- "mask-image-y-to-pos": [{
1876
- "mask-y-to": $()
1877
- }],
1878
- "mask-image-y-from-color": [{
1879
- "mask-y-from": k()
1880
- }],
1881
- "mask-image-y-to-color": [{
1882
- "mask-y-to": k()
1883
- }],
1884
- "mask-image-radial": [{
1885
- "mask-radial": [v, h]
1886
- }],
1887
- "mask-image-radial-from-pos": [{
1888
- "mask-radial-from": $()
1889
- }],
1890
- "mask-image-radial-to-pos": [{
1891
- "mask-radial-to": $()
1892
- }],
1893
- "mask-image-radial-from-color": [{
1894
- "mask-radial-from": k()
1895
- }],
1896
- "mask-image-radial-to-color": [{
1897
- "mask-radial-to": k()
1898
- }],
1899
- "mask-image-radial-shape": [{
1900
- "mask-radial": ["circle", "ellipse"]
1901
- }],
1902
- "mask-image-radial-size": [{
1903
- "mask-radial": [{
1904
- closest: ["side", "corner"],
1905
- farthest: ["side", "corner"]
1906
- }]
1907
- }],
1908
- "mask-image-radial-pos": [{
1909
- "mask-radial-at": f()
1910
- }],
1911
- "mask-image-conic-pos": [{
1912
- "mask-conic": [M]
1913
- }],
1914
- "mask-image-conic-from-pos": [{
1915
- "mask-conic-from": $()
1916
- }],
1917
- "mask-image-conic-to-pos": [{
1918
- "mask-conic-to": $()
1919
- }],
1920
- "mask-image-conic-from-color": [{
1921
- "mask-conic-from": k()
1922
- }],
1923
- "mask-image-conic-to-color": [{
1924
- "mask-conic-to": k()
1925
- }],
1926
- /**
1927
- * Mask Mode
1928
- * @see https://tailwindcss.com/docs/mask-mode
1929
- */
1930
- "mask-mode": [{
1931
- mask: ["alpha", "luminance", "match"]
1932
- }],
1933
- /**
1934
- * Mask Origin
1935
- * @see https://tailwindcss.com/docs/mask-origin
1936
- */
1937
- "mask-origin": [{
1938
- "mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
1939
- }],
1940
- /**
1941
- * Mask Position
1942
- * @see https://tailwindcss.com/docs/mask-position
1943
- */
1944
- "mask-position": [{
1945
- mask: _()
1946
- }],
1947
- /**
1948
- * Mask Repeat
1949
- * @see https://tailwindcss.com/docs/mask-repeat
1950
- */
1951
- "mask-repeat": [{
1952
- mask: ee()
1953
- }],
1954
- /**
1955
- * Mask Size
1956
- * @see https://tailwindcss.com/docs/mask-size
1957
- */
1958
- "mask-size": [{
1959
- mask: J()
1960
- }],
1961
- /**
1962
- * Mask Type
1963
- * @see https://tailwindcss.com/docs/mask-type
1964
- */
1965
- "mask-type": [{
1966
- "mask-type": ["alpha", "luminance"]
1967
- }],
1968
- /**
1969
- * Mask Image
1970
- * @see https://tailwindcss.com/docs/mask-image
1971
- */
1972
- "mask-image": [{
1973
- mask: ["none", v, h]
1974
- }],
1975
- // ---------------
1976
- // --- Filters ---
1977
- // ---------------
1978
- /**
1979
- * Filter
1980
- * @see https://tailwindcss.com/docs/filter
1981
- */
1982
- filter: [{
1983
- filter: [
1984
- // Deprecated since Tailwind CSS v3.0.0
1985
- "",
1986
- "none",
1987
- v,
1988
- h
1989
- ]
1990
- }],
1991
- /**
1992
- * Blur
1993
- * @see https://tailwindcss.com/docs/blur
1994
- */
1995
- blur: [{
1996
- blur: we()
1997
- }],
1998
- /**
1999
- * Brightness
2000
- * @see https://tailwindcss.com/docs/brightness
2001
- */
2002
- brightness: [{
2003
- brightness: [M, v, h]
2004
- }],
2005
- /**
2006
- * Contrast
2007
- * @see https://tailwindcss.com/docs/contrast
2008
- */
2009
- contrast: [{
2010
- contrast: [M, v, h]
2011
- }],
2012
- /**
2013
- * Drop Shadow
2014
- * @see https://tailwindcss.com/docs/drop-shadow
2015
- */
2016
- "drop-shadow": [{
2017
- "drop-shadow": [
2018
- // Deprecated since Tailwind CSS v4.0.0
2019
- "",
2020
- "none",
2021
- T,
2022
- Ee,
2023
- ke
2024
- ]
2025
- }],
2026
- /**
2027
- * Drop Shadow Color
2028
- * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
2029
- */
2030
- "drop-shadow-color": [{
2031
- "drop-shadow": k()
2032
- }],
2033
- /**
2034
- * Grayscale
2035
- * @see https://tailwindcss.com/docs/grayscale
2036
- */
2037
- grayscale: [{
2038
- grayscale: ["", M, v, h]
2039
- }],
2040
- /**
2041
- * Hue Rotate
2042
- * @see https://tailwindcss.com/docs/hue-rotate
2043
- */
2044
- "hue-rotate": [{
2045
- "hue-rotate": [M, v, h]
2046
- }],
2047
- /**
2048
- * Invert
2049
- * @see https://tailwindcss.com/docs/invert
2050
- */
2051
- invert: [{
2052
- invert: ["", M, v, h]
2053
- }],
2054
- /**
2055
- * Saturate
2056
- * @see https://tailwindcss.com/docs/saturate
2057
- */
2058
- saturate: [{
2059
- saturate: [M, v, h]
2060
- }],
2061
- /**
2062
- * Sepia
2063
- * @see https://tailwindcss.com/docs/sepia
2064
- */
2065
- sepia: [{
2066
- sepia: ["", M, v, h]
2067
- }],
2068
- /**
2069
- * Backdrop Filter
2070
- * @see https://tailwindcss.com/docs/backdrop-filter
2071
- */
2072
- "backdrop-filter": [{
2073
- "backdrop-filter": [
2074
- // Deprecated since Tailwind CSS v3.0.0
2075
- "",
2076
- "none",
2077
- v,
2078
- h
2079
- ]
2080
- }],
2081
- /**
2082
- * Backdrop Blur
2083
- * @see https://tailwindcss.com/docs/backdrop-blur
2084
- */
2085
- "backdrop-blur": [{
2086
- "backdrop-blur": we()
2087
- }],
2088
- /**
2089
- * Backdrop Brightness
2090
- * @see https://tailwindcss.com/docs/backdrop-brightness
2091
- */
2092
- "backdrop-brightness": [{
2093
- "backdrop-brightness": [M, v, h]
2094
- }],
2095
- /**
2096
- * Backdrop Contrast
2097
- * @see https://tailwindcss.com/docs/backdrop-contrast
2098
- */
2099
- "backdrop-contrast": [{
2100
- "backdrop-contrast": [M, v, h]
2101
- }],
2102
- /**
2103
- * Backdrop Grayscale
2104
- * @see https://tailwindcss.com/docs/backdrop-grayscale
2105
- */
2106
- "backdrop-grayscale": [{
2107
- "backdrop-grayscale": ["", M, v, h]
2108
- }],
2109
- /**
2110
- * Backdrop Hue Rotate
2111
- * @see https://tailwindcss.com/docs/backdrop-hue-rotate
2112
- */
2113
- "backdrop-hue-rotate": [{
2114
- "backdrop-hue-rotate": [M, v, h]
2115
- }],
2116
- /**
2117
- * Backdrop Invert
2118
- * @see https://tailwindcss.com/docs/backdrop-invert
2119
- */
2120
- "backdrop-invert": [{
2121
- "backdrop-invert": ["", M, v, h]
2122
- }],
2123
- /**
2124
- * Backdrop Opacity
2125
- * @see https://tailwindcss.com/docs/backdrop-opacity
2126
- */
2127
- "backdrop-opacity": [{
2128
- "backdrop-opacity": [M, v, h]
2129
- }],
2130
- /**
2131
- * Backdrop Saturate
2132
- * @see https://tailwindcss.com/docs/backdrop-saturate
2133
- */
2134
- "backdrop-saturate": [{
2135
- "backdrop-saturate": [M, v, h]
2136
- }],
2137
- /**
2138
- * Backdrop Sepia
2139
- * @see https://tailwindcss.com/docs/backdrop-sepia
2140
- */
2141
- "backdrop-sepia": [{
2142
- "backdrop-sepia": ["", M, v, h]
2143
- }],
2144
- // --------------
2145
- // --- Tables ---
2146
- // --------------
2147
- /**
2148
- * Border Collapse
2149
- * @see https://tailwindcss.com/docs/border-collapse
2150
- */
2151
- "border-collapse": [{
2152
- border: ["collapse", "separate"]
2153
- }],
2154
- /**
2155
- * Border Spacing
2156
- * @see https://tailwindcss.com/docs/border-spacing
2157
- */
2158
- "border-spacing": [{
2159
- "border-spacing": y()
2160
- }],
2161
- /**
2162
- * Border Spacing X
2163
- * @see https://tailwindcss.com/docs/border-spacing
2164
- */
2165
- "border-spacing-x": [{
2166
- "border-spacing-x": y()
2167
- }],
2168
- /**
2169
- * Border Spacing Y
2170
- * @see https://tailwindcss.com/docs/border-spacing
2171
- */
2172
- "border-spacing-y": [{
2173
- "border-spacing-y": y()
2174
- }],
2175
- /**
2176
- * Table Layout
2177
- * @see https://tailwindcss.com/docs/table-layout
2178
- */
2179
- "table-layout": [{
2180
- table: ["auto", "fixed"]
2181
- }],
2182
- /**
2183
- * Caption Side
2184
- * @see https://tailwindcss.com/docs/caption-side
2185
- */
2186
- caption: [{
2187
- caption: ["top", "bottom"]
2188
- }],
2189
- // ---------------------------------
2190
- // --- Transitions and Animation ---
2191
- // ---------------------------------
2192
- /**
2193
- * Transition Property
2194
- * @see https://tailwindcss.com/docs/transition-property
2195
- */
2196
- transition: [{
2197
- transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", v, h]
2198
- }],
2199
- /**
2200
- * Transition Behavior
2201
- * @see https://tailwindcss.com/docs/transition-behavior
2202
- */
2203
- "transition-behavior": [{
2204
- transition: ["normal", "discrete"]
2205
- }],
2206
- /**
2207
- * Transition Duration
2208
- * @see https://tailwindcss.com/docs/transition-duration
2209
- */
2210
- duration: [{
2211
- duration: [M, "initial", v, h]
2212
- }],
2213
- /**
2214
- * Transition Timing Function
2215
- * @see https://tailwindcss.com/docs/transition-timing-function
2216
- */
2217
- ease: [{
2218
- ease: ["linear", "initial", E, v, h]
2219
- }],
2220
- /**
2221
- * Transition Delay
2222
- * @see https://tailwindcss.com/docs/transition-delay
2223
- */
2224
- delay: [{
2225
- delay: [M, v, h]
2226
- }],
2227
- /**
2228
- * Animation
2229
- * @see https://tailwindcss.com/docs/animation
2230
- */
2231
- animate: [{
2232
- animate: ["none", w, v, h]
2233
- }],
2234
- // ------------------
2235
- // --- Transforms ---
2236
- // ------------------
2237
- /**
2238
- * Backface Visibility
2239
- * @see https://tailwindcss.com/docs/backface-visibility
2240
- */
2241
- backface: [{
2242
- backface: ["hidden", "visible"]
2243
- }],
2244
- /**
2245
- * Perspective
2246
- * @see https://tailwindcss.com/docs/perspective
2247
- */
2248
- perspective: [{
2249
- perspective: [m, v, h]
2250
- }],
2251
- /**
2252
- * Perspective Origin
2253
- * @see https://tailwindcss.com/docs/perspective-origin
2254
- */
2255
- "perspective-origin": [{
2256
- "perspective-origin": N()
2257
- }],
2258
- /**
2259
- * Rotate
2260
- * @see https://tailwindcss.com/docs/rotate
2261
- */
2262
- rotate: [{
2263
- rotate: P()
2264
- }],
2265
- /**
2266
- * Rotate X
2267
- * @see https://tailwindcss.com/docs/rotate
2268
- */
2269
- "rotate-x": [{
2270
- "rotate-x": P()
2271
- }],
2272
- /**
2273
- * Rotate Y
2274
- * @see https://tailwindcss.com/docs/rotate
2275
- */
2276
- "rotate-y": [{
2277
- "rotate-y": P()
2278
- }],
2279
- /**
2280
- * Rotate Z
2281
- * @see https://tailwindcss.com/docs/rotate
2282
- */
2283
- "rotate-z": [{
2284
- "rotate-z": P()
2285
- }],
2286
- /**
2287
- * Scale
2288
- * @see https://tailwindcss.com/docs/scale
2289
- */
2290
- scale: [{
2291
- scale: L()
2292
- }],
2293
- /**
2294
- * Scale X
2295
- * @see https://tailwindcss.com/docs/scale
2296
- */
2297
- "scale-x": [{
2298
- "scale-x": L()
2299
- }],
2300
- /**
2301
- * Scale Y
2302
- * @see https://tailwindcss.com/docs/scale
2303
- */
2304
- "scale-y": [{
2305
- "scale-y": L()
2306
- }],
2307
- /**
2308
- * Scale Z
2309
- * @see https://tailwindcss.com/docs/scale
2310
- */
2311
- "scale-z": [{
2312
- "scale-z": L()
2313
- }],
2314
- /**
2315
- * Scale 3D
2316
- * @see https://tailwindcss.com/docs/scale
2317
- */
2318
- "scale-3d": ["scale-3d"],
2319
- /**
2320
- * Skew
2321
- * @see https://tailwindcss.com/docs/skew
2322
- */
2323
- skew: [{
2324
- skew: W()
2325
- }],
2326
- /**
2327
- * Skew X
2328
- * @see https://tailwindcss.com/docs/skew
2329
- */
2330
- "skew-x": [{
2331
- "skew-x": W()
2332
- }],
2333
- /**
2334
- * Skew Y
2335
- * @see https://tailwindcss.com/docs/skew
2336
- */
2337
- "skew-y": [{
2338
- "skew-y": W()
2339
- }],
2340
- /**
2341
- * Transform
2342
- * @see https://tailwindcss.com/docs/transform
2343
- */
2344
- transform: [{
2345
- transform: [v, h, "", "none", "gpu", "cpu"]
2346
- }],
2347
- /**
2348
- * Transform Origin
2349
- * @see https://tailwindcss.com/docs/transform-origin
2350
- */
2351
- "transform-origin": [{
2352
- origin: N()
2353
- }],
2354
- /**
2355
- * Transform Style
2356
- * @see https://tailwindcss.com/docs/transform-style
2357
- */
2358
- "transform-style": [{
2359
- transform: ["3d", "flat"]
2360
- }],
2361
- /**
2362
- * Translate
2363
- * @see https://tailwindcss.com/docs/translate
2364
- */
2365
- translate: [{
2366
- translate: Q()
2367
- }],
2368
- /**
2369
- * Translate X
2370
- * @see https://tailwindcss.com/docs/translate
2371
- */
2372
- "translate-x": [{
2373
- "translate-x": Q()
2374
- }],
2375
- /**
2376
- * Translate Y
2377
- * @see https://tailwindcss.com/docs/translate
2378
- */
2379
- "translate-y": [{
2380
- "translate-y": Q()
2381
- }],
2382
- /**
2383
- * Translate Z
2384
- * @see https://tailwindcss.com/docs/translate
2385
- */
2386
- "translate-z": [{
2387
- "translate-z": Q()
2388
- }],
2389
- /**
2390
- * Translate None
2391
- * @see https://tailwindcss.com/docs/translate
2392
- */
2393
- "translate-none": ["translate-none"],
2394
- // ---------------------
2395
- // --- Interactivity ---
2396
- // ---------------------
2397
- /**
2398
- * Accent Color
2399
- * @see https://tailwindcss.com/docs/accent-color
2400
- */
2401
- accent: [{
2402
- accent: k()
2403
- }],
2404
- /**
2405
- * Appearance
2406
- * @see https://tailwindcss.com/docs/appearance
2407
- */
2408
- appearance: [{
2409
- appearance: ["none", "auto"]
2410
- }],
2411
- /**
2412
- * Caret Color
2413
- * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
2414
- */
2415
- "caret-color": [{
2416
- caret: k()
2417
- }],
2418
- /**
2419
- * Color Scheme
2420
- * @see https://tailwindcss.com/docs/color-scheme
2421
- */
2422
- "color-scheme": [{
2423
- scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
2424
- }],
2425
- /**
2426
- * Cursor
2427
- * @see https://tailwindcss.com/docs/cursor
2428
- */
2429
- cursor: [{
2430
- cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", v, h]
2431
- }],
2432
- /**
2433
- * Field Sizing
2434
- * @see https://tailwindcss.com/docs/field-sizing
2435
- */
2436
- "field-sizing": [{
2437
- "field-sizing": ["fixed", "content"]
2438
- }],
2439
- /**
2440
- * Pointer Events
2441
- * @see https://tailwindcss.com/docs/pointer-events
2442
- */
2443
- "pointer-events": [{
2444
- "pointer-events": ["auto", "none"]
2445
- }],
2446
- /**
2447
- * Resize
2448
- * @see https://tailwindcss.com/docs/resize
2449
- */
2450
- resize: [{
2451
- resize: ["none", "", "y", "x"]
2452
- }],
2453
- /**
2454
- * Scroll Behavior
2455
- * @see https://tailwindcss.com/docs/scroll-behavior
2456
- */
2457
- "scroll-behavior": [{
2458
- scroll: ["auto", "smooth"]
2459
- }],
2460
- /**
2461
- * Scroll Margin
2462
- * @see https://tailwindcss.com/docs/scroll-margin
2463
- */
2464
- "scroll-m": [{
2465
- "scroll-m": y()
2466
- }],
2467
- /**
2468
- * Scroll Margin X
2469
- * @see https://tailwindcss.com/docs/scroll-margin
2470
- */
2471
- "scroll-mx": [{
2472
- "scroll-mx": y()
2473
- }],
2474
- /**
2475
- * Scroll Margin Y
2476
- * @see https://tailwindcss.com/docs/scroll-margin
2477
- */
2478
- "scroll-my": [{
2479
- "scroll-my": y()
2480
- }],
2481
- /**
2482
- * Scroll Margin Start
2483
- * @see https://tailwindcss.com/docs/scroll-margin
2484
- */
2485
- "scroll-ms": [{
2486
- "scroll-ms": y()
2487
- }],
2488
- /**
2489
- * Scroll Margin End
2490
- * @see https://tailwindcss.com/docs/scroll-margin
2491
- */
2492
- "scroll-me": [{
2493
- "scroll-me": y()
2494
- }],
2495
- /**
2496
- * Scroll Margin Top
2497
- * @see https://tailwindcss.com/docs/scroll-margin
2498
- */
2499
- "scroll-mt": [{
2500
- "scroll-mt": y()
2501
- }],
2502
- /**
2503
- * Scroll Margin Right
2504
- * @see https://tailwindcss.com/docs/scroll-margin
2505
- */
2506
- "scroll-mr": [{
2507
- "scroll-mr": y()
2508
- }],
2509
- /**
2510
- * Scroll Margin Bottom
2511
- * @see https://tailwindcss.com/docs/scroll-margin
2512
- */
2513
- "scroll-mb": [{
2514
- "scroll-mb": y()
2515
- }],
2516
- /**
2517
- * Scroll Margin Left
2518
- * @see https://tailwindcss.com/docs/scroll-margin
2519
- */
2520
- "scroll-ml": [{
2521
- "scroll-ml": y()
2522
- }],
2523
- /**
2524
- * Scroll Padding
2525
- * @see https://tailwindcss.com/docs/scroll-padding
2526
- */
2527
- "scroll-p": [{
2528
- "scroll-p": y()
2529
- }],
2530
- /**
2531
- * Scroll Padding X
2532
- * @see https://tailwindcss.com/docs/scroll-padding
2533
- */
2534
- "scroll-px": [{
2535
- "scroll-px": y()
2536
- }],
2537
- /**
2538
- * Scroll Padding Y
2539
- * @see https://tailwindcss.com/docs/scroll-padding
2540
- */
2541
- "scroll-py": [{
2542
- "scroll-py": y()
2543
- }],
2544
- /**
2545
- * Scroll Padding Start
2546
- * @see https://tailwindcss.com/docs/scroll-padding
2547
- */
2548
- "scroll-ps": [{
2549
- "scroll-ps": y()
2550
- }],
2551
- /**
2552
- * Scroll Padding End
2553
- * @see https://tailwindcss.com/docs/scroll-padding
2554
- */
2555
- "scroll-pe": [{
2556
- "scroll-pe": y()
2557
- }],
2558
- /**
2559
- * Scroll Padding Top
2560
- * @see https://tailwindcss.com/docs/scroll-padding
2561
- */
2562
- "scroll-pt": [{
2563
- "scroll-pt": y()
2564
- }],
2565
- /**
2566
- * Scroll Padding Right
2567
- * @see https://tailwindcss.com/docs/scroll-padding
2568
- */
2569
- "scroll-pr": [{
2570
- "scroll-pr": y()
2571
- }],
2572
- /**
2573
- * Scroll Padding Bottom
2574
- * @see https://tailwindcss.com/docs/scroll-padding
2575
- */
2576
- "scroll-pb": [{
2577
- "scroll-pb": y()
2578
- }],
2579
- /**
2580
- * Scroll Padding Left
2581
- * @see https://tailwindcss.com/docs/scroll-padding
2582
- */
2583
- "scroll-pl": [{
2584
- "scroll-pl": y()
2585
- }],
2586
- /**
2587
- * Scroll Snap Align
2588
- * @see https://tailwindcss.com/docs/scroll-snap-align
2589
- */
2590
- "snap-align": [{
2591
- snap: ["start", "end", "center", "align-none"]
2592
- }],
2593
- /**
2594
- * Scroll Snap Stop
2595
- * @see https://tailwindcss.com/docs/scroll-snap-stop
2596
- */
2597
- "snap-stop": [{
2598
- snap: ["normal", "always"]
2599
- }],
2600
- /**
2601
- * Scroll Snap Type
2602
- * @see https://tailwindcss.com/docs/scroll-snap-type
2603
- */
2604
- "snap-type": [{
2605
- snap: ["none", "x", "y", "both"]
2606
- }],
2607
- /**
2608
- * Scroll Snap Type Strictness
2609
- * @see https://tailwindcss.com/docs/scroll-snap-type
2610
- */
2611
- "snap-strictness": [{
2612
- snap: ["mandatory", "proximity"]
2613
- }],
2614
- /**
2615
- * Touch Action
2616
- * @see https://tailwindcss.com/docs/touch-action
2617
- */
2618
- touch: [{
2619
- touch: ["auto", "none", "manipulation"]
2620
- }],
2621
- /**
2622
- * Touch Action X
2623
- * @see https://tailwindcss.com/docs/touch-action
2624
- */
2625
- "touch-x": [{
2626
- "touch-pan": ["x", "left", "right"]
2627
- }],
2628
- /**
2629
- * Touch Action Y
2630
- * @see https://tailwindcss.com/docs/touch-action
2631
- */
2632
- "touch-y": [{
2633
- "touch-pan": ["y", "up", "down"]
2634
- }],
2635
- /**
2636
- * Touch Action Pinch Zoom
2637
- * @see https://tailwindcss.com/docs/touch-action
2638
- */
2639
- "touch-pz": ["touch-pinch-zoom"],
2640
- /**
2641
- * User Select
2642
- * @see https://tailwindcss.com/docs/user-select
2643
- */
2644
- select: [{
2645
- select: ["none", "text", "all", "auto"]
2646
- }],
2647
- /**
2648
- * Will Change
2649
- * @see https://tailwindcss.com/docs/will-change
2650
- */
2651
- "will-change": [{
2652
- "will-change": ["auto", "scroll", "contents", "transform", v, h]
2653
- }],
2654
- // -----------
2655
- // --- SVG ---
2656
- // -----------
2657
- /**
2658
- * Fill
2659
- * @see https://tailwindcss.com/docs/fill
2660
- */
2661
- fill: [{
2662
- fill: ["none", ...k()]
2663
- }],
2664
- /**
2665
- * Stroke Width
2666
- * @see https://tailwindcss.com/docs/stroke-width
2667
- */
2668
- "stroke-w": [{
2669
- stroke: [M, be, ce, $e]
2670
- }],
2671
- /**
2672
- * Stroke
2673
- * @see https://tailwindcss.com/docs/stroke
2674
- */
2675
- stroke: [{
2676
- stroke: ["none", ...k()]
2677
- }],
2678
- // ---------------------
2679
- // --- Accessibility ---
2680
- // ---------------------
2681
- /**
2682
- * Forced Color Adjust
2683
- * @see https://tailwindcss.com/docs/forced-color-adjust
2684
- */
2685
- "forced-color-adjust": [{
2686
- "forced-color-adjust": ["auto", "none"]
2687
- }]
2688
- },
2689
- conflictingClassGroups: {
2690
- overflow: ["overflow-x", "overflow-y"],
2691
- overscroll: ["overscroll-x", "overscroll-y"],
2692
- inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
2693
- "inset-x": ["right", "left"],
2694
- "inset-y": ["top", "bottom"],
2695
- flex: ["basis", "grow", "shrink"],
2696
- gap: ["gap-x", "gap-y"],
2697
- p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
2698
- px: ["pr", "pl"],
2699
- py: ["pt", "pb"],
2700
- m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
2701
- mx: ["mr", "ml"],
2702
- my: ["mt", "mb"],
2703
- size: ["w", "h"],
2704
- "font-size": ["leading"],
2705
- "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
2706
- "fvn-ordinal": ["fvn-normal"],
2707
- "fvn-slashed-zero": ["fvn-normal"],
2708
- "fvn-figure": ["fvn-normal"],
2709
- "fvn-spacing": ["fvn-normal"],
2710
- "fvn-fraction": ["fvn-normal"],
2711
- "line-clamp": ["display", "overflow"],
2712
- rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
2713
- "rounded-s": ["rounded-ss", "rounded-es"],
2714
- "rounded-e": ["rounded-se", "rounded-ee"],
2715
- "rounded-t": ["rounded-tl", "rounded-tr"],
2716
- "rounded-r": ["rounded-tr", "rounded-br"],
2717
- "rounded-b": ["rounded-br", "rounded-bl"],
2718
- "rounded-l": ["rounded-tl", "rounded-bl"],
2719
- "border-spacing": ["border-spacing-x", "border-spacing-y"],
2720
- "border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
2721
- "border-w-x": ["border-w-r", "border-w-l"],
2722
- "border-w-y": ["border-w-t", "border-w-b"],
2723
- "border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
2724
- "border-color-x": ["border-color-r", "border-color-l"],
2725
- "border-color-y": ["border-color-t", "border-color-b"],
2726
- translate: ["translate-x", "translate-y", "translate-none"],
2727
- "translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
2728
- "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
2729
- "scroll-mx": ["scroll-mr", "scroll-ml"],
2730
- "scroll-my": ["scroll-mt", "scroll-mb"],
2731
- "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
2732
- "scroll-px": ["scroll-pr", "scroll-pl"],
2733
- "scroll-py": ["scroll-pt", "scroll-pb"],
2734
- touch: ["touch-x", "touch-y", "touch-pz"],
2735
- "touch-x": ["touch"],
2736
- "touch-y": ["touch"],
2737
- "touch-pz": ["touch"]
2738
- },
2739
- conflictingClassGroupModifiers: {
2740
- "font-size": ["leading"]
2741
- },
2742
- orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
2743
- };
2744
- }, Qn = /* @__PURE__ */ On(Jn);
2745
- function Z(...e) {
2746
- return Qn(zt(e));
2747
- }
2748
- let Ye;
2749
- process.env.NODE_ENV !== "production" && (Ye = /* @__PURE__ */ new Set());
2750
- function Se(...e) {
2751
- if (process.env.NODE_ENV !== "production") {
2752
- const t = e.join(" ");
2753
- Ye.has(t) || (Ye.add(t), console.error(`Base UI: ${t}`));
2754
- }
2755
- }
2756
- function er({
2757
- controlled: e,
2758
- default: t,
2759
- name: n,
2760
- state: r = "value"
2761
- }) {
2762
- const {
2763
- current: o
2764
- } = d.useRef(e !== void 0), [s, i] = d.useState(t), c = o ? e : s;
2765
- if (process.env.NODE_ENV !== "production") {
2766
- d.useEffect(() => {
2767
- o !== (e !== void 0) && Se([`A component is changing the ${o ? "" : "un"}controlled ${r} state of ${n} to be ${o ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${n} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
2768
- `));
2769
- }, [r, n, e]);
2770
- const {
2771
- current: l
2772
- } = d.useRef(t);
2773
- d.useEffect(() => {
2774
- !o && vt(l) !== vt(t) && Se([`A component is changing the default ${r} state of an uncontrolled ${n} after being initialized. To suppress this warning opt to use a controlled ${n}.`].join(`
2775
- `));
2776
- }, [t]);
2777
- }
2778
- const a = d.useCallback((l) => {
2779
- o || i(l);
2780
- }, []);
2781
- return [c, a];
2782
- }
2783
- function vt(e) {
2784
- let t = 0;
2785
- const n = /* @__PURE__ */ new WeakMap();
2786
- try {
2787
- return JSON.stringify(e, function(s, i) {
2788
- if (!(s === "_owner" && this != null && typeof this == "object" && "$$typeof" in this)) {
2789
- if (typeof i == "bigint")
2790
- return `__bigint__:${i}`;
2791
- if (i !== null && typeof i == "object") {
2792
- const c = n.get(i);
2793
- if (c !== void 0)
2794
- return `__object__:${c}`;
2795
- n.set(i, t), t += 1;
97
+ children: [
98
+ /* @__PURE__ */ e("style", { children: `
99
+ .ctabs-list {
100
+ padding: 0 10px;
101
+ gap: 0px;
102
+ overflow-x: visible;
103
+ -webkit-overflow-scrolling: touch;
104
+ scrollbar-width: none;
2796
105
  }
2797
- return i;
2798
- }
2799
- }) ?? `__top__:${typeof e}`;
2800
- } catch {
2801
- return "__unserializable__";
2802
- }
2803
- }
2804
- const tr = () => {
2805
- }, H = typeof document < "u" ? d.useLayoutEffect : tr, oe = {
2806
- ...d
2807
- }, yt = {};
2808
- function fe(e, t) {
2809
- const n = d.useRef(yt);
2810
- return n.current === yt && (n.current = e(t)), n;
2811
- }
2812
- const We = oe.useInsertionEffect, nr = (
2813
- // React 17 doesn't have useInsertionEffect.
2814
- We && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
2815
- We !== oe.useLayoutEffect ? We : (e) => e()
2816
- );
2817
- function K(e) {
2818
- const t = fe(rr).current;
2819
- return t.next = e, nr(t.effect), t.trampoline;
2820
- }
2821
- function rr() {
2822
- const e = {
2823
- next: void 0,
2824
- callback: or,
2825
- trampoline: (...t) => {
2826
- var n;
2827
- return (n = e.callback) == null ? void 0 : n.call(e, ...t);
2828
- },
2829
- effect: () => {
2830
- e.callback = e.next;
2831
- }
2832
- };
2833
- return e;
2834
- }
2835
- function or() {
2836
- if (process.env.NODE_ENV !== "production")
2837
- throw (
2838
- /* minify-error-disabled */
2839
- new Error("Base UI: Cannot call an event handler while rendering.")
2840
- );
2841
- }
2842
- function sr(e, t) {
2843
- return function(r, ...o) {
2844
- const s = new URL(e);
2845
- return s.searchParams.set("code", r.toString()), o.forEach((i) => s.searchParams.append("args[]", i)), `${t} error #${r}; visit ${s} for the full message.`;
2846
- };
2847
- }
2848
- const _e = sr("https://base-ui.com/production-error", "Base UI");
2849
- function Me(e, t, n, r) {
2850
- const o = fe(Kt).current;
2851
- return ar(o, e, t, n, r) && Yt(o, [e, t, n, r]), o.callback;
2852
- }
2853
- function ir(e) {
2854
- const t = fe(Kt).current;
2855
- return lr(t, e) && Yt(t, e), t.callback;
2856
- }
2857
- function Kt() {
2858
- return {
2859
- callback: null,
2860
- cleanup: null,
2861
- refs: []
2862
- };
2863
- }
2864
- function ar(e, t, n, r, o) {
2865
- return e.refs[0] !== t || e.refs[1] !== n || e.refs[2] !== r || e.refs[3] !== o;
2866
- }
2867
- function lr(e, t) {
2868
- return e.refs.length !== t.length || e.refs.some((n, r) => n !== t[r]);
2869
- }
2870
- function Yt(e, t) {
2871
- if (e.refs = t, t.every((n) => n == null)) {
2872
- e.callback = null;
2873
- return;
2874
- }
2875
- e.callback = (n) => {
2876
- if (e.cleanup && (e.cleanup(), e.cleanup = null), n != null) {
2877
- const r = Array(t.length).fill(null);
2878
- for (let o = 0; o < t.length; o += 1) {
2879
- const s = t[o];
2880
- if (s != null)
2881
- switch (typeof s) {
2882
- case "function": {
2883
- const i = s(n);
2884
- typeof i == "function" && (r[o] = i);
2885
- break;
2886
- }
2887
- case "object": {
2888
- s.current = n;
2889
- break;
2890
- }
2891
- }
2892
- }
2893
- e.cleanup = () => {
2894
- for (let o = 0; o < t.length; o += 1) {
2895
- const s = t[o];
2896
- if (s != null)
2897
- switch (typeof s) {
2898
- case "function": {
2899
- const i = r[o];
2900
- typeof i == "function" ? i() : s(null);
2901
- break;
2902
- }
2903
- case "object": {
2904
- s.current = null;
2905
- break;
2906
- }
2907
- }
106
+ .ctabs-list::-webkit-scrollbar { display: none; }
107
+
108
+ .ctabs-btn {
109
+ padding: 4px 20px;
110
+ font-size: 14px;
111
+ font-weight: 500;
112
+ gap: 8px;
113
+ white-space: nowrap;
114
+ flex-shrink: 0;
2908
115
  }
2909
- };
2910
- }
2911
- };
2912
- }
2913
- const cr = parseInt(d.version, 10);
2914
- function qt(e) {
2915
- return cr >= e;
2916
- }
2917
- function xt(e) {
2918
- if (!/* @__PURE__ */ d.isValidElement(e))
2919
- return null;
2920
- const t = e, n = t.props;
2921
- return (qt(19) ? n == null ? void 0 : n.ref : t.ref) ?? null;
2922
- }
2923
- function qe(e, t) {
2924
- if (e && !t)
2925
- return e;
2926
- if (!e && t)
2927
- return t;
2928
- if (e || t)
2929
- return {
2930
- ...e,
2931
- ...t
2932
- };
2933
- }
2934
- let Xe;
2935
- process.env.NODE_ENV !== "production" && (Xe = /* @__PURE__ */ new Set());
2936
- function ur(...e) {
2937
- if (process.env.NODE_ENV !== "production") {
2938
- const t = e.join(" ");
2939
- Xe.has(t) || (Xe.add(t), console.warn(`Base UI: ${t}`));
2940
- }
2941
- }
2942
- const Ze = Object.freeze([]), ue = Object.freeze({});
2943
- function dr(e, t) {
2944
- const n = {};
2945
- for (const r in e) {
2946
- const o = e[r];
2947
- if (t != null && t.hasOwnProperty(r)) {
2948
- const s = t[r](o);
2949
- s != null && Object.assign(n, s);
2950
- continue;
2951
- }
2952
- o === !0 ? n[`data-${r.toLowerCase()}`] = "" : o && (n[`data-${r.toLowerCase()}`] = o.toString());
2953
- }
2954
- return n;
2955
- }
2956
- function fr(e, t) {
2957
- return typeof e == "function" ? e(t) : e;
2958
- }
2959
- function pr(e, t) {
2960
- return typeof e == "function" ? e(t) : e;
2961
- }
2962
- const tt = {};
2963
- function nt(e, t, n, r, o) {
2964
- if (!n && !r && !e)
2965
- return Ae(t);
2966
- let s = Ae(e);
2967
- return t && (s = Ne(s, t)), n && (s = Ne(s, n)), r && (s = Ne(s, r)), s;
2968
- }
2969
- function mr(e) {
2970
- if (e.length === 0)
2971
- return tt;
2972
- if (e.length === 1)
2973
- return Ae(e[0]);
2974
- let t = Ae(e[0]);
2975
- for (let n = 1; n < e.length; n += 1)
2976
- t = Ne(t, e[n]);
2977
- return t;
2978
- }
2979
- function Ae(e) {
2980
- return rt(e) ? {
2981
- ...Zt(e, tt)
2982
- } : gr(e);
2983
- }
2984
- function Ne(e, t) {
2985
- return rt(t) ? Zt(t, e) : br(e, t);
2986
- }
2987
- function gr(e) {
2988
- const t = {
2989
- ...e
2990
- };
2991
- for (const n in t) {
2992
- const r = t[n];
2993
- Xt(n, r) && (t[n] = Jt(r));
2994
- }
2995
- return t;
2996
- }
2997
- function br(e, t) {
2998
- if (!t)
2999
- return e;
3000
- for (const n in t) {
3001
- const r = t[n];
3002
- switch (n) {
3003
- case "style": {
3004
- e[n] = qe(e.style, r);
3005
- break;
3006
- }
3007
- case "className": {
3008
- e[n] = Qt(e.className, r);
3009
- break;
3010
- }
3011
- default:
3012
- Xt(n, r) ? e[n] = hr(e[n], r) : e[n] = r;
3013
- }
3014
- }
3015
- return e;
3016
- }
3017
- function Xt(e, t) {
3018
- const n = e.charCodeAt(0), r = e.charCodeAt(1), o = e.charCodeAt(2);
3019
- return n === 111 && r === 110 && o >= 65 && o <= 90 && (typeof t == "function" || typeof t > "u");
3020
- }
3021
- function rt(e) {
3022
- return typeof e == "function";
3023
- }
3024
- function Zt(e, t) {
3025
- return rt(e) ? e(t) : e ?? tt;
3026
- }
3027
- function hr(e, t) {
3028
- return t ? e ? (...n) => {
3029
- const r = n[0];
3030
- if (en(r)) {
3031
- const s = r;
3032
- Pe(s);
3033
- const i = t(...n);
3034
- return s.baseUIHandlerPrevented || e == null || e(...n), i;
3035
- }
3036
- const o = t(...n);
3037
- return e == null || e(...n), o;
3038
- } : Jt(t) : e;
3039
- }
3040
- function Jt(e) {
3041
- return e && ((...t) => {
3042
- const n = t[0];
3043
- return en(n) && Pe(n), e(...t);
3044
- });
3045
- }
3046
- function Pe(e) {
3047
- return e.preventBaseUIHandler = () => {
3048
- e.baseUIHandlerPrevented = !0;
3049
- }, e;
3050
- }
3051
- function Qt(e, t) {
3052
- return t ? e ? t + " " + e : t : e;
3053
- }
3054
- function en(e) {
3055
- return e != null && typeof e == "object" && "nativeEvent" in e;
3056
- }
3057
- function ze(e, t, n = {}) {
3058
- const r = t.render, o = vr(t, n);
3059
- if (n.enabled === !1)
3060
- return null;
3061
- const s = n.state ?? ue;
3062
- return Er(e, r, o, s);
3063
- }
3064
- function vr(e, t = {}) {
3065
- const {
3066
- className: n,
3067
- style: r,
3068
- render: o
3069
- } = e, {
3070
- state: s = ue,
3071
- ref: i,
3072
- props: c,
3073
- stateAttributesMapping: a,
3074
- enabled: l = !0
3075
- } = t, u = l ? fr(n, s) : void 0, g = l ? pr(r, s) : void 0, A = l ? dr(s, a) : ue, T = l && c ? yr(c) : void 0, p = l ? qe(A, T) ?? {} : ue;
3076
- return typeof document < "u" && (l ? Array.isArray(i) ? p.ref = ir([p.ref, xt(o), ...i]) : p.ref = Me(p.ref, xt(o), i) : Me(null, null)), l ? (u !== void 0 && (p.className = Qt(p.className, u)), g !== void 0 && (p.style = qe(p.style, g)), p) : ue;
3077
- }
3078
- function yr(e) {
3079
- return Array.isArray(e) ? mr(e) : nt(void 0, e);
3080
- }
3081
- const xr = Symbol.for("react.lazy"), wr = /^[A-Z][A-Za-z0-9$]*$/, kr = /[a-z]/;
3082
- function Er(e, t, n, r) {
3083
- if (t) {
3084
- if (typeof t == "function")
3085
- return process.env.NODE_ENV !== "production" && Rr(t), t(n, r);
3086
- const o = nt(n, t.props);
3087
- o.ref = n.ref;
3088
- let s = t;
3089
- if ((s == null ? void 0 : s.$$typeof) === xr && (s = d.Children.toArray(t)[0]), process.env.NODE_ENV !== "production" && !/* @__PURE__ */ d.isValidElement(s))
3090
- throw new Error(["Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.", "A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.", "https://base-ui.com/r/invalid-render-prop"].join(`
3091
- `));
3092
- return /* @__PURE__ */ d.cloneElement(s, o);
3093
- }
3094
- if (e && typeof e == "string")
3095
- return Ir(e, n);
3096
- throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: Render element or function are not defined." : _e(8));
3097
- }
3098
- function Rr(e) {
3099
- const t = e.name;
3100
- t.length !== 0 && wr.test(t) && kr.test(t) && ur(`The \`render\` prop received a function named \`${t}\` that starts with an uppercase letter.`, "This usually means a React component was passed directly as `render={Component}`.", "Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.", "If this is an intentional render callback, rename it to start with a lowercase letter.", "Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.", "https://base-ui.com/r/invalid-render-prop");
3101
- }
3102
- function Ir(e, t) {
3103
- return e === "button" ? /* @__PURE__ */ pt("button", {
3104
- type: "button",
3105
- ...t,
3106
- key: t.key
3107
- }) : e === "img" ? /* @__PURE__ */ pt("img", {
3108
- alt: "",
3109
- ...t,
3110
- key: t.key
3111
- }) : /* @__PURE__ */ d.createElement(e, t);
3112
- }
3113
- const ot = /* @__PURE__ */ d.createContext({
3114
- register: () => {
3115
- },
3116
- unregister: () => {
3117
- },
3118
- subscribeMapChange: () => () => {
3119
- },
3120
- elementsRef: {
3121
- current: []
3122
- },
3123
- nextIndexRef: {
3124
- current: 0
3125
- }
3126
- });
3127
- process.env.NODE_ENV !== "production" && (ot.displayName = "CompositeListContext");
3128
- function Tr() {
3129
- return d.useContext(ot);
3130
- }
3131
- function tn(e) {
3132
- const {
3133
- children: t,
3134
- elementsRef: n,
3135
- labelsRef: r,
3136
- onMapChange: o
3137
- } = e, s = K(o), i = d.useRef(0), c = fe(Nr).current, a = fe(Cr).current, [l, u] = d.useState(0), g = d.useRef(l), A = K((E, w) => {
3138
- a.set(E, w ?? null), g.current += 1, u(g.current);
3139
- }), T = K((E) => {
3140
- a.delete(E), g.current += 1, u(g.current);
3141
- }), p = d.useMemo(() => {
3142
- const E = /* @__PURE__ */ new Map();
3143
- return Array.from(a.keys()).filter((I) => I.isConnected).sort(Sr).forEach((I, f) => {
3144
- const N = a.get(I) ?? {};
3145
- E.set(I, {
3146
- ...N,
3147
- index: f
3148
- });
3149
- }), E;
3150
- }, [a, l]);
3151
- H(() => {
3152
- if (typeof MutationObserver != "function" || p.size === 0)
3153
- return;
3154
- const E = new MutationObserver((w) => {
3155
- const I = /* @__PURE__ */ new Set(), f = (N) => I.has(N) ? I.delete(N) : I.add(N);
3156
- w.forEach((N) => {
3157
- N.removedNodes.forEach(f), N.addedNodes.forEach(f);
3158
- }), I.size === 0 && (g.current += 1, u(g.current));
3159
- });
3160
- return p.forEach((w, I) => {
3161
- I.parentElement && E.observe(I.parentElement, {
3162
- childList: !0
3163
- });
3164
- }), () => {
3165
- E.disconnect();
3166
- };
3167
- }, [p]), H(() => {
3168
- g.current === l && (n.current.length !== p.size && (n.current.length = p.size), r && r.current.length !== p.size && (r.current.length = p.size), i.current = p.size), s(p);
3169
- }, [s, p, n, r, l]), H(() => () => {
3170
- n.current = [];
3171
- }, [n]), H(() => () => {
3172
- r && (r.current = []);
3173
- }, [r]);
3174
- const m = K((E) => (c.add(E), () => {
3175
- c.delete(E);
3176
- }));
3177
- H(() => {
3178
- c.forEach((E) => E(p));
3179
- }, [c, p]);
3180
- const x = d.useMemo(() => ({
3181
- register: A,
3182
- unregister: T,
3183
- subscribeMapChange: m,
3184
- elementsRef: n,
3185
- labelsRef: r,
3186
- nextIndexRef: i
3187
- }), [A, T, m, n, r, i]);
3188
- return /* @__PURE__ */ G(ot.Provider, {
3189
- value: x,
3190
- children: t
3191
- });
3192
- }
3193
- function Cr() {
3194
- return /* @__PURE__ */ new Map();
3195
- }
3196
- function Nr() {
3197
- return /* @__PURE__ */ new Set();
3198
- }
3199
- function Sr(e, t) {
3200
- const n = e.compareDocumentPosition(t);
3201
- return n & Node.DOCUMENT_POSITION_FOLLOWING || n & Node.DOCUMENT_POSITION_CONTAINED_BY ? -1 : n & Node.DOCUMENT_POSITION_PRECEDING || n & Node.DOCUMENT_POSITION_CONTAINS ? 1 : 0;
3202
- }
3203
- const st = /* @__PURE__ */ d.createContext(void 0);
3204
- process.env.NODE_ENV !== "production" && (st.displayName = "TabsRootContext");
3205
- function it() {
3206
- const e = d.useContext(st);
3207
- if (e === void 0)
3208
- throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>." : _e(64));
3209
- return e;
3210
- }
3211
- let Mr = /* @__PURE__ */ (function(e) {
3212
- return e.activationDirection = "data-activation-direction", e.orientation = "data-orientation", e;
3213
- })({});
3214
- const De = {
3215
- tabActivationDirection: (e) => ({
3216
- [Mr.activationDirection]: e
3217
- })
3218
- }, wt = "none", Ar = "disabled", kt = "missing", Et = "initial";
3219
- function Je(e, t, n, r) {
3220
- let o = !1, s = !1;
3221
- const i = r ?? ue;
3222
- return {
3223
- reason: e,
3224
- event: t ?? new Event("base-ui"),
3225
- cancel() {
3226
- o = !0;
3227
- },
3228
- allowPropagation() {
3229
- s = !0;
3230
- },
3231
- get isCanceled() {
3232
- return o;
3233
- },
3234
- get isPropagationAllowed() {
3235
- return s;
3236
- },
3237
- trigger: n,
3238
- ...i
3239
- };
3240
- }
3241
- const nn = /* @__PURE__ */ d.forwardRef(function(t, n) {
3242
- const {
3243
- className: r,
3244
- defaultValue: o = 0,
3245
- onValueChange: s,
3246
- orientation: i = "horizontal",
3247
- render: c,
3248
- value: a,
3249
- style: l,
3250
- ...u
3251
- } = t, g = t.defaultValue !== void 0, A = d.useRef([]), [T, p] = d.useState(() => /* @__PURE__ */ new Map()), [m, x] = er({
3252
- controlled: a,
3253
- default: o,
3254
- name: "Tabs",
3255
- state: "value"
3256
- }), E = a !== void 0, [w, I] = d.useState(() => /* @__PURE__ */ new Map()), f = d.useRef(void 0), N = d.useCallback((P) => {
3257
- if (P === void 0)
3258
- return null;
3259
- for (const [L, W] of w.entries())
3260
- if (W != null && P === (W.value ?? W.index))
3261
- return L;
3262
- return null;
3263
- }, [w]), [z, D] = d.useState(() => ({
3264
- previousValue: m,
3265
- tabActivationDirection: "none"
3266
- })), {
3267
- previousValue: y,
3268
- tabActivationDirection: O
3269
- } = z;
3270
- let b = O, R = !1;
3271
- y !== m && (b = Rt(y, m, i, w), R = y != null && m != null && N(m) == null);
3272
- const C = R ? y : m, F = y !== C || O !== b;
3273
- H(() => {
3274
- F && D({
3275
- previousValue: C,
3276
- tabActivationDirection: b
3277
- });
3278
- }, [C, F, b]);
3279
- const U = K((P, L) => {
3280
- const W = Rt(m, P, i, w);
3281
- L.activationDirection = W, s == null || s(P, L), !L.isCanceled && x(P);
3282
- }), Y = K((P, L) => {
3283
- s == null || s(P, Je(L, void 0, void 0, {
3284
- activationDirection: "none"
3285
- }));
3286
- }), V = K((P, L) => {
3287
- p((W) => {
3288
- if (W.get(P) === L)
3289
- return W;
3290
- const Q = new Map(W);
3291
- return Q.set(P, L), Q;
3292
- });
3293
- }), q = K((P, L) => {
3294
- p((W) => {
3295
- if (!W.has(P) || W.get(P) !== L)
3296
- return W;
3297
- const Q = new Map(W);
3298
- return Q.delete(P), Q;
3299
- });
3300
- }), k = d.useCallback((P) => T.get(P), [T]), _ = d.useCallback((P) => {
3301
- for (const L of w.values())
3302
- if (P === (L == null ? void 0 : L.value))
3303
- return L == null ? void 0 : L.id;
3304
- }, [w]), ee = d.useMemo(() => ({
3305
- getTabElementBySelectedValue: N,
3306
- getTabIdByPanelValue: _,
3307
- getTabPanelIdByValue: k,
3308
- onValueChange: U,
3309
- orientation: i,
3310
- registerMountedTabPanel: V,
3311
- setTabMap: I,
3312
- unregisterMountedTabPanel: q,
3313
- tabActivationDirection: b,
3314
- value: m
3315
- }), [N, _, k, U, i, V, I, q, b, m]), J = d.useMemo(() => {
3316
- for (const P of w.values())
3317
- if (P != null && P.value === m)
3318
- return P;
3319
- }, [w, m]), te = d.useMemo(() => {
3320
- for (const P of w.values())
3321
- if (P != null && !P.disabled)
3322
- return P.value;
3323
- }, [w]), S = d.useRef(!g), B = d.useRef(o), X = d.useRef(g), ae = d.useRef(!1);
3324
- H(() => {
3325
- var dt;
3326
- if (E)
3327
- return;
3328
- function P(le, ge) {
3329
- x(le), D((Fe) => Fe.previousValue === le && Fe.tabActivationDirection === "none" ? Fe : {
3330
- previousValue: le,
3331
- tabActivationDirection: "none"
3332
- }), Y(le, ge), S.current = !1;
3333
- }
3334
- if (w.size === 0) {
3335
- ae.current && m !== null && !((dt = f.current) != null && dt.isConnected) && P(null, kt);
3336
- return;
3337
- }
3338
- ae.current = !0, f.current = w.keys().next().value;
3339
- const L = J == null ? void 0 : J.disabled, W = J == null && m !== null;
3340
- if (!L && m === B.current && (X.current = !1), X.current && L && m === B.current)
3341
- return;
3342
- const Q = S.current;
3343
- if (L || W) {
3344
- const le = te ?? null;
3345
- if (m === le) {
3346
- S.current = !1;
3347
- return;
3348
- }
3349
- let ge = kt;
3350
- Q ? ge = Et : L && (ge = Ar), P(le, ge);
3351
- return;
3352
- }
3353
- Q && J != null && (Y(m, Et), S.current = !1);
3354
- }, [te, E, Y, J, x, w, m]);
3355
- const we = ze("div", t, {
3356
- state: {
3357
- orientation: i,
3358
- tabActivationDirection: b
3359
- },
3360
- ref: n,
3361
- props: u,
3362
- stateAttributesMapping: De
3363
- });
3364
- return /* @__PURE__ */ G(st.Provider, {
3365
- value: ee,
3366
- children: /* @__PURE__ */ G(tn, {
3367
- elementsRef: A,
3368
- children: we
3369
- })
3370
- });
3371
- });
3372
- process.env.NODE_ENV !== "production" && (nn.displayName = "TabsRoot");
3373
- function Rt(e, t, n, r) {
3374
- if (e == null || t == null)
3375
- return "none";
3376
- let o = null, s = null;
3377
- for (const [a, l] of r.entries()) {
3378
- if (l == null)
3379
- continue;
3380
- const u = l.value ?? l.index;
3381
- if (e === u && (o = a), t === u && (s = a), o != null && s != null)
3382
- break;
3383
- }
3384
- if (o == null || s == null)
3385
- return o !== s && (typeof e == "number" || typeof e == "string") && typeof e == typeof t ? n === "horizontal" ? t > e ? "right" : "left" : t > e ? "down" : "up" : "none";
3386
- const i = o.getBoundingClientRect(), c = s.getBoundingClientRect();
3387
- if (n === "horizontal") {
3388
- if (c.left < i.left)
3389
- return "left";
3390
- if (c.left > i.left)
3391
- return "right";
3392
- } else {
3393
- if (c.top < i.top)
3394
- return "up";
3395
- if (c.top > i.top)
3396
- return "down";
3397
- }
3398
- return "none";
3399
- }
3400
- function rn() {
3401
- return typeof window < "u";
3402
- }
3403
- function at(e) {
3404
- var t;
3405
- return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
3406
- }
3407
- function lt(e) {
3408
- return rn() ? e instanceof HTMLElement || e instanceof at(e).HTMLElement : !1;
3409
- }
3410
- function Pr(e) {
3411
- return !rn() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof at(e).ShadowRoot;
3412
- }
3413
- function Or(e) {
3414
- return at(e).getComputedStyle(e);
3415
- }
3416
- function It(e) {
3417
- return (e == null ? void 0 : e.ownerDocument) || document;
3418
- }
3419
- let Tt = 0;
3420
- function Lr(e, t = "mui") {
3421
- const [n, r] = d.useState(e), o = e || n;
3422
- return d.useEffect(() => {
3423
- n == null && (Tt += 1, r(`${t}-${Tt}`));
3424
- }, [n, t]), o;
3425
- }
3426
- const Ct = oe.useId;
3427
- function _r(e, t) {
3428
- if (Ct !== void 0) {
3429
- const n = Ct();
3430
- return e ?? `${t}-${n}`;
3431
- }
3432
- return Lr(e, t);
3433
- }
3434
- function on(e) {
3435
- return _r(e, "base-ui");
3436
- }
3437
- const ct = /* @__PURE__ */ d.createContext(void 0);
3438
- process.env.NODE_ENV !== "production" && (ct.displayName = "CompositeRootContext");
3439
- function sn(e = !1) {
3440
- const t = d.useContext(ct);
3441
- if (t === void 0 && !e)
3442
- throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>." : _e(16));
3443
- return t;
3444
- }
3445
- function zr(e) {
3446
- const {
3447
- focusableWhenDisabled: t,
3448
- disabled: n,
3449
- composite: r = !1,
3450
- tabIndex: o = 0,
3451
- isNativeButton: s
3452
- } = e, i = r && t !== !1, c = r && t === !1;
3453
- return {
3454
- props: d.useMemo(() => {
3455
- const l = {
3456
- // allow Tabbing away from focusableWhenDisabled elements
3457
- onKeyDown(u) {
3458
- n && t && u.key !== "Tab" && u.preventDefault();
3459
- }
3460
- };
3461
- return r || (l.tabIndex = o, !s && n && (l.tabIndex = t ? o : -1)), (s && (t || i) || !s && n) && (l["aria-disabled"] = n), s && (!t || c) && (l.disabled = n), l;
3462
- }, [r, n, t, i, c, s, o])
3463
- };
3464
- }
3465
- function Dr(e = {}) {
3466
- const {
3467
- disabled: t = !1,
3468
- focusableWhenDisabled: n,
3469
- tabIndex: r = 0,
3470
- native: o = !0,
3471
- composite: s
3472
- } = e, i = d.useRef(null), c = sn(!0), a = s ?? c !== void 0, {
3473
- props: l
3474
- } = zr({
3475
- focusableWhenDisabled: n,
3476
- disabled: t,
3477
- composite: a,
3478
- tabIndex: r,
3479
- isNativeButton: o
3480
- });
3481
- process.env.NODE_ENV !== "production" && d.useEffect(() => {
3482
- var p, m;
3483
- if (!i.current)
3484
- return;
3485
- const T = Re(i.current);
3486
- if (o) {
3487
- if (!T) {
3488
- const x = ((p = oe.captureOwnerStack) == null ? void 0 : p.call(oe)) || "";
3489
- Se(`A component that acts as a button expected a native <button> because the \`nativeButton\` prop is true. Rendering a non-<button> removes native button semantics, which can impact forms and accessibility. Use a real <button> in the \`render\` prop, or set \`nativeButton\` to \`false\`.${x}`);
3490
- }
3491
- } else if (T) {
3492
- const x = ((m = oe.captureOwnerStack) == null ? void 0 : m.call(oe)) || "";
3493
- Se(`A component that acts as a button expected a non-<button> because the \`nativeButton\` prop is false. Rendering a <button> keeps native behavior while Base UI applies non-native attributes and handlers, which can add unintended extra attributes (such as \`role\` or \`aria-disabled\`). Use a non-<button> in the \`render\` prop, or set \`nativeButton\` to \`true\`.${x}`);
3494
- }
3495
- }, [o]);
3496
- const u = d.useCallback(() => {
3497
- const T = i.current;
3498
- Re(T) && a && t && l.disabled === void 0 && T.disabled && (T.disabled = !1);
3499
- }, [t, l.disabled, a]);
3500
- H(u, [u]);
3501
- const g = d.useCallback((T = {}) => {
3502
- const {
3503
- onClick: p,
3504
- onMouseDown: m,
3505
- onKeyUp: x,
3506
- onKeyDown: E,
3507
- onPointerDown: w,
3508
- ...I
3509
- } = T;
3510
- return nt({
3511
- onClick(f) {
3512
- if (t) {
3513
- f.preventDefault();
3514
- return;
116
+
117
+ .ctabs-badge {
118
+ width: 20px;
119
+ height: 20px;
120
+ border-radius: 4px;
121
+ font-size: 12px;
122
+ font-weight: 600;
123
+ flex-shrink: 0;
124
+ display: flex;
125
+ align-items: center;
126
+ justify-content: center;
3515
127
  }
3516
- p == null || p(f);
3517
- },
3518
- onMouseDown(f) {
3519
- t || m == null || m(f);
3520
- },
3521
- onKeyDown(f) {
3522
- if (t || (Pe(f), E == null || E(f), f.baseUIHandlerPrevented))
3523
- return;
3524
- const N = f.target === f.currentTarget, z = f.currentTarget, D = Re(z), y = !o && Vr(z), O = N && (o ? D : !y), b = f.key === "Enter", R = f.key === " ", C = z.getAttribute("role"), F = (C == null ? void 0 : C.startsWith("menuitem")) || C === "option" || C === "gridcell";
3525
- if (N && a && R) {
3526
- if (f.defaultPrevented && F)
3527
- return;
3528
- f.preventDefault(), y || o && D ? (z.click(), f.preventBaseUIHandler()) : O && (p == null || p(f), f.preventBaseUIHandler());
3529
- return;
128
+
129
+ .ctabs-label {
130
+ white-space: nowrap;
3530
131
  }
3531
- O && (!o && (R || b) && f.preventDefault(), !o && b && (p == null || p(f)));
3532
- },
3533
- onKeyUp(f) {
3534
- if (!t) {
3535
- if (Pe(f), x == null || x(f), f.target === f.currentTarget && o && a && Re(f.currentTarget) && f.key === " ") {
3536
- f.preventDefault();
3537
- return;
132
+
133
+ /* Tablet — unchanged, still scrolls horizontally if needed */
134
+ @media (max-width: 768px) {
135
+ .ctabs-list {
136
+ padding: 0 6px;
137
+ gap: 2px;
138
+ overflow-x: auto;
139
+ }
140
+ .ctabs-btn {
141
+ padding: 7px 14px;
142
+ font-size: 13px;
143
+ gap: 6px;
144
+ }
145
+ .ctabs-badge {
146
+ width: 18px;
147
+ height: 18px;
148
+ font-size: 11px;
3538
149
  }
3539
- f.baseUIHandlerPrevented || f.target === f.currentTarget && !o && !a && f.key === " " && (p == null || p(f));
3540
- }
3541
- },
3542
- onPointerDown(f) {
3543
- if (t) {
3544
- f.preventDefault();
3545
- return;
3546
150
  }
3547
- w == null || w(f);
3548
- }
3549
- }, o ? {
3550
- type: "button"
3551
- } : {
3552
- role: "button"
3553
- }, l, I);
3554
- }, [t, l, a, o]), A = K((T) => {
3555
- i.current = T, u();
3556
- });
3557
- return {
3558
- getButtonProps: g,
3559
- buttonRef: A
3560
- };
3561
- }
3562
- function Re(e) {
3563
- return lt(e) && e.tagName === "BUTTON";
3564
- }
3565
- function Vr(e) {
3566
- return !!((e == null ? void 0 : e.tagName) === "A" && (e != null && e.href));
3567
- }
3568
- const an = "data-composite-item-active";
3569
- let Br = /* @__PURE__ */ (function(e) {
3570
- return e[e.None = 0] = "None", e[e.GuessFromOrder = 1] = "GuessFromOrder", e;
3571
- })({});
3572
- function ln(e = {}) {
3573
- const {
3574
- label: t,
3575
- metadata: n,
3576
- textRef: r,
3577
- indexGuessBehavior: o,
3578
- index: s
3579
- } = e, {
3580
- register: i,
3581
- unregister: c,
3582
- subscribeMapChange: a,
3583
- elementsRef: l,
3584
- labelsRef: u,
3585
- nextIndexRef: g
3586
- } = Tr(), A = d.useRef(-1), [T, p] = d.useState(s ?? (o === Br.GuessFromOrder ? () => {
3587
- if (A.current === -1) {
3588
- const E = g.current;
3589
- g.current += 1, A.current = E;
3590
- }
3591
- return A.current;
3592
- } : -1)), m = d.useRef(null), x = d.useCallback((E) => {
3593
- var w;
3594
- if (m.current = E, T !== -1 && E !== null && (l.current[T] = E, u)) {
3595
- const I = t !== void 0;
3596
- u.current[T] = I ? t : ((w = r == null ? void 0 : r.current) == null ? void 0 : w.textContent) ?? E.textContent;
3597
- }
3598
- }, [T, l, u, t, r]);
3599
- return H(() => {
3600
- if (s != null)
3601
- return;
3602
- const E = m.current;
3603
- if (E)
3604
- return i(E, n), () => {
3605
- c(E);
3606
- };
3607
- }, [s, i, c, n]), H(() => {
3608
- if (s == null)
3609
- return a((E) => {
3610
- var I;
3611
- const w = m.current ? (I = E.get(m.current)) == null ? void 0 : I.index : null;
3612
- w != null && p(w);
3613
- });
3614
- }, [s, a, p]), {
3615
- ref: x,
3616
- index: T
3617
- };
3618
- }
3619
- function Fr(e = {}) {
3620
- const {
3621
- highlightItemOnHover: t,
3622
- highlightedIndex: n,
3623
- onHighlightedIndexChange: r
3624
- } = sn(), {
3625
- ref: o,
3626
- index: s
3627
- } = ln(e), i = n === s, c = d.useRef(null), a = Me(o, c);
3628
- return {
3629
- compositeProps: {
3630
- tabIndex: i ? 0 : -1,
3631
- onFocus() {
3632
- r(s);
3633
- },
3634
- onMouseMove() {
3635
- const u = c.current;
3636
- if (!t || !u)
3637
- return;
3638
- const g = u.hasAttribute("disabled") || u.ariaDisabled === "true";
3639
- !i && !g && u.focus();
3640
- }
3641
- },
3642
- compositeRef: a,
3643
- index: s
3644
- };
3645
- }
3646
- const ut = /* @__PURE__ */ d.createContext(void 0);
3647
- process.env.NODE_ENV !== "production" && (ut.displayName = "TabsListContext");
3648
- function Ur() {
3649
- const e = d.useContext(ut);
3650
- if (e === void 0)
3651
- throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>." : _e(65));
3652
- return e;
3653
- }
3654
- function $r(e) {
3655
- var n;
3656
- let t = e.activeElement;
3657
- for (; ((n = t == null ? void 0 : t.shadowRoot) == null ? void 0 : n.activeElement) != null; )
3658
- t = t.shadowRoot.activeElement;
3659
- return t;
3660
- }
3661
- function Wr(e, t) {
3662
- var r;
3663
- if (!e || !t)
3664
- return !1;
3665
- const n = (r = t.getRootNode) == null ? void 0 : r.call(t);
3666
- if (e.contains(t))
3667
- return !0;
3668
- if (n && Pr(n)) {
3669
- let o = t;
3670
- for (; o; ) {
3671
- if (e === o)
3672
- return !0;
3673
- o = o.parentNode || o.host;
3674
- }
3675
- }
3676
- return !1;
3677
- }
3678
- function Nt(e) {
3679
- return "composedPath" in e ? e.composedPath()[0] : e.target;
3680
- }
3681
- function je(e, t) {
3682
- return t < 0 || t >= e.length;
3683
- }
3684
- function jr(e, t) {
3685
- return he(e.current, {
3686
- disabledIndices: t
3687
- });
3688
- }
3689
- function Gr(e, t) {
3690
- return he(e.current, {
3691
- decrement: !0,
3692
- startingIndex: e.current.length,
3693
- disabledIndices: t
3694
- });
3695
- }
3696
- function he(e, {
3697
- startingIndex: t = -1,
3698
- decrement: n = !1,
3699
- disabledIndices: r,
3700
- amount: o = 1
3701
- } = {}) {
3702
- let s = t;
3703
- do
3704
- s += n ? -o : o;
3705
- while (s >= 0 && s <= e.length - 1 && Qe(e, s, r));
3706
- return s;
3707
- }
3708
- function Qe(e, t, n) {
3709
- if (typeof n == "function" ? n(t) : (n == null ? void 0 : n.includes(t)) ?? !1)
3710
- return !0;
3711
- const o = e[t];
3712
- return o ? Kr(o) ? !n && (o.hasAttribute("disabled") || o.getAttribute("aria-disabled") === "true") : !0 : !1;
3713
- }
3714
- function Hr(e) {
3715
- return e.visibility === "hidden" || e.visibility === "collapse";
3716
- }
3717
- function Kr(e, t = e ? Or(e) : null) {
3718
- return !e || !e.isConnected || !t || Hr(t) ? !1 : typeof e.checkVisibility == "function" ? e.checkVisibility() : t.display !== "none" && t.display !== "contents";
3719
- }
3720
- const cn = /* @__PURE__ */ d.forwardRef(function(t, n) {
3721
- const {
3722
- className: r,
3723
- disabled: o = !1,
3724
- render: s,
3725
- value: i,
3726
- id: c,
3727
- nativeButton: a = !0,
3728
- style: l,
3729
- ...u
3730
- } = t, {
3731
- value: g,
3732
- getTabPanelIdByValue: A,
3733
- orientation: T,
3734
- tabActivationDirection: p
3735
- } = it(), {
3736
- activateOnFocus: m,
3737
- highlightedTabIndex: x,
3738
- onTabActivation: E,
3739
- registerTabResizeObserverElement: w,
3740
- setHighlightedTabIndex: I,
3741
- tabsListElement: f
3742
- } = Ur(), N = on(c), z = d.useMemo(() => ({
3743
- disabled: o,
3744
- id: N,
3745
- value: i
3746
- }), [o, N, i]), {
3747
- compositeProps: D,
3748
- compositeRef: y,
3749
- index: O
3750
- // hook is used instead of the CompositeItem component
3751
- // because the index is needed for Tab internals
3752
- } = Fr({
3753
- metadata: z
3754
- }), b = i === g, R = d.useRef(!1), C = d.useRef(null);
3755
- H(() => {
3756
- const S = C.current;
3757
- if (S)
3758
- return w(S);
3759
- }, [w]), H(() => {
3760
- if (R.current) {
3761
- R.current = !1;
3762
- return;
3763
- }
3764
- if (!(b && O > -1 && x !== O))
3765
- return;
3766
- const S = f;
3767
- if (S != null) {
3768
- const B = $r(It(S));
3769
- if (B && Wr(S, B))
3770
- return;
3771
- }
3772
- o || I(O);
3773
- }, [b, O, x, I, o, f]);
3774
- const {
3775
- getButtonProps: F,
3776
- buttonRef: U
3777
- } = Dr({
3778
- disabled: o,
3779
- native: a,
3780
- focusableWhenDisabled: !0
3781
- }), Y = A(i), V = d.useRef(!1), q = d.useRef(!1);
3782
- function k(S) {
3783
- b || o || E(i, Je(wt, S.nativeEvent, void 0, {
3784
- activationDirection: "none"
3785
- }));
3786
- }
3787
- function _(S) {
3788
- b || (O > -1 && !o && I(O), !o && m && (!V.current || // keyboard or touch focus
3789
- V.current && q.current) && E(i, Je(wt, S.nativeEvent, void 0, {
3790
- activationDirection: "none"
3791
- })));
3792
- }
3793
- function ee(S) {
3794
- if (b || o)
3795
- return;
3796
- V.current = !0;
3797
- function B() {
3798
- V.current = !1, q.current = !1;
3799
- }
3800
- (!S.button || S.button === 0) && (q.current = !0, It(S.currentTarget).addEventListener("pointerup", B, {
3801
- once: !0
3802
- }));
3803
- }
3804
- return ze("button", t, {
3805
- state: {
3806
- disabled: o,
3807
- active: b,
3808
- orientation: T,
3809
- tabActivationDirection: p
3810
- },
3811
- ref: [n, U, y, C],
3812
- props: [D, {
3813
- role: "tab",
3814
- "aria-controls": Y,
3815
- "aria-selected": b,
3816
- id: N,
3817
- onClick: k,
3818
- onFocus: _,
3819
- onPointerDown: ee,
3820
- [an]: b ? "" : void 0,
3821
- onKeyDownCapture() {
3822
- R.current = !0;
3823
- }
3824
- }, u, F],
3825
- stateAttributesMapping: De
3826
- });
3827
- });
3828
- process.env.NODE_ENV !== "production" && (cn.displayName = "TabsTab");
3829
- function Yr(e) {
3830
- return qt(19) ? e : e ? "true" : void 0;
3831
- }
3832
- let xe = /* @__PURE__ */ (function(e) {
3833
- return e.startingStyle = "data-starting-style", e.endingStyle = "data-ending-style", e;
3834
- })({});
3835
- const qr = {
3836
- [xe.startingStyle]: ""
3837
- }, Xr = {
3838
- [xe.endingStyle]: ""
3839
- }, Zr = {
3840
- transitionStatus(e) {
3841
- return e === "starting" ? qr : e === "ending" ? Xr : null;
3842
- }
3843
- }, Jr = [];
3844
- function Qr(e) {
3845
- d.useEffect(e, Jr);
3846
- }
3847
- const Ie = null;
3848
- let St = globalThis.requestAnimationFrame;
3849
- class eo {
3850
- constructor() {
3851
- /* This implementation uses an array as a backing data-structure for frame callbacks.
3852
- * It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
3853
- * never calls the native `cancelAnimationFrame` if there are no frames left. This can
3854
- * be much more efficient if there is a call pattern that alterns as
3855
- * "request-cancel-request-cancel-…".
3856
- * But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
3857
- * frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
3858
- ne(this, "callbacks", []);
3859
- ne(this, "callbacksCount", 0);
3860
- ne(this, "nextId", 1);
3861
- ne(this, "startId", 1);
3862
- ne(this, "isScheduled", !1);
3863
- ne(this, "tick", (t) => {
3864
- var o;
3865
- this.isScheduled = !1;
3866
- const n = this.callbacks, r = this.callbacksCount;
3867
- if (this.callbacks = [], this.callbacksCount = 0, this.startId = this.nextId, r > 0)
3868
- for (let s = 0; s < n.length; s += 1)
3869
- (o = n[s]) == null || o.call(n, t);
3870
- });
3871
- }
3872
- request(t) {
3873
- const n = this.nextId;
3874
- this.nextId += 1, this.callbacks.push(t), this.callbacksCount += 1;
3875
- const r = process.env.NODE_ENV !== "production" && St !== requestAnimationFrame && (St = requestAnimationFrame, !0);
3876
- return (!this.isScheduled || r) && (requestAnimationFrame(this.tick), this.isScheduled = !0), n;
3877
- }
3878
- cancel(t) {
3879
- const n = t - this.startId;
3880
- n < 0 || n >= this.callbacks.length || (this.callbacks[n] = null, this.callbacksCount -= 1);
3881
- }
3882
- }
3883
- const Te = new eo();
3884
- class se {
3885
- constructor() {
3886
- ne(this, "currentId", Ie);
3887
- ne(this, "cancel", () => {
3888
- this.currentId !== Ie && (Te.cancel(this.currentId), this.currentId = Ie);
3889
- });
3890
- ne(this, "disposeEffect", () => this.cancel);
3891
- }
3892
- static create() {
3893
- return new se();
3894
- }
3895
- static request(t) {
3896
- return Te.request(t);
3897
- }
3898
- static cancel(t) {
3899
- return Te.cancel(t);
3900
- }
3901
- /**
3902
- * Executes `fn` after `delay`, clearing any previously scheduled call.
3903
- */
3904
- request(t) {
3905
- this.cancel(), this.currentId = Te.request(() => {
3906
- this.currentId = Ie, t();
3907
- });
3908
- }
3909
- }
3910
- function to() {
3911
- const e = fe(se.create).current;
3912
- return Qr(e.disposeEffect), e;
3913
- }
3914
- function no(e) {
3915
- return e == null ? e : "current" in e ? e.current : e;
3916
- }
3917
- function ro(e, t = !1, n = !0) {
3918
- const r = to();
3919
- return K((o, s = null) => {
3920
- r.cancel();
3921
- const i = no(e);
3922
- if (i == null)
3923
- return;
3924
- const c = i, a = () => {
3925
- yn.flushSync(o);
3926
- };
3927
- if (typeof c.getAnimations != "function" || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
3928
- o();
3929
- return;
3930
- }
3931
- function l() {
3932
- Promise.all(c.getAnimations().map((u) => u.finished)).then(() => {
3933
- s != null && s.aborted || a();
3934
- }).catch(() => {
3935
- if (n) {
3936
- s != null && s.aborted || a();
3937
- return;
151
+
152
+ /* Phones only — wrap instead of scroll */
153
+ @media (max-width: 480px) {
154
+ .ctabs-list {
155
+ padding: 0 4px;
156
+ gap: 0px;
157
+ overflow-x: visible; /* undo the 768px scroll behavior */
158
+ flex-wrap: wrap;
159
+ row-gap: 4px;
160
+ }
161
+ .ctabs-btn {
162
+ padding: 4px 10px;
163
+ font-size: 11.5px;
164
+ gap: 4px;
165
+ }
166
+ .ctabs-badge {
167
+ width: 16px;
168
+ height: 16px;
169
+ font-size: 10px;
170
+ }
3938
171
  }
3939
- const u = c.getAnimations();
3940
- !(s != null && s.aborted) && u.length > 0 && u.some((g) => g.pending || g.playState !== "finished") && l();
3941
- });
3942
- }
3943
- if (t) {
3944
- const u = xe.startingStyle;
3945
- if (!c.hasAttribute(u)) {
3946
- r.request(l);
3947
- return;
3948
- }
3949
- const g = new MutationObserver(() => {
3950
- c.hasAttribute(u) || (g.disconnect(), l());
3951
- });
3952
- g.observe(c, {
3953
- attributes: !0,
3954
- attributeFilter: [u]
3955
- }), s == null || s.addEventListener("abort", () => g.disconnect(), {
3956
- once: !0
3957
- });
3958
- return;
3959
- }
3960
- r.request(l);
3961
- });
3962
- }
3963
- function oo(e) {
3964
- const {
3965
- enabled: t = !0,
3966
- open: n,
3967
- ref: r,
3968
- onComplete: o
3969
- } = e, s = K(o), i = ro(r, n, !1);
3970
- d.useEffect(() => {
3971
- if (!t)
3972
- return;
3973
- const c = new AbortController();
3974
- return i(s, c.signal), () => {
3975
- c.abort();
3976
- };
3977
- }, [t, n, s, i]);
3978
- }
3979
- function so(e, t = !1, n = !1) {
3980
- const [r, o] = d.useState(e && t ? "idle" : void 0), [s, i] = d.useState(e);
3981
- return e && !s && (i(!0), o("starting")), !e && s && r !== "ending" && !n && o("ending"), !e && !s && r === "ending" && o(void 0), H(() => {
3982
- if (!e && s && r !== "ending" && n) {
3983
- const c = se.request(() => {
3984
- o("ending");
3985
- });
3986
- return () => {
3987
- se.cancel(c);
3988
- };
3989
- }
3990
- }, [e, s, r, n]), H(() => {
3991
- if (!e || t)
3992
- return;
3993
- const c = se.request(() => {
3994
- o(void 0);
3995
- });
3996
- return () => {
3997
- se.cancel(c);
3998
- };
3999
- }, [t, e]), H(() => {
4000
- if (!e || !t)
4001
- return;
4002
- e && s && r !== "idle" && o("starting");
4003
- const c = se.request(() => {
4004
- o("idle");
4005
- });
4006
- return () => {
4007
- se.cancel(c);
4008
- };
4009
- }, [t, e, s, r]), {
4010
- mounted: s,
4011
- setMounted: i,
4012
- transitionStatus: r
4013
- };
4014
- }
4015
- let io = (function(e) {
4016
- return e.index = "data-index", e.activationDirection = "data-activation-direction", e.orientation = "data-orientation", e.hidden = "data-hidden", e[e.startingStyle = xe.startingStyle] = "startingStyle", e[e.endingStyle = xe.endingStyle] = "endingStyle", e;
4017
- })({});
4018
- const ao = {
4019
- ...De,
4020
- ...Zr
4021
- }, un = /* @__PURE__ */ d.forwardRef(function(t, n) {
4022
- const {
4023
- className: r,
4024
- value: o,
4025
- render: s,
4026
- keepMounted: i = !1,
4027
- style: c,
4028
- ...a
4029
- } = t, {
4030
- value: l,
4031
- getTabIdByPanelValue: u,
4032
- orientation: g,
4033
- tabActivationDirection: A,
4034
- registerMountedTabPanel: T,
4035
- unregisterMountedTabPanel: p
4036
- } = it(), m = on(), x = d.useMemo(() => ({
4037
- id: m,
4038
- value: o
4039
- }), [m, o]), {
4040
- ref: E,
4041
- index: w
4042
- } = ln({
4043
- metadata: x
4044
- }), I = o === l, {
4045
- mounted: f,
4046
- transitionStatus: N,
4047
- setMounted: z
4048
- } = so(I), D = !f, y = u(o), O = {
4049
- hidden: D,
4050
- orientation: g,
4051
- tabActivationDirection: A,
4052
- transitionStatus: N
4053
- }, b = d.useRef(null), R = ze("div", t, {
4054
- state: O,
4055
- ref: [n, E, b],
4056
- props: [{
4057
- "aria-labelledby": y,
4058
- hidden: D,
4059
- id: m,
4060
- role: "tabpanel",
4061
- tabIndex: I ? 0 : -1,
4062
- inert: Yr(!I),
4063
- [io.index]: w
4064
- }, a],
4065
- stateAttributesMapping: ao
4066
- });
4067
- return oo({
4068
- open: I,
4069
- ref: b,
4070
- onComplete() {
4071
- I || z(!1);
4072
- }
4073
- }), H(() => {
4074
- if (!(D && !i) && m != null)
4075
- return T(o, m), () => {
4076
- p(o, m);
4077
- };
4078
- }, [D, i, o, m, T, p]), i || f ? R : null;
4079
- });
4080
- process.env.NODE_ENV !== "production" && (un.displayName = "TabsPanel");
4081
- function lo(e) {
4082
- return e == null || e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true";
4083
- }
4084
- const ve = "ArrowUp", ye = "ArrowDown", Oe = "ArrowLeft", Le = "ArrowRight", Ve = "Home", Be = "End", dn = /* @__PURE__ */ new Set([Oe, Le]), co = /* @__PURE__ */ new Set([Oe, Le, Ve, Be]), fn = /* @__PURE__ */ new Set([ve, ye]), uo = /* @__PURE__ */ new Set([ve, ye, Ve, Be]), pn = /* @__PURE__ */ new Set([...dn, ...fn]), fo = /* @__PURE__ */ new Set([...pn, Ve, Be]), po = "Shift", mo = "Control", go = "Alt", bo = "Meta", ho = /* @__PURE__ */ new Set([po, mo, go, bo]);
4085
- function vo(e) {
4086
- return lt(e) && e.tagName === "INPUT";
4087
- }
4088
- function Mt(e) {
4089
- return !!(vo(e) && e.selectionStart != null || lt(e) && e.tagName === "TEXTAREA");
4090
- }
4091
- function At(e, t, n, r) {
4092
- if (!e || !t || !t.scrollTo)
4093
- return;
4094
- let o = e.scrollLeft, s = e.scrollTop;
4095
- const i = e.clientWidth < e.scrollWidth, c = e.clientHeight < e.scrollHeight;
4096
- if (i && r !== "vertical") {
4097
- const a = Pt(e, t, "left"), l = Ce(e), u = Ce(t);
4098
- n === "ltr" && (a + t.offsetWidth + u.scrollMarginRight > e.scrollLeft + e.clientWidth - l.scrollPaddingRight ? o = a + t.offsetWidth + u.scrollMarginRight - e.clientWidth + l.scrollPaddingRight : a - u.scrollMarginLeft < e.scrollLeft + l.scrollPaddingLeft && (o = a - u.scrollMarginLeft - l.scrollPaddingLeft)), n === "rtl" && (a - u.scrollMarginRight < e.scrollLeft + l.scrollPaddingLeft ? o = a - u.scrollMarginLeft - l.scrollPaddingLeft : a + t.offsetWidth + u.scrollMarginRight > e.scrollLeft + e.clientWidth - l.scrollPaddingRight && (o = a + t.offsetWidth + u.scrollMarginRight - e.clientWidth + l.scrollPaddingRight));
4099
- }
4100
- if (c && r !== "horizontal") {
4101
- const a = Pt(e, t, "top"), l = Ce(e), u = Ce(t);
4102
- a - u.scrollMarginTop < e.scrollTop + l.scrollPaddingTop ? s = a - u.scrollMarginTop - l.scrollPaddingTop : a + t.offsetHeight + u.scrollMarginBottom > e.scrollTop + e.clientHeight - l.scrollPaddingBottom && (s = a + t.offsetHeight + u.scrollMarginBottom - e.clientHeight + l.scrollPaddingBottom);
4103
- }
4104
- e.scrollTo({
4105
- left: o,
4106
- top: s,
4107
- behavior: "auto"
4108
- });
4109
- }
4110
- function Pt(e, t, n) {
4111
- const r = n === "left" ? "offsetLeft" : "offsetTop";
4112
- let o = 0;
4113
- for (; t.offsetParent && (o += t[r], t.offsetParent !== e); )
4114
- t = t.offsetParent;
4115
- return o;
4116
- }
4117
- function Ce(e) {
4118
- const t = getComputedStyle(e);
4119
- return {
4120
- scrollMarginTop: parseFloat(t.scrollMarginTop) || 0,
4121
- scrollMarginRight: parseFloat(t.scrollMarginRight) || 0,
4122
- scrollMarginBottom: parseFloat(t.scrollMarginBottom) || 0,
4123
- scrollMarginLeft: parseFloat(t.scrollMarginLeft) || 0,
4124
- scrollPaddingTop: parseFloat(t.scrollPaddingTop) || 0,
4125
- scrollPaddingRight: parseFloat(t.scrollPaddingRight) || 0,
4126
- scrollPaddingBottom: parseFloat(t.scrollPaddingBottom) || 0,
4127
- scrollPaddingLeft: parseFloat(t.scrollPaddingLeft) || 0
4128
- };
4129
- }
4130
- const yo = [];
4131
- function xo(e) {
4132
- const {
4133
- loopFocus: t = !0,
4134
- orientation: n = "both",
4135
- grid: r,
4136
- onLoop: o,
4137
- direction: s,
4138
- highlightedIndex: i,
4139
- onHighlightedIndexChange: c,
4140
- rootRef: a,
4141
- enableHomeAndEndKeys: l = !1,
4142
- stopEventPropagation: u = !1,
4143
- disabledIndices: g,
4144
- modifierKeys: A = yo
4145
- } = e, [T, p] = d.useState(0), m = r != null, x = d.useRef(null), E = Me(x, a), w = d.useRef([]), I = d.useRef(!1), f = i ?? T, N = K((b, R = !1) => {
4146
- if ((c ?? p)(b), R) {
4147
- const C = w.current[b];
4148
- At(x.current, C, s, n);
4149
- }
4150
- }), z = K((b) => {
4151
- if (b.size === 0 || I.current)
4152
- return;
4153
- I.current = !0;
4154
- const R = Array.from(b.keys()), C = R.find((U) => U == null ? void 0 : U.hasAttribute(an)) ?? null, F = C ? R.indexOf(C) : -1;
4155
- if (F !== -1)
4156
- N(F);
4157
- else if (Qe(R, f, g)) {
4158
- const U = he(R, {
4159
- disabledIndices: g
4160
- });
4161
- je(R, U) || N(U);
4162
- }
4163
- At(x.current, C, s, n);
4164
- });
4165
- H(() => {
4166
- if (g == null || i != null || !I.current)
4167
- return;
4168
- const b = w.current;
4169
- if (Qe(b, f, g)) {
4170
- const R = he(b, {
4171
- disabledIndices: g
4172
- });
4173
- je(b, R) || N(R);
4174
- }
4175
- }, [g, i, f, w, N]);
4176
- const D = K((b, R, C) => o ? o(b, R, C, w) : C), y = K((b) => {
4177
- const R = l ? fo : pn;
4178
- if (!R.has(b.key) || wo(b, A) || !x.current)
4179
- return;
4180
- const F = s === "rtl", U = F ? Oe : Le, Y = {
4181
- horizontal: U,
4182
- vertical: ye,
4183
- both: U
4184
- }[n], V = F ? Le : Oe, q = {
4185
- horizontal: V,
4186
- vertical: ve,
4187
- both: V
4188
- }[n], k = Nt(b.nativeEvent);
4189
- if (k != null && Mt(k) && !lo(k)) {
4190
- const X = k.selectionStart, ae = k.selectionEnd, $ = k.value ?? "";
4191
- if (X == null || b.shiftKey || X !== ae || b.key !== q && X < $.length || b.key !== Y && X > 0)
4192
- return;
4193
- }
4194
- let _ = f;
4195
- const ee = jr(w, g), J = Gr(w, g);
4196
- r != null && (_ = r({
4197
- disabledIndices: g,
4198
- elementsRef: w,
4199
- event: b,
4200
- highlightedIndex: f,
4201
- loopFocus: t,
4202
- maxIndex: J,
4203
- minIndex: ee,
4204
- onLoop: D,
4205
- orientation: n,
4206
- rtl: F
4207
- }));
4208
- const te = {
4209
- horizontal: [U],
4210
- vertical: [ye],
4211
- both: [U, ye]
4212
- }[n], S = {
4213
- horizontal: [V],
4214
- vertical: [ve],
4215
- both: [V, ve]
4216
- }[n], B = m ? R : {
4217
- horizontal: l ? co : dn,
4218
- vertical: l ? uo : fn,
4219
- both: R
4220
- }[n];
4221
- l && (b.key === Ve ? _ = ee : b.key === Be && (_ = J)), _ === f && (te.includes(b.key) || S.includes(b.key)) && (t && _ === J && te.includes(b.key) ? (_ = ee, o && (_ = o(b, f, _, w))) : t && _ === ee && S.includes(b.key) ? (_ = J, o && (_ = o(b, f, _, w))) : _ = he(w.current, {
4222
- startingIndex: _,
4223
- decrement: S.includes(b.key),
4224
- disabledIndices: g
4225
- })), _ !== f && !je(w.current, _) && (u && b.stopPropagation(), B.has(b.key) && b.preventDefault(), N(_, !0), queueMicrotask(() => {
4226
- var X;
4227
- (X = w.current[_]) == null || X.focus();
4228
- }));
4229
- });
4230
- return {
4231
- props: {
4232
- ref: E,
4233
- onFocus(b) {
4234
- const R = x.current, C = Nt(b.nativeEvent);
4235
- !R || C == null || !Mt(C) || C.setSelectionRange(0, C.value.length ?? 0);
4236
- },
4237
- onKeyDown: y
4238
- },
4239
- highlightedIndex: f,
4240
- onHighlightedIndexChange: N,
4241
- elementsRef: w,
4242
- disabledIndices: g,
4243
- onMapChange: z,
4244
- relayKeyboardEvent: y
4245
- };
4246
- }
4247
- function wo(e, t) {
4248
- for (const n of ho.values())
4249
- if (!t.includes(n) && e.getModifierState(n))
4250
- return !0;
4251
- return !1;
4252
- }
4253
- const mn = /* @__PURE__ */ d.createContext(void 0);
4254
- process.env.NODE_ENV !== "production" && (mn.displayName = "DirectionContext");
4255
- function ko() {
4256
- const e = d.useContext(mn);
4257
- return (e == null ? void 0 : e.direction) ?? "ltr";
4258
- }
4259
- function Eo(e) {
4260
- const {
4261
- render: t,
4262
- className: n,
4263
- style: r,
4264
- refs: o = Ze,
4265
- props: s = Ze,
4266
- state: i = ue,
4267
- stateAttributesMapping: c,
4268
- highlightedIndex: a,
4269
- onHighlightedIndexChange: l,
4270
- orientation: u,
4271
- grid: g,
4272
- loopFocus: A,
4273
- onLoop: T,
4274
- enableHomeAndEndKeys: p,
4275
- onMapChange: m,
4276
- stopEventPropagation: x = !0,
4277
- rootRef: E,
4278
- disabledIndices: w,
4279
- modifierKeys: I,
4280
- highlightItemOnHover: f = !1,
4281
- tag: N = "div",
4282
- ...z
4283
- } = e, D = ko(), {
4284
- props: y,
4285
- highlightedIndex: O,
4286
- onHighlightedIndexChange: b,
4287
- elementsRef: R,
4288
- onMapChange: C,
4289
- relayKeyboardEvent: F
4290
- } = xo({
4291
- grid: g,
4292
- loopFocus: A,
4293
- onLoop: T,
4294
- orientation: u,
4295
- highlightedIndex: a,
4296
- onHighlightedIndexChange: l,
4297
- rootRef: E,
4298
- stopEventPropagation: x,
4299
- enableHomeAndEndKeys: p,
4300
- direction: D,
4301
- disabledIndices: w,
4302
- modifierKeys: I
4303
- }), U = ze(N, e, {
4304
- state: i,
4305
- ref: o,
4306
- props: [y, ...s, z],
4307
- stateAttributesMapping: c
4308
- }), Y = d.useMemo(() => ({
4309
- highlightedIndex: O,
4310
- onHighlightedIndexChange: b,
4311
- highlightItemOnHover: f,
4312
- relayKeyboardEvent: F
4313
- }), [O, b, f, F]);
4314
- return /* @__PURE__ */ G(ct.Provider, {
4315
- value: Y,
4316
- children: /* @__PURE__ */ G(tn, {
4317
- elementsRef: R,
4318
- onMapChange: (V) => {
4319
- m == null || m(V), C(V);
4320
- },
4321
- children: U
4322
- })
4323
- });
4324
- }
4325
- const gn = /* @__PURE__ */ d.forwardRef(function(t, n) {
4326
- const {
4327
- activateOnFocus: r = !1,
4328
- className: o,
4329
- loopFocus: s = !0,
4330
- render: i,
4331
- style: c,
4332
- ...a
4333
- } = t, {
4334
- onValueChange: l,
4335
- orientation: u,
4336
- value: g,
4337
- setTabMap: A,
4338
- tabActivationDirection: T
4339
- } = it(), [p, m] = d.useState(0), [x, E] = d.useState(null), w = d.useRef(/* @__PURE__ */ new Set()), I = d.useRef(/* @__PURE__ */ new Set()), f = d.useRef(null);
4340
- H(() => {
4341
- if (typeof ResizeObserver > "u")
4342
- return;
4343
- const R = new ResizeObserver(() => {
4344
- w.current.forEach((C) => {
4345
- C();
4346
- });
4347
- });
4348
- return f.current = R, x && R.observe(x), I.current.forEach((C) => {
4349
- R.observe(C);
4350
- }), () => {
4351
- R.disconnect(), f.current = null;
4352
- };
4353
- }, [x]);
4354
- const N = K((R) => (w.current.add(R), () => {
4355
- w.current.delete(R);
4356
- })), z = K((R) => {
4357
- var C;
4358
- return I.current.add(R), (C = f.current) == null || C.observe(R), () => {
4359
- var F;
4360
- I.current.delete(R), (F = f.current) == null || F.unobserve(R);
4361
- };
4362
- }), D = K((R, C) => {
4363
- R !== g && l(R, C);
4364
- }), y = {
4365
- orientation: u,
4366
- tabActivationDirection: T
4367
- }, O = {
4368
- "aria-orientation": u === "vertical" ? "vertical" : void 0,
4369
- role: "tablist"
4370
- }, b = d.useMemo(() => ({
4371
- activateOnFocus: r,
4372
- highlightedTabIndex: p,
4373
- registerIndicatorUpdateListener: N,
4374
- registerTabResizeObserverElement: z,
4375
- onTabActivation: D,
4376
- setHighlightedTabIndex: m,
4377
- tabsListElement: x
4378
- }), [r, p, N, z, D, m, x]);
4379
- return /* @__PURE__ */ G(ut.Provider, {
4380
- value: b,
4381
- children: /* @__PURE__ */ G(Eo, {
4382
- render: i,
4383
- className: o,
4384
- style: c,
4385
- state: y,
4386
- refs: [n, E],
4387
- props: [O, a],
4388
- stateAttributesMapping: De,
4389
- highlightedIndex: p,
4390
- enableHomeAndEndKeys: !0,
4391
- loopFocus: s,
4392
- orientation: u,
4393
- onHighlightedIndexChange: m,
4394
- onMapChange: A,
4395
- disabledIndices: Ze
4396
- })
4397
- });
4398
- });
4399
- process.env.NODE_ENV !== "production" && (gn.displayName = "TabsList");
4400
- const Ot = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, Lt = zt, Ro = (e, t) => (n) => {
4401
- var r;
4402
- if ((t == null ? void 0 : t.variants) == null) return Lt(e, n == null ? void 0 : n.class, n == null ? void 0 : n.className);
4403
- const { variants: o, defaultVariants: s } = t, i = Object.keys(o).map((l) => {
4404
- const u = n == null ? void 0 : n[l], g = s == null ? void 0 : s[l];
4405
- if (u === null) return null;
4406
- const A = Ot(u) || Ot(g);
4407
- return o[l][A];
4408
- }), c = n && Object.entries(n).reduce((l, u) => {
4409
- let [g, A] = u;
4410
- return A === void 0 || (l[g] = A), l;
4411
- }, {}), a = t == null || (r = t.compoundVariants) === null || r === void 0 ? void 0 : r.reduce((l, u) => {
4412
- let { class: g, className: A, ...T } = u;
4413
- return Object.entries(T).every((p) => {
4414
- let [m, x] = p;
4415
- return Array.isArray(x) ? x.includes({
4416
- ...s,
4417
- ...c
4418
- }[m]) : {
4419
- ...s,
4420
- ...c
4421
- }[m] === x;
4422
- }) ? [
4423
- ...l,
4424
- g,
4425
- A
4426
- ] : l;
4427
- }, []);
4428
- return Lt(e, i, a, n == null ? void 0 : n.class, n == null ? void 0 : n.className);
4429
- };
4430
- function Io({
4431
- className: e,
4432
- orientation: t = "horizontal",
4433
- ...n
4434
- }) {
4435
- return /* @__PURE__ */ G(
4436
- nn,
4437
- {
4438
- orientation: t,
4439
- "data-slot": "tabs",
4440
- className: Z(
4441
- "group/tabs flex h-full min-h-0 flex-col gap-2",
4442
- e
4443
- ),
4444
- ...n
4445
- }
4446
- );
4447
- }
4448
- const To = Ro(
4449
- "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
4450
- {
4451
- variants: {
4452
- variant: {
4453
- default: "bg-muted",
4454
- line: "gap-1 bg-transparent"
4455
- }
4456
- },
4457
- defaultVariants: {
4458
- variant: "default"
4459
- }
4460
- }
4461
- );
4462
- function Co({
4463
- className: e,
4464
- variant: t = "default",
4465
- ...n
4466
- }) {
4467
- return /* @__PURE__ */ G(
4468
- gn,
4469
- {
4470
- "data-slot": "tabs-list",
4471
- "data-variant": t,
4472
- className: Z(To({ variant: t }), e),
4473
- ...n
4474
- }
4475
- );
4476
- }
4477
- function No({ className: e, style: t, activeStyle: n, ...r }) {
4478
- return /* @__PURE__ */ G(
4479
- cn,
4480
- {
4481
- "data-slot": "tabs-trigger",
4482
- className: Z(
4483
- "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all bg-transparent group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
4484
- "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
4485
- "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
4486
- "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
4487
- e
4488
- ),
4489
- style: n ?? t,
4490
- ...r
4491
- }
4492
- );
4493
- }
4494
- function So({ className: e, ...t }) {
4495
- return /* @__PURE__ */ G(
4496
- un,
4497
- {
4498
- "data-slot": "tabs-content",
4499
- className: Z("flex-1 text-sm outline-none", e),
4500
- ...t
4501
- }
4502
- );
4503
- }
4504
- const Oo = ({
4505
- tabs: e,
4506
- defaultValue: t,
4507
- value: n,
4508
- onValueChange: r,
4509
- className: o,
4510
- showTabNumbers: s = !0,
4511
- variant: i = "default"
4512
- }) => {
4513
- var m;
4514
- const c = n || t || ((m = e[0]) == null ? void 0 : m.id), [a, l] = vn.useState(c), u = n ?? a, g = (x) => {
4515
- n || l(x), r == null || r(x);
4516
- }, A = {
4517
- default: Z(
4518
- "group relative px-6 py-3 text-sm font-medium transition-all duration-300 ease-out",
4519
- "text-muted-foreground hover:text-foreground",
4520
- "data-[state=active]:text-foreground data-[state=active]:font-semibold",
4521
- "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-gradient-to-r after:from-blue-500 after:via-purple-500 after:to-pink-500",
4522
- "after:scale-x-0 after:transition-transform after:duration-300 data-[state=active]:after:scale-x-100",
4523
- "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-muted-foreground",
4524
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
4525
- ),
4526
- gradient: Z(
4527
- "group relative px-6 py-3 text-sm font-medium transition-all duration-300 ease-out",
4528
- "text-muted-foreground/80 hover:text-muted-foreground",
4529
- "data-[state=active]:text-white data-[state=active]:font-semibold",
4530
- "data-[state=active]:bg-gradient-to-r data-[state=active]:from-blue-600 data-[state=active]:via-purple-600 data-[state=active]:to-pink-600",
4531
- "data-[state=active]:shadow-lg data-[state=active]:shadow-purple-500/30",
4532
- "rounded-lg mx-1 data-[state=active]:rounded-lg",
4533
- "disabled:opacity-50 disabled:cursor-not-allowed",
4534
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
4535
- ),
4536
- minimal: Z(
4537
- "group relative px-4 py-2 text-sm font-medium transition-all duration-300",
4538
- "text-muted-foreground hover:text-foreground hover:bg-secondary/50 rounded-md",
4539
- "data-[state=active]:text-foreground data-[state=active]:bg-secondary",
4540
- "data-[state=active]:font-semibold",
4541
- "disabled:opacity-50 disabled:cursor-not-allowed",
4542
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
4543
- ),
4544
- // Matches the Figma reference: bordered number chip, green accent on active,
4545
- // slim underline beneath only the active tab.
4546
- outline: Z(
4547
- "group relative px-4 py-3 text-sm font-semibold transition-colors duration-200 ease-out",
4548
- "text-foreground/70 hover:text-foreground",
4549
- "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-foreground/70",
4550
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500"
4551
- )
4552
- }, T = {
4553
- default: Z(
4554
- "bg-blue-100/60 text-blue-600",
4555
- "group-data-[state=active]:bg-blue-500 group-data-[state=active]:text-white"
4556
- ),
4557
- gradient: Z(
4558
- "text-white/60",
4559
- "group-data-[state=active]:bg-white/20 group-data-[state=active]:text-white"
4560
- ),
4561
- minimal: "bg-secondary/60 text-secondary-foreground",
4562
- outline: Z(
4563
- "border border-border text-muted-foreground bg-transparent rounded-[6px]",
4564
- "group-data-[state=active]:border-[#059669] group-data-[state=active]:text-[#059669]"
4565
- )
4566
- }, p = {
4567
- borderTopWidth: 3,
4568
- borderRightWidth: 1,
4569
- borderBottomWidth: 0,
4570
- borderLeftWidth: 1,
4571
- borderStyle: "solid",
4572
- borderColor: "#059669",
4573
- color: "#059669",
4574
- fontWeight: 700
4575
- };
4576
- return /* @__PURE__ */ ft(
4577
- Io,
4578
- {
4579
- value: u,
4580
- onValueChange: g,
4581
- defaultValue: t,
4582
- className: Z("w-full h-full min-h-0 flex flex-col", o),
4583
- children: [
4584
- /* @__PURE__ */ G(
4585
- Co,
172
+ ` }),
173
+ /* @__PURE__ */ e(
174
+ "div",
4586
175
  {
4587
- className: Z(
4588
- "inline-flex gap-1 rounded-none bg-transparent h-auto p-0 w-full border-b shrink-0",
4589
- i === "default" && "border-b border-border",
4590
- i === "gradient" && "border-b border-border/30 gap-2 bg-background/50 px-2 py-2 rounded-lg",
4591
- i === "minimal" && "border-b border-border/50 gap-0",
4592
- i === "outline" && "border-b border-border/50 gap-0 justify-start"
4593
- ),
4594
- children: e.map((x, E) => /* @__PURE__ */ G(
4595
- No,
4596
- {
4597
- value: x.id,
4598
- disabled: x.disabled,
4599
- className: Z(
4600
- A[i],
4601
- i === "outline" && "flex-none"
4602
- ),
4603
- activeStyle: i === "outline" && u === x.id ? p : void 0,
4604
- children: /* @__PURE__ */ ft("div", { className: "flex items-center gap-2", children: [
4605
- s && /* @__PURE__ */ G(
4606
- "div",
4607
- {
4608
- className: Z(
4609
- "inline-flex items-center justify-center w-6 h-6 text-xs font-medium leading-1.5 transition-all duration-200",
4610
- i !== "outline" && "rounded-full",
4611
- T[i]
4612
- ),
4613
- children: E + 1
4614
- }
4615
- ),
4616
- x.icon && /* @__PURE__ */ G("span", { className: "inline-flex", children: x.icon }),
4617
- /* @__PURE__ */ G("div", { children: x.label })
4618
- ] })
4619
- },
4620
- x.id
4621
- ))
176
+ style: v,
177
+ className: `ctabs-list ${x}`,
178
+ children: o.map((t, D) => {
179
+ const s = n === t.id;
180
+ return /* @__PURE__ */ p(
181
+ "button",
182
+ {
183
+ role: "tab",
184
+ "aria-selected": s,
185
+ disabled: t.disabled,
186
+ onClick: () => !t.disabled && F(t.id),
187
+ style: {
188
+ ...T,
189
+ ...s ? k : R,
190
+ opacity: t.disabled ? 0.5 : 1,
191
+ cursor: t.disabled ? "not-allowed" : "pointer"
192
+ },
193
+ className: `ctabs-btn ${h}`,
194
+ children: [
195
+ f && /* @__PURE__ */ e(
196
+ "span",
197
+ {
198
+ className: "ctabs-badge",
199
+ style: s ? S : z,
200
+ children: D + 1
201
+ }
202
+ ),
203
+ t.icon,
204
+ /* @__PURE__ */ e("span", { className: "ctabs-label", children: t.label })
205
+ ]
206
+ },
207
+ t.id
208
+ );
209
+ })
4622
210
  }
4623
211
  ),
4624
- /* @__PURE__ */ G("div", { className: "relative flex-1 min-h-0 overflow-hidden", children: e.map((x) => /* @__PURE__ */ G(
4625
- So,
4626
- {
4627
- value: x.id,
4628
- className: Z(
4629
- "mt-0 h-full min-h-0 overflow-y-auto animate-in fade-in-50 duration-300 data-[state=inactive]:hidden"
4630
- ),
4631
- children: x.content
4632
- },
4633
- x.id
4634
- )) })
212
+ m && d && /* @__PURE__ */ e("div", { style: B, className: g, children: d.content })
4635
213
  ]
4636
214
  }
4637
215
  );
4638
216
  };
4639
217
  export {
4640
- Oo as CustomTabs,
4641
- Z as cn
218
+ E as CustomTabs
4642
219
  };