@komensal/ui 0.13.4 → 0.13.5
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.d.ts +1 -0
- package/dist/index.js +157 -155
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -205,13 +205,21 @@ var AuthHeader = ({
|
|
|
205
205
|
};
|
|
206
206
|
|
|
207
207
|
// src/components/breadcrumb.tsx
|
|
208
|
+
import * as React3 from "react";
|
|
209
|
+
|
|
210
|
+
// src/components/skeleton.tsx
|
|
208
211
|
import * as React2 from "react";
|
|
209
|
-
import { jsx as jsx4
|
|
210
|
-
var
|
|
212
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
213
|
+
var Skeleton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", { className: cn("bg-inactive animate-pulse rounded-md", className), ref, ...props }));
|
|
214
|
+
Skeleton.displayName = "Skeleton";
|
|
215
|
+
|
|
216
|
+
// src/components/breadcrumb.tsx
|
|
217
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
218
|
+
var Breadcrumb = React3.forwardRef(({ className, items, ...props }, ref) => /* @__PURE__ */ jsx5("div", { className: cn("flex items-center gap-1 text-sm", className), ref, ...props, children: items.map((item, index) => {
|
|
211
219
|
const isLast = index === items.length - 1;
|
|
212
220
|
return /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1", children: [
|
|
213
|
-
index > 0 && /* @__PURE__ */
|
|
214
|
-
item.onClick && !isLast ? /* @__PURE__ */
|
|
221
|
+
index > 0 && /* @__PURE__ */ jsx5("span", { className: "text-muted", children: "\u203A" }),
|
|
222
|
+
item.loading ? /* @__PURE__ */ jsx5(Skeleton, { className: "h-4 w-20" }) : item.onClick && !isLast ? /* @__PURE__ */ jsx5("button", { className: "text-muted hover:text-foreground transition-colors", onClick: item.onClick, type: "button", children: item.label }) : /* @__PURE__ */ jsx5("span", { className: isLast ? "text-foreground font-medium" : "text-muted", children: item.label })
|
|
215
223
|
] }, `${item.label}-${index}`);
|
|
216
224
|
}) }));
|
|
217
225
|
Breadcrumb.displayName = "Breadcrumb";
|
|
@@ -219,7 +227,7 @@ Breadcrumb.displayName = "Breadcrumb";
|
|
|
219
227
|
// src/components/button.tsx
|
|
220
228
|
import { Slot } from "@radix-ui/react-slot";
|
|
221
229
|
import { cva } from "class-variance-authority";
|
|
222
|
-
import * as
|
|
230
|
+
import * as React5 from "react";
|
|
223
231
|
|
|
224
232
|
// src/components/spinner.tsx
|
|
225
233
|
import clsx2 from "clsx";
|
|
@@ -270,7 +278,7 @@ var setUiLanguage = (lng) => uiI18n.changeLanguage(lng);
|
|
|
270
278
|
var useUiT = () => useTranslation("ui", { i18n: uiI18n }).t;
|
|
271
279
|
|
|
272
280
|
// src/components/spinner.tsx
|
|
273
|
-
import { Fragment as Fragment2, jsx as
|
|
281
|
+
import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
274
282
|
var sizes = {
|
|
275
283
|
lg: "70",
|
|
276
284
|
md: "50",
|
|
@@ -286,7 +294,7 @@ var variants = {
|
|
|
286
294
|
var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary" }) => {
|
|
287
295
|
const t = useUiT();
|
|
288
296
|
return /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
289
|
-
/* @__PURE__ */
|
|
297
|
+
/* @__PURE__ */ jsx6(
|
|
290
298
|
"svg",
|
|
291
299
|
{
|
|
292
300
|
fill: "currentColor",
|
|
@@ -296,8 +304,8 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
|
|
|
296
304
|
width: sizes[size],
|
|
297
305
|
xmlns: "http://www.w3.org/2000/svg",
|
|
298
306
|
children: /* @__PURE__ */ jsxs5("g", { className: clsx2("spinner_V8m1", className), children: [
|
|
299
|
-
/* @__PURE__ */
|
|
300
|
-
/* @__PURE__ */
|
|
307
|
+
/* @__PURE__ */ jsx6("circle", { cx: "50", cy: "50", fill: "none", opacity: "0.25", r: "35", stroke: "currentColor", strokeWidth: "10" }),
|
|
308
|
+
/* @__PURE__ */ jsx6(
|
|
301
309
|
"circle",
|
|
302
310
|
{
|
|
303
311
|
cx: "50",
|
|
@@ -307,7 +315,7 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
|
|
|
307
315
|
stroke: "currentColor",
|
|
308
316
|
strokeDasharray: "164.93361431346415 56.97787143782138",
|
|
309
317
|
strokeWidth: "10",
|
|
310
|
-
children: /* @__PURE__ */
|
|
318
|
+
children: /* @__PURE__ */ jsx6(
|
|
311
319
|
"animateTransform",
|
|
312
320
|
{
|
|
313
321
|
attributeName: "transform",
|
|
@@ -323,18 +331,18 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
|
|
|
323
331
|
] })
|
|
324
332
|
}
|
|
325
333
|
),
|
|
326
|
-
/* @__PURE__ */
|
|
334
|
+
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: loadingLabel ?? t("spinner.loading") })
|
|
327
335
|
] });
|
|
328
336
|
};
|
|
329
337
|
|
|
330
338
|
// src/components/tooltip.tsx
|
|
331
339
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
332
|
-
import * as
|
|
333
|
-
import { jsx as
|
|
340
|
+
import * as React4 from "react";
|
|
341
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
334
342
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
335
343
|
var TooltipRoot = TooltipPrimitive.Root;
|
|
336
344
|
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
337
|
-
var TooltipContent =
|
|
345
|
+
var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx7(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
|
|
338
346
|
TooltipPrimitive.Content,
|
|
339
347
|
{
|
|
340
348
|
className: cn(
|
|
@@ -347,18 +355,18 @@ var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, ...props },
|
|
|
347
355
|
}
|
|
348
356
|
) }));
|
|
349
357
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
350
|
-
var Tooltip =
|
|
358
|
+
var Tooltip = React4.forwardRef(
|
|
351
359
|
({ children, childrenClassName, className, message, sideTooltip = "top" }, ref) => {
|
|
352
|
-
return /* @__PURE__ */
|
|
353
|
-
/* @__PURE__ */
|
|
354
|
-
/* @__PURE__ */
|
|
360
|
+
return /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsxs6(TooltipRoot, { children: [
|
|
361
|
+
/* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7("div", { className: cn("", childrenClassName), ref, children }) }),
|
|
362
|
+
/* @__PURE__ */ jsx7(TooltipContent, { className: cn("", className), side: sideTooltip, children: /* @__PURE__ */ jsx7("p", { children: message }) })
|
|
355
363
|
] }) });
|
|
356
364
|
}
|
|
357
365
|
);
|
|
358
366
|
Tooltip.displayName = "Tooltip";
|
|
359
367
|
|
|
360
368
|
// src/components/button.tsx
|
|
361
|
-
import { jsx as
|
|
369
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
362
370
|
var buttonVariants = cva(
|
|
363
371
|
"w-full inline-flex items-center justify-center gap-[10px] whitespace-nowrap rounded-[12px] border border-transparent text-base font-semibold transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:bg-inactive disabled:text-inactive-text disabled:border-transparent cursor-pointer",
|
|
364
372
|
{
|
|
@@ -404,7 +412,7 @@ var buttonVariants = cva(
|
|
|
404
412
|
}
|
|
405
413
|
}
|
|
406
414
|
);
|
|
407
|
-
var Button =
|
|
415
|
+
var Button = React5.forwardRef(
|
|
408
416
|
({
|
|
409
417
|
asChild = false,
|
|
410
418
|
children,
|
|
@@ -434,21 +442,21 @@ var Button = React4.forwardRef(
|
|
|
434
442
|
children: [
|
|
435
443
|
iconLeft,
|
|
436
444
|
icon,
|
|
437
|
-
/* @__PURE__ */
|
|
445
|
+
/* @__PURE__ */ jsx8("span", { className: cn("flex w-full items-center justify-center gap-2", childrenClassName), children }),
|
|
438
446
|
iconRight,
|
|
439
|
-
isLoading && /* @__PURE__ */
|
|
447
|
+
isLoading && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-sm", children: /* @__PURE__ */ jsx8(Spinner, { size: "sm" }) })
|
|
440
448
|
]
|
|
441
449
|
}
|
|
442
450
|
);
|
|
443
|
-
return tooltip ? /* @__PURE__ */
|
|
451
|
+
return tooltip ? /* @__PURE__ */ jsx8(Tooltip, { childrenClassName: "flex items-center justify-center", message: tooltip, sideTooltip, children: buttonNode }) : buttonNode;
|
|
444
452
|
}
|
|
445
453
|
);
|
|
446
454
|
Button.displayName = "Button";
|
|
447
455
|
|
|
448
456
|
// src/components/chip.tsx
|
|
449
457
|
import { cva as cva2 } from "class-variance-authority";
|
|
450
|
-
import * as
|
|
451
|
-
import { jsx as
|
|
458
|
+
import * as React6 from "react";
|
|
459
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
452
460
|
var chipVariants = cva2(
|
|
453
461
|
"focus-visible:ring-ring inline-flex cursor-pointer items-center justify-center rounded-full px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none",
|
|
454
462
|
{
|
|
@@ -463,24 +471,24 @@ var chipVariants = cva2(
|
|
|
463
471
|
}
|
|
464
472
|
}
|
|
465
473
|
);
|
|
466
|
-
var Chip =
|
|
474
|
+
var Chip = React6.forwardRef(({ active, className, ...props }, ref) => /* @__PURE__ */ jsx9("button", { className: cn(chipVariants({ active }), className), ref, type: "button", ...props }));
|
|
467
475
|
Chip.displayName = "Chip";
|
|
468
476
|
|
|
469
477
|
// src/components/command.tsx
|
|
470
478
|
import { MagnifyingGlassIcon } from "@phosphor-icons/react";
|
|
471
479
|
import { Command as CommandPrimitive } from "cmdk";
|
|
472
|
-
import * as
|
|
480
|
+
import * as React8 from "react";
|
|
473
481
|
|
|
474
482
|
// src/components/dialog.tsx
|
|
475
483
|
import { XIcon } from "@phosphor-icons/react";
|
|
476
484
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
477
|
-
import * as
|
|
478
|
-
import { jsx as
|
|
485
|
+
import * as React7 from "react";
|
|
486
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
479
487
|
var Dialog = DialogPrimitive.Root;
|
|
480
488
|
var DialogTrigger = DialogPrimitive.Trigger;
|
|
481
489
|
var DialogPortal = DialogPrimitive.Portal;
|
|
482
490
|
var DialogClose = DialogPrimitive.Close;
|
|
483
|
-
var DialogOverlay =
|
|
491
|
+
var DialogOverlay = React7.forwardRef(({ className, isAbsolute = false, ...props }, ref) => /* @__PURE__ */ jsx10(
|
|
484
492
|
DialogPrimitive.Overlay,
|
|
485
493
|
{
|
|
486
494
|
className: cn(
|
|
@@ -493,11 +501,11 @@ var DialogOverlay = React6.forwardRef(({ className, isAbsolute = false, ...props
|
|
|
493
501
|
}
|
|
494
502
|
));
|
|
495
503
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
496
|
-
var DialogContent =
|
|
504
|
+
var DialogContent = React7.forwardRef(
|
|
497
505
|
({ children, className, closeLabel, container, isAbsolute = false, isCloseIcon = false, overlayClassName, ...props }, ref) => {
|
|
498
506
|
const t = useUiT();
|
|
499
507
|
return /* @__PURE__ */ jsxs8(DialogPortal, { container, children: [
|
|
500
|
-
/* @__PURE__ */
|
|
508
|
+
/* @__PURE__ */ jsx10(DialogOverlay, { className: overlayClassName, isAbsolute }),
|
|
501
509
|
/* @__PURE__ */ jsxs8(
|
|
502
510
|
DialogPrimitive.Content,
|
|
503
511
|
{
|
|
@@ -511,8 +519,8 @@ var DialogContent = React6.forwardRef(
|
|
|
511
519
|
children: [
|
|
512
520
|
children,
|
|
513
521
|
isCloseIcon && /* @__PURE__ */ jsxs8(DialogPrimitive.Close, { className: "data-[state=open]:text-muted ring-offset-surface focus:ring-ring data-[state=open]:bg-hover hover:bg-hover absolute top-5 right-5 flex h-8 w-8 min-w-8 cursor-pointer items-center justify-center rounded-full bg-transparent opacity-70 transition-all hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
|
|
514
|
-
/* @__PURE__ */
|
|
515
|
-
/* @__PURE__ */
|
|
522
|
+
/* @__PURE__ */ jsx10(XIcon, { className: "text-body h-4 w-4" }),
|
|
523
|
+
/* @__PURE__ */ jsx10("span", { className: "sr-only", children: closeLabel ?? t("dialog.close") })
|
|
516
524
|
] })
|
|
517
525
|
]
|
|
518
526
|
}
|
|
@@ -521,26 +529,26 @@ var DialogContent = React6.forwardRef(
|
|
|
521
529
|
}
|
|
522
530
|
);
|
|
523
531
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
524
|
-
var DialogHeader = ({ className, ...props }) => /* @__PURE__ */
|
|
532
|
+
var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
|
|
525
533
|
DialogHeader.displayName = "DialogHeader";
|
|
526
|
-
var DialogFooter = ({ className, ...props }) => /* @__PURE__ */
|
|
534
|
+
var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col-reverse justify-center gap-2 rounded-2xl sm:flex-row", className), ...props });
|
|
527
535
|
DialogFooter.displayName = "DialogFooter";
|
|
528
|
-
var DialogTitle =
|
|
536
|
+
var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
|
|
529
537
|
DialogPrimitive.Title,
|
|
530
538
|
{
|
|
531
539
|
className: cn("text-lg leading-none font-semibold tracking-tight", className),
|
|
532
540
|
ref,
|
|
533
541
|
...props,
|
|
534
|
-
children: /* @__PURE__ */
|
|
542
|
+
children: /* @__PURE__ */ jsx10("span", { children: props.children })
|
|
535
543
|
}
|
|
536
544
|
));
|
|
537
545
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
538
|
-
var DialogDescription =
|
|
546
|
+
var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(DialogPrimitive.Description, { className: cn("text-muted text-sm", className), ref, ...props, children: /* @__PURE__ */ jsx10("span", { children: props.children }) }));
|
|
539
547
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
540
548
|
|
|
541
549
|
// src/components/command.tsx
|
|
542
|
-
import { jsx as
|
|
543
|
-
var Command =
|
|
550
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
551
|
+
var Command = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
544
552
|
CommandPrimitive,
|
|
545
553
|
{
|
|
546
554
|
className: cn("bg-surface text-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
|
|
@@ -550,11 +558,11 @@ var Command = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
550
558
|
));
|
|
551
559
|
Command.displayName = CommandPrimitive.displayName;
|
|
552
560
|
var CommandDialog = ({ children, ...props }) => {
|
|
553
|
-
return /* @__PURE__ */
|
|
561
|
+
return /* @__PURE__ */ jsx11(Dialog, { ...props, children: /* @__PURE__ */ jsx11(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx11(Command, { className: "**:[[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3", children }) }) });
|
|
554
562
|
};
|
|
555
|
-
var CommandInput =
|
|
556
|
-
/* @__PURE__ */
|
|
557
|
-
/* @__PURE__ */
|
|
563
|
+
var CommandInput = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
|
|
564
|
+
/* @__PURE__ */ jsx11(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
|
|
565
|
+
/* @__PURE__ */ jsx11(
|
|
558
566
|
CommandPrimitive.Input,
|
|
559
567
|
{
|
|
560
568
|
className: cn(
|
|
@@ -567,11 +575,11 @@ var CommandInput = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
567
575
|
)
|
|
568
576
|
] }));
|
|
569
577
|
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
|
570
|
-
var CommandList =
|
|
578
|
+
var CommandList = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(CommandPrimitive.List, { className: cn("max-h-75 overflow-x-hidden overflow-y-auto", className), ref, ...props }));
|
|
571
579
|
CommandList.displayName = CommandPrimitive.List.displayName;
|
|
572
|
-
var CommandEmpty =
|
|
580
|
+
var CommandEmpty = React8.forwardRef((props, ref) => /* @__PURE__ */ jsx11(CommandPrimitive.Empty, { className: "py-6 text-center text-sm", ref, ...props }));
|
|
573
581
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
|
574
|
-
var CommandGroup =
|
|
582
|
+
var CommandGroup = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
575
583
|
CommandPrimitive.Group,
|
|
576
584
|
{
|
|
577
585
|
className: cn(
|
|
@@ -583,9 +591,9 @@ var CommandGroup = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
583
591
|
}
|
|
584
592
|
));
|
|
585
593
|
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
|
586
|
-
var CommandSeparator =
|
|
594
|
+
var CommandSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(CommandPrimitive.Separator, { className: cn("bg-border -mx-1 h-px", className), ref, ...props }));
|
|
587
595
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
|
588
|
-
var CommandItem =
|
|
596
|
+
var CommandItem = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
589
597
|
CommandPrimitive.Item,
|
|
590
598
|
{
|
|
591
599
|
className: cn(
|
|
@@ -598,25 +606,25 @@ var CommandItem = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
598
606
|
));
|
|
599
607
|
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
|
600
608
|
var CommandShortcut = ({ className, ...props }) => {
|
|
601
|
-
return /* @__PURE__ */
|
|
609
|
+
return /* @__PURE__ */ jsx11("span", { className: cn("text-muted ml-auto text-xs tracking-widest", className), ...props });
|
|
602
610
|
};
|
|
603
611
|
CommandShortcut.displayName = "CommandShortcut";
|
|
604
612
|
|
|
605
613
|
// src/components/form.tsx
|
|
606
614
|
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
607
|
-
import * as
|
|
615
|
+
import * as React9 from "react";
|
|
608
616
|
import { Controller, FormProvider, useFormContext } from "react-hook-form";
|
|
609
|
-
import { jsx as
|
|
617
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
610
618
|
var Form = FormProvider;
|
|
611
|
-
var FormFieldContext =
|
|
619
|
+
var FormFieldContext = React9.createContext(null);
|
|
612
620
|
var FormField = ({
|
|
613
621
|
...props
|
|
614
622
|
}) => {
|
|
615
|
-
return /* @__PURE__ */
|
|
623
|
+
return /* @__PURE__ */ jsx12(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx12(Controller, { ...props }) });
|
|
616
624
|
};
|
|
617
625
|
var useFormField = () => {
|
|
618
|
-
const fieldContext =
|
|
619
|
-
const itemContext =
|
|
626
|
+
const fieldContext = React9.useContext(FormFieldContext);
|
|
627
|
+
const itemContext = React9.useContext(FormItemContext);
|
|
620
628
|
const { formState, getFieldState } = useFormContext();
|
|
621
629
|
if (!fieldContext) {
|
|
622
630
|
throw new Error("useFormField must be used within <FormField>");
|
|
@@ -635,18 +643,18 @@ var useFormField = () => {
|
|
|
635
643
|
...fieldState
|
|
636
644
|
};
|
|
637
645
|
};
|
|
638
|
-
var FormItemContext =
|
|
639
|
-
var FormItem =
|
|
646
|
+
var FormItemContext = React9.createContext(null);
|
|
647
|
+
var FormItem = React9.forwardRef(
|
|
640
648
|
({ className, ...props }, ref) => {
|
|
641
|
-
const id =
|
|
642
|
-
return /* @__PURE__ */
|
|
649
|
+
const id = React9.useId();
|
|
650
|
+
return /* @__PURE__ */ jsx12(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx12("div", { className: cn("space-y-1", className), ref, ...props }) });
|
|
643
651
|
}
|
|
644
652
|
);
|
|
645
653
|
FormItem.displayName = "FormItem";
|
|
646
|
-
var FormControl =
|
|
654
|
+
var FormControl = React9.forwardRef(
|
|
647
655
|
({ ...props }, ref) => {
|
|
648
656
|
const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
|
|
649
|
-
return /* @__PURE__ */
|
|
657
|
+
return /* @__PURE__ */ jsx12(
|
|
650
658
|
Slot2,
|
|
651
659
|
{
|
|
652
660
|
"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
|
|
@@ -659,14 +667,14 @@ var FormControl = React8.forwardRef(
|
|
|
659
667
|
}
|
|
660
668
|
);
|
|
661
669
|
FormControl.displayName = "FormControl";
|
|
662
|
-
var FormMessage =
|
|
670
|
+
var FormMessage = React9.forwardRef(
|
|
663
671
|
({ children, className, ...props }, ref) => {
|
|
664
672
|
const { error, formMessageId } = useFormField();
|
|
665
673
|
const body = error?.message ? String(error.message) : children;
|
|
666
674
|
if (!body) {
|
|
667
675
|
return null;
|
|
668
676
|
}
|
|
669
|
-
return /* @__PURE__ */
|
|
677
|
+
return /* @__PURE__ */ jsx12(
|
|
670
678
|
"p",
|
|
671
679
|
{
|
|
672
680
|
className: cn("text-destructive text-[0.8rem] font-medium", className),
|
|
@@ -685,10 +693,10 @@ import { EyeIcon, EyeSlashIcon, XIcon as XIcon2 } from "@phosphor-icons/react";
|
|
|
685
693
|
import { useState } from "react";
|
|
686
694
|
|
|
687
695
|
// src/components/input.tsx
|
|
688
|
-
import * as
|
|
689
|
-
import { jsx as
|
|
690
|
-
var Input =
|
|
691
|
-
return /* @__PURE__ */
|
|
696
|
+
import * as React10 from "react";
|
|
697
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
698
|
+
var Input = React10.forwardRef(({ className, onKeyDown, type, ...props }, ref) => {
|
|
699
|
+
return /* @__PURE__ */ jsx13(
|
|
692
700
|
"input",
|
|
693
701
|
{
|
|
694
702
|
className: cn(
|
|
@@ -720,14 +728,14 @@ Input.displayName = "Input";
|
|
|
720
728
|
// src/components/label.tsx
|
|
721
729
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
722
730
|
import { cva as cva3 } from "class-variance-authority";
|
|
723
|
-
import * as
|
|
724
|
-
import { jsx as
|
|
731
|
+
import * as React11 from "react";
|
|
732
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
725
733
|
var labelVariants = cva3("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
|
|
726
|
-
var Label =
|
|
734
|
+
var Label = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
|
|
727
735
|
Label.displayName = LabelPrimitive.Root.displayName;
|
|
728
736
|
|
|
729
737
|
// src/components/form-fields/label-field.tsx
|
|
730
|
-
import { jsx as
|
|
738
|
+
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
731
739
|
var LabelField = ({ label, labelClassName, name, visualRequired }) => {
|
|
732
740
|
return /* @__PURE__ */ jsxs10(
|
|
733
741
|
Label,
|
|
@@ -735,16 +743,16 @@ var LabelField = ({ label, labelClassName, name, visualRequired }) => {
|
|
|
735
743
|
className: cn("text-body mb-2 text-start text-sm leading-none font-normal tracking-normal", labelClassName),
|
|
736
744
|
htmlFor: name,
|
|
737
745
|
children: [
|
|
738
|
-
/* @__PURE__ */
|
|
746
|
+
/* @__PURE__ */ jsx15("span", { children: label }),
|
|
739
747
|
" ",
|
|
740
|
-
visualRequired && /* @__PURE__ */
|
|
748
|
+
visualRequired && /* @__PURE__ */ jsx15("span", { className: "text-destructive", children: " *" })
|
|
741
749
|
]
|
|
742
750
|
}
|
|
743
751
|
);
|
|
744
752
|
};
|
|
745
753
|
|
|
746
754
|
// src/components/form-fields/form-field-shell.tsx
|
|
747
|
-
import { jsx as
|
|
755
|
+
import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
748
756
|
var FormFieldShell = ({
|
|
749
757
|
children,
|
|
750
758
|
hasError,
|
|
@@ -754,7 +762,7 @@ var FormFieldShell = ({
|
|
|
754
762
|
name,
|
|
755
763
|
visualRequired
|
|
756
764
|
}) => /* @__PURE__ */ jsxs11(FormItem, { className: cn("flex flex-col", mainClassName), children: [
|
|
757
|
-
/* @__PURE__ */
|
|
765
|
+
/* @__PURE__ */ jsx16(
|
|
758
766
|
LabelField,
|
|
759
767
|
{
|
|
760
768
|
label,
|
|
@@ -763,12 +771,12 @@ var FormFieldShell = ({
|
|
|
763
771
|
visualRequired
|
|
764
772
|
}
|
|
765
773
|
),
|
|
766
|
-
/* @__PURE__ */
|
|
767
|
-
/* @__PURE__ */
|
|
774
|
+
/* @__PURE__ */ jsx16(FormControl, { children }),
|
|
775
|
+
/* @__PURE__ */ jsx16(FormMessage, {})
|
|
768
776
|
] });
|
|
769
777
|
|
|
770
778
|
// src/components/form-fields/input-field.tsx
|
|
771
|
-
import { jsx as
|
|
779
|
+
import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
772
780
|
var InputField = ({
|
|
773
781
|
clearLabel,
|
|
774
782
|
control,
|
|
@@ -793,14 +801,14 @@ var InputField = ({
|
|
|
793
801
|
};
|
|
794
802
|
const isPassword = type === "password";
|
|
795
803
|
const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type;
|
|
796
|
-
return /* @__PURE__ */
|
|
804
|
+
return /* @__PURE__ */ jsx17(
|
|
797
805
|
FormField,
|
|
798
806
|
{
|
|
799
807
|
control,
|
|
800
808
|
name,
|
|
801
809
|
render: ({ field, fieldState }) => {
|
|
802
810
|
const hasError = !!fieldState.error;
|
|
803
|
-
return /* @__PURE__ */
|
|
811
|
+
return /* @__PURE__ */ jsx17(
|
|
804
812
|
FormFieldShell,
|
|
805
813
|
{
|
|
806
814
|
hasError,
|
|
@@ -810,7 +818,7 @@ var InputField = ({
|
|
|
810
818
|
name,
|
|
811
819
|
visualRequired,
|
|
812
820
|
children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
|
|
813
|
-
/* @__PURE__ */
|
|
821
|
+
/* @__PURE__ */ jsx17(
|
|
814
822
|
Input,
|
|
815
823
|
{
|
|
816
824
|
...field,
|
|
@@ -831,24 +839,24 @@ var InputField = ({
|
|
|
831
839
|
}
|
|
832
840
|
),
|
|
833
841
|
/* @__PURE__ */ jsxs12("div", { className: "absolute inset-y-0 right-0 flex items-center space-x-2 pr-2", children: [
|
|
834
|
-
field.value && isClearable && /* @__PURE__ */
|
|
842
|
+
field.value && isClearable && /* @__PURE__ */ jsx17(
|
|
835
843
|
"button",
|
|
836
844
|
{
|
|
837
845
|
className: "focus:outline-none",
|
|
838
846
|
onClick: onClear,
|
|
839
847
|
title: clearLabel ?? t("inputField.clear"),
|
|
840
848
|
type: "button",
|
|
841
|
-
children: /* @__PURE__ */
|
|
849
|
+
children: /* @__PURE__ */ jsx17(XIcon2, { size: 18 })
|
|
842
850
|
}
|
|
843
851
|
),
|
|
844
|
-
type === "password" && /* @__PURE__ */
|
|
852
|
+
type === "password" && /* @__PURE__ */ jsx17(
|
|
845
853
|
"button",
|
|
846
854
|
{
|
|
847
855
|
className: "focus:outline-none",
|
|
848
856
|
onClick: togglePasswordVisibility,
|
|
849
857
|
title: isPasswordVisible ? hidePasswordLabel ?? t("inputField.hidePassword") : showPasswordLabel ?? t("inputField.showPassword"),
|
|
850
858
|
type: "button",
|
|
851
|
-
children: isPasswordVisible ? /* @__PURE__ */
|
|
859
|
+
children: isPasswordVisible ? /* @__PURE__ */ jsx17(EyeIcon, { size: 18 }) : /* @__PURE__ */ jsx17(EyeSlashIcon, { size: 20 })
|
|
852
860
|
}
|
|
853
861
|
)
|
|
854
862
|
] })
|
|
@@ -1077,7 +1085,7 @@ function useGoogleMapPicker({
|
|
|
1077
1085
|
}
|
|
1078
1086
|
|
|
1079
1087
|
// src/components/google-map-picker.tsx
|
|
1080
|
-
import { jsx as
|
|
1088
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1081
1089
|
var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
|
|
1082
1090
|
var MapPickerContent = (props) => {
|
|
1083
1091
|
const { disabled, hasError, mapId, placeholder } = props;
|
|
@@ -1095,7 +1103,7 @@ var MapPickerContent = (props) => {
|
|
|
1095
1103
|
} = useGoogleMapPicker(props);
|
|
1096
1104
|
return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3", children: [
|
|
1097
1105
|
/* @__PURE__ */ jsxs13("div", { className: "relative", children: [
|
|
1098
|
-
/* @__PURE__ */
|
|
1106
|
+
/* @__PURE__ */ jsx18(
|
|
1099
1107
|
"input",
|
|
1100
1108
|
{
|
|
1101
1109
|
className: cn(inputBase, inputFocus, hasError && "border-destructive"),
|
|
@@ -1108,14 +1116,14 @@ var MapPickerContent = (props) => {
|
|
|
1108
1116
|
value: inputValue
|
|
1109
1117
|
}
|
|
1110
1118
|
),
|
|
1111
|
-
showDropdown && suggestions.length > 0 && /* @__PURE__ */
|
|
1119
|
+
showDropdown && suggestions.length > 0 && /* @__PURE__ */ jsx18(
|
|
1112
1120
|
"ul",
|
|
1113
1121
|
{
|
|
1114
1122
|
className: cn(
|
|
1115
1123
|
"border-border bg-surface absolute mt-1 w-full overflow-hidden rounded-[10px] border shadow-md",
|
|
1116
1124
|
zPopover
|
|
1117
1125
|
),
|
|
1118
|
-
children: suggestions.map((suggestion) => /* @__PURE__ */
|
|
1126
|
+
children: suggestions.map((suggestion) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
|
|
1119
1127
|
"button",
|
|
1120
1128
|
{
|
|
1121
1129
|
className: "text-foreground hover:bg-hover w-full px-4 py-3 text-left text-sm transition-colors",
|
|
@@ -1127,7 +1135,7 @@ var MapPickerContent = (props) => {
|
|
|
1127
1135
|
}
|
|
1128
1136
|
)
|
|
1129
1137
|
] }),
|
|
1130
|
-
/* @__PURE__ */
|
|
1138
|
+
/* @__PURE__ */ jsx18("div", { className: "border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5", children: /* @__PURE__ */ jsx18(
|
|
1131
1139
|
Map2,
|
|
1132
1140
|
{
|
|
1133
1141
|
defaultCenter: DEFAULT_CENTER,
|
|
@@ -1138,15 +1146,15 @@ var MapPickerContent = (props) => {
|
|
|
1138
1146
|
mapId: mapId ?? import.meta.env.VITE_GOOGLE_MAPS_MAP_ID ?? "DEMO_MAP_ID",
|
|
1139
1147
|
onClick: handleMapClick,
|
|
1140
1148
|
style: { height: "100%", width: "100%" },
|
|
1141
|
-
children: position && /* @__PURE__ */
|
|
1149
|
+
children: position && /* @__PURE__ */ jsx18(AdvancedMarker, { draggable: !disabled, onDragEnd: handleMarkerDragEnd, position })
|
|
1142
1150
|
}
|
|
1143
1151
|
) })
|
|
1144
1152
|
] });
|
|
1145
1153
|
};
|
|
1146
|
-
var GoogleMapPicker = (props) => /* @__PURE__ */
|
|
1154
|
+
var GoogleMapPicker = (props) => /* @__PURE__ */ jsx18(APIProvider, { apiKey: props.apiKey ?? import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "", language: "es", region: "CO", children: /* @__PURE__ */ jsx18(MapPickerContent, { ...props }) });
|
|
1147
1155
|
|
|
1148
1156
|
// src/components/form-fields/map-picker-field.tsx
|
|
1149
|
-
import { jsx as
|
|
1157
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1150
1158
|
var MapPickerField = ({
|
|
1151
1159
|
control,
|
|
1152
1160
|
label,
|
|
@@ -1155,12 +1163,12 @@ var MapPickerField = ({
|
|
|
1155
1163
|
name,
|
|
1156
1164
|
visualRequired,
|
|
1157
1165
|
...pickerProps
|
|
1158
|
-
}) => /* @__PURE__ */
|
|
1166
|
+
}) => /* @__PURE__ */ jsx19(
|
|
1159
1167
|
FormField,
|
|
1160
1168
|
{
|
|
1161
1169
|
control,
|
|
1162
1170
|
name,
|
|
1163
|
-
render: ({ field, fieldState }) => /* @__PURE__ */
|
|
1171
|
+
render: ({ field, fieldState }) => /* @__PURE__ */ jsx19(
|
|
1164
1172
|
FormFieldShell,
|
|
1165
1173
|
{
|
|
1166
1174
|
hasError: !!fieldState.error,
|
|
@@ -1169,7 +1177,7 @@ var MapPickerField = ({
|
|
|
1169
1177
|
mainClassName,
|
|
1170
1178
|
name,
|
|
1171
1179
|
visualRequired,
|
|
1172
|
-
children: /* @__PURE__ */
|
|
1180
|
+
children: /* @__PURE__ */ jsx19(
|
|
1173
1181
|
GoogleMapPicker,
|
|
1174
1182
|
{
|
|
1175
1183
|
...pickerProps,
|
|
@@ -1185,14 +1193,14 @@ var MapPickerField = ({
|
|
|
1185
1193
|
|
|
1186
1194
|
// src/components/otp-input.tsx
|
|
1187
1195
|
import { OTPInput, OTPInputContext } from "input-otp";
|
|
1188
|
-
import
|
|
1189
|
-
import { jsx as
|
|
1196
|
+
import React12 from "react";
|
|
1197
|
+
import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1190
1198
|
function InputOTP({
|
|
1191
1199
|
className,
|
|
1192
1200
|
containerClassName,
|
|
1193
1201
|
...props
|
|
1194
1202
|
}) {
|
|
1195
|
-
return /* @__PURE__ */
|
|
1203
|
+
return /* @__PURE__ */ jsx20(
|
|
1196
1204
|
OTPInput,
|
|
1197
1205
|
{
|
|
1198
1206
|
className: cn("disabled:cursor-not-allowed", className),
|
|
@@ -1203,14 +1211,14 @@ function InputOTP({
|
|
|
1203
1211
|
);
|
|
1204
1212
|
}
|
|
1205
1213
|
function InputOTPGroup({ className, ...props }) {
|
|
1206
|
-
return /* @__PURE__ */
|
|
1214
|
+
return /* @__PURE__ */ jsx20("div", { className: cn("flex items-center gap-2", className), "data-slot": "input-otp-group", ...props });
|
|
1207
1215
|
}
|
|
1208
1216
|
function InputOTPSlot({
|
|
1209
1217
|
className,
|
|
1210
1218
|
index,
|
|
1211
1219
|
...props
|
|
1212
1220
|
}) {
|
|
1213
|
-
const inputOTPContext =
|
|
1221
|
+
const inputOTPContext = React12.useContext(OTPInputContext);
|
|
1214
1222
|
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
|
|
1215
1223
|
return /* @__PURE__ */ jsxs14(
|
|
1216
1224
|
"div",
|
|
@@ -1227,14 +1235,14 @@ function InputOTPSlot({
|
|
|
1227
1235
|
...props,
|
|
1228
1236
|
children: [
|
|
1229
1237
|
char,
|
|
1230
|
-
hasFakeCaret && /* @__PURE__ */
|
|
1238
|
+
hasFakeCaret && /* @__PURE__ */ jsx20("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx20("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) })
|
|
1231
1239
|
]
|
|
1232
1240
|
}
|
|
1233
1241
|
);
|
|
1234
1242
|
}
|
|
1235
1243
|
|
|
1236
1244
|
// src/components/form-fields/otp-field.tsx
|
|
1237
|
-
import { jsx as
|
|
1245
|
+
import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1238
1246
|
function OTPField({
|
|
1239
1247
|
autoFocus,
|
|
1240
1248
|
className,
|
|
@@ -1247,13 +1255,13 @@ function OTPField({
|
|
|
1247
1255
|
otpLength = 6,
|
|
1248
1256
|
visualRequired
|
|
1249
1257
|
}) {
|
|
1250
|
-
return /* @__PURE__ */
|
|
1258
|
+
return /* @__PURE__ */ jsx21(
|
|
1251
1259
|
FormField,
|
|
1252
1260
|
{
|
|
1253
1261
|
control,
|
|
1254
1262
|
name,
|
|
1255
1263
|
render: ({ field, fieldState }) => /* @__PURE__ */ jsxs15(FormItem, { className: cn("flex flex-col", className), children: [
|
|
1256
|
-
label ? /* @__PURE__ */
|
|
1264
|
+
label ? /* @__PURE__ */ jsx21(
|
|
1257
1265
|
LabelField,
|
|
1258
1266
|
{
|
|
1259
1267
|
label,
|
|
@@ -1262,7 +1270,7 @@ function OTPField({
|
|
|
1262
1270
|
visualRequired
|
|
1263
1271
|
}
|
|
1264
1272
|
) : null,
|
|
1265
|
-
/* @__PURE__ */
|
|
1273
|
+
/* @__PURE__ */ jsx21(FormControl, { children: /* @__PURE__ */ jsx21(
|
|
1266
1274
|
InputOTP,
|
|
1267
1275
|
{
|
|
1268
1276
|
"aria-invalid": fieldState.invalid || void 0,
|
|
@@ -1277,10 +1285,10 @@ function OTPField({
|
|
|
1277
1285
|
onPaste: (e) => field.onChange(e.clipboardData.getData("text")),
|
|
1278
1286
|
pattern: "[0-9]*",
|
|
1279
1287
|
value: field.value ?? "",
|
|
1280
|
-
children: /* @__PURE__ */
|
|
1288
|
+
children: /* @__PURE__ */ jsx21(InputOTPGroup, { children: Array.from({ length: otpLength }).map((_, i) => /* @__PURE__ */ jsx21(InputOTPSlot, { "aria-invalid": fieldState.invalid || void 0, index: i }, i)) })
|
|
1281
1289
|
}
|
|
1282
1290
|
) }),
|
|
1283
|
-
/* @__PURE__ */
|
|
1291
|
+
/* @__PURE__ */ jsx21(FormMessage, {})
|
|
1284
1292
|
] })
|
|
1285
1293
|
}
|
|
1286
1294
|
);
|
|
@@ -1292,11 +1300,11 @@ import { cloneElement, useCallback as useCallback2, useId as useId2, useMemo as
|
|
|
1292
1300
|
|
|
1293
1301
|
// src/components/popover.tsx
|
|
1294
1302
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
1295
|
-
import * as
|
|
1296
|
-
import { jsx as
|
|
1303
|
+
import * as React13 from "react";
|
|
1304
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
1297
1305
|
var Popover = PopoverPrimitive.Root;
|
|
1298
1306
|
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
1299
|
-
var PopoverContent =
|
|
1307
|
+
var PopoverContent = React13.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx22(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx22(
|
|
1300
1308
|
PopoverPrimitive.Content,
|
|
1301
1309
|
{
|
|
1302
1310
|
align,
|
|
@@ -1312,20 +1320,20 @@ var PopoverContent = React12.forwardRef(({ align = "center", className, sideOffs
|
|
|
1312
1320
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
1313
1321
|
|
|
1314
1322
|
// src/components/time-columns.tsx
|
|
1315
|
-
import * as
|
|
1316
|
-
import { jsx as
|
|
1323
|
+
import * as React14 from "react";
|
|
1324
|
+
import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1317
1325
|
var TimeColumns = ({ hours, minutes, onSelectHour, onSelectMinute, value }) => {
|
|
1318
1326
|
const [selectedHour, selectedMinute] = value ? value.split(":") : ["", ""];
|
|
1319
|
-
const hourListRef =
|
|
1320
|
-
const minuteListRef =
|
|
1321
|
-
|
|
1327
|
+
const hourListRef = React14.useRef(null);
|
|
1328
|
+
const minuteListRef = React14.useRef(null);
|
|
1329
|
+
React14.useEffect(() => {
|
|
1322
1330
|
hourListRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
|
|
1323
1331
|
minuteListRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
|
|
1324
1332
|
}, []);
|
|
1325
1333
|
return /* @__PURE__ */ jsxs16("div", { className: "divide-border flex divide-x", children: [
|
|
1326
|
-
/* @__PURE__ */
|
|
1334
|
+
/* @__PURE__ */ jsx23("div", { className: "max-h-60 flex-1 overflow-y-auto", ref: hourListRef, children: hours.map((hour) => {
|
|
1327
1335
|
const isSelected = hour === selectedHour;
|
|
1328
|
-
return /* @__PURE__ */
|
|
1336
|
+
return /* @__PURE__ */ jsx23(
|
|
1329
1337
|
"button",
|
|
1330
1338
|
{
|
|
1331
1339
|
className: cn(
|
|
@@ -1340,9 +1348,9 @@ var TimeColumns = ({ hours, minutes, onSelectHour, onSelectMinute, value }) => {
|
|
|
1340
1348
|
hour
|
|
1341
1349
|
);
|
|
1342
1350
|
}) }),
|
|
1343
|
-
/* @__PURE__ */
|
|
1351
|
+
/* @__PURE__ */ jsx23("div", { className: "max-h-60 flex-1 overflow-y-auto", ref: minuteListRef, children: minutes.map((minute) => {
|
|
1344
1352
|
const isSelected = minute === selectedMinute;
|
|
1345
|
-
return /* @__PURE__ */
|
|
1353
|
+
return /* @__PURE__ */ jsx23(
|
|
1346
1354
|
"button",
|
|
1347
1355
|
{
|
|
1348
1356
|
className: cn(
|
|
@@ -1401,7 +1409,7 @@ function useSelectFilter(items, labelKey, valueKey) {
|
|
|
1401
1409
|
}
|
|
1402
1410
|
|
|
1403
1411
|
// src/components/select-input.tsx
|
|
1404
|
-
import { Fragment as Fragment3, jsx as
|
|
1412
|
+
import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1405
1413
|
var SelectInput = (props) => {
|
|
1406
1414
|
const t = useUiT();
|
|
1407
1415
|
const {
|
|
@@ -1487,9 +1495,9 @@ var SelectInput = (props) => {
|
|
|
1487
1495
|
setPrevValue(value);
|
|
1488
1496
|
setValueItem(value);
|
|
1489
1497
|
}
|
|
1490
|
-
return /* @__PURE__ */
|
|
1498
|
+
return /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs17("div", { className: "relative flex flex-col justify-center", children: [
|
|
1491
1499
|
/* @__PURE__ */ jsxs17(Popover, { onOpenChange: setOpen, open, children: [
|
|
1492
|
-
/* @__PURE__ */
|
|
1500
|
+
/* @__PURE__ */ jsx24(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx24(
|
|
1493
1501
|
Button,
|
|
1494
1502
|
{
|
|
1495
1503
|
"aria-controls": listboxId,
|
|
@@ -1505,30 +1513,30 @@ var SelectInput = (props) => {
|
|
|
1505
1513
|
children: loading ? /* @__PURE__ */ jsxs17(Fragment3, { children: [
|
|
1506
1514
|
loadingLabel ?? t("selectInput.loading"),
|
|
1507
1515
|
" ",
|
|
1508
|
-
/* @__PURE__ */
|
|
1509
|
-
] }) : /* @__PURE__ */
|
|
1510
|
-
valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */
|
|
1511
|
-
/* @__PURE__ */
|
|
1516
|
+
/* @__PURE__ */ jsx24(Spinner, {})
|
|
1517
|
+
] }) : /* @__PURE__ */ jsx24("div", { className: "relative flex h-5 w-full items-center", children: timeField ? /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center justify-center gap-5 truncate", children: [
|
|
1518
|
+
valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx24("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder }),
|
|
1519
|
+
/* @__PURE__ */ jsx24(ClockIcon, { className: "h-4 w-4 shrink-0 opacity-50" })
|
|
1512
1520
|
] }) : /* @__PURE__ */ jsxs17(Fragment3, { children: [
|
|
1513
1521
|
/* @__PURE__ */ jsxs17("div", { className: "flex w-full max-w-[90%] items-center truncate", children: [
|
|
1514
|
-
leftIcon && /* @__PURE__ */
|
|
1515
|
-
valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */
|
|
1522
|
+
leftIcon && /* @__PURE__ */ jsx24("span", { className: "mr-2 shrink-0", children: cloneElement(leftIcon, { size: 20, strokeWidth: 1 }) }),
|
|
1523
|
+
valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx24("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder })
|
|
1516
1524
|
] }),
|
|
1517
1525
|
/* @__PURE__ */ jsxs17("div", { className: "absolute top-0.5 right-0 flex gap-2", children: [
|
|
1518
|
-
ableDeleteOption && /* @__PURE__ */
|
|
1519
|
-
!open ? /* @__PURE__ */
|
|
1526
|
+
ableDeleteOption && /* @__PURE__ */ jsx24("div", { "aria-hidden": true, className: "h-4 w-4 shrink-0" }),
|
|
1527
|
+
!open ? /* @__PURE__ */ jsx24(CaretDownIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx24(CaretUpIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
|
|
1520
1528
|
] })
|
|
1521
1529
|
] }) })
|
|
1522
1530
|
}
|
|
1523
1531
|
) }),
|
|
1524
|
-
/* @__PURE__ */
|
|
1532
|
+
/* @__PURE__ */ jsx24(
|
|
1525
1533
|
PopoverContent,
|
|
1526
1534
|
{
|
|
1527
1535
|
className: cn("bg-surface border-border rounded-sm p-1", zPopoverAboveDialog),
|
|
1528
1536
|
id: listboxId,
|
|
1529
1537
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
1530
1538
|
style: timeField ? { maxWidth: "auto", width: "180px" } : width > 0 ? { maxWidth: "auto", minWidth: `${width}px`, width: `${width}px` } : void 0,
|
|
1531
|
-
children: timeField ? /* @__PURE__ */
|
|
1539
|
+
children: timeField ? /* @__PURE__ */ jsx24(
|
|
1532
1540
|
TimeColumns,
|
|
1533
1541
|
{
|
|
1534
1542
|
hours: timeHours,
|
|
@@ -1538,7 +1546,7 @@ var SelectInput = (props) => {
|
|
|
1538
1546
|
value: valueItem
|
|
1539
1547
|
}
|
|
1540
1548
|
) : /* @__PURE__ */ jsxs17(Command, { className: "flex w-full flex-col gap-2", children: [
|
|
1541
|
-
search && /* @__PURE__ */
|
|
1549
|
+
search && /* @__PURE__ */ jsx24(
|
|
1542
1550
|
Input,
|
|
1543
1551
|
{
|
|
1544
1552
|
className: "mb-1 rounded-sm",
|
|
@@ -1547,11 +1555,11 @@ var SelectInput = (props) => {
|
|
|
1547
1555
|
value: query
|
|
1548
1556
|
}
|
|
1549
1557
|
),
|
|
1550
|
-
/* @__PURE__ */
|
|
1551
|
-
/* @__PURE__ */
|
|
1558
|
+
/* @__PURE__ */ jsx24(CommandEmpty, { className: "text-center", children: noResultsLabel ?? t("selectInput.noResults") }),
|
|
1559
|
+
/* @__PURE__ */ jsx24(CommandList, { children: /* @__PURE__ */ jsx24(CommandGroup, { className: "p-0", children: filteredOptions.map((item) => {
|
|
1552
1560
|
const labelValue = item[labelKey];
|
|
1553
1561
|
const valueValue = item[valueKey];
|
|
1554
|
-
return /* @__PURE__ */
|
|
1562
|
+
return /* @__PURE__ */ jsx24(
|
|
1555
1563
|
CommandItem,
|
|
1556
1564
|
{
|
|
1557
1565
|
className: cn(
|
|
@@ -1574,7 +1582,7 @@ var SelectInput = (props) => {
|
|
|
1574
1582
|
}
|
|
1575
1583
|
)
|
|
1576
1584
|
] }),
|
|
1577
|
-
ableDeleteOption && !loading && !timeField && /* @__PURE__ */
|
|
1585
|
+
ableDeleteOption && !loading && !timeField && /* @__PURE__ */ jsx24(
|
|
1578
1586
|
"button",
|
|
1579
1587
|
{
|
|
1580
1588
|
"aria-label": t("selectInput.clear"),
|
|
@@ -1587,14 +1595,14 @@ var SelectInput = (props) => {
|
|
|
1587
1595
|
setOpen(false);
|
|
1588
1596
|
},
|
|
1589
1597
|
type: "button",
|
|
1590
|
-
children: /* @__PURE__ */
|
|
1598
|
+
children: /* @__PURE__ */ jsx24(XIcon3, { className: "h-4 w-4 shrink-0 opacity-50" })
|
|
1591
1599
|
}
|
|
1592
1600
|
)
|
|
1593
1601
|
] }) });
|
|
1594
1602
|
};
|
|
1595
1603
|
|
|
1596
1604
|
// src/components/form-fields/select-field.tsx
|
|
1597
|
-
import { jsx as
|
|
1605
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1598
1606
|
var SelectField = ({
|
|
1599
1607
|
ableDeleteOption,
|
|
1600
1608
|
className,
|
|
@@ -1610,14 +1618,14 @@ var SelectField = ({
|
|
|
1610
1618
|
search,
|
|
1611
1619
|
visualRequired
|
|
1612
1620
|
}) => {
|
|
1613
|
-
return /* @__PURE__ */
|
|
1621
|
+
return /* @__PURE__ */ jsx25(
|
|
1614
1622
|
FormField,
|
|
1615
1623
|
{
|
|
1616
1624
|
control,
|
|
1617
1625
|
name,
|
|
1618
1626
|
render: ({ field, fieldState }) => {
|
|
1619
1627
|
const hasError = !!fieldState.error;
|
|
1620
|
-
return /* @__PURE__ */
|
|
1628
|
+
return /* @__PURE__ */ jsx25(
|
|
1621
1629
|
FormFieldShell,
|
|
1622
1630
|
{
|
|
1623
1631
|
hasError,
|
|
@@ -1626,7 +1634,7 @@ var SelectField = ({
|
|
|
1626
1634
|
mainClassName,
|
|
1627
1635
|
name,
|
|
1628
1636
|
visualRequired,
|
|
1629
|
-
children: /* @__PURE__ */
|
|
1637
|
+
children: /* @__PURE__ */ jsx25(
|
|
1630
1638
|
SelectInput,
|
|
1631
1639
|
{
|
|
1632
1640
|
ableDeleteOption,
|
|
@@ -1652,10 +1660,10 @@ var SelectField = ({
|
|
|
1652
1660
|
|
|
1653
1661
|
// src/components/password-checklist.tsx
|
|
1654
1662
|
import { CheckCircleIcon as CheckCircleIcon2, XCircleIcon } from "@phosphor-icons/react";
|
|
1655
|
-
import { jsx as
|
|
1663
|
+
import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1656
1664
|
var PasswordChecklist = ({ className, rules, value }) => {
|
|
1657
1665
|
if (rules.length === 0) return null;
|
|
1658
|
-
return /* @__PURE__ */
|
|
1666
|
+
return /* @__PURE__ */ jsx26("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
|
|
1659
1667
|
const isMet = rule.test(value);
|
|
1660
1668
|
const Icon = isMet ? CheckCircleIcon2 : XCircleIcon;
|
|
1661
1669
|
return /* @__PURE__ */ jsxs18(
|
|
@@ -1666,8 +1674,8 @@ var PasswordChecklist = ({ className, rules, value }) => {
|
|
|
1666
1674
|
isMet ? "text-success" : "text-inactive-text"
|
|
1667
1675
|
),
|
|
1668
1676
|
children: [
|
|
1669
|
-
/* @__PURE__ */
|
|
1670
|
-
/* @__PURE__ */
|
|
1677
|
+
/* @__PURE__ */ jsx26(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
|
|
1678
|
+
/* @__PURE__ */ jsx26("span", { children: rule.label })
|
|
1671
1679
|
]
|
|
1672
1680
|
},
|
|
1673
1681
|
rule.key
|
|
@@ -1675,12 +1683,6 @@ var PasswordChecklist = ({ className, rules, value }) => {
|
|
|
1675
1683
|
}) });
|
|
1676
1684
|
};
|
|
1677
1685
|
|
|
1678
|
-
// src/components/skeleton.tsx
|
|
1679
|
-
import * as React14 from "react";
|
|
1680
|
-
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
1681
|
-
var Skeleton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { className: cn("bg-inactive animate-pulse rounded-md", className), ref, ...props }));
|
|
1682
|
-
Skeleton.displayName = "Skeleton";
|
|
1683
|
-
|
|
1684
1686
|
// src/components/step-header.tsx
|
|
1685
1687
|
import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1686
1688
|
var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
|