@arkyn/components 3.0.1-beta.5 → 3.0.1-beta.50

package/src/components/Input/MaskInput/getConfig.tsx

@@ -1,63 +0,0 @@
-import type { MaskedInputProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import { morpheme } from "../utils/morpheme";
-
-function getConfig(props: MaskedInputProps, isFocused: boolean) {
-  const {
-    isLoading,
-    isError,
-    size = "md",
-    className: baseClassName = "",
-    variant = "solid",
-    prefix: basePrefix,
-    sufix: baseSufix,
-    leftIcon: LeftIcon,
-    rightIcon: RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    showMask = false,
-    type,
-    ...rest
-  } = props;
-
-  const loadingPosition = RightIcon ? "right" : "left";
-
-  const hasPrefix = !!basePrefix ? "hasPrefix" : "";
-  const hasSufix = !!baseSufix ? "hasSufix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkyn_input ${hasPrefix} ${hasSufix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  return {
-    isLoading,
-    className,
-    prefix: morpheme(basePrefix, iconSize, "prefix"),
-    sufix: morpheme(baseSufix, iconSize, "sufix"),
-    LeftIcon,
-    RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    loadingPosition,
-    iconSize: iconSize,
-    showMask,
-    Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,
-    ...rest,
-  };
-}
-
-export { getConfig };

package/src/components/Input/MaskInput/index.tsx

@@ -1,99 +0,0 @@
-import { MaskedInputProps } from "@arkyn/types";
-import { InputMask } from "@react-input/mask";
-import {
-  FocusEvent,
-  forwardRef,
-  InputHTMLAttributes,
-  useRef,
-  useState,
-} from "react";
-
-import { useFormController } from "../../../components/Form/FormController";
-import { getConfig } from "./getConfig";
-
-const BaseInput = forwardRef<
-  HTMLInputElement,
-  InputHTMLAttributes<HTMLInputElement>
->((props, ref) => {
-  return <input ref={ref} {...props} />;
-});
-
-function MaskedInput(props: MaskedInputProps) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const baseRef = useRef<any>(null);
-
-  const { inputRef, id, error } = useFormController();
-
-  const ref = inputRef || baseRef;
-  const isError = props.isError || !!error;
-
-  const {
-    disabled,
-    title,
-    style,
-    className,
-    prefix,
-    sufix,
-    iconSize,
-    loadingPosition,
-    isLoading,
-    LeftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    RightIcon,
-    Spinner,
-    ...rest
-  } = getConfig({ ...props, id, isError }, isFocused);
-
-  const showLeftIcon = LeftIcon && !isLoading;
-  const showRightIcon = RightIcon && !isLoading;
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !ref?.current) return;
-    setIsFocused(true);
-    ref.current.focus();
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  return (
-    <section
-      title={title}
-      style={style}
-      onClick={handleSectionClick}
-      className={className}
-    >
-      {prefix}
-      {showLeftSpinner && Spinner}
-      {showLeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
-
-      <InputMask
-        component={BaseInput}
-        ref={ref}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        disabled={disabled}
-        {...rest}
-      />
-
-      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
-      {showRightSpinner && Spinner}
-      {sufix}
-    </section>
-  );
-}
-
-export { MaskedInput };

package/src/components/Input/SimpleInput/getConfig.tsx

@@ -1,60 +0,0 @@
-import type { SimpleInputProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import { morpheme } from "../utils/morpheme";
-
-function getConfig(props: SimpleInputProps, isFocused: boolean) {
-  const {
-    isLoading,
-    isError,
-    size = "md",
-    className: baseClassName = "",
-    variant = "solid",
-    prefix: basePrefix,
-    sufix: baseSufix,
-    leftIcon: LeftIcon,
-    rightIcon: RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    ...rest
-  } = props;
-
-  const loadingPosition = RightIcon ? "right" : "left";
-
-  const hasPrefix = !!basePrefix ? "hasPrefix" : "";
-  const hasSufix = !!baseSufix ? "hasSufix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkyn_input ${hasPrefix} ${hasSufix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  return {
-    isLoading,
-    className,
-    prefix: morpheme(basePrefix, iconSize, "prefix"),
-    sufix: morpheme(baseSufix, iconSize, "sufix"),
-    LeftIcon,
-    RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    loadingPosition,
-    iconSize: iconSize,
-    Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,
-    ...rest,
-  };
-}
-
-export { getConfig };

package/src/components/Input/SimpleInput/index.tsx

@@ -1,101 +0,0 @@
-import type { SimpleInputProps } from "@arkyn/types";
-import type { FocusEvent } from "react";
-
-import { useRef, useState } from "react";
-
-import { useFormController } from "../../../components/Form/FormController";
-import { getConfig } from "./getConfig";
-
-function SimpleInput(props: SimpleInputProps) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const baseRef = useRef<HTMLInputElement>(null);
-
-  const { inputRef, id, error } = useFormController();
-
-  const ref = inputRef || baseRef;
-  const isError = props.isError || !!error;
-
-  const {
-    disabled,
-    title,
-    style,
-    className,
-    prefix,
-    sufix,
-    iconSize,
-    loadingPosition,
-    isLoading,
-    LeftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    RightIcon,
-    type,
-    Spinner,
-    ...rest
-  } = getConfig({ ...props, id, isError }, isFocused);
-
-  const showLeftIcon = LeftIcon && !isLoading;
-  const showRightIcon = RightIcon && !isLoading;
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !ref?.current) return;
-    setIsFocused(true);
-    ref.current.focus();
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  if (type === "hidden") {
-    return (
-      <input
-        style={{ display: "none" }}
-        readOnly
-        type="text"
-        ref={ref}
-        {...rest}
-      />
-    );
-  }
-
-  return (
-    <section
-      title={title}
-      style={style}
-      onClick={handleSectionClick}
-      className={className}
-    >
-      {prefix}
-      {showLeftSpinner && Spinner}
-      {showLeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
-
-      <input
-        disabled={disabled || isLoading}
-        readOnly={readOnly}
-        ref={ref}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        type={type}
-        {...rest}
-      />
-
-      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
-      {showRightSpinner && Spinner}
-      {sufix}
-    </section>
-  );
-}
-
-export { SimpleInput };

package/src/components/Input/index.tsx

@@ -1,17 +0,0 @@
-import { InputProps } from "@arkyn/types";
-
-import { CpfCnpjInput } from "./CpfCpnjInput";
-import { CurrencyInput } from "./CurrencyInput";
-import { MaskedInput } from "./MaskInput";
-import { SimpleInput } from "./SimpleInput";
-
-import "./styles.css";
-
-function Input(props: InputProps) {
-  if (props.type === "currency") return <CurrencyInput {...props} />;
-  if (props.type === "masked") return <MaskedInput {...props} />;
-  if (props.type === "cpf-cnpj") return <CpfCnpjInput {...props} />;
-  return <SimpleInput {...props} />;
-}
-
-export { Input };

package/src/components/Input/styles.css

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

package/src/components/Input/utils/morpheme.tsx

@@ -1,19 +0,0 @@
-import { LucideIcon } from "lucide-react";
-
-function morpheme(
-  data: LucideIcon | string | undefined,
-  iconSize: number,
-  type?: "prefix" | "sufix"
-) {
-  if (!data) return <></>;
-  if (typeof data === "string") return <p className={type}>{data}</p>;
-
-  const Data = data;
-  return (
-    <p className={type}>
-      <Data color="var(--secondary-600)" size={iconSize} strokeWidth={2.5} />
-    </p>
-  );
-}
-
-export { morpheme };

package/src/components/Modal/Container/index.tsx

@@ -1,52 +0,0 @@
-import { ModalContainerProps } from "@arkyn/types";
-import { AnimatePresence, motion } from "framer-motion";
-import { createContext } from "react";
-
-import "./styles.css";
-
-type ModalContext = { makeInvisible: () => void };
-const modalContext = createContext({} as ModalContext);
-
-function ModalContainer(args: ModalContainerProps) {
-  const {
-    isVisibled,
-    makeInvisible,
-    children,
-    className: baseClassName = "",
-    ...rest
-  } = args;
-
-  const visibleClass = isVisibled ? "visibleTrue" : "visibleFalse";
-  const className = `arkynModalContainer ${visibleClass} ${baseClassName}`;
-
-  return (
-    <modalContext.Provider value={{ makeInvisible }}>
-      <AnimatePresence>
-        {isVisibled && (
-          <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>
-    </modalContext.Provider>
-  );
-}
-
-export { ModalContainer, modalContext };

package/src/components/Modal/Container/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: var(--rounded-cards);
-  background: var(--card);
-}

package/src/components/Modal/Footer/index.tsx

@@ -1,11 +0,0 @@
-import { ModalFooterProps } from "@arkyn/types";
-import "./styles.css";
-
-function ModalFooter(args: ModalFooterProps) {
-  const { alignment = "right", className: baseClassName, ...rest } = args;
-  const className = `arkynModalFooter ${alignment} ${baseClassName}`;
-
-  return <footer className={className.trim()} {...rest} />;
-}
-
-export { ModalFooter };

package/src/components/Modal/Footer/styles.css

@@ -1,27 +0,0 @@
-.arkynModalFooter {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  border-top: 1px solid var(--border);
-}
-
-.arkynModalFooter.left {
-  justify-content: flex-start;
-}
-
-.arkynModalFooter.right {
-  justify-content: flex-end;
-}
-
-.arkynModalFooter.center {
-  justify-content: center;
-}
-
-.arkynModalFooter.between {
-  justify-content: space-between;
-}
-
-.arkynModalFooter.around {
-  justify-content: space-around;
-}