@arkyn/components 3.0.1-beta.20 → 3.0.1-beta.22

package/src/components/multiSelect/multiSelectOption/styles.css

@@ -1,37 +0,0 @@
-.arkynMultiSelectOption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  font-weight: 400;
-  line-height: 21.79px;
-
-  color: var(--text-body);
-  user-select: none;
-}
-.arkynMultiSelectOption.md {
-  font-size: 14px;
-  padding: 8px 16px;
-}
-.arkynMultiSelectOption.lg {
-  font-size: 16px;
-  padding: 8px 16px;
-}
-.arkynMultiSelectOption svg {
-  display: none;
-  height: 20px;
-  width: 20px;
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynMultiSelectOption:hover {
-  cursor: pointer;
-  background-color: var(--card-foreground-primary);
-}
-.arkynMultiSelectOption.active {
-  font-weight: 600;
-  color: var(--text-heading);
-  background-color: var(--card-foreground-primary);
-}
-.arkynMultiSelectOption.active svg {
-  display: unset;
-}

package/src/components/multiSelect/multiSelectOptionsContainer/index.tsx

@@ -1,81 +0,0 @@
-import { Search } from "lucide-react";
-import { ChangeEvent, ReactNode, useEffect, useRef, useState } from "react";
-
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { Input } from "../../input";
-
-import "./styles.css";
-
-type MultiSelectOptionsContainerProps = {
-  isFocused: boolean;
-  isSearchable: boolean;
-  children: ReactNode;
-  search: string;
-  onSearch: (value: string) => void;
-};
-
-function MultiSelectOptionsContainer(props: MultiSelectOptionsContainerProps) {
-  const { children, isFocused, isSearchable, search, onSearch } = props;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<"bottom" | "top">("bottom");
-
-  useScrollLock(isFocused);
-
-  useEffect(() => {
-    if (!isFocused) 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();
-  }, [isFocused]);
-
-  function handleSearch(e: ChangeEvent<HTMLInputElement>) {
-    if (!isSearchable) return;
-    onSearch(e.target.value);
-  }
-
-  if (!isFocused) return <></>;
-
-  return (
-    <div
-      ref={containerRef}
-      className={`arkynMultiSelectOptionsContainer ${position}`}
-    >
-      {isSearchable && (
-        <Input
-          type="search"
-          name="search-select"
-          variant="underline"
-          leftIcon={Search}
-          value={search}
-          onChange={handleSearch}
-        />
-      )}
-
-      {children}
-    </div>
-  );
-}
-
-export { MultiSelectOptionsContainer };

package/src/components/multiSelect/multiSelectOptionsContainer/styles.css

@@ -1,45 +0,0 @@
-/* BASE CSS */
-.arkynMultiSelectOptionsContainer {
-  position: absolute;
-  z-index: 7;
-
-  left: -2px;
-  right: -2px;
-
-  border-radius: 6px;
-  list-style: none;
-
-  display: flex;
-  flex-direction: column;
-
-  flex: 1;
-  overflow: auto;
-  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);
-}
-
-/* BOTTOM POSITION (DEFAULT) */
-.arkynMultiSelectOptionsContainer.bottom {
-  top: calc(100% + 5px);
-}
-
-/* TOP POSITION */
-.arkynMultiSelectOptionsContainer.top {
-  bottom: calc(100% + 5px);
-}
-
-/* NOT FOUND TEXT */
-.arkynMultiSelectOptionsContainer > p {
-  font-weight: 400;
-  font-size: 14px;
-  padding: 16px;
-  text-align: center;
-  line-height: 21.79px;
-
-  color: var(--text-body);
-}

package/src/components/multiSelect/multiSelectOverlay/index.tsx

@@ -1,14 +0,0 @@
-import "./styles.css";
-
-type MultiSelectOverlayProps = {
-  isFocused: boolean;
-  handleBlur: () => void;
-};
-
-function MultiSelectOverlay(props: MultiSelectOverlayProps) {
-  const { isFocused, handleBlur } = props;
-  if (!isFocused) return <></>;
-  return <aside className="arkynMultiSelectOverlay" onClick={handleBlur} />;
-}
-
-export { MultiSelectOverlay };

package/src/components/multiSelect/multiSelectOverlay/styles.css

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

package/src/components/multiSelect/multiSelectSpinner/index.tsx

@@ -1,22 +0,0 @@
-import { Loader2 } from "lucide-react";
-import "./styles.css";
-
-type MultiSelectSpinnerProps = {
-  iconSize: number;
-  isLoading: boolean;
-};
-
-function MultiSelectSpinner(props: MultiSelectSpinnerProps) {
-  const { iconSize, isLoading } = props;
-
-  if (!isLoading) return <></>;
-  return (
-    <Loader2
-      className="arkynMultiSelectSpinner"
-      size={iconSize}
-      strokeWidth={2.5}
-    />
-  );
-}
-
-export { MultiSelectSpinner };

package/src/components/multiSelect/multiSelectSpinner/styles.css

@@ -1,12 +0,0 @@
-.arkynMultiSelectSpinner {
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

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;
-}