@algenium/blocks 1.15.0 → 1.16.0

package/dist/index.cjs

@@ -19,6 +19,8 @@ var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
 var cmdk = require('cmdk');
 var valid = require('card-validator');
+var RPNInput = require('react-phone-number-input');
+var flags = require('react-phone-number-input/flags');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -49,6 +51,8 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var valid__default = /*#__PURE__*/_interopDefault(valid);
+var RPNInput__namespace = /*#__PURE__*/_interopNamespace(RPNInput);
+var flags__default = /*#__PURE__*/_interopDefault(flags);
 
 var CalendarContext = React7.createContext(null);
 function useCalendarContext() {
@@ -10289,6 +10293,166 @@ function USAddressInput({
     ] })
   ] });
 }
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var PhoneInput = React7__namespace.forwardRef(
+  ({ className, onChange, value, defaultCountry = "MX", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RPNInput__namespace.default,
+      {
+        ref,
+        className: cn("flex", className),
+        flagComponent: FlagComponent,
+        countrySelectComponent: CountrySelect,
+        inputComponent: InputComponent,
+        smartCaret: false,
+        defaultCountry,
+        value: value || void 0,
+        onChange: (nextValue) => onChange?.(nextValue || ""),
+        ...props
+      }
+    );
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+var InputComponent = React7__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  Input,
+  {
+    className: cn("rounded-e-lg rounded-s-none", className),
+    ...props,
+    ref
+  }
+));
+InputComponent.displayName = "InputComponent";
+var CountrySelect = ({
+  disabled,
+  value: selectedCountry,
+  options: countryList,
+  onChange
+}) => {
+  const scrollAreaRef = React7__namespace.useRef(null);
+  const [searchValue, setSearchValue] = React7__namespace.useState("");
+  const [isOpen, setIsOpen] = React7__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Popover,
+    {
+      open: isOpen,
+      modal: true,
+      onOpenChange: (open) => {
+        setIsOpen(open);
+        if (open) setSearchValue("");
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            className: "flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10",
+            disabled,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FlagComponent,
+                {
+                  country: selectedCountry,
+                  countryName: selectedCountry
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ChevronsUpDown,
+                {
+                  className: cn(
+                    "-mr-2 size-4 opacity-50",
+                    disabled ? "hidden" : "opacity-100"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[300px] p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CommandInput,
+            {
+              value: searchValue,
+              onValueChange: (value) => {
+                setSearchValue(value);
+                setTimeout(() => {
+                  if (scrollAreaRef.current) {
+                    const viewportElement = scrollAreaRef.current.querySelector(
+                      "[data-radix-scroll-area-viewport]"
+                    );
+                    if (viewportElement) {
+                      viewportElement.scrollTop = 0;
+                    }
+                  }
+                }, 0);
+              },
+              placeholder: "Search country..."
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No country found." }),
+            /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: countryList.map(
+              ({ value, label }) => value ? /* @__PURE__ */ jsxRuntime.jsx(
+                CountrySelectOption,
+                {
+                  country: value,
+                  countryName: label,
+                  selectedCountry,
+                  onChange,
+                  onSelectComplete: () => setIsOpen(false)
+                },
+                value
+              ) : null
+            ) })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+};
+var CountrySelectOption = ({
+  country,
+  countryName,
+  selectedCountry,
+  onChange,
+  onSelectComplete
+}) => {
+  const handleSelect = () => {
+    onChange(country);
+    onSelectComplete();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(CommandItem, { className: "gap-2", onSelect: handleSelect, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { country, countryName }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm", children: countryName }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground/50", children: `+${RPNInput__namespace.getCountryCallingCode(country)}` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.CheckIcon,
+      {
+        className: `ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`
+      }
+    )
+  ] });
+};
+var FlagComponent = ({ country, countryName }) => {
+  const Flag2 = flags__default.default[country];
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg:not([class*='size-'])]:size-full", children: Flag2 && /* @__PURE__ */ jsxRuntime.jsx(Flag2, { title: countryName }) });
+};
 
 // src/data/mexicoStates.ts
 var MEXICO_STATES = [
@@ -10547,6 +10711,7 @@ exports.MiniCalendar = MiniCalendar;
 exports.NotificationsContext = NotificationsContext;
 exports.NotificationsWidget = NotificationsWidget;
 exports.OrgSwitcher = OrgSwitcher;
+exports.PhoneInput = PhoneInput;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;