@cloudvoyant/vortex-react 0.17.0-rc.202609040136.45c8986
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/index.cjs +3480 -0
- package/dist/index.d.cts +611 -0
- package/dist/index.d.ts +611 -0
- package/dist/index.js +3670 -0
- package/package.json +66 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,3670 @@
|
|
|
1
|
+
// src/button.tsx
|
|
2
|
+
import { ark } from "@ark-ui/react/factory";
|
|
3
|
+
import { buttonVariants, cn } from "@cloudvoyant/vortex-ui";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
function Button({ className, variant, color, size, type = "button", ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(ark.button, { type, className: cn(buttonVariants({ variant, color, size }), className), ...props });
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// src/toggle-button.tsx
|
|
10
|
+
import { ToggleRoot, ToggleIndicator } from "@ark-ui/react/toggle";
|
|
11
|
+
import { toggleButtonVariants, cn as cn2 } from "@cloudvoyant/vortex-ui";
|
|
12
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
13
|
+
function ToggleButton({ className, variant, size, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx2(ToggleRoot, { className: cn2(toggleButtonVariants({ variant, size }), className), ...props });
|
|
15
|
+
}
|
|
16
|
+
function ToggleButtonIndicator(props) {
|
|
17
|
+
return /* @__PURE__ */ jsx2(ToggleIndicator, { ...props });
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// src/tooltip.tsx
|
|
21
|
+
import {
|
|
22
|
+
TooltipRoot as ArkTooltipRoot,
|
|
23
|
+
TooltipRootProvider as ArkTooltipRootProvider,
|
|
24
|
+
TooltipTrigger as ArkTooltipTrigger,
|
|
25
|
+
TooltipPositioner as ArkTooltipPositioner,
|
|
26
|
+
TooltipArrow as ArkTooltipArrow,
|
|
27
|
+
TooltipArrowTip as ArkTooltipArrowTip,
|
|
28
|
+
TooltipContent as ArkTooltipContent,
|
|
29
|
+
useTooltip,
|
|
30
|
+
useTooltipContext
|
|
31
|
+
} from "@ark-ui/react/tooltip";
|
|
32
|
+
import { Portal } from "@ark-ui/react/portal";
|
|
33
|
+
import { tooltipPositionerBase, tooltipArrowBase, tooltipContentBase, cn as cn3 } from "@cloudvoyant/vortex-ui";
|
|
34
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
35
|
+
function Tooltip(props) {
|
|
36
|
+
return /* @__PURE__ */ jsx3(ArkTooltipRoot, { ...props });
|
|
37
|
+
}
|
|
38
|
+
function TooltipProvider(props) {
|
|
39
|
+
return /* @__PURE__ */ jsx3(ArkTooltipRootProvider, { ...props });
|
|
40
|
+
}
|
|
41
|
+
function TooltipTrigger({ className, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx3(ArkTooltipTrigger, { className: cn3(className), ...props });
|
|
43
|
+
}
|
|
44
|
+
function TooltipContent({ arrow = true, className, ...props }) {
|
|
45
|
+
const tooltip = useTooltipContext();
|
|
46
|
+
return /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsxs(ArkTooltipPositioner, { className: tooltipPositionerBase, children: [
|
|
47
|
+
arrow && tooltip.open ? /* @__PURE__ */ jsx3(ArkTooltipArrow, { className: tooltipArrowBase, children: /* @__PURE__ */ jsx3(ArkTooltipArrowTip, {}) }) : null,
|
|
48
|
+
/* @__PURE__ */ jsx3(ArkTooltipContent, { className: cn3(tooltipContentBase, className), ...props })
|
|
49
|
+
] }) });
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// src/popover.tsx
|
|
53
|
+
import {
|
|
54
|
+
PopoverRoot as ArkPopoverRoot,
|
|
55
|
+
PopoverRootProvider as ArkPopoverRootProvider,
|
|
56
|
+
PopoverTrigger as ArkPopoverTrigger,
|
|
57
|
+
PopoverAnchor as ArkPopoverAnchor,
|
|
58
|
+
PopoverPositioner as ArkPopoverPositioner,
|
|
59
|
+
PopoverArrow as ArkPopoverArrow,
|
|
60
|
+
PopoverArrowTip as ArkPopoverArrowTip,
|
|
61
|
+
PopoverContent as ArkPopoverContent,
|
|
62
|
+
PopoverTitle as ArkPopoverTitle,
|
|
63
|
+
PopoverDescription as ArkPopoverDescription,
|
|
64
|
+
PopoverCloseTrigger as ArkPopoverCloseTrigger,
|
|
65
|
+
PopoverIndicator as ArkPopoverIndicator,
|
|
66
|
+
usePopover,
|
|
67
|
+
usePopoverContext
|
|
68
|
+
} from "@ark-ui/react/popover";
|
|
69
|
+
import { Portal as Portal2 } from "@ark-ui/react/portal";
|
|
70
|
+
import {
|
|
71
|
+
popoverPositionerBase,
|
|
72
|
+
popoverArrowBase,
|
|
73
|
+
popoverContentBase,
|
|
74
|
+
popoverTitleBase,
|
|
75
|
+
popoverDescriptionBase,
|
|
76
|
+
popoverCloseTriggerBase,
|
|
77
|
+
popoverIndicatorBase,
|
|
78
|
+
cn as cn4
|
|
79
|
+
} from "@cloudvoyant/vortex-ui";
|
|
80
|
+
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
81
|
+
function Popover(props) {
|
|
82
|
+
return /* @__PURE__ */ jsx4(ArkPopoverRoot, { ...props });
|
|
83
|
+
}
|
|
84
|
+
function PopoverProvider(props) {
|
|
85
|
+
return /* @__PURE__ */ jsx4(ArkPopoverRootProvider, { ...props });
|
|
86
|
+
}
|
|
87
|
+
function PopoverTrigger({ className, ...props }) {
|
|
88
|
+
return /* @__PURE__ */ jsx4(ArkPopoverTrigger, { className: cn4(className), ...props });
|
|
89
|
+
}
|
|
90
|
+
function PopoverAnchor({ className, ...props }) {
|
|
91
|
+
return /* @__PURE__ */ jsx4(ArkPopoverAnchor, { className: cn4(className), ...props });
|
|
92
|
+
}
|
|
93
|
+
function PopoverContent({ arrow = false, className, ...props }) {
|
|
94
|
+
const popover = usePopoverContext();
|
|
95
|
+
return /* @__PURE__ */ jsx4(Portal2, { children: /* @__PURE__ */ jsxs2(ArkPopoverPositioner, { className: popoverPositionerBase, children: [
|
|
96
|
+
arrow && popover.open ? /* @__PURE__ */ jsx4(ArkPopoverArrow, { className: popoverArrowBase, children: /* @__PURE__ */ jsx4(ArkPopoverArrowTip, {}) }) : null,
|
|
97
|
+
/* @__PURE__ */ jsx4(ArkPopoverContent, { className: cn4(popoverContentBase, className), ...props })
|
|
98
|
+
] }) });
|
|
99
|
+
}
|
|
100
|
+
function PopoverTitle({ className, ...props }) {
|
|
101
|
+
return /* @__PURE__ */ jsx4(ArkPopoverTitle, { className: cn4(popoverTitleBase, className), ...props });
|
|
102
|
+
}
|
|
103
|
+
function PopoverDescription({ className, ...props }) {
|
|
104
|
+
return /* @__PURE__ */ jsx4(ArkPopoverDescription, { className: cn4(popoverDescriptionBase, className), ...props });
|
|
105
|
+
}
|
|
106
|
+
function PopoverDismiss({ className, ...props }) {
|
|
107
|
+
return /* @__PURE__ */ jsx4(ArkPopoverCloseTrigger, { "aria-label": "Close", className: cn4(popoverCloseTriggerBase, className), ...props });
|
|
108
|
+
}
|
|
109
|
+
function PopoverIndicator({ className, ...props }) {
|
|
110
|
+
return /* @__PURE__ */ jsx4(ArkPopoverIndicator, { className: cn4(popoverIndicatorBase, className), ...props });
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// src/dialog.tsx
|
|
114
|
+
import {
|
|
115
|
+
DialogRoot as ArkDialogRoot,
|
|
116
|
+
DialogRootProvider as ArkDialogRootProvider,
|
|
117
|
+
DialogTrigger as ArkDialogTrigger,
|
|
118
|
+
DialogBackdrop as ArkDialogBackdrop,
|
|
119
|
+
DialogPositioner as ArkDialogPositioner,
|
|
120
|
+
DialogContent as ArkDialogContent,
|
|
121
|
+
DialogTitle as ArkDialogTitle,
|
|
122
|
+
DialogDescription as ArkDialogDescription,
|
|
123
|
+
DialogCloseTrigger as ArkDialogCloseTrigger,
|
|
124
|
+
useDialog,
|
|
125
|
+
useDialogContext
|
|
126
|
+
} from "@ark-ui/react/dialog";
|
|
127
|
+
import { Portal as Portal3 } from "@ark-ui/react/portal";
|
|
128
|
+
import {
|
|
129
|
+
dialogBackdropBase,
|
|
130
|
+
dialogPositionerBase,
|
|
131
|
+
dialogContentBase,
|
|
132
|
+
dialogTitleBase,
|
|
133
|
+
dialogDescriptionBase,
|
|
134
|
+
dialogHeaderBase,
|
|
135
|
+
dialogFooterBase,
|
|
136
|
+
dialogHeaderStickyBase,
|
|
137
|
+
dialogFooterStickyBase,
|
|
138
|
+
dialogFullscreenContentBase,
|
|
139
|
+
dialogCloseTriggerBase,
|
|
140
|
+
cn as cn5
|
|
141
|
+
} from "@cloudvoyant/vortex-ui";
|
|
142
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
143
|
+
function Dialog(props) {
|
|
144
|
+
return /* @__PURE__ */ jsx5(ArkDialogRoot, { ...props });
|
|
145
|
+
}
|
|
146
|
+
function DialogProvider(props) {
|
|
147
|
+
return /* @__PURE__ */ jsx5(ArkDialogRootProvider, { ...props });
|
|
148
|
+
}
|
|
149
|
+
function DialogTrigger({ className, ...props }) {
|
|
150
|
+
return /* @__PURE__ */ jsx5(ArkDialogTrigger, { className: cn5(className), ...props });
|
|
151
|
+
}
|
|
152
|
+
function DialogBackdrop({ className, ...props }) {
|
|
153
|
+
return /* @__PURE__ */ jsx5(Portal3, { children: /* @__PURE__ */ jsx5(ArkDialogBackdrop, { className: cn5(dialogBackdropBase, className), ...props }) });
|
|
154
|
+
}
|
|
155
|
+
function DialogContent({
|
|
156
|
+
positionerClassName,
|
|
157
|
+
fullscreen,
|
|
158
|
+
className,
|
|
159
|
+
...props
|
|
160
|
+
}) {
|
|
161
|
+
return /* @__PURE__ */ jsx5(Portal3, { children: /* @__PURE__ */ jsx5(ArkDialogPositioner, { className: cn5(dialogPositionerBase, fullscreen && "p-0", positionerClassName), children: /* @__PURE__ */ jsx5(
|
|
162
|
+
ArkDialogContent,
|
|
163
|
+
{
|
|
164
|
+
className: cn5(dialogContentBase, fullscreen && dialogFullscreenContentBase, className),
|
|
165
|
+
...props
|
|
166
|
+
}
|
|
167
|
+
) }) });
|
|
168
|
+
}
|
|
169
|
+
function DialogTitle({ className, ...props }) {
|
|
170
|
+
return /* @__PURE__ */ jsx5(ArkDialogTitle, { className: cn5(dialogTitleBase, className), ...props });
|
|
171
|
+
}
|
|
172
|
+
function DialogDescription({ className, ...props }) {
|
|
173
|
+
return /* @__PURE__ */ jsx5(ArkDialogDescription, { className: cn5(dialogDescriptionBase, className), ...props });
|
|
174
|
+
}
|
|
175
|
+
function DialogHeader({ sticky, className, ...props }) {
|
|
176
|
+
return /* @__PURE__ */ jsx5("div", { className: cn5(dialogHeaderBase, sticky && dialogHeaderStickyBase, className), ...props });
|
|
177
|
+
}
|
|
178
|
+
function DialogFooter({ sticky, className, ...props }) {
|
|
179
|
+
return /* @__PURE__ */ jsx5("div", { className: cn5(dialogFooterBase, sticky && dialogFooterStickyBase, className), ...props });
|
|
180
|
+
}
|
|
181
|
+
function DialogDismiss({ className, ...props }) {
|
|
182
|
+
return /* @__PURE__ */ jsx5(ArkDialogCloseTrigger, { "aria-label": "Close", className: cn5(dialogCloseTriggerBase, className), ...props });
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// src/window.tsx
|
|
186
|
+
import {
|
|
187
|
+
FloatingPanelRoot as ArkWindowRoot,
|
|
188
|
+
FloatingPanelRootProvider as ArkWindowRootProvider,
|
|
189
|
+
FloatingPanelPositioner as ArkWindowPositioner,
|
|
190
|
+
FloatingPanelContent as ArkWindowContent,
|
|
191
|
+
FloatingPanelHeader as ArkWindowHeader,
|
|
192
|
+
FloatingPanelTitle as ArkWindowTitle,
|
|
193
|
+
FloatingPanelControl as ArkWindowControl,
|
|
194
|
+
FloatingPanelStageTrigger as ArkWindowStageTrigger,
|
|
195
|
+
FloatingPanelCloseTrigger as ArkWindowCloseTrigger,
|
|
196
|
+
FloatingPanelDragTrigger as ArkWindowDragTrigger,
|
|
197
|
+
FloatingPanelBody as ArkWindowBody,
|
|
198
|
+
FloatingPanelResizeTrigger as ArkWindowResizeTrigger,
|
|
199
|
+
useFloatingPanel as useWindow,
|
|
200
|
+
useFloatingPanelContext as useWindowContext
|
|
201
|
+
} from "@ark-ui/react/floating-panel";
|
|
202
|
+
import { Portal as Portal4 } from "@ark-ui/react/portal";
|
|
203
|
+
import {
|
|
204
|
+
windowPositionerBase,
|
|
205
|
+
windowContentBase,
|
|
206
|
+
windowDragTriggerBase,
|
|
207
|
+
windowHeaderBase,
|
|
208
|
+
windowTitleBase,
|
|
209
|
+
windowControlBase,
|
|
210
|
+
windowStageTriggerBase,
|
|
211
|
+
windowCloseTriggerBase,
|
|
212
|
+
windowBodyBase,
|
|
213
|
+
windowResizeTriggerBase,
|
|
214
|
+
cn as cn6
|
|
215
|
+
} from "@cloudvoyant/vortex-ui";
|
|
216
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
217
|
+
function Window({ className, positionerClassName, children, ...props }) {
|
|
218
|
+
return /* @__PURE__ */ jsx6(ArkWindowRoot, { ...props, children: /* @__PURE__ */ jsx6(Portal4, { children: /* @__PURE__ */ jsx6(ArkWindowPositioner, { className: cn6(windowPositionerBase, positionerClassName), children: /* @__PURE__ */ jsx6(ArkWindowContent, { className: cn6(windowContentBase, className), children }) }) }) });
|
|
219
|
+
}
|
|
220
|
+
function WindowProvider(props) {
|
|
221
|
+
return /* @__PURE__ */ jsx6(ArkWindowRootProvider, { ...props });
|
|
222
|
+
}
|
|
223
|
+
function WindowDragTrigger({ className, ...props }) {
|
|
224
|
+
return /* @__PURE__ */ jsx6(ArkWindowDragTrigger, { className: cn6(windowDragTriggerBase, className), ...props });
|
|
225
|
+
}
|
|
226
|
+
function WindowHeader({ className, ...props }) {
|
|
227
|
+
return /* @__PURE__ */ jsx6(ArkWindowHeader, { className: cn6(windowHeaderBase, className), ...props });
|
|
228
|
+
}
|
|
229
|
+
function WindowTitle({ className, ...props }) {
|
|
230
|
+
return /* @__PURE__ */ jsx6(ArkWindowTitle, { className: cn6(windowTitleBase, className), ...props });
|
|
231
|
+
}
|
|
232
|
+
function WindowControl({ className, ...props }) {
|
|
233
|
+
return /* @__PURE__ */ jsx6(ArkWindowControl, { className: cn6(windowControlBase, className), ...props });
|
|
234
|
+
}
|
|
235
|
+
function WindowStageTrigger({ className, ...props }) {
|
|
236
|
+
return /* @__PURE__ */ jsx6(ArkWindowStageTrigger, { className: cn6(windowStageTriggerBase, className), ...props });
|
|
237
|
+
}
|
|
238
|
+
function WindowDismiss({ className, ...props }) {
|
|
239
|
+
return /* @__PURE__ */ jsx6(ArkWindowCloseTrigger, { "aria-label": "Close", className: cn6(windowCloseTriggerBase, className), ...props });
|
|
240
|
+
}
|
|
241
|
+
function WindowBody({ className, ...props }) {
|
|
242
|
+
return /* @__PURE__ */ jsx6(ArkWindowBody, { className: cn6(windowBodyBase, className), ...props });
|
|
243
|
+
}
|
|
244
|
+
function WindowResizeTrigger({ axis = "se", className, ...props }) {
|
|
245
|
+
return /* @__PURE__ */ jsx6(ArkWindowResizeTrigger, { axis, className: cn6(windowResizeTriggerBase, className), ...props });
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// src/badge.tsx
|
|
249
|
+
import { ark as ark2 } from "@ark-ui/react/factory";
|
|
250
|
+
import { badgeVariants, cn as cn7 } from "@cloudvoyant/vortex-ui";
|
|
251
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
252
|
+
function Badge({ className, variant, color, size, ...props }) {
|
|
253
|
+
return /* @__PURE__ */ jsx7(ark2.span, { className: cn7(badgeVariants({ variant, color, size }), className), ...props });
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
// src/container.tsx
|
|
257
|
+
import { ark as ark3 } from "@ark-ui/react/factory";
|
|
258
|
+
import { containerBase, cn as cn8 } from "@cloudvoyant/vortex-ui";
|
|
259
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
260
|
+
function Container({ className, ...props }) {
|
|
261
|
+
return /* @__PURE__ */ jsx8(ark3.div, { className: cn8(containerBase, className), ...props });
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// src/row.tsx
|
|
265
|
+
import { ark as ark4 } from "@ark-ui/react/factory";
|
|
266
|
+
import { rowBase, cn as cn9 } from "@cloudvoyant/vortex-ui";
|
|
267
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
268
|
+
function Row({ className, ...props }) {
|
|
269
|
+
return /* @__PURE__ */ jsx9(ark4.div, { className: cn9(rowBase, className), ...props });
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// src/col.tsx
|
|
273
|
+
import { ark as ark5 } from "@ark-ui/react/factory";
|
|
274
|
+
import { colBase, cn as cn10 } from "@cloudvoyant/vortex-ui";
|
|
275
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
276
|
+
function Col({ className, ...props }) {
|
|
277
|
+
return /* @__PURE__ */ jsx10(ark5.div, { className: cn10(colBase, className), ...props });
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
// src/center.tsx
|
|
281
|
+
import { ark as ark6 } from "@ark-ui/react/factory";
|
|
282
|
+
import { centerBase, cn as cn11 } from "@cloudvoyant/vortex-ui";
|
|
283
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
284
|
+
function Center({ className, ...props }) {
|
|
285
|
+
return /* @__PURE__ */ jsx11(ark6.div, { className: cn11(centerBase, className), ...props });
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
// src/portal.tsx
|
|
289
|
+
import { Portal as Portal5 } from "@ark-ui/react/portal";
|
|
290
|
+
|
|
291
|
+
// src/item.tsx
|
|
292
|
+
import { ark as ark7 } from "@ark-ui/react/factory";
|
|
293
|
+
import { itemVariants, cn as cn12 } from "@cloudvoyant/vortex-ui";
|
|
294
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
295
|
+
function Item({ className, variant, ...props }) {
|
|
296
|
+
return /* @__PURE__ */ jsx12(ark7.div, { className: cn12(itemVariants({ variant }), className), ...props });
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
// src/card/root.tsx
|
|
300
|
+
import { ark as ark8 } from "@ark-ui/react/factory";
|
|
301
|
+
import { cardVariants, cn as cn13 } from "@cloudvoyant/vortex-ui";
|
|
302
|
+
|
|
303
|
+
// src/card/context.ts
|
|
304
|
+
import { createContext, useContext } from "react";
|
|
305
|
+
var CardOrientationContext = createContext("vertical");
|
|
306
|
+
function useCardOrientation() {
|
|
307
|
+
return useContext(CardOrientationContext);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
// src/card/root.tsx
|
|
311
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
312
|
+
function Card({ className, variant, size, orientation, children, ...props }) {
|
|
313
|
+
const resolvedOrientation = orientation ?? "vertical";
|
|
314
|
+
return /* @__PURE__ */ jsx13(CardOrientationContext.Provider, { value: resolvedOrientation, children: /* @__PURE__ */ jsx13(ark8.div, { className: cn13(cardVariants({ variant, size, orientation: resolvedOrientation }), className), ...props, children }) });
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
// src/card/header.tsx
|
|
318
|
+
import { ark as ark9 } from "@ark-ui/react/factory";
|
|
319
|
+
import { cardHeaderBase, cn as cn14 } from "@cloudvoyant/vortex-ui";
|
|
320
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
321
|
+
function CardHeader({ className, ...props }) {
|
|
322
|
+
return /* @__PURE__ */ jsx14(ark9.div, { className: cn14(cardHeaderBase, className), ...props });
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
// src/card/body.tsx
|
|
326
|
+
import { ark as ark10 } from "@ark-ui/react/factory";
|
|
327
|
+
import { cardBodyBase, cn as cn15 } from "@cloudvoyant/vortex-ui";
|
|
328
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
329
|
+
function CardBody({ className, ...props }) {
|
|
330
|
+
return /* @__PURE__ */ jsx15(ark10.div, { className: cn15(cardBodyBase, className), ...props });
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
// src/card/footer.tsx
|
|
334
|
+
import { ark as ark11 } from "@ark-ui/react/factory";
|
|
335
|
+
import { cardFooterBase, cn as cn16 } from "@cloudvoyant/vortex-ui";
|
|
336
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
337
|
+
function CardFooter({ className, ...props }) {
|
|
338
|
+
return /* @__PURE__ */ jsx16(ark11.div, { className: cn16(cardFooterBase, className), ...props });
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
// src/card/title.tsx
|
|
342
|
+
import { ark as ark12 } from "@ark-ui/react/factory";
|
|
343
|
+
import { cardTitleBase, cn as cn17 } from "@cloudvoyant/vortex-ui";
|
|
344
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
345
|
+
function CardTitle({ className, ...props }) {
|
|
346
|
+
return /* @__PURE__ */ jsx17(ark12.h3, { className: cn17(cardTitleBase, className), ...props });
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
// src/card/description.tsx
|
|
350
|
+
import { ark as ark13 } from "@ark-ui/react/factory";
|
|
351
|
+
import { cardDescriptionBase, cn as cn18 } from "@cloudvoyant/vortex-ui";
|
|
352
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
353
|
+
function CardDescription({ className, ...props }) {
|
|
354
|
+
return /* @__PURE__ */ jsx18(ark13.p, { className: cn18(cardDescriptionBase, className), ...props });
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
// src/card/cover.tsx
|
|
358
|
+
import { ark as ark14 } from "@ark-ui/react/factory";
|
|
359
|
+
import { cardCoverVariants, cn as cn19 } from "@cloudvoyant/vortex-ui";
|
|
360
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
361
|
+
function CardCover({ className, variant, orientation, ...props }) {
|
|
362
|
+
const contextOrientation = useCardOrientation();
|
|
363
|
+
return /* @__PURE__ */ jsx19(
|
|
364
|
+
ark14.div,
|
|
365
|
+
{
|
|
366
|
+
className: cn19(cardCoverVariants({ variant, orientation: orientation ?? contextOrientation }), className),
|
|
367
|
+
...props
|
|
368
|
+
}
|
|
369
|
+
);
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
// src/stack.tsx
|
|
373
|
+
import { ark as ark15 } from "@ark-ui/react/factory";
|
|
374
|
+
import { stackBase, hstackBase, vstackBase, cn as cn20 } from "@cloudvoyant/vortex-ui";
|
|
375
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
376
|
+
function Stack({ className, ...props }) {
|
|
377
|
+
return /* @__PURE__ */ jsx20(ark15.div, { className: cn20(stackBase, className), ...props });
|
|
378
|
+
}
|
|
379
|
+
function HStack({ className, ...props }) {
|
|
380
|
+
return /* @__PURE__ */ jsx20(ark15.div, { className: cn20(hstackBase, className), ...props });
|
|
381
|
+
}
|
|
382
|
+
function VStack({ className, ...props }) {
|
|
383
|
+
return /* @__PURE__ */ jsx20(ark15.div, { className: cn20(vstackBase, className), ...props });
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
// src/scroll.tsx
|
|
387
|
+
import {
|
|
388
|
+
ScrollAreaRoot as ArkRoot,
|
|
389
|
+
ScrollAreaViewport as ArkViewport,
|
|
390
|
+
ScrollAreaContent as ArkContent,
|
|
391
|
+
ScrollAreaScrollbar as ArkScrollbar,
|
|
392
|
+
ScrollAreaThumb as ArkThumb,
|
|
393
|
+
ScrollAreaCorner as ArkCorner
|
|
394
|
+
} from "@ark-ui/react/scroll-area";
|
|
395
|
+
import {
|
|
396
|
+
scrollRootBase,
|
|
397
|
+
scrollViewportBase,
|
|
398
|
+
scrollContentBase,
|
|
399
|
+
scrollScrollbarBase,
|
|
400
|
+
scrollThumbBase,
|
|
401
|
+
scrollCornerBase,
|
|
402
|
+
cn as cn21
|
|
403
|
+
} from "@cloudvoyant/vortex-ui";
|
|
404
|
+
import { Fragment, jsx as jsx21, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
405
|
+
function Scroll({
|
|
406
|
+
className,
|
|
407
|
+
orientation = "vertical",
|
|
408
|
+
variant = "default",
|
|
409
|
+
contentClassName,
|
|
410
|
+
thumbClassName,
|
|
411
|
+
viewportClassName,
|
|
412
|
+
children,
|
|
413
|
+
...props
|
|
414
|
+
}) {
|
|
415
|
+
return /* @__PURE__ */ jsxs3(ArkRoot, { className: cn21(scrollRootBase, className), ...props, children: [
|
|
416
|
+
/* @__PURE__ */ jsx21(ArkViewport, { className: cn21(scrollViewportBase, viewportClassName), children: /* @__PURE__ */ jsx21(ArkContent, { className: cn21(scrollContentBase, contentClassName), children }) }),
|
|
417
|
+
variant === "hidden" ? null : /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
418
|
+
(orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx21(ArkScrollbar, { orientation: "vertical", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx21(ArkThumb, { className: cn21(scrollThumbBase, thumbClassName) }) }),
|
|
419
|
+
(orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx21(ArkScrollbar, { orientation: "horizontal", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx21(ArkThumb, { className: cn21(scrollThumbBase, thumbClassName) }) }),
|
|
420
|
+
orientation === "both" && /* @__PURE__ */ jsx21(ArkCorner, { className: scrollCornerBase })
|
|
421
|
+
] })
|
|
422
|
+
] });
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
// src/page.tsx
|
|
426
|
+
import { ark as ark16 } from "@ark-ui/react/factory";
|
|
427
|
+
import {
|
|
428
|
+
pageVariants,
|
|
429
|
+
pageGutterAreaBase,
|
|
430
|
+
pageGutterVariants,
|
|
431
|
+
pageGutterContentVariants,
|
|
432
|
+
pageContentBase,
|
|
433
|
+
pageFooterBase,
|
|
434
|
+
pageSectionBase,
|
|
435
|
+
cn as cn22
|
|
436
|
+
} from "@cloudvoyant/vortex-ui";
|
|
437
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
438
|
+
function Page({ variant = "default", className, children, ...props }) {
|
|
439
|
+
return /* @__PURE__ */ jsx22(ark16.div, { "data-slot": "page", className: cn22(pageVariants({ variant }), className), ...props, children });
|
|
440
|
+
}
|
|
441
|
+
function PageGutter({
|
|
442
|
+
side = "left",
|
|
443
|
+
align = "start",
|
|
444
|
+
contentClassName,
|
|
445
|
+
className,
|
|
446
|
+
children,
|
|
447
|
+
...props
|
|
448
|
+
}) {
|
|
449
|
+
return /* @__PURE__ */ jsx22(ark16.div, { "data-slot": "page-gutter-area", className: cn22(pageGutterAreaBase, side === "right" && "[grid-area:right]"), children: /* @__PURE__ */ jsx22(ark16.div, { "data-slot": "page-gutter", className: cn22(pageGutterVariants({ side }), className), ...props, children: /* @__PURE__ */ jsx22(ark16.div, { "data-slot": "page-gutter-content", className: cn22(pageGutterContentVariants({ align }), contentClassName), children }) }) });
|
|
450
|
+
}
|
|
451
|
+
function PageContent({ className, children, ...props }) {
|
|
452
|
+
return /* @__PURE__ */ jsx22(ark16.main, { "data-slot": "page-content", className: cn22(pageContentBase, className), ...props, children });
|
|
453
|
+
}
|
|
454
|
+
function PageFooter({ className, children, ...props }) {
|
|
455
|
+
return /* @__PURE__ */ jsx22(ark16.footer, { "data-slot": "page-footer", className: cn22(pageFooterBase, className), ...props, children });
|
|
456
|
+
}
|
|
457
|
+
function PageSection({ className, children, ...props }) {
|
|
458
|
+
return /* @__PURE__ */ jsx22(ark16.section, { "data-slot": "page-section", className: cn22(pageSectionBase, className), ...props, children });
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
// src/splitter.tsx
|
|
462
|
+
import {
|
|
463
|
+
SplitterRoot as ArkSplitterRoot,
|
|
464
|
+
SplitterPanel as ArkSplitterPanel,
|
|
465
|
+
SplitterResizeTrigger as ArkSplitterResizeTrigger,
|
|
466
|
+
SplitterResizeTriggerIndicator as ArkSplitterResizeTriggerIndicator
|
|
467
|
+
} from "@ark-ui/react/splitter";
|
|
468
|
+
import {
|
|
469
|
+
splitterRootBase,
|
|
470
|
+
splitterPanelBase,
|
|
471
|
+
splitterResizeTriggerBase,
|
|
472
|
+
splitterResizeTriggerSeparatorBase,
|
|
473
|
+
splitterResizeTriggerIndicatorBase,
|
|
474
|
+
cn as cn23
|
|
475
|
+
} from "@cloudvoyant/vortex-ui";
|
|
476
|
+
import { jsx as jsx23, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
477
|
+
function Splitter({ className, ...props }) {
|
|
478
|
+
return /* @__PURE__ */ jsx23(ArkSplitterRoot, { className: cn23(splitterRootBase, className), ...props });
|
|
479
|
+
}
|
|
480
|
+
function SplitterPanel({ className, ...props }) {
|
|
481
|
+
return /* @__PURE__ */ jsx23(ArkSplitterPanel, { className: cn23(splitterPanelBase, className), ...props });
|
|
482
|
+
}
|
|
483
|
+
function SplitterResizeTrigger({ className, children, ...props }) {
|
|
484
|
+
return /* @__PURE__ */ jsxs4(ArkSplitterResizeTrigger, { className: cn23(splitterResizeTriggerBase, className), ...props, children: [
|
|
485
|
+
/* @__PURE__ */ jsx23("span", { "aria-hidden": true, "data-part": "separator", className: splitterResizeTriggerSeparatorBase }),
|
|
486
|
+
children
|
|
487
|
+
] });
|
|
488
|
+
}
|
|
489
|
+
function SplitterResizeTriggerIndicator({ className, ...props }) {
|
|
490
|
+
return /* @__PURE__ */ jsx23(ArkSplitterResizeTriggerIndicator, { className: cn23(splitterResizeTriggerIndicatorBase, className), ...props });
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
// src/sidebar/Provider.tsx
|
|
494
|
+
import * as React2 from "react";
|
|
495
|
+
import {
|
|
496
|
+
SIDEBAR_WIDTH,
|
|
497
|
+
SIDEBAR_WIDTH_ICON,
|
|
498
|
+
SIDEBAR_KEYBOARD_SHORTCUT,
|
|
499
|
+
sidebarStyles,
|
|
500
|
+
cn as cn24
|
|
501
|
+
} from "@cloudvoyant/vortex-ui";
|
|
502
|
+
|
|
503
|
+
// src/sidebar/context.ts
|
|
504
|
+
import * as React from "react";
|
|
505
|
+
var SidebarContext = React.createContext(null);
|
|
506
|
+
function useSidebar() {
|
|
507
|
+
const context = React.useContext(SidebarContext);
|
|
508
|
+
if (!context) {
|
|
509
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
510
|
+
}
|
|
511
|
+
return context;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
// src/sidebar/Provider.tsx
|
|
515
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
516
|
+
var SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
517
|
+
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
518
|
+
function useIsMobile() {
|
|
519
|
+
const [isMobile, setIsMobile] = React2.useState(false);
|
|
520
|
+
const [isMobileSet, setIsMobileSet] = React2.useState(false);
|
|
521
|
+
React2.useEffect(() => {
|
|
522
|
+
const mql = window.matchMedia("(max-width: 767px)");
|
|
523
|
+
const onChange = () => {
|
|
524
|
+
setIsMobile(window.innerWidth < 768);
|
|
525
|
+
setIsMobileSet(true);
|
|
526
|
+
};
|
|
527
|
+
onChange();
|
|
528
|
+
mql.addEventListener("change", onChange);
|
|
529
|
+
return () => mql.removeEventListener("change", onChange);
|
|
530
|
+
}, []);
|
|
531
|
+
return isMobile && isMobileSet;
|
|
532
|
+
}
|
|
533
|
+
function Provider({
|
|
534
|
+
defaultOpen = true,
|
|
535
|
+
open: openProp,
|
|
536
|
+
onOpenChange: setOpenProp,
|
|
537
|
+
className,
|
|
538
|
+
style,
|
|
539
|
+
children,
|
|
540
|
+
...props
|
|
541
|
+
}) {
|
|
542
|
+
const isMobile = useIsMobile();
|
|
543
|
+
const [openMobile, setOpenMobile] = React2.useState(false);
|
|
544
|
+
const [_open, _setOpen] = React2.useState(defaultOpen);
|
|
545
|
+
const open = openProp ?? _open;
|
|
546
|
+
const setOpen = React2.useCallback(
|
|
547
|
+
(value) => {
|
|
548
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
549
|
+
if (setOpenProp) {
|
|
550
|
+
setOpenProp(openState);
|
|
551
|
+
} else {
|
|
552
|
+
_setOpen(openState);
|
|
553
|
+
}
|
|
554
|
+
if (typeof document !== "undefined") {
|
|
555
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
556
|
+
}
|
|
557
|
+
},
|
|
558
|
+
[setOpenProp, open]
|
|
559
|
+
);
|
|
560
|
+
const toggleSidebar = React2.useCallback(() => {
|
|
561
|
+
return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
|
|
562
|
+
}, [isMobile, setOpen, setOpenMobile]);
|
|
563
|
+
React2.useEffect(() => {
|
|
564
|
+
if (openProp !== void 0) return;
|
|
565
|
+
if (typeof document === "undefined") return;
|
|
566
|
+
const cookie = document.cookie.split("; ").find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`));
|
|
567
|
+
if (cookie) {
|
|
568
|
+
_setOpen(cookie.split("=")[1] === "true");
|
|
569
|
+
}
|
|
570
|
+
}, [openProp]);
|
|
571
|
+
React2.useEffect(() => {
|
|
572
|
+
const handleKeyDown = (event) => {
|
|
573
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
574
|
+
event.preventDefault();
|
|
575
|
+
toggleSidebar();
|
|
576
|
+
}
|
|
577
|
+
};
|
|
578
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
579
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
580
|
+
}, [toggleSidebar]);
|
|
581
|
+
const state = open ? "expanded" : "collapsed";
|
|
582
|
+
const contextValue = React2.useMemo(
|
|
583
|
+
() => ({
|
|
584
|
+
state,
|
|
585
|
+
open,
|
|
586
|
+
setOpen,
|
|
587
|
+
isMobile,
|
|
588
|
+
openMobile,
|
|
589
|
+
setOpenMobile,
|
|
590
|
+
toggleSidebar
|
|
591
|
+
}),
|
|
592
|
+
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
|
593
|
+
);
|
|
594
|
+
return /* @__PURE__ */ jsx24(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx24(
|
|
595
|
+
Row,
|
|
596
|
+
{
|
|
597
|
+
"data-slot": "sidebar-wrapper",
|
|
598
|
+
style: {
|
|
599
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
600
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
601
|
+
...style
|
|
602
|
+
},
|
|
603
|
+
className: cn24(sidebarStyles.wrapperClass, className),
|
|
604
|
+
...props,
|
|
605
|
+
children
|
|
606
|
+
}
|
|
607
|
+
) });
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
// src/sidebar/Root.tsx
|
|
611
|
+
import {
|
|
612
|
+
DrawerRoot,
|
|
613
|
+
DrawerBackdrop,
|
|
614
|
+
DrawerPositioner,
|
|
615
|
+
DrawerContent,
|
|
616
|
+
DrawerTitle,
|
|
617
|
+
DrawerDescription,
|
|
618
|
+
DrawerCloseTrigger
|
|
619
|
+
} from "@ark-ui/react/drawer";
|
|
620
|
+
import { SIDEBAR_WIDTH_MOBILE, sidebarStyles as sidebarStyles2, cn as cn25 } from "@cloudvoyant/vortex-ui";
|
|
621
|
+
import { jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
622
|
+
function Root({
|
|
623
|
+
side = "left",
|
|
624
|
+
variant = "sidebar",
|
|
625
|
+
collapsible = "offcanvas",
|
|
626
|
+
className,
|
|
627
|
+
children,
|
|
628
|
+
...props
|
|
629
|
+
}) {
|
|
630
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
631
|
+
if (collapsible === "none") {
|
|
632
|
+
return /* @__PURE__ */ jsx25(
|
|
633
|
+
Col,
|
|
634
|
+
{
|
|
635
|
+
"data-slot": "sidebar",
|
|
636
|
+
"data-sidebar": "sidebar",
|
|
637
|
+
className: cn25("h-full w-(--sidebar-width) bg-sidebar text-sidebar-foreground", className),
|
|
638
|
+
...props,
|
|
639
|
+
children
|
|
640
|
+
}
|
|
641
|
+
);
|
|
642
|
+
}
|
|
643
|
+
if (isMobile) {
|
|
644
|
+
return /* @__PURE__ */ jsxs5(
|
|
645
|
+
DrawerRoot,
|
|
646
|
+
{
|
|
647
|
+
open: openMobile,
|
|
648
|
+
onOpenChange: (details) => setOpenMobile(details.open),
|
|
649
|
+
...props,
|
|
650
|
+
children: [
|
|
651
|
+
/* @__PURE__ */ jsx25(DrawerBackdrop, {}),
|
|
652
|
+
/* @__PURE__ */ jsx25(DrawerPositioner, { className: "w-(--sidebar-width)", children: /* @__PURE__ */ jsxs5(
|
|
653
|
+
DrawerContent,
|
|
654
|
+
{
|
|
655
|
+
"data-sidebar": "sidebar",
|
|
656
|
+
"data-slot": "sidebar",
|
|
657
|
+
"data-mobile": "true",
|
|
658
|
+
className: cn25("w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", className),
|
|
659
|
+
style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
|
|
660
|
+
children: [
|
|
661
|
+
/* @__PURE__ */ jsx25(DrawerTitle, { className: "sr-only", children: "Sidebar" }),
|
|
662
|
+
/* @__PURE__ */ jsx25(DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
|
|
663
|
+
/* @__PURE__ */ jsx25(DrawerCloseTrigger, { className: "hidden" }),
|
|
664
|
+
/* @__PURE__ */ jsx25(Col, { className: "h-full w-full", children })
|
|
665
|
+
]
|
|
666
|
+
}
|
|
667
|
+
) })
|
|
668
|
+
]
|
|
669
|
+
}
|
|
670
|
+
);
|
|
671
|
+
}
|
|
672
|
+
return /* @__PURE__ */ jsxs5(
|
|
673
|
+
"div",
|
|
674
|
+
{
|
|
675
|
+
className: "group peer hidden text-sidebar-foreground md:block",
|
|
676
|
+
"data-state": state,
|
|
677
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
678
|
+
"data-variant": variant,
|
|
679
|
+
"data-side": side,
|
|
680
|
+
"data-slot": "sidebar",
|
|
681
|
+
children: [
|
|
682
|
+
/* @__PURE__ */ jsx25(
|
|
683
|
+
"div",
|
|
684
|
+
{
|
|
685
|
+
"data-slot": "sidebar-gap",
|
|
686
|
+
className: cn25(
|
|
687
|
+
sidebarStyles2.gapClass,
|
|
688
|
+
side === "right" && "rotate-180",
|
|
689
|
+
variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
|
690
|
+
)
|
|
691
|
+
}
|
|
692
|
+
),
|
|
693
|
+
/* @__PURE__ */ jsx25(
|
|
694
|
+
"div",
|
|
695
|
+
{
|
|
696
|
+
"data-slot": "sidebar-container",
|
|
697
|
+
className: cn25(
|
|
698
|
+
sidebarStyles2.containerClass,
|
|
699
|
+
side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
700
|
+
variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
701
|
+
className
|
|
702
|
+
),
|
|
703
|
+
...props,
|
|
704
|
+
children: /* @__PURE__ */ jsx25(
|
|
705
|
+
"div",
|
|
706
|
+
{
|
|
707
|
+
"data-sidebar": "sidebar",
|
|
708
|
+
"data-slot": "sidebar-inner",
|
|
709
|
+
"data-variant": variant,
|
|
710
|
+
className: cn25(sidebarStyles2.innerClass),
|
|
711
|
+
children
|
|
712
|
+
}
|
|
713
|
+
)
|
|
714
|
+
}
|
|
715
|
+
)
|
|
716
|
+
]
|
|
717
|
+
}
|
|
718
|
+
);
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
// src/sidebar/Header.tsx
|
|
722
|
+
import { sidebarStyles as sidebarStyles3, cn as cn26 } from "@cloudvoyant/vortex-ui";
|
|
723
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
724
|
+
function Header({ className, ...props }) {
|
|
725
|
+
return /* @__PURE__ */ jsx26(
|
|
726
|
+
Col,
|
|
727
|
+
{
|
|
728
|
+
"data-slot": "sidebar-header",
|
|
729
|
+
"data-sidebar": "header",
|
|
730
|
+
className: cn26(sidebarStyles3.headerClass, className),
|
|
731
|
+
...props
|
|
732
|
+
}
|
|
733
|
+
);
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
// src/sidebar/Footer.tsx
|
|
737
|
+
import { sidebarStyles as sidebarStyles4, cn as cn27 } from "@cloudvoyant/vortex-ui";
|
|
738
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
739
|
+
function Footer({ className, ...props }) {
|
|
740
|
+
return /* @__PURE__ */ jsx27(
|
|
741
|
+
Col,
|
|
742
|
+
{
|
|
743
|
+
"data-slot": "sidebar-footer",
|
|
744
|
+
"data-sidebar": "footer",
|
|
745
|
+
className: cn27(sidebarStyles4.footerClass, className),
|
|
746
|
+
...props
|
|
747
|
+
}
|
|
748
|
+
);
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
// src/sidebar/Separator.tsx
|
|
752
|
+
import { ark as ark17 } from "@ark-ui/react/factory";
|
|
753
|
+
import { sidebarStyles as sidebarStyles5, cn as cn28 } from "@cloudvoyant/vortex-ui";
|
|
754
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
755
|
+
function Separator({ className, ...props }) {
|
|
756
|
+
return /* @__PURE__ */ jsx28(
|
|
757
|
+
ark17.div,
|
|
758
|
+
{
|
|
759
|
+
"data-slot": "sidebar-separator",
|
|
760
|
+
"data-sidebar": "separator",
|
|
761
|
+
role: "separator",
|
|
762
|
+
className: cn28(sidebarStyles5.separatorClass, className),
|
|
763
|
+
...props
|
|
764
|
+
}
|
|
765
|
+
);
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
// src/sidebar/Content.tsx
|
|
769
|
+
import { sidebarStyles as sidebarStyles6, cn as cn29 } from "@cloudvoyant/vortex-ui";
|
|
770
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
771
|
+
function Content({ className, ...props }) {
|
|
772
|
+
return /* @__PURE__ */ jsx29(
|
|
773
|
+
Col,
|
|
774
|
+
{
|
|
775
|
+
"data-slot": "sidebar-content",
|
|
776
|
+
"data-sidebar": "content",
|
|
777
|
+
className: cn29(sidebarStyles6.contentClass, className),
|
|
778
|
+
...props
|
|
779
|
+
}
|
|
780
|
+
);
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
// src/sidebar/Group.tsx
|
|
784
|
+
import { sidebarStyles as sidebarStyles7, cn as cn30 } from "@cloudvoyant/vortex-ui";
|
|
785
|
+
import { jsx as jsx30, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
786
|
+
function Group({ label, className, children, ...props }) {
|
|
787
|
+
return /* @__PURE__ */ jsxs6(Col, { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn30(sidebarStyles7.groupClass, className), ...props, children: [
|
|
788
|
+
label && /* @__PURE__ */ jsx30("div", { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn30(sidebarStyles7.groupLabelClass), children: label }),
|
|
789
|
+
/* @__PURE__ */ jsx30(
|
|
790
|
+
"div",
|
|
791
|
+
{
|
|
792
|
+
"data-slot": "sidebar-group-content",
|
|
793
|
+
"data-sidebar": "group-content",
|
|
794
|
+
className: cn30(sidebarStyles7.groupContentClass),
|
|
795
|
+
children
|
|
796
|
+
}
|
|
797
|
+
)
|
|
798
|
+
] });
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
// src/sidebar/GroupAction.tsx
|
|
802
|
+
import { ark as ark18 } from "@ark-ui/react/factory";
|
|
803
|
+
import { sidebarStyles as sidebarStyles8, cn as cn31 } from "@cloudvoyant/vortex-ui";
|
|
804
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
805
|
+
function GroupAction({ className, asChild = false, ...props }) {
|
|
806
|
+
return /* @__PURE__ */ jsx31(
|
|
807
|
+
ark18.button,
|
|
808
|
+
{
|
|
809
|
+
"data-slot": "sidebar-group-action",
|
|
810
|
+
"data-sidebar": "group-action",
|
|
811
|
+
asChild,
|
|
812
|
+
type: "button",
|
|
813
|
+
className: cn31(sidebarStyles8.groupActionClass, className),
|
|
814
|
+
...props
|
|
815
|
+
}
|
|
816
|
+
);
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
// src/sidebar/Menu.tsx
|
|
820
|
+
import { ark as ark19 } from "@ark-ui/react/factory";
|
|
821
|
+
import { sidebarStyles as sidebarStyles9, cn as cn32 } from "@cloudvoyant/vortex-ui";
|
|
822
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
823
|
+
function Menu({ className, ...props }) {
|
|
824
|
+
return /* @__PURE__ */ jsx32(
|
|
825
|
+
ark19.ul,
|
|
826
|
+
{
|
|
827
|
+
"data-slot": "sidebar-menu",
|
|
828
|
+
"data-sidebar": "menu",
|
|
829
|
+
className: cn32(sidebarStyles9.menuClass, className),
|
|
830
|
+
...props
|
|
831
|
+
}
|
|
832
|
+
);
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
// src/sidebar/MenuItem.tsx
|
|
836
|
+
import { ark as ark20 } from "@ark-ui/react/factory";
|
|
837
|
+
import { sidebarStyles as sidebarStyles10, cn as cn33 } from "@cloudvoyant/vortex-ui";
|
|
838
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
839
|
+
function MenuItem({ className, ...props }) {
|
|
840
|
+
return /* @__PURE__ */ jsx33(
|
|
841
|
+
ark20.li,
|
|
842
|
+
{
|
|
843
|
+
"data-slot": "sidebar-menu-item",
|
|
844
|
+
"data-sidebar": "menu-item",
|
|
845
|
+
className: cn33(sidebarStyles10.menuItemClass, className),
|
|
846
|
+
...props
|
|
847
|
+
}
|
|
848
|
+
);
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
// src/sidebar/MenuButton.tsx
|
|
852
|
+
import { ark as ark21 } from "@ark-ui/react/factory";
|
|
853
|
+
import {
|
|
854
|
+
TooltipRoot,
|
|
855
|
+
TooltipTrigger as TooltipTrigger2,
|
|
856
|
+
TooltipPositioner,
|
|
857
|
+
TooltipContent as ArkTooltipContent2
|
|
858
|
+
} from "@ark-ui/react/tooltip";
|
|
859
|
+
import { sidebarMenuButtonVariants, sidebarStyles as sidebarStyles11, cn as cn34 } from "@cloudvoyant/vortex-ui";
|
|
860
|
+
import { jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
861
|
+
function MenuButton({
|
|
862
|
+
asChild = false,
|
|
863
|
+
isActive = false,
|
|
864
|
+
variant = "default",
|
|
865
|
+
size = "default",
|
|
866
|
+
tooltip,
|
|
867
|
+
className,
|
|
868
|
+
children,
|
|
869
|
+
...props
|
|
870
|
+
}) {
|
|
871
|
+
const { isMobile, state } = useSidebar();
|
|
872
|
+
const button = /* @__PURE__ */ jsx34(
|
|
873
|
+
ark21.button,
|
|
874
|
+
{
|
|
875
|
+
"data-slot": "sidebar-menu-button",
|
|
876
|
+
"data-sidebar": "menu-button",
|
|
877
|
+
"data-size": size,
|
|
878
|
+
"data-active": isActive,
|
|
879
|
+
asChild,
|
|
880
|
+
type: "button",
|
|
881
|
+
className: cn34(sidebarMenuButtonVariants({ variant, size }), className),
|
|
882
|
+
...props,
|
|
883
|
+
children
|
|
884
|
+
}
|
|
885
|
+
);
|
|
886
|
+
if (!tooltip || state !== "collapsed" || isMobile) {
|
|
887
|
+
return button;
|
|
888
|
+
}
|
|
889
|
+
const tooltipContent = typeof tooltip === "string" ? { children: tooltip } : tooltip;
|
|
890
|
+
return /* @__PURE__ */ jsxs7(TooltipRoot, { openDelay: 0, positioning: { placement: "right", gutter: 8 }, children: [
|
|
891
|
+
/* @__PURE__ */ jsx34(TooltipTrigger2, { asChild: true, children: button }),
|
|
892
|
+
/* @__PURE__ */ jsx34(TooltipPositioner, { children: /* @__PURE__ */ jsx34(ArkTooltipContent2, { className: cn34(sidebarStyles11.tooltipContentClass), ...tooltipContent }) })
|
|
893
|
+
] });
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
// src/sidebar/MenuLink.tsx
|
|
897
|
+
import { sidebarStyles as sidebarStyles12, cn as cn35 } from "@cloudvoyant/vortex-ui";
|
|
898
|
+
import { Fragment as Fragment2, jsx as jsx35, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
899
|
+
function MenuLink({
|
|
900
|
+
icon,
|
|
901
|
+
href,
|
|
902
|
+
onClick,
|
|
903
|
+
isActive,
|
|
904
|
+
variant,
|
|
905
|
+
size,
|
|
906
|
+
tooltip,
|
|
907
|
+
className,
|
|
908
|
+
children
|
|
909
|
+
}) {
|
|
910
|
+
const content = /* @__PURE__ */ jsxs8(Fragment2, { children: [
|
|
911
|
+
icon,
|
|
912
|
+
children != null && /* @__PURE__ */ jsx35("span", { children })
|
|
913
|
+
] });
|
|
914
|
+
return /* @__PURE__ */ jsx35("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn35(sidebarStyles12.menuItemClass), children: href == null ? /* @__PURE__ */ jsx35(
|
|
915
|
+
MenuButton,
|
|
916
|
+
{
|
|
917
|
+
isActive,
|
|
918
|
+
variant,
|
|
919
|
+
size,
|
|
920
|
+
tooltip,
|
|
921
|
+
className,
|
|
922
|
+
onClick,
|
|
923
|
+
children: content
|
|
924
|
+
}
|
|
925
|
+
) : /* @__PURE__ */ jsx35(MenuButton, { asChild: true, isActive, variant, size, tooltip, className, children: /* @__PURE__ */ jsx35("a", { href, onClick, children: content }) }) });
|
|
926
|
+
}
|
|
927
|
+
|
|
928
|
+
// src/sidebar/MenuAction.tsx
|
|
929
|
+
import { ark as ark22 } from "@ark-ui/react/factory";
|
|
930
|
+
import { sidebarStyles as sidebarStyles13, cn as cn36 } from "@cloudvoyant/vortex-ui";
|
|
931
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
932
|
+
function MenuAction({
|
|
933
|
+
className,
|
|
934
|
+
asChild = false,
|
|
935
|
+
showOnHover = false,
|
|
936
|
+
...props
|
|
937
|
+
}) {
|
|
938
|
+
return /* @__PURE__ */ jsx36(
|
|
939
|
+
ark22.button,
|
|
940
|
+
{
|
|
941
|
+
"data-slot": "sidebar-menu-action",
|
|
942
|
+
"data-sidebar": "menu-action",
|
|
943
|
+
asChild,
|
|
944
|
+
type: "button",
|
|
945
|
+
className: cn36(
|
|
946
|
+
sidebarStyles13.menuActionClass,
|
|
947
|
+
showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
|
|
948
|
+
className
|
|
949
|
+
),
|
|
950
|
+
...props
|
|
951
|
+
}
|
|
952
|
+
);
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
// src/sidebar/MenuBadge.tsx
|
|
956
|
+
import { ark as ark23 } from "@ark-ui/react/factory";
|
|
957
|
+
import { sidebarStyles as sidebarStyles14, cn as cn37 } from "@cloudvoyant/vortex-ui";
|
|
958
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
959
|
+
function MenuBadge({ className, ...props }) {
|
|
960
|
+
return /* @__PURE__ */ jsx37(
|
|
961
|
+
ark23.div,
|
|
962
|
+
{
|
|
963
|
+
"data-slot": "sidebar-menu-badge",
|
|
964
|
+
"data-sidebar": "menu-badge",
|
|
965
|
+
className: cn37(sidebarStyles14.menuBadgeClass, className),
|
|
966
|
+
...props
|
|
967
|
+
}
|
|
968
|
+
);
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
// src/sidebar/MenuSkeleton.tsx
|
|
972
|
+
import * as React3 from "react";
|
|
973
|
+
import { ark as ark24 } from "@ark-ui/react/factory";
|
|
974
|
+
import { sidebarStyles as sidebarStyles15, cn as cn38 } from "@cloudvoyant/vortex-ui";
|
|
975
|
+
import { jsx as jsx38, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
976
|
+
function MenuSkeleton({ className, showIcon = false, ...props }) {
|
|
977
|
+
const width = React3.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
978
|
+
return /* @__PURE__ */ jsxs9(
|
|
979
|
+
ark24.div,
|
|
980
|
+
{
|
|
981
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
982
|
+
"data-sidebar": "menu-skeleton",
|
|
983
|
+
className: cn38(sidebarStyles15.menuSkeletonClass, className),
|
|
984
|
+
...props,
|
|
985
|
+
children: [
|
|
986
|
+
showIcon && /* @__PURE__ */ jsx38(
|
|
987
|
+
ark24.div,
|
|
988
|
+
{
|
|
989
|
+
className: "size-4 shrink-0 animate-pulse rounded-md bg-sidebar-accent",
|
|
990
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
991
|
+
}
|
|
992
|
+
),
|
|
993
|
+
/* @__PURE__ */ jsx38(
|
|
994
|
+
ark24.div,
|
|
995
|
+
{
|
|
996
|
+
className: "h-4 max-w-(--skeleton-width) flex-1 animate-pulse rounded-md bg-sidebar-accent",
|
|
997
|
+
"data-sidebar": "menu-skeleton-text",
|
|
998
|
+
style: { "--skeleton-width": width }
|
|
999
|
+
}
|
|
1000
|
+
)
|
|
1001
|
+
]
|
|
1002
|
+
}
|
|
1003
|
+
);
|
|
1004
|
+
}
|
|
1005
|
+
|
|
1006
|
+
// src/sidebar/MenuSub.tsx
|
|
1007
|
+
import { ark as ark25 } from "@ark-ui/react/factory";
|
|
1008
|
+
import { sidebarStyles as sidebarStyles16, cn as cn39 } from "@cloudvoyant/vortex-ui";
|
|
1009
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
1010
|
+
function MenuSub({ className, ...props }) {
|
|
1011
|
+
return /* @__PURE__ */ jsx39(
|
|
1012
|
+
ark25.ul,
|
|
1013
|
+
{
|
|
1014
|
+
"data-slot": "sidebar-menu-sub",
|
|
1015
|
+
"data-sidebar": "menu-sub",
|
|
1016
|
+
className: cn39(sidebarStyles16.menuSubClass, className),
|
|
1017
|
+
...props
|
|
1018
|
+
}
|
|
1019
|
+
);
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
// src/sidebar/MenuSubItem.tsx
|
|
1023
|
+
import { ark as ark26 } from "@ark-ui/react/factory";
|
|
1024
|
+
import { sidebarStyles as sidebarStyles17, cn as cn40 } from "@cloudvoyant/vortex-ui";
|
|
1025
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
1026
|
+
function MenuSubItem({ className, ...props }) {
|
|
1027
|
+
return /* @__PURE__ */ jsx40(
|
|
1028
|
+
ark26.li,
|
|
1029
|
+
{
|
|
1030
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
1031
|
+
"data-sidebar": "menu-sub-item",
|
|
1032
|
+
className: cn40(sidebarStyles17.menuSubItemClass, className),
|
|
1033
|
+
...props
|
|
1034
|
+
}
|
|
1035
|
+
);
|
|
1036
|
+
}
|
|
1037
|
+
|
|
1038
|
+
// src/sidebar/MenuSubButton.tsx
|
|
1039
|
+
import { ark as ark27 } from "@ark-ui/react/factory";
|
|
1040
|
+
import { sidebarStyles as sidebarStyles18, cn as cn41 } from "@cloudvoyant/vortex-ui";
|
|
1041
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
1042
|
+
function MenuSubButton({
|
|
1043
|
+
asChild = false,
|
|
1044
|
+
size = "md",
|
|
1045
|
+
isActive = false,
|
|
1046
|
+
className,
|
|
1047
|
+
...props
|
|
1048
|
+
}) {
|
|
1049
|
+
return /* @__PURE__ */ jsx41(
|
|
1050
|
+
ark27.a,
|
|
1051
|
+
{
|
|
1052
|
+
"data-slot": "sidebar-menu-sub-button",
|
|
1053
|
+
"data-sidebar": "menu-sub-button",
|
|
1054
|
+
"data-size": size,
|
|
1055
|
+
"data-active": isActive,
|
|
1056
|
+
asChild,
|
|
1057
|
+
className: cn41(sidebarStyles18.menuSubButtonClass, className),
|
|
1058
|
+
...props
|
|
1059
|
+
}
|
|
1060
|
+
);
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
// src/sidebar/Trigger.tsx
|
|
1064
|
+
import { ark as ark28 } from "@ark-ui/react/factory";
|
|
1065
|
+
import { sidebarStyles as sidebarStyles19, cn as cn42 } from "@cloudvoyant/vortex-ui";
|
|
1066
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
1067
|
+
function Trigger({ className, onClick, children, ...props }) {
|
|
1068
|
+
const { toggleSidebar } = useSidebar();
|
|
1069
|
+
return /* @__PURE__ */ jsx42(
|
|
1070
|
+
ark28.button,
|
|
1071
|
+
{
|
|
1072
|
+
"data-sidebar": "trigger",
|
|
1073
|
+
"data-slot": "sidebar-trigger",
|
|
1074
|
+
type: "button",
|
|
1075
|
+
"aria-label": "Toggle Sidebar",
|
|
1076
|
+
className: cn42(sidebarStyles19.triggerClass, className),
|
|
1077
|
+
onClick: (event) => {
|
|
1078
|
+
onClick?.(event);
|
|
1079
|
+
toggleSidebar();
|
|
1080
|
+
},
|
|
1081
|
+
...props,
|
|
1082
|
+
children
|
|
1083
|
+
}
|
|
1084
|
+
);
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
// src/sidebar/Rail.tsx
|
|
1088
|
+
import { ark as ark29 } from "@ark-ui/react/factory";
|
|
1089
|
+
import { sidebarStyles as sidebarStyles20, cn as cn43 } from "@cloudvoyant/vortex-ui";
|
|
1090
|
+
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
1091
|
+
function Rail({ className, ...props }) {
|
|
1092
|
+
const { toggleSidebar } = useSidebar();
|
|
1093
|
+
return /* @__PURE__ */ jsx43(
|
|
1094
|
+
ark29.button,
|
|
1095
|
+
{
|
|
1096
|
+
"data-sidebar": "rail",
|
|
1097
|
+
"data-slot": "sidebar-rail",
|
|
1098
|
+
type: "button",
|
|
1099
|
+
"aria-label": "Toggle Sidebar",
|
|
1100
|
+
tabIndex: -1,
|
|
1101
|
+
onClick: toggleSidebar,
|
|
1102
|
+
title: "Toggle Sidebar",
|
|
1103
|
+
className: cn43(sidebarStyles20.railClass, className),
|
|
1104
|
+
...props
|
|
1105
|
+
}
|
|
1106
|
+
);
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
// src/sidebar/Inset.tsx
|
|
1110
|
+
import { ark as ark30 } from "@ark-ui/react/factory";
|
|
1111
|
+
import { sidebarStyles as sidebarStyles21, cn as cn44 } from "@cloudvoyant/vortex-ui";
|
|
1112
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
1113
|
+
function Inset({ className, ...props }) {
|
|
1114
|
+
return /* @__PURE__ */ jsx44(ark30.main, { "data-slot": "sidebar-inset", className: cn44(sidebarStyles21.insetClass, className), ...props });
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
// src/sidebar/Input.tsx
|
|
1118
|
+
import { ark as ark31 } from "@ark-ui/react/factory";
|
|
1119
|
+
import { sidebarStyles as sidebarStyles22, cn as cn45 } from "@cloudvoyant/vortex-ui";
|
|
1120
|
+
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
1121
|
+
function Input({ className, ...props }) {
|
|
1122
|
+
return /* @__PURE__ */ jsx45(
|
|
1123
|
+
ark31.input,
|
|
1124
|
+
{
|
|
1125
|
+
"data-slot": "sidebar-input",
|
|
1126
|
+
"data-sidebar": "input",
|
|
1127
|
+
className: cn45(sidebarStyles22.inputClass, className),
|
|
1128
|
+
...props
|
|
1129
|
+
}
|
|
1130
|
+
);
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
// src/tabs.tsx
|
|
1134
|
+
import {
|
|
1135
|
+
TabsRoot,
|
|
1136
|
+
TabList,
|
|
1137
|
+
TabIndicator,
|
|
1138
|
+
TabTrigger,
|
|
1139
|
+
TabContent,
|
|
1140
|
+
useTabsContext
|
|
1141
|
+
} from "@ark-ui/react/tabs";
|
|
1142
|
+
import {
|
|
1143
|
+
tabsRootBase,
|
|
1144
|
+
tabsListBase,
|
|
1145
|
+
tabsListVariants,
|
|
1146
|
+
tabsIndicatorBase,
|
|
1147
|
+
tabsIndicatorVariants,
|
|
1148
|
+
tabsTriggerBase,
|
|
1149
|
+
tabsContentBase,
|
|
1150
|
+
cn as cn46
|
|
1151
|
+
} from "@cloudvoyant/vortex-ui";
|
|
1152
|
+
import { jsx as jsx46, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1153
|
+
function Tabs({ className, lazyMount = true, unmountOnExit = true, ...props }) {
|
|
1154
|
+
return /* @__PURE__ */ jsx46(TabsRoot, { lazyMount, unmountOnExit, className: cn46(tabsRootBase, className), ...props });
|
|
1155
|
+
}
|
|
1156
|
+
function TabsList({ variant = "default", className, children, ...props }) {
|
|
1157
|
+
return /* @__PURE__ */ jsxs10(TabList, { className: cn46(tabsListBase, tabsListVariants({ variant }), className), ...props, children: [
|
|
1158
|
+
children,
|
|
1159
|
+
/* @__PURE__ */ jsx46(TabIndicator, { className: cn46(tabsIndicatorBase, tabsIndicatorVariants({ variant })) })
|
|
1160
|
+
] });
|
|
1161
|
+
}
|
|
1162
|
+
function TabsTrigger({ className, ...props }) {
|
|
1163
|
+
return /* @__PURE__ */ jsx46(TabTrigger, { className: cn46(tabsTriggerBase, className), ...props });
|
|
1164
|
+
}
|
|
1165
|
+
function TabsContent({ className, ...props }) {
|
|
1166
|
+
return /* @__PURE__ */ jsx46(TabContent, { className: cn46(tabsContentBase, className), ...props });
|
|
1167
|
+
}
|
|
1168
|
+
var useTabs = useTabsContext;
|
|
1169
|
+
|
|
1170
|
+
// src/pagination.tsx
|
|
1171
|
+
import {
|
|
1172
|
+
PaginationRoot as ArkPaginationRoot,
|
|
1173
|
+
PaginationContext as ArkPaginationContext,
|
|
1174
|
+
PaginationItem as ArkPaginationItem,
|
|
1175
|
+
PaginationPrevTrigger,
|
|
1176
|
+
PaginationNextTrigger,
|
|
1177
|
+
PaginationEllipsis as ArkPaginationEllipsis
|
|
1178
|
+
} from "@ark-ui/react/pagination";
|
|
1179
|
+
import { ark as ark32 } from "@ark-ui/react/factory";
|
|
1180
|
+
import {
|
|
1181
|
+
paginationRootBase,
|
|
1182
|
+
paginationTriggerBase,
|
|
1183
|
+
paginationItemBase,
|
|
1184
|
+
paginationEllipsisBase,
|
|
1185
|
+
cn as cn47
|
|
1186
|
+
} from "@cloudvoyant/vortex-ui";
|
|
1187
|
+
import { jsx as jsx47, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1188
|
+
function Pagination({ className, ...props }) {
|
|
1189
|
+
return /* @__PURE__ */ jsx47(ArkPaginationRoot, { className: cn47(paginationRootBase, className), ...props });
|
|
1190
|
+
}
|
|
1191
|
+
function PaginationPrevious(props) {
|
|
1192
|
+
return /* @__PURE__ */ jsx47(PaginationPrevTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs11(ark32.button, { className: cn47(paginationTriggerBase), children: [
|
|
1193
|
+
/* @__PURE__ */ jsx47(
|
|
1194
|
+
"svg",
|
|
1195
|
+
{
|
|
1196
|
+
viewBox: "0 0 24 24",
|
|
1197
|
+
fill: "none",
|
|
1198
|
+
stroke: "currentColor",
|
|
1199
|
+
strokeWidth: "2",
|
|
1200
|
+
strokeLinecap: "round",
|
|
1201
|
+
strokeLinejoin: "round",
|
|
1202
|
+
"aria-hidden": "true",
|
|
1203
|
+
children: /* @__PURE__ */ jsx47("path", { d: "m15 18-6-6 6-6" })
|
|
1204
|
+
}
|
|
1205
|
+
),
|
|
1206
|
+
"Previous"
|
|
1207
|
+
] }) });
|
|
1208
|
+
}
|
|
1209
|
+
function PaginationNext(props) {
|
|
1210
|
+
return /* @__PURE__ */ jsx47(PaginationNextTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs11(ark32.button, { className: cn47(paginationTriggerBase), children: [
|
|
1211
|
+
"Next",
|
|
1212
|
+
/* @__PURE__ */ jsx47(
|
|
1213
|
+
"svg",
|
|
1214
|
+
{
|
|
1215
|
+
viewBox: "0 0 24 24",
|
|
1216
|
+
fill: "none",
|
|
1217
|
+
stroke: "currentColor",
|
|
1218
|
+
strokeWidth: "2",
|
|
1219
|
+
strokeLinecap: "round",
|
|
1220
|
+
strokeLinejoin: "round",
|
|
1221
|
+
"aria-hidden": "true",
|
|
1222
|
+
children: /* @__PURE__ */ jsx47("path", { d: "m9 18 6-6-6-6" })
|
|
1223
|
+
}
|
|
1224
|
+
)
|
|
1225
|
+
] }) });
|
|
1226
|
+
}
|
|
1227
|
+
function PaginationItem({ className, children, ...rest }) {
|
|
1228
|
+
return /* @__PURE__ */ jsx47(ArkPaginationItem, { asChild: true, ...rest, children: /* @__PURE__ */ jsx47(ark32.button, { className: cn47(paginationItemBase, className), children }) });
|
|
1229
|
+
}
|
|
1230
|
+
function PaginationItems() {
|
|
1231
|
+
return /* @__PURE__ */ jsx47(ArkPaginationContext, { children: ({ pages }) => pages.map(
|
|
1232
|
+
(page, index) => page.type === "page" ? /* @__PURE__ */ jsx47(PaginationItem, { type: "page", value: page.value, children: page.value }, page.value) : /* @__PURE__ */ jsx47(PaginationEllipsis, { index }, `ellipsis-${index}`)
|
|
1233
|
+
) });
|
|
1234
|
+
}
|
|
1235
|
+
function PaginationEllipsis({ className, ...rest }) {
|
|
1236
|
+
return /* @__PURE__ */ jsx47(ArkPaginationEllipsis, { className: cn47(paginationEllipsisBase, className), ...rest, children: /* @__PURE__ */ jsxs11(
|
|
1237
|
+
"svg",
|
|
1238
|
+
{
|
|
1239
|
+
viewBox: "0 0 24 24",
|
|
1240
|
+
fill: "none",
|
|
1241
|
+
stroke: "currentColor",
|
|
1242
|
+
strokeWidth: "2",
|
|
1243
|
+
strokeLinecap: "round",
|
|
1244
|
+
strokeLinejoin: "round",
|
|
1245
|
+
"aria-hidden": "true",
|
|
1246
|
+
children: [
|
|
1247
|
+
/* @__PURE__ */ jsx47("circle", { cx: "12", cy: "12", r: "1" }),
|
|
1248
|
+
/* @__PURE__ */ jsx47("circle", { cx: "19", cy: "12", r: "1" }),
|
|
1249
|
+
/* @__PURE__ */ jsx47("circle", { cx: "5", cy: "12", r: "1" })
|
|
1250
|
+
]
|
|
1251
|
+
}
|
|
1252
|
+
) });
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
// src/navbar.tsx
|
|
1256
|
+
import * as React4 from "react";
|
|
1257
|
+
import { ark as ark33 } from "@ark-ui/react/factory";
|
|
1258
|
+
import { Portal as Portal6 } from "@ark-ui/react/portal";
|
|
1259
|
+
import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "@ark-ui/react/collapsible";
|
|
1260
|
+
import {
|
|
1261
|
+
DialogRoot,
|
|
1262
|
+
DialogBackdrop as DialogBackdrop2,
|
|
1263
|
+
DialogPositioner,
|
|
1264
|
+
DialogContent as DialogContent2,
|
|
1265
|
+
DialogCloseTrigger,
|
|
1266
|
+
DialogTitle as DialogTitle2,
|
|
1267
|
+
DialogDescription as DialogDescription2
|
|
1268
|
+
} from "@ark-ui/react/dialog";
|
|
1269
|
+
import {
|
|
1270
|
+
NavigationMenuRoot as ArkNavMenuRoot,
|
|
1271
|
+
NavigationMenuList as ArkNavMenuList,
|
|
1272
|
+
NavigationMenuItem as ArkNavMenuItem,
|
|
1273
|
+
NavigationMenuTrigger as ArkNavMenuTrigger,
|
|
1274
|
+
NavigationMenuContent as ArkNavMenuContent,
|
|
1275
|
+
NavigationMenuLink as ArkNavMenuLink,
|
|
1276
|
+
NavigationMenuViewport as ArkNavMenuViewport,
|
|
1277
|
+
NavigationMenuViewportPositioner as ArkNavMenuViewportPositioner,
|
|
1278
|
+
NavigationMenuIndicator as ArkNavMenuIndicator
|
|
1279
|
+
} from "@ark-ui/react/navigation-menu";
|
|
1280
|
+
import {
|
|
1281
|
+
navbarVariants,
|
|
1282
|
+
navbarContainerBase,
|
|
1283
|
+
navbarDensityVariants,
|
|
1284
|
+
navbarShrunkBase,
|
|
1285
|
+
navbarBrandBase,
|
|
1286
|
+
navbarMenuBase,
|
|
1287
|
+
navbarMenuPlacementVariants,
|
|
1288
|
+
navbarActionsBase,
|
|
1289
|
+
navbarTriggerVariants,
|
|
1290
|
+
navbarActivationAreaBase,
|
|
1291
|
+
navbarMobileContentBase,
|
|
1292
|
+
navbarMobileHeaderBase,
|
|
1293
|
+
navbarMobileMenuBase,
|
|
1294
|
+
navbarMobileActionsBase,
|
|
1295
|
+
navbarMenuRootBase,
|
|
1296
|
+
navbarMenuListBase,
|
|
1297
|
+
navbarMenuItemBase,
|
|
1298
|
+
navbarMenuTriggerStyle,
|
|
1299
|
+
navbarMenuContentBase,
|
|
1300
|
+
navbarMenuLinkBase,
|
|
1301
|
+
navbarMobileMenuContentBase,
|
|
1302
|
+
navbarMobileMenuTriggerBase,
|
|
1303
|
+
navbarMenuViewportPositionerBase,
|
|
1304
|
+
navbarMenuViewportBase,
|
|
1305
|
+
navbarMenuIndicatorBase,
|
|
1306
|
+
cn as cn48
|
|
1307
|
+
} from "@cloudvoyant/vortex-ui";
|
|
1308
|
+
import { navbarMenuTriggerStyle as navbarMenuTriggerStyle2 } from "@cloudvoyant/vortex-ui";
|
|
1309
|
+
import { Fragment as Fragment3, jsx as jsx48, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1310
|
+
var SCROLL_THRESHOLD = 24;
|
|
1311
|
+
function resolveScrollContainer(el) {
|
|
1312
|
+
for (let n = el; n; n = n.parentElement) {
|
|
1313
|
+
const oy = getComputedStyle(n).overflowY;
|
|
1314
|
+
if (oy === "auto" || oy === "scroll" || oy === "overlay") return n;
|
|
1315
|
+
}
|
|
1316
|
+
return null;
|
|
1317
|
+
}
|
|
1318
|
+
var NavbarContext = React4.createContext(null);
|
|
1319
|
+
function useNavbar() {
|
|
1320
|
+
const context = React4.useContext(NavbarContext);
|
|
1321
|
+
if (!context) {
|
|
1322
|
+
throw new Error("Navbar parts must be used within a NavbarProvider.");
|
|
1323
|
+
}
|
|
1324
|
+
return context;
|
|
1325
|
+
}
|
|
1326
|
+
function useNavbarSlot(key, children) {
|
|
1327
|
+
const { setSlot } = useNavbar();
|
|
1328
|
+
React4.useLayoutEffect(() => {
|
|
1329
|
+
setSlot(key, children);
|
|
1330
|
+
}, [key, children, setSlot]);
|
|
1331
|
+
}
|
|
1332
|
+
var NavbarMenuStyleContext = React4.createContext({
|
|
1333
|
+
density: "relaxed",
|
|
1334
|
+
variant: "default",
|
|
1335
|
+
inContent: false
|
|
1336
|
+
});
|
|
1337
|
+
function NavbarProvider({ defaultOpen = false, children }) {
|
|
1338
|
+
const id = React4.useId();
|
|
1339
|
+
const [open, setOpen] = React4.useState(defaultOpen);
|
|
1340
|
+
const [scrolled, setScrolled] = React4.useState(false);
|
|
1341
|
+
const [hovered, setHovered] = React4.useState(false);
|
|
1342
|
+
const [slots, setSlots] = React4.useState({
|
|
1343
|
+
brand: null,
|
|
1344
|
+
actions: null
|
|
1345
|
+
});
|
|
1346
|
+
const portalRef = React4.useRef(null);
|
|
1347
|
+
const setSlot = React4.useCallback((key, node) => {
|
|
1348
|
+
setSlots((prev) => prev[key] === node ? prev : { ...prev, [key]: node });
|
|
1349
|
+
}, []);
|
|
1350
|
+
const contextValue = React4.useMemo(
|
|
1351
|
+
() => ({
|
|
1352
|
+
id,
|
|
1353
|
+
open,
|
|
1354
|
+
setOpen,
|
|
1355
|
+
scrolled,
|
|
1356
|
+
setScrolled,
|
|
1357
|
+
hovered,
|
|
1358
|
+
setHovered,
|
|
1359
|
+
slots,
|
|
1360
|
+
setSlot,
|
|
1361
|
+
portalRef,
|
|
1362
|
+
// Baseline config; the Navbar header overrides these with its props.
|
|
1363
|
+
variant: "sticky",
|
|
1364
|
+
floating: false,
|
|
1365
|
+
density: "relaxed"
|
|
1366
|
+
}),
|
|
1367
|
+
[id, open, scrolled, hovered, slots, setSlot]
|
|
1368
|
+
);
|
|
1369
|
+
return /* @__PURE__ */ jsx48(NavbarContext.Provider, { value: contextValue, children });
|
|
1370
|
+
}
|
|
1371
|
+
function Navbar({
|
|
1372
|
+
variant = "sticky",
|
|
1373
|
+
floating = false,
|
|
1374
|
+
density = "relaxed",
|
|
1375
|
+
className,
|
|
1376
|
+
children,
|
|
1377
|
+
...props
|
|
1378
|
+
}) {
|
|
1379
|
+
const base = useNavbar();
|
|
1380
|
+
const headerRef = React4.useRef(null);
|
|
1381
|
+
const { setScrolled, setHovered } = base;
|
|
1382
|
+
React4.useEffect(() => {
|
|
1383
|
+
const target = resolveScrollContainer(headerRef.current) ?? window;
|
|
1384
|
+
const getY = () => target === window ? window.scrollY : target.scrollTop;
|
|
1385
|
+
const onScroll = () => setScrolled(getY() > SCROLL_THRESHOLD);
|
|
1386
|
+
onScroll();
|
|
1387
|
+
target.addEventListener("scroll", onScroll, { passive: true });
|
|
1388
|
+
return () => target.removeEventListener("scroll", onScroll);
|
|
1389
|
+
}, [setScrolled]);
|
|
1390
|
+
const value = React4.useMemo(() => ({ ...base, variant, floating, density }), [base, variant, floating, density]);
|
|
1391
|
+
const hidden = variant === "hide" && base.scrolled && !base.hovered;
|
|
1392
|
+
const shrunk = variant === "shrink" && base.scrolled;
|
|
1393
|
+
React4.useLayoutEffect(() => {
|
|
1394
|
+
base.portalRef.current = headerRef.current?.parentElement ?? null;
|
|
1395
|
+
});
|
|
1396
|
+
React4.useEffect(() => {
|
|
1397
|
+
if (!base.open) return;
|
|
1398
|
+
const el = resolveScrollContainer(headerRef.current) ?? document.documentElement;
|
|
1399
|
+
const prev = el.style.overflow;
|
|
1400
|
+
el.style.overflow = "hidden";
|
|
1401
|
+
return () => {
|
|
1402
|
+
el.style.overflow = prev;
|
|
1403
|
+
};
|
|
1404
|
+
}, [base.open]);
|
|
1405
|
+
return /* @__PURE__ */ jsx48(NavbarContext.Provider, { value, children: /* @__PURE__ */ jsx48(
|
|
1406
|
+
"header",
|
|
1407
|
+
{
|
|
1408
|
+
ref: headerRef,
|
|
1409
|
+
"data-slot": "navbar",
|
|
1410
|
+
"data-scrolled": base.scrolled || void 0,
|
|
1411
|
+
"data-hidden": hidden || void 0,
|
|
1412
|
+
"data-shrunk": shrunk || void 0,
|
|
1413
|
+
className: cn48(
|
|
1414
|
+
navbarVariants({ variant, floating }),
|
|
1415
|
+
navbarContainerBase,
|
|
1416
|
+
navbarDensityVariants({ density }),
|
|
1417
|
+
shrunk && navbarShrunkBase,
|
|
1418
|
+
className
|
|
1419
|
+
),
|
|
1420
|
+
onMouseEnter: () => setHovered(true),
|
|
1421
|
+
onMouseLeave: () => setHovered(false),
|
|
1422
|
+
...props,
|
|
1423
|
+
children
|
|
1424
|
+
}
|
|
1425
|
+
) });
|
|
1426
|
+
}
|
|
1427
|
+
function NavbarActivationArea({ className, children, ...props }) {
|
|
1428
|
+
const { setHovered } = useNavbar();
|
|
1429
|
+
return /* @__PURE__ */ jsx48(
|
|
1430
|
+
ark33.div,
|
|
1431
|
+
{
|
|
1432
|
+
"data-slot": "navbar-activation-area",
|
|
1433
|
+
className: cn48(navbarActivationAreaBase, className),
|
|
1434
|
+
onMouseEnter: () => setHovered(true),
|
|
1435
|
+
onMouseLeave: () => setHovered(false),
|
|
1436
|
+
...props,
|
|
1437
|
+
children
|
|
1438
|
+
}
|
|
1439
|
+
);
|
|
1440
|
+
}
|
|
1441
|
+
function NavbarBrand({ className, children, ...props }) {
|
|
1442
|
+
useNavbarSlot("brand", children);
|
|
1443
|
+
return /* @__PURE__ */ jsx48(ark33.div, { "data-slot": "navbar-brand", className: cn48(navbarBrandBase, className), ...props, children });
|
|
1444
|
+
}
|
|
1445
|
+
function NavbarMenu({
|
|
1446
|
+
placement = "center",
|
|
1447
|
+
className,
|
|
1448
|
+
children,
|
|
1449
|
+
...props
|
|
1450
|
+
}) {
|
|
1451
|
+
const { scrolled, density, variant } = useNavbar();
|
|
1452
|
+
const menuDensity = density === "compact" || variant === "shrink" && scrolled ? "compact" : "relaxed";
|
|
1453
|
+
return /* @__PURE__ */ jsx48(NavbarMenuStyleContext.Provider, { value: { density: menuDensity, variant: "default", inContent: false }, children: /* @__PURE__ */ jsx48(
|
|
1454
|
+
ark33.div,
|
|
1455
|
+
{
|
|
1456
|
+
"data-slot": "navbar-menu",
|
|
1457
|
+
"data-placement": placement,
|
|
1458
|
+
className: cn48(navbarMenuBase, navbarMenuPlacementVariants({ placement }), className),
|
|
1459
|
+
children: /* @__PURE__ */ jsxs12(ArkNavMenuRoot, { "data-density": menuDensity, className: cn48(navbarMenuRootBase), ...props, children: [
|
|
1460
|
+
children,
|
|
1461
|
+
/* @__PURE__ */ jsx48(ArkNavMenuViewportPositioner, { className: cn48(navbarMenuViewportPositionerBase), children: /* @__PURE__ */ jsx48(ArkNavMenuViewport, { className: cn48(navbarMenuViewportBase) }) })
|
|
1462
|
+
] })
|
|
1463
|
+
}
|
|
1464
|
+
) });
|
|
1465
|
+
}
|
|
1466
|
+
function NavbarMenuList({ className, children, ...props }) {
|
|
1467
|
+
return /* @__PURE__ */ jsx48(ArkNavMenuList, { className: cn48(navbarMenuListBase, className), ...props, children });
|
|
1468
|
+
}
|
|
1469
|
+
function NavbarMenuItem({
|
|
1470
|
+
variant = "default",
|
|
1471
|
+
className,
|
|
1472
|
+
...props
|
|
1473
|
+
}) {
|
|
1474
|
+
const { density } = React4.useContext(NavbarMenuStyleContext);
|
|
1475
|
+
return /* @__PURE__ */ jsx48(NavbarMenuStyleContext.Provider, { value: { density, variant, inContent: false }, children: /* @__PURE__ */ jsx48(ArkNavMenuItem, { "data-variant": variant, className: cn48(navbarMenuItemBase, className), ...props }) });
|
|
1476
|
+
}
|
|
1477
|
+
function NavbarMenuTrigger({ asChild, className, children, ...props }) {
|
|
1478
|
+
const { density, variant } = React4.useContext(NavbarMenuStyleContext);
|
|
1479
|
+
const chevron = /* @__PURE__ */ jsx48(
|
|
1480
|
+
"svg",
|
|
1481
|
+
{
|
|
1482
|
+
className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
|
|
1483
|
+
"aria-hidden": "true",
|
|
1484
|
+
viewBox: "0 0 24 24",
|
|
1485
|
+
fill: "none",
|
|
1486
|
+
stroke: "currentColor",
|
|
1487
|
+
strokeWidth: "2",
|
|
1488
|
+
strokeLinecap: "round",
|
|
1489
|
+
strokeLinejoin: "round",
|
|
1490
|
+
children: /* @__PURE__ */ jsx48("path", { d: "m6 9 6 6 6-6" })
|
|
1491
|
+
}
|
|
1492
|
+
);
|
|
1493
|
+
return /* @__PURE__ */ jsx48(
|
|
1494
|
+
ArkNavMenuTrigger,
|
|
1495
|
+
{
|
|
1496
|
+
asChild,
|
|
1497
|
+
className: cn48(navbarMenuTriggerStyle({ density, variant }), className),
|
|
1498
|
+
...props,
|
|
1499
|
+
children: asChild ? children : /* @__PURE__ */ jsxs12(Fragment3, { children: [
|
|
1500
|
+
children,
|
|
1501
|
+
chevron
|
|
1502
|
+
] })
|
|
1503
|
+
}
|
|
1504
|
+
);
|
|
1505
|
+
}
|
|
1506
|
+
function NavbarMenuContent({ className, children, ...props }) {
|
|
1507
|
+
return /* @__PURE__ */ jsx48(NavbarMenuStyleContext.Provider, { value: { density: "relaxed", variant: "default", inContent: true }, children: /* @__PURE__ */ jsx48(ArkNavMenuContent, { className: cn48(navbarMenuContentBase, className), ...props, children }) });
|
|
1508
|
+
}
|
|
1509
|
+
function NavbarMenuLink({ className, children, ...props }) {
|
|
1510
|
+
const { density, variant, inContent } = React4.useContext(NavbarMenuStyleContext);
|
|
1511
|
+
const classes = inContent ? cn48(navbarMenuLinkBase, className) : cn48(navbarMenuTriggerStyle({ density, variant }), className);
|
|
1512
|
+
return /* @__PURE__ */ jsx48(ArkNavMenuLink, { className: classes, ...props, children });
|
|
1513
|
+
}
|
|
1514
|
+
function NavbarMobileMenu({ className, children, ...props }) {
|
|
1515
|
+
return /* @__PURE__ */ jsx48(CollapsibleRoot, { "data-slot": "navbar-mobile-menu", className: cn48("group", className), ...props, children });
|
|
1516
|
+
}
|
|
1517
|
+
function NavbarMobileMenuTrigger({ className, children, ...props }) {
|
|
1518
|
+
return /* @__PURE__ */ jsx48(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
|
|
1519
|
+
"button",
|
|
1520
|
+
{
|
|
1521
|
+
type: "button",
|
|
1522
|
+
"data-slot": "navbar-mobile-menu-trigger",
|
|
1523
|
+
className: cn48(navbarMobileMenuTriggerBase, className),
|
|
1524
|
+
...props,
|
|
1525
|
+
children: [
|
|
1526
|
+
children,
|
|
1527
|
+
/* @__PURE__ */ jsx48(
|
|
1528
|
+
"svg",
|
|
1529
|
+
{
|
|
1530
|
+
className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180",
|
|
1531
|
+
"aria-hidden": "true",
|
|
1532
|
+
viewBox: "0 0 24 24",
|
|
1533
|
+
fill: "none",
|
|
1534
|
+
stroke: "currentColor",
|
|
1535
|
+
strokeWidth: "2",
|
|
1536
|
+
strokeLinecap: "round",
|
|
1537
|
+
strokeLinejoin: "round",
|
|
1538
|
+
children: /* @__PURE__ */ jsx48("path", { d: "m6 9 6 6 6-6" })
|
|
1539
|
+
}
|
|
1540
|
+
)
|
|
1541
|
+
]
|
|
1542
|
+
}
|
|
1543
|
+
) });
|
|
1544
|
+
}
|
|
1545
|
+
function NavbarMobileMenuContent({ className, children, ...props }) {
|
|
1546
|
+
return /* @__PURE__ */ jsx48(CollapsibleContent, { children: /* @__PURE__ */ jsx48("div", { "data-slot": "navbar-mobile-menu-content", className: cn48(navbarMobileMenuContentBase, className), ...props, children }) });
|
|
1547
|
+
}
|
|
1548
|
+
function NavbarMenuViewport({ className, ...props }) {
|
|
1549
|
+
return /* @__PURE__ */ jsx48(ArkNavMenuViewport, { className: cn48(navbarMenuViewportBase, className), ...props });
|
|
1550
|
+
}
|
|
1551
|
+
function NavbarMenuIndicator({ className, ...props }) {
|
|
1552
|
+
return /* @__PURE__ */ jsx48(ArkNavMenuIndicator, { className: cn48(navbarMenuIndicatorBase, className), ...props });
|
|
1553
|
+
}
|
|
1554
|
+
function NavbarActions({ className, children, ...props }) {
|
|
1555
|
+
useNavbarSlot("actions", children);
|
|
1556
|
+
return /* @__PURE__ */ jsx48(ark33.div, { "data-slot": "navbar-actions", className: cn48(navbarActionsBase, className), ...props, children });
|
|
1557
|
+
}
|
|
1558
|
+
function NavbarTrigger({
|
|
1559
|
+
className,
|
|
1560
|
+
children,
|
|
1561
|
+
"aria-label": ariaLabel,
|
|
1562
|
+
...props
|
|
1563
|
+
}) {
|
|
1564
|
+
const { id, open, setOpen, floating } = useNavbar();
|
|
1565
|
+
return /* @__PURE__ */ jsx48(
|
|
1566
|
+
"button",
|
|
1567
|
+
{
|
|
1568
|
+
type: "button",
|
|
1569
|
+
"data-slot": "navbar-trigger",
|
|
1570
|
+
"aria-expanded": open,
|
|
1571
|
+
"aria-controls": id,
|
|
1572
|
+
"aria-label": ariaLabel ?? "Toggle navigation menu",
|
|
1573
|
+
className: cn48(navbarTriggerVariants({ floating }), "md:hidden", className),
|
|
1574
|
+
onClick: () => setOpen(!open),
|
|
1575
|
+
...props,
|
|
1576
|
+
children: children ?? /* @__PURE__ */ jsxs12(
|
|
1577
|
+
"svg",
|
|
1578
|
+
{
|
|
1579
|
+
className: "size-4",
|
|
1580
|
+
viewBox: "0 0 24 24",
|
|
1581
|
+
fill: "none",
|
|
1582
|
+
stroke: "currentColor",
|
|
1583
|
+
strokeWidth: "2",
|
|
1584
|
+
strokeLinecap: "round",
|
|
1585
|
+
strokeLinejoin: "round",
|
|
1586
|
+
"aria-hidden": "true",
|
|
1587
|
+
children: [
|
|
1588
|
+
/* @__PURE__ */ jsx48("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
|
|
1589
|
+
/* @__PURE__ */ jsx48("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
|
|
1590
|
+
/* @__PURE__ */ jsx48("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
|
|
1591
|
+
]
|
|
1592
|
+
}
|
|
1593
|
+
)
|
|
1594
|
+
}
|
|
1595
|
+
);
|
|
1596
|
+
}
|
|
1597
|
+
function NavbarMobileOverlay({ className, children, ...props }) {
|
|
1598
|
+
const { id, open, setOpen, slots, floating, portalRef } = useNavbar();
|
|
1599
|
+
React4.useEffect(() => {
|
|
1600
|
+
if (!open) return;
|
|
1601
|
+
const onKeydown = (event) => {
|
|
1602
|
+
if (event.key === "Escape") setOpen(false);
|
|
1603
|
+
};
|
|
1604
|
+
document.addEventListener("keydown", onKeydown);
|
|
1605
|
+
return () => document.removeEventListener("keydown", onKeydown);
|
|
1606
|
+
}, [open, setOpen]);
|
|
1607
|
+
return /* @__PURE__ */ jsx48(Portal6, { container: portalRef, children: /* @__PURE__ */ jsxs12(DialogRoot, { open, lazyMount: true, unmountOnExit: true, onOpenChange: ({ open: open2 }) => setOpen(open2), preventScroll: false, children: [
|
|
1608
|
+
/* @__PURE__ */ jsx48(DialogBackdrop2, { className: "absolute inset-0 z-[100] bg-background/60 backdrop-blur-sm" }),
|
|
1609
|
+
/* @__PURE__ */ jsx48(DialogPositioner, { className: "absolute inset-0 z-[100]", children: /* @__PURE__ */ jsxs12(
|
|
1610
|
+
DialogContent2,
|
|
1611
|
+
{
|
|
1612
|
+
id,
|
|
1613
|
+
"data-slot": "navbar-mobile-overlay",
|
|
1614
|
+
className: cn48(navbarMobileContentBase, className),
|
|
1615
|
+
...props,
|
|
1616
|
+
children: [
|
|
1617
|
+
/* @__PURE__ */ jsx48(DialogTitle2, { className: "sr-only", children: "Navigation menu" }),
|
|
1618
|
+
/* @__PURE__ */ jsx48(DialogDescription2, { className: "sr-only", children: "Mobile navigation menu" }),
|
|
1619
|
+
/* @__PURE__ */ jsxs12("div", { className: navbarMobileHeaderBase, children: [
|
|
1620
|
+
slots.brand,
|
|
1621
|
+
/* @__PURE__ */ jsx48(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
|
|
1622
|
+
"button",
|
|
1623
|
+
{
|
|
1624
|
+
type: "button",
|
|
1625
|
+
"aria-label": "Close navigation menu",
|
|
1626
|
+
className: cn48(navbarTriggerVariants({ floating })),
|
|
1627
|
+
children: /* @__PURE__ */ jsx48(
|
|
1628
|
+
"svg",
|
|
1629
|
+
{
|
|
1630
|
+
className: "size-4",
|
|
1631
|
+
viewBox: "0 0 24 24",
|
|
1632
|
+
fill: "none",
|
|
1633
|
+
stroke: "currentColor",
|
|
1634
|
+
strokeWidth: "2",
|
|
1635
|
+
strokeLinecap: "round",
|
|
1636
|
+
strokeLinejoin: "round",
|
|
1637
|
+
"aria-hidden": "true",
|
|
1638
|
+
children: /* @__PURE__ */ jsx48("path", { d: "M18 6 6 18M6 6l12 12" })
|
|
1639
|
+
}
|
|
1640
|
+
)
|
|
1641
|
+
}
|
|
1642
|
+
) })
|
|
1643
|
+
] }),
|
|
1644
|
+
/* @__PURE__ */ jsx48("div", { className: navbarMobileMenuBase, children }),
|
|
1645
|
+
slots.actions ? /* @__PURE__ */ jsx48("div", { className: navbarMobileActionsBase, children: slots.actions }) : null
|
|
1646
|
+
]
|
|
1647
|
+
}
|
|
1648
|
+
) })
|
|
1649
|
+
] }) });
|
|
1650
|
+
}
|
|
1651
|
+
|
|
1652
|
+
// src/field.tsx
|
|
1653
|
+
import {
|
|
1654
|
+
FieldRoot as ArkFieldRoot,
|
|
1655
|
+
FieldLabel as ArkFieldLabel,
|
|
1656
|
+
FieldHelperText as ArkFieldHelperText,
|
|
1657
|
+
FieldErrorText as ArkFieldErrorText,
|
|
1658
|
+
FieldRequiredIndicator as ArkFieldRequiredIndicator,
|
|
1659
|
+
useFieldContext
|
|
1660
|
+
} from "@ark-ui/react/field";
|
|
1661
|
+
import {
|
|
1662
|
+
FieldsetRoot as ArkFieldsetRoot,
|
|
1663
|
+
FieldsetLegend as ArkFieldsetLegend,
|
|
1664
|
+
FieldsetHelperText as ArkFieldsetHelperText,
|
|
1665
|
+
FieldsetErrorText as ArkFieldsetErrorText
|
|
1666
|
+
} from "@ark-ui/react/fieldset";
|
|
1667
|
+
import {
|
|
1668
|
+
fieldRootBase,
|
|
1669
|
+
fieldLabelBase,
|
|
1670
|
+
fieldHelperBase,
|
|
1671
|
+
fieldErrorBase,
|
|
1672
|
+
fieldRequiredIndicatorBase,
|
|
1673
|
+
fieldsetRootBase,
|
|
1674
|
+
fieldsetLegendBase,
|
|
1675
|
+
fieldsetHelperBase,
|
|
1676
|
+
fieldsetErrorBase,
|
|
1677
|
+
cn as cn49
|
|
1678
|
+
} from "@cloudvoyant/vortex-ui";
|
|
1679
|
+
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
1680
|
+
function Field({ className, ...props }) {
|
|
1681
|
+
return /* @__PURE__ */ jsx49(ArkFieldRoot, { className: cn49(fieldRootBase, className), ...props });
|
|
1682
|
+
}
|
|
1683
|
+
function FieldLabel({ className, ...props }) {
|
|
1684
|
+
return /* @__PURE__ */ jsx49(ArkFieldLabel, { className: cn49(fieldLabelBase, className), ...props });
|
|
1685
|
+
}
|
|
1686
|
+
function FieldHelper({ className, ...props }) {
|
|
1687
|
+
return /* @__PURE__ */ jsx49(ArkFieldHelperText, { className: cn49(fieldHelperBase, className), ...props });
|
|
1688
|
+
}
|
|
1689
|
+
function FieldError({ className, ...props }) {
|
|
1690
|
+
return /* @__PURE__ */ jsx49(ArkFieldErrorText, { className: cn49(fieldErrorBase, className), ...props });
|
|
1691
|
+
}
|
|
1692
|
+
function FieldRequiredIndicator({ className, ...props }) {
|
|
1693
|
+
return /* @__PURE__ */ jsx49(ArkFieldRequiredIndicator, { className: cn49(fieldRequiredIndicatorBase, className), ...props });
|
|
1694
|
+
}
|
|
1695
|
+
function FieldSet({ className, ...props }) {
|
|
1696
|
+
return /* @__PURE__ */ jsx49(ArkFieldsetRoot, { className: cn49(fieldsetRootBase, className), ...props });
|
|
1697
|
+
}
|
|
1698
|
+
function FieldSetLegend({ className, ...props }) {
|
|
1699
|
+
return /* @__PURE__ */ jsx49(ArkFieldsetLegend, { className: cn49(fieldsetLegendBase, className), ...props });
|
|
1700
|
+
}
|
|
1701
|
+
function FieldSetHelper({ className, ...props }) {
|
|
1702
|
+
return /* @__PURE__ */ jsx49(ArkFieldsetHelperText, { className: cn49(fieldsetHelperBase, className), ...props });
|
|
1703
|
+
}
|
|
1704
|
+
function FieldSetError({ className, ...props }) {
|
|
1705
|
+
return /* @__PURE__ */ jsx49(ArkFieldsetErrorText, { className: cn49(fieldsetErrorBase, className), ...props });
|
|
1706
|
+
}
|
|
1707
|
+
var useField = useFieldContext;
|
|
1708
|
+
|
|
1709
|
+
// src/input.tsx
|
|
1710
|
+
import { FieldInput } from "@ark-ui/react/field";
|
|
1711
|
+
import { inputVariants, cn as cn50 } from "@cloudvoyant/vortex-ui";
|
|
1712
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
1713
|
+
function Input2({ className, size, ...props }) {
|
|
1714
|
+
return /* @__PURE__ */ jsx50(FieldInput, { className: cn50(inputVariants({ size }), className), ...props });
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
// src/textarea.tsx
|
|
1718
|
+
import { FieldTextarea } from "@ark-ui/react/field";
|
|
1719
|
+
import { textareaBase, cn as cn51 } from "@cloudvoyant/vortex-ui";
|
|
1720
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
1721
|
+
function Textarea({ className, ...props }) {
|
|
1722
|
+
return /* @__PURE__ */ jsx51(FieldTextarea, { className: cn51(textareaBase, className), ...props });
|
|
1723
|
+
}
|
|
1724
|
+
|
|
1725
|
+
// src/number-input.tsx
|
|
1726
|
+
import {
|
|
1727
|
+
NumberInputRoot as ArkNumberInputRoot,
|
|
1728
|
+
NumberInputControl as ArkNumberInputControl,
|
|
1729
|
+
NumberInputInput as ArkNumberInputInput,
|
|
1730
|
+
NumberInputIncrementTrigger as ArkNumberInputIncrementTrigger,
|
|
1731
|
+
NumberInputDecrementTrigger as ArkNumberInputDecrementTrigger,
|
|
1732
|
+
useNumberInputContext
|
|
1733
|
+
} from "@ark-ui/react/number-input";
|
|
1734
|
+
import {
|
|
1735
|
+
numberInputRootBase,
|
|
1736
|
+
numberInputControlBase,
|
|
1737
|
+
numberInputInputBase,
|
|
1738
|
+
numberInputTriggerBase,
|
|
1739
|
+
cn as cn52
|
|
1740
|
+
} from "@cloudvoyant/vortex-ui";
|
|
1741
|
+
import { jsx as jsx52 } from "react/jsx-runtime";
|
|
1742
|
+
function NumberInput({ className, ...props }) {
|
|
1743
|
+
return /* @__PURE__ */ jsx52(ArkNumberInputRoot, { className: cn52(numberInputRootBase, className), ...props });
|
|
1744
|
+
}
|
|
1745
|
+
function NumberInputControl({ className, ...props }) {
|
|
1746
|
+
return /* @__PURE__ */ jsx52(ArkNumberInputControl, { className: cn52(numberInputControlBase, className), ...props });
|
|
1747
|
+
}
|
|
1748
|
+
function NumberInputInput({ className, ...props }) {
|
|
1749
|
+
return /* @__PURE__ */ jsx52(ArkNumberInputInput, { className: cn52(numberInputInputBase, className), ...props });
|
|
1750
|
+
}
|
|
1751
|
+
function NumberInputDecrement({ className, ...props }) {
|
|
1752
|
+
return /* @__PURE__ */ jsx52(
|
|
1753
|
+
ArkNumberInputDecrementTrigger,
|
|
1754
|
+
{
|
|
1755
|
+
"aria-label": "Decrement",
|
|
1756
|
+
className: cn52(numberInputTriggerBase, className),
|
|
1757
|
+
...props
|
|
1758
|
+
}
|
|
1759
|
+
);
|
|
1760
|
+
}
|
|
1761
|
+
function NumberInputIncrement({ className, ...props }) {
|
|
1762
|
+
return /* @__PURE__ */ jsx52(
|
|
1763
|
+
ArkNumberInputIncrementTrigger,
|
|
1764
|
+
{
|
|
1765
|
+
"aria-label": "Increment",
|
|
1766
|
+
className: cn52(numberInputTriggerBase, className),
|
|
1767
|
+
...props
|
|
1768
|
+
}
|
|
1769
|
+
);
|
|
1770
|
+
}
|
|
1771
|
+
var useNumberInput = useNumberInputContext;
|
|
1772
|
+
|
|
1773
|
+
// src/checkbox.tsx
|
|
1774
|
+
import { createContext as createContext4, useContext as useContext4 } from "react";
|
|
1775
|
+
import {
|
|
1776
|
+
CheckboxRoot as ArkCheckboxRoot,
|
|
1777
|
+
CheckboxControl as ArkCheckboxControl,
|
|
1778
|
+
CheckboxIndicator as ArkCheckboxIndicator,
|
|
1779
|
+
CheckboxLabel as ArkCheckboxLabel,
|
|
1780
|
+
CheckboxGroup as ArkCheckboxGroup,
|
|
1781
|
+
CheckboxHiddenInput as ArkCheckboxHiddenInput,
|
|
1782
|
+
useCheckboxContext
|
|
1783
|
+
} from "@ark-ui/react/checkbox";
|
|
1784
|
+
import {
|
|
1785
|
+
checkboxVariants,
|
|
1786
|
+
checkboxIndicatorBase,
|
|
1787
|
+
checkboxLabelBase,
|
|
1788
|
+
checkboxGroupBase,
|
|
1789
|
+
cn as cn53
|
|
1790
|
+
} from "@cloudvoyant/vortex-ui";
|
|
1791
|
+
import { jsx as jsx53, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1792
|
+
var CheckboxSizeContext = createContext4("md");
|
|
1793
|
+
function Checkbox({ className, size = "md", children, ...props }) {
|
|
1794
|
+
return /* @__PURE__ */ jsx53(CheckboxSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs13(ArkCheckboxRoot, { className: cn53("flex items-center gap-2", className), ...props, children: [
|
|
1795
|
+
children,
|
|
1796
|
+
/* @__PURE__ */ jsx53(ArkCheckboxHiddenInput, {})
|
|
1797
|
+
] }) });
|
|
1798
|
+
}
|
|
1799
|
+
function CheckboxControl({ className, ...props }) {
|
|
1800
|
+
const size = useContext4(CheckboxSizeContext);
|
|
1801
|
+
return /* @__PURE__ */ jsx53(ArkCheckboxControl, { className: cn53(checkboxVariants({ size }), className), ...props });
|
|
1802
|
+
}
|
|
1803
|
+
function CheckboxIndicator({ className, ...props }) {
|
|
1804
|
+
return /* @__PURE__ */ jsx53(ArkCheckboxIndicator, { className: cn53(checkboxIndicatorBase, className), ...props });
|
|
1805
|
+
}
|
|
1806
|
+
function CheckboxLabel({ className, ...props }) {
|
|
1807
|
+
return /* @__PURE__ */ jsx53(ArkCheckboxLabel, { className: cn53(checkboxLabelBase, className), ...props });
|
|
1808
|
+
}
|
|
1809
|
+
function CheckboxGroup({ className, ...props }) {
|
|
1810
|
+
return /* @__PURE__ */ jsx53(ArkCheckboxGroup, { className: cn53(checkboxGroupBase, className), ...props });
|
|
1811
|
+
}
|
|
1812
|
+
var useCheckbox = useCheckboxContext;
|
|
1813
|
+
|
|
1814
|
+
// src/switch.tsx
|
|
1815
|
+
import { createContext as createContext5, useContext as useContext5 } from "react";
|
|
1816
|
+
import {
|
|
1817
|
+
SwitchRoot as ArkSwitchRoot,
|
|
1818
|
+
SwitchControl as ArkSwitchControl,
|
|
1819
|
+
SwitchThumb as ArkSwitchThumb,
|
|
1820
|
+
SwitchLabel as ArkSwitchLabel,
|
|
1821
|
+
SwitchHiddenInput as ArkSwitchHiddenInput,
|
|
1822
|
+
useSwitchContext
|
|
1823
|
+
} from "@ark-ui/react/switch";
|
|
1824
|
+
import { switchVariants, switchControlBase, switchThumbBase, switchLabelBase, cn as cn54 } from "@cloudvoyant/vortex-ui";
|
|
1825
|
+
import { jsx as jsx54, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1826
|
+
var SwitchSizeContext = createContext5("md");
|
|
1827
|
+
function Switch({ className, size = "md", children, ...props }) {
|
|
1828
|
+
return /* @__PURE__ */ jsx54(SwitchSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs14(ArkSwitchRoot, { className: cn54("flex items-center gap-2", className), ...props, children: [
|
|
1829
|
+
children,
|
|
1830
|
+
/* @__PURE__ */ jsx54(ArkSwitchHiddenInput, {})
|
|
1831
|
+
] }) });
|
|
1832
|
+
}
|
|
1833
|
+
function SwitchControl({ className, ...props }) {
|
|
1834
|
+
const size = useContext5(SwitchSizeContext);
|
|
1835
|
+
return /* @__PURE__ */ jsx54(ArkSwitchControl, { className: cn54(switchVariants({ size }), switchControlBase, className), ...props });
|
|
1836
|
+
}
|
|
1837
|
+
function SwitchThumb({ className, ...props }) {
|
|
1838
|
+
return /* @__PURE__ */ jsx54(ArkSwitchThumb, { className: cn54(switchThumbBase, className), ...props });
|
|
1839
|
+
}
|
|
1840
|
+
function SwitchLabel({ className, ...props }) {
|
|
1841
|
+
return /* @__PURE__ */ jsx54(ArkSwitchLabel, { className: cn54(switchLabelBase, className), ...props });
|
|
1842
|
+
}
|
|
1843
|
+
var useSwitch = useSwitchContext;
|
|
1844
|
+
|
|
1845
|
+
// src/select.tsx
|
|
1846
|
+
import { ark as ark34 } from "@ark-ui/react/factory";
|
|
1847
|
+
import { Portal as Portal7 } from "@ark-ui/react/portal";
|
|
1848
|
+
import { useMemo as useMemo4 } from "react";
|
|
1849
|
+
import {
|
|
1850
|
+
SelectRoot as ArkSelectRoot,
|
|
1851
|
+
SelectTrigger as ArkSelectTrigger,
|
|
1852
|
+
SelectValueText as ArkSelectValueText,
|
|
1853
|
+
SelectIndicator as ArkSelectIndicator,
|
|
1854
|
+
SelectClearTrigger as ArkSelectClearTrigger,
|
|
1855
|
+
SelectContent as ArkSelectContent,
|
|
1856
|
+
SelectPositioner as ArkSelectPositioner,
|
|
1857
|
+
SelectItem as ArkSelectItem,
|
|
1858
|
+
SelectItemGroup as ArkSelectItemGroup,
|
|
1859
|
+
SelectItemGroupLabel as ArkSelectItemGroupLabel,
|
|
1860
|
+
SelectItemText as ArkSelectItemText,
|
|
1861
|
+
SelectItemIndicator as ArkSelectItemIndicator,
|
|
1862
|
+
SelectHiddenSelect as ArkSelectHiddenSelect,
|
|
1863
|
+
createListCollection,
|
|
1864
|
+
useSelectContext
|
|
1865
|
+
} from "@ark-ui/react/select";
|
|
1866
|
+
import {
|
|
1867
|
+
inputVariants as inputVariants2,
|
|
1868
|
+
selectTriggerBase,
|
|
1869
|
+
selectValueBase,
|
|
1870
|
+
selectIndicatorBase,
|
|
1871
|
+
selectClearTriggerBase,
|
|
1872
|
+
selectContentBase,
|
|
1873
|
+
selectPositionerBase,
|
|
1874
|
+
selectItemBase,
|
|
1875
|
+
selectItemGroupLabelBase,
|
|
1876
|
+
selectItemTextBase,
|
|
1877
|
+
selectItemIndicatorBase,
|
|
1878
|
+
nativeSelectVariants,
|
|
1879
|
+
nativeSelectWrapperBase,
|
|
1880
|
+
nativeSelectIconBase,
|
|
1881
|
+
cn as cn55
|
|
1882
|
+
} from "@cloudvoyant/vortex-ui";
|
|
1883
|
+
|
|
1884
|
+
// src/use-media-query.ts
|
|
1885
|
+
import { useSyncExternalStore } from "react";
|
|
1886
|
+
function useMediaQuery(query) {
|
|
1887
|
+
return useSyncExternalStore(
|
|
1888
|
+
(onStoreChange) => {
|
|
1889
|
+
const mql = window.matchMedia(query);
|
|
1890
|
+
mql.addEventListener("change", onStoreChange);
|
|
1891
|
+
return () => mql.removeEventListener("change", onStoreChange);
|
|
1892
|
+
},
|
|
1893
|
+
() => window.matchMedia(query).matches,
|
|
1894
|
+
() => false
|
|
1895
|
+
);
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
// src/select.tsx
|
|
1899
|
+
import { jsx as jsx55, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1900
|
+
function Select({ items, collection, size, children, ...props }) {
|
|
1901
|
+
const isCoarse = useMediaQuery("(pointer: coarse)");
|
|
1902
|
+
const resolvedCollection = useMemo4(
|
|
1903
|
+
() => collection ?? createListCollection({ items: items ?? [] }),
|
|
1904
|
+
[collection, items]
|
|
1905
|
+
);
|
|
1906
|
+
if (isCoarse && items) {
|
|
1907
|
+
return /* @__PURE__ */ jsx55(
|
|
1908
|
+
SelectNative,
|
|
1909
|
+
{
|
|
1910
|
+
items,
|
|
1911
|
+
size,
|
|
1912
|
+
value: props.value?.[0],
|
|
1913
|
+
defaultValue: props.defaultValue?.[0],
|
|
1914
|
+
onValueChange: (value) => props.onValueChange?.({ value: [value], items: items.filter((i) => i.value === value) }),
|
|
1915
|
+
invalid: props.invalid,
|
|
1916
|
+
disabled: props.disabled,
|
|
1917
|
+
name: props.name,
|
|
1918
|
+
form: props.form,
|
|
1919
|
+
required: props.required
|
|
1920
|
+
}
|
|
1921
|
+
);
|
|
1922
|
+
}
|
|
1923
|
+
return /* @__PURE__ */ jsxs15(ArkSelectRoot, { collection: resolvedCollection, ...props, children: [
|
|
1924
|
+
children,
|
|
1925
|
+
/* @__PURE__ */ jsx55(ArkSelectHiddenSelect, {})
|
|
1926
|
+
] });
|
|
1927
|
+
}
|
|
1928
|
+
function SelectTrigger({ size = "md", className, ...props }) {
|
|
1929
|
+
return /* @__PURE__ */ jsx55(ArkSelectTrigger, { className: cn55(inputVariants2({ size }), selectTriggerBase, className), ...props });
|
|
1930
|
+
}
|
|
1931
|
+
function SelectValue({ className, ...props }) {
|
|
1932
|
+
return /* @__PURE__ */ jsx55(ArkSelectValueText, { className: cn55(selectValueBase, className), ...props });
|
|
1933
|
+
}
|
|
1934
|
+
function SelectIndicator({ className, ...props }) {
|
|
1935
|
+
return /* @__PURE__ */ jsx55(ArkSelectIndicator, { className: cn55(selectIndicatorBase, className), ...props });
|
|
1936
|
+
}
|
|
1937
|
+
function SelectClearTrigger({ className, ...props }) {
|
|
1938
|
+
return /* @__PURE__ */ jsx55(ArkSelectClearTrigger, { "aria-label": "Clear selection", className: cn55(selectClearTriggerBase, className), ...props });
|
|
1939
|
+
}
|
|
1940
|
+
function SelectContent({ className, ...props }) {
|
|
1941
|
+
return /* @__PURE__ */ jsx55(Portal7, { children: /* @__PURE__ */ jsx55(ArkSelectPositioner, { className: selectPositionerBase, children: /* @__PURE__ */ jsx55(ArkSelectContent, { className: cn55(selectContentBase, className), ...props }) }) });
|
|
1942
|
+
}
|
|
1943
|
+
function SelectItemGroup({ className, ...props }) {
|
|
1944
|
+
return /* @__PURE__ */ jsx55(ArkSelectItemGroup, { className, ...props });
|
|
1945
|
+
}
|
|
1946
|
+
function SelectItemGroupLabel({ className, ...props }) {
|
|
1947
|
+
return /* @__PURE__ */ jsx55(ArkSelectItemGroupLabel, { className: cn55(selectItemGroupLabelBase, className), ...props });
|
|
1948
|
+
}
|
|
1949
|
+
function SelectItem({ item, className, ...props }) {
|
|
1950
|
+
return /* @__PURE__ */ jsx55(ArkSelectItem, { item, className: cn55(selectItemBase, className), ...props });
|
|
1951
|
+
}
|
|
1952
|
+
function SelectItemText({ className, ...props }) {
|
|
1953
|
+
return /* @__PURE__ */ jsx55(ArkSelectItemText, { className: cn55(selectItemTextBase, className), ...props });
|
|
1954
|
+
}
|
|
1955
|
+
function SelectItemIndicator({ className, ...props }) {
|
|
1956
|
+
return /* @__PURE__ */ jsx55(ArkSelectItemIndicator, { className: cn55(selectItemIndicatorBase, className), ...props });
|
|
1957
|
+
}
|
|
1958
|
+
var useSelect = useSelectContext;
|
|
1959
|
+
function ChevronDownIcon() {
|
|
1960
|
+
return /* @__PURE__ */ jsx55(
|
|
1961
|
+
"svg",
|
|
1962
|
+
{
|
|
1963
|
+
viewBox: "0 0 24 24",
|
|
1964
|
+
fill: "none",
|
|
1965
|
+
stroke: "currentColor",
|
|
1966
|
+
strokeWidth: "2",
|
|
1967
|
+
strokeLinecap: "round",
|
|
1968
|
+
strokeLinejoin: "round",
|
|
1969
|
+
"aria-hidden": true,
|
|
1970
|
+
children: /* @__PURE__ */ jsx55("path", { d: "m6 9 6 6 6-6" })
|
|
1971
|
+
}
|
|
1972
|
+
);
|
|
1973
|
+
}
|
|
1974
|
+
function SelectNative({
|
|
1975
|
+
items = [],
|
|
1976
|
+
value,
|
|
1977
|
+
defaultValue,
|
|
1978
|
+
onValueChange,
|
|
1979
|
+
size = "md",
|
|
1980
|
+
invalid,
|
|
1981
|
+
icon,
|
|
1982
|
+
className,
|
|
1983
|
+
...props
|
|
1984
|
+
}) {
|
|
1985
|
+
return /* @__PURE__ */ jsxs15(ark34.div, { className: cn55(nativeSelectWrapperBase, className), children: [
|
|
1986
|
+
/* @__PURE__ */ jsx55(
|
|
1987
|
+
ark34.select,
|
|
1988
|
+
{
|
|
1989
|
+
className: nativeSelectVariants({ size }),
|
|
1990
|
+
value,
|
|
1991
|
+
defaultValue,
|
|
1992
|
+
onChange: (event) => onValueChange?.(event.currentTarget.value),
|
|
1993
|
+
"aria-invalid": invalid,
|
|
1994
|
+
...props,
|
|
1995
|
+
children: items.map((item) => /* @__PURE__ */ jsx55(ark34.option, { value: item.value, disabled: item.disabled, children: item.label }, item.value))
|
|
1996
|
+
}
|
|
1997
|
+
),
|
|
1998
|
+
/* @__PURE__ */ jsx55(ark34.span, { className: nativeSelectIconBase, "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx55(ChevronDownIcon, {}) })
|
|
1999
|
+
] });
|
|
2000
|
+
}
|
|
2001
|
+
|
|
2002
|
+
// src/combobox.tsx
|
|
2003
|
+
import { Portal as Portal8 } from "@ark-ui/react/portal";
|
|
2004
|
+
import { useMemo as useMemo5 } from "react";
|
|
2005
|
+
import {
|
|
2006
|
+
ComboboxRoot as ArkComboboxRoot,
|
|
2007
|
+
ComboboxControl as ArkComboboxControl,
|
|
2008
|
+
ComboboxInput as ArkComboboxInput,
|
|
2009
|
+
ComboboxTrigger as ArkComboboxTrigger,
|
|
2010
|
+
ComboboxClearTrigger as ArkComboboxClearTrigger,
|
|
2011
|
+
ComboboxContent as ArkComboboxContent,
|
|
2012
|
+
ComboboxPositioner as ArkComboboxPositioner,
|
|
2013
|
+
ComboboxItem as ArkComboboxItem,
|
|
2014
|
+
ComboboxItemGroup as ArkComboboxItemGroup,
|
|
2015
|
+
ComboboxItemGroupLabel as ArkComboboxItemGroupLabel,
|
|
2016
|
+
ComboboxItemText as ArkComboboxItemText,
|
|
2017
|
+
ComboboxItemIndicator as ArkComboboxItemIndicator,
|
|
2018
|
+
ComboboxList as ArkComboboxList,
|
|
2019
|
+
ComboboxEmpty as ArkComboboxEmpty,
|
|
2020
|
+
createListCollection as createListCollection2,
|
|
2021
|
+
useComboboxContext
|
|
2022
|
+
} from "@ark-ui/react/combobox";
|
|
2023
|
+
import {
|
|
2024
|
+
inputVariants as inputVariants3,
|
|
2025
|
+
comboboxControlBase,
|
|
2026
|
+
comboboxInputBase,
|
|
2027
|
+
comboboxTriggerBase,
|
|
2028
|
+
comboboxClearTriggerBase,
|
|
2029
|
+
comboboxContentBase,
|
|
2030
|
+
comboboxPositionerBase,
|
|
2031
|
+
comboboxItemVariants,
|
|
2032
|
+
comboboxItemGroupLabelBase,
|
|
2033
|
+
comboboxItemIndicatorBase,
|
|
2034
|
+
comboboxListBase,
|
|
2035
|
+
comboboxEmptyBase,
|
|
2036
|
+
cn as cn56
|
|
2037
|
+
} from "@cloudvoyant/vortex-ui";
|
|
2038
|
+
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
2039
|
+
function Combobox({
|
|
2040
|
+
items,
|
|
2041
|
+
collection,
|
|
2042
|
+
openOnClick = true,
|
|
2043
|
+
lazyMount = true,
|
|
2044
|
+
unmountOnExit = true,
|
|
2045
|
+
...props
|
|
2046
|
+
}) {
|
|
2047
|
+
const resolvedCollection = useMemo5(
|
|
2048
|
+
() => collection ?? createListCollection2({ items: items ?? [] }),
|
|
2049
|
+
[collection, items]
|
|
2050
|
+
);
|
|
2051
|
+
return /* @__PURE__ */ jsx56(
|
|
2052
|
+
ArkComboboxRoot,
|
|
2053
|
+
{
|
|
2054
|
+
collection: resolvedCollection,
|
|
2055
|
+
openOnClick,
|
|
2056
|
+
lazyMount,
|
|
2057
|
+
unmountOnExit,
|
|
2058
|
+
...props
|
|
2059
|
+
}
|
|
2060
|
+
);
|
|
2061
|
+
}
|
|
2062
|
+
function ComboboxControl({ className, ...props }) {
|
|
2063
|
+
return /* @__PURE__ */ jsx56(ArkComboboxControl, { className: cn56(comboboxControlBase, className), ...props });
|
|
2064
|
+
}
|
|
2065
|
+
function ComboboxInput({ size = "md", className, ...props }) {
|
|
2066
|
+
return /* @__PURE__ */ jsx56(ArkComboboxInput, { className: cn56(inputVariants3({ size }), comboboxInputBase, className), ...props });
|
|
2067
|
+
}
|
|
2068
|
+
function ComboboxTrigger({ className, ...props }) {
|
|
2069
|
+
return /* @__PURE__ */ jsx56(ArkComboboxTrigger, { className: cn56(comboboxTriggerBase, className), ...props });
|
|
2070
|
+
}
|
|
2071
|
+
function ComboboxClear({ className, ...props }) {
|
|
2072
|
+
return /* @__PURE__ */ jsx56(ArkComboboxClearTrigger, { "aria-label": "Clear", className: cn56(comboboxClearTriggerBase, className), ...props });
|
|
2073
|
+
}
|
|
2074
|
+
function ComboboxContent({ className, ...props }) {
|
|
2075
|
+
return /* @__PURE__ */ jsx56(Portal8, { children: /* @__PURE__ */ jsx56(ArkComboboxPositioner, { className: comboboxPositionerBase, children: /* @__PURE__ */ jsx56(ArkComboboxContent, { className: cn56(comboboxContentBase, className), ...props }) }) });
|
|
2076
|
+
}
|
|
2077
|
+
function ComboboxItemGroup({ className, ...props }) {
|
|
2078
|
+
return /* @__PURE__ */ jsx56(ArkComboboxItemGroup, { className, ...props });
|
|
2079
|
+
}
|
|
2080
|
+
function ComboboxItemGroupLabel({ className, ...props }) {
|
|
2081
|
+
return /* @__PURE__ */ jsx56(ArkComboboxItemGroupLabel, { className: cn56(comboboxItemGroupLabelBase, className), ...props });
|
|
2082
|
+
}
|
|
2083
|
+
function ComboboxItem({ item, showIndicator = true, className, ...props }) {
|
|
2084
|
+
return /* @__PURE__ */ jsx56(
|
|
2085
|
+
ArkComboboxItem,
|
|
2086
|
+
{
|
|
2087
|
+
item,
|
|
2088
|
+
persistFocus: true,
|
|
2089
|
+
className: cn56(comboboxItemVariants({ showIndicator }), className),
|
|
2090
|
+
...props
|
|
2091
|
+
}
|
|
2092
|
+
);
|
|
2093
|
+
}
|
|
2094
|
+
function ComboboxItemText({ className, ...props }) {
|
|
2095
|
+
return /* @__PURE__ */ jsx56(ArkComboboxItemText, { className, ...props });
|
|
2096
|
+
}
|
|
2097
|
+
function ComboboxItemIndicator({ className, ...props }) {
|
|
2098
|
+
return /* @__PURE__ */ jsx56(ArkComboboxItemIndicator, { className: cn56(comboboxItemIndicatorBase, className), ...props });
|
|
2099
|
+
}
|
|
2100
|
+
function ComboboxList({ className, ...props }) {
|
|
2101
|
+
return /* @__PURE__ */ jsx56(ArkComboboxList, { className: cn56(comboboxListBase, className), ...props });
|
|
2102
|
+
}
|
|
2103
|
+
function ComboboxEmpty({ className, children, ...props }) {
|
|
2104
|
+
return /* @__PURE__ */ jsx56(ArkComboboxEmpty, { className: cn56(comboboxEmptyBase, className), ...props, children: children ?? "No results found." });
|
|
2105
|
+
}
|
|
2106
|
+
var useCombobox = useComboboxContext;
|
|
2107
|
+
|
|
2108
|
+
// src/tags-input.tsx
|
|
2109
|
+
import {
|
|
2110
|
+
TagsInputRoot as ArkTagsInputRoot,
|
|
2111
|
+
TagsInputControl as ArkTagsInputControl,
|
|
2112
|
+
TagsInputInput as ArkTagsInputInput,
|
|
2113
|
+
TagsInputItem as ArkTagsInputItem,
|
|
2114
|
+
TagsInputItemPreview as ArkTagsInputItemPreview,
|
|
2115
|
+
TagsInputItemText as ArkTagsInputItemText,
|
|
2116
|
+
TagsInputItemInput as ArkTagsInputItemInput,
|
|
2117
|
+
TagsInputItemDeleteTrigger as ArkTagsInputItemDeleteTrigger,
|
|
2118
|
+
TagsInputClearTrigger as ArkTagsInputClearTrigger,
|
|
2119
|
+
TagsInputHiddenInput as ArkTagsInputHiddenInput,
|
|
2120
|
+
TagsInputContext as ArkTagsInputContext,
|
|
2121
|
+
useTagsInputContext
|
|
2122
|
+
} from "@ark-ui/react/tags-input";
|
|
2123
|
+
import {
|
|
2124
|
+
tagsInputRootBase,
|
|
2125
|
+
tagsInputControlBase,
|
|
2126
|
+
tagsInputInputBase,
|
|
2127
|
+
tagsInputItemBase,
|
|
2128
|
+
tagsInputItemTextBase,
|
|
2129
|
+
tagsInputItemInputBase,
|
|
2130
|
+
tagsInputItemDeleteTriggerBase,
|
|
2131
|
+
tagsInputClearTriggerBase,
|
|
2132
|
+
cn as cn57
|
|
2133
|
+
} from "@cloudvoyant/vortex-ui";
|
|
2134
|
+
import { jsx as jsx57, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2135
|
+
function TagInput({ className, editable = false, children, ...props }) {
|
|
2136
|
+
return /* @__PURE__ */ jsxs16(ArkTagsInputRoot, { className: cn57(tagsInputRootBase, className), editable, ...props, children: [
|
|
2137
|
+
children,
|
|
2138
|
+
/* @__PURE__ */ jsx57(ArkTagsInputHiddenInput, {})
|
|
2139
|
+
] });
|
|
2140
|
+
}
|
|
2141
|
+
function TagInputControl({ className, ...props }) {
|
|
2142
|
+
return /* @__PURE__ */ jsx57(ArkTagsInputControl, { className: cn57(tagsInputControlBase, className), ...props });
|
|
2143
|
+
}
|
|
2144
|
+
function TagInputInput({ className, ...props }) {
|
|
2145
|
+
return /* @__PURE__ */ jsx57(ArkTagsInputInput, { className: cn57(tagsInputInputBase, className), ...props });
|
|
2146
|
+
}
|
|
2147
|
+
function TagInputItem({ className, ...props }) {
|
|
2148
|
+
return /* @__PURE__ */ jsx57(ArkTagsInputItem, { className: cn57(tagsInputItemBase, className), ...props });
|
|
2149
|
+
}
|
|
2150
|
+
function TagInputItemPreview({ className, ...props }) {
|
|
2151
|
+
return /* @__PURE__ */ jsx57(ArkTagsInputItemPreview, { className, ...props });
|
|
2152
|
+
}
|
|
2153
|
+
function TagInputItemText({ className, ...props }) {
|
|
2154
|
+
return /* @__PURE__ */ jsx57(ArkTagsInputItemText, { className: cn57(tagsInputItemTextBase, className), ...props });
|
|
2155
|
+
}
|
|
2156
|
+
function TagInputItemInput({ className, ...props }) {
|
|
2157
|
+
return /* @__PURE__ */ jsx57(ArkTagsInputItemInput, { className: cn57(tagsInputItemInputBase, className), ...props });
|
|
2158
|
+
}
|
|
2159
|
+
function TagInputItemDeleteTrigger({ className, ...props }) {
|
|
2160
|
+
return /* @__PURE__ */ jsx57(
|
|
2161
|
+
ArkTagsInputItemDeleteTrigger,
|
|
2162
|
+
{
|
|
2163
|
+
"aria-label": "Remove tag",
|
|
2164
|
+
className: cn57(tagsInputItemDeleteTriggerBase, className),
|
|
2165
|
+
...props
|
|
2166
|
+
}
|
|
2167
|
+
);
|
|
2168
|
+
}
|
|
2169
|
+
function TagInputClearTrigger({ className, ...props }) {
|
|
2170
|
+
return /* @__PURE__ */ jsx57(
|
|
2171
|
+
ArkTagsInputClearTrigger,
|
|
2172
|
+
{
|
|
2173
|
+
"aria-label": "Clear all tags",
|
|
2174
|
+
className: cn57(tagsInputClearTriggerBase, className),
|
|
2175
|
+
...props
|
|
2176
|
+
}
|
|
2177
|
+
);
|
|
2178
|
+
}
|
|
2179
|
+
var TagInputContext = ArkTagsInputContext;
|
|
2180
|
+
var useTagInput = useTagsInputContext;
|
|
2181
|
+
|
|
2182
|
+
// src/mermaid.tsx
|
|
2183
|
+
import { useEffect as useEffect3, useState as useState3 } from "react";
|
|
2184
|
+
import { ark as ark35 } from "@ark-ui/react/factory";
|
|
2185
|
+
import {
|
|
2186
|
+
mermaidRootBase,
|
|
2187
|
+
mermaidSourceBase,
|
|
2188
|
+
mermaidSvgBase,
|
|
2189
|
+
mermaidLoadingBase,
|
|
2190
|
+
renderMermaidSource,
|
|
2191
|
+
mermaidSvgAspectRatio,
|
|
2192
|
+
cn as cn58
|
|
2193
|
+
} from "@cloudvoyant/vortex-ui";
|
|
2194
|
+
import { Fragment as Fragment4, jsx as jsx58, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2195
|
+
function Mermaid({ code, svg, className, ...props }) {
|
|
2196
|
+
const [status, setStatus] = useState3(svg === void 0 ? "loading" : "done");
|
|
2197
|
+
const [rendered, setRendered] = useState3(svg ?? null);
|
|
2198
|
+
const aspectRatio = rendered === null ? void 0 : mermaidSvgAspectRatio(rendered);
|
|
2199
|
+
useEffect3(() => {
|
|
2200
|
+
if (svg !== void 0) return;
|
|
2201
|
+
let cancelled = false;
|
|
2202
|
+
setStatus("loading");
|
|
2203
|
+
setRendered(null);
|
|
2204
|
+
renderMermaidSource(code).then((markup) => {
|
|
2205
|
+
if (!cancelled) {
|
|
2206
|
+
setRendered(markup);
|
|
2207
|
+
setStatus("done");
|
|
2208
|
+
}
|
|
2209
|
+
}).catch(() => {
|
|
2210
|
+
if (!cancelled) setStatus("error");
|
|
2211
|
+
});
|
|
2212
|
+
return () => {
|
|
2213
|
+
cancelled = true;
|
|
2214
|
+
};
|
|
2215
|
+
}, [code, svg]);
|
|
2216
|
+
return /* @__PURE__ */ jsx58(
|
|
2217
|
+
ark35.div,
|
|
2218
|
+
{
|
|
2219
|
+
...props,
|
|
2220
|
+
"data-mermaid-code": JSON.stringify(code),
|
|
2221
|
+
"data-mermaid-src": rendered === null ? void 0 : code,
|
|
2222
|
+
"data-mermaid-state": status,
|
|
2223
|
+
style: aspectRatio === void 0 ? props.style : { ...props.style, aspectRatio },
|
|
2224
|
+
className: cn58(mermaidRootBase, className),
|
|
2225
|
+
children: rendered === null ? status === "error" ? /* @__PURE__ */ jsx58("pre", { className: mermaidSourceBase, children: code }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
|
|
2226
|
+
/* @__PURE__ */ jsxs17("div", { className: mermaidLoadingBase, role: "status", "aria-label": "Rendering diagram", "data-mermaid-loading": true, children: [
|
|
2227
|
+
/* @__PURE__ */ jsx58(
|
|
2228
|
+
"span",
|
|
2229
|
+
{
|
|
2230
|
+
"aria-hidden": "true",
|
|
2231
|
+
className: "h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-muted-foreground/25 border-t-muted-foreground"
|
|
2232
|
+
}
|
|
2233
|
+
),
|
|
2234
|
+
/* @__PURE__ */ jsx58("span", { className: "text-sm text-muted-foreground", children: "Rendering diagram" })
|
|
2235
|
+
] }),
|
|
2236
|
+
/* @__PURE__ */ jsxs17("noscript", { children: [
|
|
2237
|
+
/* @__PURE__ */ jsx58("style", { children: "[data-mermaid-loading]{display:none}" }),
|
|
2238
|
+
/* @__PURE__ */ jsx58("pre", { className: mermaidSourceBase, children: code })
|
|
2239
|
+
] })
|
|
2240
|
+
] }) : /* @__PURE__ */ jsx58("div", { className: mermaidSvgBase, dangerouslySetInnerHTML: { __html: rendered } })
|
|
2241
|
+
}
|
|
2242
|
+
);
|
|
2243
|
+
}
|
|
2244
|
+
|
|
2245
|
+
// src/clipboard.tsx
|
|
2246
|
+
import { ClipboardRoot, ClipboardTrigger, ClipboardIndicator } from "@ark-ui/react/clipboard";
|
|
2247
|
+
import { clipboardTriggerBase, cn as cn59 } from "@cloudvoyant/vortex-ui";
|
|
2248
|
+
import { jsx as jsx59, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2249
|
+
function CopyIcon() {
|
|
2250
|
+
return /* @__PURE__ */ jsxs18(
|
|
2251
|
+
"svg",
|
|
2252
|
+
{
|
|
2253
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2254
|
+
viewBox: "0 0 24 24",
|
|
2255
|
+
fill: "none",
|
|
2256
|
+
stroke: "currentColor",
|
|
2257
|
+
strokeWidth: "2",
|
|
2258
|
+
strokeLinecap: "round",
|
|
2259
|
+
strokeLinejoin: "round",
|
|
2260
|
+
"aria-hidden": "true",
|
|
2261
|
+
children: [
|
|
2262
|
+
/* @__PURE__ */ jsx59("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
|
|
2263
|
+
/* @__PURE__ */ jsx59("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
|
|
2264
|
+
]
|
|
2265
|
+
}
|
|
2266
|
+
);
|
|
2267
|
+
}
|
|
2268
|
+
function CheckIcon() {
|
|
2269
|
+
return /* @__PURE__ */ jsx59(
|
|
2270
|
+
"svg",
|
|
2271
|
+
{
|
|
2272
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2273
|
+
viewBox: "0 0 24 24",
|
|
2274
|
+
fill: "none",
|
|
2275
|
+
stroke: "currentColor",
|
|
2276
|
+
strokeWidth: "2",
|
|
2277
|
+
strokeLinecap: "round",
|
|
2278
|
+
strokeLinejoin: "round",
|
|
2279
|
+
"aria-hidden": "true",
|
|
2280
|
+
children: /* @__PURE__ */ jsx59("path", { d: "M20 6 9 17l-5-5" })
|
|
2281
|
+
}
|
|
2282
|
+
);
|
|
2283
|
+
}
|
|
2284
|
+
function CopyButton({ value, label = "Copy", className, ...props }) {
|
|
2285
|
+
return /* @__PURE__ */ jsx59(ClipboardRoot, { value, ...props, children: /* @__PURE__ */ jsx59(ClipboardTrigger, { className: cn59(clipboardTriggerBase, className), "aria-label": label, children: /* @__PURE__ */ jsx59(ClipboardIndicator, { copied: /* @__PURE__ */ jsx59(CheckIcon, {}), children: /* @__PURE__ */ jsx59(CopyIcon, {}) }) }) });
|
|
2286
|
+
}
|
|
2287
|
+
|
|
2288
|
+
// src/radio-group.tsx
|
|
2289
|
+
import {
|
|
2290
|
+
RadioGroupRoot,
|
|
2291
|
+
RadioGroupItem as ArkRadioGroupItem,
|
|
2292
|
+
RadioGroupItemControl,
|
|
2293
|
+
RadioGroupItemText,
|
|
2294
|
+
RadioGroupItemHiddenInput,
|
|
2295
|
+
useRadioGroupContext,
|
|
2296
|
+
useRadioGroupItemContext
|
|
2297
|
+
} from "@ark-ui/react/radio-group";
|
|
2298
|
+
import { radioGroupRootBase, radioGroupItemControlBase, radioGroupItemTextBase, cn as cn60 } from "@cloudvoyant/vortex-ui";
|
|
2299
|
+
import { jsx as jsx60, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2300
|
+
function RadioGroup({ className, ...props }) {
|
|
2301
|
+
return /* @__PURE__ */ jsx60(RadioGroupRoot, { className: cn60(radioGroupRootBase, className), ...props });
|
|
2302
|
+
}
|
|
2303
|
+
function RadioGroupItem({ className, children, ...props }) {
|
|
2304
|
+
return /* @__PURE__ */ jsxs19(ArkRadioGroupItem, { className: cn60("flex cursor-pointer items-center gap-2.5", className), ...props, children: [
|
|
2305
|
+
/* @__PURE__ */ jsx60(RadioGroupItemControl, { className: radioGroupItemControlBase, children: /* @__PURE__ */ jsx60("span", { className: "size-1.5 rounded-full bg-current hidden [[data-state=checked]>&]:block" }) }),
|
|
2306
|
+
/* @__PURE__ */ jsx60(RadioGroupItemText, { className: radioGroupItemTextBase, children }),
|
|
2307
|
+
/* @__PURE__ */ jsx60(RadioGroupItemHiddenInput, {})
|
|
2308
|
+
] });
|
|
2309
|
+
}
|
|
2310
|
+
var useRadioGroup = useRadioGroupContext;
|
|
2311
|
+
|
|
2312
|
+
// src/notice.tsx
|
|
2313
|
+
import { ark as ark36 } from "@ark-ui/react/factory";
|
|
2314
|
+
import { noticeVariants, noticeTitleBase, noticeDescriptionBase, cn as cn61 } from "@cloudvoyant/vortex-ui";
|
|
2315
|
+
import { jsx as jsx61, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2316
|
+
function InfoIcon() {
|
|
2317
|
+
return /* @__PURE__ */ jsxs20(
|
|
2318
|
+
"svg",
|
|
2319
|
+
{
|
|
2320
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2321
|
+
viewBox: "0 0 24 24",
|
|
2322
|
+
fill: "none",
|
|
2323
|
+
stroke: "currentColor",
|
|
2324
|
+
strokeWidth: "2",
|
|
2325
|
+
strokeLinecap: "round",
|
|
2326
|
+
strokeLinejoin: "round",
|
|
2327
|
+
"aria-hidden": "true",
|
|
2328
|
+
children: [
|
|
2329
|
+
/* @__PURE__ */ jsx61("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2330
|
+
/* @__PURE__ */ jsx61("path", { d: "M12 16v-4" }),
|
|
2331
|
+
/* @__PURE__ */ jsx61("path", { d: "M12 8h.01" })
|
|
2332
|
+
]
|
|
2333
|
+
}
|
|
2334
|
+
);
|
|
2335
|
+
}
|
|
2336
|
+
function CheckCircleIcon() {
|
|
2337
|
+
return /* @__PURE__ */ jsxs20(
|
|
2338
|
+
"svg",
|
|
2339
|
+
{
|
|
2340
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2341
|
+
viewBox: "0 0 24 24",
|
|
2342
|
+
fill: "none",
|
|
2343
|
+
stroke: "currentColor",
|
|
2344
|
+
strokeWidth: "2",
|
|
2345
|
+
strokeLinecap: "round",
|
|
2346
|
+
strokeLinejoin: "round",
|
|
2347
|
+
"aria-hidden": "true",
|
|
2348
|
+
children: [
|
|
2349
|
+
/* @__PURE__ */ jsx61("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2350
|
+
/* @__PURE__ */ jsx61("path", { d: "m9 12 2 2 4-4" })
|
|
2351
|
+
]
|
|
2352
|
+
}
|
|
2353
|
+
);
|
|
2354
|
+
}
|
|
2355
|
+
function TriangleAlertIcon() {
|
|
2356
|
+
return /* @__PURE__ */ jsxs20(
|
|
2357
|
+
"svg",
|
|
2358
|
+
{
|
|
2359
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2360
|
+
viewBox: "0 0 24 24",
|
|
2361
|
+
fill: "none",
|
|
2362
|
+
stroke: "currentColor",
|
|
2363
|
+
strokeWidth: "2",
|
|
2364
|
+
strokeLinecap: "round",
|
|
2365
|
+
strokeLinejoin: "round",
|
|
2366
|
+
"aria-hidden": "true",
|
|
2367
|
+
children: [
|
|
2368
|
+
/* @__PURE__ */ jsx61("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
|
|
2369
|
+
/* @__PURE__ */ jsx61("path", { d: "M12 9v4" }),
|
|
2370
|
+
/* @__PURE__ */ jsx61("path", { d: "M12 17h.01" })
|
|
2371
|
+
]
|
|
2372
|
+
}
|
|
2373
|
+
);
|
|
2374
|
+
}
|
|
2375
|
+
function CircleXIcon() {
|
|
2376
|
+
return /* @__PURE__ */ jsxs20(
|
|
2377
|
+
"svg",
|
|
2378
|
+
{
|
|
2379
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2380
|
+
viewBox: "0 0 24 24",
|
|
2381
|
+
fill: "none",
|
|
2382
|
+
stroke: "currentColor",
|
|
2383
|
+
strokeWidth: "2",
|
|
2384
|
+
strokeLinecap: "round",
|
|
2385
|
+
strokeLinejoin: "round",
|
|
2386
|
+
"aria-hidden": "true",
|
|
2387
|
+
children: [
|
|
2388
|
+
/* @__PURE__ */ jsx61("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2389
|
+
/* @__PURE__ */ jsx61("path", { d: "m15 9-6 6" }),
|
|
2390
|
+
/* @__PURE__ */ jsx61("path", { d: "m9 9 6 6" })
|
|
2391
|
+
]
|
|
2392
|
+
}
|
|
2393
|
+
);
|
|
2394
|
+
}
|
|
2395
|
+
var noticeIcons = {
|
|
2396
|
+
info: InfoIcon,
|
|
2397
|
+
success: CheckCircleIcon,
|
|
2398
|
+
warning: TriangleAlertIcon,
|
|
2399
|
+
error: CircleXIcon
|
|
2400
|
+
};
|
|
2401
|
+
function Notice({ variant = "info", title, children, className, ...props }) {
|
|
2402
|
+
const Icon = variant !== null && variant !== void 0 && variant !== "none" ? noticeIcons[variant] : null;
|
|
2403
|
+
const role = variant === "error" ? "alert" : variant === "none" ? void 0 : "status";
|
|
2404
|
+
return /* @__PURE__ */ jsxs20(ark36.div, { role, className: cn61(noticeVariants({ variant }), className), ...props, children: [
|
|
2405
|
+
Icon ? /* @__PURE__ */ jsx61(Icon, {}) : null,
|
|
2406
|
+
title ? /* @__PURE__ */ jsx61(ark36.div, { className: noticeTitleBase, children: title }) : null,
|
|
2407
|
+
children ? /* @__PURE__ */ jsx61(ark36.div, { className: noticeDescriptionBase, children }) : null
|
|
2408
|
+
] });
|
|
2409
|
+
}
|
|
2410
|
+
|
|
2411
|
+
// src/figure.tsx
|
|
2412
|
+
import { ark as ark37 } from "@ark-ui/react/factory";
|
|
2413
|
+
import { figureRootBase, figureImageBase, figureCaptionBase, cn as cn62 } from "@cloudvoyant/vortex-ui";
|
|
2414
|
+
import { jsx as jsx62, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2415
|
+
function Figure({ src, alt, img, caption, className, ...props }) {
|
|
2416
|
+
return /* @__PURE__ */ jsxs21(ark37.figure, { className: cn62(figureRootBase, className), ...props, children: [
|
|
2417
|
+
img ?? (src ? /* @__PURE__ */ jsx62(ark37.img, { src, alt, loading: "lazy", className: figureImageBase }) : null),
|
|
2418
|
+
caption ? /* @__PURE__ */ jsx62(ark37.figcaption, { className: figureCaptionBase, children: caption }) : null
|
|
2419
|
+
] });
|
|
2420
|
+
}
|
|
2421
|
+
|
|
2422
|
+
// src/reveal.tsx
|
|
2423
|
+
import { CollapsibleRoot as CollapsibleRoot2, CollapsibleTrigger as CollapsibleTrigger2, CollapsibleContent as CollapsibleContent2 } from "@ark-ui/react/collapsible";
|
|
2424
|
+
import { revealRootBase, revealTriggerBase, revealChevronBase, revealContentBase, cn as cn63 } from "@cloudvoyant/vortex-ui";
|
|
2425
|
+
import { jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2426
|
+
function ChevronRightIcon({ className }) {
|
|
2427
|
+
return /* @__PURE__ */ jsx63(
|
|
2428
|
+
"svg",
|
|
2429
|
+
{
|
|
2430
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2431
|
+
viewBox: "0 0 24 24",
|
|
2432
|
+
fill: "none",
|
|
2433
|
+
stroke: "currentColor",
|
|
2434
|
+
strokeWidth: "2",
|
|
2435
|
+
strokeLinecap: "round",
|
|
2436
|
+
strokeLinejoin: "round",
|
|
2437
|
+
"aria-hidden": "true",
|
|
2438
|
+
className,
|
|
2439
|
+
children: /* @__PURE__ */ jsx63("path", { d: "m9 18 6-6-6-6" })
|
|
2440
|
+
}
|
|
2441
|
+
);
|
|
2442
|
+
}
|
|
2443
|
+
function Reveal({ question, children, className, ...props }) {
|
|
2444
|
+
return /* @__PURE__ */ jsxs22(CollapsibleRoot2, { className: cn63(revealRootBase, className), ...props, children: [
|
|
2445
|
+
/* @__PURE__ */ jsxs22(CollapsibleTrigger2, { className: revealTriggerBase, children: [
|
|
2446
|
+
/* @__PURE__ */ jsx63(ChevronRightIcon, { className: revealChevronBase }),
|
|
2447
|
+
/* @__PURE__ */ jsx63("span", { children: question })
|
|
2448
|
+
] }),
|
|
2449
|
+
/* @__PURE__ */ jsx63(CollapsibleContent2, { className: revealContentBase, children })
|
|
2450
|
+
] });
|
|
2451
|
+
}
|
|
2452
|
+
|
|
2453
|
+
// src/prevnext.tsx
|
|
2454
|
+
import { ark as ark38 } from "@ark-ui/react/factory";
|
|
2455
|
+
import {
|
|
2456
|
+
prevNextRootBase,
|
|
2457
|
+
prevNextLinkBase,
|
|
2458
|
+
prevNextLinkNextBase,
|
|
2459
|
+
prevNextDirectionBase,
|
|
2460
|
+
prevNextTitleBase,
|
|
2461
|
+
prevNextSpacerBase,
|
|
2462
|
+
cn as cn64
|
|
2463
|
+
} from "@cloudvoyant/vortex-ui";
|
|
2464
|
+
import { jsx as jsx64, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2465
|
+
function PrevNext({ prev, next, className, ...props }) {
|
|
2466
|
+
if (!prev && !next) return null;
|
|
2467
|
+
return /* @__PURE__ */ jsxs23(ark38.nav, { className: cn64(prevNextRootBase, className), "aria-label": "Previous and next pages", ...props, children: [
|
|
2468
|
+
prev ? /* @__PURE__ */ jsxs23(ark38.a, { href: prev.href, className: prevNextLinkBase, children: [
|
|
2469
|
+
/* @__PURE__ */ jsx64(ark38.span, { className: prevNextDirectionBase, children: "Previous" }),
|
|
2470
|
+
/* @__PURE__ */ jsxs23(ark38.span, { className: prevNextTitleBase, children: [
|
|
2471
|
+
"\u2190 ",
|
|
2472
|
+
prev.title
|
|
2473
|
+
] })
|
|
2474
|
+
] }) : /* @__PURE__ */ jsx64(ark38.span, { className: prevNextSpacerBase }),
|
|
2475
|
+
next ? /* @__PURE__ */ jsxs23(ark38.a, { href: next.href, className: cn64(prevNextLinkBase, prevNextLinkNextBase), children: [
|
|
2476
|
+
/* @__PURE__ */ jsx64(ark38.span, { className: prevNextDirectionBase, children: "Next" }),
|
|
2477
|
+
/* @__PURE__ */ jsxs23(ark38.span, { className: prevNextTitleBase, children: [
|
|
2478
|
+
next.title,
|
|
2479
|
+
" \u2192"
|
|
2480
|
+
] })
|
|
2481
|
+
] }) : /* @__PURE__ */ jsx64(ark38.span, { className: prevNextSpacerBase })
|
|
2482
|
+
] });
|
|
2483
|
+
}
|
|
2484
|
+
|
|
2485
|
+
// src/latex.tsx
|
|
2486
|
+
import { ark as ark39 } from "@ark-ui/react/factory";
|
|
2487
|
+
import { latexRootBase, latexDisplayBase, latexInlineBase, latexErrorBase, toLaTeX, cn as cn65 } from "@cloudvoyant/vortex-ui";
|
|
2488
|
+
import { jsx as jsx65 } from "react/jsx-runtime";
|
|
2489
|
+
function LaTeX({ latex, html, className, ...props }) {
|
|
2490
|
+
let markup;
|
|
2491
|
+
let error = false;
|
|
2492
|
+
if (html === void 0) {
|
|
2493
|
+
try {
|
|
2494
|
+
markup = toLaTeX(latex, { displayMode: true });
|
|
2495
|
+
} catch {
|
|
2496
|
+
markup = latex;
|
|
2497
|
+
error = true;
|
|
2498
|
+
}
|
|
2499
|
+
} else {
|
|
2500
|
+
markup = html;
|
|
2501
|
+
}
|
|
2502
|
+
return /* @__PURE__ */ jsx65(
|
|
2503
|
+
ark39.div,
|
|
2504
|
+
{
|
|
2505
|
+
...props,
|
|
2506
|
+
"data-latex-state": error ? "error" : "done",
|
|
2507
|
+
className: cn65(latexRootBase, latexDisplayBase, className),
|
|
2508
|
+
children: error ? /* @__PURE__ */ jsx65("code", { className: latexErrorBase, children: latex }) : /* @__PURE__ */ jsx65("span", { dangerouslySetInnerHTML: { __html: markup } })
|
|
2509
|
+
}
|
|
2510
|
+
);
|
|
2511
|
+
}
|
|
2512
|
+
function InlineLaTeX({ latex, html, className, ...props }) {
|
|
2513
|
+
let markup;
|
|
2514
|
+
let error = false;
|
|
2515
|
+
if (html === void 0) {
|
|
2516
|
+
try {
|
|
2517
|
+
markup = toLaTeX(latex);
|
|
2518
|
+
} catch {
|
|
2519
|
+
markup = latex;
|
|
2520
|
+
error = true;
|
|
2521
|
+
}
|
|
2522
|
+
} else {
|
|
2523
|
+
markup = html;
|
|
2524
|
+
}
|
|
2525
|
+
return /* @__PURE__ */ jsx65(
|
|
2526
|
+
ark39.span,
|
|
2527
|
+
{
|
|
2528
|
+
...props,
|
|
2529
|
+
"data-latex-state": error ? "error" : "done",
|
|
2530
|
+
className: cn65(latexRootBase, latexInlineBase, className),
|
|
2531
|
+
children: error ? /* @__PURE__ */ jsx65("code", { className: latexErrorBase, children: latex }) : /* @__PURE__ */ jsx65("span", { dangerouslySetInnerHTML: { __html: markup } })
|
|
2532
|
+
}
|
|
2533
|
+
);
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
// src/code-block.tsx
|
|
2537
|
+
import { createContext as createContext6, useContext as useContext6, useEffect as useEffect4, useState as useState4 } from "react";
|
|
2538
|
+
import { ark as ark40 } from "@ark-ui/react/factory";
|
|
2539
|
+
import {
|
|
2540
|
+
codeBlockRootBase,
|
|
2541
|
+
codeBlockHeaderBase,
|
|
2542
|
+
codeBlockTitleBase,
|
|
2543
|
+
codeBlockBodyBase,
|
|
2544
|
+
codeBlockBodyScrollableBase,
|
|
2545
|
+
codeBlockContentBase,
|
|
2546
|
+
codeBlockLineNumbersBase,
|
|
2547
|
+
codeBlockHighlightBase,
|
|
2548
|
+
codeBlockLoadingBase,
|
|
2549
|
+
codeBlockSpinnerBase,
|
|
2550
|
+
codeBlockCopyFloatBase,
|
|
2551
|
+
injectCodeBlockStyles,
|
|
2552
|
+
renderCodeToHtml,
|
|
2553
|
+
cn as cn66
|
|
2554
|
+
} from "@cloudvoyant/vortex-ui";
|
|
2555
|
+
import { Fragment as Fragment5, jsx as jsx66, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2556
|
+
var CodeBlockContext = createContext6(null);
|
|
2557
|
+
function useCodeBlock() {
|
|
2558
|
+
const ctx = useContext6(CodeBlockContext);
|
|
2559
|
+
if (!ctx) throw new Error("CodeBlock parts must be rendered inside a <CodeBlock>.");
|
|
2560
|
+
return ctx;
|
|
2561
|
+
}
|
|
2562
|
+
function CodeRenderer({
|
|
2563
|
+
code,
|
|
2564
|
+
language,
|
|
2565
|
+
html,
|
|
2566
|
+
showLineNumbers,
|
|
2567
|
+
scrollable,
|
|
2568
|
+
maxHeight,
|
|
2569
|
+
highlightLines
|
|
2570
|
+
}) {
|
|
2571
|
+
const [rendered, setRendered] = useState4(html ?? null);
|
|
2572
|
+
useEffect4(() => {
|
|
2573
|
+
injectCodeBlockStyles();
|
|
2574
|
+
}, []);
|
|
2575
|
+
const highlightKey = highlightLines?.join(",");
|
|
2576
|
+
useEffect4(() => {
|
|
2577
|
+
if (html !== void 0) return;
|
|
2578
|
+
let cancelled = false;
|
|
2579
|
+
setRendered(null);
|
|
2580
|
+
renderCodeToHtml(code, language, highlightLines).then((h) => {
|
|
2581
|
+
if (!cancelled) setRendered(h);
|
|
2582
|
+
});
|
|
2583
|
+
return () => {
|
|
2584
|
+
cancelled = true;
|
|
2585
|
+
};
|
|
2586
|
+
}, [code, language, html, highlightKey]);
|
|
2587
|
+
return /* @__PURE__ */ jsx66(
|
|
2588
|
+
"div",
|
|
2589
|
+
{
|
|
2590
|
+
className: cn66(codeBlockBodyBase, scrollable && codeBlockBodyScrollableBase),
|
|
2591
|
+
style: scrollable ? { maxHeight: `${maxHeight}px` } : void 0,
|
|
2592
|
+
children: rendered === null ? /* @__PURE__ */ jsx66("div", { className: codeBlockLoadingBase, children: /* @__PURE__ */ jsx66("div", { className: codeBlockSpinnerBase }) }) : /* @__PURE__ */ jsx66(
|
|
2593
|
+
"div",
|
|
2594
|
+
{
|
|
2595
|
+
dangerouslySetInnerHTML: { __html: rendered },
|
|
2596
|
+
className: cn66(
|
|
2597
|
+
codeBlockContentBase,
|
|
2598
|
+
showLineNumbers && codeBlockLineNumbersBase,
|
|
2599
|
+
highlightLines?.length && codeBlockHighlightBase
|
|
2600
|
+
)
|
|
2601
|
+
}
|
|
2602
|
+
)
|
|
2603
|
+
}
|
|
2604
|
+
);
|
|
2605
|
+
}
|
|
2606
|
+
function CodeBlock({
|
|
2607
|
+
code,
|
|
2608
|
+
language = "tsx",
|
|
2609
|
+
filename,
|
|
2610
|
+
html,
|
|
2611
|
+
showLineNumbers = false,
|
|
2612
|
+
scrollable = false,
|
|
2613
|
+
maxHeight = 400,
|
|
2614
|
+
highlightLines,
|
|
2615
|
+
className,
|
|
2616
|
+
children,
|
|
2617
|
+
...props
|
|
2618
|
+
}) {
|
|
2619
|
+
const ctx = { code, language, html, showLineNumbers, scrollable, maxHeight, highlightLines };
|
|
2620
|
+
return /* @__PURE__ */ jsx66(CodeBlockContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx66(ark40.div, { "data-code-block": true, className: cn66(codeBlockRootBase, className), ...props, children: children ?? /* @__PURE__ */ jsxs24(Fragment5, { children: [
|
|
2621
|
+
/* @__PURE__ */ jsxs24(CodeBlockHeader, { children: [
|
|
2622
|
+
/* @__PURE__ */ jsx66(CodeBlockTitle, { children: filename ?? language }),
|
|
2623
|
+
/* @__PURE__ */ jsx66("div", { className: "ml-auto", children: /* @__PURE__ */ jsx66(CodeBlockCopyButton, {}) })
|
|
2624
|
+
] }),
|
|
2625
|
+
/* @__PURE__ */ jsx66(CodeBlockContent, {})
|
|
2626
|
+
] }) }) });
|
|
2627
|
+
}
|
|
2628
|
+
function CodeBlockHeader({ className, children, ...props }) {
|
|
2629
|
+
return /* @__PURE__ */ jsx66(ark40.div, { className: cn66(codeBlockHeaderBase, className), ...props, children });
|
|
2630
|
+
}
|
|
2631
|
+
function CodeBlockTitle({ className, children, ...props }) {
|
|
2632
|
+
return /* @__PURE__ */ jsx66(ark40.span, { className: cn66(codeBlockTitleBase, className), ...props, children });
|
|
2633
|
+
}
|
|
2634
|
+
function CodeBlockCopyButton({ label = "Copy code", className, ...props }) {
|
|
2635
|
+
const { code } = useCodeBlock();
|
|
2636
|
+
return /* @__PURE__ */ jsx66(ark40.div, { className, ...props, children: /* @__PURE__ */ jsx66(CopyButton, { value: code, label }) });
|
|
2637
|
+
}
|
|
2638
|
+
function CodeBlockContent({ className, html, ...props }) {
|
|
2639
|
+
const ctx = useCodeBlock();
|
|
2640
|
+
return /* @__PURE__ */ jsx66(ark40.div, { className, ...props, children: /* @__PURE__ */ jsx66(CodeRenderer, { ...ctx, html: html ?? ctx.html }) });
|
|
2641
|
+
}
|
|
2642
|
+
function MultiFileCodeBlock({
|
|
2643
|
+
files,
|
|
2644
|
+
showLineNumbers = false,
|
|
2645
|
+
scrollable = false,
|
|
2646
|
+
maxHeight = 400,
|
|
2647
|
+
className,
|
|
2648
|
+
...props
|
|
2649
|
+
}) {
|
|
2650
|
+
const [active, setActive] = useState4(files[0]?.filename ?? "");
|
|
2651
|
+
const file = files.find((f) => f.filename === active) ?? files[0];
|
|
2652
|
+
useEffect4(() => {
|
|
2653
|
+
if (!files.some((f) => f.filename === active)) {
|
|
2654
|
+
setActive(files[0]?.filename ?? "");
|
|
2655
|
+
}
|
|
2656
|
+
}, [files, active]);
|
|
2657
|
+
return /* @__PURE__ */ jsxs24(ark40.div, { "data-code-block": true, className: cn66(codeBlockRootBase, className), ...props, children: [
|
|
2658
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between border-b bg-muted/50", children: [
|
|
2659
|
+
/* @__PURE__ */ jsx66("div", { role: "tablist", "aria-label": "Files", className: "flex overflow-x-auto no-scrollbar pl-1", children: files.map((f) => /* @__PURE__ */ jsx66(
|
|
2660
|
+
"button",
|
|
2661
|
+
{
|
|
2662
|
+
role: "tab",
|
|
2663
|
+
"aria-selected": active === f.filename,
|
|
2664
|
+
onClick: () => setActive(f.filename),
|
|
2665
|
+
className: cn66(
|
|
2666
|
+
"h-10 shrink-0 border-b-2 px-3 font-mono text-xs transition-colors",
|
|
2667
|
+
active === f.filename ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
|
|
2668
|
+
),
|
|
2669
|
+
children: f.filename
|
|
2670
|
+
},
|
|
2671
|
+
f.filename
|
|
2672
|
+
)) }),
|
|
2673
|
+
file ? /* @__PURE__ */ jsx66("div", { className: "shrink-0 pr-3", children: /* @__PURE__ */ jsx66(CopyButton, { value: file.code, label: "Copy code" }) }) : null
|
|
2674
|
+
] }),
|
|
2675
|
+
file ? /* @__PURE__ */ jsx66(
|
|
2676
|
+
CodeRenderer,
|
|
2677
|
+
{
|
|
2678
|
+
code: file.code,
|
|
2679
|
+
language: file.language ?? "tsx",
|
|
2680
|
+
html: file.html,
|
|
2681
|
+
showLineNumbers,
|
|
2682
|
+
scrollable,
|
|
2683
|
+
maxHeight
|
|
2684
|
+
}
|
|
2685
|
+
) : null
|
|
2686
|
+
] });
|
|
2687
|
+
}
|
|
2688
|
+
function LanguageTabsCodeBlock({
|
|
2689
|
+
tabs,
|
|
2690
|
+
showLineNumbers = false,
|
|
2691
|
+
scrollable = false,
|
|
2692
|
+
maxHeight = 400,
|
|
2693
|
+
className,
|
|
2694
|
+
...props
|
|
2695
|
+
}) {
|
|
2696
|
+
const [active, setActive] = useState4(tabs[0]?.label ?? "");
|
|
2697
|
+
const tab = tabs.find((t) => t.label === active) ?? tabs[0];
|
|
2698
|
+
useEffect4(() => {
|
|
2699
|
+
if (!tabs.some((t) => t.label === active)) {
|
|
2700
|
+
setActive(tabs[0]?.label ?? "");
|
|
2701
|
+
}
|
|
2702
|
+
}, [tabs, active]);
|
|
2703
|
+
return /* @__PURE__ */ jsxs24(ark40.div, { "data-code-block": true, className: cn66(codeBlockRootBase, className), ...props, children: [
|
|
2704
|
+
/* @__PURE__ */ jsxs24(CodeBlockHeader, { children: [
|
|
2705
|
+
/* @__PURE__ */ jsx66(CodeBlockTitle, { children: tab?.filename }),
|
|
2706
|
+
/* @__PURE__ */ jsx66("div", { className: "ml-auto", children: /* @__PURE__ */ jsxs24(
|
|
2707
|
+
Select,
|
|
2708
|
+
{
|
|
2709
|
+
items: tabs.map((t) => ({ value: t.label, label: t.label })),
|
|
2710
|
+
value: [active],
|
|
2711
|
+
onValueChange: (details) => setActive(details.value[0]),
|
|
2712
|
+
"aria-label": "Language",
|
|
2713
|
+
children: [
|
|
2714
|
+
/* @__PURE__ */ jsxs24(SelectTrigger, { size: "sm", className: "min-w-28 justify-between font-mono text-xs", children: [
|
|
2715
|
+
/* @__PURE__ */ jsx66(SelectValue, {}),
|
|
2716
|
+
/* @__PURE__ */ jsx66(SelectIndicator, { children: /* @__PURE__ */ jsx66(
|
|
2717
|
+
"svg",
|
|
2718
|
+
{
|
|
2719
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2720
|
+
viewBox: "0 0 24 24",
|
|
2721
|
+
fill: "none",
|
|
2722
|
+
stroke: "currentColor",
|
|
2723
|
+
strokeWidth: "2",
|
|
2724
|
+
strokeLinecap: "round",
|
|
2725
|
+
strokeLinejoin: "round",
|
|
2726
|
+
"aria-hidden": "true",
|
|
2727
|
+
children: /* @__PURE__ */ jsx66("path", { d: "m6 9 6 6 6-6" })
|
|
2728
|
+
}
|
|
2729
|
+
) })
|
|
2730
|
+
] }),
|
|
2731
|
+
/* @__PURE__ */ jsx66(SelectContent, { children: tabs.map((t) => /* @__PURE__ */ jsxs24(SelectItem, { item: { value: t.label, label: t.label }, children: [
|
|
2732
|
+
/* @__PURE__ */ jsx66(SelectItemText, { children: t.label }),
|
|
2733
|
+
/* @__PURE__ */ jsx66(SelectItemIndicator, { children: /* @__PURE__ */ jsx66(
|
|
2734
|
+
"svg",
|
|
2735
|
+
{
|
|
2736
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2737
|
+
viewBox: "0 0 24 24",
|
|
2738
|
+
fill: "none",
|
|
2739
|
+
stroke: "currentColor",
|
|
2740
|
+
strokeWidth: "2",
|
|
2741
|
+
strokeLinecap: "round",
|
|
2742
|
+
strokeLinejoin: "round",
|
|
2743
|
+
"aria-hidden": "true",
|
|
2744
|
+
children: /* @__PURE__ */ jsx66("path", { d: "M20 6 9 17l-5-5" })
|
|
2745
|
+
}
|
|
2746
|
+
) })
|
|
2747
|
+
] }, t.label)) })
|
|
2748
|
+
]
|
|
2749
|
+
}
|
|
2750
|
+
) })
|
|
2751
|
+
] }),
|
|
2752
|
+
tab ? /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
|
|
2753
|
+
/* @__PURE__ */ jsx66(
|
|
2754
|
+
CodeRenderer,
|
|
2755
|
+
{
|
|
2756
|
+
code: tab.code,
|
|
2757
|
+
language: tab.language ?? "tsx",
|
|
2758
|
+
html: tab.html,
|
|
2759
|
+
showLineNumbers,
|
|
2760
|
+
scrollable,
|
|
2761
|
+
maxHeight
|
|
2762
|
+
}
|
|
2763
|
+
),
|
|
2764
|
+
/* @__PURE__ */ jsx66("div", { className: codeBlockCopyFloatBase, children: /* @__PURE__ */ jsx66(CopyButton, { value: tab.code, label: "Copy code" }) })
|
|
2765
|
+
] }) : null
|
|
2766
|
+
] });
|
|
2767
|
+
}
|
|
2768
|
+
|
|
2769
|
+
// src/manim.tsx
|
|
2770
|
+
import { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
|
|
2771
|
+
import { ark as ark41 } from "@ark-ui/react/factory";
|
|
2772
|
+
import {
|
|
2773
|
+
manimRootBase,
|
|
2774
|
+
manimContainerBase,
|
|
2775
|
+
manimPlaceholderBase,
|
|
2776
|
+
manimPlaceholderLabelBase,
|
|
2777
|
+
manimErrorBase,
|
|
2778
|
+
manimCaptionBase,
|
|
2779
|
+
cn as cn67
|
|
2780
|
+
} from "@cloudvoyant/vortex-ui";
|
|
2781
|
+
import { jsx as jsx67, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2782
|
+
function Manim({ build, width = 800, height = 450, caption, className, ...props }) {
|
|
2783
|
+
const wrapperRef = useRef2(null);
|
|
2784
|
+
const containerRef = useRef2(null);
|
|
2785
|
+
const [state, setState] = useState5("loading");
|
|
2786
|
+
const [errorMsg, setErrorMsg] = useState5("");
|
|
2787
|
+
useEffect5(() => {
|
|
2788
|
+
const wrapper = wrapperRef.current;
|
|
2789
|
+
if (!wrapper) return;
|
|
2790
|
+
let disposed = false;
|
|
2791
|
+
let player = null;
|
|
2792
|
+
let resizeTimer;
|
|
2793
|
+
let mountedWidth = 0;
|
|
2794
|
+
let generation = 0;
|
|
2795
|
+
function fail(msg) {
|
|
2796
|
+
if (!disposed) {
|
|
2797
|
+
setErrorMsg(msg);
|
|
2798
|
+
setState("error");
|
|
2799
|
+
}
|
|
2800
|
+
}
|
|
2801
|
+
async function mount(pixelWidth) {
|
|
2802
|
+
const gen = ++generation;
|
|
2803
|
+
try {
|
|
2804
|
+
const manim = await import("manim-web");
|
|
2805
|
+
if (disposed || gen !== generation || !containerRef.current) return;
|
|
2806
|
+
try {
|
|
2807
|
+
player?.dispose?.();
|
|
2808
|
+
} catch {
|
|
2809
|
+
}
|
|
2810
|
+
containerRef.current.replaceChildren();
|
|
2811
|
+
mountedWidth = pixelWidth;
|
|
2812
|
+
player = new manim.Player(containerRef.current, {
|
|
2813
|
+
width: pixelWidth,
|
|
2814
|
+
height: Math.round(pixelWidth * height / width),
|
|
2815
|
+
backgroundOpacity: 0,
|
|
2816
|
+
autoPlay: true,
|
|
2817
|
+
loop: false
|
|
2818
|
+
});
|
|
2819
|
+
setState("ready");
|
|
2820
|
+
await player.sequence(async (scene) => {
|
|
2821
|
+
await build(manim, scene);
|
|
2822
|
+
});
|
|
2823
|
+
} catch (err) {
|
|
2824
|
+
if (gen === generation) {
|
|
2825
|
+
fail(`Failed to load animation: ${err instanceof Error ? err.message : String(err)}`);
|
|
2826
|
+
}
|
|
2827
|
+
}
|
|
2828
|
+
}
|
|
2829
|
+
const initialWidth = Math.floor(wrapper.getBoundingClientRect().width);
|
|
2830
|
+
if (initialWidth > 0) void mount(initialWidth);
|
|
2831
|
+
const observer = new ResizeObserver((entries) => {
|
|
2832
|
+
const measured = Math.floor(entries[0]?.contentRect.width ?? 0);
|
|
2833
|
+
if (measured <= 0 || measured === mountedWidth) return;
|
|
2834
|
+
clearTimeout(resizeTimer);
|
|
2835
|
+
resizeTimer = setTimeout(() => {
|
|
2836
|
+
if (!disposed) void mount(measured);
|
|
2837
|
+
}, 200);
|
|
2838
|
+
});
|
|
2839
|
+
observer.observe(wrapper);
|
|
2840
|
+
return () => {
|
|
2841
|
+
disposed = true;
|
|
2842
|
+
clearTimeout(resizeTimer);
|
|
2843
|
+
observer.disconnect();
|
|
2844
|
+
try {
|
|
2845
|
+
player?.dispose?.();
|
|
2846
|
+
} catch {
|
|
2847
|
+
}
|
|
2848
|
+
};
|
|
2849
|
+
}, [build, width, height]);
|
|
2850
|
+
return /* @__PURE__ */ jsxs25(ark41.figure, { "data-manim-state": state, className: cn67(manimRootBase, className), ...props, children: [
|
|
2851
|
+
/* @__PURE__ */ jsxs25("div", { ref: wrapperRef, className: manimContainerBase, children: [
|
|
2852
|
+
/* @__PURE__ */ jsx67("div", { ref: containerRef, className: "w-full" }),
|
|
2853
|
+
state === "loading" && /* @__PURE__ */ jsx67("div", { className: manimPlaceholderBase, style: { aspectRatio: `${width} / ${height}` }, children: /* @__PURE__ */ jsx67("span", { className: manimPlaceholderLabelBase, children: "Loading animation\u2026" }) }),
|
|
2854
|
+
state === "error" && /* @__PURE__ */ jsx67("div", { className: manimErrorBase, children: errorMsg })
|
|
2855
|
+
] }),
|
|
2856
|
+
caption ? /* @__PURE__ */ jsx67(ark41.figcaption, { className: manimCaptionBase, children: caption }) : null
|
|
2857
|
+
] });
|
|
2858
|
+
}
|
|
2859
|
+
|
|
2860
|
+
// src/youtube.tsx
|
|
2861
|
+
import { createContext as createContext7, useContext as useContext7, useEffect as useEffect6, useState as useState6 } from "react";
|
|
2862
|
+
import { ark as ark42 } from "@ark-ui/react/factory";
|
|
2863
|
+
import {
|
|
2864
|
+
youtubeRootBase,
|
|
2865
|
+
youtubeTitleBase,
|
|
2866
|
+
youtubeFacadeBase,
|
|
2867
|
+
youtubePlayButtonBase,
|
|
2868
|
+
youtubePlayButtonInnerBase,
|
|
2869
|
+
youtubeDescriptionBase,
|
|
2870
|
+
youtubeChaptersBase,
|
|
2871
|
+
youtubeChaptersSummaryBase,
|
|
2872
|
+
youtubeChaptersChevronBase,
|
|
2873
|
+
youtubeChaptersListBase,
|
|
2874
|
+
youtubeChapterButtonBase,
|
|
2875
|
+
youtubeChapterTimeBase,
|
|
2876
|
+
youtubeChapterLabelBase,
|
|
2877
|
+
extractYouTubeId,
|
|
2878
|
+
formatTime,
|
|
2879
|
+
parseYouTubeChapters,
|
|
2880
|
+
fetchYouTubeMetadata,
|
|
2881
|
+
cn as cn68
|
|
2882
|
+
} from "@cloudvoyant/vortex-ui";
|
|
2883
|
+
import { jsx as jsx68, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2884
|
+
function PlayIcon() {
|
|
2885
|
+
return /* @__PURE__ */ jsx68(
|
|
2886
|
+
"svg",
|
|
2887
|
+
{
|
|
2888
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2889
|
+
viewBox: "0 0 24 24",
|
|
2890
|
+
fill: "currentColor",
|
|
2891
|
+
className: "h-8 w-8",
|
|
2892
|
+
"aria-hidden": "true",
|
|
2893
|
+
children: /* @__PURE__ */ jsx68("path", { d: "M8 5v14l11-7z" })
|
|
2894
|
+
}
|
|
2895
|
+
);
|
|
2896
|
+
}
|
|
2897
|
+
function ChevronRightIcon2({ className }) {
|
|
2898
|
+
return /* @__PURE__ */ jsx68(
|
|
2899
|
+
"svg",
|
|
2900
|
+
{
|
|
2901
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2902
|
+
viewBox: "0 0 24 24",
|
|
2903
|
+
fill: "none",
|
|
2904
|
+
stroke: "currentColor",
|
|
2905
|
+
strokeWidth: "2",
|
|
2906
|
+
strokeLinecap: "round",
|
|
2907
|
+
strokeLinejoin: "round",
|
|
2908
|
+
"aria-hidden": "true",
|
|
2909
|
+
className,
|
|
2910
|
+
children: /* @__PURE__ */ jsx68("path", { d: "m9 18 6-6-6-6" })
|
|
2911
|
+
}
|
|
2912
|
+
);
|
|
2913
|
+
}
|
|
2914
|
+
var YouTubeContext = createContext7(null);
|
|
2915
|
+
function useYouTube() {
|
|
2916
|
+
const ctx = useContext7(YouTubeContext);
|
|
2917
|
+
if (!ctx) throw new Error("YoutubeTimestamps must be rendered inside a <YouTube>.");
|
|
2918
|
+
return ctx;
|
|
2919
|
+
}
|
|
2920
|
+
function YouTube({ url, title, description, poster, className, children, ...props }) {
|
|
2921
|
+
const videoId = extractYouTubeId(url);
|
|
2922
|
+
const posterUrl = poster ?? `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
|
|
2923
|
+
const [playing, setPlaying] = useState6(false);
|
|
2924
|
+
const [startAt, setStartAt] = useState6(null);
|
|
2925
|
+
const seek = (t) => {
|
|
2926
|
+
setStartAt(t);
|
|
2927
|
+
setPlaying(true);
|
|
2928
|
+
};
|
|
2929
|
+
const src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1${startAt == null ? "" : `&start=${startAt}`}`;
|
|
2930
|
+
return /* @__PURE__ */ jsx68(YouTubeContext.Provider, { value: { url, videoId, seek }, children: /* @__PURE__ */ jsxs26(ark42.div, { "data-youtube-id": videoId, className: cn68(youtubeRootBase, className), ...props, children: [
|
|
2931
|
+
title ? /* @__PURE__ */ jsx68(ark42.h3, { className: youtubeTitleBase, children: title }) : null,
|
|
2932
|
+
playing ? /* @__PURE__ */ jsx68(
|
|
2933
|
+
"iframe",
|
|
2934
|
+
{
|
|
2935
|
+
src,
|
|
2936
|
+
title: title ?? `YouTube video ${videoId}`,
|
|
2937
|
+
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
|
|
2938
|
+
allowFullScreen: true,
|
|
2939
|
+
className: "aspect-video w-full rounded-md border border-border"
|
|
2940
|
+
}
|
|
2941
|
+
) : /* @__PURE__ */ jsxs26(
|
|
2942
|
+
ark42.button,
|
|
2943
|
+
{
|
|
2944
|
+
type: "button",
|
|
2945
|
+
className: youtubeFacadeBase,
|
|
2946
|
+
onClick: () => setPlaying(true),
|
|
2947
|
+
"aria-label": title ? `Play video: ${title}` : "Play video",
|
|
2948
|
+
children: [
|
|
2949
|
+
/* @__PURE__ */ jsx68(
|
|
2950
|
+
ark42.img,
|
|
2951
|
+
{
|
|
2952
|
+
src: posterUrl,
|
|
2953
|
+
alt: title ?? `YouTube video ${videoId}`,
|
|
2954
|
+
loading: "lazy",
|
|
2955
|
+
className: "h-full w-full object-cover"
|
|
2956
|
+
}
|
|
2957
|
+
),
|
|
2958
|
+
/* @__PURE__ */ jsx68(ark42.span, { className: youtubePlayButtonBase, "aria-hidden": "true", children: /* @__PURE__ */ jsx68(ark42.span, { className: youtubePlayButtonInnerBase, children: /* @__PURE__ */ jsx68(PlayIcon, {}) }) })
|
|
2959
|
+
]
|
|
2960
|
+
}
|
|
2961
|
+
),
|
|
2962
|
+
description ? /* @__PURE__ */ jsx68(ark42.p, { className: youtubeDescriptionBase, children: description }) : null,
|
|
2963
|
+
children
|
|
2964
|
+
] }) });
|
|
2965
|
+
}
|
|
2966
|
+
function YoutubeTimestampAt({ t, children, className, ...props }) {
|
|
2967
|
+
const { seek } = useYouTube();
|
|
2968
|
+
return /* @__PURE__ */ jsx68(ark42.li, { className, ...props, children: /* @__PURE__ */ jsxs26(ark42.button, { type: "button", onClick: () => seek(t), className: youtubeChapterButtonBase, children: [
|
|
2969
|
+
/* @__PURE__ */ jsx68(ark42.span, { className: youtubeChapterTimeBase, children: formatTime(t) }),
|
|
2970
|
+
/* @__PURE__ */ jsx68(ark42.span, { className: youtubeChapterLabelBase, children })
|
|
2971
|
+
] }) });
|
|
2972
|
+
}
|
|
2973
|
+
function YoutubeTimestamps({ chapters, children, className, ...props }) {
|
|
2974
|
+
const { url } = useYouTube();
|
|
2975
|
+
const [inferred, setInferred] = useState6([]);
|
|
2976
|
+
const [loading, setLoading] = useState6(chapters === void 0);
|
|
2977
|
+
useEffect6(() => {
|
|
2978
|
+
if (chapters !== void 0) return;
|
|
2979
|
+
let cancelled = false;
|
|
2980
|
+
setLoading(true);
|
|
2981
|
+
fetchYouTubeMetadata(url).then((meta) => {
|
|
2982
|
+
if (!cancelled) {
|
|
2983
|
+
setInferred(meta.description ? parseYouTubeChapters(meta.description) : []);
|
|
2984
|
+
setLoading(false);
|
|
2985
|
+
}
|
|
2986
|
+
}).catch(() => {
|
|
2987
|
+
if (!cancelled) setLoading(false);
|
|
2988
|
+
});
|
|
2989
|
+
return () => {
|
|
2990
|
+
cancelled = true;
|
|
2991
|
+
};
|
|
2992
|
+
}, [url, chapters]);
|
|
2993
|
+
const resolved = chapters ?? inferred;
|
|
2994
|
+
const hasChildren = children !== void 0 && children !== null;
|
|
2995
|
+
if (!loading && resolved.length === 0 && !hasChildren) return null;
|
|
2996
|
+
return /* @__PURE__ */ jsx68(ark42.div, { className: cn68(youtubeChaptersBase, className), ...props, children: /* @__PURE__ */ jsxs26("details", { className: "group", open: true, children: [
|
|
2997
|
+
/* @__PURE__ */ jsxs26(ark42.summary, { className: youtubeChaptersSummaryBase, children: [
|
|
2998
|
+
/* @__PURE__ */ jsx68(ChevronRightIcon2, { className: youtubeChaptersChevronBase }),
|
|
2999
|
+
/* @__PURE__ */ jsx68("span", { children: "Timestamps" })
|
|
3000
|
+
] }),
|
|
3001
|
+
/* @__PURE__ */ jsx68(ark42.nav, { "aria-label": "Video timestamps", className: youtubeChaptersListBase, children: /* @__PURE__ */ jsxs26(ark42.ul, { className: "space-y-1", children: [
|
|
3002
|
+
resolved.map((ch) => /* @__PURE__ */ jsx68(YoutubeTimestampAt, { t: ch.t, children: ch.label }, ch.t)),
|
|
3003
|
+
children
|
|
3004
|
+
] }) })
|
|
3005
|
+
] }) });
|
|
3006
|
+
}
|
|
3007
|
+
|
|
3008
|
+
// src/chart.tsx
|
|
3009
|
+
import { ark as ark43 } from "@ark-ui/react/factory";
|
|
3010
|
+
import { Chart as TanStackChart } from "@tanstack/charts/react";
|
|
3011
|
+
import { chartRootBase, buildChartDefinition, cn as cn69 } from "@cloudvoyant/vortex-ui";
|
|
3012
|
+
import { jsx as jsx69 } from "react/jsx-runtime";
|
|
3013
|
+
function Chart({ svg, className, ...props }) {
|
|
3014
|
+
const { type, height = 320 } = props;
|
|
3015
|
+
if (svg !== void 0) {
|
|
3016
|
+
return /* @__PURE__ */ jsx69(ark43.div, { "data-chart-state": "prerendered", "data-chart-type": type, className: cn69(chartRootBase, className), children: /* @__PURE__ */ jsx69("div", { className: "flex w-full justify-center [&>svg]:max-w-full", dangerouslySetInnerHTML: { __html: svg } }) });
|
|
3017
|
+
}
|
|
3018
|
+
const definition = buildChartDefinition(props);
|
|
3019
|
+
return /* @__PURE__ */ jsx69(ark43.div, { "data-chart-state": "ready", "data-chart-type": type, className: cn69(chartRootBase, className), children: /* @__PURE__ */ jsx69(TanStackChart, { definition, height, ariaLabel: type === "pie" ? "Pie chart" : "Chart" }) });
|
|
3020
|
+
}
|
|
3021
|
+
|
|
3022
|
+
// src/questions.tsx
|
|
3023
|
+
import { useEffect as useEffect7, useState as useState7 } from "react";
|
|
3024
|
+
import { ark as ark44 } from "@ark-ui/react/factory";
|
|
3025
|
+
import {
|
|
3026
|
+
questionCardBase,
|
|
3027
|
+
questionPromptBase,
|
|
3028
|
+
questionGroupBase,
|
|
3029
|
+
questionOptionBase,
|
|
3030
|
+
questionOptionCorrectBase,
|
|
3031
|
+
questionOptionIncorrectBase,
|
|
3032
|
+
questionCheckButtonBase,
|
|
3033
|
+
questionInputBase,
|
|
3034
|
+
questionUnitBase,
|
|
3035
|
+
feedbackCorrectBase,
|
|
3036
|
+
feedbackIncorrectBase,
|
|
3037
|
+
feedbackExplanationBase,
|
|
3038
|
+
quizRootBase,
|
|
3039
|
+
quizHeaderBase,
|
|
3040
|
+
quizTitleBase,
|
|
3041
|
+
quizScoreBase,
|
|
3042
|
+
quizResultBase,
|
|
3043
|
+
quizResultTitleBase,
|
|
3044
|
+
quizResultTextBase,
|
|
3045
|
+
quizSubmitButtonBase,
|
|
3046
|
+
quizResetButtonBase,
|
|
3047
|
+
cn as cn70
|
|
3048
|
+
} from "@cloudvoyant/vortex-ui";
|
|
3049
|
+
import { Fragment as Fragment6, jsx as jsx70, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3050
|
+
function CheckCircleIcon2() {
|
|
3051
|
+
return /* @__PURE__ */ jsxs27(
|
|
3052
|
+
"svg",
|
|
3053
|
+
{
|
|
3054
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
3055
|
+
viewBox: "0 0 24 24",
|
|
3056
|
+
fill: "none",
|
|
3057
|
+
stroke: "currentColor",
|
|
3058
|
+
strokeWidth: "2",
|
|
3059
|
+
strokeLinecap: "round",
|
|
3060
|
+
strokeLinejoin: "round",
|
|
3061
|
+
"aria-hidden": "true",
|
|
3062
|
+
className: "size-4 shrink-0",
|
|
3063
|
+
children: [
|
|
3064
|
+
/* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "10" }),
|
|
3065
|
+
/* @__PURE__ */ jsx70("path", { d: "m9 12 2 2 4-4" })
|
|
3066
|
+
]
|
|
3067
|
+
}
|
|
3068
|
+
);
|
|
3069
|
+
}
|
|
3070
|
+
function CircleXIcon2() {
|
|
3071
|
+
return /* @__PURE__ */ jsxs27(
|
|
3072
|
+
"svg",
|
|
3073
|
+
{
|
|
3074
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
3075
|
+
viewBox: "0 0 24 24",
|
|
3076
|
+
fill: "none",
|
|
3077
|
+
stroke: "currentColor",
|
|
3078
|
+
strokeWidth: "2",
|
|
3079
|
+
strokeLinecap: "round",
|
|
3080
|
+
strokeLinejoin: "round",
|
|
3081
|
+
"aria-hidden": "true",
|
|
3082
|
+
className: "size-4 shrink-0",
|
|
3083
|
+
children: [
|
|
3084
|
+
/* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "10" }),
|
|
3085
|
+
/* @__PURE__ */ jsx70("path", { d: "m15 9-6 6" }),
|
|
3086
|
+
/* @__PURE__ */ jsx70("path", { d: "m9 9 6 6" })
|
|
3087
|
+
]
|
|
3088
|
+
}
|
|
3089
|
+
);
|
|
3090
|
+
}
|
|
3091
|
+
function CheckIcon2() {
|
|
3092
|
+
return /* @__PURE__ */ jsx70(
|
|
3093
|
+
"svg",
|
|
3094
|
+
{
|
|
3095
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
3096
|
+
viewBox: "0 0 24 24",
|
|
3097
|
+
fill: "none",
|
|
3098
|
+
stroke: "currentColor",
|
|
3099
|
+
strokeWidth: "2",
|
|
3100
|
+
strokeLinecap: "round",
|
|
3101
|
+
strokeLinejoin: "round",
|
|
3102
|
+
"aria-hidden": "true",
|
|
3103
|
+
children: /* @__PURE__ */ jsx70("path", { d: "M20 6 9 17l-5-5" })
|
|
3104
|
+
}
|
|
3105
|
+
);
|
|
3106
|
+
}
|
|
3107
|
+
function Feedback({ correct, explanation }) {
|
|
3108
|
+
if (correct === null) return null;
|
|
3109
|
+
return /* @__PURE__ */ jsxs27("div", { "aria-live": "polite", role: "status", className: "mt-3", children: [
|
|
3110
|
+
/* @__PURE__ */ jsx70(
|
|
3111
|
+
"div",
|
|
3112
|
+
{
|
|
3113
|
+
className: cn70(
|
|
3114
|
+
"flex items-center gap-2 text-sm font-medium",
|
|
3115
|
+
correct ? feedbackCorrectBase : feedbackIncorrectBase
|
|
3116
|
+
),
|
|
3117
|
+
children: correct ? /* @__PURE__ */ jsxs27(Fragment6, { children: [
|
|
3118
|
+
/* @__PURE__ */ jsx70(CheckCircleIcon2, {}),
|
|
3119
|
+
/* @__PURE__ */ jsx70("span", { children: "Correct" })
|
|
3120
|
+
] }) : /* @__PURE__ */ jsxs27(Fragment6, { children: [
|
|
3121
|
+
/* @__PURE__ */ jsx70(CircleXIcon2, {}),
|
|
3122
|
+
/* @__PURE__ */ jsx70("span", { children: "Incorrect" })
|
|
3123
|
+
] })
|
|
3124
|
+
}
|
|
3125
|
+
),
|
|
3126
|
+
explanation ? /* @__PURE__ */ jsx70("p", { className: feedbackExplanationBase, children: explanation }) : null
|
|
3127
|
+
] });
|
|
3128
|
+
}
|
|
3129
|
+
function SingleChoiceRenderer({
|
|
3130
|
+
prompt,
|
|
3131
|
+
choices,
|
|
3132
|
+
correct,
|
|
3133
|
+
explanation,
|
|
3134
|
+
quiz = false,
|
|
3135
|
+
submitted = false,
|
|
3136
|
+
onAnswerChange,
|
|
3137
|
+
onGraded,
|
|
3138
|
+
className,
|
|
3139
|
+
...rest
|
|
3140
|
+
}) {
|
|
3141
|
+
const [selected, setSelected] = useState7(null);
|
|
3142
|
+
const [result, setResult] = useState7(null);
|
|
3143
|
+
useEffect7(() => {
|
|
3144
|
+
if (quiz) {
|
|
3145
|
+
const isAnswered = selected !== null;
|
|
3146
|
+
onAnswerChange?.({ answered: isAnswered, correct: isAnswered && selected === correct });
|
|
3147
|
+
}
|
|
3148
|
+
}, [quiz, selected, correct]);
|
|
3149
|
+
const displayResult = quiz ? submitted ? selected === correct : null : result;
|
|
3150
|
+
const handleCheck = () => {
|
|
3151
|
+
if (selected === null) return;
|
|
3152
|
+
const isCorrect = selected === correct;
|
|
3153
|
+
setResult(isCorrect);
|
|
3154
|
+
onGraded?.(isCorrect);
|
|
3155
|
+
};
|
|
3156
|
+
return /* @__PURE__ */ jsxs27("div", { className: cn70(questionCardBase, className), ...rest, children: [
|
|
3157
|
+
/* @__PURE__ */ jsx70("p", { className: questionPromptBase, children: prompt }),
|
|
3158
|
+
/* @__PURE__ */ jsx70(
|
|
3159
|
+
RadioGroup,
|
|
3160
|
+
{
|
|
3161
|
+
orientation: "vertical",
|
|
3162
|
+
value: selected === null ? null : String(selected),
|
|
3163
|
+
onValueChange: (details) => {
|
|
3164
|
+
if (quiz ? submitted : result !== null) return;
|
|
3165
|
+
setSelected(details.value == null ? null : Number(details.value));
|
|
3166
|
+
},
|
|
3167
|
+
disabled: quiz ? submitted : result !== null,
|
|
3168
|
+
className: questionGroupBase,
|
|
3169
|
+
children: choices.map((choice, i) => /* @__PURE__ */ jsx70(
|
|
3170
|
+
RadioGroupItem,
|
|
3171
|
+
{
|
|
3172
|
+
value: String(i),
|
|
3173
|
+
className: cn70(
|
|
3174
|
+
questionOptionBase,
|
|
3175
|
+
displayResult !== null && i === correct && questionOptionCorrectBase,
|
|
3176
|
+
displayResult !== null && i === selected && i !== correct && questionOptionIncorrectBase
|
|
3177
|
+
),
|
|
3178
|
+
children: choice
|
|
3179
|
+
},
|
|
3180
|
+
i
|
|
3181
|
+
))
|
|
3182
|
+
}
|
|
3183
|
+
),
|
|
3184
|
+
!quiz && result === null && /* @__PURE__ */ jsx70(
|
|
3185
|
+
ark44.button,
|
|
3186
|
+
{
|
|
3187
|
+
type: "button",
|
|
3188
|
+
onClick: handleCheck,
|
|
3189
|
+
disabled: selected === null,
|
|
3190
|
+
className: questionCheckButtonBase,
|
|
3191
|
+
children: "Check"
|
|
3192
|
+
}
|
|
3193
|
+
),
|
|
3194
|
+
/* @__PURE__ */ jsx70(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
|
|
3195
|
+
] });
|
|
3196
|
+
}
|
|
3197
|
+
function MultipleChoiceRenderer({
|
|
3198
|
+
prompt,
|
|
3199
|
+
choices,
|
|
3200
|
+
correct,
|
|
3201
|
+
explanation,
|
|
3202
|
+
quiz = false,
|
|
3203
|
+
submitted = false,
|
|
3204
|
+
onAnswerChange,
|
|
3205
|
+
onGraded,
|
|
3206
|
+
className,
|
|
3207
|
+
...rest
|
|
3208
|
+
}) {
|
|
3209
|
+
const [selected, setSelected] = useState7(/* @__PURE__ */ new Set());
|
|
3210
|
+
const [result, setResult] = useState7(null);
|
|
3211
|
+
const computeCorrect = () => {
|
|
3212
|
+
const correctSet = new Set(correct);
|
|
3213
|
+
return selected.size === correctSet.size && [...selected].every((v) => correctSet.has(v));
|
|
3214
|
+
};
|
|
3215
|
+
useEffect7(() => {
|
|
3216
|
+
if (quiz) {
|
|
3217
|
+
const isAnswered = selected.size > 0;
|
|
3218
|
+
onAnswerChange?.({ answered: isAnswered, correct: isAnswered && computeCorrect() });
|
|
3219
|
+
}
|
|
3220
|
+
}, [quiz, selected, correct]);
|
|
3221
|
+
const toggleOption = (index) => {
|
|
3222
|
+
if (quiz ? submitted : result !== null) return;
|
|
3223
|
+
setSelected((prev) => {
|
|
3224
|
+
const next = new Set(prev);
|
|
3225
|
+
if (next.has(index)) next.delete(index);
|
|
3226
|
+
else next.add(index);
|
|
3227
|
+
return next;
|
|
3228
|
+
});
|
|
3229
|
+
};
|
|
3230
|
+
const displayResult = quiz ? submitted ? computeCorrect() : null : result;
|
|
3231
|
+
const handleCheck = () => {
|
|
3232
|
+
if (selected.size === 0) return;
|
|
3233
|
+
const isCorrect = computeCorrect();
|
|
3234
|
+
setResult(isCorrect);
|
|
3235
|
+
onGraded?.(isCorrect);
|
|
3236
|
+
};
|
|
3237
|
+
return /* @__PURE__ */ jsxs27("div", { className: cn70(questionCardBase, className), ...rest, children: [
|
|
3238
|
+
/* @__PURE__ */ jsx70("p", { className: questionPromptBase, children: prompt }),
|
|
3239
|
+
/* @__PURE__ */ jsx70("div", { role: "group", className: questionGroupBase, children: choices.map((choice, i) => {
|
|
3240
|
+
const isCorrectOption = correct.includes(i);
|
|
3241
|
+
return /* @__PURE__ */ jsxs27(
|
|
3242
|
+
Checkbox,
|
|
3243
|
+
{
|
|
3244
|
+
checked: selected.has(i),
|
|
3245
|
+
onCheckedChange: () => toggleOption(i),
|
|
3246
|
+
disabled: quiz ? submitted : result !== null,
|
|
3247
|
+
className: cn70(
|
|
3248
|
+
questionOptionBase,
|
|
3249
|
+
displayResult !== null && isCorrectOption && questionOptionCorrectBase,
|
|
3250
|
+
displayResult !== null && selected.has(i) && !isCorrectOption && questionOptionIncorrectBase
|
|
3251
|
+
),
|
|
3252
|
+
children: [
|
|
3253
|
+
/* @__PURE__ */ jsx70(CheckboxControl, { children: /* @__PURE__ */ jsx70(CheckboxIndicator, { children: /* @__PURE__ */ jsx70(CheckIcon2, {}) }) }),
|
|
3254
|
+
/* @__PURE__ */ jsx70(CheckboxLabel, { children: choice })
|
|
3255
|
+
]
|
|
3256
|
+
},
|
|
3257
|
+
i
|
|
3258
|
+
);
|
|
3259
|
+
}) }),
|
|
3260
|
+
!quiz && result === null && /* @__PURE__ */ jsx70(
|
|
3261
|
+
ark44.button,
|
|
3262
|
+
{
|
|
3263
|
+
type: "button",
|
|
3264
|
+
onClick: handleCheck,
|
|
3265
|
+
disabled: selected.size === 0,
|
|
3266
|
+
className: questionCheckButtonBase,
|
|
3267
|
+
children: "Check"
|
|
3268
|
+
}
|
|
3269
|
+
),
|
|
3270
|
+
/* @__PURE__ */ jsx70(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
|
|
3271
|
+
] });
|
|
3272
|
+
}
|
|
3273
|
+
function NumericRenderer({
|
|
3274
|
+
id,
|
|
3275
|
+
prompt,
|
|
3276
|
+
answer,
|
|
3277
|
+
tolerance = 0,
|
|
3278
|
+
unit,
|
|
3279
|
+
explanation,
|
|
3280
|
+
quiz = false,
|
|
3281
|
+
submitted = false,
|
|
3282
|
+
onAnswerChange,
|
|
3283
|
+
onGraded,
|
|
3284
|
+
className,
|
|
3285
|
+
...rest
|
|
3286
|
+
}) {
|
|
3287
|
+
const inputId = `q-${id}-input`;
|
|
3288
|
+
const [value, setValue] = useState7("");
|
|
3289
|
+
const [result, setResult] = useState7(null);
|
|
3290
|
+
const computeCorrect = () => {
|
|
3291
|
+
const parsed = parseFloat(value);
|
|
3292
|
+
return !Number.isNaN(parsed) && Math.abs(parsed - answer) <= tolerance;
|
|
3293
|
+
};
|
|
3294
|
+
useEffect7(() => {
|
|
3295
|
+
if (quiz) {
|
|
3296
|
+
const parsed = parseFloat(value);
|
|
3297
|
+
const isAnswered = value.trim() !== "" && !Number.isNaN(parsed);
|
|
3298
|
+
onAnswerChange?.({ answered: isAnswered, correct: isAnswered && computeCorrect() });
|
|
3299
|
+
}
|
|
3300
|
+
}, [quiz, value, answer, tolerance]);
|
|
3301
|
+
const displayResult = quiz ? submitted ? computeCorrect() : null : result;
|
|
3302
|
+
const handleCheck = () => {
|
|
3303
|
+
const parsed = parseFloat(value);
|
|
3304
|
+
if (Number.isNaN(parsed)) return;
|
|
3305
|
+
const isCorrect = Math.abs(parsed - answer) <= tolerance;
|
|
3306
|
+
setResult(isCorrect);
|
|
3307
|
+
onGraded?.(isCorrect);
|
|
3308
|
+
};
|
|
3309
|
+
return /* @__PURE__ */ jsxs27("div", { className: cn70(questionCardBase, className), ...rest, children: [
|
|
3310
|
+
/* @__PURE__ */ jsx70(ark44.label, { htmlFor: inputId, className: questionPromptBase, children: prompt }),
|
|
3311
|
+
/* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
|
|
3312
|
+
/* @__PURE__ */ jsx70(
|
|
3313
|
+
ark44.input,
|
|
3314
|
+
{
|
|
3315
|
+
id: inputId,
|
|
3316
|
+
type: "text",
|
|
3317
|
+
inputMode: "decimal",
|
|
3318
|
+
value,
|
|
3319
|
+
onChange: (e) => {
|
|
3320
|
+
if (quiz ? submitted : result !== null) return;
|
|
3321
|
+
setValue(e.currentTarget.value);
|
|
3322
|
+
},
|
|
3323
|
+
disabled: quiz ? submitted : result !== null,
|
|
3324
|
+
className: questionInputBase
|
|
3325
|
+
}
|
|
3326
|
+
),
|
|
3327
|
+
unit ? /* @__PURE__ */ jsx70(ark44.span, { className: questionUnitBase, children: unit }) : null
|
|
3328
|
+
] }),
|
|
3329
|
+
!quiz && result === null && /* @__PURE__ */ jsx70(
|
|
3330
|
+
ark44.button,
|
|
3331
|
+
{
|
|
3332
|
+
type: "button",
|
|
3333
|
+
onClick: handleCheck,
|
|
3334
|
+
disabled: value.trim() === "" || Number.isNaN(parseFloat(value)),
|
|
3335
|
+
className: questionCheckButtonBase,
|
|
3336
|
+
children: "Check"
|
|
3337
|
+
}
|
|
3338
|
+
),
|
|
3339
|
+
/* @__PURE__ */ jsx70(Feedback, { correct: displayResult, explanation: displayResult === null ? void 0 : explanation })
|
|
3340
|
+
] });
|
|
3341
|
+
}
|
|
3342
|
+
function SingleChoiceQuestion(props) {
|
|
3343
|
+
return /* @__PURE__ */ jsx70(SingleChoiceRenderer, { ...props });
|
|
3344
|
+
}
|
|
3345
|
+
function MultipleChoiceQuestion(props) {
|
|
3346
|
+
return /* @__PURE__ */ jsx70(MultipleChoiceRenderer, { ...props });
|
|
3347
|
+
}
|
|
3348
|
+
function NumericQuestion(props) {
|
|
3349
|
+
return /* @__PURE__ */ jsx70(NumericRenderer, { ...props });
|
|
3350
|
+
}
|
|
3351
|
+
function Quiz({ id, title, questions, className, ...props }) {
|
|
3352
|
+
const [answers, setAnswers] = useState7({});
|
|
3353
|
+
const [submitted, setSubmitted] = useState7(false);
|
|
3354
|
+
const [resetKey, setResetKey] = useState7(0);
|
|
3355
|
+
const total = questions.length;
|
|
3356
|
+
const allAnswered = questions.length > 0 && questions.every((q) => answers[q.id]?.answered === true);
|
|
3357
|
+
const score = questions.filter((q) => answers[q.id]?.correct === true).length;
|
|
3358
|
+
const pct = total > 0 ? Math.round(score / total * 100) : 0;
|
|
3359
|
+
const handleAnswerChange = (questionId) => (state) => {
|
|
3360
|
+
setAnswers((prev) => ({ ...prev, [questionId]: state }));
|
|
3361
|
+
};
|
|
3362
|
+
const handleReset = () => {
|
|
3363
|
+
setAnswers({});
|
|
3364
|
+
setSubmitted(false);
|
|
3365
|
+
setResetKey((k) => k + 1);
|
|
3366
|
+
};
|
|
3367
|
+
const renderQuestion = (q) => {
|
|
3368
|
+
const key = `${q.id}-${String(resetKey)}`;
|
|
3369
|
+
const quizProps = {
|
|
3370
|
+
quiz: true,
|
|
3371
|
+
submitted,
|
|
3372
|
+
onAnswerChange: handleAnswerChange(q.id)
|
|
3373
|
+
};
|
|
3374
|
+
switch (q.type) {
|
|
3375
|
+
case "single":
|
|
3376
|
+
return /* @__PURE__ */ jsx70(
|
|
3377
|
+
SingleChoiceRenderer,
|
|
3378
|
+
{
|
|
3379
|
+
id: q.id,
|
|
3380
|
+
prompt: q.prompt,
|
|
3381
|
+
choices: q.choices,
|
|
3382
|
+
correct: q.correct,
|
|
3383
|
+
explanation: q.explanation,
|
|
3384
|
+
...quizProps
|
|
3385
|
+
},
|
|
3386
|
+
key
|
|
3387
|
+
);
|
|
3388
|
+
case "multiple":
|
|
3389
|
+
return /* @__PURE__ */ jsx70(
|
|
3390
|
+
MultipleChoiceRenderer,
|
|
3391
|
+
{
|
|
3392
|
+
id: q.id,
|
|
3393
|
+
prompt: q.prompt,
|
|
3394
|
+
choices: q.choices,
|
|
3395
|
+
correct: q.correct,
|
|
3396
|
+
explanation: q.explanation,
|
|
3397
|
+
...quizProps
|
|
3398
|
+
},
|
|
3399
|
+
key
|
|
3400
|
+
);
|
|
3401
|
+
case "numeric":
|
|
3402
|
+
return /* @__PURE__ */ jsx70(
|
|
3403
|
+
NumericRenderer,
|
|
3404
|
+
{
|
|
3405
|
+
id: q.id,
|
|
3406
|
+
prompt: q.prompt,
|
|
3407
|
+
answer: q.answer,
|
|
3408
|
+
tolerance: q.tolerance,
|
|
3409
|
+
unit: q.unit,
|
|
3410
|
+
explanation: q.explanation,
|
|
3411
|
+
...quizProps
|
|
3412
|
+
},
|
|
3413
|
+
key
|
|
3414
|
+
);
|
|
3415
|
+
default:
|
|
3416
|
+
return null;
|
|
3417
|
+
}
|
|
3418
|
+
};
|
|
3419
|
+
return /* @__PURE__ */ jsxs27("div", { "data-quiz-id": id, className: cn70(quizRootBase, className), ...props, children: [
|
|
3420
|
+
/* @__PURE__ */ jsx70("div", { className: quizHeaderBase, children: title ? /* @__PURE__ */ jsx70(ark44.h3, { className: quizTitleBase, children: title }) : null }),
|
|
3421
|
+
questions.map(renderQuestion),
|
|
3422
|
+
/* @__PURE__ */ jsxs27("div", { className: "mt-4 flex items-center gap-3", children: [
|
|
3423
|
+
submitted ? /* @__PURE__ */ jsx70(ark44.button, { type: "button", onClick: handleReset, className: quizResetButtonBase, children: "Reset" }) : /* @__PURE__ */ jsx70(
|
|
3424
|
+
ark44.button,
|
|
3425
|
+
{
|
|
3426
|
+
type: "button",
|
|
3427
|
+
onClick: () => setSubmitted(true),
|
|
3428
|
+
disabled: !allAnswered,
|
|
3429
|
+
className: quizSubmitButtonBase,
|
|
3430
|
+
children: "Submit"
|
|
3431
|
+
}
|
|
3432
|
+
),
|
|
3433
|
+
/* @__PURE__ */ jsx70(ark44.span, { role: "status", className: quizScoreBase, children: submitted ? `${score}/${total} (${pct}%)` : `${total} question${total === 1 ? "" : "s"}` })
|
|
3434
|
+
] }),
|
|
3435
|
+
submitted && /* @__PURE__ */ jsx70("div", { className: quizResultBase, children: /* @__PURE__ */ jsxs27("div", { "aria-live": "polite", role: "status", className: "text-center", children: [
|
|
3436
|
+
/* @__PURE__ */ jsxs27("p", { className: quizResultTitleBase, children: [
|
|
3437
|
+
score,
|
|
3438
|
+
"/",
|
|
3439
|
+
total,
|
|
3440
|
+
" (",
|
|
3441
|
+
pct,
|
|
3442
|
+
"%)"
|
|
3443
|
+
] }),
|
|
3444
|
+
/* @__PURE__ */ jsx70("p", { className: quizResultTextBase, children: pct >= 70 ? "Well done!" : "Keep studying and try again." })
|
|
3445
|
+
] }) })
|
|
3446
|
+
] });
|
|
3447
|
+
}
|
|
3448
|
+
export {
|
|
3449
|
+
Badge,
|
|
3450
|
+
Button,
|
|
3451
|
+
Card,
|
|
3452
|
+
CardBody,
|
|
3453
|
+
CardCover,
|
|
3454
|
+
CardDescription,
|
|
3455
|
+
CardFooter,
|
|
3456
|
+
CardHeader,
|
|
3457
|
+
CardTitle,
|
|
3458
|
+
Center,
|
|
3459
|
+
Chart,
|
|
3460
|
+
Checkbox,
|
|
3461
|
+
CheckboxControl,
|
|
3462
|
+
CheckboxGroup,
|
|
3463
|
+
CheckboxIndicator,
|
|
3464
|
+
CheckboxLabel,
|
|
3465
|
+
CodeBlock,
|
|
3466
|
+
CodeBlockContent,
|
|
3467
|
+
CodeBlockCopyButton,
|
|
3468
|
+
CodeBlockHeader,
|
|
3469
|
+
CodeBlockTitle,
|
|
3470
|
+
Col,
|
|
3471
|
+
Combobox,
|
|
3472
|
+
ComboboxClear,
|
|
3473
|
+
ComboboxContent,
|
|
3474
|
+
ComboboxControl,
|
|
3475
|
+
ComboboxEmpty,
|
|
3476
|
+
ComboboxInput,
|
|
3477
|
+
ComboboxItem,
|
|
3478
|
+
ComboboxItemGroup,
|
|
3479
|
+
ComboboxItemGroupLabel,
|
|
3480
|
+
ComboboxItemIndicator,
|
|
3481
|
+
ComboboxItemText,
|
|
3482
|
+
ComboboxList,
|
|
3483
|
+
ComboboxTrigger,
|
|
3484
|
+
Container,
|
|
3485
|
+
CopyButton,
|
|
3486
|
+
Dialog,
|
|
3487
|
+
DialogBackdrop,
|
|
3488
|
+
DialogContent,
|
|
3489
|
+
DialogDescription,
|
|
3490
|
+
DialogDismiss,
|
|
3491
|
+
DialogFooter,
|
|
3492
|
+
DialogHeader,
|
|
3493
|
+
DialogProvider,
|
|
3494
|
+
DialogTitle,
|
|
3495
|
+
DialogTrigger,
|
|
3496
|
+
Field,
|
|
3497
|
+
FieldError,
|
|
3498
|
+
FieldHelper,
|
|
3499
|
+
FieldLabel,
|
|
3500
|
+
FieldRequiredIndicator,
|
|
3501
|
+
FieldSet,
|
|
3502
|
+
FieldSetError,
|
|
3503
|
+
FieldSetHelper,
|
|
3504
|
+
FieldSetLegend,
|
|
3505
|
+
Figure,
|
|
3506
|
+
HStack,
|
|
3507
|
+
InlineLaTeX,
|
|
3508
|
+
Input2 as Input,
|
|
3509
|
+
Item,
|
|
3510
|
+
LaTeX,
|
|
3511
|
+
LanguageTabsCodeBlock,
|
|
3512
|
+
Manim,
|
|
3513
|
+
Mermaid,
|
|
3514
|
+
MultiFileCodeBlock,
|
|
3515
|
+
MultipleChoiceQuestion,
|
|
3516
|
+
Navbar,
|
|
3517
|
+
NavbarActions,
|
|
3518
|
+
NavbarActivationArea,
|
|
3519
|
+
NavbarBrand,
|
|
3520
|
+
NavbarMenu,
|
|
3521
|
+
NavbarMenuContent,
|
|
3522
|
+
NavbarMenuIndicator,
|
|
3523
|
+
NavbarMenuItem,
|
|
3524
|
+
NavbarMenuLink,
|
|
3525
|
+
NavbarMenuList,
|
|
3526
|
+
NavbarMenuTrigger,
|
|
3527
|
+
NavbarMenuViewport,
|
|
3528
|
+
ArkNavMenuViewportPositioner as NavbarMenuViewportPositioner,
|
|
3529
|
+
NavbarMobileMenu,
|
|
3530
|
+
NavbarMobileMenuContent,
|
|
3531
|
+
NavbarMobileMenuTrigger,
|
|
3532
|
+
NavbarMobileOverlay,
|
|
3533
|
+
NavbarProvider,
|
|
3534
|
+
NavbarTrigger,
|
|
3535
|
+
Notice,
|
|
3536
|
+
NumberInput,
|
|
3537
|
+
NumberInputControl,
|
|
3538
|
+
NumberInputDecrement,
|
|
3539
|
+
NumberInputIncrement,
|
|
3540
|
+
NumberInputInput,
|
|
3541
|
+
NumericQuestion,
|
|
3542
|
+
Page,
|
|
3543
|
+
PageContent,
|
|
3544
|
+
PageFooter,
|
|
3545
|
+
PageGutter,
|
|
3546
|
+
PageSection,
|
|
3547
|
+
Pagination,
|
|
3548
|
+
PaginationEllipsis,
|
|
3549
|
+
PaginationItem,
|
|
3550
|
+
PaginationItems,
|
|
3551
|
+
PaginationNext,
|
|
3552
|
+
PaginationPrevious,
|
|
3553
|
+
Popover,
|
|
3554
|
+
PopoverAnchor,
|
|
3555
|
+
PopoverContent,
|
|
3556
|
+
PopoverDescription,
|
|
3557
|
+
PopoverDismiss,
|
|
3558
|
+
PopoverIndicator,
|
|
3559
|
+
PopoverProvider,
|
|
3560
|
+
PopoverTitle,
|
|
3561
|
+
PopoverTrigger,
|
|
3562
|
+
Portal5 as Portal,
|
|
3563
|
+
PrevNext,
|
|
3564
|
+
Quiz,
|
|
3565
|
+
RadioGroup,
|
|
3566
|
+
RadioGroupItem,
|
|
3567
|
+
Reveal,
|
|
3568
|
+
Row,
|
|
3569
|
+
Scroll,
|
|
3570
|
+
Select,
|
|
3571
|
+
SelectClearTrigger,
|
|
3572
|
+
SelectContent,
|
|
3573
|
+
SelectIndicator,
|
|
3574
|
+
SelectItem,
|
|
3575
|
+
SelectItemGroup,
|
|
3576
|
+
SelectItemGroupLabel,
|
|
3577
|
+
SelectItemIndicator,
|
|
3578
|
+
SelectItemText,
|
|
3579
|
+
SelectNative,
|
|
3580
|
+
SelectTrigger,
|
|
3581
|
+
SelectValue,
|
|
3582
|
+
Root as Sidebar,
|
|
3583
|
+
Content as SidebarContent,
|
|
3584
|
+
Footer as SidebarFooter,
|
|
3585
|
+
Group as SidebarGroup,
|
|
3586
|
+
GroupAction as SidebarGroupAction,
|
|
3587
|
+
Header as SidebarHeader,
|
|
3588
|
+
Input as SidebarInput,
|
|
3589
|
+
Inset as SidebarInset,
|
|
3590
|
+
Menu as SidebarMenu,
|
|
3591
|
+
MenuAction as SidebarMenuAction,
|
|
3592
|
+
MenuBadge as SidebarMenuBadge,
|
|
3593
|
+
MenuButton as SidebarMenuButton,
|
|
3594
|
+
MenuItem as SidebarMenuItem,
|
|
3595
|
+
MenuLink as SidebarMenuLink,
|
|
3596
|
+
MenuSkeleton as SidebarMenuSkeleton,
|
|
3597
|
+
MenuSub as SidebarMenuSub,
|
|
3598
|
+
MenuSubButton as SidebarMenuSubButton,
|
|
3599
|
+
MenuSubItem as SidebarMenuSubItem,
|
|
3600
|
+
Provider as SidebarProvider,
|
|
3601
|
+
Rail as SidebarRail,
|
|
3602
|
+
Separator as SidebarSeparator,
|
|
3603
|
+
Trigger as SidebarTrigger,
|
|
3604
|
+
SingleChoiceQuestion,
|
|
3605
|
+
Splitter,
|
|
3606
|
+
SplitterPanel,
|
|
3607
|
+
SplitterResizeTrigger,
|
|
3608
|
+
SplitterResizeTriggerIndicator,
|
|
3609
|
+
Stack,
|
|
3610
|
+
Switch,
|
|
3611
|
+
SwitchControl,
|
|
3612
|
+
SwitchLabel,
|
|
3613
|
+
SwitchThumb,
|
|
3614
|
+
Tabs,
|
|
3615
|
+
TabsContent,
|
|
3616
|
+
TabsList,
|
|
3617
|
+
TabsTrigger,
|
|
3618
|
+
TagInput,
|
|
3619
|
+
TagInputClearTrigger,
|
|
3620
|
+
TagInputContext,
|
|
3621
|
+
TagInputControl,
|
|
3622
|
+
TagInputInput,
|
|
3623
|
+
TagInputItem,
|
|
3624
|
+
TagInputItemDeleteTrigger,
|
|
3625
|
+
TagInputItemInput,
|
|
3626
|
+
TagInputItemPreview,
|
|
3627
|
+
TagInputItemText,
|
|
3628
|
+
Textarea,
|
|
3629
|
+
ToggleButton,
|
|
3630
|
+
ToggleButtonIndicator,
|
|
3631
|
+
Tooltip,
|
|
3632
|
+
TooltipContent,
|
|
3633
|
+
TooltipProvider,
|
|
3634
|
+
TooltipTrigger,
|
|
3635
|
+
VStack,
|
|
3636
|
+
Window,
|
|
3637
|
+
WindowBody,
|
|
3638
|
+
WindowControl,
|
|
3639
|
+
WindowDismiss,
|
|
3640
|
+
WindowDragTrigger,
|
|
3641
|
+
WindowHeader,
|
|
3642
|
+
WindowProvider,
|
|
3643
|
+
WindowResizeTrigger,
|
|
3644
|
+
WindowStageTrigger,
|
|
3645
|
+
WindowTitle,
|
|
3646
|
+
YouTube,
|
|
3647
|
+
YoutubeTimestampAt,
|
|
3648
|
+
YoutubeTimestamps,
|
|
3649
|
+
navbarMenuTriggerStyle2 as navbarMenuTriggerStyle,
|
|
3650
|
+
useCheckbox,
|
|
3651
|
+
useCombobox,
|
|
3652
|
+
useDialog,
|
|
3653
|
+
useDialogContext,
|
|
3654
|
+
useField,
|
|
3655
|
+
useMediaQuery,
|
|
3656
|
+
useNavbar,
|
|
3657
|
+
useNumberInput,
|
|
3658
|
+
usePopover,
|
|
3659
|
+
usePopoverContext,
|
|
3660
|
+
useRadioGroup,
|
|
3661
|
+
useSelect,
|
|
3662
|
+
useSidebar,
|
|
3663
|
+
useSwitch,
|
|
3664
|
+
useTabs,
|
|
3665
|
+
useTagInput,
|
|
3666
|
+
useTooltip,
|
|
3667
|
+
useTooltipContext,
|
|
3668
|
+
useWindow,
|
|
3669
|
+
useWindowContext
|
|
3670
|
+
};
|