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

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

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

@@ -1,37 +0,0 @@
-import { ChevronDown } from "lucide-react";
-
-import { Divider } from "../../divider";
-import "./styles.css";
-
-type CountryType = {
-  name: string;
-  code: string;
-  iso: string;
-  prefix: null | string;
-  flag: string;
-  mask: string;
-};
-
-type PhoneInputCountrySelectorProps = {
-  size: "md" | "lg";
-  currentCountry: CountryType;
-  onClick: () => void;
-};
-
-function PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps) {
-  const { currentCountry, onClick } = props;
-
-  return (
-    <div className="phoneInputSelectCountry" onClick={onClick}>
-      <img
-        className="flag"
-        src={currentCountry.flag}
-        alt={currentCountry.name}
-      />
-      <ChevronDown className="chevronDown" strokeWidth={2.5} />
-      <Divider orientation="vertical" />
-    </div>
-  );
-}
-
-export { PhoneInputCountrySelector };

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

@@ -1,26 +0,0 @@
-.phoneInputSelectCountry {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  min-width: 58px;
-}
-
-.phoneInputSelectCountry .flag {
-  max-height: 20px;
-  max-width: 30px;
-  border-radius: 4px;
-}
-
-.phoneInputSelectCountry .chevronDown {
-  min-height: 12px;
-  max-height: 12px;
-  min-width: 12px;
-  max-width: 12px;
-  color: var(--text-muted);
-}
-
-.phoneInputSelectCountry > .arkynDivider {
-  min-width: 1px;
-  min-height: 20px;
-}

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

@@ -1,105 +0,0 @@
-import { InputMask } from "@react-input/mask";
-import {
-  ChangeEvent,
-  forwardRef,
-  InputHTMLAttributes,
-  useEffect,
-  useState,
-} from "react";
-
-import {
-  applyMask,
-  clear,
-  getMask,
-  MAX_LENGTH,
-  TYPES,
-} from "../../../utils/phoneInputUtilities";
-
-import "./style.css";
-
-type CountryType = {
-  name: string;
-  code: string;
-  iso: string;
-  prefix: null | string;
-  flag: string;
-  mask: string;
-};
-
-type PhoneInputMaskProps = {
-  onFocus: () => void;
-  onBlur: () => void;
-  disabled: boolean;
-  size: "md" | "lg";
-  currentCountry: CountryType;
-  value: string;
-  onChange: (e: string) => void;
-};
-
-const BaseInput = forwardRef<
-  HTMLInputElement,
-  InputHTMLAttributes<HTMLInputElement>
->((props, ref) => {
-  return <input ref={ref} {...props} />;
-});
-
-const PhoneInputMask = forwardRef<HTMLInputElement, PhoneInputMaskProps>(
-  (props, ref) => {
-    const { onFocus, onBlur, size, onChange, value, currentCountry, disabled } =
-      props;
-
-    const [isMounted, setIsMounted] = useState(false);
-
-    useEffect(() => {
-      if (isMounted) onChange(currentCountry.mask);
-      else setIsMounted(true);
-    }, [currentCountry]);
-
-    const className = `phoneInputMask ${size}`;
-
-    function handleChange(event: ChangeEvent<HTMLInputElement>) {
-      let value = clear(event.target.value);
-      const mask = getMask(value);
-
-      let nextLength = value.length;
-      if (nextLength > MAX_LENGTH) return;
-
-      value = applyMask(value, TYPES[mask] as "EIGHT" | "NINE");
-      event.target.value = value;
-
-      onChange(value);
-    }
-
-    if (currentCountry.code === "+55") {
-      return (
-        <input
-          value={value}
-          onChange={handleChange}
-          className={className}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={disabled}
-          ref={ref}
-        />
-      );
-    }
-
-    return (
-      <InputMask
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className={className}
-        component={BaseInput}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        disabled={disabled}
-        mask={currentCountry.mask}
-        showMask
-        replacement={{ _: /\d/ }}
-        ref={ref}
-      />
-    );
-  }
-);
-
-export { PhoneInputMask };

package/src/components/phoneInput/phoneInputMask/style.css

@@ -1,36 +0,0 @@
-.phoneInputMask {
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-  margin-left: 8px;
-}
-
-/* SIZE */
-.phoneInputMask.md {
-  min-height: 40px;
-  max-height: 40px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 400;
-}
-
-.phoneInputMask.md::placeholder {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.phoneInputMask.lg {
-  min-height: 44px;
-  max-height: 44px;
-  line-height: 16px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.phoneInputMask.lg::placeholder {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
-}

package/src/components/radio/radioBox/index.tsx

@@ -1,124 +0,0 @@
-import { ButtonHTMLAttributes } from "react";
-
-import { useForm } from "../../../hooks/useForm";
-import { useRadioGroup } from "../radioContext";
-import "./styles.css";
-
-type RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  value: string;
-  isError?: boolean;
-  size?: "sm" | "md" | "lg";
-};
-
-/**
- * RadioBox component - individual radio button option that must be used within a RadioGroup
- *
- * @param props - RadioBox component properties
- * @param props.value - Required unique value for this radio option within the group
- * @param props.isError - Optional error state indicator for styling
- * @param props.size - Size variant for the radio box, inherits from RadioGroup if not specified
- * @param props.children - Content to display next to the radio button (label text, icons, etc.)
- *
- * **...Other valid HTML properties for button element**
- *
- * @returns RadioBox JSX element wrapped in a label for accessibility
- *
- * @example
- * ```tsx
- * // Basic radio boxes within a group
- * <RadioGroup name="gender">
- *   <RadioBox value="male">Male</RadioBox>
- *   <RadioBox value="female">Female</RadioBox>
- *   <RadioBox value="other">Other</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with rich content
- * <RadioGroup name="plan" label="Choose your plan">
- *   <RadioBox value="basic">
- *     <div>
- *       <h4>Basic Plan</h4>
- *       <p>$9.99/month - Perfect for individuals</p>
- *     </div>
- *   </RadioBox>
- *   <RadioBox value="premium">
- *     <div>
- *       <h4>Premium Plan</h4>
- *       <p>$19.99/month - Great for small teams</p>
- *     </div>
- *   </RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with custom size override
- * <RadioGroup name="priority" size="md">
- *   <RadioBox value="low" size="sm">Low Priority</RadioBox>
- *   <RadioBox value="medium">Medium Priority</RadioBox>
- *   <RadioBox value="high" size="lg">High Priority</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with disabled state
- * <RadioGroup name="options">
- *   <RadioBox value="option1">Available Option</RadioBox>
- *   <RadioBox value="option2" disabled>Disabled Option</RadioBox>
- *   <RadioBox value="option3">Another Available Option</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with custom styling
- * <RadioGroup name="theme">
- *   <RadioBox value="light" className="theme-option">
- *     🌞 Light Theme
- *   </RadioBox>
- *   <RadioBox value="dark" className="theme-option">
- *     🌙 Dark Theme
- *   </RadioBox>
- *   <RadioBox value="auto" className="theme-option">
- *     🔄 Auto Theme
- *   </RadioBox>
- * </RadioGroup>
- * ```
- *
- * @remarks
- * This component must be used as a child of RadioGroup. It automatically inherits:
- * - Group name for form handling
- * - Size from parent RadioGroup (unless overridden)
- * - Change handlers and state management
- * - Error states from form validation
- *
- * The component handles both click and focus events for accessibility.
- */
-
-function RadioBox(props: RadioBoxProps) {
-  const {
-    value: componentValue,
-    size: componentSize,
-    disabled,
-    children,
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const { handleChange, size: groupSize, value, isError } = useRadioGroup();
-
-  const isChecked = value === componentValue;
-  const size = componentSize || groupSize;
-
-  const checkedClass = isChecked ? "checkedTrue" : "checkedFalse";
-  const errorClass = !!isError ? "errorTrue" : "errorFalse";
-  const disabledClass = disabled ? "disabledTrue" : "disabledFalse";
-  const className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;
-
-  return (
-    <label className={className.trim()}>
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => handleChange(componentValue)}
-        onFocus={() => handleChange(componentValue)}
-        {...rest}
-      />
-
-      {children}
-    </label>
-  );
-}
-
-export { RadioBox };

package/src/components/radio/radioBox/styles.css

@@ -1,95 +0,0 @@
-.arkynRadioBox {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  color: var(--text-body);
-  font-size: 14px;
-  line-height: 19.07px;
-}
-
-.arkynRadioBox > button {
-  position: relative;
-  background-color: rgba(var(--spotlight-secondary), 1);
-
-  border: 2px solid var(--border);
-  border-radius: 99999px;
-}
-
-.arkynRadioBox > button:not(:disabled):hover {
-  cursor: pointer;
-}
-
-.arkynRadioBox.checkedTrue > button {
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynRadioBox.errorTrue > button {
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynRadioBox.checkedTrue > button::before {
-  content: "  ";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 99999px;
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynRadioBox.sm > button {
-  min-height: 20px;
-  min-width: 20px;
-
-  max-height: 20px;
-  max-width: 20px;
-}
-
-.arkynRadioBox.md > button {
-  min-height: 24px;
-  min-width: 24px;
-
-  max-height: 24px;
-  max-width: 24px;
-}
-
-.arkynRadioBox.lg > button {
-  min-height: 24px;
-  min-width: 24px;
-
-  max-height: 24px;
-  max-width: 24px;
-}
-
-.arkynRadioBox.checkedTrue.sm > button::before {
-  min-height: 10px;
-  min-width: 10px;
-
-  max-height: 10px;
-  max-width: 10px;
-}
-
-.arkynRadioBox.checkedTrue.md > button::before {
-  min-height: 12px;
-  min-width: 12px;
-
-  max-height: 12px;
-  max-width: 12px;
-}
-
-.arkynRadioBox.checkedTrue.lg > button::before {
-  min-height: 12px;
-  min-width: 12px;
-
-  max-height: 12px;
-  max-width: 12px;
-}
-
-.arkynRadioBox.disabledTrue {
-  opacity: 0.5;
-}
-
-.arkynRadioBox.disabledTrue > button {
-  cursor: not-allowed;
-}

package/src/components/radio/radioContext.tsx

@@ -1,34 +0,0 @@
-import { createContext, ReactNode, useContext, useState } from "react";
-
-type RadioGroupContextType = {
-  value: string;
-  isError: boolean;
-  size: "sm" | "md" | "lg";
-  handleChange: (value: string) => void;
-};
-
-type RadioProviderProps = {
-  children: ReactNode;
-  isError: boolean;
-  size: "sm" | "md" | "lg";
-  value: string;
-  handleChange: (value: string) => void;
-};
-
-const radioContext = createContext({} as RadioGroupContextType);
-
-function RadioProvider(props: RadioProviderProps) {
-  const { children, size, isError, handleChange, value } = props;
-
-  return (
-    <radioContext.Provider value={{ handleChange, value, size, isError }}>
-      {children}
-    </radioContext.Provider>
-  );
-}
-
-function useRadioGroup() {
-  return useContext(radioContext);
-}
-
-export { RadioProvider, useRadioGroup };