@arkyn/components 3.0.1-beta.12 → 3.0.1-beta.13

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/Header/index.tsx

@@ -1,37 +0,0 @@
-import { ModalHeaderProps } from "@arkyn/types";
-import { X } from "lucide-react";
-import { useContext } from "react";
-
-import { modalContext } from "../Container";
-import "./styles.css";
-
-function ModalHeader(args: ModalHeaderProps) {
-  const {
-    showCloseButton = true,
-    className: baseClassName,
-    children,
-    ...rest
-  } = args;
-
-  const { makeInvisible } = useContext(modalContext);
-  const className = `arkynModalHeader ${baseClassName}`;
-
-  return (
-    <header className={className.trim()} {...rest}>
-      {children}
-
-      {showCloseButton && (
-        <button
-          type="button"
-          onClick={makeInvisible}
-          aria-label="Close modal button"
-          className="arkynModalHeaderCloseButton"
-        >
-          <X size={24} />
-        </button>
-      )}
-    </header>
-  );
-}
-
-export { ModalHeader };

package/src/components/Modal/index.ts

@@ -1,5 +0,0 @@
-import { ModalContainer } from "./Container";
-import { ModalFooter } from "./Footer";
-import { ModalHeader } from "./Header";
-
-export { ModalContainer, ModalHeader, ModalFooter };

package/src/components/MultiSelect/components/MultiSelectContainer/styles.css

@@ -1,134 +0,0 @@
-/* BASE CSS */
-.arkynMultiSelectContainer {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  padding: 0 16px;
-  gap: 8px;
-  border-radius: 6px;
-
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-}
-.arkynMultiSelectContainer:hover {
-  cursor: pointer;
-}
-.arkynMultiSelectContainer.opacity {
-  opacity: 0.5;
-}
-
-/* PREFIX */
-.arkynMultiSelectContainer .prefix {
-  color: var(--text-body);
-  background: var(--border);
-  font-weight: 400;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-}
-.arkynMultiSelectContainer .prefix {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: 5px 0 0 5px;
-  border-right: 1px solid var(--border);
-}
-
-/* LEFT ICON */
-.arkynMultiSelectContainer > svg {
-  color: var(--text-muted);
-}
-.arkynMultiSelectContainer.errored > svg {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).focused > svg {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-/* VARIANTS */
-.arkynMultiSelectContainer.solid {
-  border-color: var(--border);
-  background-color: rgba(var(--input-background), 1);
-}
-.arkynMultiSelectContainer.solid.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).solid.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynMultiSelectContainer.outline {
-  border-color: var(--border);
-}
-.arkynMultiSelectContainer.outline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).outline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynMultiSelectContainer.underline {
-  border-radius: 0;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  outline: none;
-  border-color: var(--border);
-}
-.arkynMultiSelectContainer.underline .prefix {
-  display: none;
-}
-.arkynMultiSelectContainer.underline::before {
-  content: " ";
-  position: absolute;
-  height: 1px;
-  left: 0;
-  right: 0;
-  bottom: -2px;
-  background: transparent;
-}
-.arkynMultiSelectContainer.underline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer.underline.errored::before {
-  background: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).underline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).underline.focused::before {
-  background: rgba(var(--spotlight-primary), 1);
-}
-
-/* SIZE */
-.arkynMultiSelectContainer.md {
-  min-height: 40px;
-  /* max-height: 40px; */
-}
-.arkynMultiSelectContainer.md.hasPrefix {
-  padding-left: 60px;
-}
-.arkynMultiSelectContainer.md .prefix {
-  height: 40px;
-  width: 44px;
-  font-size: 14px;
-}
-.arkynMultiSelectContainer.lg {
-  min-height: 44px;
-  /* max-height: 44px; */
-}
-.arkynMultiSelectContainer.lg .prefix {
-  height: 44px;
-  width: 48px;
-  font-size: 16px;
-}
-.arkynMultiSelectContainer.lg.hasPrefix {
-  padding-left: 64px;
-}

package/src/components/MultiSelect/components/MultiSelectMark/index.tsx

@@ -1,30 +0,0 @@
-import { X } from "lucide-react";
-import "./styles.css";
-
-type MultiSelectMarkProps = {
-  label: string;
-  value: string;
-  handleChangeValue: (value: string) => void;
-};
-
-function MultiSelectMark(props: MultiSelectMarkProps) {
-  const { label, value, handleChangeValue } = props;
-
-  return (
-    <div className="arkynMultiSelectMark">
-      {label}
-
-      <button
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          handleChangeValue(value);
-        }}
-      >
-        <X />
-      </button>
-    </div>
-  );
-}
-
-export { MultiSelectMark };

package/src/components/MultiSelect/components/MultiSelectMark/styles.css

@@ -1,40 +0,0 @@
-.arkynMultiSelectMark {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 4px;
-  background: var(--card-foreground-terceary);
-
-  padding: 2px 6px;
-
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 19.07px;
-  text-align: left;
-  z-index: 6;
-  user-select: none;
-}
-
-.arkynMultiSelectMark button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: none;
-  background: inherit;
-
-  width: 15px;
-  height: 15px;
-}
-
-.arkynMultiSelectMark button:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}
-
-.arkynMultiSelectMark button svg {
-  min-width: 10px;
-  min-height: 10px;
-  color: var(--text-muted);
-}