@overmap-ai/blocks 1.0.40-improvements.2 → 1.0.40-phone-input.0

package/dist/blocks.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@radix-ui/react-alert-dialog"), require("react/jsx-runtime"), require("class-variance-authority"), require("react"), require("@radix-ui/react-avatar"), require("@radix-ui/react-checkbox"), require("react-responsive"), require("cmdk"), require("@radix-ui/react-dialog"), require("react-day-picker"), require("lucide-react/dynamic"), require("@radix-ui/react-hover-card"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@floating-ui/react"), require("@radix-ui/react-separator"), require("@radix-ui/react-one-time-password-field"), require("react-error-boundary"), require("@radix-ui/react-popover"), require("@radix-ui/react-progress"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-tabs"), require("@radix-ui/react-slider"), require("@radix-ui/react-switch"), require("@radix-ui/react-toast"), require("@radix-ui/react-toggle"), require("@radix-ui/react-tooltip")) : typeof define === "function" && define.amd ? define(["exports", "@radix-ui/react-alert-dialog", "react/jsx-runtime", "class-variance-authority", "react", "@radix-ui/react-avatar", "@radix-ui/react-checkbox", "react-responsive", "cmdk", "@radix-ui/react-dialog", "react-day-picker", "lucide-react/dynamic", "@radix-ui/react-hover-card", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@floating-ui/react", "@radix-ui/react-separator", "@radix-ui/react-one-time-password-field", "react-error-boundary", "@radix-ui/react-popover", "@radix-ui/react-progress", "@radix-ui/react-radio-group", "@radix-ui/react-toggle-group", "@radix-ui/react-tabs", "@radix-ui/react-slider", "@radix-ui/react-switch", "@radix-ui/react-toast", "@radix-ui/react-toggle", "@radix-ui/react-tooltip"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.RadixAlertDialog, global.jsxRuntime, global.classVarianceAuthority, global.react, global.RadixAvatar, global.RadixCheckbox, global.reactResponsive, global.cmdk, global.RadixDialog, global.reactDayPicker, global.dynamic, global.RadixHoverCard, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.react$1, global.RadixSeparator, global.RadixOneTimePasswordField, global.reactErrorBoundary, global.RadixPopover, global.RadixProgress, global.RadixRadioGroup, global.RadixToggleGroup, global.RadixTabs, global.RadixSlider, global.RadixSwitch, global.RadixToast, global.Toggle, global.RadixTooltip));
-})(this, function(exports2, RadixAlertDialog, jsxRuntime, classVarianceAuthority, react, RadixAvatar, RadixCheckbox, reactResponsive, cmdk, RadixDialog, reactDayPicker, dynamic, RadixHoverCard, reactTransitionGroup, ReactDOM, reactSlot, react$1, RadixSeparator, RadixOneTimePasswordField, reactErrorBoundary, RadixPopover, RadixProgress, RadixRadioGroup, RadixToggleGroup, RadixTabs, RadixSlider, RadixSwitch, RadixToast, Toggle, RadixTooltip) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@radix-ui/react-alert-dialog"), require("react/jsx-runtime"), require("class-variance-authority"), require("react"), require("@radix-ui/react-avatar"), require("@radix-ui/react-checkbox"), require("react-responsive"), require("cmdk"), require("@radix-ui/react-dialog"), require("react-day-picker"), require("lucide-react/dynamic"), require("@radix-ui/react-hover-card"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@floating-ui/react"), require("@radix-ui/react-separator"), require("@radix-ui/react-one-time-password-field"), require("react-error-boundary"), require("react-phone-number-input"), require("lucide-react"), require("react-phone-number-input/min"), require("@radix-ui/react-popover"), require("@radix-ui/react-progress"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-tabs"), require("@radix-ui/react-slider"), require("@radix-ui/react-switch"), require("@radix-ui/react-toast"), require("@radix-ui/react-toggle"), require("@radix-ui/react-tooltip")) : typeof define === "function" && define.amd ? define(["exports", "@radix-ui/react-alert-dialog", "react/jsx-runtime", "class-variance-authority", "react", "@radix-ui/react-avatar", "@radix-ui/react-checkbox", "react-responsive", "cmdk", "@radix-ui/react-dialog", "react-day-picker", "lucide-react/dynamic", "@radix-ui/react-hover-card", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@floating-ui/react", "@radix-ui/react-separator", "@radix-ui/react-one-time-password-field", "react-error-boundary", "react-phone-number-input", "lucide-react", "react-phone-number-input/min", "@radix-ui/react-popover", "@radix-ui/react-progress", "@radix-ui/react-radio-group", "@radix-ui/react-toggle-group", "@radix-ui/react-tabs", "@radix-ui/react-slider", "@radix-ui/react-switch", "@radix-ui/react-toast", "@radix-ui/react-toggle", "@radix-ui/react-tooltip"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.RadixAlertDialog, global.jsxRuntime, global.classVarianceAuthority, global.react, global.RadixAvatar, global.RadixCheckbox, global.reactResponsive, global.cmdk, global.RadixDialog, global.reactDayPicker, global.dynamic, global.RadixHoverCard, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.react$1, global.RadixSeparator, global.RadixOneTimePasswordField, global.reactErrorBoundary, global.PhoneInput, global.lucideReact, global.min, global.RadixPopover, global.RadixProgress, global.RadixRadioGroup, global.RadixToggleGroup, global.RadixTabs, global.RadixSlider, global.RadixSwitch, global.RadixToast, global.Toggle, global.RadixTooltip));
+})(this, function(exports2, RadixAlertDialog, jsxRuntime, classVarianceAuthority, react, RadixAvatar, RadixCheckbox, reactResponsive, cmdk, RadixDialog, reactDayPicker, dynamic, RadixHoverCard, reactTransitionGroup, ReactDOM, reactSlot, react$1, RadixSeparator, RadixOneTimePasswordField, reactErrorBoundary, PhoneInput, lucideReact, min, RadixPopover, RadixProgress, RadixRadioGroup, RadixToggleGroup, RadixTabs, RadixSlider, RadixSwitch, RadixToast, Toggle, RadixTooltip) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -4385,6 +4385,95 @@
     );
   });
   OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
+  const PhoneNumberInputContext = react.createContext({});
+  const FlagComponent = react.memo((props) => {
+    const { country } = props;
+    return country ? country : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneIcon, { size: 16 });
+  });
+  FlagComponent.displayName = "FlagComponent";
+  const CountrySelect = react.memo((props) => {
+    const { disabled, value, onChange, options } = props;
+    const { radius, size, variant, accentColor } = react.use(PhoneNumberInputContext);
+    const handleSelect = react.useCallback(
+      (e) => {
+        onChange(e.target.value);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        className: "relative",
+        accentColor,
+        radius,
+        size,
+        variant,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { size: 16, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              disabled,
+              value,
+              onChange: handleSelect,
+              className: "absolute inset-0 text-sm opacity-0",
+              "aria-label": "Select country",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select a country" }, "default"),
+                options.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: option.value, children: [
+                  option.label,
+                  " ",
+                  option.value && `+${min.getCountryCallingCode(option.value)}`
+                ] }, option.value ?? `empty-${i}`))
+              ]
+            }
+          )
+        ]
+      }
+    );
+  });
+  CountrySelect.displayName = "CountrySelect";
+  const InputComponent = react.memo((props) => {
+    const { accentColor, radius, size, variant } = react.use(PhoneNumberInputContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(Input.Root, { variant, size, radius, accentColor, children: /* @__PURE__ */ jsxRuntime.jsx(Input.Field, { ...props }) });
+  });
+  InputComponent.displayName = "InputComponent";
+  const PhoneNumberInput = react.memo((props) => {
+    const providerContext = useProvider();
+    const {
+      ref,
+      className,
+      size = "md",
+      variant = "outline",
+      radius = providerContext.radius,
+      accentColor = providerContext.accentColor,
+      ...rest
+    } = props;
+    const contextValue = react.useMemo(
+      () => ({
+        size,
+        variant,
+        radius,
+        accentColor
+      }),
+      [accentColor, radius, size, variant]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(PhoneNumberInputContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      PhoneInput,
+      {
+        ref,
+        className: classVarianceAuthority.cx(className, "flex gap-1"),
+        flagComponent: FlagComponent,
+        countrySelectComponent: CountrySelect,
+        inputComponent: InputComponent,
+        "data-accent-color": accentColor,
+        ...rest
+      }
+    ) });
+  });
+  PhoneNumberInput.displayName = "PhoneNumberInput";
   const PopoverArrow = react.memo((props) => {
     const { ref, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Arrow, { className: classVarianceAuthority.cx("fill-(--base-6)", className), ref, ...rest, children });
@@ -6647,6 +6736,7 @@
   exports2.OverlayTitle = OverlayTitle;
   exports2.OverlayTrigger = OverlayTrigger;
   exports2.OvermapErrorBoundary = OvermapErrorBoundary;
+  exports2.PhoneNumberInput = PhoneNumberInput;
   exports2.Popover = Popover;
   exports2.PopoverArrow = PopoverArrow;
   exports2.PopoverContent = PopoverContent;