@codemation/ui 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +19 -0
- package/.turbo/turbo-lint.log +4 -0
- package/.turbo/turbo-typecheck.log +4 -0
- package/CHANGELOG.md +25 -0
- package/LICENSE +37 -0
- package/dist/index.cjs +845 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +417 -0
- package/dist/index.d.ts +417 -0
- package/dist/index.js +749 -0
- package/dist/index.js.map +1 -0
- package/package.json +71 -0
- package/src/components/StatusPill.tsx +33 -0
- package/src/components/composite/CodemationDialog.tsx +137 -0
- package/src/components/composite/JsonMonacoEditor.tsx +75 -0
- package/src/components/reui/tree/Tree.tsx +35 -0
- package/src/components/reui/tree/TreeContext.ts +21 -0
- package/src/components/reui/tree/TreeDragLine.tsx +28 -0
- package/src/components/reui/tree/TreeItem.tsx +51 -0
- package/src/components/reui/tree/TreeItemLabel.tsx +58 -0
- package/src/components/ui/badge.tsx +40 -0
- package/src/components/ui/button.tsx +64 -0
- package/src/components/ui/collapsible.tsx +26 -0
- package/src/components/ui/dialog.tsx +137 -0
- package/src/components/ui/dropdown-menu.tsx +239 -0
- package/src/components/ui/input.tsx +20 -0
- package/src/components/ui/label.tsx +18 -0
- package/src/components/ui/select.tsx +171 -0
- package/src/components/ui/switch.tsx +29 -0
- package/src/components/ui/tabs.tsx +76 -0
- package/src/components/ui/textarea.tsx +18 -0
- package/src/index.ts +76 -0
- package/src/lib/cn.ts +6 -0
- package/src/lucide-icons.d.ts +46 -0
- package/test/StatusPill.test.tsx +26 -0
- package/test/primitives.test.tsx +707 -0
- package/test/setup.ts +7 -0
- package/test/ui-components.test.tsx +208 -0
- package/tsconfig.json +11 -0
- package/tsdown.config.ts +10 -0
- package/vitest.ui.config.ts +40 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,845 @@
|
|
|
1
|
+
//#region rolldown:runtime
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
10
|
+
key = keys[i];
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
12
|
+
get: ((k) => from[k]).bind(null, key),
|
|
13
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
+
value: mod,
|
|
20
|
+
enumerable: true
|
|
21
|
+
}) : target, mod));
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
let clsx = require("clsx");
|
|
25
|
+
clsx = __toESM(clsx);
|
|
26
|
+
let tailwind_merge = require("tailwind-merge");
|
|
27
|
+
tailwind_merge = __toESM(tailwind_merge);
|
|
28
|
+
let react = require("react");
|
|
29
|
+
react = __toESM(react);
|
|
30
|
+
let class_variance_authority = require("class-variance-authority");
|
|
31
|
+
class_variance_authority = __toESM(class_variance_authority);
|
|
32
|
+
let radix_ui = require("radix-ui");
|
|
33
|
+
radix_ui = __toESM(radix_ui);
|
|
34
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
+
react_jsx_runtime = __toESM(react_jsx_runtime);
|
|
36
|
+
let lucide_react_dist_esm_icons_x = require("lucide-react/dist/esm/icons/x");
|
|
37
|
+
lucide_react_dist_esm_icons_x = __toESM(lucide_react_dist_esm_icons_x);
|
|
38
|
+
let lucide_react_dist_esm_icons_check = require("lucide-react/dist/esm/icons/check");
|
|
39
|
+
lucide_react_dist_esm_icons_check = __toESM(lucide_react_dist_esm_icons_check);
|
|
40
|
+
let lucide_react_dist_esm_icons_chevron_right = require("lucide-react/dist/esm/icons/chevron-right");
|
|
41
|
+
lucide_react_dist_esm_icons_chevron_right = __toESM(lucide_react_dist_esm_icons_chevron_right);
|
|
42
|
+
let lucide_react_dist_esm_icons_chevron_down = require("lucide-react/dist/esm/icons/chevron-down");
|
|
43
|
+
lucide_react_dist_esm_icons_chevron_down = __toESM(lucide_react_dist_esm_icons_chevron_down);
|
|
44
|
+
let lucide_react_dist_esm_icons_chevron_up = require("lucide-react/dist/esm/icons/chevron-up");
|
|
45
|
+
lucide_react_dist_esm_icons_chevron_up = __toESM(lucide_react_dist_esm_icons_chevron_up);
|
|
46
|
+
let lucide_react_dist_esm_icons_minus = require("lucide-react/dist/esm/icons/minus");
|
|
47
|
+
lucide_react_dist_esm_icons_minus = __toESM(lucide_react_dist_esm_icons_minus);
|
|
48
|
+
let lucide_react_dist_esm_icons_plus = require("lucide-react/dist/esm/icons/plus");
|
|
49
|
+
lucide_react_dist_esm_icons_plus = __toESM(lucide_react_dist_esm_icons_plus);
|
|
50
|
+
let __monaco_editor_react = require("@monaco-editor/react");
|
|
51
|
+
__monaco_editor_react = __toESM(__monaco_editor_react);
|
|
52
|
+
|
|
53
|
+
//#region src/lib/cn.ts
|
|
54
|
+
function cn(...inputs) {
|
|
55
|
+
return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
//#endregion
|
|
59
|
+
//#region src/components/ui/badge.tsx
|
|
60
|
+
const badgeVariants = (0, class_variance_authority.cva)("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap shadow-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
|
|
61
|
+
variants: { variant: {
|
|
62
|
+
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
63
|
+
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
|
64
|
+
destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
|
65
|
+
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
|
66
|
+
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
67
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
68
|
+
} },
|
|
69
|
+
defaultVariants: { variant: "default" }
|
|
70
|
+
});
|
|
71
|
+
function Badge({ className, variant = "default", asChild = false,...props }) {
|
|
72
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? radix_ui.Slot.Root : "span", {
|
|
73
|
+
"data-slot": "badge",
|
|
74
|
+
"data-variant": variant,
|
|
75
|
+
className: cn(badgeVariants({ variant }), className),
|
|
76
|
+
...props
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
//#endregion
|
|
81
|
+
//#region src/components/ui/input.tsx
|
|
82
|
+
function Input({ className, type,...props }) {
|
|
83
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
84
|
+
type,
|
|
85
|
+
"data-slot": "input",
|
|
86
|
+
className: cn("border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
|
|
87
|
+
...props
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
//#endregion
|
|
92
|
+
//#region src/components/ui/label.tsx
|
|
93
|
+
function Label({ className,...props }) {
|
|
94
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Label.Root, {
|
|
95
|
+
"data-slot": "label",
|
|
96
|
+
className: cn("text-sm leading-none font-medium select-none group-data-[disabled=true]/form-item:pointer-events-none group-data-[disabled=true]/form-item:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
|
|
97
|
+
...props
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
//#endregion
|
|
102
|
+
//#region src/components/ui/switch.tsx
|
|
103
|
+
function Switch({ className,...props }) {
|
|
104
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Switch.Root, {
|
|
105
|
+
"data-slot": "switch",
|
|
106
|
+
className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-[color,box-shadow] outline-none", "focus-visible:ring-[3px] focus-visible:ring-ring/50", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className),
|
|
107
|
+
...props,
|
|
108
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Switch.Thumb, {
|
|
109
|
+
"data-slot": "switch-thumb",
|
|
110
|
+
className: cn("pointer-events-none block size-4 rounded-full bg-white shadow-sm ring-0 transition-transform", "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0")
|
|
111
|
+
})
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
//#endregion
|
|
116
|
+
//#region src/components/ui/button.tsx
|
|
117
|
+
const buttonVariants = (0, class_variance_authority.cva)("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap shadow-sm transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
118
|
+
variants: {
|
|
119
|
+
variant: {
|
|
120
|
+
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
121
|
+
outline: "shadow-none border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
122
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
123
|
+
ghost: "shadow-none hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
124
|
+
destructive: "shadow-none bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
125
|
+
link: "shadow-none text-primary underline-offset-4 hover:underline"
|
|
126
|
+
},
|
|
127
|
+
size: {
|
|
128
|
+
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
129
|
+
xs: "h-6 gap-1 rounded-sm px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
130
|
+
sm: "h-7 gap-1 rounded-sm px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
131
|
+
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
|
|
132
|
+
icon: "size-8",
|
|
133
|
+
"icon-xs": "size-6 rounded-sm in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
|
|
134
|
+
"icon-sm": "size-7 rounded-sm in-data-[slot=button-group]:rounded-md",
|
|
135
|
+
"icon-lg": "size-9"
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
defaultVariants: {
|
|
139
|
+
variant: "default",
|
|
140
|
+
size: "default"
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
function Button({ className, variant = "default", size = "default", asChild = false,...props }) {
|
|
144
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? radix_ui.Slot.Root : "button", {
|
|
145
|
+
"data-slot": "button",
|
|
146
|
+
"data-variant": variant,
|
|
147
|
+
"data-size": size,
|
|
148
|
+
className: cn(buttonVariants({
|
|
149
|
+
variant,
|
|
150
|
+
size,
|
|
151
|
+
className
|
|
152
|
+
})),
|
|
153
|
+
...props
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
//#endregion
|
|
158
|
+
//#region src/components/ui/collapsible.tsx
|
|
159
|
+
function Collapsible(props) {
|
|
160
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Collapsible.Root, {
|
|
161
|
+
"data-slot": "collapsible",
|
|
162
|
+
...props
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
function CollapsibleTrigger(props) {
|
|
166
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Collapsible.Trigger, {
|
|
167
|
+
"data-slot": "collapsible-trigger",
|
|
168
|
+
...props
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
function CollapsibleContent({ className,...props }) {
|
|
172
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Collapsible.Content, {
|
|
173
|
+
"data-slot": "collapsible-content",
|
|
174
|
+
className: cn("overflow-hidden", className),
|
|
175
|
+
...props
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
//#endregion
|
|
180
|
+
//#region src/components/ui/dialog.tsx
|
|
181
|
+
function Dialog({ ...props }) {
|
|
182
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Root, {
|
|
183
|
+
"data-slot": "dialog",
|
|
184
|
+
...props
|
|
185
|
+
});
|
|
186
|
+
}
|
|
187
|
+
function DialogTrigger({ ...props }) {
|
|
188
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Trigger, {
|
|
189
|
+
"data-slot": "dialog-trigger",
|
|
190
|
+
...props
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
function DialogPortal({ ...props }) {
|
|
194
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Portal, {
|
|
195
|
+
"data-slot": "dialog-portal",
|
|
196
|
+
...props
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
function DialogClose({ ...props }) {
|
|
200
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
|
|
201
|
+
"data-slot": "dialog-close",
|
|
202
|
+
...props
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
function DialogOverlay({ className,...props }) {
|
|
206
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Overlay, {
|
|
207
|
+
"data-slot": "dialog-overlay",
|
|
208
|
+
className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
|
|
209
|
+
...props
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
function DialogContent({ className, children, showCloseButton = true,...props }) {
|
|
213
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Content, {
|
|
214
|
+
"data-slot": "dialog-content",
|
|
215
|
+
className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
216
|
+
...props,
|
|
217
|
+
children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
|
|
218
|
+
"data-slot": "dialog-close",
|
|
219
|
+
asChild: true,
|
|
220
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
|
|
221
|
+
variant: "ghost",
|
|
222
|
+
className: "absolute top-2 right-2",
|
|
223
|
+
size: "icon-sm",
|
|
224
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_x.default, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
225
|
+
className: "sr-only",
|
|
226
|
+
children: "Close"
|
|
227
|
+
})]
|
|
228
|
+
})
|
|
229
|
+
})]
|
|
230
|
+
})] });
|
|
231
|
+
}
|
|
232
|
+
function DialogHeader({ className,...props }) {
|
|
233
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
234
|
+
"data-slot": "dialog-header",
|
|
235
|
+
className: cn("flex flex-col gap-2", className),
|
|
236
|
+
...props
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
function DialogFooter({ className, showCloseButton = false, children,...props }) {
|
|
240
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
241
|
+
"data-slot": "dialog-footer",
|
|
242
|
+
className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className),
|
|
243
|
+
...props,
|
|
244
|
+
children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
|
|
245
|
+
asChild: true,
|
|
246
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
|
|
247
|
+
variant: "outline",
|
|
248
|
+
children: "Close"
|
|
249
|
+
})
|
|
250
|
+
})]
|
|
251
|
+
});
|
|
252
|
+
}
|
|
253
|
+
function DialogTitle({ className,...props }) {
|
|
254
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Title, {
|
|
255
|
+
"data-slot": "dialog-title",
|
|
256
|
+
className: cn("text-base leading-none font-medium", className),
|
|
257
|
+
...props
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
function DialogDescription({ className,...props }) {
|
|
261
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Description, {
|
|
262
|
+
"data-slot": "dialog-description",
|
|
263
|
+
className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
|
|
264
|
+
...props
|
|
265
|
+
});
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
//#endregion
|
|
269
|
+
//#region src/components/ui/dropdown-menu.tsx
|
|
270
|
+
function DropdownMenu({ ...props }) {
|
|
271
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Root, {
|
|
272
|
+
"data-slot": "dropdown-menu",
|
|
273
|
+
...props
|
|
274
|
+
});
|
|
275
|
+
}
|
|
276
|
+
function DropdownMenuPortal({ ...props }) {
|
|
277
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Portal, {
|
|
278
|
+
"data-slot": "dropdown-menu-portal",
|
|
279
|
+
...props
|
|
280
|
+
});
|
|
281
|
+
}
|
|
282
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
283
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Trigger, {
|
|
284
|
+
"data-slot": "dropdown-menu-trigger",
|
|
285
|
+
...props
|
|
286
|
+
});
|
|
287
|
+
}
|
|
288
|
+
function DropdownMenuContent({ className, align = "start", sideOffset = 4,...props }) {
|
|
289
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Content, {
|
|
290
|
+
"data-slot": "dropdown-menu-content",
|
|
291
|
+
sideOffset,
|
|
292
|
+
align,
|
|
293
|
+
className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
294
|
+
...props
|
|
295
|
+
}) });
|
|
296
|
+
}
|
|
297
|
+
function DropdownMenuGroup({ ...props }) {
|
|
298
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Group, {
|
|
299
|
+
"data-slot": "dropdown-menu-group",
|
|
300
|
+
...props
|
|
301
|
+
});
|
|
302
|
+
}
|
|
303
|
+
function DropdownMenuItem({ className, inset, variant = "default",...props }) {
|
|
304
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Item, {
|
|
305
|
+
"data-slot": "dropdown-menu-item",
|
|
306
|
+
"data-inset": inset,
|
|
307
|
+
"data-variant": variant,
|
|
308
|
+
className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
309
|
+
...props
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
function DropdownMenuCheckboxItem({ className, children, checked, inset,...props }) {
|
|
313
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.DropdownMenu.CheckboxItem, {
|
|
314
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
315
|
+
"data-inset": inset,
|
|
316
|
+
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
317
|
+
checked,
|
|
318
|
+
...props,
|
|
319
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
320
|
+
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
321
|
+
"data-slot": "dropdown-menu-checkbox-item-indicator",
|
|
322
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_check.default, {}) })
|
|
323
|
+
}), children]
|
|
324
|
+
});
|
|
325
|
+
}
|
|
326
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
327
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.RadioGroup, {
|
|
328
|
+
"data-slot": "dropdown-menu-radio-group",
|
|
329
|
+
...props
|
|
330
|
+
});
|
|
331
|
+
}
|
|
332
|
+
function DropdownMenuRadioItem({ className, children, inset,...props }) {
|
|
333
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.DropdownMenu.RadioItem, {
|
|
334
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
335
|
+
"data-inset": inset,
|
|
336
|
+
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
337
|
+
...props,
|
|
338
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
339
|
+
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
340
|
+
"data-slot": "dropdown-menu-radio-item-indicator",
|
|
341
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_check.default, {}) })
|
|
342
|
+
}), children]
|
|
343
|
+
});
|
|
344
|
+
}
|
|
345
|
+
function DropdownMenuLabel({ className, inset,...props }) {
|
|
346
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Label, {
|
|
347
|
+
"data-slot": "dropdown-menu-label",
|
|
348
|
+
"data-inset": inset,
|
|
349
|
+
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
350
|
+
...props
|
|
351
|
+
});
|
|
352
|
+
}
|
|
353
|
+
function DropdownMenuSeparator({ className,...props }) {
|
|
354
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Separator, {
|
|
355
|
+
"data-slot": "dropdown-menu-separator",
|
|
356
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
357
|
+
...props
|
|
358
|
+
});
|
|
359
|
+
}
|
|
360
|
+
function DropdownMenuShortcut({ className,...props }) {
|
|
361
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
362
|
+
"data-slot": "dropdown-menu-shortcut",
|
|
363
|
+
className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
|
|
364
|
+
...props
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
function DropdownMenuSub({ ...props }) {
|
|
368
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.Sub, {
|
|
369
|
+
"data-slot": "dropdown-menu-sub",
|
|
370
|
+
...props
|
|
371
|
+
});
|
|
372
|
+
}
|
|
373
|
+
function DropdownMenuSubTrigger({ className, inset, children,...props }) {
|
|
374
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.DropdownMenu.SubTrigger, {
|
|
375
|
+
"data-slot": "dropdown-menu-sub-trigger",
|
|
376
|
+
"data-inset": inset,
|
|
377
|
+
className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
378
|
+
...props,
|
|
379
|
+
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_chevron_right.default, { className: "ml-auto" })]
|
|
380
|
+
});
|
|
381
|
+
}
|
|
382
|
+
function DropdownMenuSubContent({ className,...props }) {
|
|
383
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.SubContent, {
|
|
384
|
+
"data-slot": "dropdown-menu-sub-content",
|
|
385
|
+
className: cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
386
|
+
...props
|
|
387
|
+
});
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
//#endregion
|
|
391
|
+
//#region src/components/ui/select.tsx
|
|
392
|
+
function Select({ ...props }) {
|
|
393
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Root, {
|
|
394
|
+
"data-slot": "select",
|
|
395
|
+
...props
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
function SelectGroup({ className,...props }) {
|
|
399
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Group, {
|
|
400
|
+
"data-slot": "select-group",
|
|
401
|
+
className: cn("scroll-my-1 p-1", className),
|
|
402
|
+
...props
|
|
403
|
+
});
|
|
404
|
+
}
|
|
405
|
+
function SelectValue({ ...props }) {
|
|
406
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Value, {
|
|
407
|
+
"data-slot": "select-value",
|
|
408
|
+
...props
|
|
409
|
+
});
|
|
410
|
+
}
|
|
411
|
+
function SelectTrigger({ className, size = "default", children,...props }) {
|
|
412
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Trigger, {
|
|
413
|
+
"data-slot": "select-trigger",
|
|
414
|
+
"data-size": size,
|
|
415
|
+
className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-sm transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
416
|
+
...props,
|
|
417
|
+
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Icon, {
|
|
418
|
+
asChild: true,
|
|
419
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_chevron_down.default, { className: "pointer-events-none size-4 text-muted-foreground" })
|
|
420
|
+
})]
|
|
421
|
+
});
|
|
422
|
+
}
|
|
423
|
+
function SelectContent({ className, children, position = "item-aligned", align = "center",...props }) {
|
|
424
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Content, {
|
|
425
|
+
"data-slot": "select-content",
|
|
426
|
+
"data-align-trigger": position === "item-aligned",
|
|
427
|
+
className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
|
|
428
|
+
position,
|
|
429
|
+
align,
|
|
430
|
+
...props,
|
|
431
|
+
children: [
|
|
432
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollUpButton, {}),
|
|
433
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Viewport, {
|
|
434
|
+
"data-position": position,
|
|
435
|
+
className: cn("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", position === "popper" && ""),
|
|
436
|
+
children
|
|
437
|
+
}),
|
|
438
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollDownButton, {})
|
|
439
|
+
]
|
|
440
|
+
}) });
|
|
441
|
+
}
|
|
442
|
+
function SelectLabel({ className,...props }) {
|
|
443
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Label, {
|
|
444
|
+
"data-slot": "select-label",
|
|
445
|
+
className: cn("px-1.5 py-1 text-xs text-muted-foreground", className),
|
|
446
|
+
...props
|
|
447
|
+
});
|
|
448
|
+
}
|
|
449
|
+
function SelectItem({ className, children,...props }) {
|
|
450
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Select.Item, {
|
|
451
|
+
"data-slot": "select-item",
|
|
452
|
+
className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
|
|
453
|
+
...props,
|
|
454
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
455
|
+
className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
|
|
456
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_check.default, { className: "pointer-events-none" }) })
|
|
457
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.ItemText, { children })]
|
|
458
|
+
});
|
|
459
|
+
}
|
|
460
|
+
function SelectSeparator({ className,...props }) {
|
|
461
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.Separator, {
|
|
462
|
+
"data-slot": "select-separator",
|
|
463
|
+
className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
|
|
464
|
+
...props
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
function SelectScrollUpButton({ className,...props }) {
|
|
468
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.ScrollUpButton, {
|
|
469
|
+
"data-slot": "select-scroll-up-button",
|
|
470
|
+
className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
|
|
471
|
+
...props,
|
|
472
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_chevron_up.default, {})
|
|
473
|
+
});
|
|
474
|
+
}
|
|
475
|
+
function SelectScrollDownButton({ className,...props }) {
|
|
476
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Select.ScrollDownButton, {
|
|
477
|
+
"data-slot": "select-scroll-down-button",
|
|
478
|
+
className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
|
|
479
|
+
...props,
|
|
480
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_chevron_down.default, {})
|
|
481
|
+
});
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
//#endregion
|
|
485
|
+
//#region src/components/ui/tabs.tsx
|
|
486
|
+
function Tabs({ className, orientation = "horizontal",...props }) {
|
|
487
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Root, {
|
|
488
|
+
"data-slot": "tabs",
|
|
489
|
+
"data-orientation": orientation,
|
|
490
|
+
className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
|
|
491
|
+
...props
|
|
492
|
+
});
|
|
493
|
+
}
|
|
494
|
+
const tabsListVariants = (0, class_variance_authority.cva)("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
|
|
495
|
+
variants: { variant: {
|
|
496
|
+
default: "bg-muted",
|
|
497
|
+
line: "gap-1 bg-transparent"
|
|
498
|
+
} },
|
|
499
|
+
defaultVariants: { variant: "default" }
|
|
500
|
+
});
|
|
501
|
+
function TabsList({ className, variant = "default",...props }) {
|
|
502
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.List, {
|
|
503
|
+
"data-slot": "tabs-list",
|
|
504
|
+
"data-variant": variant,
|
|
505
|
+
className: cn(tabsListVariants({ variant }), className),
|
|
506
|
+
...props
|
|
507
|
+
});
|
|
508
|
+
}
|
|
509
|
+
function TabsTrigger({ className,...props }) {
|
|
510
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Trigger, {
|
|
511
|
+
"data-slot": "tabs-trigger",
|
|
512
|
+
className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
|
|
513
|
+
...props
|
|
514
|
+
});
|
|
515
|
+
}
|
|
516
|
+
function TabsContent({ className,...props }) {
|
|
517
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Content, {
|
|
518
|
+
"data-slot": "tabs-content",
|
|
519
|
+
className: cn("flex-1 text-sm outline-none", className),
|
|
520
|
+
...props
|
|
521
|
+
});
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
//#endregion
|
|
525
|
+
//#region src/components/ui/textarea.tsx
|
|
526
|
+
function Textarea({ className,...props }) {
|
|
527
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
|
|
528
|
+
"data-slot": "textarea",
|
|
529
|
+
className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
530
|
+
...props
|
|
531
|
+
});
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
//#endregion
|
|
535
|
+
//#region src/components/reui/tree/TreeContext.ts
|
|
536
|
+
const TreeContext = (0, react.createContext)({
|
|
537
|
+
indent: 20,
|
|
538
|
+
currentItem: void 0,
|
|
539
|
+
tree: void 0,
|
|
540
|
+
toggleIconType: "plus-minus"
|
|
541
|
+
});
|
|
542
|
+
|
|
543
|
+
//#endregion
|
|
544
|
+
//#region src/components/reui/tree/Tree.tsx
|
|
545
|
+
function Tree(args) {
|
|
546
|
+
const { indent = 20, tree, className, toggleIconType = "chevron", asChild = false,...props } = args;
|
|
547
|
+
const containerProps = tree?.getContainerProps?.() ?? {};
|
|
548
|
+
const { style: propStyle,...otherProps } = {
|
|
549
|
+
...props,
|
|
550
|
+
...containerProps
|
|
551
|
+
};
|
|
552
|
+
const mergedStyle = {
|
|
553
|
+
...propStyle,
|
|
554
|
+
"--tree-indent": `${indent}px`
|
|
555
|
+
};
|
|
556
|
+
const Component = asChild ? radix_ui.Slot.Root : "div";
|
|
557
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeContext.Provider, {
|
|
558
|
+
value: {
|
|
559
|
+
indent,
|
|
560
|
+
tree,
|
|
561
|
+
toggleIconType
|
|
562
|
+
},
|
|
563
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
|
|
564
|
+
"data-slot": "tree",
|
|
565
|
+
style: mergedStyle,
|
|
566
|
+
className: cn("flex flex-col", className),
|
|
567
|
+
...otherProps
|
|
568
|
+
})
|
|
569
|
+
});
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
//#endregion
|
|
573
|
+
//#region src/components/reui/tree/TreeDragLine.tsx
|
|
574
|
+
function TreeDragLine(args) {
|
|
575
|
+
const { className,...props } = args;
|
|
576
|
+
const { tree } = (0, react.useContext)(TreeContext);
|
|
577
|
+
const dragLine = tree?.getDragLineStyle?.();
|
|
578
|
+
if (!dragLine) return null;
|
|
579
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
580
|
+
style: dragLine,
|
|
581
|
+
className: cn("bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:border-2 before:rounded-full", className),
|
|
582
|
+
...props
|
|
583
|
+
});
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
//#endregion
|
|
587
|
+
//#region src/components/reui/tree/TreeItem.tsx
|
|
588
|
+
function TreeItem(args) {
|
|
589
|
+
const { item, className, asChild = false, children,...props } = args;
|
|
590
|
+
const parentContext = (0, react.useContext)(TreeContext);
|
|
591
|
+
const indent = parentContext.indent;
|
|
592
|
+
const itemProps = item.getProps();
|
|
593
|
+
const { style: propStyle,...otherProps } = {
|
|
594
|
+
...props,
|
|
595
|
+
children,
|
|
596
|
+
...itemProps
|
|
597
|
+
};
|
|
598
|
+
const mergedStyle = {
|
|
599
|
+
...propStyle,
|
|
600
|
+
"--tree-padding": `${item.getItemMeta().level * indent}px`
|
|
601
|
+
};
|
|
602
|
+
const defaultProps = {
|
|
603
|
+
"data-slot": "tree-item",
|
|
604
|
+
style: mergedStyle,
|
|
605
|
+
className: cn("z-10 ps-(--tree-padding) outline-hidden select-none not-last:pb-0.5 focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
|
|
606
|
+
"data-focus": item.isFocused() || false,
|
|
607
|
+
"data-folder": item.isFolder() || false,
|
|
608
|
+
"data-selected": typeof item.isSelected === "function" ? item.isSelected() || false : void 0,
|
|
609
|
+
"data-drag-target": typeof item.isDragTarget === "function" ? item.isDragTarget() || false : void 0,
|
|
610
|
+
"data-search-match": typeof item.isMatchingSearch === "function" ? item.isMatchingSearch() || false : void 0,
|
|
611
|
+
"aria-expanded": item.isExpanded()
|
|
612
|
+
};
|
|
613
|
+
const Component = asChild ? radix_ui.Slot.Root : "button";
|
|
614
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeContext.Provider, {
|
|
615
|
+
value: {
|
|
616
|
+
...parentContext,
|
|
617
|
+
currentItem: item
|
|
618
|
+
},
|
|
619
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
|
|
620
|
+
...defaultProps,
|
|
621
|
+
...otherProps,
|
|
622
|
+
children
|
|
623
|
+
})
|
|
624
|
+
});
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
//#endregion
|
|
628
|
+
//#region src/components/reui/tree/TreeItemLabel.tsx
|
|
629
|
+
function TreeItemLabel(args) {
|
|
630
|
+
const { item: propItem, children, className, asChild = false,...props } = args;
|
|
631
|
+
const { currentItem, toggleIconType } = (0, react.useContext)(TreeContext);
|
|
632
|
+
const item = propItem ?? currentItem;
|
|
633
|
+
if (!item) return null;
|
|
634
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? radix_ui.Slot.Root : "span", {
|
|
635
|
+
"data-slot": "tree-item-label",
|
|
636
|
+
className: cn("in-focus-visible:ring-ring/50 bg-background hover:bg-accent in-data-[selected=true]:bg-accent in-data-[selected=true]:text-accent-foreground in-data-[drag-target=true]:bg-accent flex items-center gap-1 transition-colors not-in-data-[folder=true]:ps-7 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-50! [&_svg]:pointer-events-none [&_svg]:shrink-0", "rounded-sm py-1.5 px-2 text-sm", className),
|
|
637
|
+
...props,
|
|
638
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [item.isFolder() && (toggleIconType === "plus-minus" ? item.isExpanded() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_minus.default, {
|
|
639
|
+
className: "text-muted-foreground size-3.5",
|
|
640
|
+
stroke: "currentColor",
|
|
641
|
+
strokeWidth: "1"
|
|
642
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_plus.default, {
|
|
643
|
+
className: "text-muted-foreground size-3.5",
|
|
644
|
+
stroke: "currentColor",
|
|
645
|
+
strokeWidth: "1"
|
|
646
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react_dist_esm_icons_chevron_down.default, { className: "text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90" })), children ?? item.getItemName()] })
|
|
647
|
+
});
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
//#endregion
|
|
651
|
+
//#region src/components/composite/CodemationDialog.tsx
|
|
652
|
+
const maxWidthBySize = {
|
|
653
|
+
narrow: "sm:max-w-lg",
|
|
654
|
+
wide: "sm:max-w-2xl",
|
|
655
|
+
full: "sm:max-w-[min(92vw,960px)]"
|
|
656
|
+
};
|
|
657
|
+
function CodemationDialogRoot({ children, onClose, testId, role = "dialog", size = "wide", contentClassName, showCloseButton = false }) {
|
|
658
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
|
|
659
|
+
open: true,
|
|
660
|
+
onOpenChange: (open) => {
|
|
661
|
+
if (!open) onClose();
|
|
662
|
+
},
|
|
663
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContent, {
|
|
664
|
+
showCloseButton,
|
|
665
|
+
"data-testid": testId,
|
|
666
|
+
role,
|
|
667
|
+
"aria-describedby": void 0,
|
|
668
|
+
className: cn("flex max-h-[min(92vh,900px)] flex-col gap-0 overflow-hidden p-0", maxWidthBySize[size], contentClassName),
|
|
669
|
+
children
|
|
670
|
+
})
|
|
671
|
+
});
|
|
672
|
+
}
|
|
673
|
+
/**
|
|
674
|
+
* Do not set `id` on the underlying Radix `DialogTitle` — the dialog root assigns `titleId`
|
|
675
|
+
* in context; overriding `id` breaks `aria-labelledby` and Radix dev warnings.
|
|
676
|
+
*/
|
|
677
|
+
function CodemationDialogTitle({ children, className }) {
|
|
678
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTitle, {
|
|
679
|
+
className: cn("m-0 shrink-0 border-b border-border px-4 py-3 text-base leading-none font-semibold", className),
|
|
680
|
+
children
|
|
681
|
+
});
|
|
682
|
+
}
|
|
683
|
+
function CodemationDialogContent({ children, className }) {
|
|
684
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
685
|
+
className: cn("flex min-h-0 flex-1 flex-col gap-4 overflow-auto px-4 py-3 text-sm", className),
|
|
686
|
+
children
|
|
687
|
+
});
|
|
688
|
+
}
|
|
689
|
+
function CodemationDialogActions({ children, position = "bottom", align = "end", className }) {
|
|
690
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
691
|
+
className: cn("flex shrink-0 flex-wrap gap-2 border-border bg-muted/30 px-4 py-3", position === "top" ? "border-b" : "border-t", align === "end" && "justify-end", align === "start" && "justify-start", align === "between" && "justify-between", className),
|
|
692
|
+
children
|
|
693
|
+
});
|
|
694
|
+
}
|
|
695
|
+
const CodemationDialog = Object.assign(CodemationDialogRoot, {
|
|
696
|
+
Title: CodemationDialogTitle,
|
|
697
|
+
Content: CodemationDialogContent,
|
|
698
|
+
Actions: CodemationDialogActions
|
|
699
|
+
});
|
|
700
|
+
|
|
701
|
+
//#endregion
|
|
702
|
+
//#region src/components/composite/JsonMonacoEditor.tsx
|
|
703
|
+
const defaultOptions = {
|
|
704
|
+
automaticLayout: true,
|
|
705
|
+
formatOnPaste: true,
|
|
706
|
+
formatOnType: true,
|
|
707
|
+
minimap: { enabled: false },
|
|
708
|
+
scrollBeyondLastLine: false,
|
|
709
|
+
lineNumbersMinChars: 3,
|
|
710
|
+
tabSize: 2,
|
|
711
|
+
insertSpaces: true,
|
|
712
|
+
wordWrap: "on",
|
|
713
|
+
bracketPairColorization: { enabled: true },
|
|
714
|
+
guides: {
|
|
715
|
+
indentation: true,
|
|
716
|
+
bracketPairs: true
|
|
717
|
+
},
|
|
718
|
+
padding: {
|
|
719
|
+
top: 12,
|
|
720
|
+
bottom: 12
|
|
721
|
+
}
|
|
722
|
+
};
|
|
723
|
+
/**
|
|
724
|
+
* Monaco-based JSON editor with a mirrored, visually hidden `<textarea>` that carries the same value.
|
|
725
|
+
* Tests and automation can drive `data-testid` on that textarea because Monaco's surface is not a reliable
|
|
726
|
+
* DOM target for `fireEvent.change` / user typing simulation.
|
|
727
|
+
*/
|
|
728
|
+
function JsonMonacoEditor(args) {
|
|
729
|
+
const { path, value, onChange, error, testId = "workflow-json-editor-input" } = args;
|
|
730
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
731
|
+
className: "relative flex min-h-0 flex-1 flex-col",
|
|
732
|
+
children: [
|
|
733
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
734
|
+
className: "h-[min(60vh,560px)] min-h-[200px] shrink-0 overflow-hidden rounded-md border border-border bg-background",
|
|
735
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__monaco_editor_react.default, {
|
|
736
|
+
height: "100%",
|
|
737
|
+
language: "json",
|
|
738
|
+
path,
|
|
739
|
+
value,
|
|
740
|
+
onChange,
|
|
741
|
+
loading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
742
|
+
className: "grid h-full place-items-center text-xs text-muted-foreground",
|
|
743
|
+
children: "Loading editor…"
|
|
744
|
+
}),
|
|
745
|
+
options: defaultOptions
|
|
746
|
+
})
|
|
747
|
+
}),
|
|
748
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Textarea, {
|
|
749
|
+
"data-testid": testId,
|
|
750
|
+
value,
|
|
751
|
+
onChange: (event) => {
|
|
752
|
+
onChange(event.target.value);
|
|
753
|
+
},
|
|
754
|
+
spellCheck: false,
|
|
755
|
+
className: "pointer-events-none absolute inset-0 h-px w-px min-h-0 resize-none border-0 p-0 opacity-0",
|
|
756
|
+
"aria-hidden": "true",
|
|
757
|
+
tabIndex: -1
|
|
758
|
+
}),
|
|
759
|
+
error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
760
|
+
className: "mt-1 text-xs text-destructive",
|
|
761
|
+
children: error
|
|
762
|
+
}) : null
|
|
763
|
+
]
|
|
764
|
+
});
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
//#endregion
|
|
768
|
+
//#region src/components/StatusPill.tsx
|
|
769
|
+
const KIND_CLASSES = {
|
|
770
|
+
success: "bg-emerald-100 text-emerald-800 border-emerald-200 hover:bg-emerald-100 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800",
|
|
771
|
+
warning: "bg-amber-100 text-amber-800 border-amber-200 hover:bg-amber-100 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800",
|
|
772
|
+
danger: "bg-red-100 text-red-800 border-red-200 hover:bg-red-100 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800",
|
|
773
|
+
neutral: "border-border text-foreground bg-transparent hover:bg-muted",
|
|
774
|
+
info: "bg-blue-100 text-blue-800 border-blue-200 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800"
|
|
775
|
+
};
|
|
776
|
+
function StatusPill({ status, children, className }) {
|
|
777
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
|
|
778
|
+
variant: "outline",
|
|
779
|
+
className: cn("inline-flex items-center gap-1", KIND_CLASSES[status], className),
|
|
780
|
+
children: children ?? status
|
|
781
|
+
});
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
//#endregion
|
|
785
|
+
exports.Badge = Badge;
|
|
786
|
+
exports.Button = Button;
|
|
787
|
+
exports.CodemationDialog = CodemationDialog;
|
|
788
|
+
exports.Collapsible = Collapsible;
|
|
789
|
+
exports.CollapsibleContent = CollapsibleContent;
|
|
790
|
+
exports.CollapsibleTrigger = CollapsibleTrigger;
|
|
791
|
+
exports.Dialog = Dialog;
|
|
792
|
+
exports.DialogClose = DialogClose;
|
|
793
|
+
exports.DialogContent = DialogContent;
|
|
794
|
+
exports.DialogDescription = DialogDescription;
|
|
795
|
+
exports.DialogFooter = DialogFooter;
|
|
796
|
+
exports.DialogHeader = DialogHeader;
|
|
797
|
+
exports.DialogOverlay = DialogOverlay;
|
|
798
|
+
exports.DialogPortal = DialogPortal;
|
|
799
|
+
exports.DialogTitle = DialogTitle;
|
|
800
|
+
exports.DialogTrigger = DialogTrigger;
|
|
801
|
+
exports.DropdownMenu = DropdownMenu;
|
|
802
|
+
exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
|
|
803
|
+
exports.DropdownMenuContent = DropdownMenuContent;
|
|
804
|
+
exports.DropdownMenuGroup = DropdownMenuGroup;
|
|
805
|
+
exports.DropdownMenuItem = DropdownMenuItem;
|
|
806
|
+
exports.DropdownMenuLabel = DropdownMenuLabel;
|
|
807
|
+
exports.DropdownMenuPortal = DropdownMenuPortal;
|
|
808
|
+
exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
|
|
809
|
+
exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
|
|
810
|
+
exports.DropdownMenuSeparator = DropdownMenuSeparator;
|
|
811
|
+
exports.DropdownMenuShortcut = DropdownMenuShortcut;
|
|
812
|
+
exports.DropdownMenuSub = DropdownMenuSub;
|
|
813
|
+
exports.DropdownMenuSubContent = DropdownMenuSubContent;
|
|
814
|
+
exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
|
|
815
|
+
exports.DropdownMenuTrigger = DropdownMenuTrigger;
|
|
816
|
+
exports.Input = Input;
|
|
817
|
+
exports.JsonMonacoEditor = JsonMonacoEditor;
|
|
818
|
+
exports.Label = Label;
|
|
819
|
+
exports.Select = Select;
|
|
820
|
+
exports.SelectContent = SelectContent;
|
|
821
|
+
exports.SelectGroup = SelectGroup;
|
|
822
|
+
exports.SelectItem = SelectItem;
|
|
823
|
+
exports.SelectLabel = SelectLabel;
|
|
824
|
+
exports.SelectScrollDownButton = SelectScrollDownButton;
|
|
825
|
+
exports.SelectScrollUpButton = SelectScrollUpButton;
|
|
826
|
+
exports.SelectSeparator = SelectSeparator;
|
|
827
|
+
exports.SelectTrigger = SelectTrigger;
|
|
828
|
+
exports.SelectValue = SelectValue;
|
|
829
|
+
exports.StatusPill = StatusPill;
|
|
830
|
+
exports.Switch = Switch;
|
|
831
|
+
exports.Tabs = Tabs;
|
|
832
|
+
exports.TabsContent = TabsContent;
|
|
833
|
+
exports.TabsList = TabsList;
|
|
834
|
+
exports.TabsTrigger = TabsTrigger;
|
|
835
|
+
exports.Textarea = Textarea;
|
|
836
|
+
exports.Tree = Tree;
|
|
837
|
+
exports.TreeContext = TreeContext;
|
|
838
|
+
exports.TreeDragLine = TreeDragLine;
|
|
839
|
+
exports.TreeItem = TreeItem;
|
|
840
|
+
exports.TreeItemLabel = TreeItemLabel;
|
|
841
|
+
exports.badgeVariants = badgeVariants;
|
|
842
|
+
exports.buttonVariants = buttonVariants;
|
|
843
|
+
exports.cn = cn;
|
|
844
|
+
exports.tabsListVariants = tabsListVariants;
|
|
845
|
+
//# sourceMappingURL=index.cjs.map
|