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

package/dist/PhoneNumberInput/CountrySelect.d.ts

@@ -0,0 +1,11 @@
+import { Country } from 'react-phone-number-input/min';
+export interface CountrySelectProps {
+    disabled?: boolean;
+    value: Country;
+    onChange: (value: Country) => void;
+    options: {
+        label: string;
+        value: Country | undefined;
+    }[];
+}
+export declare const CountrySelect: import('react').NamedExoticComponent<CountrySelectProps>;

package/dist/PhoneNumberInput/FlagComponent.d.ts

@@ -0,0 +1,2 @@
+import { FlagProps } from 'react-phone-number-input';
+export declare const FlagComponent: import('react').NamedExoticComponent<FlagProps>;

package/dist/PhoneNumberInput/InputComponent.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithRef } from 'react';
+import { Input } from '../Input';
+export interface InputComponentProps extends ComponentPropsWithRef<typeof Input.Field> {
+}
+export declare const InputComponent: import('react').NamedExoticComponent<InputComponentProps>;

package/dist/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from 'react';
+import { default as PhoneInput } from 'react-phone-number-input';
+import { PhoneNumberInputVariantProps } from './typings';
+export interface PhoneNumberInputProps extends Omit<ComponentPropsWithRef<typeof PhoneInput>, "inputComponent" | "flagComponent" | "countrySelectComponent">, PhoneNumberInputVariantProps {
+}
+export declare const PhoneNumberInput: import('react').NamedExoticComponent<PhoneNumberInputProps>;

package/dist/PhoneNumberInput/context.d.ts

@@ -0,0 +1,4 @@
+import { PhoneNumberInputVariantProps } from './typings';
+export interface IPhoneNumberInputContext extends Required<PhoneNumberInputVariantProps> {
+}
+export declare const PhoneNumberInputContext: import('react').Context<IPhoneNumberInputContext>;

package/dist/PhoneNumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PhoneNumberInput';
+export type * from './typings';

package/dist/PhoneNumberInput/typings.d.ts

@@ -0,0 +1,9 @@
+import { ComponentRadius } from '../Provider';
+import { AccentColorProps } from '../typings';
+export type PhoneNumberInputSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type PhoneNumberInputVariant = "surface" | "soft" | "outline" | "ghost";
+export interface PhoneNumberInputVariantProps extends AccentColorProps {
+    size?: PhoneNumberInputSize;
+    variant?: PhoneNumberInputVariant;
+    radius?: ComponentRadius;
+}

package/dist/blocks.js

@@ -18,6 +18,9 @@ import { useListItem, useMergeRefs, FloatingNode, FloatingPortal, FloatingOverla
 import * as RadixSeparator from "@radix-ui/react-separator";
 import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
+import PhoneInput from "react-phone-number-input";
+import { PhoneIcon, ChevronDownIcon } from "lucide-react";
+import { getCountryCallingCode } from "react-phone-number-input/min";
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as RadixProgress from "@radix-ui/react-progress";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
@@ -4379,6 +4382,95 @@ const OvermapErrorBoundary = memo((props) => {
   );
 });
 OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
+const PhoneNumberInputContext = createContext({});
+const FlagComponent = memo((props) => {
+  const { country } = props;
+  return country ? country : /* @__PURE__ */ jsx(PhoneIcon, { size: 16 });
+});
+FlagComponent.displayName = "FlagComponent";
+const CountrySelect = memo((props) => {
+  const { disabled, value, onChange, options } = props;
+  const { radius, size: size2, variant, accentColor } = use(PhoneNumberInputContext);
+  const handleSelect = useCallback(
+    (e) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: "relative",
+      accentColor,
+      radius,
+      size: size2,
+      variant,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            disabled,
+            value,
+            onChange: handleSelect,
+            className: "absolute inset-0 text-sm opacity-0",
+            "aria-label": "Select country",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select a country" }, "default"),
+              options.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxs("option", { value: option.value, children: [
+                option.label,
+                " ",
+                option.value && `+${getCountryCallingCode(option.value)}`
+              ] }, option.value ?? `empty-${i}`))
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+CountrySelect.displayName = "CountrySelect";
+const InputComponent = memo((props) => {
+  const { accentColor, radius, size: size2, variant } = use(PhoneNumberInputContext);
+  return /* @__PURE__ */ jsx(Input.Root, { variant, size: size2, radius, accentColor, children: /* @__PURE__ */ jsx(Input.Field, { ...props }) });
+});
+InputComponent.displayName = "InputComponent";
+const PhoneNumberInput = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    ref,
+    className,
+    size: size2 = "md",
+    variant = "outline",
+    radius = providerContext.radius,
+    accentColor = providerContext.accentColor,
+    ...rest
+  } = props;
+  const contextValue = useMemo(
+    () => ({
+      size: size2,
+      variant,
+      radius,
+      accentColor
+    }),
+    [accentColor, radius, size2, variant]
+  );
+  return /* @__PURE__ */ jsx(PhoneNumberInputContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    PhoneInput,
+    {
+      ref,
+      className: cx(className, "flex gap-1"),
+      flagComponent: FlagComponent,
+      countrySelectComponent: CountrySelect,
+      inputComponent: InputComponent,
+      "data-accent-color": accentColor,
+      ...rest
+    }
+  ) });
+});
+PhoneNumberInput.displayName = "PhoneNumberInput";
 const PopoverArrow = memo((props) => {
   const { ref, children, className, ...rest } = props;
   return /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest, children });
@@ -6642,6 +6734,7 @@ export {
   OverlayTitle,
   OverlayTrigger,
   OvermapErrorBoundary,
+  PhoneNumberInput,
   Popover,
   PopoverArrow,
   PopoverContent,