@tribepad/themis 1.0.0 → 1.0.1
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/dist/elements/Accordion/index.js +325 -66
- package/dist/elements/Accordion/index.js.map +1 -1
- package/dist/elements/Accordion/index.mjs +317 -3
- package/dist/elements/Accordion/index.mjs.map +1 -1
- package/dist/elements/Avatar/index.js +461 -45
- package/dist/elements/Avatar/index.js.map +1 -1
- package/dist/elements/Avatar/index.mjs +456 -3
- package/dist/elements/Avatar/index.mjs.map +1 -1
- package/dist/elements/Badge/index.js +238 -36
- package/dist/elements/Badge/index.js.map +1 -1
- package/dist/elements/Badge/index.mjs +234 -4
- package/dist/elements/Badge/index.mjs.map +1 -1
- package/dist/elements/Breadcrumbs/index.js +808 -39
- package/dist/elements/Breadcrumbs/index.js.map +1 -1
- package/dist/elements/Breadcrumbs/index.mjs +810 -7
- package/dist/elements/Breadcrumbs/index.mjs.map +1 -1
- package/dist/elements/Button/index.js +282 -19
- package/dist/elements/Button/index.js.map +1 -1
- package/dist/elements/Button/index.mjs +283 -4
- package/dist/elements/Button/index.mjs.map +1 -1
- package/dist/elements/ButtonGroup/index.js +229 -56
- package/dist/elements/ButtonGroup/index.js.map +1 -1
- package/dist/elements/ButtonGroup/index.mjs +222 -3
- package/dist/elements/ButtonGroup/index.mjs.map +1 -1
- package/dist/elements/Card/Card.d.ts.map +1 -1
- package/dist/elements/Card/index.js +563 -67
- package/dist/elements/Card/index.js.map +1 -1
- package/dist/elements/Card/index.mjs +560 -6
- package/dist/elements/Card/index.mjs.map +1 -1
- package/dist/elements/Carousel/index.js +782 -14
- package/dist/elements/Carousel/index.js.map +1 -1
- package/dist/elements/Carousel/index.mjs +786 -8
- package/dist/elements/Carousel/index.mjs.map +1 -1
- package/dist/elements/Chart/index.js +1833 -36
- package/dist/elements/Chart/index.js.map +1 -1
- package/dist/elements/Chart/index.mjs +1832 -4
- package/dist/elements/Chart/index.mjs.map +1 -1
- package/dist/elements/Checkbox/index.js +310 -39
- package/dist/elements/Checkbox/index.js.map +1 -1
- package/dist/elements/Checkbox/index.mjs +306 -4
- package/dist/elements/Checkbox/index.mjs.map +1 -1
- package/dist/elements/CheckboxGroup/index.js +445 -59
- package/dist/elements/CheckboxGroup/index.js.map +1 -1
- package/dist/elements/CheckboxGroup/index.mjs +439 -4
- package/dist/elements/CheckboxGroup/index.mjs.map +1 -1
- package/dist/elements/DatePicker/index.js +871 -89
- package/dist/elements/DatePicker/index.js.map +1 -1
- package/dist/elements/DatePicker/index.mjs +853 -4
- package/dist/elements/DatePicker/index.mjs.map +1 -1
- package/dist/elements/Dropdown/index.js +189 -35
- package/dist/elements/Dropdown/index.js.map +1 -1
- package/dist/elements/Dropdown/index.mjs +184 -2
- package/dist/elements/Dropdown/index.mjs.map +1 -1
- package/dist/elements/FileField/index.js +1532 -129
- package/dist/elements/FileField/index.js.map +1 -1
- package/dist/elements/FileField/index.mjs +1507 -7
- package/dist/elements/FileField/index.mjs.map +1 -1
- package/dist/elements/FormLayout/index.js +166 -11
- package/dist/elements/FormLayout/index.js.map +1 -1
- package/dist/elements/FormLayout/index.mjs +167 -2
- package/dist/elements/FormLayout/index.mjs.map +1 -1
- package/dist/elements/Modal/index.js +228 -46
- package/dist/elements/Modal/index.js.map +1 -1
- package/dist/elements/Modal/index.mjs +220 -1
- package/dist/elements/Modal/index.mjs.map +1 -1
- package/dist/elements/NumberField/index.js +659 -48
- package/dist/elements/NumberField/index.js.map +1 -1
- package/dist/elements/NumberField/index.mjs +654 -6
- package/dist/elements/NumberField/index.mjs.map +1 -1
- package/dist/elements/OTPInput/index.js +729 -6
- package/dist/elements/OTPInput/index.js.map +1 -1
- package/dist/elements/OTPInput/index.mjs +732 -2
- package/dist/elements/OTPInput/index.mjs.map +1 -1
- package/dist/elements/Panel/index.js +326 -27
- package/dist/elements/Panel/index.js.map +1 -1
- package/dist/elements/Panel/index.mjs +323 -2
- package/dist/elements/Panel/index.mjs.map +1 -1
- package/dist/elements/Progress/index.js +181 -22
- package/dist/elements/Progress/index.js.map +1 -1
- package/dist/elements/Progress/index.mjs +181 -3
- package/dist/elements/Progress/index.mjs.map +1 -1
- package/dist/elements/RadioGroup/index.js +358 -34
- package/dist/elements/RadioGroup/index.js.map +1 -1
- package/dist/elements/RadioGroup/index.mjs +359 -4
- package/dist/elements/RadioGroup/index.mjs.map +1 -1
- package/dist/elements/Resizable/components/ResizableHandle.d.ts +0 -8
- package/dist/elements/Resizable/components/ResizableHandle.d.ts.map +1 -1
- package/dist/elements/Resizable/components/ResizablePanel.d.ts +0 -8
- package/dist/elements/Resizable/components/ResizablePanel.d.ts.map +1 -1
- package/dist/elements/Resizable/components/ResizablePanelGroup.d.ts +0 -8
- package/dist/elements/Resizable/components/ResizablePanelGroup.d.ts.map +1 -1
- package/dist/elements/Resizable/components/ResizablePopover.d.ts +0 -8
- package/dist/elements/Resizable/components/ResizablePopover.d.ts.map +1 -1
- package/dist/elements/Resizable/index.js +1568 -51
- package/dist/elements/Resizable/index.js.map +1 -1
- package/dist/elements/Resizable/index.mjs +1566 -6
- package/dist/elements/Resizable/index.mjs.map +1 -1
- package/dist/elements/Select/index.js +580 -22
- package/dist/elements/Select/index.js.map +1 -1
- package/dist/elements/Select/index.mjs +582 -2
- package/dist/elements/Select/index.mjs.map +1 -1
- package/dist/elements/Skeleton/index.js +77 -15
- package/dist/elements/Skeleton/index.js.map +1 -1
- package/dist/elements/Skeleton/index.mjs +78 -3
- package/dist/elements/Skeleton/index.mjs.map +1 -1
- package/dist/elements/Switch/index.js +153 -21
- package/dist/elements/Switch/index.js.map +1 -1
- package/dist/elements/Switch/index.mjs +149 -5
- package/dist/elements/Switch/index.mjs.map +1 -1
- package/dist/elements/Table/index.js +589 -68
- package/dist/elements/Table/index.js.map +1 -1
- package/dist/elements/Table/index.mjs +578 -5
- package/dist/elements/Table/index.mjs.map +1 -1
- package/dist/elements/Tabs/index.js +328 -63
- package/dist/elements/Tabs/index.js.map +1 -1
- package/dist/elements/Tabs/index.mjs +320 -3
- package/dist/elements/Tabs/index.mjs.map +1 -1
- package/dist/elements/TextField/index.js +695 -51
- package/dist/elements/TextField/index.js.map +1 -1
- package/dist/elements/TextField/index.mjs +684 -7
- package/dist/elements/TextField/index.mjs.map +1 -1
- package/dist/elements/TimeField/index.js +244 -33
- package/dist/elements/TimeField/index.js.map +1 -1
- package/dist/elements/TimeField/index.mjs +238 -2
- package/dist/elements/TimeField/index.mjs.map +1 -1
- package/dist/elements/Toast/index.js +727 -48
- package/dist/elements/Toast/index.js.map +1 -1
- package/dist/elements/Toast/index.mjs +724 -5
- package/dist/elements/Toast/index.mjs.map +1 -1
- package/dist/elements/Tooltip/index.js +315 -49
- package/dist/elements/Tooltip/index.js.map +1 -1
- package/dist/elements/Tooltip/index.mjs +310 -4
- package/dist/elements/Tooltip/index.mjs.map +1 -1
- package/dist/elements/index.js +12417 -799
- package/dist/elements/index.js.map +1 -1
- package/dist/elements/index.mjs +12233 -40
- package/dist/elements/index.mjs.map +1 -1
- package/dist/index.js +12452 -825
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +12262 -42
- package/dist/index.mjs.map +1 -1
- package/dist/schemas/index.js +47 -21
- package/dist/schemas/index.js.map +1 -1
- package/dist/schemas/index.mjs +47 -2
- package/dist/schemas/index.mjs.map +1 -1
- package/dist/styles/index.js +161 -147
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/index.mjs +128 -2
- package/dist/styles/index.mjs.map +1 -1
- package/dist/utils/index.js +7 -7
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/index.mjs +9 -2
- package/dist/utils/index.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/Carousel-NTZX5TOW.js +0 -16
- package/dist/Carousel-NTZX5TOW.js.map +0 -1
- package/dist/Carousel-YH3DOQJU.mjs +0 -7
- package/dist/Carousel-YH3DOQJU.mjs.map +0 -1
- package/dist/chunk-2HIUTHMU.mjs +0 -234
- package/dist/chunk-2HIUTHMU.mjs.map +0 -1
- package/dist/chunk-34GTFTDO.js +0 -431
- package/dist/chunk-34GTFTDO.js.map +0 -1
- package/dist/chunk-3H7ASYR7.js +0 -250
- package/dist/chunk-3H7ASYR7.js.map +0 -1
- package/dist/chunk-3IEN7JOP.js +0 -316
- package/dist/chunk-3IEN7JOP.js.map +0 -1
- package/dist/chunk-3JHN4GAL.js +0 -326
- package/dist/chunk-3JHN4GAL.js.map +0 -1
- package/dist/chunk-3MJPASQU.js +0 -232
- package/dist/chunk-3MJPASQU.js.map +0 -1
- package/dist/chunk-3XD2JUL3.js +0 -572
- package/dist/chunk-3XD2JUL3.js.map +0 -1
- package/dist/chunk-3YOY2VJ6.js +0 -189
- package/dist/chunk-3YOY2VJ6.js.map +0 -1
- package/dist/chunk-4DU5JSXB.js +0 -408
- package/dist/chunk-4DU5JSXB.js.map +0 -1
- package/dist/chunk-4E4E2GSS.js +0 -352
- package/dist/chunk-4E4E2GSS.js.map +0 -1
- package/dist/chunk-4NHAP4AN.mjs +0 -3
- package/dist/chunk-4NHAP4AN.mjs.map +0 -1
- package/dist/chunk-4S33J5NY.mjs +0 -415
- package/dist/chunk-4S33J5NY.mjs.map +0 -1
- package/dist/chunk-5SMGRT3G.mjs +0 -354
- package/dist/chunk-5SMGRT3G.mjs.map +0 -1
- package/dist/chunk-5SVLJN2C.mjs +0 -22
- package/dist/chunk-5SVLJN2C.mjs.map +0 -1
- package/dist/chunk-66WTU4EB.mjs +0 -299
- package/dist/chunk-66WTU4EB.mjs.map +0 -1
- package/dist/chunk-6S25NMOT.mjs +0 -335
- package/dist/chunk-6S25NMOT.mjs.map +0 -1
- package/dist/chunk-6SP7UB3D.js +0 -4
- package/dist/chunk-6SP7UB3D.js.map +0 -1
- package/dist/chunk-6TYWWQHM.mjs +0 -565
- package/dist/chunk-6TYWWQHM.mjs.map +0 -1
- package/dist/chunk-A3YUJA6W.mjs +0 -384
- package/dist/chunk-A3YUJA6W.mjs.map +0 -1
- package/dist/chunk-A6KEDVUR.js +0 -61
- package/dist/chunk-A6KEDVUR.js.map +0 -1
- package/dist/chunk-A77RUEWL.js +0 -730
- package/dist/chunk-A77RUEWL.js.map +0 -1
- package/dist/chunk-AA4IKMPE.mjs +0 -3
- package/dist/chunk-AA4IKMPE.mjs.map +0 -1
- package/dist/chunk-AKIA6GW6.mjs +0 -163
- package/dist/chunk-AKIA6GW6.mjs.map +0 -1
- package/dist/chunk-AL6P275L.mjs +0 -435
- package/dist/chunk-AL6P275L.mjs.map +0 -1
- package/dist/chunk-AZ3RJYTB.js +0 -37
- package/dist/chunk-AZ3RJYTB.js.map +0 -1
- package/dist/chunk-B5Q4UPL6.js +0 -32
- package/dist/chunk-B5Q4UPL6.js.map +0 -1
- package/dist/chunk-B6DHPMDP.mjs +0 -335
- package/dist/chunk-B6DHPMDP.mjs.map +0 -1
- package/dist/chunk-BDXKKMBZ.mjs +0 -184
- package/dist/chunk-BDXKKMBZ.mjs.map +0 -1
- package/dist/chunk-BL6E2DLZ.mjs +0 -52
- package/dist/chunk-BL6E2DLZ.mjs.map +0 -1
- package/dist/chunk-CGFDS4XS.mjs +0 -121
- package/dist/chunk-CGFDS4XS.mjs.map +0 -1
- package/dist/chunk-CJIW5TKI.js +0 -139
- package/dist/chunk-CJIW5TKI.js.map +0 -1
- package/dist/chunk-CKNISJOQ.js +0 -314
- package/dist/chunk-CKNISJOQ.js.map +0 -1
- package/dist/chunk-D6CBOECS.mjs +0 -1757
- package/dist/chunk-D6CBOECS.mjs.map +0 -1
- package/dist/chunk-DDWEVC2S.js +0 -166
- package/dist/chunk-DDWEVC2S.js.map +0 -1
- package/dist/chunk-DZ556D2F.mjs +0 -176
- package/dist/chunk-DZ556D2F.mjs.map +0 -1
- package/dist/chunk-E2KQFV3O.mjs +0 -10
- package/dist/chunk-E2KQFV3O.mjs.map +0 -1
- package/dist/chunk-EMMLADSC.js +0 -126
- package/dist/chunk-EMMLADSC.js.map +0 -1
- package/dist/chunk-EP4WOI5D.mjs +0 -926
- package/dist/chunk-EP4WOI5D.mjs.map +0 -1
- package/dist/chunk-FJRXLJC2.mjs +0 -160
- package/dist/chunk-FJRXLJC2.mjs.map +0 -1
- package/dist/chunk-FKQI434R.js +0 -345
- package/dist/chunk-FKQI434R.js.map +0 -1
- package/dist/chunk-FPKEAJRZ.mjs +0 -100
- package/dist/chunk-FPKEAJRZ.mjs.map +0 -1
- package/dist/chunk-FWQYB22U.js +0 -183
- package/dist/chunk-FWQYB22U.js.map +0 -1
- package/dist/chunk-GD5GHTMA.js +0 -189
- package/dist/chunk-GD5GHTMA.js.map +0 -1
- package/dist/chunk-GE5XTSDZ.js +0 -447
- package/dist/chunk-GE5XTSDZ.js.map +0 -1
- package/dist/chunk-GVE47ZAX.mjs +0 -32
- package/dist/chunk-GVE47ZAX.mjs.map +0 -1
- package/dist/chunk-HK46BT5U.mjs +0 -18
- package/dist/chunk-HK46BT5U.mjs.map +0 -1
- package/dist/chunk-HQVRMR6N.js +0 -365
- package/dist/chunk-HQVRMR6N.js.map +0 -1
- package/dist/chunk-HSGBJPJO.mjs +0 -398
- package/dist/chunk-HSGBJPJO.mjs.map +0 -1
- package/dist/chunk-I3AUTOMZ.mjs +0 -125
- package/dist/chunk-I3AUTOMZ.mjs.map +0 -1
- package/dist/chunk-IEI5LD5C.mjs +0 -1161
- package/dist/chunk-IEI5LD5C.mjs.map +0 -1
- package/dist/chunk-IIPTC2X7.mjs +0 -118
- package/dist/chunk-IIPTC2X7.mjs.map +0 -1
- package/dist/chunk-J7TLHF2Q.js +0 -4
- package/dist/chunk-J7TLHF2Q.js.map +0 -1
- package/dist/chunk-JJOWXFXQ.mjs +0 -765
- package/dist/chunk-JJOWXFXQ.mjs.map +0 -1
- package/dist/chunk-JPTSS2OA.mjs +0 -3
- package/dist/chunk-JPTSS2OA.mjs.map +0 -1
- package/dist/chunk-KFXXRLTP.js +0 -396
- package/dist/chunk-KFXXRLTP.js.map +0 -1
- package/dist/chunk-KPRRBSG6.mjs +0 -272
- package/dist/chunk-KPRRBSG6.mjs.map +0 -1
- package/dist/chunk-NFSBGRDB.mjs +0 -57
- package/dist/chunk-NFSBGRDB.mjs.map +0 -1
- package/dist/chunk-NGJVCFTM.js +0 -219
- package/dist/chunk-NGJVCFTM.js.map +0 -1
- package/dist/chunk-NSQ6MZJ6.mjs +0 -728
- package/dist/chunk-NSQ6MZJ6.mjs.map +0 -1
- package/dist/chunk-NYQYHT76.mjs +0 -296
- package/dist/chunk-NYQYHT76.mjs.map +0 -1
- package/dist/chunk-OLJJGI5B.js +0 -1193
- package/dist/chunk-OLJJGI5B.js.map +0 -1
- package/dist/chunk-Q3572X2J.js +0 -292
- package/dist/chunk-Q3572X2J.js.map +0 -1
- package/dist/chunk-QH7N7D4I.mjs +0 -210
- package/dist/chunk-QH7N7D4I.mjs.map +0 -1
- package/dist/chunk-R7XUIV25.js +0 -466
- package/dist/chunk-R7XUIV25.js.map +0 -1
- package/dist/chunk-RFFO4KPM.js +0 -135
- package/dist/chunk-RFFO4KPM.js.map +0 -1
- package/dist/chunk-RFX7QKA7.mjs +0 -180
- package/dist/chunk-RFX7QKA7.mjs.map +0 -1
- package/dist/chunk-SN5LFAP3.js +0 -940
- package/dist/chunk-SN5LFAP3.js.map +0 -1
- package/dist/chunk-T4COXKQ3.js +0 -24
- package/dist/chunk-T4COXKQ3.js.map +0 -1
- package/dist/chunk-TS54QM27.js +0 -125
- package/dist/chunk-TS54QM27.js.map +0 -1
- package/dist/chunk-UE2S4PCX.mjs +0 -220
- package/dist/chunk-UE2S4PCX.mjs.map +0 -1
- package/dist/chunk-UTW3QX2A.mjs +0 -282
- package/dist/chunk-UTW3QX2A.mjs.map +0 -1
- package/dist/chunk-V74LGMAE.js +0 -1767
- package/dist/chunk-V74LGMAE.js.map +0 -1
- package/dist/chunk-VIREG536.js +0 -12
- package/dist/chunk-VIREG536.js.map +0 -1
- package/dist/chunk-VY7M7346.js +0 -4
- package/dist/chunk-VY7M7346.js.map +0 -1
- package/dist/chunk-W3TJOO7H.mjs +0 -319
- package/dist/chunk-W3TJOO7H.mjs.map +0 -1
- package/dist/chunk-WIUOB36M.js +0 -54
- package/dist/chunk-WIUOB36M.js.map +0 -1
- package/dist/chunk-WJGLM4CY.js +0 -291
- package/dist/chunk-WJGLM4CY.js.map +0 -1
- package/dist/chunk-WNURH5OO.mjs +0 -453
- package/dist/chunk-WNURH5OO.mjs.map +0 -1
- package/dist/chunk-X25TNRSD.mjs +0 -364
- package/dist/chunk-X25TNRSD.mjs.map +0 -1
- package/dist/chunk-Y3GT7ETK.js +0 -108
- package/dist/chunk-Y3GT7ETK.js.map +0 -1
- package/dist/chunk-Z4FRNOF6.mjs +0 -115
- package/dist/chunk-Z4FRNOF6.mjs.map +0 -1
- package/dist/chunk-ZMYLD3BN.js +0 -166
- package/dist/chunk-ZMYLD3BN.js.map +0 -1
- package/dist/chunk-ZP2KV6EX.js +0 -815
- package/dist/chunk-ZP2KV6EX.js.map +0 -1
- package/dist/chunk-ZVKXFELU.js +0 -366
- package/dist/chunk-ZVKXFELU.js.map +0 -1
|
@@ -1,4 +1,325 @@
|
|
|
1
|
-
|
|
2
|
-
import '
|
|
1
|
+
"use client";
|
|
2
|
+
import { createContext, useState, useRef, useId, useCallback, useEffect, isValidElement, cloneElement, useContext } from 'react';
|
|
3
|
+
import { ModalOverlay, Modal, Dialog, Button } from 'react-aria-components';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { X } from 'lucide-react';
|
|
6
|
+
import { clsx } from 'clsx';
|
|
7
|
+
import { twMerge } from 'tailwind-merge';
|
|
8
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
// src/elements/Panel/Panel.tsx
|
|
11
|
+
function cn(...inputs) {
|
|
12
|
+
return twMerge(clsx(inputs));
|
|
13
|
+
}
|
|
14
|
+
var panelContentVariants = cva(
|
|
15
|
+
[
|
|
16
|
+
"flex flex-col h-full",
|
|
17
|
+
"bg-[var(--content-background)] text-[var(--content-foreground)]",
|
|
18
|
+
"shadow-lg"
|
|
19
|
+
],
|
|
20
|
+
{
|
|
21
|
+
variants: {
|
|
22
|
+
position: {
|
|
23
|
+
right: "border-l border-[var(--border)]",
|
|
24
|
+
left: "border-r border-[var(--border)]"
|
|
25
|
+
},
|
|
26
|
+
width: {
|
|
27
|
+
sm: "w-[300px]",
|
|
28
|
+
md: "w-[400px]",
|
|
29
|
+
lg: "w-[500px]",
|
|
30
|
+
xl: "w-[600px]",
|
|
31
|
+
auto: "w-auto"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: {
|
|
35
|
+
position: "right",
|
|
36
|
+
width: "md"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
var panelHeaderVariants = cva([
|
|
41
|
+
"flex items-start justify-between",
|
|
42
|
+
"px-4 py-4",
|
|
43
|
+
"border-b border-[var(--border)]"
|
|
44
|
+
]);
|
|
45
|
+
var panelBodyVariants = cva(["flex-1 overflow-y-auto", "px-4 py-4"]);
|
|
46
|
+
var panelFooterVariants = cva([
|
|
47
|
+
"flex items-center justify-end gap-2",
|
|
48
|
+
"px-4 py-4",
|
|
49
|
+
"border-t border-[var(--border)]"
|
|
50
|
+
]);
|
|
51
|
+
var panelCloseButtonVariants = cva([
|
|
52
|
+
"inline-flex items-center justify-center rounded-md",
|
|
53
|
+
"min-h-[44px] min-w-[44px]",
|
|
54
|
+
"text-[var(--menu-muted)]",
|
|
55
|
+
"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
|
|
56
|
+
"focus-visible:outline-none focus-visible:ring-2",
|
|
57
|
+
"focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
|
|
58
|
+
// No transition - instant state changes (v1)
|
|
59
|
+
]);
|
|
60
|
+
var PanelContext = createContext(null);
|
|
61
|
+
function usePanelContext() {
|
|
62
|
+
const context = useContext(PanelContext);
|
|
63
|
+
if (!context) {
|
|
64
|
+
throw new Error("Panel compound components must be used within a Panel");
|
|
65
|
+
}
|
|
66
|
+
return context;
|
|
67
|
+
}
|
|
68
|
+
function useMediaQuery(query) {
|
|
69
|
+
const [matches, setMatches] = useState(() => {
|
|
70
|
+
if (typeof window === "undefined") return false;
|
|
71
|
+
return window.matchMedia(query).matches;
|
|
72
|
+
});
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
if (typeof window === "undefined") return;
|
|
75
|
+
const media = window.matchMedia(query);
|
|
76
|
+
if (media.matches !== matches) {
|
|
77
|
+
setMatches(media.matches);
|
|
78
|
+
}
|
|
79
|
+
const listener = (e) => setMatches(e.matches);
|
|
80
|
+
media.addEventListener("change", listener);
|
|
81
|
+
return () => media.removeEventListener("change", listener);
|
|
82
|
+
}, [query, matches]);
|
|
83
|
+
return matches;
|
|
84
|
+
}
|
|
85
|
+
function PanelRoot({
|
|
86
|
+
children,
|
|
87
|
+
isOpen: controlledIsOpen,
|
|
88
|
+
defaultOpen = false,
|
|
89
|
+
onOpenChange,
|
|
90
|
+
onClose,
|
|
91
|
+
position = "right",
|
|
92
|
+
width = "md",
|
|
93
|
+
mobileBreakpoint = 768
|
|
94
|
+
}) {
|
|
95
|
+
const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);
|
|
96
|
+
const isControlled = controlledIsOpen !== void 0;
|
|
97
|
+
const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
|
|
98
|
+
const triggerRef = useRef(null);
|
|
99
|
+
const uniqueId = useId();
|
|
100
|
+
const panelId = `panel-${uniqueId}`;
|
|
101
|
+
const titleId = `panel-title-${uniqueId}`;
|
|
102
|
+
const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);
|
|
103
|
+
const setIsOpen = useCallback(
|
|
104
|
+
(open) => {
|
|
105
|
+
if (!isControlled) {
|
|
106
|
+
setUncontrolledIsOpen(open);
|
|
107
|
+
}
|
|
108
|
+
onOpenChange?.(open);
|
|
109
|
+
},
|
|
110
|
+
[isControlled, onOpenChange]
|
|
111
|
+
);
|
|
112
|
+
const handleClose = useCallback(() => {
|
|
113
|
+
setIsOpen(false);
|
|
114
|
+
onClose?.();
|
|
115
|
+
if (triggerRef.current) {
|
|
116
|
+
window.requestAnimationFrame(() => {
|
|
117
|
+
triggerRef.current?.focus();
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
}, [setIsOpen, onClose]);
|
|
121
|
+
useEffect(() => {
|
|
122
|
+
if (!isOpen || isMobile) return;
|
|
123
|
+
const handleKeyDown = (e) => {
|
|
124
|
+
if (e.key === "Escape") {
|
|
125
|
+
e.preventDefault();
|
|
126
|
+
handleClose();
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
130
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
131
|
+
}, [isOpen, isMobile, handleClose]);
|
|
132
|
+
const contextValue = {
|
|
133
|
+
isOpen,
|
|
134
|
+
setIsOpen,
|
|
135
|
+
panelId,
|
|
136
|
+
titleId,
|
|
137
|
+
triggerRef,
|
|
138
|
+
position,
|
|
139
|
+
width,
|
|
140
|
+
mobileBreakpoint,
|
|
141
|
+
isMobile,
|
|
142
|
+
handleClose
|
|
143
|
+
};
|
|
144
|
+
return /* @__PURE__ */ jsx(PanelContext.Provider, { value: contextValue, children });
|
|
145
|
+
}
|
|
146
|
+
PanelRoot.displayName = "Panel";
|
|
147
|
+
function PanelTrigger({
|
|
148
|
+
children,
|
|
149
|
+
asChild = true
|
|
150
|
+
}) {
|
|
151
|
+
const { isOpen, setIsOpen, panelId, triggerRef } = usePanelContext();
|
|
152
|
+
const setRef = useCallback(
|
|
153
|
+
(element) => {
|
|
154
|
+
triggerRef.current = element;
|
|
155
|
+
},
|
|
156
|
+
[triggerRef]
|
|
157
|
+
);
|
|
158
|
+
const handlePress = useCallback(() => {
|
|
159
|
+
setIsOpen(!isOpen);
|
|
160
|
+
}, [setIsOpen, isOpen]);
|
|
161
|
+
if (asChild && isValidElement(children)) {
|
|
162
|
+
const childProps = children.props;
|
|
163
|
+
return cloneElement(children, {
|
|
164
|
+
ref: setRef,
|
|
165
|
+
"aria-expanded": isOpen,
|
|
166
|
+
"aria-controls": isOpen ? panelId : void 0,
|
|
167
|
+
"data-testid": "panel-trigger",
|
|
168
|
+
onPress: handlePress,
|
|
169
|
+
onClick: childProps.onClick ? () => {
|
|
170
|
+
childProps.onClick?.();
|
|
171
|
+
handlePress();
|
|
172
|
+
} : handlePress
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
return /* @__PURE__ */ jsx(
|
|
176
|
+
Button,
|
|
177
|
+
{
|
|
178
|
+
ref: setRef,
|
|
179
|
+
"aria-expanded": isOpen,
|
|
180
|
+
"aria-controls": isOpen ? panelId : void 0,
|
|
181
|
+
onPress: handlePress,
|
|
182
|
+
"data-testid": "panel-trigger",
|
|
183
|
+
children
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
PanelTrigger.displayName = "PanelTrigger";
|
|
188
|
+
function BuiltInCloseButton() {
|
|
189
|
+
const { handleClose } = usePanelContext();
|
|
190
|
+
return /* @__PURE__ */ jsx(
|
|
191
|
+
Button,
|
|
192
|
+
{
|
|
193
|
+
"aria-label": "Close panel",
|
|
194
|
+
"data-testid": "panel-close",
|
|
195
|
+
onPress: handleClose,
|
|
196
|
+
className: panelCloseButtonVariants(),
|
|
197
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
|
|
198
|
+
}
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
function PanelContent({
|
|
202
|
+
children,
|
|
203
|
+
showClose = true,
|
|
204
|
+
className
|
|
205
|
+
}) {
|
|
206
|
+
const { isOpen, isMobile, panelId, titleId, position, width, handleClose } = usePanelContext();
|
|
207
|
+
if (!isOpen) return null;
|
|
208
|
+
if (isMobile) {
|
|
209
|
+
return /* @__PURE__ */ jsx(
|
|
210
|
+
ModalOverlay,
|
|
211
|
+
{
|
|
212
|
+
isDismissable: true,
|
|
213
|
+
isOpen,
|
|
214
|
+
onOpenChange: (open) => !open && handleClose(),
|
|
215
|
+
className: "fixed inset-0 z-50 bg-black/50",
|
|
216
|
+
children: /* @__PURE__ */ jsx(Modal, { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs(
|
|
217
|
+
Dialog,
|
|
218
|
+
{
|
|
219
|
+
"aria-labelledby": titleId,
|
|
220
|
+
className: cn(
|
|
221
|
+
"w-full max-w-lg rounded-lg bg-[var(--content-background)] shadow-lg outline-none",
|
|
222
|
+
"flex max-h-[90vh] flex-col",
|
|
223
|
+
className
|
|
224
|
+
),
|
|
225
|
+
children: [
|
|
226
|
+
showClose && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(BuiltInCloseButton, {}) }),
|
|
227
|
+
children
|
|
228
|
+
]
|
|
229
|
+
}
|
|
230
|
+
) })
|
|
231
|
+
}
|
|
232
|
+
);
|
|
233
|
+
}
|
|
234
|
+
return /* @__PURE__ */ jsxs(
|
|
235
|
+
"aside",
|
|
236
|
+
{
|
|
237
|
+
id: panelId,
|
|
238
|
+
"aria-labelledby": titleId,
|
|
239
|
+
"data-testid": "panel-content",
|
|
240
|
+
className: cn(panelContentVariants({ position, width }), className),
|
|
241
|
+
children: [
|
|
242
|
+
children,
|
|
243
|
+
showClose && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(BuiltInCloseButton, {}) })
|
|
244
|
+
]
|
|
245
|
+
}
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
PanelContent.displayName = "PanelContent";
|
|
249
|
+
function PanelHeader({
|
|
250
|
+
children,
|
|
251
|
+
className
|
|
252
|
+
}) {
|
|
253
|
+
return /* @__PURE__ */ jsx("header", { className: cn(panelHeaderVariants(), className), children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children }) });
|
|
254
|
+
}
|
|
255
|
+
PanelHeader.displayName = "PanelHeader";
|
|
256
|
+
function PanelTitle({
|
|
257
|
+
children,
|
|
258
|
+
as: Tag = "h2",
|
|
259
|
+
className
|
|
260
|
+
}) {
|
|
261
|
+
const { titleId } = usePanelContext();
|
|
262
|
+
return /* @__PURE__ */ jsx(
|
|
263
|
+
Tag,
|
|
264
|
+
{
|
|
265
|
+
id: titleId,
|
|
266
|
+
"aria-live": "polite",
|
|
267
|
+
className: cn(
|
|
268
|
+
"text-lg font-semibold text-[var(--content-foreground)]",
|
|
269
|
+
className
|
|
270
|
+
),
|
|
271
|
+
children
|
|
272
|
+
}
|
|
273
|
+
);
|
|
274
|
+
}
|
|
275
|
+
PanelTitle.displayName = "PanelTitle";
|
|
276
|
+
function PanelDescription({
|
|
277
|
+
children,
|
|
278
|
+
className
|
|
279
|
+
}) {
|
|
280
|
+
return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-[var(--menu-muted)]", className), children });
|
|
281
|
+
}
|
|
282
|
+
PanelDescription.displayName = "PanelDescription";
|
|
283
|
+
function PanelBody({ children, className }) {
|
|
284
|
+
return /* @__PURE__ */ jsx("div", { className: cn(panelBodyVariants(), className), children });
|
|
285
|
+
}
|
|
286
|
+
PanelBody.displayName = "PanelBody";
|
|
287
|
+
function PanelFooter({
|
|
288
|
+
children,
|
|
289
|
+
className
|
|
290
|
+
}) {
|
|
291
|
+
return /* @__PURE__ */ jsx("footer", { className: cn(panelFooterVariants(), className), children });
|
|
292
|
+
}
|
|
293
|
+
PanelFooter.displayName = "PanelFooter";
|
|
294
|
+
function PanelClose({ children }) {
|
|
295
|
+
const { handleClose } = usePanelContext();
|
|
296
|
+
if (!isValidElement(children)) {
|
|
297
|
+
return null;
|
|
298
|
+
}
|
|
299
|
+
const childProps = children.props;
|
|
300
|
+
return cloneElement(children, {
|
|
301
|
+
onPress: () => {
|
|
302
|
+
childProps.onPress?.();
|
|
303
|
+
handleClose();
|
|
304
|
+
},
|
|
305
|
+
onClick: () => {
|
|
306
|
+
childProps.onClick?.();
|
|
307
|
+
handleClose();
|
|
308
|
+
}
|
|
309
|
+
});
|
|
310
|
+
}
|
|
311
|
+
PanelClose.displayName = "PanelClose";
|
|
312
|
+
var Panel = Object.assign(PanelRoot, {
|
|
313
|
+
Trigger: PanelTrigger,
|
|
314
|
+
Content: PanelContent,
|
|
315
|
+
Header: PanelHeader,
|
|
316
|
+
Title: PanelTitle,
|
|
317
|
+
Description: PanelDescription,
|
|
318
|
+
Body: PanelBody,
|
|
319
|
+
Footer: PanelFooter,
|
|
320
|
+
Close: PanelClose
|
|
321
|
+
});
|
|
322
|
+
|
|
323
|
+
export { Panel, panelBodyVariants, panelCloseButtonVariants, panelContentVariants, panelFooterVariants, panelHeaderVariants };
|
|
3
324
|
//# sourceMappingURL=index.mjs.map
|
|
4
325
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/Panel/Panel.tsx"],"names":["AriaButton","AriaModalOverlay","AriaModal","AriaDialog"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\n/**\n * Panel Component - Accessible Non-Modal Sidebar\n * Disclosure pattern + Complementary region for WCAG 2.2 AAA\n *\n * @see plan.md for architecture details\n * @see panel-prd.md for requirements\n * @see ADR 0007 for accessibility decisions\n */\n\nimport {\n type ReactElement,\n type MutableRefObject,\n createContext,\n useContext,\n useState,\n useId,\n useRef,\n useCallback,\n useEffect,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport {\n Button as AriaButton,\n Modal as AriaModal,\n ModalOverlay as AriaModalOverlay,\n Dialog as AriaDialog,\n} from \"react-aria-components\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport type {\n PanelProps,\n PanelTriggerProps,\n PanelContentProps,\n PanelHeaderProps,\n PanelTitleProps,\n PanelDescriptionProps,\n PanelBodyProps,\n PanelFooterProps,\n PanelCloseProps,\n PanelPosition,\n PanelWidth,\n} from \"./Panel.types\";\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Panel content variants\n * Controls position-based styling and width\n */\nexport const panelContentVariants = cva(\n [\n \"flex flex-col h-full\",\n \"bg-[var(--content-background)] text-[var(--content-foreground)]\",\n \"shadow-lg\",\n ],\n {\n variants: {\n position: {\n right: \"border-l border-[var(--border)]\",\n left: \"border-r border-[var(--border)]\",\n },\n width: {\n sm: \"w-[300px]\",\n md: \"w-[400px]\",\n lg: \"w-[500px]\",\n xl: \"w-[600px]\",\n auto: \"w-auto\",\n },\n },\n defaultVariants: {\n position: \"right\",\n width: \"md\",\n },\n }\n);\n\n/**\n * Panel header variants\n */\nexport const panelHeaderVariants = cva([\n \"flex items-start justify-between\",\n \"px-4 py-4\",\n \"border-b border-[var(--border)]\",\n]);\n\n/**\n * Panel body variants\n */\nexport const panelBodyVariants = cva([\"flex-1 overflow-y-auto\", \"px-4 py-4\"]);\n\n/**\n * Panel footer variants\n */\nexport const panelFooterVariants = cva([\n \"flex items-center justify-end gap-2\",\n \"px-4 py-4\",\n \"border-t border-[var(--border)]\",\n]);\n\n/**\n * Close button variants\n */\nexport const panelCloseButtonVariants = cva([\n \"inline-flex items-center justify-center rounded-md\",\n \"min-h-[44px] min-w-[44px]\",\n \"text-[var(--menu-muted)]\",\n \"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]\",\n \"focus-visible:outline-none focus-visible:ring-2\",\n \"focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n // No transition - instant state changes (v1)\n]);\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface PanelContextValue {\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n panelId: string;\n titleId: string;\n triggerRef: MutableRefObject<HTMLElement | null>;\n position: PanelPosition;\n width: PanelWidth;\n mobileBreakpoint: number;\n isMobile: boolean;\n handleClose: () => void;\n}\n\nconst PanelContext = createContext<PanelContextValue | null>(null);\n\nfunction usePanelContext(): PanelContextValue {\n const context = useContext(PanelContext);\n if (!context) {\n throw new Error(\"Panel compound components must be used within a Panel\");\n }\n return context;\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\n/**\n * SSR-safe media query hook\n * Defaults to false on server (desktop mode)\n */\nfunction useMediaQuery(query: string): boolean {\n const [matches, setMatches] = useState(() => {\n // Default to false on server (desktop mode)\n if (typeof window === \"undefined\") return false;\n return window.matchMedia(query).matches;\n });\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const media = window.matchMedia(query);\n // Sync state after mount (handles SSR mismatch)\n if (media.matches !== matches) {\n setMatches(media.matches);\n }\n const listener = (e: MediaQueryListEvent) => setMatches(e.matches);\n media.addEventListener(\"change\", listener);\n return () => media.removeEventListener(\"change\", listener);\n }, [query, matches]);\n\n return matches;\n}\n\n// ============================================================================\n// Panel Root\n// ============================================================================\n\nfunction PanelRoot({\n children,\n isOpen: controlledIsOpen,\n defaultOpen = false,\n onOpenChange,\n onClose,\n position = \"right\",\n width = \"md\",\n mobileBreakpoint = 768,\n}: PanelProps): ReactElement {\n // State management (controlled/uncontrolled)\n const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);\n const isControlled = controlledIsOpen !== undefined;\n const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;\n\n // Refs\n const triggerRef = useRef<HTMLElement | null>(null);\n\n // IDs for ARIA\n const uniqueId = useId();\n const panelId = `panel-${uniqueId}`;\n const titleId = `panel-title-${uniqueId}`;\n\n // Responsive detection\n const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);\n\n // State setter\n const setIsOpen = useCallback(\n (open: boolean) => {\n if (!isControlled) {\n setUncontrolledIsOpen(open);\n }\n onOpenChange?.(open);\n },\n [isControlled, onOpenChange]\n );\n\n // Close handler with focus restoration\n const handleClose = useCallback(() => {\n setIsOpen(false);\n onClose?.();\n // Return focus to trigger if it still exists in DOM\n if (triggerRef.current) {\n window.requestAnimationFrame(() => {\n triggerRef.current?.focus();\n });\n }\n }, [setIsOpen, onClose]);\n\n // Escape key handler (desktop only - mobile handled by React Aria)\n useEffect(() => {\n if (!isOpen || isMobile) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n e.preventDefault();\n handleClose();\n }\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [isOpen, isMobile, handleClose]);\n\n const contextValue: PanelContextValue = {\n isOpen,\n setIsOpen,\n panelId,\n titleId,\n triggerRef,\n position,\n width,\n mobileBreakpoint,\n isMobile,\n handleClose,\n };\n\n return (\n <PanelContext.Provider value={contextValue}>\n {children}\n </PanelContext.Provider>\n );\n}\nPanelRoot.displayName = \"Panel\";\n\n// ============================================================================\n// Panel.Trigger\n// ============================================================================\n\nfunction PanelTrigger({\n children,\n asChild = true,\n}: PanelTriggerProps): ReactElement | null {\n const { isOpen, setIsOpen, panelId, triggerRef } = usePanelContext();\n\n // Capture ref via callback ref pattern\n const setRef = useCallback(\n (element: HTMLElement | null) => {\n triggerRef.current = element;\n },\n [triggerRef]\n );\n\n const handlePress = useCallback(() => {\n setIsOpen(!isOpen);\n }, [setIsOpen, isOpen]);\n\n // If asChild, clone the child element and add props\n if (asChild && isValidElement(children)) {\n const childProps = children.props as unknown as {\n onPress?: () => void;\n onClick?: () => void;\n };\n return cloneElement(children, {\n ref: setRef,\n \"aria-expanded\": isOpen,\n \"aria-controls\": isOpen ? panelId : undefined,\n \"data-testid\": \"panel-trigger\",\n onPress: handlePress,\n onClick: childProps.onClick\n ? () => {\n childProps.onClick?.();\n handlePress();\n }\n : handlePress,\n } as unknown as Record<string, unknown>);\n }\n\n // Fallback: wrap in AriaButton\n return (\n <AriaButton\n ref={setRef}\n aria-expanded={isOpen}\n aria-controls={isOpen ? panelId : undefined}\n onPress={handlePress}\n data-testid=\"panel-trigger\"\n >\n {children}\n </AriaButton>\n );\n}\nPanelTrigger.displayName = \"PanelTrigger\";\n\n// ============================================================================\n// Built-in Close Button\n// ============================================================================\n\nfunction BuiltInCloseButton(): ReactElement {\n const { handleClose } = usePanelContext();\n\n return (\n <AriaButton\n aria-label=\"Close panel\"\n data-testid=\"panel-close\"\n onPress={handleClose}\n className={panelCloseButtonVariants()}\n >\n <X className=\"h-5 w-5\" />\n </AriaButton>\n );\n}\n\n// ============================================================================\n// Panel.Content\n// ============================================================================\n\nfunction PanelContent({\n children,\n showClose = true,\n className,\n}: PanelContentProps): ReactElement | null {\n const { isOpen, isMobile, panelId, titleId, position, width, handleClose } =\n usePanelContext();\n\n if (!isOpen) return null;\n\n // Mobile: Use React Aria Modal primitives\n if (isMobile) {\n return (\n <AriaModalOverlay\n isDismissable\n isOpen={isOpen}\n onOpenChange={(open) => !open && handleClose()}\n className=\"fixed inset-0 z-50 bg-black/50\"\n >\n <AriaModal className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n <AriaDialog\n aria-labelledby={titleId}\n className={cn(\n \"w-full max-w-lg rounded-lg bg-[var(--content-background)] shadow-lg outline-none\",\n \"flex max-h-[90vh] flex-col\",\n className\n )}\n >\n {showClose && (\n <div className=\"absolute right-2 top-2\">\n <BuiltInCloseButton />\n </div>\n )}\n {children}\n </AriaDialog>\n </AriaModal>\n </AriaModalOverlay>\n );\n }\n\n // Desktop: Render aside in-place\n return (\n <aside\n id={panelId}\n aria-labelledby={titleId}\n data-testid=\"panel-content\"\n className={cn(panelContentVariants({ position, width }), className)}\n >\n {children}\n {showClose && (\n <div className=\"absolute right-2 top-2\">\n <BuiltInCloseButton />\n </div>\n )}\n </aside>\n );\n}\nPanelContent.displayName = \"PanelContent\";\n\n// ============================================================================\n// Panel.Header\n// ============================================================================\n\nfunction PanelHeader({\n children,\n className,\n}: PanelHeaderProps): ReactElement | null {\n // Note: We use a <header> element but DON'T add role=\"banner\"\n // because banner landmarks should not be contained in other landmarks (like aside)\n // The header element still provides structural meaning for the panel\n return (\n <header className={cn(panelHeaderVariants(), className)}>\n <div className=\"flex flex-col gap-1\">{children}</div>\n </header>\n );\n}\nPanelHeader.displayName = \"PanelHeader\";\n\n// ============================================================================\n// Panel.Title\n// ============================================================================\n\nfunction PanelTitle({\n children,\n as: Tag = \"h2\",\n className,\n}: PanelTitleProps): ReactElement | null {\n const { titleId } = usePanelContext();\n\n return (\n <Tag\n id={titleId}\n // aria-live=\"polite\" announces title changes to screen readers\n // This is important for master-detail patterns where panel content\n // updates when selecting different items (e.g., candidate profiles)\n aria-live=\"polite\"\n className={cn(\n \"text-lg font-semibold text-[var(--content-foreground)]\",\n className\n )}\n >\n {children}\n </Tag>\n );\n}\nPanelTitle.displayName = \"PanelTitle\";\n\n// ============================================================================\n// Panel.Description\n// ============================================================================\n\nfunction PanelDescription({\n children,\n className,\n}: PanelDescriptionProps): ReactElement | null {\n return (\n <p className={cn(\"text-sm text-[var(--menu-muted)]\", className)}>\n {children}\n </p>\n );\n}\nPanelDescription.displayName = \"PanelDescription\";\n\n// ============================================================================\n// Panel.Body\n// ============================================================================\n\nfunction PanelBody({ children, className }: PanelBodyProps): ReactElement | null {\n return <div className={cn(panelBodyVariants(), className)}>{children}</div>;\n}\nPanelBody.displayName = \"PanelBody\";\n\n// ============================================================================\n// Panel.Footer\n// ============================================================================\n\nfunction PanelFooter({\n children,\n className,\n}: PanelFooterProps): ReactElement | null {\n // Note: We use a <footer> element but DON'T add role=\"contentinfo\"\n // because contentinfo landmarks should not be contained in other landmarks (like aside)\n // The footer element still provides structural meaning for the panel\n return (\n <footer className={cn(panelFooterVariants(), className)}>\n {children}\n </footer>\n );\n}\nPanelFooter.displayName = \"PanelFooter\";\n\n// ============================================================================\n// Panel.Close\n// ============================================================================\n\nfunction PanelClose({ children }: PanelCloseProps): ReactElement | null {\n const { handleClose } = usePanelContext();\n\n if (!isValidElement(children)) {\n return null;\n }\n\n // Clone the child and add onPress/onClick handler\n const childProps = children.props as unknown as {\n onPress?: () => void;\n onClick?: () => void;\n };\n\n return cloneElement(children, {\n onPress: () => {\n childProps.onPress?.();\n handleClose();\n },\n onClick: () => {\n childProps.onClick?.();\n handleClose();\n },\n } as unknown as Record<string, unknown>);\n}\nPanelClose.displayName = \"PanelClose\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Panel Component\n *\n * Accessible non-modal sidebar panel using the disclosure pattern with\n * a complementary region for WCAG 2.2 AAA compliance.\n *\n * @example\n * ```tsx\n * <Panel>\n * <Panel.Trigger>\n * <Button>Open Panel</Button>\n * </Panel.Trigger>\n * <Panel.Content>\n * <Panel.Header>\n * <Panel.Title>Panel Title</Panel.Title>\n * <Panel.Description>Optional description</Panel.Description>\n * </Panel.Header>\n * <Panel.Body>\n * Panel content here\n * </Panel.Body>\n * <Panel.Footer>\n * <Button>Action</Button>\n * </Panel.Footer>\n * </Panel.Content>\n * </Panel>\n * ```\n */\nexport const Panel = Object.assign(PanelRoot, {\n Trigger: PanelTrigger,\n Content: PanelContent,\n Header: PanelHeader,\n Title: PanelTitle,\n Description: PanelDescription,\n Body: PanelBody,\n Footer: PanelFooter,\n Close: PanelClose,\n});\n\n// Named exports for individual components\nexport {\n PanelRoot,\n PanelTrigger,\n PanelContent,\n PanelHeader,\n PanelTitle,\n PanelDescription,\n PanelBody,\n PanelFooter,\n PanelClose,\n};\n\n// Export CVA variant types for customization\nexport type PanelContentVariants = VariantProps<typeof panelContentVariants>;\n"]}
|
|
@@ -1,30 +1,189 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
'use strict';
|
|
2
3
|
|
|
3
|
-
var
|
|
4
|
-
require('
|
|
5
|
-
require('
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var reactAriaComponents = require('react-aria-components');
|
|
6
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var tailwindMerge = require('tailwind-merge');
|
|
9
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
var zod = require('zod');
|
|
6
11
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
// src/elements/Progress/Progress.tsx
|
|
13
|
+
function cn(...inputs) {
|
|
14
|
+
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
15
|
+
}
|
|
16
|
+
var progressTrackVariants = classVarianceAuthority.cva(
|
|
17
|
+
// Base styles - track container
|
|
18
|
+
"relative w-full overflow-hidden rounded-full bg-[var(--accent-background)]",
|
|
19
|
+
{
|
|
20
|
+
variants: {
|
|
21
|
+
size: {
|
|
22
|
+
sm: "h-1",
|
|
23
|
+
// 4px
|
|
24
|
+
default: "h-2",
|
|
25
|
+
// 8px
|
|
26
|
+
lg: "h-3"
|
|
27
|
+
// 12px
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
defaultVariants: {
|
|
31
|
+
size: "default"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
var progressIndicatorVariants = classVarianceAuthority.cva(
|
|
36
|
+
// Base styles - indicator with smooth transition
|
|
37
|
+
"h-full rounded-full transition-all duration-300 ease-out",
|
|
38
|
+
{
|
|
39
|
+
variants: {
|
|
40
|
+
variant: {
|
|
41
|
+
default: "bg-[var(--primary)]",
|
|
42
|
+
success: "bg-[var(--success,hsl(142,76%,36%))]",
|
|
43
|
+
warning: "bg-[var(--warning,hsl(38,92%,50%))]",
|
|
44
|
+
destructive: "bg-[var(--destructive)]"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
defaultVariants: {
|
|
48
|
+
variant: "default"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
var progressContainerVariants = classVarianceAuthority.cva("flex w-full gap-2", {
|
|
53
|
+
variants: {
|
|
54
|
+
labelPosition: {
|
|
55
|
+
top: "flex-col",
|
|
56
|
+
side: "flex-row items-center"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
defaultVariants: {
|
|
60
|
+
labelPosition: "top"
|
|
61
|
+
}
|
|
16
62
|
});
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
63
|
+
var Progress = react.memo(
|
|
64
|
+
react.forwardRef(
|
|
65
|
+
({
|
|
66
|
+
value,
|
|
67
|
+
minValue = 0,
|
|
68
|
+
maxValue = 100,
|
|
69
|
+
isIndeterminate = false,
|
|
70
|
+
label,
|
|
71
|
+
showValueLabel = true,
|
|
72
|
+
valueLabel,
|
|
73
|
+
formatOptions,
|
|
74
|
+
labelPosition = "top",
|
|
75
|
+
variant = "default",
|
|
76
|
+
size = "default",
|
|
77
|
+
className,
|
|
78
|
+
"aria-label": ariaLabel,
|
|
79
|
+
"aria-labelledby": ariaLabelledBy,
|
|
80
|
+
"aria-describedby": ariaDescribedBy,
|
|
81
|
+
...props
|
|
82
|
+
}, ref) => {
|
|
83
|
+
const labelId = react.useId();
|
|
84
|
+
const shouldShowValueLabel = showValueLabel && !isIndeterminate;
|
|
85
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
reactAriaComponents.ProgressBar,
|
|
87
|
+
{
|
|
88
|
+
ref,
|
|
89
|
+
value: isIndeterminate ? void 0 : value,
|
|
90
|
+
minValue,
|
|
91
|
+
maxValue,
|
|
92
|
+
isIndeterminate,
|
|
93
|
+
formatOptions: formatOptions ?? { style: "percent" },
|
|
94
|
+
"aria-label": ariaLabel,
|
|
95
|
+
"aria-labelledby": label ? labelId : ariaLabelledBy,
|
|
96
|
+
"aria-describedby": ariaDescribedBy,
|
|
97
|
+
className: cn(progressContainerVariants({ labelPosition }), className),
|
|
98
|
+
...props,
|
|
99
|
+
children: ({ percentage, valueText }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
100
|
+
(label || shouldShowValueLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
|
|
101
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
102
|
+
"span",
|
|
103
|
+
{
|
|
104
|
+
id: labelId,
|
|
105
|
+
className: "font-medium text-[var(--content-foreground)]",
|
|
106
|
+
children: label
|
|
107
|
+
}
|
|
108
|
+
),
|
|
109
|
+
shouldShowValueLabel && /* @__PURE__ */ jsxRuntime.jsx(
|
|
110
|
+
"span",
|
|
111
|
+
{
|
|
112
|
+
"aria-hidden": "true",
|
|
113
|
+
className: "text-[var(--menu-muted)]",
|
|
114
|
+
children: valueLabel ?? valueText
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
] }),
|
|
118
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: progressTrackVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
119
|
+
"div",
|
|
120
|
+
{
|
|
121
|
+
className: cn(
|
|
122
|
+
progressIndicatorVariants({ variant }),
|
|
123
|
+
isIndeterminate && "motion-safe:animate-pulse"
|
|
124
|
+
),
|
|
125
|
+
style: {
|
|
126
|
+
width: isIndeterminate ? "100%" : `${percentage ?? 0}%`
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
) })
|
|
130
|
+
] })
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
)
|
|
135
|
+
);
|
|
136
|
+
Progress.displayName = "Progress";
|
|
137
|
+
var BaseComponentPropsSchema = zod.z.object({
|
|
138
|
+
// Styling
|
|
139
|
+
className: zod.z.string().optional(),
|
|
140
|
+
// React
|
|
141
|
+
children: zod.z.any().optional(),
|
|
142
|
+
// ReactNode not directly supported by Zod
|
|
143
|
+
id: zod.z.string().optional(),
|
|
144
|
+
// Accessibility (WCAG 2.2 AA requirements)
|
|
145
|
+
"aria-label": zod.z.string().optional(),
|
|
146
|
+
"aria-labelledby": zod.z.string().optional(),
|
|
147
|
+
"aria-describedby": zod.z.string().optional(),
|
|
148
|
+
"aria-live": zod.z.enum(["off", "polite", "assertive"]).optional(),
|
|
149
|
+
"aria-hidden": zod.z.boolean().optional(),
|
|
150
|
+
// Testing & Development
|
|
151
|
+
"data-testid": zod.z.string().optional()
|
|
20
152
|
});
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
153
|
+
|
|
154
|
+
// src/elements/Progress/Progress.types.ts
|
|
155
|
+
var ProgressPropsSchema = BaseComponentPropsSchema.extend({
|
|
156
|
+
// Value props
|
|
157
|
+
/** Current progress value (0-100 by default) */
|
|
158
|
+
value: zod.z.number().optional(),
|
|
159
|
+
/** Minimum value (default: 0) */
|
|
160
|
+
minValue: zod.z.number().optional().default(0),
|
|
161
|
+
/** Maximum value (default: 100) */
|
|
162
|
+
maxValue: zod.z.number().optional().default(100),
|
|
163
|
+
/** When true, shows indeterminate animation (unknown progress) */
|
|
164
|
+
isIndeterminate: zod.z.boolean().optional(),
|
|
165
|
+
// Label props
|
|
166
|
+
/** Label text displayed above or beside the progress bar */
|
|
167
|
+
label: zod.z.string().optional(),
|
|
168
|
+
/** Show/hide the value label (default: true) */
|
|
169
|
+
showValueLabel: zod.z.boolean().optional().default(true),
|
|
170
|
+
/** Custom value label text (overrides formatted value) */
|
|
171
|
+
valueLabel: zod.z.string().optional(),
|
|
172
|
+
/** Label position relative to progress bar */
|
|
173
|
+
labelPosition: zod.z.enum(["top", "side"]).optional().default("top"),
|
|
174
|
+
// Note: formatOptions is Intl.NumberFormatOptions which can't be validated by Zod
|
|
175
|
+
// It's handled in the TypeScript interface instead
|
|
176
|
+
// Variants
|
|
177
|
+
/** Color variant for semantic meaning */
|
|
178
|
+
variant: zod.z.enum(["default", "success", "warning", "destructive"]).optional().default("default"),
|
|
179
|
+
/** Size variant controlling track height */
|
|
180
|
+
size: zod.z.enum(["sm", "default", "lg"]).optional().default("default")
|
|
28
181
|
});
|
|
182
|
+
|
|
183
|
+
exports.Progress = Progress;
|
|
184
|
+
exports.ProgressPropsSchema = ProgressPropsSchema;
|
|
185
|
+
exports.progressContainerVariants = progressContainerVariants;
|
|
186
|
+
exports.progressIndicatorVariants = progressIndicatorVariants;
|
|
187
|
+
exports.progressTrackVariants = progressTrackVariants;
|
|
29
188
|
//# sourceMappingURL=index.js.map
|
|
30
189
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/Progress/Progress.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Progress/Progress.types.ts"],"names":["twMerge","clsx","cva","memo","forwardRef","useId","jsx","AriaProgressBar","jsxs","Fragment","z"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\n/**\n * Progress Component\n * Accessible progress bar with React Aria primitives and CVA styling\n *\n * @see React Aria ProgressBar: https://react-aria.adobe.com/ProgressBar\n * @see ShadCN Progress: https://ui.shadcn.com/docs/components/progress\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, useId } from 'react';\nimport { ProgressBar as AriaProgressBar } from 'react-aria-components';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport type { ProgressProps } from './Progress.types';\n\n/**\n * Progress track variants (the background container)\n * Controls size/height of the progress bar\n */\nconst progressTrackVariants = cva(\n // Base styles - track container\n 'relative w-full overflow-hidden rounded-full bg-[var(--accent-background)]',\n {\n variants: {\n size: {\n sm: 'h-1', // 4px\n default: 'h-2', // 8px\n lg: 'h-3', // 12px\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n);\n\n/**\n * Progress indicator variants (the filled portion)\n * Controls color and animation based on variant and state\n */\nconst progressIndicatorVariants = cva(\n // Base styles - indicator with smooth transition\n 'h-full rounded-full transition-all duration-300 ease-out',\n {\n variants: {\n variant: {\n default: 'bg-[var(--primary)]',\n success: 'bg-[var(--success,hsl(142,76%,36%))]',\n warning: 'bg-[var(--warning,hsl(38,92%,50%))]',\n destructive: 'bg-[var(--destructive)]',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n/**\n * Progress container variants (wrapper with label positioning)\n */\nconst progressContainerVariants = cva('flex w-full gap-2', {\n variants: {\n labelPosition: {\n top: 'flex-col',\n side: 'flex-row items-center',\n },\n },\n defaultVariants: {\n labelPosition: 'top',\n },\n});\n\nexport interface ProgressComponentProps\n extends Omit<ProgressProps, 'children' | 'size' | 'variant'>,\n VariantProps<typeof progressTrackVariants>,\n VariantProps<typeof progressIndicatorVariants> {\n /** Size variant controlling track height */\n size?: 'sm' | 'default' | 'lg';\n /** Color variant for semantic meaning */\n variant?: 'default' | 'success' | 'warning' | 'destructive';\n}\n\n/**\n * Progress Component\n * Displays determinate or indeterminate progress indicators\n *\n * Features:\n * - WCAG 2.2 AAA compliant (7:1 contrast ratio)\n * - Determinate and indeterminate modes\n * - Custom value formatting via Intl.NumberFormat\n * - 3 size variants (sm, default, lg)\n * - 4 color variants (default, success, warning, destructive)\n * - Label support with flexible positioning\n * - Theme-aware styling via semantic CSS tokens\n */\nconst Progress = memo(\n forwardRef<HTMLDivElement, ProgressComponentProps>(\n (\n {\n value,\n minValue = 0,\n maxValue = 100,\n isIndeterminate = false,\n label,\n showValueLabel = true,\n valueLabel,\n formatOptions,\n labelPosition = 'top',\n variant = 'default',\n size = 'default',\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...props\n },\n ref\n ) => {\n const labelId = useId();\n\n // Determine if we should show the value label\n const shouldShowValueLabel = showValueLabel && !isIndeterminate;\n\n return (\n <AriaProgressBar\n ref={ref}\n value={isIndeterminate ? undefined : value}\n minValue={minValue}\n maxValue={maxValue}\n isIndeterminate={isIndeterminate}\n formatOptions={formatOptions ?? { style: 'percent' }}\n aria-label={ariaLabel}\n aria-labelledby={label ? labelId : ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n className={cn(progressContainerVariants({ labelPosition }), className)}\n {...props}\n >\n {({ percentage, valueText }) => (\n <>\n {/* Label row with optional value display */}\n {(label || shouldShowValueLabel) && (\n <div className=\"flex justify-between text-sm\">\n {label && (\n <span\n id={labelId}\n className=\"font-medium text-[var(--content-foreground)]\"\n >\n {label}\n </span>\n )}\n {shouldShowValueLabel && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--menu-muted)]\"\n >\n {valueLabel ?? valueText}\n </span>\n )}\n </div>\n )}\n\n {/* Progress track and indicator */}\n <div className={progressTrackVariants({ size })}>\n <div\n className={cn(\n progressIndicatorVariants({ variant }),\n isIndeterminate && 'motion-safe:animate-pulse'\n )}\n style={{\n width: isIndeterminate ? '100%' : `${percentage ?? 0}%`,\n }}\n />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n }\n )\n);\n\nProgress.displayName = 'Progress';\n\nexport {\n Progress,\n progressTrackVariants,\n progressIndicatorVariants,\n progressContainerVariants,\n};\n","import { z } from 'zod';\n\n/**\n * Base props schema for all Themis components\n * Ensures consistent accessibility and styling APIs across the library\n *\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements)\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AA minimum)\n */\nexport const BaseComponentPropsSchema = z.object({\n // Styling\n className: z.string().optional(),\n\n // React\n children: z.any().optional(), // ReactNode not directly supported by Zod\n id: z.string().optional(),\n\n // Accessibility (WCAG 2.2 AA requirements)\n 'aria-label': z.string().optional(),\n 'aria-labelledby': z.string().optional(),\n 'aria-describedby': z.string().optional(),\n 'aria-live': z.enum(['off', 'polite', 'assertive']).optional(),\n 'aria-hidden': z.boolean().optional(),\n\n // Testing & Development\n 'data-testid': z.string().optional(),\n});\n\nexport type BaseComponentProps = z.infer<typeof BaseComponentPropsSchema>;\n","import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\n\n/**\n * Progress props schema extending BaseComponentProps\n *\n * @see React Aria ProgressBar: https://react-aria.adobe.com/ProgressBar\n * @see ShadCN Progress: https://ui.shadcn.com/docs/components/progress\n * @see tasks.md Phase 1.1 (Type System)\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const ProgressPropsSchema = BaseComponentPropsSchema.extend({\n // Value props\n /** Current progress value (0-100 by default) */\n value: z.number().optional(),\n /** Minimum value (default: 0) */\n minValue: z.number().optional().default(0),\n /** Maximum value (default: 100) */\n maxValue: z.number().optional().default(100),\n /** When true, shows indeterminate animation (unknown progress) */\n isIndeterminate: z.boolean().optional(),\n\n // Label props\n /** Label text displayed above or beside the progress bar */\n label: z.string().optional(),\n /** Show/hide the value label (default: true) */\n showValueLabel: z.boolean().optional().default(true),\n /** Custom value label text (overrides formatted value) */\n valueLabel: z.string().optional(),\n /** Label position relative to progress bar */\n labelPosition: z.enum(['top', 'side']).optional().default('top'),\n\n // Note: formatOptions is Intl.NumberFormatOptions which can't be validated by Zod\n // It's handled in the TypeScript interface instead\n\n // Variants\n /** Color variant for semantic meaning */\n variant: z\n .enum(['default', 'success', 'warning', 'destructive'])\n .optional()\n .default('default'),\n /** Size variant controlling track height */\n size: z.enum(['sm', 'default', 'lg']).optional().default('default'),\n});\n\nexport type ProgressProps = z.infer<typeof ProgressPropsSchema> & {\n /** Number format options for value display (default: { style: 'percent' }) */\n formatOptions?: Intl.NumberFormatOptions;\n};\n\n/**\n * Progress variant type for CVA\n */\nexport type ProgressVariant = NonNullable<ProgressProps['variant']>;\n\n/**\n * Progress size type for CVA\n */\nexport type ProgressSize = NonNullable<ProgressProps['size']>;\n\n/**\n * Progress label position type\n */\nexport type ProgressLabelPosition = NonNullable<ProgressProps['labelPosition']>;\n"]}
|