@arkyn/components 3.0.1-beta.17 → 3.0.1-beta.172

package/src/components/maskedInput/index.tsx

@@ -1,260 +0,0 @@
-import { InputMask, type Replacement } from "@react-input/mask";
-import { Loader2, LucideIcon } from "lucide-react";
-import {
-  forwardRef,
-  InputHTMLAttributes,
-  useId,
-  useRef,
-  useState,
-  type FocusEvent,
-} from "react";
-
-import { useForm } from "../../hooks/useForm";
-import { IconRenderer } from "../../services/iconRenderer";
-
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-
-import "./style.css";
-
-type MaskedInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size" | "prefix" | "name" | "type"
-> & {
-  name: string;
-  mask: string;
-  replacement: string | Replacement;
-
-  separate?: boolean;
-  showMask?: boolean;
-
-  label?: string;
-  errorMessage?: string;
-  isLoading?: boolean;
-
-  size?: "md" | "lg";
-  variant?: "solid" | "outline" | "underline";
-
-  prefix?: string | LucideIcon;
-  suffix?: string | LucideIcon;
-  showAsterisk?: boolean;
-
-  leftIcon?: LucideIcon;
-  rightIcon?: LucideIcon;
-};
-
-const BaseInput = forwardRef<
-  HTMLInputElement,
-  InputHTMLAttributes<HTMLInputElement>
->((props, ref) => {
-  return <input ref={ref} {...props} />;
-});
-
-/**
- * MaskedInput component - used for text input fields with input masking support, labels, validation, icons, and loading states
- *
- * @param props - MaskedInput component properties
- * @param props.name - Required field name for form handling
- * @param props.mask - Input mask pattern (e.g., "___.___.___-__" for CPF)
- * @param props.replacement - Character or replacement configuration for mask positions
- * @param props.separate - Whether to separate mask characters from input value. Default: undefined
- * @param props.showMask - Whether to show the mask placeholder. Default: undefined
- * @param props.label - Optional label text to display above the input
- * @param props.errorMessage - Error message to display below the input
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Input size. Default: "md"
- * @param props.variant - Visual variant of the input. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the input
- * @param props.suffix - Text or icon to display at the end of the input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.rightIcon - Optional icon to display on the right side
- *
- * **...Other valid HTML properties for input element (except 'type' which is controlled by the mask)**
- *
- * @returns MaskedInput JSX element wrapped in FieldGroup with optional label and error
- *
- * @example
- * ```tsx
- * // Basic masked input for phone number
- * <MaskedInput
- *   name="phone"
- *   mask="(__) _____-____"
- *   replacement={{ _: /\d/ }}
- *   placeholder="(00) 00000-0000"
- * />
- *
- * // CPF input with label and validation
- * <MaskedInput
- *   name="cpf"
- *   label="CPF"
- *   mask="___.___.___-__"
- *   replacement="_"
- *   showAsterisk
- *   errorMessage="Please enter a valid CPF"
- *   showMask
- * />
- *
- * // Credit card input with icons and loading state
- * <MaskedInput
- *   name="creditCard"
- *   label="Credit Card"
- *   mask="____ ____ ____ ____"
- *   replacement={{ _: /\d/ }}
- *   leftIcon={CreditCardIcon}
- *   rightIcon={ShieldIcon}
- *   isLoading
- * />
- *
- * // Date input with prefix/suffix
- * <MaskedInput
- *   name="birthDate"
- *   label="Birth Date"
- *   mask="__/__/____"
- *   replacement="_"
- *   prefix="📅"
- *   variant="outline"
- *   separate
- * />
- *
- * // Large masked input with underline variant
- * <MaskedInput
- *   name="zipCode"
- *   label="ZIP Code"
- *   mask="_____-___"
- *   replacement={{ _: /\d/ }}
- *   size="lg"
- *   variant="underline"
- *   placeholder="00000-000"
- * />
- * ```
- */
-
-function MaskedInput(props: MaskedInputProps) {
-  const {
-    name,
-    disabled,
-    title,
-    style,
-    variant = "solid",
-    separate,
-    mask,
-    showMask,
-    replacement,
-    label,
-    className: baseClassName = "",
-    prefix,
-    suffix,
-    isLoading = false,
-    leftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    errorMessage: baseErrorMessage,
-    defaultValue,
-    showAsterisk,
-    rightIcon,
-    size = "md",
-    id,
-    ...rest
-  } = props;
-
-  const { fieldErrors } = useForm();
-  const [isFocused, setIsFocused] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputId = id || useId();
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  const loadingPosition = rightIcon ? "right" : "left";
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !inputRef?.current) return;
-    setIsFocused(true);
-    inputRef.current.focus();
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  const hasPrefix = !!prefix ? "hasPrefix" : "";
-  const hasSuffix = !!suffix ? "hasSuffix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkynMaskedInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-
-  return (
-    <FieldWrapper>
-      {label && (
-        <FieldLabel showAsterisk={showAsterisk} htmlFor={inputId}>
-          {label}
-        </FieldLabel>
-      )}
-
-      <section
-        title={title}
-        style={style}
-        onClick={handleSectionClick}
-        className={className}
-      >
-        <IconRenderer iconSize={iconSize} icon={prefix} className="prefix" />
-
-        <IconRenderer
-          show={showLeftSpinner}
-          iconSize={iconSize}
-          className="spinner"
-          icon={Loader2}
-        />
-
-        <IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />
-
-        <InputMask
-          component={BaseInput}
-          mask={mask}
-          replacement={replacement}
-          separate={separate}
-          showMask={showMask}
-          ref={inputRef}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          disabled={disabled}
-          readOnly={readOnly}
-          id={inputId}
-          {...rest}
-        />
-
-        <IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />
-
-        <IconRenderer
-          show={showRightSpinner}
-          iconSize={iconSize}
-          className="spinner"
-          icon={Loader2}
-        />
-
-        <IconRenderer iconSize={iconSize} icon={suffix} className="suffix" />
-      </section>
-
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { MaskedInput };

package/src/components/maskedInput/style.css

@@ -1,226 +0,0 @@
-/* BASE */
-.arkynMaskedInput {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  padding: 0 16px;
-  gap: 8px;
-  border-radius: 8px;
-
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-}
-
-.arkynMaskedInput:hover {
-  cursor: text;
-}
-
-.arkynMaskedInput input {
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-
-  line-height: 100%;
-}
-
-.arkynMaskedInput input {
-  color: var(--text-heading);
-}
-
-.arkynMaskedInput .prefix,
-.arkynMaskedInput .suffix {
-  color: var(--text-body);
-  background: var(--border);
-  font-weight: 400;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-
-  line-height: 100%;
-}
-
-.arkynMaskedInput .prefix {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: calc(8px - 1px) 0 0 calc(8px - 1px);
-  border-right: 1px solid var(--border);
-}
-
-.arkynMaskedInput .suffix {
-  right: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: 0 calc(8px - 1px) calc(8px - 1px) 0;
-  border-left: 1px solid var(--border);
-}
-
-.arkynMaskedInput input::placeholder {
-  color: var(--text-muted);
-  line-height: 100%;
-}
-
-.arkynMaskedInput svg {
-  color: var(--text-muted);
-}
-
-.arkynMaskedInput.errored svg {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynMaskedInput:not(.opacity).focused svg {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynMaskedInput.opacity {
-  opacity: 0.5;
-}
-
-/* VARIANTS */
-.arkynMaskedInput.solid {
-  border-color: var(--border);
-  background-color: rgba(var(--spotlight-secondary), 1);
-}
-
-.arkynMaskedInput.solid.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynMaskedInput:not(.opacity).solid.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynMaskedInput.outline {
-  border-color: var(--border);
-}
-
-.arkynMaskedInput.outline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynMaskedInput:not(.opacity).outline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynMaskedInput.underline {
-  border-radius: 0;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  outline: none;
-  border-color: var(--border);
-}
-
-.arkynMaskedInput.underline .suffix,
-.arkynMaskedInput.underline .prefix {
-  display: none;
-}
-
-.arkynMaskedInput.underline::before {
-  content: " ";
-  position: absolute;
-  height: 1px;
-  left: 0;
-  right: 0;
-  bottom: -2px;
-  background: transparent;
-}
-
-.arkynMaskedInput.underline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynMaskedInput.underline.errored::before {
-  background: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynMaskedInput:not(.opacity).underline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynMaskedInput:not(.opacity).underline.focused::before {
-  background: rgba(var(--spotlight-primary), 1);
-}
-
-/* SIZE */
-.arkynMaskedInput.md input {
-  min-height: 40px;
-  max-height: 40px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 400;
-}
-
-.arkynMaskedInput.md input::placeholder {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.arkynMaskedInput.md.hasPrefix {
-  padding-left: 60px;
-}
-
-.arkynMaskedInput.md.hasSuffix {
-  padding-right: 60px;
-}
-
-.arkynMaskedInput.md .prefix,
-.arkynMaskedInput.md .suffix {
-  height: 40px;
-  width: 44px;
-  font-size: 14px;
-}
-
-.arkynMaskedInput.lg input {
-  min-height: 44px;
-  max-height: 44px;
-  line-height: 16px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.arkynMaskedInput.lg input::placeholder {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
-}
-
-.arkynMaskedInput.lg .prefix,
-.arkynMaskedInput.lg .suffix {
-  height: 44px;
-  width: 48px;
-  font-size: 16px;
-}
-
-.arkynMaskedInput.lg.hasPrefix {
-  padding-left: 64px;
-}
-
-.arkynMaskedInput.lg.hasSuffix {
-  padding-right: 64px;
-}
-
-/* SPIN */
-.arkynMaskedInput .spinner {
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/modal/modalContainer/index.tsx

@@ -1,127 +0,0 @@
-import { AnimatePresence, motion } from "framer-motion";
-import { HTMLAttributes } from "react";
-
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { ModalProvider } from "../modalContext";
-import "./styles.css";
-
-type ModalContainerProps = HTMLAttributes<HTMLElement> & {
-  isVisible: boolean;
-  makeInvisible: () => void;
-};
-
-/**
- * ModalContainer component - animated overlay modal for dialogs and content
- *
- * @param props - ModalContainer component properties
- * @param props.isVisible - Controls modal visibility state
- * @param props.makeInvisible - Callback function to hide the modal
- *
- * **...Other valid HTML properties for aside element**
- *
- * @returns ModalContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic modal
- * const [isOpen, setIsOpen] = useState(false);
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- * >
- *   <p>Modal content</p>
- * </ModalContainer>
- *
- * // Modal with custom styling
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- *   className="custom-modal"
- * >
- *   <div className="modal-content">
- *     <h2>Confirmation</h2>
- *     <p>Are you sure you want to proceed?</p>
- *   </div>
- * </ModalContainer>
- *
- * // Complete modal example
- * function ModalExample() {
- *   const [isModalOpen, setIsModalOpen] = useState(false);
- *
- *   return (
- *     <>
- *       <button onClick={() => setIsModalOpen(true)}>
- *         Open Modal
- *       </button>
- *
- *       <ModalContainer
- *         isVisible={isModalOpen}
- *         makeInvisible={() => setIsModalOpen(false)}
- *       >
- *         <div className="modal-dialog">
- *           <header>
- *             <h2>Modal Title</h2>
- *           </header>
- *
- *           <main>
- *             <p>This is the modal content.</p>
- *           </main>
- *
- *           <footer>
- *             <button onClick={() => setIsModalOpen(false)}>
- *               Close
- *             </button>
- *           </footer>
- *         </div>
- *       </ModalContainer>
- *     </>
- *   );
- * }
- * ```
- */
-
-function ModalContainer(args: ModalContainerProps) {
-  const {
-    isVisible,
-    makeInvisible,
-    children,
-    className: baseClassName = "",
-    ...rest
-  } = args;
-
-  useScrollLock(isVisible);
-
-  const visibleClass = isVisible ? "visibleTrue" : "visibleFalse";
-  const className = `arkynModalContainer ${visibleClass} ${baseClassName}`;
-
-  return (
-    <ModalProvider makeInvisible={makeInvisible}>
-      <AnimatePresence>
-        {isVisible && (
-          <aside className={className.trim()} {...rest}>
-            <motion.div
-              className="arkynModalContainerOverlay"
-              transition={{ duration: 0.15, ease: "easeOut" }}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={makeInvisible}
-            />
-
-            <motion.div
-              className="arkynModalContainerContent"
-              transition={{ duration: 0.15, ease: "easeOut" }}
-              initial={{ opacity: 0, scale: 0.75 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0 }}
-            >
-              {children}
-            </motion.div>
-          </aside>
-        )}
-      </AnimatePresence>
-    </ModalProvider>
-  );
-}
-
-export { ModalContainer };

package/src/components/modal/modalContainer/styles.css

@@ -1,37 +0,0 @@
-.arkynModalContainer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  display: flex;
-  align-items: start;
-  justify-content: center;
-
-  padding: 10vh 0;
-  padding-bottom: 2rem;
-  overflow: auto;
-
-  z-index: 9999;
-}
-
-.arkynModalContainerOverlay {
-  position: fixed;
-  z-index: 9997;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.arkynModalContainerOverlay:hover {
-  cursor: pointer;
-}
-
-.arkynModalContainerContent {
-  z-index: 9999;
-  border-radius: 8px;
-  background: var(--card);
-}

package/src/components/modal/modalContext.tsx

@@ -1,26 +0,0 @@
-import { createContext, ReactNode, useContext } from "react";
-
-type ModalContextProps = {
-  makeInvisible: () => void;
-};
-
-type ModalProviderProps = {
-  children: ReactNode;
-  makeInvisible: () => void;
-};
-
-const modalContext = createContext({} as ModalContextProps);
-
-function ModalProvider(props: ModalProviderProps) {
-  return (
-    <modalContext.Provider value={{ makeInvisible: props.makeInvisible }}>
-      {props.children}
-    </modalContext.Provider>
-  );
-}
-
-function useModal() {
-  return useContext(modalContext);
-}
-
-export { ModalProvider, useModal };