@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.
Files changed (39) hide show
  1. package/dist/app/layout.css +29 -0
  2. package/dist/app/layout.css.map +1 -1
  3. package/dist/app/page.cjs +148 -8
  4. package/dist/app/page.cjs.map +1 -1
  5. package/dist/app/page.js +148 -8
  6. package/dist/app/page.js.map +1 -1
  7. package/dist/components/demos/PlacesQueryInputDemo.cjs +341 -0
  8. package/dist/components/demos/PlacesQueryInputDemo.cjs.map +1 -0
  9. package/dist/components/demos/PlacesQueryInputDemo.d.cts +5 -0
  10. package/dist/components/demos/PlacesQueryInputDemo.d.ts +5 -0
  11. package/dist/components/demos/PlacesQueryInputDemo.js +309 -0
  12. package/dist/components/demos/PlacesQueryInputDemo.js.map +1 -0
  13. package/dist/components/demos/index.cjs +146 -6
  14. package/dist/components/demos/index.cjs.map +1 -1
  15. package/dist/components/demos/index.js +146 -6
  16. package/dist/components/demos/index.js.map +1 -1
  17. package/dist/components/primitives/command.d.cts +1 -1
  18. package/dist/components/primitives/command.d.ts +1 -1
  19. package/dist/components/ui/PlacesQueryInput.cjs +321 -0
  20. package/dist/components/ui/PlacesQueryInput.cjs.map +1 -0
  21. package/dist/components/ui/PlacesQueryInput.d.cts +18 -0
  22. package/dist/components/ui/PlacesQueryInput.d.ts +18 -0
  23. package/dist/components/ui/PlacesQueryInput.js +289 -0
  24. package/dist/components/ui/PlacesQueryInput.js.map +1 -0
  25. package/dist/index.cjs +306 -185
  26. package/dist/index.cjs.map +1 -1
  27. package/dist/index.d.cts +2 -0
  28. package/dist/index.d.ts +2 -0
  29. package/dist/index.js +298 -178
  30. package/dist/index.js.map +1 -1
  31. package/dist/lib/google.cjs +43 -0
  32. package/dist/lib/google.cjs.map +1 -0
  33. package/dist/lib/google.d.cts +5 -0
  34. package/dist/lib/google.d.ts +5 -0
  35. package/dist/lib/google.js +19 -0
  36. package/dist/lib/google.js.map +1 -0
  37. package/dist/styles/globals.css +29 -0
  38. package/dist/styles/globals.css.map +1 -1
  39. package/package.json +22 -21
package/dist/index.cjs CHANGED
@@ -39,6 +39,7 @@ __export(index_exports, {
39
39
  Input: () => Input_default,
40
40
  Label: () => Label_default,
41
41
  ListItem: () => ListItem_default,
42
+ PlacesQueryInput: () => PlacesQueryInput_default,
42
43
  Select: () => Select_default,
43
44
  cn: () => cn
44
45
  });
@@ -531,132 +532,18 @@ var inputVariants = (0, import_cva2.cva)(
531
532
  );
532
533
  var Input_default = Input;
533
534
 
534
- // src/components/ui/Button.tsx
535
- var import_react_slot = require("@radix-ui/react-slot");
536
- var import_cva3 = require("cva");
537
- var import_react4 = require("react");
538
- var import_jsx_runtime10 = require("react/jsx-runtime");
539
- var Button = (0, import_react4.forwardRef)(
540
- ({ className, variant, size, asChild = false, ...props }, ref) => {
541
- const Component = asChild ? import_react_slot.Slot : "button";
542
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
543
- Component,
544
- {
545
- className: cn(buttonVariants({ variant, size, className })),
546
- ref,
547
- ...props
548
- }
549
- );
550
- }
551
- );
552
- Button.displayName = "Button";
553
- var buttonVariants = (0, import_cva3.cva)(
554
- [
555
- "flex",
556
- "items-center",
557
- "justify-center",
558
- "gap-2",
559
- "rounded-full",
560
- "font-bold",
561
- "outline-2",
562
- "outline-offset-2",
563
- "outline-dashed",
564
- "outline-transparent"
565
- ],
566
- {
567
- variants: {
568
- variant: {
569
- neutral: [
570
- "bg-black",
571
- "text-white",
572
- "hover:bg-grey-90",
573
- "active:bg-grey-80",
574
- "focus:outline-purple-100",
575
- "disabled:text-grey-40",
576
- "disabled:bg-grey-10"
577
- ],
578
- primary: [
579
- "bg-pickle-100",
580
- "text-black",
581
- "hover:bg-pickle-80",
582
- "active:bg-pickle-60",
583
- "focus:outline-purple-100",
584
- "disabled:text-grey-40",
585
- "disabled:bg-grey-10"
586
- ],
587
- secondary: [
588
- "bg-green-80",
589
- "text-white",
590
- "hover:bg-green-90",
591
- "active:bg-green-100",
592
- "focus:outline-pickle-100",
593
- "disabled:text-grey-40",
594
- "disabled:bg-grey-10"
595
- ],
596
- transparent: [
597
- "text-white",
598
- "hover:bg-green-80",
599
- "active:bg-green-100",
600
- "focus:outline-pickle-100",
601
- "disabled:text-grey-40"
602
- ],
603
- link: [
604
- "leading-tight",
605
- "text-black",
606
- "underline",
607
- "hover:text-purple-100",
608
- "focus:text-black",
609
- "focus:outline-purple-100",
610
- "active:text-purple-80"
611
- ]
612
- },
613
- size: {
614
- small: ["h-10", "text-sm", "px-4", "py-2"],
615
- medium: ["h-12", "text-base", "px-6", "py-3"],
616
- large: ["h-14", "text-lg", "px-8", "py-4"]
617
- }
618
- },
619
- defaultVariants: {
620
- variant: "neutral",
621
- size: "medium"
622
- },
623
- compoundVariants: [
624
- {
625
- variant: "link",
626
- size: "small",
627
- class: ["h-3", "text-xs", "p-0"]
628
- },
629
- {
630
- variant: "link",
631
- size: "medium",
632
- class: ["h-4", "text-sm", "p-0"]
633
- },
634
- {
635
- variant: "link",
636
- size: "large",
637
- class: ["h-6", "text-base", "p-0"]
638
- }
639
- ]
640
- }
641
- );
642
-
643
- // src/components/ui/Combobox.tsx
644
- var import_react5 = require("react");
645
- var import_lucide_react9 = require("lucide-react");
646
- var import_cva5 = require("cva");
647
-
648
535
  // src/components/primitives/command.tsx
649
536
  var import_cmdk = require("cmdk");
650
537
  var import_lucide_react8 = require("lucide-react");
651
- var React5 = __toESM(require("react"), 1);
538
+ var React4 = __toESM(require("react"), 1);
652
539
 
653
540
  // src/components/primitives/dialog.tsx
654
541
  var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
655
542
  var import_lucide_react7 = require("lucide-react");
656
- var React4 = __toESM(require("react"), 1);
657
- var import_jsx_runtime11 = require("react/jsx-runtime");
543
+ var React3 = __toESM(require("react"), 1);
544
+ var import_jsx_runtime10 = require("react/jsx-runtime");
658
545
  var DialogPortal = DialogPrimitive.Portal;
659
- var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
546
+ var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
660
547
  DialogPrimitive.Overlay,
661
548
  {
662
549
  ref,
@@ -668,9 +555,9 @@ var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PU
668
555
  }
669
556
  ));
670
557
  DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
671
- var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPortal, { children: [
672
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogOverlay, {}),
673
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
558
+ var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogPortal, { children: [
559
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogOverlay, {}),
560
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
674
561
  DialogPrimitive.Content,
675
562
  {
676
563
  ref,
@@ -681,18 +568,18 @@ var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) =
681
568
  ...props,
682
569
  children: [
683
570
  children,
684
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(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: [
685
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.X, { className: "h-4 w-4" }),
686
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Close" })
571
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(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: [
572
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.X, { className: "h-4 w-4" }),
573
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Close" })
687
574
  ] })
688
575
  ]
689
576
  }
690
577
  )
691
578
  ] }));
692
579
  DialogContent.displayName = DialogPrimitive.Content.displayName;
693
- var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
580
+ var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
694
581
  DialogHeader.displayName = "DialogHeader";
695
- var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
582
+ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
696
583
  "div",
697
584
  {
698
585
  className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -700,7 +587,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
700
587
  }
701
588
  );
702
589
  DialogFooter.displayName = "DialogFooter";
703
- var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
590
+ var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
704
591
  DialogPrimitive.Title,
705
592
  {
706
593
  ref,
@@ -709,7 +596,7 @@ var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
709
596
  }
710
597
  ));
711
598
  DialogTitle.displayName = DialogPrimitive.Title.displayName;
712
- var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
599
+ var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
713
600
  DialogPrimitive.Description,
714
601
  {
715
602
  ref,
@@ -720,8 +607,8 @@ var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @
720
607
  DialogDescription.displayName = DialogPrimitive.Description.displayName;
721
608
 
722
609
  // src/components/primitives/command.tsx
723
- var import_jsx_runtime12 = require("react/jsx-runtime");
724
- var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
610
+ var import_jsx_runtime11 = require("react/jsx-runtime");
611
+ var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
725
612
  import_cmdk.Command,
726
613
  {
727
614
  ref,
@@ -733,9 +620,9 @@ var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
733
620
  }
734
621
  ));
735
622
  Command.displayName = import_cmdk.Command.displayName;
736
- var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
737
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
738
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
623
+ var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
624
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
625
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
739
626
  import_cmdk.Command.Input,
740
627
  {
741
628
  ref,
@@ -748,7 +635,7 @@ var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PUR
748
635
  )
749
636
  ] }));
750
637
  CommandInput.displayName = import_cmdk.Command.Input.displayName;
751
- var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
638
+ var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
752
639
  import_cmdk.Command.List,
753
640
  {
754
641
  ref,
@@ -757,9 +644,9 @@ var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
757
644
  }
758
645
  ));
759
646
  CommandList.displayName = import_cmdk.Command.List.displayName;
760
- var CommandEmpty = React5.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
647
+ var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
761
648
  CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
762
- var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
649
+ var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
763
650
  import_cmdk.Command.Group,
764
651
  {
765
652
  ref,
@@ -771,7 +658,7 @@ var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PUR
771
658
  }
772
659
  ));
773
660
  CommandGroup.displayName = import_cmdk.Command.Group.displayName;
774
- var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
661
+ var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
775
662
  import_cmdk.Command.Separator,
776
663
  {
777
664
  ref,
@@ -780,7 +667,7 @@ var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @_
780
667
  }
781
668
  ));
782
669
  CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
783
- var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
670
+ var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
784
671
  import_cmdk.Command.Item,
785
672
  {
786
673
  ref,
@@ -793,7 +680,7 @@ var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
793
680
  ));
794
681
  CommandItem.displayName = import_cmdk.Command.Item.displayName;
795
682
  var CommandShortcut = ({ className, ...props }) => {
796
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
683
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
797
684
  "span",
798
685
  {
799
686
  className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -803,13 +690,246 @@ var CommandShortcut = ({ className, ...props }) => {
803
690
  };
804
691
  CommandShortcut.displayName = "CommandShortcut";
805
692
 
693
+ // src/lib/google.ts
694
+ var import_google_maps_services_js = require("@googlemaps/google-maps-services-js");
695
+ var client = new import_google_maps_services_js.Client();
696
+ var autocomplete = async (input, key) => {
697
+ try {
698
+ const response = await client.placeAutocomplete({
699
+ params: { input, key, types: import_google_maps_services_js.PlaceAutocompleteType.address }
700
+ });
701
+ return response.data.predictions;
702
+ } catch (error) {
703
+ console.error(error);
704
+ }
705
+ };
706
+
707
+ // src/components/ui/PlacesQueryInput.tsx
708
+ var import_lucide_react9 = require("lucide-react");
709
+ var import_react4 = require("react");
710
+ var import_jsx_runtime12 = require("react/jsx-runtime");
711
+ function PlacesQueryInput({
712
+ apiKey,
713
+ selected,
714
+ onSelect,
715
+ className
716
+ }) {
717
+ const [predictions, setPredictions] = (0, import_react4.useState)(null);
718
+ const [input, setInput] = (0, import_react4.useState)(selected?.description ?? "");
719
+ const [isLoadingPredictions, setIsLoadingPredictions] = (0, import_react4.useState)(false);
720
+ const [shouldOpenUpward, setShouldOpenUpward] = (0, import_react4.useState)(false);
721
+ const timeoutRef = (0, import_react4.useRef)(null);
722
+ const inputRef = (0, import_react4.useRef)(null);
723
+ const debouncedAutocomplete = (0, import_react4.useCallback)((value) => {
724
+ if (timeoutRef.current) {
725
+ clearTimeout(timeoutRef.current);
726
+ }
727
+ timeoutRef.current = setTimeout(async () => {
728
+ if (value.length > 2) {
729
+ setIsLoadingPredictions(true);
730
+ const fetchedPredictions = await autocomplete(value, apiKey);
731
+ fetchedPredictions && setIsLoadingPredictions(false);
732
+ setPredictions(fetchedPredictions ?? []);
733
+ } else {
734
+ setPredictions(null);
735
+ }
736
+ }, 300);
737
+ }, []);
738
+ const handleInputChange = (value) => {
739
+ setInput(value);
740
+ debouncedAutocomplete(value);
741
+ };
742
+ const handleSelect = (prediction) => {
743
+ onSelect(prediction);
744
+ setPredictions(null);
745
+ setInput(prediction.description);
746
+ };
747
+ const handleClear = () => {
748
+ onSelect();
749
+ setPredictions(null);
750
+ setInput("");
751
+ };
752
+ const handleBlur = () => setTimeout(() => setPredictions(null), 200);
753
+ (0, import_react4.useEffect)(() => {
754
+ const checkDropdownPosition = () => {
755
+ if (inputRef.current) {
756
+ const rect = inputRef.current.getBoundingClientRect();
757
+ const windowHeight = window.innerHeight;
758
+ setShouldOpenUpward(rect.bottom + 200 > windowHeight);
759
+ }
760
+ };
761
+ checkDropdownPosition();
762
+ window.addEventListener("resize", checkDropdownPosition);
763
+ return () => window.removeEventListener("resize", checkDropdownPosition);
764
+ }, []);
765
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("relative w-full", className), ref: inputRef, onBlur: handleBlur, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Command, { children: [
766
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative w-full", children: [
767
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
768
+ CommandInput,
769
+ {
770
+ placeholder: "Type an address to search...",
771
+ value: input,
772
+ onValueChange: handleInputChange,
773
+ className: "truncate pr-8"
774
+ }
775
+ ),
776
+ isLoadingPredictions && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react9.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" }),
777
+ input && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
778
+ "button",
779
+ {
780
+ type: "button",
781
+ 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",
782
+ onClick: handleClear,
783
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react9.CircleX, { className: "h-4 w-4 text-green-100" })
784
+ }
785
+ )
786
+ ] }),
787
+ predictions && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
788
+ CommandList,
789
+ {
790
+ className: cn(
791
+ "absolute z-50 w-full rounded-md border bg-white shadow-lg",
792
+ shouldOpenUpward ? "bottom-full" : "top-full"
793
+ ),
794
+ children: [
795
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CommandEmpty, { children: "No results" }),
796
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CommandGroup, { children: predictions.map((prediction) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
797
+ CommandItem,
798
+ {
799
+ onSelect: () => handleSelect(prediction),
800
+ className: "truncate",
801
+ children: prediction.description
802
+ },
803
+ prediction.place_id
804
+ )) })
805
+ ]
806
+ }
807
+ )
808
+ ] }) });
809
+ }
810
+ var PlacesQueryInput_default = PlacesQueryInput;
811
+
812
+ // src/components/ui/Button.tsx
813
+ var import_react_slot = require("@radix-ui/react-slot");
814
+ var import_cva3 = require("cva");
815
+ var import_react5 = require("react");
816
+ var import_jsx_runtime13 = require("react/jsx-runtime");
817
+ var Button = (0, import_react5.forwardRef)(
818
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
819
+ const Component = asChild ? import_react_slot.Slot : "button";
820
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
821
+ Component,
822
+ {
823
+ className: cn(buttonVariants({ variant, size, className })),
824
+ ref,
825
+ ...props
826
+ }
827
+ );
828
+ }
829
+ );
830
+ Button.displayName = "Button";
831
+ var buttonVariants = (0, import_cva3.cva)(
832
+ [
833
+ "flex",
834
+ "items-center",
835
+ "justify-center",
836
+ "gap-2",
837
+ "rounded-full",
838
+ "font-bold",
839
+ "outline-2",
840
+ "outline-offset-2",
841
+ "outline-dashed",
842
+ "outline-transparent"
843
+ ],
844
+ {
845
+ variants: {
846
+ variant: {
847
+ neutral: [
848
+ "bg-black",
849
+ "text-white",
850
+ "hover:bg-grey-90",
851
+ "active:bg-grey-80",
852
+ "focus:outline-purple-100",
853
+ "disabled:text-grey-40",
854
+ "disabled:bg-grey-10"
855
+ ],
856
+ primary: [
857
+ "bg-pickle-100",
858
+ "text-black",
859
+ "hover:bg-pickle-80",
860
+ "active:bg-pickle-60",
861
+ "focus:outline-purple-100",
862
+ "disabled:text-grey-40",
863
+ "disabled:bg-grey-10"
864
+ ],
865
+ secondary: [
866
+ "bg-green-80",
867
+ "text-white",
868
+ "hover:bg-green-90",
869
+ "active:bg-green-100",
870
+ "focus:outline-pickle-100",
871
+ "disabled:text-grey-40",
872
+ "disabled:bg-grey-10"
873
+ ],
874
+ transparent: [
875
+ "text-white",
876
+ "hover:bg-green-80",
877
+ "active:bg-green-100",
878
+ "focus:outline-pickle-100",
879
+ "disabled:text-grey-40"
880
+ ],
881
+ link: [
882
+ "leading-tight",
883
+ "text-black",
884
+ "underline",
885
+ "hover:text-purple-100",
886
+ "focus:text-black",
887
+ "focus:outline-purple-100",
888
+ "active:text-purple-80"
889
+ ]
890
+ },
891
+ size: {
892
+ small: ["h-10", "text-sm", "px-4", "py-2"],
893
+ medium: ["h-12", "text-base", "px-6", "py-3"],
894
+ large: ["h-14", "text-lg", "px-8", "py-4"]
895
+ }
896
+ },
897
+ defaultVariants: {
898
+ variant: "neutral",
899
+ size: "medium"
900
+ },
901
+ compoundVariants: [
902
+ {
903
+ variant: "link",
904
+ size: "small",
905
+ class: ["h-3", "text-xs", "p-0"]
906
+ },
907
+ {
908
+ variant: "link",
909
+ size: "medium",
910
+ class: ["h-4", "text-sm", "p-0"]
911
+ },
912
+ {
913
+ variant: "link",
914
+ size: "large",
915
+ class: ["h-6", "text-base", "p-0"]
916
+ }
917
+ ]
918
+ }
919
+ );
920
+
921
+ // src/components/ui/Combobox.tsx
922
+ var import_react6 = require("react");
923
+ var import_lucide_react10 = require("lucide-react");
924
+ var import_cva5 = require("cva");
925
+
806
926
  // src/components/primitives/popover.tsx
807
927
  var React6 = __toESM(require("react"), 1);
808
928
  var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
809
- var import_jsx_runtime13 = require("react/jsx-runtime");
929
+ var import_jsx_runtime14 = require("react/jsx-runtime");
810
930
  var Popover = PopoverPrimitive.Root;
811
931
  var PopoverTrigger = PopoverPrimitive.Trigger;
812
- var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
932
+ var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
813
933
  PopoverPrimitive.Content,
814
934
  {
815
935
  ref,
@@ -826,7 +946,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
826
946
 
827
947
  // src/components/ui/Badge.tsx
828
948
  var import_cva4 = require("cva");
829
- var import_jsx_runtime14 = require("react/jsx-runtime");
949
+ var import_jsx_runtime15 = require("react/jsx-runtime");
830
950
  var badgeVariants = (0, import_cva4.cva)("rounded-full px-2 py-0.5 text-xs font-semibold", {
831
951
  variants: {
832
952
  variant: {
@@ -840,12 +960,12 @@ var badgeVariants = (0, import_cva4.cva)("rounded-full px-2 py-0.5 text-xs font-
840
960
  }
841
961
  });
842
962
  function Badge({ className, variant, ...props }) {
843
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
963
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
844
964
  }
845
965
 
846
966
  // src/components/ui/Combobox.tsx
847
- var import_jsx_runtime15 = require("react/jsx-runtime");
848
- var Combobox = (0, import_react5.forwardRef)((props, ref) => {
967
+ var import_jsx_runtime16 = require("react/jsx-runtime");
968
+ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
849
969
  const {
850
970
  id,
851
971
  name,
@@ -864,16 +984,16 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
864
984
  onChange: handleChange,
865
985
  children: footer
866
986
  } = props;
867
- const [selected, setSelected] = (0, import_react5.useState)([]);
868
- const [open, setOpen] = (0, import_react5.useState)(false);
869
- const IconComponent = icon && import_lucide_react9.icons[icon];
987
+ const [selected, setSelected] = (0, import_react6.useState)([]);
988
+ const [open, setOpen] = (0, import_react6.useState)(false);
989
+ const IconComponent = icon && import_lucide_react10.icons[icon];
870
990
  const hideSearchBox = options?.length <= 5;
871
991
  const isDefault = variant === "default";
872
992
  const isChip = variant === "chip";
873
993
  const isEmpty = selected.length == 0;
874
994
  const showChevron = isDefault ? isEmpty : true;
875
995
  const close = () => setOpen(false);
876
- (0, import_react5.useEffect)(() => {
996
+ (0, import_react6.useEffect)(() => {
877
997
  const valueArray = multiselect ? value ?? [] : value ? [value] : [];
878
998
  setSelected(
879
999
  valueArray.map((v) => options.find((o) => o.value === v)).filter((v) => v !== void 0)
@@ -901,8 +1021,8 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
901
1021
  const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
902
1022
  return isDefault ? defaultLabel : label;
903
1023
  };
904
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex flex-col gap-1", className), children: [
905
- isDefault && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1024
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("flex flex-col gap-1", className), children: [
1025
+ isDefault && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
906
1026
  Label_default,
907
1027
  {
908
1028
  text: label,
@@ -912,15 +1032,15 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
912
1032
  className: classNames?.label
913
1033
  }
914
1034
  ),
915
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative flex", children: [
916
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
917
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1035
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative flex", children: [
1036
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
1037
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
918
1038
  PopoverTrigger,
919
1039
  {
920
1040
  asChild: true,
921
1041
  disabled: options.length === 0,
922
1042
  "data-testid": `${id ?? name}-combobox-trigger`,
923
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
1043
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
924
1044
  "div",
925
1045
  {
926
1046
  ref,
@@ -931,9 +1051,9 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
931
1051
  ),
932
1052
  "aria-expanded": open,
933
1053
  children: [
934
- isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
935
- isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Badge, { variant: "purple", children: selected.length }),
936
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1054
+ isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
1055
+ isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Badge, { variant: "purple", children: selected.length }),
1056
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
937
1057
  "span",
938
1058
  {
939
1059
  className: cn(
@@ -943,8 +1063,8 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
943
1063
  children: handleDisplayValue()
944
1064
  }
945
1065
  ),
946
- showChevron && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
947
- import_lucide_react9.ChevronDownIcon,
1066
+ showChevron && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1067
+ import_lucide_react10.ChevronDownIcon,
948
1068
  {
949
1069
  className: "shrink-0 transform group-data-[state=open]:rotate-180",
950
1070
  size: "16"
@@ -955,7 +1075,7 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
955
1075
  )
956
1076
  }
957
1077
  ),
958
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1078
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
959
1079
  PopoverContent,
960
1080
  {
961
1081
  className: cn(
@@ -966,16 +1086,16 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
966
1086
  collisionPadding: 8,
967
1087
  sideOffset: 4,
968
1088
  align: "start",
969
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Command, { children: [
970
- !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CommandInput, { placeholder: "Search..." }),
971
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CommandList, { children: [
972
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CommandEmpty, { children: "No results" }),
973
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1089
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Command, { children: [
1090
+ !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandInput, { placeholder: "Search..." }),
1091
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CommandList, { children: [
1092
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandEmpty, { children: "No results" }),
1093
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
974
1094
  CommandItem,
975
1095
  {
976
1096
  value: option.title,
977
1097
  onSelect: () => handleSelect(option.value),
978
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1098
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
979
1099
  ListItem_default,
980
1100
  {
981
1101
  className: cn(classNames?.items, "truncate py-1"),
@@ -988,19 +1108,19 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
988
1108
  id2
989
1109
  )) })
990
1110
  ] }),
991
- !!footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Separator, {}),
1111
+ !!footer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Separator, {}),
992
1112
  footer && footer({ close })
993
1113
  ] })
994
1114
  }
995
1115
  )
996
1116
  ] }),
997
- isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1117
+ isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
998
1118
  "button",
999
1119
  {
1000
1120
  type: "button",
1001
1121
  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",
1002
1122
  onClick: handleClear,
1003
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react9.CircleX, { className: "h-4 w-4 text-green-100" })
1123
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.CircleX, { className: "h-4 w-4 text-green-100" })
1004
1124
  }
1005
1125
  )
1006
1126
  ] })
@@ -1035,13 +1155,13 @@ var triggerVariants = (0, import_cva5.cva)(
1035
1155
 
1036
1156
  // src/components/ui/Counter.tsx
1037
1157
  var import_cva6 = require("cva");
1038
- var import_lucide_react10 = require("lucide-react");
1039
- var import_react6 = require("react");
1040
- var import_jsx_runtime16 = require("react/jsx-runtime");
1041
- var Counter = (0, import_react6.forwardRef)(
1158
+ var import_lucide_react11 = require("lucide-react");
1159
+ var import_react7 = require("react");
1160
+ var import_jsx_runtime17 = require("react/jsx-runtime");
1161
+ var Counter = (0, import_react7.forwardRef)(
1042
1162
  ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
1043
- const [count, setCount] = (0, import_react6.useState)(0);
1044
- (0, import_react6.useEffect)(() => {
1163
+ const [count, setCount] = (0, import_react7.useState)(0);
1164
+ (0, import_react7.useEffect)(() => {
1045
1165
  setCount(value ?? 0);
1046
1166
  }, [value]);
1047
1167
  const handleChange = (e) => {
@@ -1072,13 +1192,13 @@ var Counter = (0, import_react6.forwardRef)(
1072
1192
  onChange?.(newValue);
1073
1193
  setCount(newValue);
1074
1194
  };
1075
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
1195
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1076
1196
  "div",
1077
1197
  {
1078
1198
  className: cn("flex w-auto flex-col gap-1", classNames?.root),
1079
1199
  "data-testid": `counter-wrapper-${props.id}`,
1080
1200
  children: [
1081
- label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1201
+ label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1082
1202
  Label_default,
1083
1203
  {
1084
1204
  text: label,
@@ -1088,17 +1208,17 @@ var Counter = (0, import_react6.forwardRef)(
1088
1208
  className: classNames?.label
1089
1209
  }
1090
1210
  ),
1091
- /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative flex w-[122px] flex-row items-center", children: [
1092
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1211
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative flex w-[122px] flex-row items-center", children: [
1212
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1093
1213
  "button",
1094
1214
  {
1095
1215
  type: "button",
1096
1216
  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",
1097
1217
  onClick: decrement,
1098
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.Minus, { className: "h-4 w-4 text-green-100" })
1218
+ children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react11.Minus, { className: "h-4 w-4 text-green-100" })
1099
1219
  }
1100
1220
  ),
1101
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1221
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1102
1222
  "input",
1103
1223
  {
1104
1224
  className: cn(counterVariants({ theme }), classNames?.input),
@@ -1109,17 +1229,17 @@ var Counter = (0, import_react6.forwardRef)(
1109
1229
  ...props
1110
1230
  }
1111
1231
  ),
1112
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1232
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1113
1233
  "button",
1114
1234
  {
1115
1235
  type: "button",
1116
1236
  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",
1117
1237
  onClick: increment,
1118
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.Plus, { className: "h-4 w-4 text-green-100" })
1238
+ children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react11.Plus, { className: "h-4 w-4 text-green-100" })
1119
1239
  }
1120
1240
  )
1121
1241
  ] }),
1122
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage_default, { message: error })
1242
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorMessage_default, { message: error })
1123
1243
  ]
1124
1244
  }
1125
1245
  );
@@ -1186,6 +1306,7 @@ var counterVariants = (0, import_cva6.cva)(
1186
1306
  Input,
1187
1307
  Label,
1188
1308
  ListItem,
1309
+ PlacesQueryInput,
1189
1310
  Select,
1190
1311
  cn
1191
1312
  });