@next-degree/pickle-shared-js 0.3.30 → 0.4.31
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/app/layout.css +29 -0
- package/dist/app/layout.css.map +1 -1
- package/dist/app/page.cjs +148 -8
- package/dist/app/page.cjs.map +1 -1
- package/dist/app/page.js +148 -8
- package/dist/app/page.js.map +1 -1
- package/dist/components/demos/PlacesQueryInputDemo.cjs +341 -0
- package/dist/components/demos/PlacesQueryInputDemo.cjs.map +1 -0
- package/dist/components/demos/PlacesQueryInputDemo.d.cts +5 -0
- package/dist/components/demos/PlacesQueryInputDemo.d.ts +5 -0
- package/dist/components/demos/PlacesQueryInputDemo.js +309 -0
- package/dist/components/demos/PlacesQueryInputDemo.js.map +1 -0
- package/dist/components/demos/index.cjs +146 -6
- package/dist/components/demos/index.cjs.map +1 -1
- package/dist/components/demos/index.js +146 -6
- package/dist/components/demos/index.js.map +1 -1
- package/dist/components/primitives/command.d.cts +1 -1
- package/dist/components/primitives/command.d.ts +1 -1
- package/dist/components/ui/PlacesQueryInput.cjs +321 -0
- package/dist/components/ui/PlacesQueryInput.cjs.map +1 -0
- package/dist/components/ui/PlacesQueryInput.d.cts +18 -0
- package/dist/components/ui/PlacesQueryInput.d.ts +18 -0
- package/dist/components/ui/PlacesQueryInput.js +289 -0
- package/dist/components/ui/PlacesQueryInput.js.map +1 -0
- package/dist/index.cjs +306 -185
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +298 -178
- package/dist/index.js.map +1 -1
- package/dist/lib/google.cjs +43 -0
- package/dist/lib/google.cjs.map +1 -0
- package/dist/lib/google.d.cts +5 -0
- package/dist/lib/google.d.ts +5 -0
- package/dist/lib/google.js +19 -0
- package/dist/lib/google.js.map +1 -0
- package/dist/styles/globals.css +29 -0
- package/dist/styles/globals.css.map +1 -1
- package/package.json +22 -21
package/dist/index.js
CHANGED
|
@@ -492,132 +492,18 @@ var inputVariants = cva2(
|
|
|
492
492
|
);
|
|
493
493
|
var Input_default = Input;
|
|
494
494
|
|
|
495
|
-
// src/components/ui/Button.tsx
|
|
496
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
497
|
-
import { cva as cva3 } from "cva";
|
|
498
|
-
import { forwardRef as forwardRef6 } from "react";
|
|
499
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
500
|
-
var Button = forwardRef6(
|
|
501
|
-
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
502
|
-
const Component = asChild ? Slot : "button";
|
|
503
|
-
return /* @__PURE__ */ jsx10(
|
|
504
|
-
Component,
|
|
505
|
-
{
|
|
506
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
507
|
-
ref,
|
|
508
|
-
...props
|
|
509
|
-
}
|
|
510
|
-
);
|
|
511
|
-
}
|
|
512
|
-
);
|
|
513
|
-
Button.displayName = "Button";
|
|
514
|
-
var buttonVariants = cva3(
|
|
515
|
-
[
|
|
516
|
-
"flex",
|
|
517
|
-
"items-center",
|
|
518
|
-
"justify-center",
|
|
519
|
-
"gap-2",
|
|
520
|
-
"rounded-full",
|
|
521
|
-
"font-bold",
|
|
522
|
-
"outline-2",
|
|
523
|
-
"outline-offset-2",
|
|
524
|
-
"outline-dashed",
|
|
525
|
-
"outline-transparent"
|
|
526
|
-
],
|
|
527
|
-
{
|
|
528
|
-
variants: {
|
|
529
|
-
variant: {
|
|
530
|
-
neutral: [
|
|
531
|
-
"bg-black",
|
|
532
|
-
"text-white",
|
|
533
|
-
"hover:bg-grey-90",
|
|
534
|
-
"active:bg-grey-80",
|
|
535
|
-
"focus:outline-purple-100",
|
|
536
|
-
"disabled:text-grey-40",
|
|
537
|
-
"disabled:bg-grey-10"
|
|
538
|
-
],
|
|
539
|
-
primary: [
|
|
540
|
-
"bg-pickle-100",
|
|
541
|
-
"text-black",
|
|
542
|
-
"hover:bg-pickle-80",
|
|
543
|
-
"active:bg-pickle-60",
|
|
544
|
-
"focus:outline-purple-100",
|
|
545
|
-
"disabled:text-grey-40",
|
|
546
|
-
"disabled:bg-grey-10"
|
|
547
|
-
],
|
|
548
|
-
secondary: [
|
|
549
|
-
"bg-green-80",
|
|
550
|
-
"text-white",
|
|
551
|
-
"hover:bg-green-90",
|
|
552
|
-
"active:bg-green-100",
|
|
553
|
-
"focus:outline-pickle-100",
|
|
554
|
-
"disabled:text-grey-40",
|
|
555
|
-
"disabled:bg-grey-10"
|
|
556
|
-
],
|
|
557
|
-
transparent: [
|
|
558
|
-
"text-white",
|
|
559
|
-
"hover:bg-green-80",
|
|
560
|
-
"active:bg-green-100",
|
|
561
|
-
"focus:outline-pickle-100",
|
|
562
|
-
"disabled:text-grey-40"
|
|
563
|
-
],
|
|
564
|
-
link: [
|
|
565
|
-
"leading-tight",
|
|
566
|
-
"text-black",
|
|
567
|
-
"underline",
|
|
568
|
-
"hover:text-purple-100",
|
|
569
|
-
"focus:text-black",
|
|
570
|
-
"focus:outline-purple-100",
|
|
571
|
-
"active:text-purple-80"
|
|
572
|
-
]
|
|
573
|
-
},
|
|
574
|
-
size: {
|
|
575
|
-
small: ["h-10", "text-sm", "px-4", "py-2"],
|
|
576
|
-
medium: ["h-12", "text-base", "px-6", "py-3"],
|
|
577
|
-
large: ["h-14", "text-lg", "px-8", "py-4"]
|
|
578
|
-
}
|
|
579
|
-
},
|
|
580
|
-
defaultVariants: {
|
|
581
|
-
variant: "neutral",
|
|
582
|
-
size: "medium"
|
|
583
|
-
},
|
|
584
|
-
compoundVariants: [
|
|
585
|
-
{
|
|
586
|
-
variant: "link",
|
|
587
|
-
size: "small",
|
|
588
|
-
class: ["h-3", "text-xs", "p-0"]
|
|
589
|
-
},
|
|
590
|
-
{
|
|
591
|
-
variant: "link",
|
|
592
|
-
size: "medium",
|
|
593
|
-
class: ["h-4", "text-sm", "p-0"]
|
|
594
|
-
},
|
|
595
|
-
{
|
|
596
|
-
variant: "link",
|
|
597
|
-
size: "large",
|
|
598
|
-
class: ["h-6", "text-base", "p-0"]
|
|
599
|
-
}
|
|
600
|
-
]
|
|
601
|
-
}
|
|
602
|
-
);
|
|
603
|
-
|
|
604
|
-
// src/components/ui/Combobox.tsx
|
|
605
|
-
import { forwardRef as forwardRef10, useEffect as useEffect2, useState as useState2 } from "react";
|
|
606
|
-
import { ChevronDownIcon as ChevronDownIcon2, CircleX, icons as icons3 } from "lucide-react";
|
|
607
|
-
import { cva as cva5 } from "cva";
|
|
608
|
-
|
|
609
495
|
// src/components/primitives/command.tsx
|
|
610
496
|
import { Command as CommandPrimitive } from "cmdk";
|
|
611
497
|
import { Search } from "lucide-react";
|
|
612
|
-
import * as
|
|
498
|
+
import * as React4 from "react";
|
|
613
499
|
|
|
614
500
|
// src/components/primitives/dialog.tsx
|
|
615
501
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
616
502
|
import { X as X3 } from "lucide-react";
|
|
617
|
-
import * as
|
|
618
|
-
import { jsx as
|
|
503
|
+
import * as React3 from "react";
|
|
504
|
+
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
619
505
|
var DialogPortal = DialogPrimitive.Portal;
|
|
620
|
-
var DialogOverlay =
|
|
506
|
+
var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
|
|
621
507
|
DialogPrimitive.Overlay,
|
|
622
508
|
{
|
|
623
509
|
ref,
|
|
@@ -629,8 +515,8 @@ var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
629
515
|
}
|
|
630
516
|
));
|
|
631
517
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
632
|
-
var DialogContent =
|
|
633
|
-
/* @__PURE__ */
|
|
518
|
+
var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(DialogPortal, { children: [
|
|
519
|
+
/* @__PURE__ */ jsx10(DialogOverlay, {}),
|
|
634
520
|
/* @__PURE__ */ jsxs6(
|
|
635
521
|
DialogPrimitive.Content,
|
|
636
522
|
{
|
|
@@ -643,17 +529,17 @@ var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) =
|
|
|
643
529
|
children: [
|
|
644
530
|
children,
|
|
645
531
|
/* @__PURE__ */ jsxs6(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400", children: [
|
|
646
|
-
/* @__PURE__ */
|
|
647
|
-
/* @__PURE__ */
|
|
532
|
+
/* @__PURE__ */ jsx10(X3, { className: "h-4 w-4" }),
|
|
533
|
+
/* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
|
|
648
534
|
] })
|
|
649
535
|
]
|
|
650
536
|
}
|
|
651
537
|
)
|
|
652
538
|
] }));
|
|
653
539
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
654
|
-
var DialogHeader = ({ className, ...props }) => /* @__PURE__ */
|
|
540
|
+
var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
|
|
655
541
|
DialogHeader.displayName = "DialogHeader";
|
|
656
|
-
var DialogFooter = ({ className, ...props }) => /* @__PURE__ */
|
|
542
|
+
var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx10(
|
|
657
543
|
"div",
|
|
658
544
|
{
|
|
659
545
|
className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
|
|
@@ -661,7 +547,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx11(
|
|
|
661
547
|
}
|
|
662
548
|
);
|
|
663
549
|
DialogFooter.displayName = "DialogFooter";
|
|
664
|
-
var DialogTitle =
|
|
550
|
+
var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
|
|
665
551
|
DialogPrimitive.Title,
|
|
666
552
|
{
|
|
667
553
|
ref,
|
|
@@ -670,7 +556,7 @@ var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
670
556
|
}
|
|
671
557
|
));
|
|
672
558
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
673
|
-
var DialogDescription =
|
|
559
|
+
var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
|
|
674
560
|
DialogPrimitive.Description,
|
|
675
561
|
{
|
|
676
562
|
ref,
|
|
@@ -681,8 +567,8 @@ var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
681
567
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
682
568
|
|
|
683
569
|
// src/components/primitives/command.tsx
|
|
684
|
-
import { jsx as
|
|
685
|
-
var Command =
|
|
570
|
+
import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
571
|
+
var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
686
572
|
CommandPrimitive,
|
|
687
573
|
{
|
|
688
574
|
ref,
|
|
@@ -694,9 +580,9 @@ var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
694
580
|
}
|
|
695
581
|
));
|
|
696
582
|
Command.displayName = CommandPrimitive.displayName;
|
|
697
|
-
var CommandInput =
|
|
698
|
-
/* @__PURE__ */
|
|
699
|
-
/* @__PURE__ */
|
|
583
|
+
var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs7("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
|
|
584
|
+
/* @__PURE__ */ jsx11(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
|
|
585
|
+
/* @__PURE__ */ jsx11(
|
|
700
586
|
CommandPrimitive.Input,
|
|
701
587
|
{
|
|
702
588
|
ref,
|
|
@@ -709,7 +595,7 @@ var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
709
595
|
)
|
|
710
596
|
] }));
|
|
711
597
|
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
|
712
|
-
var CommandList =
|
|
598
|
+
var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
713
599
|
CommandPrimitive.List,
|
|
714
600
|
{
|
|
715
601
|
ref,
|
|
@@ -718,9 +604,9 @@ var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
718
604
|
}
|
|
719
605
|
));
|
|
720
606
|
CommandList.displayName = CommandPrimitive.List.displayName;
|
|
721
|
-
var CommandEmpty =
|
|
607
|
+
var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx11(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
|
|
722
608
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
|
723
|
-
var CommandGroup =
|
|
609
|
+
var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
724
610
|
CommandPrimitive.Group,
|
|
725
611
|
{
|
|
726
612
|
ref,
|
|
@@ -732,7 +618,7 @@ var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
732
618
|
}
|
|
733
619
|
));
|
|
734
620
|
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
|
735
|
-
var CommandSeparator =
|
|
621
|
+
var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
736
622
|
CommandPrimitive.Separator,
|
|
737
623
|
{
|
|
738
624
|
ref,
|
|
@@ -741,7 +627,7 @@ var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @_
|
|
|
741
627
|
}
|
|
742
628
|
));
|
|
743
629
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
|
744
|
-
var CommandItem =
|
|
630
|
+
var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
745
631
|
CommandPrimitive.Item,
|
|
746
632
|
{
|
|
747
633
|
ref,
|
|
@@ -754,7 +640,7 @@ var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
754
640
|
));
|
|
755
641
|
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
|
756
642
|
var CommandShortcut = ({ className, ...props }) => {
|
|
757
|
-
return /* @__PURE__ */
|
|
643
|
+
return /* @__PURE__ */ jsx11(
|
|
758
644
|
"span",
|
|
759
645
|
{
|
|
760
646
|
className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
|
|
@@ -764,13 +650,246 @@ var CommandShortcut = ({ className, ...props }) => {
|
|
|
764
650
|
};
|
|
765
651
|
CommandShortcut.displayName = "CommandShortcut";
|
|
766
652
|
|
|
653
|
+
// src/lib/google.ts
|
|
654
|
+
import { Client, PlaceAutocompleteType } from "@googlemaps/google-maps-services-js";
|
|
655
|
+
var client = new Client();
|
|
656
|
+
var autocomplete = async (input, key) => {
|
|
657
|
+
try {
|
|
658
|
+
const response = await client.placeAutocomplete({
|
|
659
|
+
params: { input, key, types: PlaceAutocompleteType.address }
|
|
660
|
+
});
|
|
661
|
+
return response.data.predictions;
|
|
662
|
+
} catch (error) {
|
|
663
|
+
console.error(error);
|
|
664
|
+
}
|
|
665
|
+
};
|
|
666
|
+
|
|
667
|
+
// src/components/ui/PlacesQueryInput.tsx
|
|
668
|
+
import { CircleX, LoaderCircle } from "lucide-react";
|
|
669
|
+
import { useState as useState2, useCallback, useRef as useRef2, useEffect as useEffect2 } from "react";
|
|
670
|
+
import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
671
|
+
function PlacesQueryInput({
|
|
672
|
+
apiKey,
|
|
673
|
+
selected,
|
|
674
|
+
onSelect,
|
|
675
|
+
className
|
|
676
|
+
}) {
|
|
677
|
+
const [predictions, setPredictions] = useState2(null);
|
|
678
|
+
const [input, setInput] = useState2(selected?.description ?? "");
|
|
679
|
+
const [isLoadingPredictions, setIsLoadingPredictions] = useState2(false);
|
|
680
|
+
const [shouldOpenUpward, setShouldOpenUpward] = useState2(false);
|
|
681
|
+
const timeoutRef = useRef2(null);
|
|
682
|
+
const inputRef = useRef2(null);
|
|
683
|
+
const debouncedAutocomplete = useCallback((value) => {
|
|
684
|
+
if (timeoutRef.current) {
|
|
685
|
+
clearTimeout(timeoutRef.current);
|
|
686
|
+
}
|
|
687
|
+
timeoutRef.current = setTimeout(async () => {
|
|
688
|
+
if (value.length > 2) {
|
|
689
|
+
setIsLoadingPredictions(true);
|
|
690
|
+
const fetchedPredictions = await autocomplete(value, apiKey);
|
|
691
|
+
fetchedPredictions && setIsLoadingPredictions(false);
|
|
692
|
+
setPredictions(fetchedPredictions ?? []);
|
|
693
|
+
} else {
|
|
694
|
+
setPredictions(null);
|
|
695
|
+
}
|
|
696
|
+
}, 300);
|
|
697
|
+
}, []);
|
|
698
|
+
const handleInputChange = (value) => {
|
|
699
|
+
setInput(value);
|
|
700
|
+
debouncedAutocomplete(value);
|
|
701
|
+
};
|
|
702
|
+
const handleSelect = (prediction) => {
|
|
703
|
+
onSelect(prediction);
|
|
704
|
+
setPredictions(null);
|
|
705
|
+
setInput(prediction.description);
|
|
706
|
+
};
|
|
707
|
+
const handleClear = () => {
|
|
708
|
+
onSelect();
|
|
709
|
+
setPredictions(null);
|
|
710
|
+
setInput("");
|
|
711
|
+
};
|
|
712
|
+
const handleBlur = () => setTimeout(() => setPredictions(null), 200);
|
|
713
|
+
useEffect2(() => {
|
|
714
|
+
const checkDropdownPosition = () => {
|
|
715
|
+
if (inputRef.current) {
|
|
716
|
+
const rect = inputRef.current.getBoundingClientRect();
|
|
717
|
+
const windowHeight = window.innerHeight;
|
|
718
|
+
setShouldOpenUpward(rect.bottom + 200 > windowHeight);
|
|
719
|
+
}
|
|
720
|
+
};
|
|
721
|
+
checkDropdownPosition();
|
|
722
|
+
window.addEventListener("resize", checkDropdownPosition);
|
|
723
|
+
return () => window.removeEventListener("resize", checkDropdownPosition);
|
|
724
|
+
}, []);
|
|
725
|
+
return /* @__PURE__ */ jsx12("div", { className: cn("relative w-full", className), ref: inputRef, onBlur: handleBlur, children: /* @__PURE__ */ jsxs8(Command, { children: [
|
|
726
|
+
/* @__PURE__ */ jsxs8("div", { className: "relative w-full", children: [
|
|
727
|
+
/* @__PURE__ */ jsx12(
|
|
728
|
+
CommandInput,
|
|
729
|
+
{
|
|
730
|
+
placeholder: "Type an address to search...",
|
|
731
|
+
value: input,
|
|
732
|
+
onValueChange: handleInputChange,
|
|
733
|
+
className: "truncate pr-8"
|
|
734
|
+
}
|
|
735
|
+
),
|
|
736
|
+
isLoadingPredictions && /* @__PURE__ */ jsx12(LoaderCircle, { className: "absolute inset-y-0 right-2 my-auto flex h-8 w-8 animate-spin items-center justify-center rounded-full text-green-100" }),
|
|
737
|
+
input && /* @__PURE__ */ jsx12(
|
|
738
|
+
"button",
|
|
739
|
+
{
|
|
740
|
+
type: "button",
|
|
741
|
+
className: "absolute inset-y-0 right-2 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
|
|
742
|
+
onClick: handleClear,
|
|
743
|
+
children: /* @__PURE__ */ jsx12(CircleX, { className: "h-4 w-4 text-green-100" })
|
|
744
|
+
}
|
|
745
|
+
)
|
|
746
|
+
] }),
|
|
747
|
+
predictions && /* @__PURE__ */ jsxs8(
|
|
748
|
+
CommandList,
|
|
749
|
+
{
|
|
750
|
+
className: cn(
|
|
751
|
+
"absolute z-50 w-full rounded-md border bg-white shadow-lg",
|
|
752
|
+
shouldOpenUpward ? "bottom-full" : "top-full"
|
|
753
|
+
),
|
|
754
|
+
children: [
|
|
755
|
+
/* @__PURE__ */ jsx12(CommandEmpty, { children: "No results" }),
|
|
756
|
+
/* @__PURE__ */ jsx12(CommandGroup, { children: predictions.map((prediction) => /* @__PURE__ */ jsx12(
|
|
757
|
+
CommandItem,
|
|
758
|
+
{
|
|
759
|
+
onSelect: () => handleSelect(prediction),
|
|
760
|
+
className: "truncate",
|
|
761
|
+
children: prediction.description
|
|
762
|
+
},
|
|
763
|
+
prediction.place_id
|
|
764
|
+
)) })
|
|
765
|
+
]
|
|
766
|
+
}
|
|
767
|
+
)
|
|
768
|
+
] }) });
|
|
769
|
+
}
|
|
770
|
+
var PlacesQueryInput_default = PlacesQueryInput;
|
|
771
|
+
|
|
772
|
+
// src/components/ui/Button.tsx
|
|
773
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
774
|
+
import { cva as cva3 } from "cva";
|
|
775
|
+
import { forwardRef as forwardRef8 } from "react";
|
|
776
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
777
|
+
var Button = forwardRef8(
|
|
778
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
779
|
+
const Component = asChild ? Slot : "button";
|
|
780
|
+
return /* @__PURE__ */ jsx13(
|
|
781
|
+
Component,
|
|
782
|
+
{
|
|
783
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
784
|
+
ref,
|
|
785
|
+
...props
|
|
786
|
+
}
|
|
787
|
+
);
|
|
788
|
+
}
|
|
789
|
+
);
|
|
790
|
+
Button.displayName = "Button";
|
|
791
|
+
var buttonVariants = cva3(
|
|
792
|
+
[
|
|
793
|
+
"flex",
|
|
794
|
+
"items-center",
|
|
795
|
+
"justify-center",
|
|
796
|
+
"gap-2",
|
|
797
|
+
"rounded-full",
|
|
798
|
+
"font-bold",
|
|
799
|
+
"outline-2",
|
|
800
|
+
"outline-offset-2",
|
|
801
|
+
"outline-dashed",
|
|
802
|
+
"outline-transparent"
|
|
803
|
+
],
|
|
804
|
+
{
|
|
805
|
+
variants: {
|
|
806
|
+
variant: {
|
|
807
|
+
neutral: [
|
|
808
|
+
"bg-black",
|
|
809
|
+
"text-white",
|
|
810
|
+
"hover:bg-grey-90",
|
|
811
|
+
"active:bg-grey-80",
|
|
812
|
+
"focus:outline-purple-100",
|
|
813
|
+
"disabled:text-grey-40",
|
|
814
|
+
"disabled:bg-grey-10"
|
|
815
|
+
],
|
|
816
|
+
primary: [
|
|
817
|
+
"bg-pickle-100",
|
|
818
|
+
"text-black",
|
|
819
|
+
"hover:bg-pickle-80",
|
|
820
|
+
"active:bg-pickle-60",
|
|
821
|
+
"focus:outline-purple-100",
|
|
822
|
+
"disabled:text-grey-40",
|
|
823
|
+
"disabled:bg-grey-10"
|
|
824
|
+
],
|
|
825
|
+
secondary: [
|
|
826
|
+
"bg-green-80",
|
|
827
|
+
"text-white",
|
|
828
|
+
"hover:bg-green-90",
|
|
829
|
+
"active:bg-green-100",
|
|
830
|
+
"focus:outline-pickle-100",
|
|
831
|
+
"disabled:text-grey-40",
|
|
832
|
+
"disabled:bg-grey-10"
|
|
833
|
+
],
|
|
834
|
+
transparent: [
|
|
835
|
+
"text-white",
|
|
836
|
+
"hover:bg-green-80",
|
|
837
|
+
"active:bg-green-100",
|
|
838
|
+
"focus:outline-pickle-100",
|
|
839
|
+
"disabled:text-grey-40"
|
|
840
|
+
],
|
|
841
|
+
link: [
|
|
842
|
+
"leading-tight",
|
|
843
|
+
"text-black",
|
|
844
|
+
"underline",
|
|
845
|
+
"hover:text-purple-100",
|
|
846
|
+
"focus:text-black",
|
|
847
|
+
"focus:outline-purple-100",
|
|
848
|
+
"active:text-purple-80"
|
|
849
|
+
]
|
|
850
|
+
},
|
|
851
|
+
size: {
|
|
852
|
+
small: ["h-10", "text-sm", "px-4", "py-2"],
|
|
853
|
+
medium: ["h-12", "text-base", "px-6", "py-3"],
|
|
854
|
+
large: ["h-14", "text-lg", "px-8", "py-4"]
|
|
855
|
+
}
|
|
856
|
+
},
|
|
857
|
+
defaultVariants: {
|
|
858
|
+
variant: "neutral",
|
|
859
|
+
size: "medium"
|
|
860
|
+
},
|
|
861
|
+
compoundVariants: [
|
|
862
|
+
{
|
|
863
|
+
variant: "link",
|
|
864
|
+
size: "small",
|
|
865
|
+
class: ["h-3", "text-xs", "p-0"]
|
|
866
|
+
},
|
|
867
|
+
{
|
|
868
|
+
variant: "link",
|
|
869
|
+
size: "medium",
|
|
870
|
+
class: ["h-4", "text-sm", "p-0"]
|
|
871
|
+
},
|
|
872
|
+
{
|
|
873
|
+
variant: "link",
|
|
874
|
+
size: "large",
|
|
875
|
+
class: ["h-6", "text-base", "p-0"]
|
|
876
|
+
}
|
|
877
|
+
]
|
|
878
|
+
}
|
|
879
|
+
);
|
|
880
|
+
|
|
881
|
+
// src/components/ui/Combobox.tsx
|
|
882
|
+
import { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState3 } from "react";
|
|
883
|
+
import { ChevronDownIcon as ChevronDownIcon2, CircleX as CircleX2, icons as icons3 } from "lucide-react";
|
|
884
|
+
import { cva as cva5 } from "cva";
|
|
885
|
+
|
|
767
886
|
// src/components/primitives/popover.tsx
|
|
768
887
|
import * as React6 from "react";
|
|
769
888
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
770
|
-
import { jsx as
|
|
889
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
771
890
|
var Popover = PopoverPrimitive.Root;
|
|
772
891
|
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
773
|
-
var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */
|
|
892
|
+
var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx14(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx14(
|
|
774
893
|
PopoverPrimitive.Content,
|
|
775
894
|
{
|
|
776
895
|
ref,
|
|
@@ -787,7 +906,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
|
787
906
|
|
|
788
907
|
// src/components/ui/Badge.tsx
|
|
789
908
|
import { cva as cva4 } from "cva";
|
|
790
|
-
import { jsx as
|
|
909
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
791
910
|
var badgeVariants = cva4("rounded-full px-2 py-0.5 text-xs font-semibold", {
|
|
792
911
|
variants: {
|
|
793
912
|
variant: {
|
|
@@ -801,11 +920,11 @@ var badgeVariants = cva4("rounded-full px-2 py-0.5 text-xs font-semibold", {
|
|
|
801
920
|
}
|
|
802
921
|
});
|
|
803
922
|
function Badge({ className, variant, ...props }) {
|
|
804
|
-
return /* @__PURE__ */
|
|
923
|
+
return /* @__PURE__ */ jsx15("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
805
924
|
}
|
|
806
925
|
|
|
807
926
|
// src/components/ui/Combobox.tsx
|
|
808
|
-
import { jsx as
|
|
927
|
+
import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
809
928
|
var Combobox = forwardRef10((props, ref) => {
|
|
810
929
|
const {
|
|
811
930
|
id,
|
|
@@ -825,8 +944,8 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
825
944
|
onChange: handleChange,
|
|
826
945
|
children: footer
|
|
827
946
|
} = props;
|
|
828
|
-
const [selected, setSelected] =
|
|
829
|
-
const [open, setOpen] =
|
|
947
|
+
const [selected, setSelected] = useState3([]);
|
|
948
|
+
const [open, setOpen] = useState3(false);
|
|
830
949
|
const IconComponent = icon && icons3[icon];
|
|
831
950
|
const hideSearchBox = options?.length <= 5;
|
|
832
951
|
const isDefault = variant === "default";
|
|
@@ -834,7 +953,7 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
834
953
|
const isEmpty = selected.length == 0;
|
|
835
954
|
const showChevron = isDefault ? isEmpty : true;
|
|
836
955
|
const close = () => setOpen(false);
|
|
837
|
-
|
|
956
|
+
useEffect3(() => {
|
|
838
957
|
const valueArray = multiselect ? value ?? [] : value ? [value] : [];
|
|
839
958
|
setSelected(
|
|
840
959
|
valueArray.map((v) => options.find((o) => o.value === v)).filter((v) => v !== void 0)
|
|
@@ -862,8 +981,8 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
862
981
|
const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
|
|
863
982
|
return isDefault ? defaultLabel : label;
|
|
864
983
|
};
|
|
865
|
-
return /* @__PURE__ */
|
|
866
|
-
isDefault && /* @__PURE__ */
|
|
984
|
+
return /* @__PURE__ */ jsxs9("div", { className: cn("flex flex-col gap-1", className), children: [
|
|
985
|
+
isDefault && /* @__PURE__ */ jsx16(
|
|
867
986
|
Label_default,
|
|
868
987
|
{
|
|
869
988
|
text: label,
|
|
@@ -873,15 +992,15 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
873
992
|
className: classNames?.label
|
|
874
993
|
}
|
|
875
994
|
),
|
|
876
|
-
/* @__PURE__ */
|
|
877
|
-
/* @__PURE__ */
|
|
878
|
-
/* @__PURE__ */
|
|
995
|
+
/* @__PURE__ */ jsxs9("div", { className: "relative flex", children: [
|
|
996
|
+
/* @__PURE__ */ jsxs9(Popover, { open, onOpenChange: setOpen, children: [
|
|
997
|
+
/* @__PURE__ */ jsx16(
|
|
879
998
|
PopoverTrigger,
|
|
880
999
|
{
|
|
881
1000
|
asChild: true,
|
|
882
1001
|
disabled: options.length === 0,
|
|
883
1002
|
"data-testid": `${id ?? name}-combobox-trigger`,
|
|
884
|
-
children: /* @__PURE__ */
|
|
1003
|
+
children: /* @__PURE__ */ jsxs9(
|
|
885
1004
|
"div",
|
|
886
1005
|
{
|
|
887
1006
|
ref,
|
|
@@ -892,9 +1011,9 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
892
1011
|
),
|
|
893
1012
|
"aria-expanded": open,
|
|
894
1013
|
children: [
|
|
895
|
-
isDefault && IconComponent && /* @__PURE__ */
|
|
896
|
-
isChip && !isEmpty && /* @__PURE__ */
|
|
897
|
-
/* @__PURE__ */
|
|
1014
|
+
isDefault && IconComponent && /* @__PURE__ */ jsx16(IconComponent, { className: "h-4 w-4 shrink-0" }),
|
|
1015
|
+
isChip && !isEmpty && /* @__PURE__ */ jsx16(Badge, { variant: "purple", children: selected.length }),
|
|
1016
|
+
/* @__PURE__ */ jsx16(
|
|
898
1017
|
"span",
|
|
899
1018
|
{
|
|
900
1019
|
className: cn(
|
|
@@ -904,7 +1023,7 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
904
1023
|
children: handleDisplayValue()
|
|
905
1024
|
}
|
|
906
1025
|
),
|
|
907
|
-
showChevron && /* @__PURE__ */
|
|
1026
|
+
showChevron && /* @__PURE__ */ jsx16(
|
|
908
1027
|
ChevronDownIcon2,
|
|
909
1028
|
{
|
|
910
1029
|
className: "shrink-0 transform group-data-[state=open]:rotate-180",
|
|
@@ -916,7 +1035,7 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
916
1035
|
)
|
|
917
1036
|
}
|
|
918
1037
|
),
|
|
919
|
-
/* @__PURE__ */
|
|
1038
|
+
/* @__PURE__ */ jsx16(
|
|
920
1039
|
PopoverContent,
|
|
921
1040
|
{
|
|
922
1041
|
className: cn(
|
|
@@ -927,16 +1046,16 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
927
1046
|
collisionPadding: 8,
|
|
928
1047
|
sideOffset: 4,
|
|
929
1048
|
align: "start",
|
|
930
|
-
children: /* @__PURE__ */
|
|
931
|
-
!hideSearchBox && /* @__PURE__ */
|
|
932
|
-
/* @__PURE__ */
|
|
933
|
-
/* @__PURE__ */
|
|
934
|
-
/* @__PURE__ */
|
|
1049
|
+
children: /* @__PURE__ */ jsxs9(Command, { children: [
|
|
1050
|
+
!hideSearchBox && /* @__PURE__ */ jsx16(CommandInput, { placeholder: "Search..." }),
|
|
1051
|
+
/* @__PURE__ */ jsxs9(CommandList, { children: [
|
|
1052
|
+
/* @__PURE__ */ jsx16(CommandEmpty, { children: "No results" }),
|
|
1053
|
+
/* @__PURE__ */ jsx16(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ jsx16(
|
|
935
1054
|
CommandItem,
|
|
936
1055
|
{
|
|
937
1056
|
value: option.title,
|
|
938
1057
|
onSelect: () => handleSelect(option.value),
|
|
939
|
-
children: /* @__PURE__ */
|
|
1058
|
+
children: /* @__PURE__ */ jsx16(
|
|
940
1059
|
ListItem_default,
|
|
941
1060
|
{
|
|
942
1061
|
className: cn(classNames?.items, "truncate py-1"),
|
|
@@ -949,19 +1068,19 @@ var Combobox = forwardRef10((props, ref) => {
|
|
|
949
1068
|
id2
|
|
950
1069
|
)) })
|
|
951
1070
|
] }),
|
|
952
|
-
!!footer && /* @__PURE__ */
|
|
1071
|
+
!!footer && /* @__PURE__ */ jsx16(Separator, {}),
|
|
953
1072
|
footer && footer({ close })
|
|
954
1073
|
] })
|
|
955
1074
|
}
|
|
956
1075
|
)
|
|
957
1076
|
] }),
|
|
958
|
-
isDefault && !isEmpty && /* @__PURE__ */
|
|
1077
|
+
isDefault && !isEmpty && /* @__PURE__ */ jsx16(
|
|
959
1078
|
"button",
|
|
960
1079
|
{
|
|
961
1080
|
type: "button",
|
|
962
1081
|
className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
|
|
963
1082
|
onClick: handleClear,
|
|
964
|
-
children: /* @__PURE__ */
|
|
1083
|
+
children: /* @__PURE__ */ jsx16(CircleX2, { className: "h-4 w-4 text-green-100" })
|
|
965
1084
|
}
|
|
966
1085
|
)
|
|
967
1086
|
] })
|
|
@@ -997,12 +1116,12 @@ var triggerVariants = cva5(
|
|
|
997
1116
|
// src/components/ui/Counter.tsx
|
|
998
1117
|
import { cva as cva6 } from "cva";
|
|
999
1118
|
import { Minus as Minus2, Plus } from "lucide-react";
|
|
1000
|
-
import { forwardRef as forwardRef11, useEffect as
|
|
1001
|
-
import { jsx as
|
|
1119
|
+
import { forwardRef as forwardRef11, useEffect as useEffect4, useState as useState4 } from "react";
|
|
1120
|
+
import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1002
1121
|
var Counter = forwardRef11(
|
|
1003
1122
|
({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
|
|
1004
|
-
const [count, setCount] =
|
|
1005
|
-
|
|
1123
|
+
const [count, setCount] = useState4(0);
|
|
1124
|
+
useEffect4(() => {
|
|
1006
1125
|
setCount(value ?? 0);
|
|
1007
1126
|
}, [value]);
|
|
1008
1127
|
const handleChange = (e) => {
|
|
@@ -1033,13 +1152,13 @@ var Counter = forwardRef11(
|
|
|
1033
1152
|
onChange?.(newValue);
|
|
1034
1153
|
setCount(newValue);
|
|
1035
1154
|
};
|
|
1036
|
-
return /* @__PURE__ */
|
|
1155
|
+
return /* @__PURE__ */ jsxs10(
|
|
1037
1156
|
"div",
|
|
1038
1157
|
{
|
|
1039
1158
|
className: cn("flex w-auto flex-col gap-1", classNames?.root),
|
|
1040
1159
|
"data-testid": `counter-wrapper-${props.id}`,
|
|
1041
1160
|
children: [
|
|
1042
|
-
label && /* @__PURE__ */
|
|
1161
|
+
label && /* @__PURE__ */ jsx17(
|
|
1043
1162
|
Label_default,
|
|
1044
1163
|
{
|
|
1045
1164
|
text: label,
|
|
@@ -1049,17 +1168,17 @@ var Counter = forwardRef11(
|
|
|
1049
1168
|
className: classNames?.label
|
|
1050
1169
|
}
|
|
1051
1170
|
),
|
|
1052
|
-
/* @__PURE__ */
|
|
1053
|
-
/* @__PURE__ */
|
|
1171
|
+
/* @__PURE__ */ jsxs10("div", { className: "relative flex w-[122px] flex-row items-center", children: [
|
|
1172
|
+
/* @__PURE__ */ jsx17(
|
|
1054
1173
|
"button",
|
|
1055
1174
|
{
|
|
1056
1175
|
type: "button",
|
|
1057
1176
|
className: "absolute inset-y-0 left-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
|
|
1058
1177
|
onClick: decrement,
|
|
1059
|
-
children: /* @__PURE__ */
|
|
1178
|
+
children: /* @__PURE__ */ jsx17(Minus2, { className: "h-4 w-4 text-green-100" })
|
|
1060
1179
|
}
|
|
1061
1180
|
),
|
|
1062
|
-
/* @__PURE__ */
|
|
1181
|
+
/* @__PURE__ */ jsx17(
|
|
1063
1182
|
"input",
|
|
1064
1183
|
{
|
|
1065
1184
|
className: cn(counterVariants({ theme }), classNames?.input),
|
|
@@ -1070,17 +1189,17 @@ var Counter = forwardRef11(
|
|
|
1070
1189
|
...props
|
|
1071
1190
|
}
|
|
1072
1191
|
),
|
|
1073
|
-
/* @__PURE__ */
|
|
1192
|
+
/* @__PURE__ */ jsx17(
|
|
1074
1193
|
"button",
|
|
1075
1194
|
{
|
|
1076
1195
|
type: "button",
|
|
1077
1196
|
className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
|
|
1078
1197
|
onClick: increment,
|
|
1079
|
-
children: /* @__PURE__ */
|
|
1198
|
+
children: /* @__PURE__ */ jsx17(Plus, { className: "h-4 w-4 text-green-100" })
|
|
1080
1199
|
}
|
|
1081
1200
|
)
|
|
1082
1201
|
] }),
|
|
1083
|
-
/* @__PURE__ */
|
|
1202
|
+
/* @__PURE__ */ jsx17(ErrorMessage_default, { message: error })
|
|
1084
1203
|
]
|
|
1085
1204
|
}
|
|
1086
1205
|
);
|
|
@@ -1146,6 +1265,7 @@ export {
|
|
|
1146
1265
|
Input_default as Input,
|
|
1147
1266
|
Label_default as Label,
|
|
1148
1267
|
ListItem_default as ListItem,
|
|
1268
|
+
PlacesQueryInput_default as PlacesQueryInput,
|
|
1149
1269
|
Select_default as Select,
|
|
1150
1270
|
cn
|
|
1151
1271
|
};
|