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

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

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

@@ -1,150 +0,0 @@
-import { HTMLAttributes, useState } from "react";
-
-import { FieldError } from "../../../components/fieldError";
-import { FieldLabel } from "../../../components/fieldLabel";
-import { FieldWrapper } from "../../../components/fieldWrapper";
-import { useForm } from "../../../hooks/useForm";
-
-import { RadioProvider } from "../radioContext";
-import "./styles.css";
-
-type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
-  name: string;
-  label?: string;
-  showAsterisk?: boolean;
-  errorMessage?: string;
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  size?: "sm" | "md" | "lg";
-};
-
-/**
- * RadioGroup component - used for creating a group of radio button options with shared state management
- *
- * @param props - RadioGroup component properties
- * @param props.name - Required field name for form handling and radio button grouping
- * @param props.label - Optional label text to display above the radio group
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the radio group
- * @param props.value - Controlled value for the selected radio option
- * @param props.defaultValue - Default selected value for uncontrolled usage. Default: ""
- * @param props.onChange - Callback function called when radio selection changes, receives the selected value
- * @param props.size - Size variant for all radio buttons in the group. Default: "md"
- *
- * **...Other valid HTML properties for div element (except onChange)**
- *
- * @returns RadioGroup JSX element wrapped in FieldWrapper with RadioProvider context for child Radio components
- *
- * @example
- * ```tsx
- * // Basic radio group
- * <RadioGroup name="gender">
- *   <Radio value="male" label="Male" />
- *   <Radio value="female" label="Female" />
- *   <Radio value="other" label="Other" />
- * </RadioGroup>
- *
- * // Radio group with label and validation
- * <RadioGroup
- *   name="subscription"
- *   label="Choose your plan"
- *   showAsterisk
- *   errorMessage="Please select a subscription plan"
- * >
- *   <Radio value="basic" label="Basic Plan - $9.99/month" />
- *   <Radio value="premium" label="Premium Plan - $19.99/month" />
- *   <Radio value="enterprise" label="Enterprise Plan - $49.99/month" />
- * </RadioGroup>
- *
- * // Controlled radio group with callback
- * <RadioGroup
- *   name="theme"
- *   label="Select Theme"
- *   value={selectedTheme}
- *   onChange={(value) => setSelectedTheme(value)}
- *   size="lg"
- * >
- *   <Radio value="light" label="Light Theme" />
- *   <Radio value="dark" label="Dark Theme" />
- *   <Radio value="auto" label="Auto (System)" />
- * </RadioGroup>
- *
- * // Radio group with default selection
- * <RadioGroup
- *   name="language"
- *   label="Preferred Language"
- *   defaultValue="en"
- *   size="sm"
- * >
- *   <Radio value="en" label="English" />
- *   <Radio value="es" label="Spanish" />
- *   <Radio value="fr" label="French" />
- *   <Radio value="pt" label="Portuguese" />
- * </RadioGroup>
- *
- * // Radio group with custom styling and onChange handler
- * <RadioGroup
- *   name="difficulty"
- *   label="Select Difficulty Level"
- *   className="custom-radio-group"
- *   onChange={(value) => console.log('Selected difficulty:', value)}
- * >
- *   <Radio value="easy" label="Easy" />
- *   <Radio value="medium" label="Medium" />
- *   <Radio value="hard" label="Hard" />
- * </RadioGroup>
- * ```
- */
-
-function RadioGroup(props: RadioGroupProps) {
-  const {
-    defaultValue = "",
-    name,
-    label,
-    showAsterisk,
-    errorMessage: baseErrorMessage,
-    value: forceValue,
-    onChange,
-    size = "md",
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const [value, setValue] = useState(defaultValue);
-  const { fieldErrors } = useForm();
-
-  function handleChange(value: string) {
-    setValue(value);
-    if (onChange) onChange(value);
-  }
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-  const className = `arkynRadioGroup ${size} ${baseClassName}`;
-
-  return (
-    <FieldWrapper>
-      {label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}
-      <RadioProvider
-        isError={isError}
-        size={size}
-        value={forceValue || value}
-        handleChange={handleChange}
-      >
-        <input
-          style={{ display: "none" }}
-          type="text"
-          readOnly
-          name={name}
-          value={forceValue || value}
-        />
-
-        <div className={className.trim()} {...rest} />
-      </RadioProvider>
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { RadioGroup };

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

@@ -1,5 +0,0 @@
-.arkynRadioGroup {
-  display: flex;
-  align-items: center;
-  gap: 32px;
-}