@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/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