@arkyn/components 3.0.1-beta.21 → 3.0.1-beta.23

package/src/components/phoneInput/index.tsx

@@ -1,332 +0,0 @@
-import { countries } from "@arkyn/templates";
-import { useId, useRef, useState } from "react";
-
-import { useForm } from "../../hooks/useForm";
-import { getDefaultFormatPhoneNumber } from "../../utils/phoneInputUtilities";
-
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-
-import { PhoneInputContainer } from "./phoneInputContainer";
-import { PhoneInputCountriesOverlay } from "./phoneInputCountriesOverlay";
-import { PhoneInputCountryOption } from "./phoneInputCountryOption";
-import { PhoneInputCountryOptionsContainer } from "./phoneInputCountryOptionsContainer";
-import { PhoneInputCountrySelector } from "./phoneInputCountrySelector";
-import { PhoneInputMask } from "./phoneInputMask";
-
-type CountryType = {
-  name: string;
-  code: string;
-  iso: string;
-  prefix: null | string;
-  flag: string;
-  mask: string;
-};
-
-type PhoneInputProps = {
-  id?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  errorMessage?: string;
-  label?: string;
-  showAsterisk?: boolean;
-  isLoading?: boolean;
-  size?: "md" | "lg";
-  variant?: "solid" | "outline";
-  className?: string;
-  defaultValue?: string;
-  notFoundCountryText?: string;
-  name: string;
-  searchCountryPlaceholder?: string;
-  defaultCountry?: (typeof countries)[number]["iso"];
-  onChange?: (e: string) => void;
-};
-
-/**
- * PhoneInput component - used for international phone number input with country selection and automatic formatting
- *
- * @param props - PhoneInput component properties
- * @param props.name - Required field name for form handling and phone input identification
- * @param props.label - Optional label text to display above the phone input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the phone input
- * @param props.size - Size variant of the phone input. Default: "md"
- * @param props.variant - Visual variant of the phone input. Default: "solid"
- * @param props.defaultValue - Default phone number value for the input
- * @param props.defaultCountry - Default country ISO code to be selected. Uses country index 30 if not provided
- * @param props.disabled - Whether the phone input is disabled. Default: false
- * @param props.readOnly - Whether the phone input is read-only. Default: false
- * @param props.isLoading - Whether the phone input is in loading state. Default: false
- * @param props.className - Additional CSS classes for styling
- * @param props.id - Optional unique identifier for the input
- * @param props.searchCountryPlaceholder - Placeholder text for country search field. Default: "Pesquisar país"
- * @param props.notFoundCountryText - Text displayed when no countries match the search. Default: "Nenhum país encontrado"
- * @param props.onChange - Callback function called when phone number changes, receives the formatted value with country code
- *
- * @returns PhoneInput JSX element wrapped in FieldWrapper with country selector, masked input, and validation
- *
- * @example
- * ```tsx
- * // Basic phone input
- * <PhoneInput name="phone" />
- *
- * // Phone input with label and default country
- * <PhoneInput
- *   name="contactPhone"
- *   label="Contact Phone"
- *   defaultCountry="US"
- *   showAsterisk
- * />
- *
- * // Phone input with validation and custom text
- * <PhoneInput
- *   name="businessPhone"
- *   label="Business Phone"
- *   errorMessage="Please enter a valid phone number"
- *   searchCountryPlaceholder="Search country..."
- *   notFoundCountryText="Country not found"
- * />
- *
- * // Large phone input with default value
- * <PhoneInput
- *   name="emergencyContact"
- *   label="Emergency Contact"
- *   size="lg"
- *   variant="outline"
- *   defaultValue="+1 (555) 123-4567"
- *   defaultCountry="US"
- * />
- *
- * // Controlled phone input with callback
- * <PhoneInput
- *   name="userPhone"
- *   label="Your Phone Number"
- *   onChange={(formattedPhone) => {
- *     console.log('Phone number:', formattedPhone);
- *     setPhoneNumber(formattedPhone);
- *   }}
- *   defaultCountry="BR"
- *   showAsterisk
- * />
- *
- * // Read-only phone input for display
- * <PhoneInput
- *   name="displayPhone"
- *   label="Registered Phone"
- *   defaultValue="+55 11 99999-9999"
- *   readOnly
- *   variant="outline"
- * />
- *
- * // Disabled phone input
- * <PhoneInput
- *   name="lockedPhone"
- *   label="Phone (Locked)"
- *   defaultValue="+1 (555) 987-6543"
- *   disabled
- *   className="locked-field"
- * />
- *
- * // Phone input with loading state
- * <PhoneInput
- *   name="loadingPhone"
- *   label="Phone Number"
- *   isLoading
- *   defaultCountry="CA"
- * />
- * ```
- *
- * @remarks
- * This component provides:
- * - Automatic phone number formatting based on selected country
- * - Searchable country dropdown with flags and country codes
- * - Support for international phone number formats
- * - Integration with form validation systems
- * - Accessibility features with proper labeling
- *
- * The component uses country data from @arkyn/templates and automatically formats
- * phone numbers according to each country's specific format and mask patterns.
- */
-
-function PhoneInput(props: PhoneInputProps) {
-  const {
-    defaultCountry,
-    label,
-    className = "",
-    disabled = false,
-    errorMessage: baseErrorMessage,
-    isLoading = false,
-    readOnly = false,
-    size = "md",
-    defaultValue = "",
-    variant = "solid",
-    showAsterisk,
-    name,
-    onChange,
-    searchCountryPlaceholder = "Pesquisar país",
-    notFoundCountryText = "Nenhum país encontrado",
-    id,
-  } = props;
-
-  const defaultData = getDefaultFormatPhoneNumber(defaultValue);
-
-  const [isFocused, setIsFocused] = useState(false);
-  const [search, setSearch] = useState("");
-  const [showCountryOptions, setShowCountryOptions] = useState(false);
-  const [value, setValue] = useState(defaultData.formattedNumber || "");
-
-  const [currentCountry, setCurrentCountry] = useState<CountryType>(() => {
-    if (defaultData.country) return defaultData.country;
-
-    const country = countries.find((country) => country.iso === defaultCountry);
-    if (country) return country;
-
-    return countries[30];
-  });
-
-  const { fieldErrors } = useForm();
-
-  const phoneInputRef = useRef<HTMLInputElement>(null);
-  const phoneInputId = id || useId();
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-  const inputPhoneMaskRef = useRef<HTMLInputElement>(null);
-
-  function handleContainerFocus() {
-    if (isFocused || showCountryOptions) return;
-    setIsFocused(true);
-    if (inputPhoneMaskRef.current) inputPhoneMaskRef.current.focus();
-  }
-
-  function handleOpenCountryOptions() {
-    setShowCountryOptions(true);
-    setIsFocused(true);
-  }
-
-  function handleCloseCountryOptions() {
-    setShowCountryOptions(false);
-    setIsFocused(false);
-  }
-
-  function handleInputFocus() {
-    setIsFocused(true);
-  }
-
-  function handleInputBlur() {
-    setIsFocused(false);
-  }
-
-  function filterCountryFunction(country: CountryType) {
-    return country.name.toLowerCase().includes(search.toLowerCase());
-  }
-
-  function removeNumberMasks(number: string) {
-    if (currentCountry.prefix) {
-      return number
-        .replace(currentCountry.prefix, "")
-        .replaceAll(" ", "")
-        .replaceAll("-", "")
-        .replaceAll("(", "")
-        .replaceAll(")", "")
-        .trim();
-    }
-
-    return number
-      .replaceAll(" ", "")
-      .replaceAll("-", "")
-      .replaceAll("(", "")
-      .replaceAll(")", "")
-      .trim();
-  }
-
-  function inputValue(props?: string) {
-    let returnValue = currentCountry.code;
-    if (currentCountry.prefix) returnValue += `-${currentCountry.prefix}`;
-    returnValue += " ";
-    returnValue += removeNumberMasks(props || value);
-    return returnValue;
-  }
-
-  return (
-    <FieldWrapper>
-      {label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}
-
-      <PhoneInputContainer
-        id={phoneInputId}
-        disabled={disabled}
-        isError={isError}
-        isLoading={isLoading}
-        isFocused={isFocused}
-        readOnly={readOnly}
-        size={size}
-        variant={variant}
-        className={className}
-        onFocus={handleContainerFocus}
-      >
-        <PhoneInputCountrySelector
-          currentCountry={currentCountry}
-          onClick={handleOpenCountryOptions}
-          size={size}
-        />
-
-        <PhoneInputCountryOptionsContainer
-          isOpen={showCountryOptions}
-          search={search}
-          placeholder={searchCountryPlaceholder}
-          onSearch={setSearch}
-        >
-          {countries
-            .filter((country) => filterCountryFunction(country))
-            .map((country) => (
-              <PhoneInputCountryOption
-                key={country.iso}
-                country={country}
-                handleChangeValue={() => {
-                  setCurrentCountry(country);
-                  setShowCountryOptions(false);
-                  setValue(country.mask);
-                }}
-                isActive={country.iso === currentCountry.iso}
-                size={size}
-              />
-            ))}
-
-          {countries.filter((country) => filterCountryFunction(country))
-            .length === 0 && <p>{notFoundCountryText}</p>}
-        </PhoneInputCountryOptionsContainer>
-
-        <PhoneInputCountriesOverlay
-          isOpen={showCountryOptions}
-          onClick={handleCloseCountryOptions}
-        />
-
-        <PhoneInputMask
-          ref={inputPhoneMaskRef}
-          currentCountry={currentCountry}
-          value={value}
-          onChange={(e) => {
-            setValue(e);
-            onChange && onChange(inputValue(e));
-          }}
-          disabled={disabled}
-          onBlur={handleInputBlur}
-          onFocus={handleInputFocus}
-          size={size}
-        />
-
-        <input
-          ref={phoneInputRef}
-          type="hidden"
-          name={name}
-          value={inputValue()}
-        />
-      </PhoneInputContainer>
-
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { PhoneInput };

package/src/components/phoneInput/phoneInputContainer/index.tsx

@@ -1,46 +0,0 @@
-import { ReactNode } from "react";
-import "./styles.css";
-
-type PhoneInputContainerProps = {
-  children: ReactNode;
-  onFocus: () => void;
-  isError: boolean;
-  disabled: boolean;
-  readOnly: boolean;
-  isLoading: boolean;
-  isFocused: boolean;
-  className?: string;
-  id: string;
-  variant: "solid" | "outline";
-  size: "md" | "lg";
-};
-
-function PhoneInputContainer(props: PhoneInputContainerProps) {
-  const {
-    children,
-    onFocus,
-    disabled,
-    isError,
-    isLoading,
-    isFocused,
-    className: baseClassName = "",
-    readOnly,
-    variant,
-    size,
-    id,
-  } = props;
-
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkynPhoneInputContainer ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-
-  return (
-    <section id={id} className={className.trim()} onClick={onFocus}>
-      {children}
-    </section>
-  );
-}
-
-export { PhoneInputContainer };

package/src/components/phoneInput/phoneInputContainer/styles.css

@@ -1,59 +0,0 @@
-/* BASE CSS */
-.arkynPhoneInputContainer {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-
-  padding: 0 16px;
-  gap: 8px;
-  border-radius: 6px;
-
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-
-  min-height: 40px;
-  max-height: 40px;
-}
-.arkynPhoneInputContainer:hover {
-  cursor: text;
-}
-.arkynPhoneInputContainer.opacity {
-  opacity: 0.5;
-}
-
-/* VARIANTS */
-.arkynPhoneInputContainer.solid {
-  border-color: var(--border);
-  background-color: rgba(var(--input-background), 1);
-}
-.arkynPhoneInputContainer.solid.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynPhoneInputContainer:not(.opacity).solid.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynPhoneInputContainer.outline {
-  border-color: var(--border);
-}
-.arkynPhoneInputContainer.outline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynPhoneInputContainer:not(.opacity).outline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-/* SIZE */
-.arkynPhoneInputContainer.md {
-  min-height: 42px;
-  max-height: 42px;
-}
-.arkynPhoneInputContainer.lg {
-  min-height: 46px;
-  max-height: 46px;
-}

package/src/components/phoneInput/phoneInputCountriesOverlay/index.tsx

@@ -1,16 +0,0 @@
-import "./styles.css";
-
-type PhoneInputCountriesOverlayProps = {
-  isOpen: boolean;
-  onClick: () => void;
-};
-
-function PhoneInputCountriesOverlay(props: PhoneInputCountriesOverlayProps) {
-  const { isOpen, onClick } = props;
-  if (!isOpen) return <></>;
-  return (
-    <aside className="arkynPhoneInputCountriesOverlay" onClick={onClick} />
-  );
-}
-
-export { PhoneInputCountriesOverlay };

package/src/components/phoneInput/phoneInputCountriesOverlay/styles.css

@@ -1,8 +0,0 @@
-.arkynPhoneInputCountriesOverlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 5;
-}

package/src/components/phoneInput/phoneInputCountryOption/index.tsx

@@ -1,35 +0,0 @@
-import { Check } from "lucide-react";
-import "./styles.css";
-
-type CountryType = {
-  name: string;
-  code: string;
-  iso: string;
-  prefix: null | string;
-  flag: string;
-  mask: string;
-};
-
-type PhoneInputCountryOptionProps = {
-  country: CountryType;
-  size: "md" | "lg";
-  isActive: boolean;
-  handleChangeValue: (country: CountryType) => void;
-};
-
-function PhoneInputCountryOption(props: PhoneInputCountryOptionProps) {
-  const { country, isActive, handleChangeValue, size } = props;
-
-  const hasActive = isActive ? "active" : "";
-  const className = `arkynPhoneInputCountryOption ${size} ${hasActive}`;
-
-  return (
-    <div onClick={() => handleChangeValue(country)} className={className}>
-      <img src={country.flag} alt={country.name} className="flag" />
-      {country.name} <span>{country.code}</span>
-      <Check className="check" />
-    </div>
-  );
-}
-
-export { PhoneInputCountryOption };

package/src/components/phoneInput/phoneInputCountryOption/styles.css

@@ -1,50 +0,0 @@
-.arkynPhoneInputCountryOption {
-  display: flex;
-  align-items: center;
-
-  font-weight: 400;
-  line-height: 21.79px;
-
-  color: var(--text-body);
-  user-select: none;
-  gap: 10px;
-}
-.arkynPhoneInputCountryOption > span {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21.79px;
-  color: var(--text-muted);
-  font-weight: 300;
-}
-.arkynPhoneInputCountryOption.md {
-  font-size: 14px;
-  padding: 8px 16px;
-}
-.arkynPhoneInputCountryOption.lg {
-  font-size: 16px;
-  padding: 8px 16px;
-}
-.arkynPhoneInputCountryOption .flag {
-  max-height: 20px;
-  max-width: 30px;
-  border-radius: 4px;
-}
-.arkynPhoneInputCountryOption .check {
-  margin-left: auto;
-  display: none;
-  height: 20px;
-  width: 20px;
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynPhoneInputCountryOption:hover {
-  cursor: pointer;
-  background-color: var(--card-foreground-primary);
-}
-.arkynPhoneInputCountryOption.active {
-  font-weight: 600;
-  color: var(--text-heading);
-  background-color: var(--card-foreground-primary);
-}
-.arkynPhoneInputCountryOption.active svg {
-  display: unset;
-}

package/src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx

@@ -1,77 +0,0 @@
-import { ChangeEvent, ReactNode, useEffect, useRef, useState } from "react";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import "./styles.css";
-
-type PhoneInputCountryOptionsContainerProps = {
-  isOpen: boolean;
-  children: ReactNode;
-  search: string;
-  placeholder: string;
-  onSearch: (value: string) => void;
-};
-
-function PhoneInputCountryOptionsContainer(
-  props: PhoneInputCountryOptionsContainerProps
-) {
-  const { children, isOpen, onSearch, search, placeholder } = props;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<"bottom" | "top">("bottom");
-
-  function handleSearch(e: ChangeEvent<HTMLInputElement>) {
-    onSearch(e.target.value);
-  }
-
-  useScrollLock(isOpen);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const checkContainerPosition = () => {
-      if (!containerRef.current) return;
-
-      const parentElement = containerRef.current.parentElement;
-      if (!parentElement) return;
-
-      const parentRect = parentElement.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-
-      const estimatedContainerHeight = 300;
-      const spaceBelow = viewportHeight - parentRect.bottom;
-
-      if (
-        spaceBelow < estimatedContainerHeight &&
-        parentRect.top > estimatedContainerHeight
-      ) {
-        setPosition("top");
-      } else {
-        setPosition("bottom");
-      }
-    };
-
-    checkContainerPosition();
-  }, [isOpen]);
-
-  if (!isOpen) return <></>;
-
-  return (
-    <div
-      className={`arkynPhoneInputCountryOptionsContainer ${position}`}
-      ref={containerRef}
-    >
-      <input
-        type="search"
-        name="search-select"
-        className="arkynPhoneInputCountryOptionsContainerSearchSelect"
-        value={search}
-        id="input-search"
-        placeholder={placeholder}
-        onChange={handleSearch}
-      />
-
-      {children}
-    </div>
-  );
-}
-
-export { PhoneInputCountryOptionsContainer };

package/src/components/phoneInput/phoneInputCountryOptionsContainer/styles.css

@@ -1,59 +0,0 @@
-/* BASE CSS */
-.arkynPhoneInputCountryOptionsContainer {
-  position: absolute;
-  z-index: 7;
-
-  left: -2px;
-  right: -2px;
-
-  border-radius: 6px;
-  list-style: none;
-
-  display: flex;
-  flex-direction: column;
-
-  flex: 1;
-  overflow: hidden;
-  height: max-content;
-
-  border: 1px solid var(--border);
-  background-color: var(--card);
-
-  max-height: 300px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-
-  max-height: 200px;
-  overflow: auto;
-}
-
-.arkynPhoneInputCountryOptionsContainer.bottom {
-  top: calc(100% + 5px);
-}
-
-.arkynPhoneInputCountryOptionsContainer.top {
-  bottom: calc(100% + 5px);
-}
-
-/* NOT FOUND TEXT */
-.arkynPhoneInputCountryOptionsContainer > p {
-  font-weight: 400;
-  font-size: 14px;
-  padding: 16px;
-  text-align: center;
-  line-height: 21.79px;
-
-  color: var(--text-body);
-}
-
-.arkynPhoneInputCountryOptionsContainerSearchSelect {
-  padding: 16px;
-  border: none;
-  border-bottom: 1px solid var(--border);
-  outline: none;
-  color: var(--text-heading);
-  font-size: 14px;
-}
-
-.arkynPhoneInputCountryOptionsContainerSearchSelect::placeholder {
-  color: var(--text-muted);
-}