aravint-ui-navigation 1.0.19 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Readme.md +71 -218
- package/dist/navigation.cjs.js +75 -4
- package/dist/navigation.css +1 -1
- package/dist/navigation.es.js +200 -4625
- package/dist/types/components/CustomTabs.d.ts +4 -0
- package/dist/types/index.d.ts +2 -3
- package/dist/types/{components/Tabs/custom-tabs.d.ts → types/tabs.d.ts} +6 -4
- package/package.json +1 -3
- package/dist/types/components/ui/tabs.d.ts +0 -14
package/Readme.md
CHANGED
|
@@ -1,249 +1,102 @@
|
|
|
1
|
-
#
|
|
1
|
+
# CustomTabs
|
|
2
2
|
|
|
3
|
-
A reusable,
|
|
3
|
+
A reusable, dependency-free React + TypeScript tabs component with numbered badges, sticky tab bar, and mobile-responsive sizing — while preserving the original desktop/tablet look exactly.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
https://github.com/digitus-git/AFCI_OffAuto/tree/develop_rel_phase1/packages
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
## Features
|
|
10
6
|
|
|
11
|
-
|
|
7
|
+
- Controlled or uncontrolled usage (`value`/`onValueChange` or `defaultValue`)
|
|
8
|
+
- Numbered badges per tab (optional)
|
|
9
|
+
- Optional icons per tab
|
|
10
|
+
- Disabled tab support
|
|
11
|
+
- Sticky tab bar (`position: sticky; top: 0`)
|
|
12
|
+
- Active-tab underline-hiding trick (`marginBottom: -1`) to visually merge the active tab with its content panel
|
|
13
|
+
- Responsive breakpoints for tablet (`≤768px`) and phone (`≤480px`) that only affect sizing (padding, font-size, gap, badge size) — colors, borders, and desktop layout are untouched
|
|
14
|
+
- On phones, tabs wrap to a new row instead of overflowing or forcing horizontal scroll
|
|
12
15
|
|
|
13
16
|
## Installation
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
npm install @digitus-fci-oa/button
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
---
|
|
18
|
+
Copy `CustomTabs.tsx` into your project (e.g. `src/components/CustomTabs.tsx`). No extra dependencies — just React.
|
|
20
19
|
|
|
21
|
-
## Usage
|
|
20
|
+
## Basic Usage
|
|
22
21
|
|
|
23
22
|
```tsx
|
|
24
|
-
import {
|
|
25
|
-
import { Save, Trash2, X, Pencil } from 'lucide-react';
|
|
26
|
-
|
|
27
|
-
export function TestButton() {
|
|
28
|
-
return (
|
|
29
|
-
<div style={{ display: "flex", gap: "10px", padding: "20px" }}>
|
|
30
|
-
|
|
31
|
-
<Button variant="save" leftIcon={<Save size={14} />} loading={saveLoading}>
|
|
32
|
-
Save
|
|
33
|
-
</Button>
|
|
34
|
-
|
|
35
|
-
<Button variant="update" rightIcon={<Save size={14} />}>
|
|
36
|
-
Update
|
|
37
|
-
</Button>
|
|
38
|
-
|
|
39
|
-
<Button variant="delete" leftIcon={<Trash2 size={14} />}>
|
|
40
|
-
Delete
|
|
41
|
-
</Button>
|
|
42
|
-
|
|
43
|
-
<Button variant="cancel" leftIcon={<X size={14} />}>
|
|
44
|
-
Cancel
|
|
45
|
-
</Button>
|
|
46
|
-
|
|
47
|
-
{/* Icon-only button with tooltip */}
|
|
48
|
-
<Button
|
|
49
|
-
variant="update"
|
|
50
|
-
size="icon"
|
|
51
|
-
iconButton
|
|
52
|
-
tooltipLabel="Edit record"
|
|
53
|
-
>
|
|
54
|
-
<Pencil size={16} />
|
|
55
|
-
</Button>
|
|
23
|
+
import CustomTabs, { TabItem } from "@digitus-fci-oa/navigation";
|
|
56
24
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
const [open, setOpen] = useState(false);
|
|
25
|
+
const tabs: TabItem[] = [
|
|
26
|
+
{ id: "overview", label: "Overview", content: <OverviewPanel /> },
|
|
27
|
+
{ id: "details", label: "Details", content: <DetailsPanel /> },
|
|
28
|
+
{ id: "history", label: "History", content: <HistoryPanel />, disabled: true },
|
|
29
|
+
];
|
|
63
30
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
) => {
|
|
67
|
-
console.log(type);
|
|
68
|
-
};
|
|
31
|
+
function App() {
|
|
32
|
+
const [activeTab, setActiveTab] = useState("overview");
|
|
69
33
|
|
|
70
34
|
return (
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
text-xs
|
|
84
|
-
font-medium
|
|
85
|
-
"
|
|
86
|
-
buttonIcon={
|
|
87
|
-
<>
|
|
88
|
-
<Download className="w-4 h-4 text-white" />
|
|
89
|
-
<span className="text-white">Export</span>
|
|
90
|
-
</>
|
|
91
|
-
}
|
|
92
|
-
items={{
|
|
93
|
-
xlsx: {
|
|
94
|
-
label: "XLSX",
|
|
95
|
-
icon: <FileSpreadsheet />,
|
|
96
|
-
iconClassName: "text-green-600",
|
|
97
|
-
textClassName: "text-green-600",
|
|
98
|
-
iconWidth: "w-5",
|
|
99
|
-
iconHeight: "h-5",
|
|
100
|
-
},
|
|
101
|
-
|
|
102
|
-
csv: {
|
|
103
|
-
label: "CSV",
|
|
104
|
-
icon: <FileText />,
|
|
105
|
-
iconClassName: "text-blue-600",
|
|
106
|
-
textClassName: "text-blue-600",
|
|
107
|
-
iconWidth: "w-5",
|
|
108
|
-
iconHeight: "h-5",
|
|
109
|
-
},
|
|
110
|
-
|
|
111
|
-
pdf: {
|
|
112
|
-
label: "PDF",
|
|
113
|
-
icon: <FileText />,
|
|
114
|
-
iconClassName: "text-red-600",
|
|
115
|
-
textClassName: "text-red-600",
|
|
116
|
-
iconWidth: "w-5",
|
|
117
|
-
iconHeight: "h-5",
|
|
118
|
-
},
|
|
119
|
-
}}
|
|
120
|
-
/>
|
|
35
|
+
<div className="h-screen bg-gray-50 flex flex-col">
|
|
36
|
+
<div className="flex-1 min-h-0">
|
|
37
|
+
<CustomTabs
|
|
38
|
+
tabs={tabs}
|
|
39
|
+
value={activeTab}
|
|
40
|
+
onValueChange={setActiveTab}
|
|
41
|
+
showTabNumbers
|
|
42
|
+
className="h-full"
|
|
43
|
+
tabListClassName="bg-white"
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
121
47
|
);
|
|
122
48
|
}
|
|
123
49
|
```
|
|
124
50
|
|
|
125
|
-
---
|
|
126
|
-
---
|
|
127
|
-
|
|
128
51
|
## Props
|
|
129
52
|
|
|
130
|
-
| Prop
|
|
131
|
-
|
|
132
|
-
| `
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `style` | `CSSProperties` | `undefined` | Inline styles (merged on top of variant styles) |
|
|
144
|
-
|
|
145
|
-
| `open` | `boolean` | |Controls dropdown visibility |
|
|
146
|
-
| `setOpen` | `Dispatch<SetStateAction<boolean>>` | Updates dropdown state |
|
|
147
|
-
| `onExport` | `(type) => void` | Export callback |
|
|
148
|
-
| `buttonLabel` | `string` | | Button label |
|
|
149
|
-
| `buttonIcon` | `ReactNode` | | Optional button icon |
|
|
150
|
-
| `items` | `Record` | | Export menu items |
|
|
151
|
-
| `className` | `string` | | Additional classes |
|
|
152
|
-
|
|
153
|
-
---
|
|
154
|
-
|
|
155
|
-
## Variants
|
|
156
|
-
|
|
157
|
-
| Variant | Color | Description |
|
|
158
|
-
|-----------|------------------|----------------------------------|
|
|
159
|
-
| `default` | Blue (`#3B82F6`) | General-purpose action |
|
|
160
|
-
| `save` | Navy (`#003B71`) | Primary save / create action |
|
|
161
|
-
| `update` | Navy (`#003B71`) | Edit / update action |
|
|
162
|
-
| `delete` | Red (`#FF6070`) | Destructive / remove action |
|
|
163
|
-
| `cancel` | White / bordered | Dismiss / abort action |
|
|
164
|
-
|
|
165
|
-
---
|
|
166
|
-
|
|
167
|
-
## Sizes
|
|
168
|
-
|
|
169
|
-
| Size | Height | Description |
|
|
170
|
-
|-----------|--------|------------------------------------|
|
|
171
|
-
| `default` | 40px | Standard button |
|
|
172
|
-
| `sm` | 36px | Compact button |
|
|
173
|
-
| `lg` | 44px | Large button |
|
|
174
|
-
| `icon` | 40×40px| Square icon-only button |
|
|
175
|
-
| `xs` | 20px | Extra-small button (e.g. in tables)|
|
|
176
|
-
|
|
177
|
-
---
|
|
178
|
-
|
|
179
|
-
## Icon Support
|
|
180
|
-
|
|
181
|
-
Icons can be placed on the **left** or **right** side of the button label using `leftIcon` and `rightIcon` props. Works with any icon library (e.g. [lucide-react](https://lucide.dev/)).
|
|
53
|
+
| Prop | Type | Default | Description |
|
|
54
|
+
|---|---|---|---|
|
|
55
|
+
| `tabs` | `TabItem[]` | — | **Required.** Array of tab definitions. |
|
|
56
|
+
| `defaultValue` | `string` | first tab's `id` | Initial active tab (uncontrolled mode). |
|
|
57
|
+
| `value` | `string` | — | Active tab id (controlled mode). Providing this switches the component to controlled. |
|
|
58
|
+
| `onValueChange` | `(value: string) => void` | — | Called when the user selects a tab. |
|
|
59
|
+
| `className` | `string` | `""` | Class on the outer wrapper. |
|
|
60
|
+
| `tabListClassName` | `string` | `""` | Class on the tab bar container. |
|
|
61
|
+
| `tabButtonClassName` | `string` | `""` | Class on each tab button. |
|
|
62
|
+
| `contentClassName` | `string` | `""` | Class on the content panel. |
|
|
63
|
+
| `showTabNumbers` | `boolean` | `true` | Show/hide the numbered badge on each tab. |
|
|
64
|
+
| `showContent` | `boolean` | `true` | Show/hide the content panel entirely (render tab bar only). |
|
|
65
|
+
| `animated` | `boolean` | `true` | Enables the opacity transition on the content panel. |
|
|
182
66
|
|
|
183
|
-
|
|
184
|
-
import { Pencil } from 'lucide-react';
|
|
185
|
-
|
|
186
|
-
<Button variant="update" leftIcon={<Pencil size={14} />}>
|
|
187
|
-
Edit
|
|
188
|
-
</Button>
|
|
189
|
-
```
|
|
67
|
+
### `TabItem`
|
|
190
68
|
|
|
191
|
-
|
|
69
|
+
| Field | Type | Description |
|
|
70
|
+
|---|---|---|
|
|
71
|
+
| `id` | `string` | **Required.** Unique tab identifier. |
|
|
72
|
+
| `label` | `string` | **Required.** Tab display text. |
|
|
73
|
+
| `content` | `React.ReactNode` | Content rendered when this tab is active. |
|
|
74
|
+
| `disabled` | `boolean` | Disables selection of this tab. |
|
|
75
|
+
| `icon` | `React.ReactNode` | Optional icon rendered before the label. |
|
|
192
76
|
|
|
193
|
-
##
|
|
77
|
+
## Controlled vs Uncontrolled
|
|
194
78
|
|
|
195
|
-
|
|
79
|
+
- **Uncontrolled:** omit `value`. The component manages its own active tab internally, seeded by `defaultValue` (or the first tab).
|
|
80
|
+
- **Controlled:** pass `value` + `onValueChange`. You own the active-tab state; the component only reports selection events.
|
|
196
81
|
|
|
197
|
-
|
|
198
|
-
const [saving, setSaving] = useState(false);
|
|
199
|
-
|
|
200
|
-
<Button
|
|
201
|
-
variant="save"
|
|
202
|
-
loading={saving}
|
|
203
|
-
onClick={() => setSaving(true)}
|
|
204
|
-
leftIcon={<Save size={14} />}
|
|
205
|
-
>
|
|
206
|
-
Save
|
|
207
|
-
</Button>
|
|
208
|
-
```
|
|
82
|
+
## Styling Approach
|
|
209
83
|
|
|
210
|
-
|
|
84
|
+
Colors, borders, radii, and the sticky/active-tab layout tricks are set as **inline styles** and are the same across all screen sizes — this is what keeps the desktop/tablet appearance unchanged.
|
|
211
85
|
|
|
212
|
-
-
|
|
213
|
-
- CSV
|
|
214
|
-
- PDF
|
|
215
|
-
---
|
|
216
|
-
## Features
|
|
86
|
+
Only size-related properties (`padding`, `font-size`, `gap`, badge `width`/`height`) live in an injected `<style>` block using CSS classes (`.ctabs-list`, `.ctabs-btn`, `.ctabs-badge`, `.ctabs-label`), because inline styles can't respond to `@media` queries. This block ships inside the component, so no external CSS file is required.
|
|
217
87
|
|
|
218
|
-
|
|
219
|
-
- TailwindCSS support
|
|
220
|
-
- Custom icons
|
|
221
|
-
- Controlled open state
|
|
222
|
-
- Lightweight and reusable
|
|
223
|
-
|
|
224
|
-
---
|
|
225
|
-
## Icon Button with Tooltip
|
|
226
|
-
|
|
227
|
-
Set `iconButton={true}` to wrap the button in a tooltip. Pass `tooltipLabel` to set the tooltip text. Pair with `size="icon"` for a square icon-only button.
|
|
228
|
-
|
|
229
|
-
```tsx
|
|
230
|
-
import { Trash2 } from 'lucide-react';
|
|
231
|
-
|
|
232
|
-
<Button
|
|
233
|
-
variant="delete"
|
|
234
|
-
size="icon"
|
|
235
|
-
iconButton
|
|
236
|
-
tooltipLabel="Delete record"
|
|
237
|
-
onClick={handleDelete}
|
|
238
|
-
>
|
|
239
|
-
<Trash2 size={16} />
|
|
240
|
-
</Button>
|
|
241
|
-
```
|
|
88
|
+
### Breakpoints
|
|
242
89
|
|
|
243
|
-
|
|
90
|
+
| Breakpoint | Behavior |
|
|
91
|
+
|---|---|
|
|
92
|
+
| Desktop (default) | Original sizing: `8px 20px` padding, `14px` font, `20px` badges. |
|
|
93
|
+
| Tablet (`≤768px`) | Slightly reduced padding/font/badge size. Tab bar scrolls horizontally if tabs overflow. |
|
|
94
|
+
| Phone (`≤480px`) | Further reduced padding/font/badge size. Tab bar **wraps** to a new row instead of scrolling, so every label stays fully visible. |
|
|
244
95
|
|
|
245
|
-
|
|
96
|
+
To customize breakpoint values, edit the `@media` blocks inside the component's `<style>` tag directly.
|
|
246
97
|
|
|
247
|
-
##
|
|
98
|
+
## Notes / Gotchas
|
|
248
99
|
|
|
249
|
-
|
|
100
|
+
- `marginBottom: -1` on the active tab intentionally overlaps the tab bar's bottom border so the active tab visually "merges" into its content panel. This depends on `alignItems: "flex-end"` on the tab list — don't remove that when customizing.
|
|
101
|
+
- The phone-only `flex-wrap: wrap` sets `overflow-x: visible` to explicitly undo the tablet breakpoint's `overflow-x: auto`, since media query rules don't reset each other automatically.
|
|
102
|
+
- If you have a large number of tabs, consider whether wrapping (phone behavior) or horizontal scroll suits your use case better, and adjust the `480px` block accordingly.
|
package/dist/navigation.cjs.js
CHANGED
|
@@ -1,4 +1,75 @@
|
|
|
1
|
-
"use strict";var bn=Object.defineProperty;var hn=(e,t,n)=>t in e?bn(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var ne=(e,t,n)=>hn(e,typeof t!="symbol"?t+"":t,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react/jsx-runtime"),Se=require("react"),vn=require("react-dom");function _t(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const d=_t(Se),xn=_t(vn);function Lt(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(n=Lt(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function zt(){for(var e,t,n=0,r="",o=arguments.length;n<o;n++)(e=arguments[n])&&(t=Lt(e))&&(r&&(r+=" "),r+=t);return r}const tt="-",yn=e=>{const t=kn(e),{conflictingClassGroups:n,conflictingClassGroupModifiers:r}=e;return{getClassGroupId:i=>{const c=i.split(tt);return c[0]===""&&c.length!==1&&c.shift(),Dt(c,t)||wn(i)},getConflictingClassGroupIds:(i,c)=>{const a=n[i]||[];return c&&r[i]?[...a,...r[i]]:a}}},Dt=(e,t)=>{var i;if(e.length===0)return t.classGroupId;const n=e[0],r=t.nextPart.get(n),o=r?Dt(e.slice(1),r):void 0;if(o)return o;if(t.validators.length===0)return;const s=e.join(tt);return(i=t.validators.find(({validator:c})=>c(s)))==null?void 0:i.classGroupId},pt=/^\[(.+)\]$/,wn=e=>{if(pt.test(e)){const t=pt.exec(e)[1],n=t==null?void 0:t.substring(0,t.indexOf(":"));if(n)return"arbitrary.."+n}},kn=e=>{const{theme:t,classGroups:n}=e,r={nextPart:new Map,validators:[]};for(const o in n)He(n[o],r,o,t);return r},He=(e,t,n,r)=>{e.forEach(o=>{if(typeof o=="string"){const s=o===""?t:mt(t,o);s.classGroupId=n;return}if(typeof o=="function"){if(En(o)){He(o(r),t,n,r);return}t.validators.push({validator:o,classGroupId:n});return}Object.entries(o).forEach(([s,i])=>{He(i,mt(t,s),n,r)})})},mt=(e,t)=>{let n=e;return t.split(tt).forEach(r=>{n.nextPart.has(r)||n.nextPart.set(r,{nextPart:new Map,validators:[]}),n=n.nextPart.get(r)}),n},En=e=>e.isThemeGetter,Rn=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,n=new Map,r=new Map;const o=(s,i)=>{n.set(s,i),t++,t>e&&(t=0,r=n,n=new Map)};return{get(s){let i=n.get(s);if(i!==void 0)return i;if((i=r.get(s))!==void 0)return o(s,i),i},set(s,i){n.has(s)?n.set(s,i):o(s,i)}}},Ke="!",Ye=":",In=Ye.length,Tn=e=>{const{prefix:t,experimentalParseClassName:n}=e;let r=o=>{const s=[];let i=0,c=0,a=0,l;for(let p=0;p<o.length;p++){let m=o[p];if(i===0&&c===0){if(m===Ye){s.push(o.slice(a,p)),a=p+In;continue}if(m==="/"){l=p;continue}}m==="["?i++:m==="]"?i--:m==="("?c++:m===")"&&c--}const u=s.length===0?o:o.substring(a),g=Cn(u),A=g!==u,T=l&&l>a?l-a:void 0;return{modifiers:s,hasImportantModifier:A,baseClassName:g,maybePostfixModifierPosition:T}};if(t){const o=t+Ye,s=r;r=i=>i.startsWith(o)?s(i.substring(o.length)):{isExternal:!0,modifiers:[],hasImportantModifier:!1,baseClassName:i,maybePostfixModifierPosition:void 0}}if(n){const o=r;r=s=>n({className:s,parseClassName:o})}return r},Cn=e=>e.endsWith(Ke)?e.substring(0,e.length-1):e.startsWith(Ke)?e.substring(1):e,Nn=e=>{const t=Object.fromEntries(e.orderSensitiveModifiers.map(r=>[r,!0]));return r=>{if(r.length<=1)return r;const o=[];let s=[];return r.forEach(i=>{i[0]==="["||t[i]?(o.push(...s.sort(),i),s=[]):s.push(i)}),o.push(...s.sort()),o}},Sn=e=>({cache:Rn(e.cacheSize),parseClassName:Tn(e),sortModifiers:Nn(e),...yn(e)}),Mn=/\s+/,An=(e,t)=>{const{parseClassName:n,getClassGroupId:r,getConflictingClassGroupIds:o,sortModifiers:s}=t,i=[],c=e.trim().split(Mn);let a="";for(let l=c.length-1;l>=0;l-=1){const u=c[l],{isExternal:g,modifiers:A,hasImportantModifier:T,baseClassName:p,maybePostfixModifierPosition:m}=n(u);if(g){a=u+(a.length>0?" "+a:a);continue}let y=!!m,E=r(y?p.substring(0,m):p);if(!E){if(!y){a=u+(a.length>0?" "+a:a);continue}if(E=r(p),!E){a=u+(a.length>0?" "+a:a);continue}y=!1}const w=s(A).join(":"),I=T?w+Ke:w,f=I+E;if(i.includes(f))continue;i.push(f);const N=o(E,y);for(let z=0;z<N.length;++z){const D=N[z];i.push(I+D)}a=u+(a.length>0?" "+a:a)}return a};function Pn(){let e=0,t,n,r="";for(;e<arguments.length;)(t=arguments[e++])&&(n=Vt(t))&&(r&&(r+=" "),r+=n);return r}const Vt=e=>{if(typeof e=="string")return e;let t,n="";for(let r=0;r<e.length;r++)e[r]&&(t=Vt(e[r]))&&(n&&(n+=" "),n+=t);return n};function On(e,...t){let n,r,o,s=i;function i(a){const l=t.reduce((u,g)=>g(u),e());return n=Sn(l),r=n.cache.get,o=n.cache.set,s=c,c(a)}function c(a){const l=r(a);if(l)return l;const u=An(a,n);return o(a,u),u}return function(){return s(Pn.apply(null,arguments))}}const G=e=>{const t=n=>n[e]||[];return t.isThemeGetter=!0,t},jt=/^\[(?:(\w[\w-]*):)?(.+)\]$/i,Bt=/^\((?:(\w[\w-]*):)?(.+)\)$/i,_n=/^\d+\/\d+$/,Ln=/^(\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)/,jn=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,de=e=>_n.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=>Ln.test(e),Bn=()=>!0,Fn=e=>zn.test(e)&&!Dn.test(e),Ft=()=>!1,Un=e=>Vn.test(e),$n=e=>jn.test(e),Wn=e=>!h(e)&&!v(e),Gn=e=>pe(e,Wt,Ft),h=e=>jt.test(e),ce=e=>pe(e,Gt,Fn),$e=e=>pe(e,Xn,M),gt=e=>pe(e,Ut,Ft),Hn=e=>pe(e,$t,$n),ke=e=>pe(e,Ht,Un),v=e=>Bt.test(e),be=e=>me(e,Gt),Kn=e=>me(e,Zn),bt=e=>me(e,Ut),Yn=e=>me(e,Wt),qn=e=>me(e,$t),Ee=e=>me(e,Ht,!0),pe=(e,t,n)=>{const r=jt.exec(e);return r?r[1]?t(r[1]):n(r[2]):!1},me=(e,t,n=!1)=>{const r=Bt.exec(e);return r?r[1]?t(r[1]):n:!1},Ut=e=>e==="position"||e==="percentage",$t=e=>e==="image"||e==="url",Wt=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=()=>{const e=G("color"),t=G("font"),n=G("text"),r=G("font-weight"),o=G("tracking"),s=G("leading"),i=G("breakpoint"),c=G("container"),a=G("spacing"),l=G("radius"),u=G("shadow"),g=G("inset-shadow"),A=G("text-shadow"),T=G("drop-shadow"),p=G("blur"),m=G("perspective"),y=G("aspect"),E=G("ease"),w=G("animate"),I=()=>["auto","avoid","all","avoid-page","page","left","right","column"],f=()=>["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom"],N=()=>[...f(),v,h],z=()=>["auto","hidden","clip","visible","scroll"],D=()=>["auto","contain","none"],x=()=>[v,h,a],O=()=>[de,"full","auto",...x()],b=()=>[ie,"none","subgrid",v,h],R=()=>["auto",{span:["full",ie,v,h]},ie,v,h],C=()=>[ie,"auto",v,h],B=()=>["auto","min","max","fr",v,h],F=()=>["start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe"],q=()=>["start","end","center","stretch","center-safe","end-safe"],V=()=>["auto",...x()],X=()=>[de,"auto","full","dvw","dvh","lvw","lvh","svw","svh","min","max","fit",...x()],k=()=>[e,v,h],L=()=>[...f(),bt,gt,{position:[v,h]}],ee=()=>["no-repeat",{repeat:["","x","y","space","round"]}],J=()=>["auto","cover","contain",Yn,Gn,{size:[v,h]}],te=()=>[Ue,be,ce],S=()=>["","none","full",l,v,h],j=()=>["",M,be,ce],Z=()=>["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"],U=()=>[M,Ue,bt,gt],we=()=>["","none",p,v,h],P=()=>["none",M,v,h],_=()=>["none",M,v,h],$=()=>[M,v,h],Q=()=>[de,"full",...x()];return{cacheSize:500,theme:{animate:["spin","ping","pulse","bounce"],aspect:["video"],blur:[re],breakpoint:[re],color:[Bn],container:[re],"drop-shadow":[re],ease:["in","out","in-out"],font:[Wn],"font-weight":["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"],"inset-shadow":[re],leading:["none","tight","snug","normal","relaxed","loose"],perspective:["dramatic","near","normal","midrange","distant","none"],radius:[re],shadow:[re],spacing:["px",M],text:[re],"text-shadow":[re],tracking:["tighter","tight","normal","wide","wider","widest"]},classGroups:{aspect:[{aspect:["auto","square",de,h,v,y]}],container:["container"],columns:[{columns:[M,h,v,c]}],"break-after":[{"break-after":I()}],"break-before":[{"break-before":I()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],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"],sr:["sr-only","not-sr-only"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:N()}],overflow:[{overflow:z()}],"overflow-x":[{"overflow-x":z()}],"overflow-y":[{"overflow-y":z()}],overscroll:[{overscroll:D()}],"overscroll-x":[{"overscroll-x":D()}],"overscroll-y":[{"overscroll-y":D()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:O()}],"inset-x":[{"inset-x":O()}],"inset-y":[{"inset-y":O()}],start:[{start:O()}],end:[{end:O()}],top:[{top:O()}],right:[{right:O()}],bottom:[{bottom:O()}],left:[{left:O()}],visibility:["visible","invisible","collapse"],z:[{z:[ie,"auto",v,h]}],basis:[{basis:[de,"full","auto",c,...x()]}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["nowrap","wrap","wrap-reverse"]}],flex:[{flex:[M,de,"auto","initial","none",h]}],grow:[{grow:["",M,v,h]}],shrink:[{shrink:["",M,v,h]}],order:[{order:[ie,"first","last","none",v,h]}],"grid-cols":[{"grid-cols":b()}],"col-start-end":[{col:R()}],"col-start":[{"col-start":C()}],"col-end":[{"col-end":C()}],"grid-rows":[{"grid-rows":b()}],"row-start-end":[{row:R()}],"row-start":[{"row-start":C()}],"row-end":[{"row-end":C()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":B()}],"auto-rows":[{"auto-rows":B()}],gap:[{gap:x()}],"gap-x":[{"gap-x":x()}],"gap-y":[{"gap-y":x()}],"justify-content":[{justify:[...F(),"normal"]}],"justify-items":[{"justify-items":[...q(),"normal"]}],"justify-self":[{"justify-self":["auto",...q()]}],"align-content":[{content:["normal",...F()]}],"align-items":[{items:[...q(),{baseline:["","last"]}]}],"align-self":[{self:["auto",...q(),{baseline:["","last"]}]}],"place-content":[{"place-content":F()}],"place-items":[{"place-items":[...q(),"baseline"]}],"place-self":[{"place-self":["auto",...q()]}],p:[{p:x()}],px:[{px:x()}],py:[{py:x()}],ps:[{ps:x()}],pe:[{pe:x()}],pt:[{pt:x()}],pr:[{pr:x()}],pb:[{pb:x()}],pl:[{pl:x()}],m:[{m:V()}],mx:[{mx:V()}],my:[{my:V()}],ms:[{ms:V()}],me:[{me:V()}],mt:[{mt:V()}],mr:[{mr:V()}],mb:[{mb:V()}],ml:[{ml:V()}],"space-x":[{"space-x":x()}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":x()}],"space-y-reverse":["space-y-reverse"],size:[{size:X()}],w:[{w:[c,"screen",...X()]}],"min-w":[{"min-w":[c,"screen","none",...X()]}],"max-w":[{"max-w":[c,"screen","none","prose",{screen:[i]},...X()]}],h:[{h:["screen",...X()]}],"min-h":[{"min-h":["screen","none",...X()]}],"max-h":[{"max-h":["screen",...X()]}],"font-size":[{text:["base",n,be,ce]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:[r,v,$e]}],"font-stretch":[{"font-stretch":["ultra-condensed","extra-condensed","condensed","semi-condensed","normal","semi-expanded","expanded","extra-expanded","ultra-expanded",Ue,h]}],"font-family":[{font:[Kn,h,t]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:[o,v,h]}],"line-clamp":[{"line-clamp":[M,"none",v,$e]}],leading:[{leading:[s,...x()]}],"list-image":[{"list-image":["none",v,h]}],"list-style-position":[{list:["inside","outside"]}],"list-style-type":[{list:["disc","decimal","none",v,h]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"placeholder-color":[{placeholder:k()}],"text-color":[{text:k()}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...Z(),"wavy"]}],"text-decoration-thickness":[{decoration:[M,"from-font","auto",v,ce]}],"text-decoration-color":[{decoration:k()}],"underline-offset":[{"underline-offset":[M,"auto",v,h]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:x()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",v,h]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],wrap:[{wrap:["break-word","anywhere","normal"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",v,h]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:L()}],"bg-repeat":[{bg:ee()}],"bg-size":[{bg:J()}],"bg-image":[{bg:["none",{linear:[{to:["t","tr","r","br","b","bl","l","tl"]},ie,v,h],radial:["",v,h],conic:[ie,v,h]},qn,Hn]}],"bg-color":[{bg:k()}],"gradient-from-pos":[{from:te()}],"gradient-via-pos":[{via:te()}],"gradient-to-pos":[{to:te()}],"gradient-from":[{from:k()}],"gradient-via":[{via:k()}],"gradient-to":[{to:k()}],rounded:[{rounded:S()}],"rounded-s":[{"rounded-s":S()}],"rounded-e":[{"rounded-e":S()}],"rounded-t":[{"rounded-t":S()}],"rounded-r":[{"rounded-r":S()}],"rounded-b":[{"rounded-b":S()}],"rounded-l":[{"rounded-l":S()}],"rounded-ss":[{"rounded-ss":S()}],"rounded-se":[{"rounded-se":S()}],"rounded-ee":[{"rounded-ee":S()}],"rounded-es":[{"rounded-es":S()}],"rounded-tl":[{"rounded-tl":S()}],"rounded-tr":[{"rounded-tr":S()}],"rounded-br":[{"rounded-br":S()}],"rounded-bl":[{"rounded-bl":S()}],"border-w":[{border:j()}],"border-w-x":[{"border-x":j()}],"border-w-y":[{"border-y":j()}],"border-w-s":[{"border-s":j()}],"border-w-e":[{"border-e":j()}],"border-w-t":[{"border-t":j()}],"border-w-r":[{"border-r":j()}],"border-w-b":[{"border-b":j()}],"border-w-l":[{"border-l":j()}],"divide-x":[{"divide-x":j()}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":j()}],"divide-y-reverse":["divide-y-reverse"],"border-style":[{border:[...Z(),"hidden","none"]}],"divide-style":[{divide:[...Z(),"hidden","none"]}],"border-color":[{border:k()}],"border-color-x":[{"border-x":k()}],"border-color-y":[{"border-y":k()}],"border-color-s":[{"border-s":k()}],"border-color-e":[{"border-e":k()}],"border-color-t":[{"border-t":k()}],"border-color-r":[{"border-r":k()}],"border-color-b":[{"border-b":k()}],"border-color-l":[{"border-l":k()}],"divide-color":[{divide:k()}],"outline-style":[{outline:[...Z(),"none","hidden"]}],"outline-offset":[{"outline-offset":[M,v,h]}],"outline-w":[{outline:["",M,be,ce]}],"outline-color":[{outline:k()}],shadow:[{shadow:["","none",u,Ee,ke]}],"shadow-color":[{shadow:k()}],"inset-shadow":[{"inset-shadow":["none",g,Ee,ke]}],"inset-shadow-color":[{"inset-shadow":k()}],"ring-w":[{ring:j()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:k()}],"ring-offset-w":[{"ring-offset":[M,ce]}],"ring-offset-color":[{"ring-offset":k()}],"inset-ring-w":[{"inset-ring":j()}],"inset-ring-color":[{"inset-ring":k()}],"text-shadow":[{"text-shadow":["none",A,Ee,ke]}],"text-shadow-color":[{"text-shadow":k()}],opacity:[{opacity:[M,v,h]}],"mix-blend":[{"mix-blend":[...ae(),"plus-darker","plus-lighter"]}],"bg-blend":[{"bg-blend":ae()}],"mask-clip":[{"mask-clip":["border","padding","content","fill","stroke","view"]},"mask-no-clip"],"mask-composite":[{mask:["add","subtract","intersect","exclude"]}],"mask-image-linear-pos":[{"mask-linear":[M]}],"mask-image-linear-from-pos":[{"mask-linear-from":U()}],"mask-image-linear-to-pos":[{"mask-linear-to":U()}],"mask-image-linear-from-color":[{"mask-linear-from":k()}],"mask-image-linear-to-color":[{"mask-linear-to":k()}],"mask-image-t-from-pos":[{"mask-t-from":U()}],"mask-image-t-to-pos":[{"mask-t-to":U()}],"mask-image-t-from-color":[{"mask-t-from":k()}],"mask-image-t-to-color":[{"mask-t-to":k()}],"mask-image-r-from-pos":[{"mask-r-from":U()}],"mask-image-r-to-pos":[{"mask-r-to":U()}],"mask-image-r-from-color":[{"mask-r-from":k()}],"mask-image-r-to-color":[{"mask-r-to":k()}],"mask-image-b-from-pos":[{"mask-b-from":U()}],"mask-image-b-to-pos":[{"mask-b-to":U()}],"mask-image-b-from-color":[{"mask-b-from":k()}],"mask-image-b-to-color":[{"mask-b-to":k()}],"mask-image-l-from-pos":[{"mask-l-from":U()}],"mask-image-l-to-pos":[{"mask-l-to":U()}],"mask-image-l-from-color":[{"mask-l-from":k()}],"mask-image-l-to-color":[{"mask-l-to":k()}],"mask-image-x-from-pos":[{"mask-x-from":U()}],"mask-image-x-to-pos":[{"mask-x-to":U()}],"mask-image-x-from-color":[{"mask-x-from":k()}],"mask-image-x-to-color":[{"mask-x-to":k()}],"mask-image-y-from-pos":[{"mask-y-from":U()}],"mask-image-y-to-pos":[{"mask-y-to":U()}],"mask-image-y-from-color":[{"mask-y-from":k()}],"mask-image-y-to-color":[{"mask-y-to":k()}],"mask-image-radial":[{"mask-radial":[v,h]}],"mask-image-radial-from-pos":[{"mask-radial-from":U()}],"mask-image-radial-to-pos":[{"mask-radial-to":U()}],"mask-image-radial-from-color":[{"mask-radial-from":k()}],"mask-image-radial-to-color":[{"mask-radial-to":k()}],"mask-image-radial-shape":[{"mask-radial":["circle","ellipse"]}],"mask-image-radial-size":[{"mask-radial":[{closest:["side","corner"],farthest:["side","corner"]}]}],"mask-image-radial-pos":[{"mask-radial-at":f()}],"mask-image-conic-pos":[{"mask-conic":[M]}],"mask-image-conic-from-pos":[{"mask-conic-from":U()}],"mask-image-conic-to-pos":[{"mask-conic-to":U()}],"mask-image-conic-from-color":[{"mask-conic-from":k()}],"mask-image-conic-to-color":[{"mask-conic-to":k()}],"mask-mode":[{mask:["alpha","luminance","match"]}],"mask-origin":[{"mask-origin":["border","padding","content","fill","stroke","view"]}],"mask-position":[{mask:L()}],"mask-repeat":[{mask:ee()}],"mask-size":[{mask:J()}],"mask-type":[{"mask-type":["alpha","luminance"]}],"mask-image":[{mask:["none",v,h]}],filter:[{filter:["","none",v,h]}],blur:[{blur:we()}],brightness:[{brightness:[M,v,h]}],contrast:[{contrast:[M,v,h]}],"drop-shadow":[{"drop-shadow":["","none",T,Ee,ke]}],"drop-shadow-color":[{"drop-shadow":k()}],grayscale:[{grayscale:["",M,v,h]}],"hue-rotate":[{"hue-rotate":[M,v,h]}],invert:[{invert:["",M,v,h]}],saturate:[{saturate:[M,v,h]}],sepia:[{sepia:["",M,v,h]}],"backdrop-filter":[{"backdrop-filter":["","none",v,h]}],"backdrop-blur":[{"backdrop-blur":we()}],"backdrop-brightness":[{"backdrop-brightness":[M,v,h]}],"backdrop-contrast":[{"backdrop-contrast":[M,v,h]}],"backdrop-grayscale":[{"backdrop-grayscale":["",M,v,h]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[M,v,h]}],"backdrop-invert":[{"backdrop-invert":["",M,v,h]}],"backdrop-opacity":[{"backdrop-opacity":[M,v,h]}],"backdrop-saturate":[{"backdrop-saturate":[M,v,h]}],"backdrop-sepia":[{"backdrop-sepia":["",M,v,h]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":x()}],"border-spacing-x":[{"border-spacing-x":x()}],"border-spacing-y":[{"border-spacing-y":x()}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["","all","colors","opacity","shadow","transform","none",v,h]}],"transition-behavior":[{transition:["normal","discrete"]}],duration:[{duration:[M,"initial",v,h]}],ease:[{ease:["linear","initial",E,v,h]}],delay:[{delay:[M,v,h]}],animate:[{animate:["none",w,v,h]}],backface:[{backface:["hidden","visible"]}],perspective:[{perspective:[m,v,h]}],"perspective-origin":[{"perspective-origin":N()}],rotate:[{rotate:P()}],"rotate-x":[{"rotate-x":P()}],"rotate-y":[{"rotate-y":P()}],"rotate-z":[{"rotate-z":P()}],scale:[{scale:_()}],"scale-x":[{"scale-x":_()}],"scale-y":[{"scale-y":_()}],"scale-z":[{"scale-z":_()}],"scale-3d":["scale-3d"],skew:[{skew:$()}],"skew-x":[{"skew-x":$()}],"skew-y":[{"skew-y":$()}],transform:[{transform:[v,h,"","none","gpu","cpu"]}],"transform-origin":[{origin:N()}],"transform-style":[{transform:["3d","flat"]}],translate:[{translate:Q()}],"translate-x":[{"translate-x":Q()}],"translate-y":[{"translate-y":Q()}],"translate-z":[{"translate-z":Q()}],"translate-none":["translate-none"],accent:[{accent:k()}],appearance:[{appearance:["none","auto"]}],"caret-color":[{caret:k()}],"color-scheme":[{scheme:["normal","dark","light","light-dark","only-dark","only-light"]}],cursor:[{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]}],"field-sizing":[{"field-sizing":["fixed","content"]}],"pointer-events":[{"pointer-events":["auto","none"]}],resize:[{resize:["none","","y","x"]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":x()}],"scroll-mx":[{"scroll-mx":x()}],"scroll-my":[{"scroll-my":x()}],"scroll-ms":[{"scroll-ms":x()}],"scroll-me":[{"scroll-me":x()}],"scroll-mt":[{"scroll-mt":x()}],"scroll-mr":[{"scroll-mr":x()}],"scroll-mb":[{"scroll-mb":x()}],"scroll-ml":[{"scroll-ml":x()}],"scroll-p":[{"scroll-p":x()}],"scroll-px":[{"scroll-px":x()}],"scroll-py":[{"scroll-py":x()}],"scroll-ps":[{"scroll-ps":x()}],"scroll-pe":[{"scroll-pe":x()}],"scroll-pt":[{"scroll-pt":x()}],"scroll-pr":[{"scroll-pr":x()}],"scroll-pb":[{"scroll-pb":x()}],"scroll-pl":[{"scroll-pl":x()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",v,h]}],fill:[{fill:["none",...k()]}],"stroke-w":[{stroke:[M,be,ce,$e]}],stroke:[{stroke:["none",...k()]}],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],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"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"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"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"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"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],translate:["translate-x","translate-y","translate-none"],"translate-none":["translate","translate-x","translate-y","translate-z"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]},orderSensitiveModifiers:["*","**","after","backdrop","before","details-content","file","first-letter","first-line","marker","placeholder","selection"]}},Qn=On(Jn);function Y(...e){return Qn(zt(e))}let qe;process.env.NODE_ENV!=="production"&&(qe=new Set);function Me(...e){if(process.env.NODE_ENV!=="production"){const t=e.join(" ");qe.has(t)||(qe.add(t),console.error(`Base UI: ${t}`))}}function er({controlled:e,default:t,name:n,state:r="value"}){const{current:o}=d.useRef(e!==void 0),[s,i]=d.useState(t),c=o?e:s;if(process.env.NODE_ENV!=="production"){d.useEffect(()=>{o!==(e!==void 0)&&Me([`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(`
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
`));return d.cloneElement(s,o)}if(e&&typeof e=="string")return Ir(e,n);throw new Error(process.env.NODE_ENV!=="production"?"Base UI: Render element or function are not defined.":ze(8))}function Rr(e){const t=e.name;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")}function Ir(e,t){return e==="button"?Se.createElement("button",{type:"button",...t,key:t.key}):e==="img"?Se.createElement("img",{alt:"",...t,key:t.key}):d.createElement(e,t)}const st=d.createContext({register:()=>{},unregister:()=>{},subscribeMapChange:()=>()=>{},elementsRef:{current:[]},nextIndexRef:{current:0}});process.env.NODE_ENV!=="production"&&(st.displayName="CompositeListContext");function Tr(){return d.useContext(st)}function tn(e){const{children:t,elementsRef:n,labelsRef:r,onMapChange:o}=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)=>{a.set(E,w??null),g.current+=1,u(g.current)}),T=K(E=>{a.delete(E),g.current+=1,u(g.current)}),p=d.useMemo(()=>{const E=new Map;return Array.from(a.keys()).filter(I=>I.isConnected).sort(Sr).forEach((I,f)=>{const N=a.get(I)??{};E.set(I,{...N,index:f})}),E},[a,l]);H(()=>{if(typeof MutationObserver!="function"||p.size===0)return;const E=new MutationObserver(w=>{const I=new Set,f=N=>I.has(N)?I.delete(N):I.add(N);w.forEach(N=>{N.removedNodes.forEach(f),N.addedNodes.forEach(f)}),I.size===0&&(g.current+=1,u(g.current))});return p.forEach((w,I)=>{I.parentElement&&E.observe(I.parentElement,{childList:!0})}),()=>{E.disconnect()}},[p]),H(()=>{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)},[s,p,n,r,l]),H(()=>()=>{n.current=[]},[n]),H(()=>()=>{r&&(r.current=[])},[r]);const m=K(E=>(c.add(E),()=>{c.delete(E)}));H(()=>{c.forEach(E=>E(p))},[c,p]);const y=d.useMemo(()=>({register:A,unregister:T,subscribeMapChange:m,elementsRef:n,labelsRef:r,nextIndexRef:i}),[A,T,m,n,r,i]);return W.jsx(st.Provider,{value:y,children:t})}function Cr(){return new Map}function Nr(){return new Set}function Sr(e,t){const n=e.compareDocumentPosition(t);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}const it=d.createContext(void 0);process.env.NODE_ENV!=="production"&&(it.displayName="TabsRootContext");function at(){const e=d.useContext(it);if(e===void 0)throw new Error(process.env.NODE_ENV!=="production"?"Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>.":ze(64));return e}let Mr=(function(e){return e.activationDirection="data-activation-direction",e.orientation="data-orientation",e})({});const Ve={tabActivationDirection:e=>({[Mr.activationDirection]:e})},yt="none",Ar="disabled",wt="missing",kt="initial";function Qe(e,t,n,r){let o=!1,s=!1;const i=r??ue;return{reason:e,event:t??new Event("base-ui"),cancel(){o=!0},allowPropagation(){s=!0},get isCanceled(){return o},get isPropagationAllowed(){return s},trigger:n,...i}}const nn=d.forwardRef(function(t,n){const{className:r,defaultValue:o=0,onValueChange:s,orientation:i="horizontal",render:c,value:a,style:l,...u}=t,g=t.defaultValue!==void 0,A=d.useRef([]),[T,p]=d.useState(()=>new Map),[m,y]=er({controlled:a,default:o,name:"Tabs",state:"value"}),E=a!==void 0,[w,I]=d.useState(()=>new Map),f=d.useRef(void 0),N=d.useCallback(P=>{if(P===void 0)return null;for(const[_,$]of w.entries())if($!=null&&P===($.value??$.index))return _;return null},[w]),[z,D]=d.useState(()=>({previousValue:m,tabActivationDirection:"none"})),{previousValue:x,tabActivationDirection:O}=z;let b=O,R=!1;x!==m&&(b=Et(x,m,i,w),R=x!=null&&m!=null&&N(m)==null);const C=R?x:m,B=x!==C||O!==b;H(()=>{B&&D({previousValue:C,tabActivationDirection:b})},[C,B,b]);const F=K((P,_)=>{const $=Et(m,P,i,w);_.activationDirection=$,s==null||s(P,_),!_.isCanceled&&y(P)}),q=K((P,_)=>{s==null||s(P,Qe(_,void 0,void 0,{activationDirection:"none"}))}),V=K((P,_)=>{p($=>{if($.get(P)===_)return $;const Q=new Map($);return Q.set(P,_),Q})}),X=K((P,_)=>{p($=>{if(!$.has(P)||$.get(P)!==_)return $;const Q=new Map($);return Q.delete(P),Q})}),k=d.useCallback(P=>T.get(P),[T]),L=d.useCallback(P=>{for(const _ of w.values())if(P===(_==null?void 0:_.value))return _==null?void 0:_.id},[w]),ee=d.useMemo(()=>({getTabElementBySelectedValue:N,getTabIdByPanelValue:L,getTabPanelIdByValue:k,onValueChange:F,orientation:i,registerMountedTabPanel:V,setTabMap:I,unregisterMountedTabPanel:X,tabActivationDirection:b,value:m}),[N,L,k,F,i,V,I,X,b,m]),J=d.useMemo(()=>{for(const P of w.values())if(P!=null&&P.value===m)return P},[w,m]),te=d.useMemo(()=>{for(const P of w.values())if(P!=null&&!P.disabled)return P.value},[w]),S=d.useRef(!g),j=d.useRef(o),Z=d.useRef(g),ae=d.useRef(!1);H(()=>{var ft;if(E)return;function P(le,ge){y(le),D(Fe=>Fe.previousValue===le&&Fe.tabActivationDirection==="none"?Fe:{previousValue:le,tabActivationDirection:"none"}),q(le,ge),S.current=!1}if(w.size===0){ae.current&&m!==null&&!((ft=f.current)!=null&&ft.isConnected)&&P(null,wt);return}ae.current=!0,f.current=w.keys().next().value;const _=J==null?void 0:J.disabled,$=J==null&&m!==null;if(!_&&m===j.current&&(Z.current=!1),Z.current&&_&&m===j.current)return;const Q=S.current;if(_||$){const le=te??null;if(m===le){S.current=!1;return}let ge=wt;Q?ge=kt:_&&(ge=Ar),P(le,ge);return}Q&&J!=null&&(q(m,kt),S.current=!1)},[te,E,q,J,y,w,m]);const we=De("div",t,{state:{orientation:i,tabActivationDirection:b},ref:n,props:u,stateAttributesMapping:Ve});return W.jsx(it.Provider,{value:ee,children:W.jsx(tn,{elementsRef:A,children:we})})});process.env.NODE_ENV!=="production"&&(nn.displayName="TabsRoot");function Et(e,t,n,r){if(e==null||t==null)return"none";let o=null,s=null;for(const[a,l]of r.entries()){if(l==null)continue;const u=l.value??l.index;if(e===u&&(o=a),t===u&&(s=a),o!=null&&s!=null)break}if(o==null||s==null)return o!==s&&(typeof e=="number"||typeof e=="string")&&typeof e==typeof t?n==="horizontal"?t>e?"right":"left":t>e?"down":"up":"none";const i=o.getBoundingClientRect(),c=s.getBoundingClientRect();if(n==="horizontal"){if(c.left<i.left)return"left";if(c.left>i.left)return"right"}else{if(c.top<i.top)return"up";if(c.top>i.top)return"down"}return"none"}function rn(){return typeof window<"u"}function lt(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function ct(e){return rn()?e instanceof HTMLElement||e instanceof lt(e).HTMLElement:!1}function Pr(e){return!rn()||typeof ShadowRoot>"u"?!1:e instanceof ShadowRoot||e instanceof lt(e).ShadowRoot}function Or(e){return lt(e).getComputedStyle(e)}function Rt(e){return(e==null?void 0:e.ownerDocument)||document}let It=0;function _r(e,t="mui"){const[n,r]=d.useState(e),o=e||n;return d.useEffect(()=>{n==null&&(It+=1,r(`${t}-${It}`))},[n,t]),o}const Tt=oe.useId;function Lr(e,t){if(Tt!==void 0){const n=Tt();return e??`${t}-${n}`}return _r(e,t)}function on(e){return Lr(e,"base-ui")}const ut=d.createContext(void 0);process.env.NODE_ENV!=="production"&&(ut.displayName="CompositeRootContext");function sn(e=!1){const t=d.useContext(ut);if(t===void 0&&!e)throw new Error(process.env.NODE_ENV!=="production"?"Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.":ze(16));return t}function zr(e){const{focusableWhenDisabled:t,disabled:n,composite:r=!1,tabIndex:o=0,isNativeButton:s}=e,i=r&&t!==!1,c=r&&t===!1;return{props:d.useMemo(()=>{const l={onKeyDown(u){n&&t&&u.key!=="Tab"&&u.preventDefault()}};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},[r,n,t,i,c,s,o])}}function Dr(e={}){const{disabled:t=!1,focusableWhenDisabled:n,tabIndex:r=0,native:o=!0,composite:s}=e,i=d.useRef(null),c=sn(!0),a=s??c!==void 0,{props:l}=zr({focusableWhenDisabled:n,disabled:t,composite:a,tabIndex:r,isNativeButton:o});process.env.NODE_ENV!=="production"&&d.useEffect(()=>{var p,m;if(!i.current)return;const T=Re(i.current);if(o){if(!T){const y=((p=oe.captureOwnerStack)==null?void 0:p.call(oe))||"";Me(`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\`.${y}`)}}else if(T){const y=((m=oe.captureOwnerStack)==null?void 0:m.call(oe))||"";Me(`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\`.${y}`)}},[o]);const u=d.useCallback(()=>{const T=i.current;Re(T)&&a&&t&&l.disabled===void 0&&T.disabled&&(T.disabled=!1)},[t,l.disabled,a]);H(u,[u]);const g=d.useCallback((T={})=>{const{onClick:p,onMouseDown:m,onKeyUp:y,onKeyDown:E,onPointerDown:w,...I}=T;return rt({onClick(f){if(t){f.preventDefault();return}p==null||p(f)},onMouseDown(f){t||m==null||m(f)},onKeyDown(f){if(t||(Oe(f),E==null||E(f),f.baseUIHandlerPrevented))return;const N=f.target===f.currentTarget,z=f.currentTarget,D=Re(z),x=!o&&Vr(z),O=N&&(o?D:!x),b=f.key==="Enter",R=f.key===" ",C=z.getAttribute("role"),B=(C==null?void 0:C.startsWith("menuitem"))||C==="option"||C==="gridcell";if(N&&a&&R){if(f.defaultPrevented&&B)return;f.preventDefault(),x||o&&D?(z.click(),f.preventBaseUIHandler()):O&&(p==null||p(f),f.preventBaseUIHandler());return}O&&(!o&&(R||b)&&f.preventDefault(),!o&&b&&(p==null||p(f)))},onKeyUp(f){if(!t){if(Oe(f),y==null||y(f),f.target===f.currentTarget&&o&&a&&Re(f.currentTarget)&&f.key===" "){f.preventDefault();return}f.baseUIHandlerPrevented||f.target===f.currentTarget&&!o&&!a&&f.key===" "&&(p==null||p(f))}},onPointerDown(f){if(t){f.preventDefault();return}w==null||w(f)}},o?{type:"button"}:{role:"button"},l,I)},[t,l,a,o]),A=K(T=>{i.current=T,u()});return{getButtonProps:g,buttonRef:A}}function Re(e){return ct(e)&&e.tagName==="BUTTON"}function Vr(e){return!!((e==null?void 0:e.tagName)==="A"&&(e!=null&&e.href))}const an="data-composite-item-active";let jr=(function(e){return e[e.None=0]="None",e[e.GuessFromOrder=1]="GuessFromOrder",e})({});function ln(e={}){const{label:t,metadata:n,textRef:r,indexGuessBehavior:o,index:s}=e,{register:i,unregister:c,subscribeMapChange:a,elementsRef:l,labelsRef:u,nextIndexRef:g}=Tr(),A=d.useRef(-1),[T,p]=d.useState(s??(o===jr.GuessFromOrder?()=>{if(A.current===-1){const E=g.current;g.current+=1,A.current=E}return A.current}:-1)),m=d.useRef(null),y=d.useCallback(E=>{var w;if(m.current=E,T!==-1&&E!==null&&(l.current[T]=E,u)){const I=t!==void 0;u.current[T]=I?t:((w=r==null?void 0:r.current)==null?void 0:w.textContent)??E.textContent}},[T,l,u,t,r]);return H(()=>{if(s!=null)return;const E=m.current;if(E)return i(E,n),()=>{c(E)}},[s,i,c,n]),H(()=>{if(s==null)return a(E=>{var I;const w=m.current?(I=E.get(m.current))==null?void 0:I.index:null;w!=null&&p(w)})},[s,a,p]),{ref:y,index:T}}function Br(e={}){const{highlightItemOnHover:t,highlightedIndex:n,onHighlightedIndexChange:r}=sn(),{ref:o,index:s}=ln(e),i=n===s,c=d.useRef(null),a=Ae(o,c);return{compositeProps:{tabIndex:i?0:-1,onFocus(){r(s)},onMouseMove(){const u=c.current;if(!t||!u)return;const g=u.hasAttribute("disabled")||u.ariaDisabled==="true";!i&&!g&&u.focus()}},compositeRef:a,index:s}}const dt=d.createContext(void 0);process.env.NODE_ENV!=="production"&&(dt.displayName="TabsListContext");function Fr(){const e=d.useContext(dt);if(e===void 0)throw new Error(process.env.NODE_ENV!=="production"?"Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>.":ze(65));return e}function Ur(e){var n;let t=e.activeElement;for(;((n=t==null?void 0:t.shadowRoot)==null?void 0:n.activeElement)!=null;)t=t.shadowRoot.activeElement;return t}function $r(e,t){var r;if(!e||!t)return!1;const n=(r=t.getRootNode)==null?void 0:r.call(t);if(e.contains(t))return!0;if(n&&Pr(n)){let o=t;for(;o;){if(e===o)return!0;o=o.parentNode||o.host}}return!1}function Ct(e){return"composedPath"in e?e.composedPath()[0]:e.target}function Ge(e,t){return t<0||t>=e.length}function Wr(e,t){return he(e.current,{disabledIndices:t})}function Gr(e,t){return he(e.current,{decrement:!0,startingIndex:e.current.length,disabledIndices:t})}function he(e,{startingIndex:t=-1,decrement:n=!1,disabledIndices:r,amount:o=1}={}){let s=t;do s+=n?-o:o;while(s>=0&&s<=e.length-1&&et(e,s,r));return s}function et(e,t,n){if(typeof n=="function"?n(t):(n==null?void 0:n.includes(t))??!1)return!0;const o=e[t];return o?Kr(o)?!n&&(o.hasAttribute("disabled")||o.getAttribute("aria-disabled")==="true"):!0:!1}function Hr(e){return e.visibility==="hidden"||e.visibility==="collapse"}function Kr(e,t=e?Or(e):null){return!e||!e.isConnected||!t||Hr(t)?!1:typeof e.checkVisibility=="function"?e.checkVisibility():t.display!=="none"&&t.display!=="contents"}const cn=d.forwardRef(function(t,n){const{className:r,disabled:o=!1,render:s,value:i,id:c,nativeButton:a=!0,style:l,...u}=t,{value:g,getTabPanelIdByValue:A,orientation:T,tabActivationDirection:p}=at(),{activateOnFocus:m,highlightedTabIndex:y,onTabActivation:E,registerTabResizeObserverElement:w,setHighlightedTabIndex:I,tabsListElement:f}=Fr(),N=on(c),z=d.useMemo(()=>({disabled:o,id:N,value:i}),[o,N,i]),{compositeProps:D,compositeRef:x,index:O}=Br({metadata:z}),b=i===g,R=d.useRef(!1),C=d.useRef(null);H(()=>{const S=C.current;if(S)return w(S)},[w]),H(()=>{if(R.current){R.current=!1;return}if(!(b&&O>-1&&y!==O))return;const S=f;if(S!=null){const j=Ur(Rt(S));if(j&&$r(S,j))return}o||I(O)},[b,O,y,I,o,f]);const{getButtonProps:B,buttonRef:F}=Dr({disabled:o,native:a,focusableWhenDisabled:!0}),q=A(i),V=d.useRef(!1),X=d.useRef(!1);function k(S){b||o||E(i,Qe(yt,S.nativeEvent,void 0,{activationDirection:"none"}))}function L(S){b||(O>-1&&!o&&I(O),!o&&m&&(!V.current||V.current&&X.current)&&E(i,Qe(yt,S.nativeEvent,void 0,{activationDirection:"none"})))}function ee(S){if(b||o)return;V.current=!0;function j(){V.current=!1,X.current=!1}(!S.button||S.button===0)&&(X.current=!0,Rt(S.currentTarget).addEventListener("pointerup",j,{once:!0}))}return De("button",t,{state:{disabled:o,active:b,orientation:T,tabActivationDirection:p},ref:[n,F,x,C],props:[D,{role:"tab","aria-controls":q,"aria-selected":b,id:N,onClick:k,onFocus:L,onPointerDown:ee,[an]:b?"":void 0,onKeyDownCapture(){R.current=!0}},u,B],stateAttributesMapping:Ve})});process.env.NODE_ENV!=="production"&&(cn.displayName="TabsTab");function Yr(e){return qt(19)?e:e?"true":void 0}let ye=(function(e){return e.startingStyle="data-starting-style",e.endingStyle="data-ending-style",e})({});const qr={[ye.startingStyle]:""},Xr={[ye.endingStyle]:""},Zr={transitionStatus(e){return e==="starting"?qr:e==="ending"?Xr:null}},Jr=[];function Qr(e){d.useEffect(e,Jr)}const Ie=null;let Nt=globalThis.requestAnimationFrame;class eo{constructor(){ne(this,"callbacks",[]);ne(this,"callbacksCount",0);ne(this,"nextId",1);ne(this,"startId",1);ne(this,"isScheduled",!1);ne(this,"tick",t=>{var o;this.isScheduled=!1;const n=this.callbacks,r=this.callbacksCount;if(this.callbacks=[],this.callbacksCount=0,this.startId=this.nextId,r>0)for(let s=0;s<n.length;s+=1)(o=n[s])==null||o.call(n,t)})}request(t){const n=this.nextId;this.nextId+=1,this.callbacks.push(t),this.callbacksCount+=1;const r=process.env.NODE_ENV!=="production"&&Nt!==requestAnimationFrame&&(Nt=requestAnimationFrame,!0);return(!this.isScheduled||r)&&(requestAnimationFrame(this.tick),this.isScheduled=!0),n}cancel(t){const n=t-this.startId;n<0||n>=this.callbacks.length||(this.callbacks[n]=null,this.callbacksCount-=1)}}const Te=new eo;class se{constructor(){ne(this,"currentId",Ie);ne(this,"cancel",()=>{this.currentId!==Ie&&(Te.cancel(this.currentId),this.currentId=Ie)});ne(this,"disposeEffect",()=>this.cancel)}static create(){return new se}static request(t){return Te.request(t)}static cancel(t){return Te.cancel(t)}request(t){this.cancel(),this.currentId=Te.request(()=>{this.currentId=Ie,t()})}}function to(){const e=fe(se.create).current;return Qr(e.disposeEffect),e}function no(e){return e==null?e:"current"in e?e.current:e}function ro(e,t=!1,n=!0){const r=to();return K((o,s=null)=>{r.cancel();const i=no(e);if(i==null)return;const c=i,a=()=>{xn.flushSync(o)};if(typeof c.getAnimations!="function"||globalThis.BASE_UI_ANIMATIONS_DISABLED){o();return}function l(){Promise.all(c.getAnimations().map(u=>u.finished)).then(()=>{s!=null&&s.aborted||a()}).catch(()=>{if(n){s!=null&&s.aborted||a();return}const u=c.getAnimations();!(s!=null&&s.aborted)&&u.length>0&&u.some(g=>g.pending||g.playState!=="finished")&&l()})}if(t){const u=ye.startingStyle;if(!c.hasAttribute(u)){r.request(l);return}const g=new MutationObserver(()=>{c.hasAttribute(u)||(g.disconnect(),l())});g.observe(c,{attributes:!0,attributeFilter:[u]}),s==null||s.addEventListener("abort",()=>g.disconnect(),{once:!0});return}r.request(l)})}function oo(e){const{enabled:t=!0,open:n,ref:r,onComplete:o}=e,s=K(o),i=ro(r,n,!1);d.useEffect(()=>{if(!t)return;const c=new AbortController;return i(s,c.signal),()=>{c.abort()}},[t,n,s,i])}function so(e,t=!1,n=!1){const[r,o]=d.useState(e&&t?"idle":void 0),[s,i]=d.useState(e);return e&&!s&&(i(!0),o("starting")),!e&&s&&r!=="ending"&&!n&&o("ending"),!e&&!s&&r==="ending"&&o(void 0),H(()=>{if(!e&&s&&r!=="ending"&&n){const c=se.request(()=>{o("ending")});return()=>{se.cancel(c)}}},[e,s,r,n]),H(()=>{if(!e||t)return;const c=se.request(()=>{o(void 0)});return()=>{se.cancel(c)}},[t,e]),H(()=>{if(!e||!t)return;e&&s&&r!=="idle"&&o("starting");const c=se.request(()=>{o("idle")});return()=>{se.cancel(c)}},[t,e,s,r]),{mounted:s,setMounted:i,transitionStatus:r}}let io=(function(e){return e.index="data-index",e.activationDirection="data-activation-direction",e.orientation="data-orientation",e.hidden="data-hidden",e[e.startingStyle=ye.startingStyle]="startingStyle",e[e.endingStyle=ye.endingStyle]="endingStyle",e})({});const ao={...Ve,...Zr},un=d.forwardRef(function(t,n){const{className:r,value:o,render:s,keepMounted:i=!1,style:c,...a}=t,{value:l,getTabIdByPanelValue:u,orientation:g,tabActivationDirection:A,registerMountedTabPanel:T,unregisterMountedTabPanel:p}=at(),m=on(),y=d.useMemo(()=>({id:m,value:o}),[m,o]),{ref:E,index:w}=ln({metadata:y}),I=o===l,{mounted:f,transitionStatus:N,setMounted:z}=so(I),D=!f,x=u(o),O={hidden:D,orientation:g,tabActivationDirection:A,transitionStatus:N},b=d.useRef(null),R=De("div",t,{state:O,ref:[n,E,b],props:[{"aria-labelledby":x,hidden:D,id:m,role:"tabpanel",tabIndex:I?0:-1,inert:Yr(!I),[io.index]:w},a],stateAttributesMapping:ao});return oo({open:I,ref:b,onComplete(){I||z(!1)}}),H(()=>{if(!(D&&!i)&&m!=null)return T(o,m),()=>{p(o,m)}},[D,i,o,m,T,p]),i||f?R:null});process.env.NODE_ENV!=="production"&&(un.displayName="TabsPanel");function lo(e){return e==null||e.hasAttribute("disabled")||e.getAttribute("aria-disabled")==="true"}const ve="ArrowUp",xe="ArrowDown",_e="ArrowLeft",Le="ArrowRight",je="Home",Be="End",dn=new Set([_e,Le]),co=new Set([_e,Le,je,Be]),fn=new Set([ve,xe]),uo=new Set([ve,xe,je,Be]),pn=new Set([...dn,...fn]),fo=new Set([...pn,je,Be]),po="Shift",mo="Control",go="Alt",bo="Meta",ho=new Set([po,mo,go,bo]);function vo(e){return ct(e)&&e.tagName==="INPUT"}function St(e){return!!(vo(e)&&e.selectionStart!=null||ct(e)&&e.tagName==="TEXTAREA")}function Mt(e,t,n,r){if(!e||!t||!t.scrollTo)return;let o=e.scrollLeft,s=e.scrollTop;const i=e.clientWidth<e.scrollWidth,c=e.clientHeight<e.scrollHeight;if(i&&r!=="vertical"){const a=At(e,t,"left"),l=Ce(e),u=Ce(t);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))}if(c&&r!=="horizontal"){const a=At(e,t,"top"),l=Ce(e),u=Ce(t);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)}e.scrollTo({left:o,top:s,behavior:"auto"})}function At(e,t,n){const r=n==="left"?"offsetLeft":"offsetTop";let o=0;for(;t.offsetParent&&(o+=t[r],t.offsetParent!==e);)t=t.offsetParent;return o}function Ce(e){const t=getComputedStyle(e);return{scrollMarginTop:parseFloat(t.scrollMarginTop)||0,scrollMarginRight:parseFloat(t.scrollMarginRight)||0,scrollMarginBottom:parseFloat(t.scrollMarginBottom)||0,scrollMarginLeft:parseFloat(t.scrollMarginLeft)||0,scrollPaddingTop:parseFloat(t.scrollPaddingTop)||0,scrollPaddingRight:parseFloat(t.scrollPaddingRight)||0,scrollPaddingBottom:parseFloat(t.scrollPaddingBottom)||0,scrollPaddingLeft:parseFloat(t.scrollPaddingLeft)||0}}const xo=[];function yo(e){const{loopFocus:t=!0,orientation:n="both",grid:r,onLoop:o,direction:s,highlightedIndex:i,onHighlightedIndexChange:c,rootRef:a,enableHomeAndEndKeys:l=!1,stopEventPropagation:u=!1,disabledIndices:g,modifierKeys:A=xo}=e,[T,p]=d.useState(0),m=r!=null,y=d.useRef(null),E=Ae(y,a),w=d.useRef([]),I=d.useRef(!1),f=i??T,N=K((b,R=!1)=>{if((c??p)(b),R){const C=w.current[b];Mt(y.current,C,s,n)}}),z=K(b=>{if(b.size===0||I.current)return;I.current=!0;const R=Array.from(b.keys()),C=R.find(F=>F==null?void 0:F.hasAttribute(an))??null,B=C?R.indexOf(C):-1;if(B!==-1)N(B);else if(et(R,f,g)){const F=he(R,{disabledIndices:g});Ge(R,F)||N(F)}Mt(y.current,C,s,n)});H(()=>{if(g==null||i!=null||!I.current)return;const b=w.current;if(et(b,f,g)){const R=he(b,{disabledIndices:g});Ge(b,R)||N(R)}},[g,i,f,w,N]);const D=K((b,R,C)=>o?o(b,R,C,w):C),x=K(b=>{const R=l?fo:pn;if(!R.has(b.key)||wo(b,A)||!y.current)return;const B=s==="rtl",F=B?_e:Le,q={horizontal:F,vertical:xe,both:F}[n],V=B?Le:_e,X={horizontal:V,vertical:ve,both:V}[n],k=Ct(b.nativeEvent);if(k!=null&&St(k)&&!lo(k)){const Z=k.selectionStart,ae=k.selectionEnd,U=k.value??"";if(Z==null||b.shiftKey||Z!==ae||b.key!==X&&Z<U.length||b.key!==q&&Z>0)return}let L=f;const ee=Wr(w,g),J=Gr(w,g);r!=null&&(L=r({disabledIndices:g,elementsRef:w,event:b,highlightedIndex:f,loopFocus:t,maxIndex:J,minIndex:ee,onLoop:D,orientation:n,rtl:B}));const te={horizontal:[F],vertical:[xe],both:[F,xe]}[n],S={horizontal:[V],vertical:[ve],both:[V,ve]}[n],j=m?R:{horizontal:l?co:dn,vertical:l?uo:fn,both:R}[n];l&&(b.key===je?L=ee:b.key===Be&&(L=J)),L===f&&(te.includes(b.key)||S.includes(b.key))&&(t&&L===J&&te.includes(b.key)?(L=ee,o&&(L=o(b,f,L,w))):t&&L===ee&&S.includes(b.key)?(L=J,o&&(L=o(b,f,L,w))):L=he(w.current,{startingIndex:L,decrement:S.includes(b.key),disabledIndices:g})),L!==f&&!Ge(w.current,L)&&(u&&b.stopPropagation(),j.has(b.key)&&b.preventDefault(),N(L,!0),queueMicrotask(()=>{var Z;(Z=w.current[L])==null||Z.focus()}))});return{props:{ref:E,onFocus(b){const R=y.current,C=Ct(b.nativeEvent);!R||C==null||!St(C)||C.setSelectionRange(0,C.value.length??0)},onKeyDown:x},highlightedIndex:f,onHighlightedIndexChange:N,elementsRef:w,disabledIndices:g,onMapChange:z,relayKeyboardEvent:x}}function wo(e,t){for(const n of ho.values())if(!t.includes(n)&&e.getModifierState(n))return!0;return!1}const mn=d.createContext(void 0);process.env.NODE_ENV!=="production"&&(mn.displayName="DirectionContext");function ko(){const e=d.useContext(mn);return(e==null?void 0:e.direction)??"ltr"}function Eo(e){const{render:t,className:n,style:r,refs:o=Je,props:s=Je,state:i=ue,stateAttributesMapping:c,highlightedIndex:a,onHighlightedIndexChange:l,orientation:u,grid:g,loopFocus:A,onLoop:T,enableHomeAndEndKeys:p,onMapChange:m,stopEventPropagation:y=!0,rootRef:E,disabledIndices:w,modifierKeys:I,highlightItemOnHover:f=!1,tag:N="div",...z}=e,D=ko(),{props:x,highlightedIndex:O,onHighlightedIndexChange:b,elementsRef:R,onMapChange:C,relayKeyboardEvent:B}=yo({grid:g,loopFocus:A,onLoop:T,orientation:u,highlightedIndex:a,onHighlightedIndexChange:l,rootRef:E,stopEventPropagation:y,enableHomeAndEndKeys:p,direction:D,disabledIndices:w,modifierKeys:I}),F=De(N,e,{state:i,ref:o,props:[x,...s,z],stateAttributesMapping:c}),q=d.useMemo(()=>({highlightedIndex:O,onHighlightedIndexChange:b,highlightItemOnHover:f,relayKeyboardEvent:B}),[O,b,f,B]);return W.jsx(ut.Provider,{value:q,children:W.jsx(tn,{elementsRef:R,onMapChange:V=>{m==null||m(V),C(V)},children:F})})}const gn=d.forwardRef(function(t,n){const{activateOnFocus:r=!1,className:o,loopFocus:s=!0,render:i,style:c,...a}=t,{onValueChange:l,orientation:u,value:g,setTabMap:A,tabActivationDirection:T}=at(),[p,m]=d.useState(0),[y,E]=d.useState(null),w=d.useRef(new Set),I=d.useRef(new Set),f=d.useRef(null);H(()=>{if(typeof ResizeObserver>"u")return;const R=new ResizeObserver(()=>{w.current.forEach(C=>{C()})});return f.current=R,y&&R.observe(y),I.current.forEach(C=>{R.observe(C)}),()=>{R.disconnect(),f.current=null}},[y]);const N=K(R=>(w.current.add(R),()=>{w.current.delete(R)})),z=K(R=>{var C;return I.current.add(R),(C=f.current)==null||C.observe(R),()=>{var B;I.current.delete(R),(B=f.current)==null||B.unobserve(R)}}),D=K((R,C)=>{R!==g&&l(R,C)}),x={orientation:u,tabActivationDirection:T},O={"aria-orientation":u==="vertical"?"vertical":void 0,role:"tablist"},b=d.useMemo(()=>({activateOnFocus:r,highlightedTabIndex:p,registerIndicatorUpdateListener:N,registerTabResizeObserverElement:z,onTabActivation:D,setHighlightedTabIndex:m,tabsListElement:y}),[r,p,N,z,D,m,y]);return W.jsx(dt.Provider,{value:b,children:W.jsx(Eo,{render:i,className:o,style:c,state:x,refs:[n,E],props:[O,a],stateAttributesMapping:Ve,highlightedIndex:p,enableHomeAndEndKeys:!0,loopFocus:s,orientation:u,onHighlightedIndexChange:m,onMapChange:A,disabledIndices:Je})})});process.env.NODE_ENV!=="production"&&(gn.displayName="TabsList");const Pt=e=>typeof e=="boolean"?`${e}`:e===0?"0":e,Ot=zt,Ro=(e,t)=>n=>{var r;if((t==null?void 0:t.variants)==null)return Ot(e,n==null?void 0:n.class,n==null?void 0:n.className);const{variants:o,defaultVariants:s}=t,i=Object.keys(o).map(l=>{const u=n==null?void 0:n[l],g=s==null?void 0:s[l];if(u===null)return null;const A=Pt(u)||Pt(g);return o[l][A]}),c=n&&Object.entries(n).reduce((l,u)=>{let[g,A]=u;return A===void 0||(l[g]=A),l},{}),a=t==null||(r=t.compoundVariants)===null||r===void 0?void 0:r.reduce((l,u)=>{let{class:g,className:A,...T}=u;return Object.entries(T).every(p=>{let[m,y]=p;return Array.isArray(y)?y.includes({...s,...c}[m]):{...s,...c}[m]===y})?[...l,g,A]:l},[]);return Ot(e,i,a,n==null?void 0:n.class,n==null?void 0:n.className)};function Io({className:e,orientation:t="horizontal",...n}){return W.jsx(nn,{orientation:t,"data-slot":"tabs",className:Y("group/tabs flex h-full min-h-0 flex-col gap-2",e),...n})}const To=Ro("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",{variants:{variant:{default:"bg-muted",line:"gap-1 bg-transparent"}},defaultVariants:{variant:"default"}});function Co({className:e,variant:t="default",...n}){return W.jsx(gn,{"data-slot":"tabs-list","data-variant":t,className:Y(To({variant:t}),e),...n})}function No({className:e,style:t,activeStyle:n,...r}){return W.jsx(cn,{"data-slot":"tabs-trigger",className:Y("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","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","data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground","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",e),style:n??t,...r})}function So({className:e,...t}){return W.jsx(un,{"data-slot":"tabs-content",className:Y("flex-1 text-sm outline-none",e),...t})}const Mo=({tabs:e,defaultValue:t,value:n,onValueChange:r,className:o,showTabNumbers:s=!0,variant:i="default"})=>{var m;const c=n||t||((m=e[0])==null?void 0:m.id),[a,l]=Se.useState(c),u=n??a,g=y=>{n||l(y),r==null||r(y)},A={default:Y("group relative px-6 py-3 text-sm font-medium transition-all duration-300 ease-out","text-muted-foreground hover:text-foreground","data-[state=active]:text-foreground data-[state=active]:font-semibold","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","after:scale-x-0 after:transition-transform after:duration-300 data-[state=active]:after:scale-x-100","disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-muted-foreground","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"),gradient:Y("group relative px-6 py-3 text-sm font-medium transition-all duration-300 ease-out","text-muted-foreground/80 hover:text-muted-foreground","data-[state=active]:text-white data-[state=active]:font-semibold","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","data-[state=active]:shadow-lg data-[state=active]:shadow-purple-500/30","rounded-lg mx-1 data-[state=active]:rounded-lg","disabled:opacity-50 disabled:cursor-not-allowed","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"),minimal:Y("group relative px-4 py-2 text-sm font-medium transition-all duration-300","text-muted-foreground hover:text-foreground hover:bg-secondary/50 rounded-md","data-[state=active]:text-foreground data-[state=active]:bg-secondary","data-[state=active]:font-semibold","disabled:opacity-50 disabled:cursor-not-allowed","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"),outline:Y("group relative px-4 py-3 text-sm font-semibold transition-colors duration-200 ease-out","text-foreground/70 hover:text-foreground","disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-foreground/70","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500")},T={default:Y("bg-blue-100/60 text-blue-600","group-data-[state=active]:bg-blue-500 group-data-[state=active]:text-white"),gradient:Y("text-white/60","group-data-[state=active]:bg-white/20 group-data-[state=active]:text-white"),minimal:"bg-secondary/60 text-secondary-foreground",outline:Y("border border-border text-muted-foreground bg-transparent rounded-[6px]","group-data-[state=active]:border-[#059669] group-data-[state=active]:text-[#059669]")},p={borderTopWidth:3,borderRightWidth:1,borderBottomWidth:0,borderLeftWidth:1,borderStyle:"solid",borderColor:"#059669",color:"#059669",fontWeight:700};return W.jsxs(Io,{value:u,onValueChange:g,defaultValue:t,className:Y("w-full h-full min-h-0 flex flex-col",o),children:[W.jsx(Co,{className:Y("inline-flex gap-1 rounded-none bg-transparent h-auto p-0 w-full border-b shrink-0",i==="default"&&"border-b border-border",i==="gradient"&&"border-b border-border/30 gap-2 bg-background/50 px-2 py-2 rounded-lg",i==="minimal"&&"border-b border-border/50 gap-0",i==="outline"&&"border-b border-border/50 gap-0 justify-start"),children:e.map((y,E)=>W.jsx(No,{value:y.id,disabled:y.disabled,className:Y(A[i],i==="outline"&&"flex-none"),activeStyle:i==="outline"&&u===y.id?p:void 0,children:W.jsxs("div",{className:"flex items-center gap-2",children:[s&&W.jsx("div",{className:Y("inline-flex items-center justify-center w-6 h-6 text-xs font-medium leading-1.5 transition-all duration-200",i!=="outline"&&"rounded-full",T[i]),children:E+1}),y.icon&&W.jsx("span",{className:"inline-flex",children:y.icon}),W.jsx("div",{children:y.label})]})},y.id))}),W.jsx("div",{className:"relative flex-1 min-h-0 overflow-hidden",children:e.map(y=>W.jsx(So,{value:y.id,className:Y("mt-0 h-full min-h-0 overflow-y-auto animate-in fade-in-50 duration-300 data-[state=inactive]:hidden"),children:y.content},y.id))})]})};exports.CustomTabs=Mo;exports.cn=Y;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),B=require("react"),D=({tabs:o,defaultValue:p,value:a,onValueChange:i,className:c="",tabListClassName:x="",tabButtonClassName:b="",contentClassName:g="",showTabNumbers:h=!0,showContent:f=!0,animated:u=!0})=>{var l;const r=a!==void 0,[m,y]=B.useState(p||((l=o[0])==null?void 0:l.id)||""),n=r?a:m,w=e=>{r||y(e),i==null||i(e)},d=o.find(e=>e.id===n),F={display:"flex",alignItems:"flex-end",borderBottom:"1px solid #059669",position:"sticky",top:0,zIndex:100,flexShrink:0},v={display:"flex",alignItems:"center",fontFamily:"inherit",background:"transparent",cursor:"pointer",outline:"none",transition:"all .2s ease",position:"relative"},T={background:"#E8F7F1",color:"#059669",fontWeight:700,borderTop:"3px solid #059669",borderLeft:"1px solid #059669",borderRight:"1px solid #059669",borderBottom:"1px solid #E8F7F1",borderTopLeftRadius:8,borderTopRightRadius:8,marginBottom:-1,zIndex:2},k={background:"transparent",color:"#2D3748",borderTop:"3px solid transparent",borderLeft:"1px solid transparent",borderRight:"1px solid transparent",borderBottom:"1px solid transparent",borderTopLeftRadius:8,borderTopRightRadius:8},R={background:"#FFFFFF",color:"#059669",fontWeight:700,border:"1px solid #059669"},S={background:"#FFFFFF",color:"#374151",fontWeight:"500",border:"1px solid #D1D5DB"},j={background:"#FFFFFF",border:"1px solid #D9E1E7",borderTop:"none",borderBottomLeftRadius:12,borderBottomRightRadius:12,boxShadow:"0 2px 6px rgba(0,0,0,.05)",transition:u?"opacity .2s ease":void 0,opacity:1,flex:1,overflowY:"auto",minHeight:0};return t.jsxs("div",{className:c,style:{display:"flex",flexDirection:"column",width:"100%",height:"100%",minHeight:0,overflow:"hidden"},children:[t.jsx("style",{children:`
|
|
2
|
+
.ctabs-list {
|
|
3
|
+
padding: 0 10px;
|
|
4
|
+
gap: 0px;
|
|
5
|
+
overflow-x: visible;
|
|
6
|
+
-webkit-overflow-scrolling: touch;
|
|
7
|
+
scrollbar-width: none;
|
|
8
|
+
}
|
|
9
|
+
.ctabs-list::-webkit-scrollbar { display: none; }
|
|
10
|
+
|
|
11
|
+
.ctabs-btn {
|
|
12
|
+
padding: 4px 20px;
|
|
13
|
+
font-size: 14px;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
gap: 8px;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
flex-shrink: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ctabs-badge {
|
|
21
|
+
width: 20px;
|
|
22
|
+
height: 20px;
|
|
23
|
+
border-radius: 4px;
|
|
24
|
+
font-size: 12px;
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
flex-shrink: 0;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.ctabs-label {
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Tablet — unchanged, still scrolls horizontally if needed */
|
|
37
|
+
@media (max-width: 768px) {
|
|
38
|
+
.ctabs-list {
|
|
39
|
+
padding: 0 6px;
|
|
40
|
+
gap: 2px;
|
|
41
|
+
overflow-x: auto;
|
|
42
|
+
}
|
|
43
|
+
.ctabs-btn {
|
|
44
|
+
padding: 7px 14px;
|
|
45
|
+
font-size: 13px;
|
|
46
|
+
gap: 6px;
|
|
47
|
+
}
|
|
48
|
+
.ctabs-badge {
|
|
49
|
+
width: 18px;
|
|
50
|
+
height: 18px;
|
|
51
|
+
font-size: 11px;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Phones only — wrap instead of scroll */
|
|
56
|
+
@media (max-width: 480px) {
|
|
57
|
+
.ctabs-list {
|
|
58
|
+
padding: 0 4px;
|
|
59
|
+
gap: 0px;
|
|
60
|
+
overflow-x: visible; /* undo the 768px scroll behavior */
|
|
61
|
+
flex-wrap: wrap;
|
|
62
|
+
row-gap: 4px;
|
|
63
|
+
}
|
|
64
|
+
.ctabs-btn {
|
|
65
|
+
padding: 4px 10px;
|
|
66
|
+
font-size: 11.5px;
|
|
67
|
+
gap: 4px;
|
|
68
|
+
}
|
|
69
|
+
.ctabs-badge {
|
|
70
|
+
width: 16px;
|
|
71
|
+
height: 16px;
|
|
72
|
+
font-size: 10px;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
`}),t.jsx("div",{style:F,className:`ctabs-list ${x}`,children:o.map((e,z)=>{const s=n===e.id;return t.jsxs("button",{role:"tab","aria-selected":s,disabled:e.disabled,onClick:()=>!e.disabled&&w(e.id),style:{...v,...s?T:k,opacity:e.disabled?.5:1,cursor:e.disabled?"not-allowed":"pointer"},className:`ctabs-btn ${b}`,children:[h&&t.jsx("span",{className:"ctabs-badge",style:s?R:S,children:z+1}),e.icon,t.jsx("span",{className:"ctabs-label",children:e.label})]},e.id)})}),f&&d&&t.jsx("div",{style:j,className:g,children:d.content})]})};exports.CustomTabs=D;
|