@px-ui/core 1.4.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/dist/assets/CedarvilleCursive-Regular.ttf +0 -0
- package/dist/assets/Lato-Bold.ttf +0 -0
- package/dist/assets/Lato-Light.ttf +0 -0
- package/dist/assets/Lato-Regular.ttf +0 -0
- package/dist/assets/Lato-SemiBold.ttf +0 -0
- package/dist/assets/Ubuntu-Bold.ttf +0 -0
- package/dist/assets/Ubuntu-Light.ttf +0 -0
- package/dist/assets/Ubuntu-Regular.ttf +0 -0
- package/dist/assets/fonts.css +39 -0
- package/dist/chunk-CYeTv9WL.js +42 -0
- package/dist/index.css +183 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +808 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2096 -0
- package/dist/index.js.map +1 -0
- package/package.json +73 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,2096 @@
|
|
|
1
|
+
import { n as __reExport, t as __export } from "./chunk-CYeTv9WL.js";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
|
+
import React, { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
|
|
4
|
+
import { Dialog } from "@base-ui-components/react";
|
|
5
|
+
import classnames from "classnames";
|
|
6
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
7
|
+
import { cva } from "class-variance-authority";
|
|
8
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { Popover } from "@base-ui-components/react/popover";
|
|
10
|
+
import { Combobox } from "@base-ui-components/react/combobox";
|
|
11
|
+
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
12
|
+
import { Select } from "@base-ui-components/react/select";
|
|
13
|
+
import { Menu } from "@base-ui-components/react/menu";
|
|
14
|
+
import { Progress } from "@base-ui-components/react/progress";
|
|
15
|
+
import { Radio } from "@base-ui-components/react/radio";
|
|
16
|
+
import { RadioGroup } from "@base-ui-components/react/radio-group";
|
|
17
|
+
import { Tabs } from "@base-ui-components/react/tabs";
|
|
18
|
+
import { Tooltip } from "@base-ui-components/react/tooltip";
|
|
19
|
+
import { CheckboxGroup } from "@base-ui-components/react/checkbox-group";
|
|
20
|
+
import { Checkbox as Checkbox$1 } from "@base-ui-components/react/checkbox";
|
|
21
|
+
import { useRender } from "@base-ui-components/react/use-render";
|
|
22
|
+
import { mergeProps } from "@base-ui-components/react/merge-props";
|
|
23
|
+
import { DayPicker, getDefaultClassNames } from "react-day-picker";
|
|
24
|
+
import { Avatar as Avatar$1 } from "@base-ui-components/react/avatar";
|
|
25
|
+
import { Switch as Switch$1 } from "@base-ui-components/react/switch";
|
|
26
|
+
import { format } from "date-fns";
|
|
27
|
+
|
|
28
|
+
export * from "class-variance-authority"
|
|
29
|
+
|
|
30
|
+
//#region src/utils/classnames.ts
|
|
31
|
+
const customTwMerge = extendTailwindMerge({ extend: { classGroups: {
|
|
32
|
+
"font-size": [{ text: [
|
|
33
|
+
"ppx-h1",
|
|
34
|
+
"ppx-h2",
|
|
35
|
+
"ppx-h3",
|
|
36
|
+
"ppx-h4",
|
|
37
|
+
"ppx-base",
|
|
38
|
+
"ppx-sm",
|
|
39
|
+
"ppx-xs"
|
|
40
|
+
] }],
|
|
41
|
+
h: [{ h: [
|
|
42
|
+
"stretch-available",
|
|
43
|
+
"input",
|
|
44
|
+
"input-s"
|
|
45
|
+
] }],
|
|
46
|
+
"min-h": [{ "min-h": ["input", "input-s"] }],
|
|
47
|
+
"min-w": [{ "min-w": ["input"] }],
|
|
48
|
+
p: [{ p: ["input"] }],
|
|
49
|
+
rounded: [{ rounded: [
|
|
50
|
+
"ppx-xs",
|
|
51
|
+
"ppx-s",
|
|
52
|
+
"ppx-m",
|
|
53
|
+
"ppx-l",
|
|
54
|
+
"ppx-xl",
|
|
55
|
+
"input",
|
|
56
|
+
"input-s"
|
|
57
|
+
] }],
|
|
58
|
+
"font-family": [{ font: [
|
|
59
|
+
"sans-light",
|
|
60
|
+
"sans-sb",
|
|
61
|
+
"sans-b"
|
|
62
|
+
] }]
|
|
63
|
+
} } });
|
|
64
|
+
function cn(...inputs) {
|
|
65
|
+
return customTwMerge(classnames(inputs));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
//#endregion
|
|
69
|
+
//#region src/components/button.tsx
|
|
70
|
+
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors disabled:cursor-not-allowed shrink-0 [&_svg]:shrink-0 outline-none rounded-ppx-s font-medium focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30", {
|
|
71
|
+
variants: {
|
|
72
|
+
variant: {
|
|
73
|
+
default: "bg-ppx-neutral-11 text-white shadow-xs not-disabled:hover:bg-ppx-neutral-10 not-disabled:active:bg-ppx-neutral-11 disabled:bg-ppx-neutral-6",
|
|
74
|
+
primary: "bg-ppx-primary-5 text-white shadow-xs not-disabled:hover:bg-ppx-primary-4 not-disabled:active:bg-ppx-primary-5 disabled:bg-ppx-primary-2 disabled:text-ppx-neutral-8",
|
|
75
|
+
destructive: "bg-ppx-red-5 text-white shadow-xs hover:bg-ppx-red-4 not-disabled:active:bg-ppx-red-5 disabled:bg-ppx-red-2 disabled:text-ppx-neutral-13",
|
|
76
|
+
outline: "shadow-xs not-disabled:hover:bg-ppx-neutral-2 not-disabled:active:bg-ppx-neutral-3 disabled:border-ppx-neutral-7 border border-ppx-neutral-11 text-ppx-neutral-11 disabled:text-ppx-neutral-7",
|
|
77
|
+
"primary-outline": "shadow-xs not-disabled:hover:bg-ppx-primary-1 not-disabled:active:bg-ppx-primary-2/50 disabled:text-ppx-primary-2 disabled:border-ppx-primary-2 border border-ppx-primary-5 text-ppx-primary-5",
|
|
78
|
+
ghost: "not-disabled:hover:bg-ppx-neutral-2 not-disabled:active:bg-ppx-neutral-3 not-disabled:hover:text-black text-ppx-neutral-12 disabled:opacity-70",
|
|
79
|
+
link: "text-ppx-neutral-12 underline-offset-4 underline cursor-pointer not-disabled:hover:bg-ppx-neutral-2 not-disabled:active:bg-ppx-neutral-3 disabled:opacity-70"
|
|
80
|
+
},
|
|
81
|
+
size: {
|
|
82
|
+
default: "px-4 py-2 h-10 has-[>svg]:px-3 text-ppx-base",
|
|
83
|
+
sm: "gap-1.5 px-3 has-[>svg]:px-2.5 h-8 text-ppx-sm",
|
|
84
|
+
lg: "px-6 h-12 text-ppx-base font-sans-sb has-[>svg]:px-4",
|
|
85
|
+
"icon-sm": "h-8 size-8",
|
|
86
|
+
icon: "size-10 px-2"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
defaultVariants: {
|
|
90
|
+
variant: "default",
|
|
91
|
+
size: "default"
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
function Button({ className, variant, size, ...props }) {
|
|
95
|
+
return /* @__PURE__ */ jsx("button", {
|
|
96
|
+
"data-slot": "button",
|
|
97
|
+
className: cn(buttonVariants({
|
|
98
|
+
variant,
|
|
99
|
+
size,
|
|
100
|
+
className
|
|
101
|
+
})),
|
|
102
|
+
...props
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
//#endregion
|
|
107
|
+
//#region src/icons/close-icon.tsx
|
|
108
|
+
function CloseIcon(props) {
|
|
109
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
110
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
111
|
+
width: "24",
|
|
112
|
+
height: "24",
|
|
113
|
+
viewBox: "0 0 24 24",
|
|
114
|
+
fill: "none",
|
|
115
|
+
stroke: "currentColor",
|
|
116
|
+
strokeWidth: "2",
|
|
117
|
+
strokeLinecap: "round",
|
|
118
|
+
strokeLinejoin: "round",
|
|
119
|
+
...props,
|
|
120
|
+
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
//#endregion
|
|
125
|
+
//#region src/components/dialog.tsx
|
|
126
|
+
var dialog_exports = /* @__PURE__ */ __export({
|
|
127
|
+
Close: () => Close$1,
|
|
128
|
+
Content: () => Content$6,
|
|
129
|
+
Description: () => Description$3,
|
|
130
|
+
Footer: () => Footer$1,
|
|
131
|
+
Header: () => Header$3,
|
|
132
|
+
HeaderContent: () => HeaderContent,
|
|
133
|
+
HeaderIcon: () => HeaderIcon,
|
|
134
|
+
Overlay: () => Overlay,
|
|
135
|
+
Portal: () => Portal$1,
|
|
136
|
+
Root: () => Root$9,
|
|
137
|
+
Title: () => Title$3,
|
|
138
|
+
Trigger: () => Trigger$6
|
|
139
|
+
});
|
|
140
|
+
function Root$9({ ...props }) {
|
|
141
|
+
return /* @__PURE__ */ jsx(Dialog.Root, {
|
|
142
|
+
"data-slot": "dialog",
|
|
143
|
+
...props
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
function Portal$1({ ...props }) {
|
|
147
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, {
|
|
148
|
+
"data-slot": "dialog-portal",
|
|
149
|
+
...props
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
function Trigger$6({ ...props }) {
|
|
153
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, {
|
|
154
|
+
"data-slot": "dialog-trigger",
|
|
155
|
+
...props
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
function Close$1({ ...props }) {
|
|
159
|
+
return /* @__PURE__ */ jsx(Dialog.Close, {
|
|
160
|
+
"data-slot": "dialog-close",
|
|
161
|
+
...props
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
function Overlay({ className, ...props }) {
|
|
165
|
+
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
166
|
+
"data-slot": "dialog-overlay",
|
|
167
|
+
className: cn("inset-0 bg-black/50 fixed transition-all duration-200 [&[data-ending-style]]:opacity-0 [&[data-starting-style]]:opacity-0", className),
|
|
168
|
+
...props
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
function Content$6({ className, children, ...props }) {
|
|
172
|
+
return /* @__PURE__ */ jsxs(Portal$1, {
|
|
173
|
+
"data-slot": "dialog-portal",
|
|
174
|
+
children: [/* @__PURE__ */ jsx(Overlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
|
|
175
|
+
"data-slot": "dialog-content",
|
|
176
|
+
className: cn("fixed z-50 grid w-full bg-ppx-background text-ppx-foreground ppx-sm:max-w-[calc(100%-2rem)]", "gap-8 p-6 shadow-lg ppx-sm:max-w-lg rounded-ppx-m rounded-b-none border border-ppx-neutral-5 duration-200 outline-none ppx-sm:scale-[calc(1-0.1*var(--nested-dialogs))] ppx-sm:rounded-b-ppx-m", "bottom-0 fixed w-full ppx-sm:top-[50%] ppx-sm:bottom-auto ppx-sm:left-[50%] ppx-sm:translate-x-[-50%] ppx-sm:translate-y-[-50%]", "duration-200", "data-[starting-style]:translate-y-full data-[starting-style]:opacity-0", "data-[ending-style]:translate-y-full data-[ending-style]:opacity-0", "data-[starting-style]:ppx-sm:translate-y-[-50%] data-[starting-style]:ppx-sm:scale-95", "data-[ending-style]:ppx-sm:translate-y-[-50%] data-[ending-style]:ppx-sm:scale-95", className),
|
|
177
|
+
...props,
|
|
178
|
+
children: [children, /* @__PURE__ */ jsx(Dialog.Close, {
|
|
179
|
+
className: "top-4 right-4 absolute text-ppx-muted-foreground",
|
|
180
|
+
render: (closeProps) => /* @__PURE__ */ jsxs(Button, {
|
|
181
|
+
...closeProps,
|
|
182
|
+
size: "icon-sm",
|
|
183
|
+
variant: "ghost",
|
|
184
|
+
children: [/* @__PURE__ */ jsx(CloseIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
185
|
+
className: "sr-only",
|
|
186
|
+
children: "Close"
|
|
187
|
+
})]
|
|
188
|
+
})
|
|
189
|
+
})]
|
|
190
|
+
})]
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
function Header$3({ className, ...props }) {
|
|
194
|
+
return /* @__PURE__ */ jsx("div", {
|
|
195
|
+
"data-slot": "dialog-header",
|
|
196
|
+
className: cn("gap-3 flex", className),
|
|
197
|
+
...props
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
function HeaderContent({ className, children, ...props }) {
|
|
201
|
+
return /* @__PURE__ */ jsx("div", {
|
|
202
|
+
className: cn("gap-2 flex flex-col self-center", className),
|
|
203
|
+
...props,
|
|
204
|
+
children
|
|
205
|
+
});
|
|
206
|
+
}
|
|
207
|
+
function HeaderIcon({ className, children, ...props }) {
|
|
208
|
+
return /* @__PURE__ */ jsx("div", {
|
|
209
|
+
className: cn("size-12 flex shrink-0 items-center justify-center rounded-full bg-ppx-neutral-2 text-ppx-muted-foreground", className),
|
|
210
|
+
...props,
|
|
211
|
+
children
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
function Footer$1({ className, ...props }) {
|
|
215
|
+
return /* @__PURE__ */ jsx("div", {
|
|
216
|
+
"data-slot": "dialog-footer",
|
|
217
|
+
className: cn("gap-2 flex flex-col-reverse ppx-sm:flex-row ppx-sm:justify-end", className),
|
|
218
|
+
...props
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
function Title$3({ className, ...props }) {
|
|
222
|
+
return /* @__PURE__ */ jsx(Dialog.Title, {
|
|
223
|
+
"data-slot": "dialog-title",
|
|
224
|
+
className: cn("font-sans-sb text-ppx-h4 leading-none", className),
|
|
225
|
+
...props
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
function Description$3({ className, ...props }) {
|
|
229
|
+
return /* @__PURE__ */ jsx(Dialog.Description, {
|
|
230
|
+
"data-slot": "dialog-description",
|
|
231
|
+
className: cn("text-ppx-sm text-ppx-muted-foreground", className),
|
|
232
|
+
...props
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
//#endregion
|
|
237
|
+
//#region src/components/popover.tsx
|
|
238
|
+
var popover_exports = /* @__PURE__ */ __export({
|
|
239
|
+
Close: () => Close,
|
|
240
|
+
CloseIconButton: () => CloseIconButton,
|
|
241
|
+
Content: () => Content$5,
|
|
242
|
+
Description: () => Description$2,
|
|
243
|
+
Footer: () => Footer,
|
|
244
|
+
Header: () => Header$2,
|
|
245
|
+
Root: () => Root$8,
|
|
246
|
+
Title: () => Title$2,
|
|
247
|
+
Trigger: () => Trigger$5
|
|
248
|
+
});
|
|
249
|
+
function Root$8(props) {
|
|
250
|
+
return /* @__PURE__ */ jsx(Popover.Root, {
|
|
251
|
+
"data-slot": "popover",
|
|
252
|
+
...props
|
|
253
|
+
});
|
|
254
|
+
}
|
|
255
|
+
function Portal(props) {
|
|
256
|
+
return /* @__PURE__ */ jsx(Popover.Portal, {
|
|
257
|
+
"data-slot": "popover-portal",
|
|
258
|
+
...props
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
function Trigger$5(props) {
|
|
262
|
+
return /* @__PURE__ */ jsx(Popover.Trigger, {
|
|
263
|
+
"data-slot": "popover-trigger",
|
|
264
|
+
...props
|
|
265
|
+
});
|
|
266
|
+
}
|
|
267
|
+
function Close(props) {
|
|
268
|
+
return /* @__PURE__ */ jsx(Popover.Close, {
|
|
269
|
+
"data-slot": "popover-close",
|
|
270
|
+
...props
|
|
271
|
+
});
|
|
272
|
+
}
|
|
273
|
+
function Arrow(props) {
|
|
274
|
+
return /* @__PURE__ */ jsx(Popover.Arrow, {
|
|
275
|
+
"data-slot": "popover-arrow",
|
|
276
|
+
...props
|
|
277
|
+
});
|
|
278
|
+
}
|
|
279
|
+
function Positioner(props) {
|
|
280
|
+
return /* @__PURE__ */ jsx(Popover.Positioner, {
|
|
281
|
+
"data-slot": "popover-positioner",
|
|
282
|
+
...props
|
|
283
|
+
});
|
|
284
|
+
}
|
|
285
|
+
function Header$2({ className, ...props }) {
|
|
286
|
+
return /* @__PURE__ */ jsx("div", {
|
|
287
|
+
"data-slot": "popover-header",
|
|
288
|
+
className: cn("gap-y-1 relative flex flex-col", className),
|
|
289
|
+
...props
|
|
290
|
+
});
|
|
291
|
+
}
|
|
292
|
+
function Title$2({ className, ...props }) {
|
|
293
|
+
return /* @__PURE__ */ jsx(Popover.Title, {
|
|
294
|
+
"data-slot": "popover-title",
|
|
295
|
+
className: cn("font-sans-sb text-ppx-sm", className),
|
|
296
|
+
...props
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
function Description$2({ className, ...props }) {
|
|
300
|
+
return /* @__PURE__ */ jsx(Popover.Description, {
|
|
301
|
+
"data-slot": "popover-description",
|
|
302
|
+
className: cn("text-ppx-sm text-ppx-muted-foreground", className),
|
|
303
|
+
...props
|
|
304
|
+
});
|
|
305
|
+
}
|
|
306
|
+
function Content$5({ children, className, positionerProps = {}, popupProps = {}, arrow = true }) {
|
|
307
|
+
return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Positioner, {
|
|
308
|
+
sideOffset: 8,
|
|
309
|
+
align: "center",
|
|
310
|
+
positionMethod: "fixed",
|
|
311
|
+
side: "bottom",
|
|
312
|
+
...positionerProps,
|
|
313
|
+
children: /* @__PURE__ */ jsxs(Popover.Popup, {
|
|
314
|
+
"data-slot": "popover-content",
|
|
315
|
+
...popupProps,
|
|
316
|
+
className: cn("p-4 shadow-md z-50 min-w-input origin-[var(--transform-origin)] rounded-ppx-m bg-ppx-background text-ppx-foreground outline -outline-offset-1 outline-ppx-neutral-5 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0", popupProps.className, className),
|
|
317
|
+
children: [arrow && /* @__PURE__ */ jsx(Arrow, {
|
|
318
|
+
className: "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
|
|
319
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
320
|
+
width: "20",
|
|
321
|
+
height: "10",
|
|
322
|
+
viewBox: "0 0 20 10",
|
|
323
|
+
fill: "none",
|
|
324
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
325
|
+
d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
|
|
326
|
+
className: "fill-ppx-background"
|
|
327
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
328
|
+
d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
|
|
329
|
+
className: "fill-ppx-neutral-5"
|
|
330
|
+
})]
|
|
331
|
+
})
|
|
332
|
+
}), children]
|
|
333
|
+
})
|
|
334
|
+
}) });
|
|
335
|
+
}
|
|
336
|
+
function CloseIconButton({ className, ...props }) {
|
|
337
|
+
return /* @__PURE__ */ jsx(Popover.Close, { render: (closeProps) => /* @__PURE__ */ jsx(Button, {
|
|
338
|
+
"aria-label": "Close",
|
|
339
|
+
variant: "ghost",
|
|
340
|
+
size: "icon-sm",
|
|
341
|
+
className: cn("self-start text-ppx-muted-foreground transition-colors hover:text-ppx-foreground", className),
|
|
342
|
+
...closeProps,
|
|
343
|
+
...props,
|
|
344
|
+
children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-5" })
|
|
345
|
+
}) });
|
|
346
|
+
}
|
|
347
|
+
function Footer({ className, ...props }) {
|
|
348
|
+
return /* @__PURE__ */ jsx("div", {
|
|
349
|
+
"data-slot": "popover-footer",
|
|
350
|
+
className: cn("gap-2 flex flex-col-reverse ppx-sm:flex-row ppx-sm:justify-end", className),
|
|
351
|
+
...props
|
|
352
|
+
});
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
//#endregion
|
|
356
|
+
//#region src/hooks/use-intersection-observer.ts
|
|
357
|
+
function useIntersectionObserver(options = {}) {
|
|
358
|
+
const { threshold = 1, root = null, rootMargin = "0px" } = options;
|
|
359
|
+
const [entry, setEntry] = React.useState(null);
|
|
360
|
+
const previousObserver = React.useRef(null);
|
|
361
|
+
return [React.useCallback((node) => {
|
|
362
|
+
if (previousObserver.current) {
|
|
363
|
+
previousObserver.current.disconnect();
|
|
364
|
+
previousObserver.current = null;
|
|
365
|
+
}
|
|
366
|
+
if (node?.nodeType === Node.ELEMENT_NODE) {
|
|
367
|
+
const observer = new IntersectionObserver(([entry$1]) => {
|
|
368
|
+
setEntry(entry$1 ?? null);
|
|
369
|
+
}, {
|
|
370
|
+
threshold,
|
|
371
|
+
root,
|
|
372
|
+
rootMargin
|
|
373
|
+
});
|
|
374
|
+
observer.observe(node);
|
|
375
|
+
previousObserver.current = observer;
|
|
376
|
+
}
|
|
377
|
+
}, [
|
|
378
|
+
threshold,
|
|
379
|
+
root,
|
|
380
|
+
rootMargin
|
|
381
|
+
]), entry];
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
//#endregion
|
|
385
|
+
//#region src/hooks/use-infinite-scroll.ts
|
|
386
|
+
const DEFAULT_DELAY_IN_MS = 100;
|
|
387
|
+
function useInfiniteScroll({ isLoadingMore, hasMore, onLoadMore, rootMargin, disabled, threshold }) {
|
|
388
|
+
const [ref, entry] = useIntersectionObserver({
|
|
389
|
+
rootMargin,
|
|
390
|
+
threshold
|
|
391
|
+
});
|
|
392
|
+
const isVisible = Boolean(entry?.isIntersecting);
|
|
393
|
+
const onLoadMoreEvent = useEffectEvent(() => {
|
|
394
|
+
onLoadMore();
|
|
395
|
+
});
|
|
396
|
+
useEffect(() => {
|
|
397
|
+
if (disabled) return;
|
|
398
|
+
if (isVisible && hasMore && !isLoadingMore && !disabled) {
|
|
399
|
+
const timer = setTimeout(() => {
|
|
400
|
+
onLoadMoreEvent();
|
|
401
|
+
}, DEFAULT_DELAY_IN_MS);
|
|
402
|
+
return () => {
|
|
403
|
+
clearTimeout(timer);
|
|
404
|
+
};
|
|
405
|
+
}
|
|
406
|
+
}, [
|
|
407
|
+
isVisible,
|
|
408
|
+
isLoadingMore,
|
|
409
|
+
hasMore,
|
|
410
|
+
disabled
|
|
411
|
+
]);
|
|
412
|
+
return [ref];
|
|
413
|
+
}
|
|
414
|
+
var use_infinite_scroll_default = useInfiniteScroll;
|
|
415
|
+
|
|
416
|
+
//#endregion
|
|
417
|
+
//#region src/components/spinner.tsx
|
|
418
|
+
const sizeClasses = {
|
|
419
|
+
small: "w-4 h-4",
|
|
420
|
+
medium: "w-6 h-6",
|
|
421
|
+
large: "w-8 h-8"
|
|
422
|
+
};
|
|
423
|
+
function Spinner({ size = "small", className }) {
|
|
424
|
+
const spinnerClasses = cn("animate-spin inline-block", sizeClasses[size], className);
|
|
425
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
426
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
427
|
+
viewBox: "0 0 24 24",
|
|
428
|
+
fill: "none",
|
|
429
|
+
stroke: "currentColor",
|
|
430
|
+
strokeWidth: 2.5,
|
|
431
|
+
strokeLinecap: "round",
|
|
432
|
+
strokeLinejoin: "round",
|
|
433
|
+
"aria-label": "Loading",
|
|
434
|
+
role: "status",
|
|
435
|
+
className: spinnerClasses,
|
|
436
|
+
children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
|
|
437
|
+
});
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
//#endregion
|
|
441
|
+
//#region src/tw-styles/dropdown.ts
|
|
442
|
+
const DROPDOWN_ITEM_CN = "gap-2 py-2 pr-8 pl-4 text-ppx-sm flex cursor-default items-center outline-none select-none not-data-disabled:data-highlighted:bg-ppx-primary-b-1 data-selected:bg-ppx-primary-1! data-checked:bg-ppx-primary-1! text-ppx-foreground my-0.5 data-disabled:opacity-50";
|
|
443
|
+
const DROPDOWN_POPUP_CN = "rounded-ppx-s shadow-xs max-h-[var(--available-height)] origin-[var(--transform-origin)] overflow-y-auto bg-ppx-background bg-clip-padding shadow-ppx-neutral-5 outline-1 outline-ppx-neutral-5 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none group max-w-[var(--available-width)] text-ppx-foreground";
|
|
444
|
+
const DROPDOWN_POSITIONER_CN = "z-10 outline-none";
|
|
445
|
+
const triggerVariants = cva("gap-2 text-ppx-sm bg-ppx-neutral-1 inline-flex items-center justify-between border border-ppx-neutral-5 aria-invalid:border-ppx-red-4 text-ppx-foreground outline-transparent p-input focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ppx-neutral-6 focus-visible:aria-invalid:outline-transparent data-disabled:cursor-not-allowed data-disabled:border-ppx-neutral-3 data-disabled:bg-ppx-neutral-3 data-disabled:text-ppx-neutral-11 data-popup-open:brightness-97", {
|
|
446
|
+
variants: {
|
|
447
|
+
size: {
|
|
448
|
+
default: "rounded-input min-h-input h-input",
|
|
449
|
+
sm: "rounded-input-s min-h-input-s h-input-s"
|
|
450
|
+
},
|
|
451
|
+
widthVariant: {
|
|
452
|
+
enforced: "min-w-input w-[var(--min-width-input)]",
|
|
453
|
+
fit: "min-w-0 w-fit",
|
|
454
|
+
full: "min-w-0 w-full"
|
|
455
|
+
}
|
|
456
|
+
},
|
|
457
|
+
defaultVariants: {
|
|
458
|
+
size: "default",
|
|
459
|
+
widthVariant: "enforced"
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
|
|
463
|
+
//#endregion
|
|
464
|
+
//#region src/icons/clear-icon.tsx
|
|
465
|
+
function ClearIcon(props) {
|
|
466
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
467
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
468
|
+
viewBox: "0 0 24 24",
|
|
469
|
+
fill: "none",
|
|
470
|
+
stroke: "currentColor",
|
|
471
|
+
strokeWidth: "2",
|
|
472
|
+
strokeLinecap: "round",
|
|
473
|
+
strokeLinejoin: "round",
|
|
474
|
+
...props,
|
|
475
|
+
className: cn("shrink-0", props.className),
|
|
476
|
+
children: [/* @__PURE__ */ jsx("path", { d: "M18 6L6 18" }), /* @__PURE__ */ jsx("path", { d: "M6 6l12 12" })]
|
|
477
|
+
});
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
//#endregion
|
|
481
|
+
//#region src/icons/chevron-down-icon.tsx
|
|
482
|
+
function ChevronDownIcon(props) {
|
|
483
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
484
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
485
|
+
viewBox: "0 0 24 24",
|
|
486
|
+
fill: "none",
|
|
487
|
+
stroke: "currentColor",
|
|
488
|
+
strokeWidth: "2",
|
|
489
|
+
strokeLinecap: "round",
|
|
490
|
+
strokeLinejoin: "round",
|
|
491
|
+
...props,
|
|
492
|
+
className: cn("size-4 shrink-0", props.className),
|
|
493
|
+
children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
|
|
494
|
+
});
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
//#endregion
|
|
498
|
+
//#region src/icons/search-icon.tsx
|
|
499
|
+
function SearchIcon(props) {
|
|
500
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
501
|
+
width: "16",
|
|
502
|
+
height: "16",
|
|
503
|
+
viewBox: "0 0 16 16",
|
|
504
|
+
fill: "none",
|
|
505
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
506
|
+
className: cn("shrink-0", props.className),
|
|
507
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
508
|
+
d: "M15.9038 14.9625L11.2623 10.321C12.1404 9.24234 12.6723 7.85136 12.6723 6.33612C12.6723 2.83678 9.83548 0 6.33612 0C2.83677 0 0 2.83677 0 6.33612C0 9.83547 2.83677 12.6723 6.33612 12.6723C7.85133 12.6723 9.24233 12.1404 10.3326 11.2532L10.321 11.2623L14.9613 15.9026C15.0215 15.9628 15.1047 16 15.1966 16C15.2885 16 15.3717 15.9628 15.4319 15.9026L15.9026 15.4319C15.9628 15.3716 16 15.2884 16 15.1965C16 15.1053 15.9633 15.0226 15.9038 14.9624L15.9038 14.9625L15.9038 14.9625ZM6.34922 11.341C6.34886 11.341 6.34842 11.341 6.34798 11.341C3.59045 11.341 1.35503 9.10555 1.35503 6.34802C1.35503 3.59048 3.59045 1.35506 6.34798 1.35506C9.10552 1.35506 11.3409 3.59048 11.3409 6.34802C11.3409 6.34845 11.3409 6.34887 11.3409 6.34931V6.34925C11.3374 9.10469 9.10467 11.3375 6.34955 11.341H6.3492L6.34922 11.341Z",
|
|
509
|
+
fill: "currentColor"
|
|
510
|
+
})
|
|
511
|
+
});
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
//#endregion
|
|
515
|
+
//#region src/icons/check-icon.tsx
|
|
516
|
+
function CheckIcon(props) {
|
|
517
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
518
|
+
fill: "currentcolor",
|
|
519
|
+
width: "10",
|
|
520
|
+
height: "10",
|
|
521
|
+
viewBox: "0 0 10 10",
|
|
522
|
+
...props,
|
|
523
|
+
className: cn("shrink-0", props.className),
|
|
524
|
+
children: /* @__PURE__ */ jsx("path", { d: "M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" })
|
|
525
|
+
});
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
//#endregion
|
|
529
|
+
//#region src/components/input-group.tsx
|
|
530
|
+
var input_group_exports = /* @__PURE__ */ __export({
|
|
531
|
+
Addon: () => Addon,
|
|
532
|
+
Button: () => Button$1,
|
|
533
|
+
Input: () => Input$1,
|
|
534
|
+
Root: () => Root$7,
|
|
535
|
+
Text: () => Text
|
|
536
|
+
});
|
|
537
|
+
const inputGroupVariants = cva("group/input-group relative flex items-center border border-ppx-neutral-5 bg-ppx-neutral-1 outline-transparent has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:-outline-offset-1 has-[[data-slot=input-group-control]:focus-visible]:bg-ppx-background has-[[data-slot=input-group-control]:focus-visible]:outline-ppx-primary-focus has-[[data-slot][aria-invalid=true]]:outline-ppx-red-4 has-[[data-slot][aria-invalid=true]]:outline has-[[data-slot][aria-invalid=true]]:-outline-offset-1 has-[[data-slot][aria-invalid=true]]:bg-ppx-red-1 has-[[data-slot=input-group-control]:disabled]:*:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-ppx-neutral-3 has-[[data-slot=input-group-control]:disabled]:bg-ppx-neutral-3 has-[[data-slot=input-group-control]:disabled]:text-ppx-neutral-11 has-[>[data-align=inline-start]]:[&>input]:pl-input has-[>[data-align=inline-end]]:[&>input]:pr-input", {
|
|
538
|
+
variants: {
|
|
539
|
+
size: {
|
|
540
|
+
default: "h-input rounded-input",
|
|
541
|
+
sm: "h-input-s rounded-input-s"
|
|
542
|
+
},
|
|
543
|
+
widthVariant: {
|
|
544
|
+
enforced: "min-w-input w-[var(--min-width-input)]",
|
|
545
|
+
fit: "min-w-0 w-fit",
|
|
546
|
+
full: "min-w-0 w-full"
|
|
547
|
+
}
|
|
548
|
+
},
|
|
549
|
+
defaultVariants: {
|
|
550
|
+
size: "default",
|
|
551
|
+
widthVariant: "full"
|
|
552
|
+
}
|
|
553
|
+
});
|
|
554
|
+
function Root$7({ className, size, disabled, widthVariant, ...props }) {
|
|
555
|
+
return /* @__PURE__ */ jsx("div", {
|
|
556
|
+
"data-slot": "input-group",
|
|
557
|
+
role: "group",
|
|
558
|
+
className: cn(inputGroupVariants({
|
|
559
|
+
size,
|
|
560
|
+
widthVariant
|
|
561
|
+
}), className),
|
|
562
|
+
"data-disabled": disabled,
|
|
563
|
+
...props
|
|
564
|
+
});
|
|
565
|
+
}
|
|
566
|
+
const inputGroupAddonVariants = cva("text-ppx-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50", {
|
|
567
|
+
variants: { align: {
|
|
568
|
+
"inline-start": "order-first pl-input",
|
|
569
|
+
"inline-end": "order-last pr-input"
|
|
570
|
+
} },
|
|
571
|
+
defaultVariants: { align: "inline-start" }
|
|
572
|
+
});
|
|
573
|
+
function Addon({ className, align = "inline-start", ...props }) {
|
|
574
|
+
return /* @__PURE__ */ jsx("div", {
|
|
575
|
+
role: "group",
|
|
576
|
+
"data-slot": "input-group-addon",
|
|
577
|
+
"data-align": align,
|
|
578
|
+
className: cn(inputGroupAddonVariants({ align }), className),
|
|
579
|
+
onClick: (e) => {
|
|
580
|
+
if (e.target.closest("button")) return;
|
|
581
|
+
e.currentTarget.parentElement?.querySelector("input")?.focus();
|
|
582
|
+
},
|
|
583
|
+
...props
|
|
584
|
+
});
|
|
585
|
+
}
|
|
586
|
+
const inputGroupButtonVariants = cva("text-ppx-sm shadow-none flex gap-2 items-center", {
|
|
587
|
+
variants: { size: {
|
|
588
|
+
xs: "h-6 gap-1 px-2 rounded-input [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
|
|
589
|
+
sm: "h-8 px-2.5 gap-1.5 rounded-input has-[>svg]:px-2.5",
|
|
590
|
+
"icon-xs": "size-6 rounded-input p-0 has-[>svg]:p-0",
|
|
591
|
+
"icon-sm": "size-8 p-0 has-[>svg]:p-0"
|
|
592
|
+
} },
|
|
593
|
+
defaultVariants: { size: "xs" }
|
|
594
|
+
});
|
|
595
|
+
function Button$1({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
|
|
596
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
597
|
+
type,
|
|
598
|
+
"data-size": size,
|
|
599
|
+
variant,
|
|
600
|
+
className: cn(inputGroupButtonVariants({ size }), className),
|
|
601
|
+
...props
|
|
602
|
+
});
|
|
603
|
+
}
|
|
604
|
+
function Text({ className, ...props }) {
|
|
605
|
+
return /* @__PURE__ */ jsx("span", {
|
|
606
|
+
className: cn("gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center text-ppx-muted-foreground [&_svg]:pointer-events-none", className),
|
|
607
|
+
...props
|
|
608
|
+
});
|
|
609
|
+
}
|
|
610
|
+
function Input$1({ className, invalid, ...props }) {
|
|
611
|
+
return /* @__PURE__ */ jsx("input", {
|
|
612
|
+
"data-slot": "input-group-control",
|
|
613
|
+
"aria-invalid": invalid,
|
|
614
|
+
className: cn("font-medium min-w-0 flex-1 rounded-none border-0 bg-transparent p-input text-ppx-sm text-ppx-foreground placeholder:font-sans-light placeholder:text-ppx-sm placeholder:text-ppx-neutral-12 focus:outline-none disabled:placeholder:text-ppx-neutral-11", props.type === "number" && "no-arrow-spin", className),
|
|
615
|
+
...props
|
|
616
|
+
});
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
//#endregion
|
|
620
|
+
//#region src/hooks/use-debounce.ts
|
|
621
|
+
function useDebounce(callback, delay, deps) {
|
|
622
|
+
const timeout = useRef(null);
|
|
623
|
+
const cb = useEffectEvent(callback);
|
|
624
|
+
useEffect(() => {
|
|
625
|
+
if (timeout.current) clearTimeout(timeout.current);
|
|
626
|
+
timeout.current = setTimeout(() => {
|
|
627
|
+
cb();
|
|
628
|
+
timeout.current = null;
|
|
629
|
+
}, delay);
|
|
630
|
+
return () => {
|
|
631
|
+
if (timeout.current) {
|
|
632
|
+
clearTimeout(timeout.current);
|
|
633
|
+
timeout.current = null;
|
|
634
|
+
}
|
|
635
|
+
};
|
|
636
|
+
}, [...deps, delay]);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
//#endregion
|
|
640
|
+
//#region src/hooks/use-async-options.ts
|
|
641
|
+
function useAsyncOptions(params, { isOpen, inputValue }) {
|
|
642
|
+
const [debouncedSearch, setDebouncedSearch] = useState(inputValue);
|
|
643
|
+
const isFetchedAfterMount = useRef(false);
|
|
644
|
+
const query = useInfiniteQuery({
|
|
645
|
+
queryKey: [...params.cacheKey, debouncedSearch],
|
|
646
|
+
queryFn: async ({ pageParam, signal }) => {
|
|
647
|
+
const { error, data } = await params.loader({
|
|
648
|
+
search: debouncedSearch,
|
|
649
|
+
page: pageParam,
|
|
650
|
+
signal
|
|
651
|
+
});
|
|
652
|
+
if (error) throw new Error(error);
|
|
653
|
+
return data;
|
|
654
|
+
},
|
|
655
|
+
enabled: isOpen,
|
|
656
|
+
initialPageParam: 1,
|
|
657
|
+
staleTime: () => isFetchedAfterMount.current ? Infinity : 0,
|
|
658
|
+
getNextPageParam: (lastPage, allPages) => lastPage.hasMore ? allPages.length + 1 : void 0,
|
|
659
|
+
retry: false
|
|
660
|
+
});
|
|
661
|
+
if (query.isFetchedAfterMount && !isFetchedAfterMount.current) isFetchedAfterMount.current = true;
|
|
662
|
+
if (inputValue === "" && debouncedSearch !== "" && isOpen) setDebouncedSearch("");
|
|
663
|
+
useDebounce(() => {
|
|
664
|
+
setDebouncedSearch(inputValue);
|
|
665
|
+
}, 300, [inputValue]);
|
|
666
|
+
const items = query.data?.pages.flatMap((page) => page.options) ?? [];
|
|
667
|
+
const handleLoadMore = () => {
|
|
668
|
+
query.fetchNextPage();
|
|
669
|
+
};
|
|
670
|
+
return {
|
|
671
|
+
items,
|
|
672
|
+
isLoading: query.isLoading,
|
|
673
|
+
isLoadingMore: query.isFetchingNextPage,
|
|
674
|
+
hasMore: query.hasNextPage,
|
|
675
|
+
isError: query.isError,
|
|
676
|
+
onLoadMore: handleLoadMore,
|
|
677
|
+
_query: query
|
|
678
|
+
};
|
|
679
|
+
}
|
|
680
|
+
function defineLoadOptions(loadOptions) {
|
|
681
|
+
return loadOptions;
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
//#endregion
|
|
685
|
+
//#region src/components/combobox.tsx
|
|
686
|
+
var combobox_exports = /* @__PURE__ */ __export({
|
|
687
|
+
BaseCombobox: () => BaseCombobox,
|
|
688
|
+
Chip: () => Chip,
|
|
689
|
+
ChipsTrigger: () => ChipsTrigger,
|
|
690
|
+
Content: () => Content$4,
|
|
691
|
+
Item: () => Item$6,
|
|
692
|
+
List: () => List$2,
|
|
693
|
+
LoadingIndicator: () => LoadingIndicator,
|
|
694
|
+
MultiItem: () => MultiItem$1,
|
|
695
|
+
Root: () => Root$6,
|
|
696
|
+
Search: () => Search,
|
|
697
|
+
SearchableTrigger: () => SearchableTrigger,
|
|
698
|
+
SearchableTriggerDropdownAddon: () => SearchableTriggerDropdownAddon,
|
|
699
|
+
Trigger: () => Trigger$4,
|
|
700
|
+
Value: () => Value$2,
|
|
701
|
+
useComboboxContext: () => useComboboxContext
|
|
702
|
+
});
|
|
703
|
+
const SINGLE_TEXT_CONTENT_CN = "px-4 py-2 text-ppx-sm min-h-11 flex items-center justify-center text-ppx-muted-foreground";
|
|
704
|
+
const List$2 = Combobox.List;
|
|
705
|
+
const ComboboxContext = React$1.createContext({});
|
|
706
|
+
function Root$6({ children, ...props }) {
|
|
707
|
+
const chipsTriggerRef = React$1.useRef(null);
|
|
708
|
+
const searchableTriggerRef = React$1.useRef(null);
|
|
709
|
+
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
710
|
+
const [inputValue, setInputValue] = React$1.useState("");
|
|
711
|
+
const mergedProps = {
|
|
712
|
+
open: isOpen,
|
|
713
|
+
onOpenChange: setIsOpen,
|
|
714
|
+
inputValue,
|
|
715
|
+
onInputValueChange: setInputValue,
|
|
716
|
+
...props
|
|
717
|
+
};
|
|
718
|
+
const rootProps = {
|
|
719
|
+
...props.loadOptions ? useAsyncOptions(props.loadOptions, {
|
|
720
|
+
isOpen: mergedProps.open,
|
|
721
|
+
inputValue: mergedProps.inputValue
|
|
722
|
+
}) : {},
|
|
723
|
+
...mergedProps
|
|
724
|
+
};
|
|
725
|
+
const contextValues = {
|
|
726
|
+
...rootProps,
|
|
727
|
+
chipsTriggerRef,
|
|
728
|
+
searchableTriggerRef
|
|
729
|
+
};
|
|
730
|
+
return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
|
|
731
|
+
value: contextValues,
|
|
732
|
+
children: /* @__PURE__ */ jsx(Combobox.Root, {
|
|
733
|
+
autoHighlight: true,
|
|
734
|
+
...rootProps,
|
|
735
|
+
children
|
|
736
|
+
})
|
|
737
|
+
});
|
|
738
|
+
}
|
|
739
|
+
function Content$4({ empty = "No options", portalProps, positionerProps, popupProps, children, widthVariant = "trigger" }) {
|
|
740
|
+
const { chipsTriggerRef, searchableTriggerRef, isLoading, isError, isLoadingMore, hasMore, onLoadMore } = useComboboxContext();
|
|
741
|
+
const [infiniteScrollRef] = use_infinite_scroll_default({
|
|
742
|
+
isLoadingMore: !!isLoadingMore,
|
|
743
|
+
hasMore: !!hasMore,
|
|
744
|
+
onLoadMore: () => onLoadMore?.(),
|
|
745
|
+
disabled: isError
|
|
746
|
+
});
|
|
747
|
+
return /* @__PURE__ */ jsx(Combobox.Portal, {
|
|
748
|
+
...portalProps,
|
|
749
|
+
children: /* @__PURE__ */ jsx(Combobox.Positioner, {
|
|
750
|
+
sideOffset: 6,
|
|
751
|
+
align: "start",
|
|
752
|
+
...positionerProps,
|
|
753
|
+
className: cn(DROPDOWN_POSITIONER_CN, positionerProps?.className),
|
|
754
|
+
anchor: positionerProps?.anchor ?? chipsTriggerRef.current ?? searchableTriggerRef.current,
|
|
755
|
+
children: /* @__PURE__ */ jsxs(Combobox.Popup, {
|
|
756
|
+
className: cn(DROPDOWN_POPUP_CN, "scroll-pb-2 scroll-pt-2 overscroll-contain", widthVariant === "trigger" ? "w-[var(--anchor-width)]" : widthVariant === "fit" ? "w-fit" : widthVariant === "enforced" ? "w-[var(--min-width-input)]" : "", popupProps?.className),
|
|
757
|
+
...popupProps,
|
|
758
|
+
children: [
|
|
759
|
+
children,
|
|
760
|
+
!isLoading && !isError && /* @__PURE__ */ jsx(Combobox.Empty, {
|
|
761
|
+
className: cn(SINGLE_TEXT_CONTENT_CN, "empty:hidden"),
|
|
762
|
+
children: empty
|
|
763
|
+
}),
|
|
764
|
+
isLoading && /* @__PURE__ */ jsx(Combobox.Status, {
|
|
765
|
+
className: SINGLE_TEXT_CONTENT_CN,
|
|
766
|
+
children: "Loading..."
|
|
767
|
+
}),
|
|
768
|
+
isError && /* @__PURE__ */ jsx(Combobox.Status, {
|
|
769
|
+
className: SINGLE_TEXT_CONTENT_CN,
|
|
770
|
+
children: "Error loading options"
|
|
771
|
+
}),
|
|
772
|
+
hasMore && /* @__PURE__ */ jsx(Combobox.Status, {
|
|
773
|
+
ref: infiniteScrollRef,
|
|
774
|
+
className: "flex h-10 items-center justify-center",
|
|
775
|
+
"aria-label": "Loading more options",
|
|
776
|
+
children: /* @__PURE__ */ jsx(Spinner, {
|
|
777
|
+
className: "stroke-ppx-neutral-10",
|
|
778
|
+
size: "medium"
|
|
779
|
+
})
|
|
780
|
+
})
|
|
781
|
+
]
|
|
782
|
+
})
|
|
783
|
+
})
|
|
784
|
+
});
|
|
785
|
+
}
|
|
786
|
+
function Item$6({ className, ...props }) {
|
|
787
|
+
return /* @__PURE__ */ jsx(Combobox.Item, {
|
|
788
|
+
className: cn(DROPDOWN_ITEM_CN, className),
|
|
789
|
+
...props,
|
|
790
|
+
children: props.children
|
|
791
|
+
});
|
|
792
|
+
}
|
|
793
|
+
function MultiItem$1({ className, ...props }) {
|
|
794
|
+
return /* @__PURE__ */ jsx(Combobox.Item, {
|
|
795
|
+
...props,
|
|
796
|
+
render: (itemProps, state) => /* @__PURE__ */ jsxs("div", {
|
|
797
|
+
...itemProps,
|
|
798
|
+
className: cn(DROPDOWN_ITEM_CN, className),
|
|
799
|
+
children: [/* @__PURE__ */ jsx(ItemIndicator$1, { selected: state.selected }), props.children]
|
|
800
|
+
})
|
|
801
|
+
});
|
|
802
|
+
}
|
|
803
|
+
function ItemIndicator$1(props) {
|
|
804
|
+
return /* @__PURE__ */ jsx("div", {
|
|
805
|
+
className: cn("border-ppx-neutral-10 bg-ppx-background peer flex size-4 shrink-0 items-center justify-center rounded-sm border outline-none transition-colors duration-150", props.selected && "border-ppx-primary-5 bg-ppx-primary-5 text-white"),
|
|
806
|
+
children: /* @__PURE__ */ jsx(Combobox.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
807
|
+
});
|
|
808
|
+
}
|
|
809
|
+
function LoadingIndicator(props) {
|
|
810
|
+
return /* @__PURE__ */ jsx("div", {
|
|
811
|
+
className: cn("flex items-center justify-center", props.className),
|
|
812
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
813
|
+
className: "flex space-x-1",
|
|
814
|
+
children: [
|
|
815
|
+
/* @__PURE__ */ jsx("div", { className: "bg-ppx-foreground h-1 w-1 animate-bounce rounded-full opacity-40 [animation-delay:-0.3s] [animation-name:bounce-color]" }),
|
|
816
|
+
/* @__PURE__ */ jsx("div", { className: "bg-ppx-foreground h-1 w-1 animate-bounce rounded-full opacity-70 [animation-delay:-0.15s] [animation-name:bounce-color]" }),
|
|
817
|
+
/* @__PURE__ */ jsx("div", { className: "bg-ppx-foreground h-1 w-1 animate-bounce rounded-full opacity-100 [animation-name:bounce-color]" })
|
|
818
|
+
]
|
|
819
|
+
})
|
|
820
|
+
});
|
|
821
|
+
}
|
|
822
|
+
function SearchableTrigger(props) {
|
|
823
|
+
const { invalid, disabled, searchableTriggerRef } = useComboboxContext();
|
|
824
|
+
return /* @__PURE__ */ jsxs(Root$7, {
|
|
825
|
+
...props,
|
|
826
|
+
disabled,
|
|
827
|
+
ref: searchableTriggerRef,
|
|
828
|
+
children: [
|
|
829
|
+
/* @__PURE__ */ jsx(Combobox.Input, { render: (inputProps) => /* @__PURE__ */ jsx(Input$1, {
|
|
830
|
+
...inputProps,
|
|
831
|
+
invalid,
|
|
832
|
+
placeholder: props.placeholder
|
|
833
|
+
}) }),
|
|
834
|
+
props.addons,
|
|
835
|
+
/* @__PURE__ */ jsx(SearchableTriggerDropdownAddon, {})
|
|
836
|
+
]
|
|
837
|
+
});
|
|
838
|
+
}
|
|
839
|
+
function SearchableTriggerDropdownAddon() {
|
|
840
|
+
const { isLoading } = useComboboxContext();
|
|
841
|
+
return /* @__PURE__ */ jsxs(Addon, {
|
|
842
|
+
align: "inline-end",
|
|
843
|
+
className: "gap-0.5",
|
|
844
|
+
children: [
|
|
845
|
+
isLoading && /* @__PURE__ */ jsx(LoadingIndicator, { className: "mr-2" }),
|
|
846
|
+
!isLoading && /* @__PURE__ */ jsx(Combobox.Clear, {
|
|
847
|
+
"aria-label": "Clear selection",
|
|
848
|
+
render: (clearProps) => /* @__PURE__ */ jsx(Button$1, {
|
|
849
|
+
size: "icon-xs",
|
|
850
|
+
...clearProps,
|
|
851
|
+
children: /* @__PURE__ */ jsx(ClearIcon, { className: "size-4" })
|
|
852
|
+
})
|
|
853
|
+
}),
|
|
854
|
+
/* @__PURE__ */ jsx(Combobox.Trigger, { render: (triggerProps) => /* @__PURE__ */ jsx(Button$1, {
|
|
855
|
+
size: "icon-xs",
|
|
856
|
+
"aria-label": "Open popup",
|
|
857
|
+
...triggerProps,
|
|
858
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
859
|
+
}) })
|
|
860
|
+
]
|
|
861
|
+
});
|
|
862
|
+
}
|
|
863
|
+
function Trigger$4({ size, widthVariant, children, className, ...props }) {
|
|
864
|
+
const { isLoading, invalid } = useComboboxContext();
|
|
865
|
+
return /* @__PURE__ */ jsxs(Combobox.Trigger, {
|
|
866
|
+
"aria-label": "Open popup",
|
|
867
|
+
"aria-invalid": invalid ?? void 0,
|
|
868
|
+
className: cn(triggerVariants({
|
|
869
|
+
size,
|
|
870
|
+
widthVariant
|
|
871
|
+
}), className),
|
|
872
|
+
...props,
|
|
873
|
+
children: [children, /* @__PURE__ */ jsxs("div", {
|
|
874
|
+
className: "flex shrink-0 items-center gap-2",
|
|
875
|
+
children: [isLoading && /* @__PURE__ */ jsx(LoadingIndicator, {}), /* @__PURE__ */ jsx(ChevronDownIcon, {})]
|
|
876
|
+
})]
|
|
877
|
+
});
|
|
878
|
+
}
|
|
879
|
+
/**
|
|
880
|
+
* Renders the value, if `value` is a string or an object with `label` property in it,
|
|
881
|
+
* then renders that value else you should provide a render function to render your custom value
|
|
882
|
+
* **/
|
|
883
|
+
function Value$2({ children, className, placeholder, ...props }) {
|
|
884
|
+
return /* @__PURE__ */ jsx("span", {
|
|
885
|
+
className: cn("text-ppx-sm truncate", className),
|
|
886
|
+
...props,
|
|
887
|
+
children: /* @__PURE__ */ jsx(Combobox.Value, { children: (value) => {
|
|
888
|
+
if (value == null && placeholder) return placeholder;
|
|
889
|
+
if (children) return typeof children === "function" ? children(value) : children;
|
|
890
|
+
if (value && typeof value === "object" && "label" in value) return value.label;
|
|
891
|
+
return value;
|
|
892
|
+
} })
|
|
893
|
+
});
|
|
894
|
+
}
|
|
895
|
+
const chipsTriggerVariants = cva("p-input text-ppx-sm bg-ppx-neutral-1 inline-flex items-center justify-between border border-ppx-neutral-5 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-ppx-primary-focus aria-invalid:border-ppx-red-4 focus-within:aria-invalid:outline-transparent has-data-disabled:border-ppx-neutral-3 has-data-disabled:bg-ppx-neutral-3 has-data-disabled:text-ppx-neutral-11 has-data-disabled:cursor-not-allowed", {
|
|
896
|
+
variants: {
|
|
897
|
+
size: {
|
|
898
|
+
default: "rounded-input min-h-input",
|
|
899
|
+
sm: "rounded-input-s min-h-input-s"
|
|
900
|
+
},
|
|
901
|
+
widthVariant: {
|
|
902
|
+
enforced: "min-w-input w-[var(--min-width-input)]",
|
|
903
|
+
full: "min-w-0 w-full"
|
|
904
|
+
}
|
|
905
|
+
},
|
|
906
|
+
defaultVariants: {
|
|
907
|
+
size: "default",
|
|
908
|
+
widthVariant: "enforced"
|
|
909
|
+
}
|
|
910
|
+
});
|
|
911
|
+
function ChipsTrigger({ size, widthVariant, ...props }) {
|
|
912
|
+
const { chipsTriggerRef, isLoading, invalid } = useComboboxContext();
|
|
913
|
+
return /* @__PURE__ */ jsxs(Combobox.Chips, {
|
|
914
|
+
className: cn(chipsTriggerVariants({
|
|
915
|
+
size,
|
|
916
|
+
widthVariant
|
|
917
|
+
}), props.className),
|
|
918
|
+
"aria-invalid": invalid ?? void 0,
|
|
919
|
+
ref: chipsTriggerRef,
|
|
920
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
921
|
+
className: "flex flex-1 flex-wrap items-center gap-1",
|
|
922
|
+
children: /* @__PURE__ */ jsx(Combobox.Value, { children: (value) => /* @__PURE__ */ jsxs(Fragment, { children: [value.map((item) => {
|
|
923
|
+
return typeof props.children === "function" ? props.children(item) : props.children;
|
|
924
|
+
}), /* @__PURE__ */ jsx(Combobox.Input, {
|
|
925
|
+
placeholder: value.length > 0 ? "" : props.placeholder,
|
|
926
|
+
className: "text-ppx-sm text-ppx-foreground min-w-12 flex-1 border-0 outline-none"
|
|
927
|
+
})] }) })
|
|
928
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
929
|
+
className: "h-stretch-available text-ppx-muted-foreground flex items-center gap-2",
|
|
930
|
+
children: [isLoading && /* @__PURE__ */ jsx(LoadingIndicator, {}), /* @__PURE__ */ jsx(Combobox.Trigger, {
|
|
931
|
+
className: "h-full",
|
|
932
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
933
|
+
})]
|
|
934
|
+
})]
|
|
935
|
+
});
|
|
936
|
+
}
|
|
937
|
+
function Chip(props) {
|
|
938
|
+
return /* @__PURE__ */ jsxs(Combobox.Chip, {
|
|
939
|
+
...props,
|
|
940
|
+
className: cn("bg-ppx-neutral-3 text-ppx-foreground flex cursor-default items-center gap-1 rounded-full py-[0.2rem] pl-2 pr-1 text-sm outline-none", props.className),
|
|
941
|
+
children: [props.children, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
|
|
942
|
+
className: "hover:border-ppx-neutral-4 hover:bg-ppx-neutral-5 hover:text-ppx-background active:bg-ppx-neutral-6 flex size-5 shrink-0 items-center justify-center rounded-full border border-transparent text-inherit",
|
|
943
|
+
"aria-label": "Remove",
|
|
944
|
+
children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3" })
|
|
945
|
+
})]
|
|
946
|
+
});
|
|
947
|
+
}
|
|
948
|
+
function Search({ placeholder = "Search options", ...props }) {
|
|
949
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
950
|
+
className: "border-ppx-neutral-7 bg-ppx-background p-input sticky top-0 z-10 flex items-center justify-between gap-2 border-b-[0.75px]",
|
|
951
|
+
children: [/* @__PURE__ */ jsx(Combobox.Input, {
|
|
952
|
+
placeholder,
|
|
953
|
+
className: "placeholder:text-ppx-neutral-7 flex-1 text-sm focus:outline-none",
|
|
954
|
+
"data-popup-search": true,
|
|
955
|
+
...props
|
|
956
|
+
}), /* @__PURE__ */ jsx(SearchIcon, { className: "text-ppx-neutral-10 size-3.5" })]
|
|
957
|
+
});
|
|
958
|
+
}
|
|
959
|
+
function useComboboxContext() {
|
|
960
|
+
return React$1.useContext(ComboboxContext);
|
|
961
|
+
}
|
|
962
|
+
const BaseCombobox = Combobox;
|
|
963
|
+
|
|
964
|
+
//#endregion
|
|
965
|
+
//#region src/components/select.tsx
|
|
966
|
+
var select_exports = /* @__PURE__ */ __export({
|
|
967
|
+
BaseSelect: () => BaseSelect,
|
|
968
|
+
Content: () => Content$3,
|
|
969
|
+
Item: () => Item$5,
|
|
970
|
+
List: () => List$1,
|
|
971
|
+
MultiItem: () => MultiItem,
|
|
972
|
+
MultiSelectedValue: () => MultiSelectedValue,
|
|
973
|
+
Root: () => Root$5,
|
|
974
|
+
Trigger: () => Trigger$3,
|
|
975
|
+
Value: () => Value$1
|
|
976
|
+
});
|
|
977
|
+
const SelectContext = React$1.createContext({});
|
|
978
|
+
function useSelectContext() {
|
|
979
|
+
return React$1.useContext(SelectContext);
|
|
980
|
+
}
|
|
981
|
+
function Root$5({ children, invalid, ...props }) {
|
|
982
|
+
const value = React$1.useMemo(() => ({ invalid }), [invalid]);
|
|
983
|
+
return /* @__PURE__ */ jsx(SelectContext.Provider, {
|
|
984
|
+
value,
|
|
985
|
+
children: /* @__PURE__ */ jsx(Select.Root, {
|
|
986
|
+
...props,
|
|
987
|
+
children
|
|
988
|
+
})
|
|
989
|
+
});
|
|
990
|
+
}
|
|
991
|
+
function Content$3({ portalProps, positionerProps, popupProps, children, widthVariant = "trigger" }) {
|
|
992
|
+
return /* @__PURE__ */ jsx(Select.Portal, {
|
|
993
|
+
...portalProps,
|
|
994
|
+
children: /* @__PURE__ */ jsx(Select.Positioner, {
|
|
995
|
+
sideOffset: 6,
|
|
996
|
+
...positionerProps,
|
|
997
|
+
className: cn(DROPDOWN_POSITIONER_CN, positionerProps?.className),
|
|
998
|
+
alignItemWithTrigger: false,
|
|
999
|
+
children: /* @__PURE__ */ jsx(Select.Popup, {
|
|
1000
|
+
className: cn(DROPDOWN_POPUP_CN, "py-1", widthVariant === "trigger" ? "w-[var(--anchor-width)]" : widthVariant === "fit" ? "w-fit" : widthVariant === "enforced" ? "w-[var(--min-width-input)]" : "", popupProps?.className),
|
|
1001
|
+
...popupProps,
|
|
1002
|
+
children
|
|
1003
|
+
})
|
|
1004
|
+
})
|
|
1005
|
+
});
|
|
1006
|
+
}
|
|
1007
|
+
const List$1 = Select.List;
|
|
1008
|
+
function Item$5({ className, ...props }) {
|
|
1009
|
+
return /* @__PURE__ */ jsx(Select.Item, {
|
|
1010
|
+
className: cn(DROPDOWN_ITEM_CN, className),
|
|
1011
|
+
...props,
|
|
1012
|
+
children: /* @__PURE__ */ jsx(Select.ItemText, { children: props.children })
|
|
1013
|
+
});
|
|
1014
|
+
}
|
|
1015
|
+
function MultiItem({ className, ...props }) {
|
|
1016
|
+
return /* @__PURE__ */ jsx(Select.Item, {
|
|
1017
|
+
...props,
|
|
1018
|
+
render: (itemProps, state) => /* @__PURE__ */ jsxs("div", {
|
|
1019
|
+
...itemProps,
|
|
1020
|
+
className: cn(DROPDOWN_ITEM_CN, className),
|
|
1021
|
+
children: [/* @__PURE__ */ jsx(ItemIndicator, { selected: state.selected }), /* @__PURE__ */ jsx(Select.ItemText, { children: props.children })]
|
|
1022
|
+
})
|
|
1023
|
+
});
|
|
1024
|
+
}
|
|
1025
|
+
function ItemIndicator(props) {
|
|
1026
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1027
|
+
className: cn("border-ppx-neutral-10 peer flex size-4 shrink-0 items-center justify-center rounded-sm border bg-white outline-none transition-colors duration-150", props.selected && "border-ppx-primary-5 bg-ppx-primary-5 text-white"),
|
|
1028
|
+
children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
1029
|
+
});
|
|
1030
|
+
}
|
|
1031
|
+
function Trigger$3({ size, widthVariant, ...props }) {
|
|
1032
|
+
const { invalid } = useSelectContext();
|
|
1033
|
+
return /* @__PURE__ */ jsxs(Select.Trigger, {
|
|
1034
|
+
"aria-label": "Open popup",
|
|
1035
|
+
className: cn(triggerVariants({
|
|
1036
|
+
size,
|
|
1037
|
+
widthVariant
|
|
1038
|
+
}), props.className),
|
|
1039
|
+
"aria-invalid": invalid ?? void 0,
|
|
1040
|
+
children: [props.children, /* @__PURE__ */ jsx(Select.Icon, {
|
|
1041
|
+
className: "shrink-0",
|
|
1042
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
1043
|
+
})]
|
|
1044
|
+
});
|
|
1045
|
+
}
|
|
1046
|
+
function MultiSelectedValue({ selectedValue, maxItems }) {
|
|
1047
|
+
if (!selectedValue || Array.isArray(selectedValue) && selectedValue.length === 0) return null;
|
|
1048
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1049
|
+
className: "flex items-center gap-1",
|
|
1050
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
1051
|
+
className: "truncate",
|
|
1052
|
+
children: selectedValue.slice(0, maxItems).join(", ")
|
|
1053
|
+
}), selectedValue.length > maxItems && /* @__PURE__ */ jsx("span", {
|
|
1054
|
+
className: "truncate",
|
|
1055
|
+
children: `(+${selectedValue.length - maxItems})`
|
|
1056
|
+
})]
|
|
1057
|
+
});
|
|
1058
|
+
}
|
|
1059
|
+
/**
|
|
1060
|
+
* Renders the value, if `value` is a string or an object with `label` property in it,
|
|
1061
|
+
* then renders that value else you should provide a render function to render your custom value
|
|
1062
|
+
* **/
|
|
1063
|
+
function Value$1({ children, className, placeholder, ...props }) {
|
|
1064
|
+
return /* @__PURE__ */ jsx(Select.Value, {
|
|
1065
|
+
className: cn("text-ppx-sm truncate", className),
|
|
1066
|
+
...props,
|
|
1067
|
+
children: (value) => {
|
|
1068
|
+
if (value == null && placeholder) return placeholder;
|
|
1069
|
+
if (children) return typeof children === "function" ? children(value) : children;
|
|
1070
|
+
if (value && typeof value === "object" && "label" in value) return value.label;
|
|
1071
|
+
return value;
|
|
1072
|
+
}
|
|
1073
|
+
});
|
|
1074
|
+
}
|
|
1075
|
+
const BaseSelect = Select;
|
|
1076
|
+
|
|
1077
|
+
//#endregion
|
|
1078
|
+
//#region src/components/menu.tsx
|
|
1079
|
+
var menu_exports = /* @__PURE__ */ __export({
|
|
1080
|
+
BaseMenu: () => BaseMenu,
|
|
1081
|
+
BaseTrigger: () => BaseTrigger,
|
|
1082
|
+
Content: () => Content$2,
|
|
1083
|
+
DropdownIndicator: () => DropdownIndicator,
|
|
1084
|
+
Group: () => Group$3,
|
|
1085
|
+
GroupLabel: () => GroupLabel,
|
|
1086
|
+
Item: () => Item$4,
|
|
1087
|
+
RadioGroup: () => RadioGroup$1,
|
|
1088
|
+
RadioItem: () => RadioItem,
|
|
1089
|
+
Root: () => Root$4,
|
|
1090
|
+
Separator: () => Separator$1,
|
|
1091
|
+
Trigger: () => Trigger$2
|
|
1092
|
+
});
|
|
1093
|
+
const Root$4 = Menu.Root;
|
|
1094
|
+
function Trigger$2({ className, children, size, widthVariant = "fit", ...props }) {
|
|
1095
|
+
return /* @__PURE__ */ jsxs(Menu.Trigger, {
|
|
1096
|
+
className: cn(triggerVariants({
|
|
1097
|
+
size,
|
|
1098
|
+
widthVariant
|
|
1099
|
+
}), className),
|
|
1100
|
+
...props,
|
|
1101
|
+
children: [children, /* @__PURE__ */ jsx(DropdownIndicator, {})]
|
|
1102
|
+
});
|
|
1103
|
+
}
|
|
1104
|
+
function Content$2({ portalProps, positionerProps, popupProps, children, widthVariant = "fit" }) {
|
|
1105
|
+
return /* @__PURE__ */ jsx(Menu.Portal, {
|
|
1106
|
+
...portalProps,
|
|
1107
|
+
children: /* @__PURE__ */ jsx(Menu.Positioner, {
|
|
1108
|
+
sideOffset: 6,
|
|
1109
|
+
align: "start",
|
|
1110
|
+
...positionerProps,
|
|
1111
|
+
className: cn(DROPDOWN_POSITIONER_CN, positionerProps?.className),
|
|
1112
|
+
children: /* @__PURE__ */ jsx(Menu.Popup, {
|
|
1113
|
+
...popupProps,
|
|
1114
|
+
className: cn(DROPDOWN_POPUP_CN, "py-1", widthVariant === "trigger" ? "w-[var(--anchor-width)]" : widthVariant === "fit" ? "w-fit" : widthVariant === "enforced" ? "w-[var(--min-width-input)]" : "", popupProps?.className),
|
|
1115
|
+
children
|
|
1116
|
+
})
|
|
1117
|
+
})
|
|
1118
|
+
});
|
|
1119
|
+
}
|
|
1120
|
+
function DropdownIndicator() {
|
|
1121
|
+
return /* @__PURE__ */ jsx(ChevronDownIcon, { className: "data-popup-open:rotate-180" });
|
|
1122
|
+
}
|
|
1123
|
+
function Item$4({ className, children, ...props }) {
|
|
1124
|
+
return /* @__PURE__ */ jsx(Menu.Item, {
|
|
1125
|
+
className: cn(DROPDOWN_ITEM_CN, className),
|
|
1126
|
+
...props,
|
|
1127
|
+
children
|
|
1128
|
+
});
|
|
1129
|
+
}
|
|
1130
|
+
function Separator$1({ className, ...props }) {
|
|
1131
|
+
return /* @__PURE__ */ jsx(Menu.Separator, {
|
|
1132
|
+
className: cn("bg-ppx-neutral-5 mx-2 my-1.5 h-px", className),
|
|
1133
|
+
...props
|
|
1134
|
+
});
|
|
1135
|
+
}
|
|
1136
|
+
const Group$3 = Menu.Group;
|
|
1137
|
+
function GroupLabel({ className, ...props }) {
|
|
1138
|
+
return /* @__PURE__ */ jsx(Menu.GroupLabel, {
|
|
1139
|
+
className: cn("font-sans-sb text-ppx-sm text-ppx-muted-foreground cursor-default select-none px-4 py-2 uppercase leading-4", className),
|
|
1140
|
+
...props
|
|
1141
|
+
});
|
|
1142
|
+
}
|
|
1143
|
+
const RadioGroup$1 = Menu.RadioGroup;
|
|
1144
|
+
function RadioItem({ className, ...props }) {
|
|
1145
|
+
return /* @__PURE__ */ jsx(Menu.RadioItem, {
|
|
1146
|
+
className: cn(DROPDOWN_ITEM_CN, className),
|
|
1147
|
+
closeOnClick: true,
|
|
1148
|
+
...props
|
|
1149
|
+
});
|
|
1150
|
+
}
|
|
1151
|
+
const BaseTrigger = Menu.Trigger;
|
|
1152
|
+
const BaseMenu = Menu;
|
|
1153
|
+
|
|
1154
|
+
//#endregion
|
|
1155
|
+
//#region src/components/progress.tsx
|
|
1156
|
+
var progress_exports = /* @__PURE__ */ __export({
|
|
1157
|
+
BaseProgress: () => BaseProgress,
|
|
1158
|
+
Indicator: () => Indicator$1,
|
|
1159
|
+
Label: () => Label$1,
|
|
1160
|
+
Root: () => Root$3,
|
|
1161
|
+
Track: () => Track,
|
|
1162
|
+
Value: () => Value
|
|
1163
|
+
});
|
|
1164
|
+
const progressTrackVariants = cva("relative h-2 w-full overflow-hidden rounded-full bg-ppx-neutral-3", {
|
|
1165
|
+
variants: { size: {
|
|
1166
|
+
default: "h-2",
|
|
1167
|
+
sm: "h-1.5",
|
|
1168
|
+
lg: "h-3"
|
|
1169
|
+
} },
|
|
1170
|
+
defaultVariants: { size: "default" }
|
|
1171
|
+
});
|
|
1172
|
+
const Root$3 = Progress.Root;
|
|
1173
|
+
function Track({ className, size, children, ...props }) {
|
|
1174
|
+
return /* @__PURE__ */ jsx(Progress.Track, {
|
|
1175
|
+
className: cn(progressTrackVariants({ size }), className),
|
|
1176
|
+
...props,
|
|
1177
|
+
children
|
|
1178
|
+
});
|
|
1179
|
+
}
|
|
1180
|
+
function Indicator$1({ className, ...props }) {
|
|
1181
|
+
return /* @__PURE__ */ jsx(Progress.Indicator, {
|
|
1182
|
+
className: cn("bg-ppx-primary-b-5 h-full w-full flex-1 transition-all duration-300 ease-in-out", className),
|
|
1183
|
+
...props
|
|
1184
|
+
});
|
|
1185
|
+
}
|
|
1186
|
+
function Label$1({ className, ...props }) {
|
|
1187
|
+
return /* @__PURE__ */ jsx(Progress.Label, {
|
|
1188
|
+
className: cn("text-ppx-sm text-ppx-foreground font-medium", className),
|
|
1189
|
+
...props
|
|
1190
|
+
});
|
|
1191
|
+
}
|
|
1192
|
+
function Value({ className, ...props }) {
|
|
1193
|
+
return /* @__PURE__ */ jsx(Progress.Value, {
|
|
1194
|
+
className: cn("text-ppx-h4 font-sans-b text-ppx-primary-b-5 flex-shrink-0", className),
|
|
1195
|
+
...props
|
|
1196
|
+
});
|
|
1197
|
+
}
|
|
1198
|
+
const BaseProgress = Progress;
|
|
1199
|
+
|
|
1200
|
+
//#endregion
|
|
1201
|
+
//#region src/components/segmented-control.tsx
|
|
1202
|
+
var segmented_control_exports = /* @__PURE__ */ __export({
|
|
1203
|
+
Item: () => Item$3,
|
|
1204
|
+
Root: () => Root$2
|
|
1205
|
+
});
|
|
1206
|
+
const segmentedControlItemVariants = cva("relative flex items-center justify-center px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out cursor-pointer rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ppx-primary-5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
|
|
1207
|
+
variants: {
|
|
1208
|
+
variant: { default: "text-ppx-neutral-11 data-checked:bg-ppx-primary-5 data-checked:text-white data-checked:shadow-sm hover:text-ppx-neutral-12" },
|
|
1209
|
+
size: {
|
|
1210
|
+
default: "min-h-10 px-6",
|
|
1211
|
+
sm: "min-h-8 px-4 text-xs",
|
|
1212
|
+
lg: "min-h-12 px-8"
|
|
1213
|
+
}
|
|
1214
|
+
},
|
|
1215
|
+
defaultVariants: {
|
|
1216
|
+
variant: "default",
|
|
1217
|
+
size: "default"
|
|
1218
|
+
}
|
|
1219
|
+
});
|
|
1220
|
+
function Root$2({ className, ...props }) {
|
|
1221
|
+
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
1222
|
+
"data-slot": "segmented-control",
|
|
1223
|
+
className: cn("p-1 inline-flex items-center rounded-full bg-ppx-neutral-3", className),
|
|
1224
|
+
...props
|
|
1225
|
+
});
|
|
1226
|
+
}
|
|
1227
|
+
function Item$3({ children, className, variant, size, ...props }) {
|
|
1228
|
+
return /* @__PURE__ */ jsx(Radio.Root, {
|
|
1229
|
+
"data-slot": "segmented-control-item",
|
|
1230
|
+
className: cn(segmentedControlItemVariants({
|
|
1231
|
+
variant,
|
|
1232
|
+
size,
|
|
1233
|
+
className
|
|
1234
|
+
})),
|
|
1235
|
+
...props,
|
|
1236
|
+
children
|
|
1237
|
+
});
|
|
1238
|
+
}
|
|
1239
|
+
|
|
1240
|
+
//#endregion
|
|
1241
|
+
//#region src/components/tabs.tsx
|
|
1242
|
+
var tabs_exports = /* @__PURE__ */ __export({
|
|
1243
|
+
Content: () => Content$1,
|
|
1244
|
+
List: () => List,
|
|
1245
|
+
Root: () => Root$1,
|
|
1246
|
+
Trigger: () => Trigger$1
|
|
1247
|
+
});
|
|
1248
|
+
const TabsContext = React$1.createContext(null);
|
|
1249
|
+
const useTabs = () => {
|
|
1250
|
+
const context = React$1.useContext(TabsContext);
|
|
1251
|
+
if (!context) throw new Error("useTabs must be used within a Tabs");
|
|
1252
|
+
return context;
|
|
1253
|
+
};
|
|
1254
|
+
function Root$1({ variant = "underline", className, ...props }) {
|
|
1255
|
+
return /* @__PURE__ */ jsx(TabsContext.Provider, {
|
|
1256
|
+
value: { variant },
|
|
1257
|
+
children: /* @__PURE__ */ jsx(Tabs.Root, {
|
|
1258
|
+
"data-slot": "tabs",
|
|
1259
|
+
className: cn("gap-2 flex flex-col", className),
|
|
1260
|
+
...props
|
|
1261
|
+
})
|
|
1262
|
+
});
|
|
1263
|
+
}
|
|
1264
|
+
function List({ className, children, ...props }) {
|
|
1265
|
+
return /* @__PURE__ */ jsxs(Tabs.List, {
|
|
1266
|
+
"data-slot": "tabs-list",
|
|
1267
|
+
className: cn("text-muted-foreground h-9 gap-x-1 p-1 relative z-0 inline-flex w-fit items-center justify-center", className),
|
|
1268
|
+
...props,
|
|
1269
|
+
children: [
|
|
1270
|
+
children,
|
|
1271
|
+
/* @__PURE__ */ jsx(Indicator, {}),
|
|
1272
|
+
/* @__PURE__ */ jsx("div", { className: "absolute top-[calc(100%-1px)] left-1/2 z-2 h-[2px] w-[calc(100%-8px)] -translate-x-1/2 bg-[#EFEFEF]" })
|
|
1273
|
+
]
|
|
1274
|
+
});
|
|
1275
|
+
}
|
|
1276
|
+
function Trigger$1({ className, ...props }) {
|
|
1277
|
+
return /* @__PURE__ */ jsx(Tabs.Tab, {
|
|
1278
|
+
"data-slot": "tabs-trigger",
|
|
1279
|
+
className: cn("focus-visible:ring-ring/50 [&_svg:not([class*='size-'])] gap-1.5 px-2 py-1 text-sm font-medium z-[1] flex-1 items-center justify-center text-nowrap whitespace-nowrap text-ppx-neutral-18 not-data-selected:hover:text-ppx-neutral-12 focus-visible:ring-[3px] data-selected:text-ppx-primary-b-5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
|
|
1280
|
+
...props
|
|
1281
|
+
});
|
|
1282
|
+
}
|
|
1283
|
+
function Indicator({ className, ...props }) {
|
|
1284
|
+
const { variant } = useTabs();
|
|
1285
|
+
return /* @__PURE__ */ jsx(Tabs.Indicator, {
|
|
1286
|
+
"data-slot": "tab-indicator",
|
|
1287
|
+
className: cn("left-0 ease-in-out absolute w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-1/2 transition-all duration-300", variant === "underline" ? "top-full z-10 h-[2px] bg-ppx-primary-b-5" : "", className),
|
|
1288
|
+
...props
|
|
1289
|
+
});
|
|
1290
|
+
}
|
|
1291
|
+
function Content$1({ className, ...props }) {
|
|
1292
|
+
return /* @__PURE__ */ jsx(Tabs.Panel, {
|
|
1293
|
+
"data-slot": "tabs-content",
|
|
1294
|
+
className: cn("flex-1 outline-none", className),
|
|
1295
|
+
...props
|
|
1296
|
+
});
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1299
|
+
//#endregion
|
|
1300
|
+
//#region src/components/tooltip.tsx
|
|
1301
|
+
var tooltip_exports = /* @__PURE__ */ __export({
|
|
1302
|
+
BaseProvider: () => BaseProvider,
|
|
1303
|
+
BaseRoot: () => BaseRoot,
|
|
1304
|
+
Content: () => Content,
|
|
1305
|
+
Root: () => Root,
|
|
1306
|
+
Trigger: () => Trigger
|
|
1307
|
+
});
|
|
1308
|
+
function TooltipProvider(props) {
|
|
1309
|
+
return /* @__PURE__ */ jsx(Tooltip.Provider, {
|
|
1310
|
+
"data-slot": "tooltip-provider",
|
|
1311
|
+
...props
|
|
1312
|
+
});
|
|
1313
|
+
}
|
|
1314
|
+
function TooltipPortal({ ...props }) {
|
|
1315
|
+
return /* @__PURE__ */ jsx(Tooltip.Portal, {
|
|
1316
|
+
"data-slot": "tooltip-portal",
|
|
1317
|
+
...props
|
|
1318
|
+
});
|
|
1319
|
+
}
|
|
1320
|
+
function TooltipPositioner({ ...props }) {
|
|
1321
|
+
return /* @__PURE__ */ jsx(Tooltip.Positioner, {
|
|
1322
|
+
"data-slot": "tooltip-positioner",
|
|
1323
|
+
...props
|
|
1324
|
+
});
|
|
1325
|
+
}
|
|
1326
|
+
function TooltipArrow({ ...props }) {
|
|
1327
|
+
return /* @__PURE__ */ jsx(Tooltip.Arrow, {
|
|
1328
|
+
"data-slot": "tooltip-arrow",
|
|
1329
|
+
...props
|
|
1330
|
+
});
|
|
1331
|
+
}
|
|
1332
|
+
function Root({ ...props }) {
|
|
1333
|
+
return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip.Root, {
|
|
1334
|
+
"data-slot": "tooltip",
|
|
1335
|
+
...props
|
|
1336
|
+
}) });
|
|
1337
|
+
}
|
|
1338
|
+
const BaseRoot = Tooltip.Root;
|
|
1339
|
+
const BaseProvider = Tooltip.Provider;
|
|
1340
|
+
function Trigger({ ...props }) {
|
|
1341
|
+
return /* @__PURE__ */ jsx(Tooltip.Trigger, {
|
|
1342
|
+
"data-slot": "tooltip-trigger",
|
|
1343
|
+
...props
|
|
1344
|
+
});
|
|
1345
|
+
}
|
|
1346
|
+
function Content({ className, align = "center", sideOffset = 8, side = "top", children, ...props }) {
|
|
1347
|
+
return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
|
|
1348
|
+
sideOffset,
|
|
1349
|
+
align,
|
|
1350
|
+
side,
|
|
1351
|
+
children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
|
|
1352
|
+
"data-slot": "tooltip-content",
|
|
1353
|
+
className: cn("bg-black text-white px-3 py-1.5 shadow-sm rounded-md z-50 w-fit origin-[var(--transform-origin)] text-ppx-sm text-balance transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0", className),
|
|
1354
|
+
...props,
|
|
1355
|
+
children: [children, /* @__PURE__ */ jsx(TooltipArrow, {
|
|
1356
|
+
className: "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
|
|
1357
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
1358
|
+
width: "20",
|
|
1359
|
+
height: "10",
|
|
1360
|
+
viewBox: "0 0 20 10",
|
|
1361
|
+
fill: "none",
|
|
1362
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
1363
|
+
d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
|
|
1364
|
+
className: "fill-black"
|
|
1365
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
1366
|
+
d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
|
|
1367
|
+
className: "fill-black"
|
|
1368
|
+
})]
|
|
1369
|
+
})
|
|
1370
|
+
})]
|
|
1371
|
+
})
|
|
1372
|
+
}) });
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
//#endregion
|
|
1376
|
+
//#region src/components/checkbox.tsx
|
|
1377
|
+
const checkboxVariants = cva("peer aria-invalid:border-ppx-red-5 aria-invalid:text-shadow-ppx-red-5 flex items-center justify-center rounded-sm border transition-colors duration-150 outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", {
|
|
1378
|
+
variants: {
|
|
1379
|
+
variant: { default: "bg-white data-checked:bg-ppx-primary-5 data-[indeterminate]:bg-ppx-primary-5 data-checked:text-white data-[indeterminate]:text-white border-ppx-neutral-10 data-checked:border-ppx-primary-5 data-[indeterminate]:border-ppx-primary-5" },
|
|
1380
|
+
size: {
|
|
1381
|
+
default: "size-5",
|
|
1382
|
+
sm: "size-4",
|
|
1383
|
+
lg: "size-6"
|
|
1384
|
+
}
|
|
1385
|
+
},
|
|
1386
|
+
defaultVariants: {
|
|
1387
|
+
variant: "default",
|
|
1388
|
+
size: "default"
|
|
1389
|
+
}
|
|
1390
|
+
});
|
|
1391
|
+
function Checkbox({ className, ...props }) {
|
|
1392
|
+
return /* @__PURE__ */ jsx(Checkbox$1.Root, {
|
|
1393
|
+
"data-slot": "checkbox",
|
|
1394
|
+
className: cn(checkboxVariants({
|
|
1395
|
+
variant: props.variant,
|
|
1396
|
+
size: props.size
|
|
1397
|
+
}), className),
|
|
1398
|
+
...props,
|
|
1399
|
+
children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
|
|
1400
|
+
"data-slot": "checkbox-indicator",
|
|
1401
|
+
className: "block data-[unchecked]:hidden",
|
|
1402
|
+
children: props.indeterminate ? /* @__PURE__ */ jsx("svg", {
|
|
1403
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1404
|
+
width: "24",
|
|
1405
|
+
height: "24",
|
|
1406
|
+
viewBox: "0 0 24 24",
|
|
1407
|
+
fill: "none",
|
|
1408
|
+
stroke: "currentColor",
|
|
1409
|
+
strokeWidth: "2",
|
|
1410
|
+
strokeLinecap: "round",
|
|
1411
|
+
strokeLinejoin: "round",
|
|
1412
|
+
className: "size-3.5",
|
|
1413
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
|
|
1414
|
+
}) : /* @__PURE__ */ jsx("svg", {
|
|
1415
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1416
|
+
width: "24",
|
|
1417
|
+
height: "24",
|
|
1418
|
+
viewBox: "0 0 24 24",
|
|
1419
|
+
fill: "none",
|
|
1420
|
+
stroke: "currentColor",
|
|
1421
|
+
strokeWidth: "2",
|
|
1422
|
+
strokeLinecap: "round",
|
|
1423
|
+
strokeLinejoin: "round",
|
|
1424
|
+
className: "size-3.5",
|
|
1425
|
+
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
1426
|
+
})
|
|
1427
|
+
})
|
|
1428
|
+
});
|
|
1429
|
+
}
|
|
1430
|
+
|
|
1431
|
+
//#endregion
|
|
1432
|
+
//#region src/components/block-checkbox-group.tsx
|
|
1433
|
+
var block_checkbox_group_exports = /* @__PURE__ */ __export({
|
|
1434
|
+
Description: () => Description$1,
|
|
1435
|
+
Group: () => Group$2,
|
|
1436
|
+
Header: () => Header$1,
|
|
1437
|
+
Item: () => Item$2,
|
|
1438
|
+
Title: () => Title$1
|
|
1439
|
+
});
|
|
1440
|
+
function Group$2({ className, ...props }) {
|
|
1441
|
+
return /* @__PURE__ */ jsx(CheckboxGroup, {
|
|
1442
|
+
className: cn("gap-4 flex", className),
|
|
1443
|
+
...props
|
|
1444
|
+
});
|
|
1445
|
+
}
|
|
1446
|
+
function Item$2({ className, invalid, children, ...rest }) {
|
|
1447
|
+
return /* @__PURE__ */ jsxs("label", {
|
|
1448
|
+
className: cn("gap-2 p-5 flex min-h-[155px] justify-between rounded-ppx-s border-2 border-ppx-neutral-3 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300 has-not-disabled:hover:border-ppx-neutral-6 has-disabled:cursor-not-allowed has-disabled:opacity-60 has-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5!", className),
|
|
1449
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
1450
|
+
className: "flex-1",
|
|
1451
|
+
children
|
|
1452
|
+
}), /* @__PURE__ */ jsx(Checkbox, {
|
|
1453
|
+
...rest,
|
|
1454
|
+
className: "ml-auto shrink-0 self-start",
|
|
1455
|
+
size: "lg",
|
|
1456
|
+
"aria-invalid": invalid
|
|
1457
|
+
})]
|
|
1458
|
+
});
|
|
1459
|
+
}
|
|
1460
|
+
function Header$1(props) {
|
|
1461
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1462
|
+
className: cn("mb-5 gap-2 flex items-center", props.className),
|
|
1463
|
+
children: props.children
|
|
1464
|
+
});
|
|
1465
|
+
}
|
|
1466
|
+
function Title$1(props) {
|
|
1467
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1468
|
+
className: cn("font-sans-sb text-ppx-base text-ppx-foreground", props.className),
|
|
1469
|
+
children: props.children
|
|
1470
|
+
});
|
|
1471
|
+
}
|
|
1472
|
+
function Description$1(props) {
|
|
1473
|
+
return /* @__PURE__ */ jsx("p", {
|
|
1474
|
+
className: cn("mb-5 text-ppx-sm text-ppx-muted-foreground", props.className),
|
|
1475
|
+
children: props.children
|
|
1476
|
+
});
|
|
1477
|
+
}
|
|
1478
|
+
|
|
1479
|
+
//#endregion
|
|
1480
|
+
//#region src/components/radio-group.tsx
|
|
1481
|
+
function Group({ className, ...props }) {
|
|
1482
|
+
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
1483
|
+
"data-slot": "radio-group",
|
|
1484
|
+
className: cn("flex flex-col gap-3", className),
|
|
1485
|
+
...props
|
|
1486
|
+
});
|
|
1487
|
+
}
|
|
1488
|
+
const radioVariants = cva("bg-white aria-invalid:border-ppx-red-5 aspect-square shrink-0 rounded-full border border-ppx-neutral-10 shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 ", {
|
|
1489
|
+
variants: {
|
|
1490
|
+
variant: { default: "data-checked:border-ppx-primary-5 text-ppx-primary-5" },
|
|
1491
|
+
size: {
|
|
1492
|
+
default: "size-5",
|
|
1493
|
+
sm: "size-4",
|
|
1494
|
+
lg: "size-6"
|
|
1495
|
+
}
|
|
1496
|
+
},
|
|
1497
|
+
defaultVariants: {
|
|
1498
|
+
variant: "default",
|
|
1499
|
+
size: "default"
|
|
1500
|
+
}
|
|
1501
|
+
});
|
|
1502
|
+
function Item({ className, variant, size, ...props }) {
|
|
1503
|
+
return /* @__PURE__ */ jsx(Radio.Root, {
|
|
1504
|
+
"data-slot": "radio-group-item",
|
|
1505
|
+
className: cn(radioVariants({
|
|
1506
|
+
variant,
|
|
1507
|
+
size,
|
|
1508
|
+
className
|
|
1509
|
+
})),
|
|
1510
|
+
...props,
|
|
1511
|
+
children: /* @__PURE__ */ jsx(Radio.Indicator, {
|
|
1512
|
+
"data-slot": "radio-group-indicator",
|
|
1513
|
+
className: "relative flex items-center justify-center",
|
|
1514
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
1515
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1516
|
+
width: "24",
|
|
1517
|
+
height: "24",
|
|
1518
|
+
viewBox: "0 0 24 24",
|
|
1519
|
+
fill: "currentColor",
|
|
1520
|
+
stroke: "currentColor",
|
|
1521
|
+
strokeWidth: "2",
|
|
1522
|
+
strokeLinecap: "round",
|
|
1523
|
+
strokeLinejoin: "round",
|
|
1524
|
+
className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", size === "sm" && "size-2", size === void 0 && "size-3", size === "lg" && "size-3.5"),
|
|
1525
|
+
children: /* @__PURE__ */ jsx("circle", {
|
|
1526
|
+
cx: "12",
|
|
1527
|
+
cy: "12",
|
|
1528
|
+
r: "10"
|
|
1529
|
+
})
|
|
1530
|
+
})
|
|
1531
|
+
})
|
|
1532
|
+
});
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
//#endregion
|
|
1536
|
+
//#region src/components/block-radio-group.tsx
|
|
1537
|
+
var block_radio_group_exports = /* @__PURE__ */ __export({
|
|
1538
|
+
Description: () => Description,
|
|
1539
|
+
Group: () => Group$1,
|
|
1540
|
+
Header: () => Header,
|
|
1541
|
+
Item: () => Item$1,
|
|
1542
|
+
Title: () => Title
|
|
1543
|
+
});
|
|
1544
|
+
function Group$1({ className, ...props }) {
|
|
1545
|
+
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
1546
|
+
"data-slot": "radio-group",
|
|
1547
|
+
className: cn("flex gap-4", className),
|
|
1548
|
+
...props
|
|
1549
|
+
});
|
|
1550
|
+
}
|
|
1551
|
+
function Item$1({ className, invalid, children, ...rest }) {
|
|
1552
|
+
return /* @__PURE__ */ jsxs("label", {
|
|
1553
|
+
className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-disabled:hover:border-ppx-neutral-6 has-disabled:cursor-not-allowed has-disabled:opacity-60 has-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
|
|
1554
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
1555
|
+
className: "flex-1",
|
|
1556
|
+
children
|
|
1557
|
+
}), /* @__PURE__ */ jsx(Item, {
|
|
1558
|
+
...rest,
|
|
1559
|
+
className: "ml-auto shrink-0 self-start",
|
|
1560
|
+
size: "lg",
|
|
1561
|
+
"aria-invalid": invalid
|
|
1562
|
+
})]
|
|
1563
|
+
});
|
|
1564
|
+
}
|
|
1565
|
+
function Header(props) {
|
|
1566
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1567
|
+
className: cn("mb-5 flex items-center gap-2", props.className),
|
|
1568
|
+
children: props.children
|
|
1569
|
+
});
|
|
1570
|
+
}
|
|
1571
|
+
function Title(props) {
|
|
1572
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1573
|
+
className: cn("font-sans-sb text-ppx-base text-ppx-foreground", props.className),
|
|
1574
|
+
children: props.children
|
|
1575
|
+
});
|
|
1576
|
+
}
|
|
1577
|
+
function Description(props) {
|
|
1578
|
+
return /* @__PURE__ */ jsx("p", {
|
|
1579
|
+
className: cn("text-ppx-sm text-ppx-muted-foreground mb-5", props.className),
|
|
1580
|
+
children: props.children
|
|
1581
|
+
});
|
|
1582
|
+
}
|
|
1583
|
+
|
|
1584
|
+
//#endregion
|
|
1585
|
+
//#region src/components/breadcrumbs.tsx
|
|
1586
|
+
var breadcrumbs_exports = /* @__PURE__ */ __export({
|
|
1587
|
+
Breadcrumb: () => Breadcrumb,
|
|
1588
|
+
BreadcrumbItem: () => BreadcrumbItem,
|
|
1589
|
+
BreadcrumbLink: () => BreadcrumbLink,
|
|
1590
|
+
BreadcrumbList: () => BreadcrumbList,
|
|
1591
|
+
BreadcrumbPage: () => BreadcrumbPage,
|
|
1592
|
+
BreadcrumbSeparator: () => BreadcrumbSeparator
|
|
1593
|
+
});
|
|
1594
|
+
function Breadcrumb({ ...props }) {
|
|
1595
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
1596
|
+
"aria-label": "breadcrumb",
|
|
1597
|
+
"data-slot": "breadcrumb",
|
|
1598
|
+
...props
|
|
1599
|
+
});
|
|
1600
|
+
}
|
|
1601
|
+
function BreadcrumbList({ className, ...props }) {
|
|
1602
|
+
return /* @__PURE__ */ jsx("ol", {
|
|
1603
|
+
"data-slot": "breadcrumb-list",
|
|
1604
|
+
className: cn("gap-1.5 ppx-sm:gap-2.5 flex flex-wrap items-center text-ppx-xs break-words text-ppx-muted-foreground", className),
|
|
1605
|
+
...props
|
|
1606
|
+
});
|
|
1607
|
+
}
|
|
1608
|
+
function BreadcrumbItem({ className, ...props }) {
|
|
1609
|
+
return /* @__PURE__ */ jsx("li", {
|
|
1610
|
+
"data-slot": "breadcrumb-item",
|
|
1611
|
+
className: cn("gap-1.5 inline-flex items-center", className),
|
|
1612
|
+
...props
|
|
1613
|
+
});
|
|
1614
|
+
}
|
|
1615
|
+
function BreadcrumbLink({ className, render, ...props }) {
|
|
1616
|
+
return useRender({
|
|
1617
|
+
defaultTagName: "a",
|
|
1618
|
+
render,
|
|
1619
|
+
props: mergeProps({ className: cn("transition-colors hover:text-ppx-foreground hover:underline underline-offset-3", className) }, props)
|
|
1620
|
+
});
|
|
1621
|
+
}
|
|
1622
|
+
function BreadcrumbPage({ className, ...props }) {
|
|
1623
|
+
return /* @__PURE__ */ jsx("span", {
|
|
1624
|
+
"data-slot": "breadcrumb-page",
|
|
1625
|
+
role: "link",
|
|
1626
|
+
"aria-disabled": "true",
|
|
1627
|
+
"aria-current": "page",
|
|
1628
|
+
className: cn(className),
|
|
1629
|
+
...props
|
|
1630
|
+
});
|
|
1631
|
+
}
|
|
1632
|
+
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
1633
|
+
return /* @__PURE__ */ jsx("li", {
|
|
1634
|
+
"data-slot": "breadcrumb-separator",
|
|
1635
|
+
role: "presentation",
|
|
1636
|
+
"aria-hidden": "true",
|
|
1637
|
+
className: cn("[&>svg]:size-3.5", className),
|
|
1638
|
+
...props,
|
|
1639
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("stroke-black rotate-270", className) })
|
|
1640
|
+
});
|
|
1641
|
+
}
|
|
1642
|
+
|
|
1643
|
+
//#endregion
|
|
1644
|
+
//#region src/components/calendar.tsx
|
|
1645
|
+
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", formatters, components, ...props }) {
|
|
1646
|
+
const defaultClassNames = getDefaultClassNames();
|
|
1647
|
+
const buttonVariant = "ghost";
|
|
1648
|
+
return /* @__PURE__ */ jsx(DayPicker, {
|
|
1649
|
+
showOutsideDays,
|
|
1650
|
+
className: cn("group/calendar bg-ppx-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
|
|
1651
|
+
captionLayout,
|
|
1652
|
+
formatters: {
|
|
1653
|
+
formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
|
|
1654
|
+
...formatters
|
|
1655
|
+
},
|
|
1656
|
+
classNames: {
|
|
1657
|
+
root: cn("w-fit min-w-input", defaultClassNames.root),
|
|
1658
|
+
months: cn("flex gap-4 flex-col ppx-md:flex-row relative", defaultClassNames.months),
|
|
1659
|
+
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
|
|
1660
|
+
nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
|
|
1661
|
+
button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous),
|
|
1662
|
+
button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
|
|
1663
|
+
month_caption: cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
|
|
1664
|
+
dropdowns: cn("w-full flex items-center text-ppx-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
|
|
1665
|
+
dropdown_root: cn("relative border border-ppx-neutral-5 shadow-xs rounded-ppx-s", defaultClassNames.dropdown_root),
|
|
1666
|
+
dropdown: cn("absolute bg-white inset-0 opacity-0", defaultClassNames.dropdown),
|
|
1667
|
+
caption_label: cn("select-none font-medium", captionLayout === "label" ? "text-sm" : "rounded-ppx-s pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-ppx-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label),
|
|
1668
|
+
table: "w-full border-collapse",
|
|
1669
|
+
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
1670
|
+
weekday: cn("text-ppx-muted-foreground rounded-ppx-s flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
|
|
1671
|
+
week: cn("flex w-full mt-2", defaultClassNames.week),
|
|
1672
|
+
week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
|
|
1673
|
+
week_number: cn("text-[0.8rem] select-none text-ppx-muted-foreground", defaultClassNames.week_number),
|
|
1674
|
+
day: cn("relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-ppx-s group/day aspect-square select-none", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-ppx-s" : "[&:first-child[data-selected=true]_button]:rounded-l-ppx-s", defaultClassNames.day),
|
|
1675
|
+
range_start: cn("rounded-l-ppx-s", defaultClassNames.range_start),
|
|
1676
|
+
range_middle: cn("rounded-none bg-ppx-primary-b-1", defaultClassNames.range_middle),
|
|
1677
|
+
range_end: cn("rounded-r-ppx-s", defaultClassNames.range_end),
|
|
1678
|
+
today: cn("bg-ppx-primary-b-1 text-ppx-foreground rounded-ppx-s data-[selected=true]:rounded-none", defaultClassNames.today),
|
|
1679
|
+
outside: cn("text-ppx-muted-foreground aria-selected:text-ppx-muted-foreground", defaultClassNames.outside),
|
|
1680
|
+
disabled: cn("text-ppx-muted-foreground opacity-50", defaultClassNames.disabled),
|
|
1681
|
+
hidden: cn("invisible", defaultClassNames.hidden),
|
|
1682
|
+
...classNames
|
|
1683
|
+
},
|
|
1684
|
+
components: {
|
|
1685
|
+
Root: ({ className: className$1, rootRef, ...props$1 }) => {
|
|
1686
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1687
|
+
"data-slot": "calendar",
|
|
1688
|
+
ref: rootRef,
|
|
1689
|
+
className: cn(className$1),
|
|
1690
|
+
...props$1
|
|
1691
|
+
});
|
|
1692
|
+
},
|
|
1693
|
+
Chevron: ({ className: className$1, orientation, ...props$1 }) => {
|
|
1694
|
+
if (orientation === "left") return /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
1695
|
+
className: cn("rotate-90", className$1),
|
|
1696
|
+
...props$1
|
|
1697
|
+
});
|
|
1698
|
+
if (orientation === "right") return /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
1699
|
+
className: cn("rotate-270", className$1),
|
|
1700
|
+
...props$1
|
|
1701
|
+
});
|
|
1702
|
+
return /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
1703
|
+
className: cn(className$1),
|
|
1704
|
+
...props$1
|
|
1705
|
+
});
|
|
1706
|
+
},
|
|
1707
|
+
DayButton: CalendarDayButton,
|
|
1708
|
+
WeekNumber: ({ children, ...props$1 }) => {
|
|
1709
|
+
return /* @__PURE__ */ jsx("td", {
|
|
1710
|
+
...props$1,
|
|
1711
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
1712
|
+
className: "size-(--cell-size) flex items-center justify-center text-center",
|
|
1713
|
+
children
|
|
1714
|
+
})
|
|
1715
|
+
});
|
|
1716
|
+
},
|
|
1717
|
+
...components
|
|
1718
|
+
},
|
|
1719
|
+
...props
|
|
1720
|
+
});
|
|
1721
|
+
}
|
|
1722
|
+
function CalendarDayButton({ className, day, modifiers, ...props }) {
|
|
1723
|
+
const defaultClassNames = getDefaultClassNames();
|
|
1724
|
+
const ref = React$1.useRef(null);
|
|
1725
|
+
React$1.useEffect(() => {
|
|
1726
|
+
if (modifiers.focused) ref.current?.focus();
|
|
1727
|
+
}, [modifiers.focused]);
|
|
1728
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
1729
|
+
ref,
|
|
1730
|
+
variant: "ghost",
|
|
1731
|
+
size: "icon",
|
|
1732
|
+
"data-day": day.date.toLocaleDateString(),
|
|
1733
|
+
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
1734
|
+
"data-range-start": modifiers.range_start,
|
|
1735
|
+
"data-range-end": modifiers.range_end,
|
|
1736
|
+
"data-range-middle": modifiers.range_middle,
|
|
1737
|
+
className: cn("min-w-(--cell-size) flex aspect-square size-auto w-full flex-col gap-1 font-normal leading-none [&>span]:text-[0.75rem] [&>span]:opacity-70", "ring-ppx-neutral-3 group-data-[focused=true]/day:ring-ppx-primary-5/50 group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]", "data-[selected-single=true]:bg-ppx-primary-5 data-[selected-single=true]:hover:bg-ppx-primary-5 data-[selected-single=true]:text-white data-[selected-single=true]:hover:text-white", "data-[range-start=true]:rounded-ppx-s data-[range-start=true]:rounded-l-ppx-s data-[range-start=true]:bg-ppx-primary-5 data-[range-start=true]:hover:bg-ppx-primary-5 data-[range-start=true]:text-white", "data-[range-end=true]:rounded-ppx-s data-[range-end=true]:rounded-r-ppx-s data-[range-end=true]:bg-ppx-primary-5 data-[range-end=true]:hover:bg-ppx-primary-5 data-[range-end=true]:text-white", "data-[range-middle=true]:bg-ppx-primary-b-1 data-[range-middle=true]:text-ppx-foreground data-[range-middle=true]:hover:bg-ppx-primary-b-1 data-[range-middle=true]:rounded-none", defaultClassNames.day, className),
|
|
1738
|
+
...props
|
|
1739
|
+
});
|
|
1740
|
+
}
|
|
1741
|
+
|
|
1742
|
+
//#endregion
|
|
1743
|
+
//#region src/components/label.tsx
|
|
1744
|
+
function Label({ className, ...props }) {
|
|
1745
|
+
return /* @__PURE__ */ jsx("label", {
|
|
1746
|
+
"data-slot": "label",
|
|
1747
|
+
className: cn("gap-2 font-medium flex items-center text-ppx-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
|
|
1748
|
+
...props
|
|
1749
|
+
});
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1752
|
+
//#endregion
|
|
1753
|
+
//#region src/components/input.tsx
|
|
1754
|
+
const inputVariants = cva("font-medium shadow-xs inline-flex border-ppx-neutral-5 bg-ppx-neutral-1 text-ppx-sm text-ppx-foreground outline-transparent focus:-outline-offset-1 focus:outline-2 placeholder:text-ppx-sm placeholder:text-ppx-neutral-12 focus:not-aria-invalid:outline-ppx-primary-focus focus:not-aria-invalid:not-aria-disabled:bg-ppx-background focus:not-aria-invalid:bg-white disabled:cursor-not-allowed disabled:border-ppx-neutral-3 disabled:bg-ppx-neutral-3 disabled:text-ppx-neutral-11 disabled:placeholder:text-ppx-neutral-11 aria-invalid:outline-ppx-red-4 aria-invalid:bg-ppx-red-1 aria-invalid:outline aria-invalid:-outline-offset-1 placeholder:font-sans-light p-input border", {
|
|
1755
|
+
variants: {
|
|
1756
|
+
size: {
|
|
1757
|
+
default: "h-input rounded-input",
|
|
1758
|
+
sm: "h-input-s rounded-input-s"
|
|
1759
|
+
},
|
|
1760
|
+
widthVariant: {
|
|
1761
|
+
enforced: "min-w-input w-[var(--min-width-input)]",
|
|
1762
|
+
full: "min-w-0 w-full"
|
|
1763
|
+
}
|
|
1764
|
+
},
|
|
1765
|
+
defaultVariants: {
|
|
1766
|
+
size: "default",
|
|
1767
|
+
widthVariant: "full"
|
|
1768
|
+
}
|
|
1769
|
+
});
|
|
1770
|
+
function Input({ className, size, invalid, widthVariant, ...props }) {
|
|
1771
|
+
return /* @__PURE__ */ jsx("input", {
|
|
1772
|
+
"data-slot": "input",
|
|
1773
|
+
className: cn(inputVariants({
|
|
1774
|
+
size,
|
|
1775
|
+
widthVariant
|
|
1776
|
+
}), props.type === "number" && "no-arrow-spin", className),
|
|
1777
|
+
"aria-invalid": invalid,
|
|
1778
|
+
...props
|
|
1779
|
+
});
|
|
1780
|
+
}
|
|
1781
|
+
|
|
1782
|
+
//#endregion
|
|
1783
|
+
//#region src/components/textarea.tsx
|
|
1784
|
+
const textareaVariants = cva("font-medium shadow-xs border-ppx-neutral-5 bg-ppx-neutral-1 text-ppx-sm text-ppx-foreground outline-transparent focus:-outline-offset-1 focus:outline-2 placeholder:text-ppx-sm placeholder:text-ppx-neutral-12 focus:not-aria-invalid:outline-ppx-primary-focus focus:not-aria-invalid:bg-ppx-background disabled:cursor-not-allowed disabled:border-ppx-neutral-3 disabled:bg-ppx-neutral-3 disabled:text-ppx-neutral-11 disabled:placeholder:text-ppx-neutral-11 aria-invalid:outline-ppx-red-4 aria-invalid:bg-ppx-red-1 aria-invalid:outline aria-invalid:-outline-offset-1 placeholder:font-sans-light p-input border", {
|
|
1785
|
+
variants: {
|
|
1786
|
+
size: {
|
|
1787
|
+
default: "min-h-16 rounded-input",
|
|
1788
|
+
sm: "min-h-12 rounded-input-s"
|
|
1789
|
+
},
|
|
1790
|
+
widthVariant: {
|
|
1791
|
+
enforced: "min-w-input w-[var(--min-width-input)]",
|
|
1792
|
+
full: "min-w-0 w-full"
|
|
1793
|
+
}
|
|
1794
|
+
},
|
|
1795
|
+
defaultVariants: {
|
|
1796
|
+
size: "default",
|
|
1797
|
+
widthVariant: "full"
|
|
1798
|
+
}
|
|
1799
|
+
});
|
|
1800
|
+
function Textarea({ className, size, invalid, widthVariant, ...props }) {
|
|
1801
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
1802
|
+
"data-slot": "textarea",
|
|
1803
|
+
className: cn(textareaVariants({
|
|
1804
|
+
size,
|
|
1805
|
+
widthVariant
|
|
1806
|
+
}), className),
|
|
1807
|
+
"aria-invalid": invalid,
|
|
1808
|
+
...props
|
|
1809
|
+
});
|
|
1810
|
+
}
|
|
1811
|
+
|
|
1812
|
+
//#endregion
|
|
1813
|
+
//#region src/components/avatar.tsx
|
|
1814
|
+
const COLORS_PALETTE = [
|
|
1815
|
+
"#bdc3c7",
|
|
1816
|
+
"#6f7b87",
|
|
1817
|
+
"#2c3e50",
|
|
1818
|
+
"#2f3193",
|
|
1819
|
+
"#662d91",
|
|
1820
|
+
"#922790",
|
|
1821
|
+
"#ec2176",
|
|
1822
|
+
"#ed1c24",
|
|
1823
|
+
"#f36622",
|
|
1824
|
+
"#f8941e",
|
|
1825
|
+
"#fab70f",
|
|
1826
|
+
"#fdde00",
|
|
1827
|
+
"#d1d219",
|
|
1828
|
+
"#8ec73f",
|
|
1829
|
+
"#00a650",
|
|
1830
|
+
"#00aa9c",
|
|
1831
|
+
"#00adef",
|
|
1832
|
+
"#0081cd",
|
|
1833
|
+
"#005bab",
|
|
1834
|
+
"#012a4a",
|
|
1835
|
+
"#013a63",
|
|
1836
|
+
"#06d6a0",
|
|
1837
|
+
"#ef476f",
|
|
1838
|
+
"#ff5d8f",
|
|
1839
|
+
"#0496ff",
|
|
1840
|
+
"#c879ff"
|
|
1841
|
+
];
|
|
1842
|
+
const generateNameInitials = (name) => {
|
|
1843
|
+
if (!name.length) return "";
|
|
1844
|
+
const rgx = /* @__PURE__ */ new RegExp(/(\b\w)/g);
|
|
1845
|
+
const initials = [...name.matchAll(rgx)];
|
|
1846
|
+
return ((initials.shift()?.[1] || "") + (initials.pop()?.[1] || "")).toUpperCase();
|
|
1847
|
+
};
|
|
1848
|
+
const getBgColorAndTextColor = (name) => {
|
|
1849
|
+
if (!name) return {};
|
|
1850
|
+
let index = name[0].toUpperCase().charCodeAt(0);
|
|
1851
|
+
const lastName = name.split(" ")[1];
|
|
1852
|
+
if (lastName) {
|
|
1853
|
+
index = index + lastName[0].toUpperCase().charCodeAt(0);
|
|
1854
|
+
index = Math.floor(index / 2);
|
|
1855
|
+
}
|
|
1856
|
+
index = Math.abs(index - 65);
|
|
1857
|
+
return {
|
|
1858
|
+
backgroundColor: COLORS_PALETTE[index],
|
|
1859
|
+
color: "#fff"
|
|
1860
|
+
};
|
|
1861
|
+
};
|
|
1862
|
+
const replaceSizeInUrl = (url, size) => {
|
|
1863
|
+
const numberSize = size.replace("px", "");
|
|
1864
|
+
const newSize = `${numberSize}x${numberSize}`;
|
|
1865
|
+
return url.replace("/SIZE/", `/${newSize}/`);
|
|
1866
|
+
};
|
|
1867
|
+
function Avatar(props) {
|
|
1868
|
+
return /* @__PURE__ */ jsxs(Root, {
|
|
1869
|
+
disabled: props.hideTooltip,
|
|
1870
|
+
children: [/* @__PURE__ */ jsx(Trigger, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
|
|
1871
|
+
...props,
|
|
1872
|
+
avatarRootProps: tooltipProps
|
|
1873
|
+
}) }), /* @__PURE__ */ jsx(Content, { children: props.name })]
|
|
1874
|
+
});
|
|
1875
|
+
}
|
|
1876
|
+
function AvatarImpl(props) {
|
|
1877
|
+
const { variant = "squared", size = "100px", avatarRootProps } = props;
|
|
1878
|
+
const name = props.name ?? "";
|
|
1879
|
+
const nameInitial = useMemo(() => generateNameInitials(name), [name]);
|
|
1880
|
+
const colorStyle = useMemo(() => getBgColorAndTextColor(name), [name]);
|
|
1881
|
+
const sizeReplacedUrl = useMemo(() => props.imgSrc ? replaceSizeInUrl(props.imgSrc, size) : void 0, [props.imgSrc, size]);
|
|
1882
|
+
return /* @__PURE__ */ jsxs(Avatar$1.Root, {
|
|
1883
|
+
"data-slot": "avatar",
|
|
1884
|
+
className: cn("@container relative flex shrink-0 overflow-hidden", variant === "rounded" && "rounded-full", variant === "squared" && "rounded-ppx-s", props.className),
|
|
1885
|
+
style: {
|
|
1886
|
+
width: size,
|
|
1887
|
+
height: size
|
|
1888
|
+
},
|
|
1889
|
+
...avatarRootProps,
|
|
1890
|
+
children: [
|
|
1891
|
+
/* @__PURE__ */ jsx(Avatar$1.Image, {
|
|
1892
|
+
"data-slot": "avatar-image",
|
|
1893
|
+
className: "size-full object-cover",
|
|
1894
|
+
src: sizeReplacedUrl
|
|
1895
|
+
}),
|
|
1896
|
+
/* @__PURE__ */ jsx(Avatar$1.Fallback, {
|
|
1897
|
+
"data-slot": "avatar-fallback",
|
|
1898
|
+
className: cn("font-medium flex size-full items-center justify-center text-[40cqw] select-none"),
|
|
1899
|
+
style: colorStyle,
|
|
1900
|
+
children: nameInitial
|
|
1901
|
+
}),
|
|
1902
|
+
props.children
|
|
1903
|
+
]
|
|
1904
|
+
});
|
|
1905
|
+
}
|
|
1906
|
+
|
|
1907
|
+
//#endregion
|
|
1908
|
+
//#region src/components/avatar-group.tsx
|
|
1909
|
+
function AvatarGroup({ max = 4, avatars, className }) {
|
|
1910
|
+
const hasOverflow = avatars.length > max;
|
|
1911
|
+
const overflowAvatars = avatars.slice(max);
|
|
1912
|
+
return /* @__PURE__ */ jsx(BaseProvider, { children: /* @__PURE__ */ jsxs("div", {
|
|
1913
|
+
className: cn("flex items-center", className),
|
|
1914
|
+
"data-slot": "avatar-group",
|
|
1915
|
+
children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
|
|
1916
|
+
className: "relative",
|
|
1917
|
+
style: {
|
|
1918
|
+
marginLeft: index > 0 ? `-${parseInt(avatar.size ?? "100px") * .25}px` : "0",
|
|
1919
|
+
zIndex: avatars.length - index
|
|
1920
|
+
},
|
|
1921
|
+
...tooltipProps,
|
|
1922
|
+
children: /* @__PURE__ */ jsx(AvatarImpl, {
|
|
1923
|
+
...avatar,
|
|
1924
|
+
className: "ring-2 ring-white"
|
|
1925
|
+
})
|
|
1926
|
+
}) }), /* @__PURE__ */ jsx(Content, { children: avatar.name })] }) }, avatar.name)), hasOverflow && /* @__PURE__ */ jsx("div", {
|
|
1927
|
+
className: "relative",
|
|
1928
|
+
style: {
|
|
1929
|
+
marginLeft: `-${parseInt(avatars[0].size ?? "100px") * .25}px`,
|
|
1930
|
+
zIndex: 0
|
|
1931
|
+
},
|
|
1932
|
+
children: /* @__PURE__ */ jsxs(Root$8, {
|
|
1933
|
+
openOnHover: true,
|
|
1934
|
+
children: [/* @__PURE__ */ jsx(Trigger$5, { children: /* @__PURE__ */ jsxs("div", {
|
|
1935
|
+
className: cn("bg-ppx-neutral-3 text-ppx-neutral-18 hover:bg-ppx-neutral-4 flex cursor-pointer items-center justify-center font-medium transition-colors", avatars[0].variant === "rounded" ? "rounded-full" : "rounded-ppx-s"),
|
|
1936
|
+
style: {
|
|
1937
|
+
width: avatars[0].size ?? "100px",
|
|
1938
|
+
height: avatars[0].size ?? "100px",
|
|
1939
|
+
fontSize: `${parseInt(avatars[0].size ?? "100px") * .3}px`
|
|
1940
|
+
},
|
|
1941
|
+
children: ["+", overflowAvatars.length]
|
|
1942
|
+
}) }), /* @__PURE__ */ jsx(Content$5, {
|
|
1943
|
+
className: "w-80",
|
|
1944
|
+
positionerProps: {
|
|
1945
|
+
align: "start",
|
|
1946
|
+
side: "top"
|
|
1947
|
+
},
|
|
1948
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
1949
|
+
className: "max-h-64 space-y-2 overflow-y-auto",
|
|
1950
|
+
children: overflowAvatars.map((avatar) => /* @__PURE__ */ jsxs("div", {
|
|
1951
|
+
className: "flex items-center gap-3 rounded-md p-2",
|
|
1952
|
+
children: [/* @__PURE__ */ jsx(Avatar, {
|
|
1953
|
+
...avatar,
|
|
1954
|
+
size: "24px",
|
|
1955
|
+
hideTooltip: true
|
|
1956
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
1957
|
+
className: "text-ppx-neutral-18 text-sm font-medium",
|
|
1958
|
+
children: avatar.name
|
|
1959
|
+
})]
|
|
1960
|
+
}, avatar.name))
|
|
1961
|
+
})
|
|
1962
|
+
})]
|
|
1963
|
+
})
|
|
1964
|
+
})]
|
|
1965
|
+
}) });
|
|
1966
|
+
}
|
|
1967
|
+
|
|
1968
|
+
//#endregion
|
|
1969
|
+
//#region src/components/switch.tsx
|
|
1970
|
+
function Switch({ className, size, ...props }) {
|
|
1971
|
+
return /* @__PURE__ */ jsx(Switch$1.Root, {
|
|
1972
|
+
"data-slot": "switch",
|
|
1973
|
+
className: cn("peer shadow-xs inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-ppx-primary-5 data-unchecked:bg-ppx-neutral-4", size === "sm" && "h-4 w-8", size === void 0 && "h-5 w-10", size === "lg" && "h-6 w-12", className),
|
|
1974
|
+
...props,
|
|
1975
|
+
children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
|
|
1976
|
+
"data-slot": "switch-thumb",
|
|
1977
|
+
className: cn("ease-in-out pointer-events-none block rounded-full bg-ppx-neutral-1 ring-0 transition-transform duration-300", size === "sm" && "size-3.5 data-checked:translate-x-[calc(100%+2px)]", size === void 0 && "size-4 data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px", size === "lg" && "size-5 data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px")
|
|
1978
|
+
})
|
|
1979
|
+
});
|
|
1980
|
+
}
|
|
1981
|
+
|
|
1982
|
+
//#endregion
|
|
1983
|
+
//#region src/components/separator.tsx
|
|
1984
|
+
function Separator({ className, orientation = "vertical", decorative = false, ...props }) {
|
|
1985
|
+
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
1986
|
+
const semanticProps = decorative ? { role: "none" } : {
|
|
1987
|
+
"aria-orientation": ariaOrientation,
|
|
1988
|
+
role: "separator"
|
|
1989
|
+
};
|
|
1990
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1991
|
+
"data-orientation": orientation,
|
|
1992
|
+
...semanticProps,
|
|
1993
|
+
"data-slot": "separator",
|
|
1994
|
+
className: cn("shrink-0 bg-ppx-neutral-3 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
|
|
1995
|
+
...props
|
|
1996
|
+
});
|
|
1997
|
+
}
|
|
1998
|
+
Separator.displayName = "Separator";
|
|
1999
|
+
|
|
2000
|
+
//#endregion
|
|
2001
|
+
//#region src/icons/calendar-icon.tsx
|
|
2002
|
+
function CalenderIcon(props) {
|
|
2003
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
2004
|
+
version: "1.1",
|
|
2005
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2006
|
+
width: "24",
|
|
2007
|
+
height: "24",
|
|
2008
|
+
viewBox: "0 0 768 768",
|
|
2009
|
+
...props,
|
|
2010
|
+
children: /* @__PURE__ */ jsx("path", { d: "M618.645 61.378h-35.458v-61.379h-66.743v61.379h-266.974v-61.379h-66.743v61.379h-33.372c-55.205 0-100.115 44.91-100.115 100.115v506.391c0 55.206 44.91 100.115 100.115 100.115h469.29c55.206 0 100.115-44.909 100.115-100.115v-506.391c0-55.205-44.909-100.115-100.115-100.115zM652.016 667.885c0 18.396-14.968 33.372-25.029 33.372h-469.29c-26.747 0-41.715-14.976-41.715-33.372v-408.803h536.033v408.803zM566.71 500.817h-142.247v117.226h142.247v-117.226zM566.71 331.664h-142.247v117.226h142.247v-117.226zM343.537 331.664h-142.247v117.226h142.247v-117.226zM343.537 500.817h-142.247v117.226h142.247v-117.226z" })
|
|
2011
|
+
});
|
|
2012
|
+
}
|
|
2013
|
+
|
|
2014
|
+
//#endregion
|
|
2015
|
+
//#region src/components/date-picker.tsx
|
|
2016
|
+
function DatePicker({ triggerProps, placeholder = "Pick a date", format: format$1 = "yyyy-MM-dd", invalid, trailingIcon, renderTriggerContent, popoverRootProps, popoverContentProps, ...calendarProps }) {
|
|
2017
|
+
const [open, setOpen] = React$1.useState(false);
|
|
2018
|
+
const handleSelect = (...args) => {
|
|
2019
|
+
calendarProps.onSelect(...args);
|
|
2020
|
+
!calendarProps.mode || calendarProps.mode === "single" && setOpen(false);
|
|
2021
|
+
};
|
|
2022
|
+
return /* @__PURE__ */ jsxs(Root$8, {
|
|
2023
|
+
open,
|
|
2024
|
+
onOpenChange: setOpen,
|
|
2025
|
+
...popoverRootProps,
|
|
2026
|
+
children: [/* @__PURE__ */ jsxs(Trigger$5, {
|
|
2027
|
+
disabled: triggerProps?.disabled,
|
|
2028
|
+
className: cn(triggerVariants({
|
|
2029
|
+
size: triggerProps?.size,
|
|
2030
|
+
widthVariant: triggerProps?.widthVariant
|
|
2031
|
+
}), "gap-2.5", triggerProps?.className),
|
|
2032
|
+
"aria-invalid": invalid,
|
|
2033
|
+
"aria-label": "Open date picker",
|
|
2034
|
+
children: [renderTriggerContent || renderFormattedDate(calendarProps, format$1) || placeholder, trailingIcon ?? /* @__PURE__ */ jsx(CalenderIcon, { className: cn("text-ppx-foreground size-5 shrink-0", triggerProps?.disabled && "opacity-50") })]
|
|
2035
|
+
}), /* @__PURE__ */ jsx(Content$5, {
|
|
2036
|
+
className: cn("p-0", popoverContentProps?.className),
|
|
2037
|
+
...popoverContentProps,
|
|
2038
|
+
children: /* @__PURE__ */ jsx(Calendar, {
|
|
2039
|
+
...calendarProps,
|
|
2040
|
+
onSelect: handleSelect
|
|
2041
|
+
})
|
|
2042
|
+
})]
|
|
2043
|
+
});
|
|
2044
|
+
}
|
|
2045
|
+
function renderFormattedDate(calendarProps, format$1) {
|
|
2046
|
+
if (calendarProps.mode === "single" && calendarProps.selected) return format(calendarProps.selected, format$1);
|
|
2047
|
+
if (calendarProps.mode === "range" && calendarProps.selected?.from) {
|
|
2048
|
+
let formattedDate = format(calendarProps.selected.from, format$1);
|
|
2049
|
+
if (calendarProps.selected.to && calendarProps.selected.from !== calendarProps.selected.to) formattedDate = `${formattedDate} - ${format(calendarProps.selected.to, format$1)}`;
|
|
2050
|
+
return formattedDate;
|
|
2051
|
+
}
|
|
2052
|
+
if (calendarProps.mode === "multiple" && calendarProps.selected?.length) return calendarProps.selected.map((date) => format(date, format$1)).join(", ");
|
|
2053
|
+
return "";
|
|
2054
|
+
}
|
|
2055
|
+
|
|
2056
|
+
//#endregion
|
|
2057
|
+
//#region src/index.ts
|
|
2058
|
+
var src_exports = /* @__PURE__ */ __export({
|
|
2059
|
+
Avatar: () => Avatar,
|
|
2060
|
+
AvatarGroup: () => AvatarGroup,
|
|
2061
|
+
AvatarImpl: () => AvatarImpl,
|
|
2062
|
+
BlockCheckboxGroup: () => block_checkbox_group_exports,
|
|
2063
|
+
BlockRadioGroup: () => block_radio_group_exports,
|
|
2064
|
+
Breadcrumbs: () => breadcrumbs_exports,
|
|
2065
|
+
Button: () => Button,
|
|
2066
|
+
Calendar: () => Calendar,
|
|
2067
|
+
Checkbox: () => Checkbox,
|
|
2068
|
+
Combobox: () => combobox_exports,
|
|
2069
|
+
DatePicker: () => DatePicker,
|
|
2070
|
+
Dialog: () => dialog_exports,
|
|
2071
|
+
Group: () => Group,
|
|
2072
|
+
Input: () => Input,
|
|
2073
|
+
InputGroup: () => input_group_exports,
|
|
2074
|
+
Item: () => Item,
|
|
2075
|
+
Label: () => Label,
|
|
2076
|
+
Menu: () => menu_exports,
|
|
2077
|
+
Popover: () => popover_exports,
|
|
2078
|
+
Progress: () => progress_exports,
|
|
2079
|
+
SegmentedControl: () => segmented_control_exports,
|
|
2080
|
+
Select: () => select_exports,
|
|
2081
|
+
Separator: () => Separator,
|
|
2082
|
+
Spinner: () => Spinner,
|
|
2083
|
+
Switch: () => Switch,
|
|
2084
|
+
Tabs: () => tabs_exports,
|
|
2085
|
+
Textarea: () => Textarea,
|
|
2086
|
+
Tooltip: () => tooltip_exports,
|
|
2087
|
+
buttonVariants: () => buttonVariants,
|
|
2088
|
+
cn: () => cn,
|
|
2089
|
+
defineLoadOptions: () => defineLoadOptions,
|
|
2090
|
+
useAsyncOptions: () => useAsyncOptions,
|
|
2091
|
+
useIntersectionObserver: () => useIntersectionObserver
|
|
2092
|
+
});
|
|
2093
|
+
|
|
2094
|
+
//#endregion
|
|
2095
|
+
export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, Group, Input, input_group_exports as InputGroup, Item, Label, menu_exports as Menu, popover_exports as Popover, progress_exports as Progress, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, buttonVariants, cn, defineLoadOptions, useAsyncOptions, useIntersectionObserver };
|
|
2096
|
+
//# sourceMappingURL=index.js.map
|