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

package/src/components/IconButton/styles.css

@@ -1,183 +0,0 @@
-/* BASE */
-.arkynIconButton {
-  background: transparent;
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  position: relative;
-  transition: 0.15s all ease-out;
-}
-
-.arkynIconButton:hover {
-  cursor: pointer;
-  filter: brightness(0.95);
-}
-
-html.dark .arkynIconButton:hover {
-  cursor: pointer;
-  filter: brightness(1.2);
-}
-
-.arkynIconButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynIconButtonContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* VARIANTS */
-.arkynIconButton.solid {
-  color: #fff;
-}
-
-.arkynIconButton.solid.primary {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynIconButton.solid.danger {
-  background-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynIconButton.solid.success {
-  background-color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynIconButton.solid.warning {
-  background-color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynIconButton.solid.info {
-  background-color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynIconButton.outline {
-  background-color: rgba(var(--input-background), 1);
-  border-color: var(--border);
-}
-
-.arkynIconButton.outline.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynIconButton.outline.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynIconButton.outline.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynIconButton.outline.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynIconButton.outline.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynIconButton.ghost.primary {
-  color: rgba(var(--spotlight-primary), 1);
-  background-color: rgba(var(--spotlight-primary), 0.2);
-}
-
-.arkynIconButton.ghost.danger {
-  color: rgba(var(--spotlight-danger), 1);
-  background-color: rgba(var(--spotlight-danger), 0.2);
-}
-
-.arkynIconButton.ghost.success {
-  color: rgba(var(--spotlight-success), 1);
-  background-color: rgba(var(--spotlight-success), 0.2);
-}
-
-.arkynIconButton.ghost.warning {
-  color: rgba(var(--spotlight-warning), 1);
-  background-color: rgba(var(--spotlight-warning), 0.2);
-}
-
-.arkynIconButton.ghost.info {
-  color: rgba(var(--spotlight-info), 1);
-  background-color: rgba(var(--spotlight-info), 0.2);
-}
-
-.arkynIconButton.invisible.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynIconButton.invisible.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynIconButton.invisible.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynIconButton.invisible.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynIconButton.invisible.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-/* SIZE */
-.arkynIconButton.lg {
-  border-radius: var(--rounded-inputs);
-  height: 44px;
-  width: 44px;
-}
-
-.arkynIconButton.md {
-  border-radius: var(--rounded-inputs);
-  height: 40px;
-  width: 40px;
-}
-
-.arkynIconButton.sm {
-  border-radius: var(--rounded-inputs);
-  height: 32px;
-  width: 32px;
-}
-
-.arkynIconButton.xs {
-  border-radius: calc(var(--rounded-inputs) * 0.6667); /* 2/3 */
-  height: 24px;
-  width: 24px;
-}
-
-/* SPIN */
-.arkynIconButtonSpinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-}
-
-.arkynIconButtonSpinner > svg {
-  animation: spin 2s linear infinite;
-}
-
-.arkynIconButton.loadingTrue .arkynIconButtonSpinner {
-  opacity: 1;
-}
-
-.arkynIconButton.loadingTrue .arkynIconButtonContent {
-  opacity: 0;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/ImageUpload/HasFileContent/index.tsx

@@ -1,72 +0,0 @@
-import { ImageUploadHasFileContentProps } from "@arkyn/types";
-import { RefreshCw } from "lucide-react";
-
-import { Button } from "../../Button";
-import { IconButton } from "../../IconButton";
-import { Tooltip } from "../../Tooltip";
-
-import "./styles.css";
-
-function HasFileContent(props: ImageUploadHasFileContentProps) {
-  const {
-    disabled,
-    filePath,
-    isLoading,
-    acceptImage,
-    changeImageButtonText,
-    handleSelectFile,
-    reSendImage,
-  } = props;
-
-  function handleClick() {
-    if (disabled) return;
-
-    const input = document.createElement("input");
-
-    input.type = "file";
-    input.accept = acceptImage;
-
-    input.onchange = (event) => {
-      const file = (event.target as HTMLInputElement).files?.[0];
-      if (file) handleSelectFile(file);
-    };
-
-    input.click();
-  }
-
-  return (
-    <div
-      className="arkynImageUploadHasFileContent"
-      style={{ backgroundImage: `url("${filePath}")` }}
-    >
-      {reSendImage && (
-        <Tooltip orientation="bottom" text="Reenviar imagem">
-          <IconButton
-            type="button"
-            aria-label="resend image"
-            variant="outline"
-            scheme="danger"
-            size="sm"
-            isLoading={isLoading}
-            onClick={reSendImage}
-            icon={RefreshCw}
-            disabled={disabled}
-          />
-        </Tooltip>
-      )}
-
-      <Button
-        isLoading={isLoading}
-        onClick={handleClick}
-        variant="outline"
-        size="sm"
-        type="button"
-        disabled={disabled}
-      >
-        {changeImageButtonText}
-      </Button>
-    </div>
-  );
-}
-
-export { HasFileContent };

package/src/components/ImageUpload/HasFileContent/styles.css

@@ -1,17 +0,0 @@
-.arkynImageUploadHasFileContent {
-  display: flex;
-  align-items: end;
-  justify-content: end;
-
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  height: 100%;
-  width: 100%;
-
-  padding: 6px;
-  gap: 8px;
-
-  border-radius: calc(var(--rounded-inputs) - 2px);
-}

package/src/components/ImageUpload/ImageUploadError/index.tsx

@@ -1,12 +0,0 @@
-import { ImageUploadErrorProps } from "@arkyn/types";
-import "./styles.css";
-
-function ImageUploadError(props: ImageUploadErrorProps) {
-  const { error } = props;
-  const className = `arkynImageUploadError`;
-
-  if (error) return <strong className={className}>{error}</strong>;
-  return <></>;
-}
-
-export { ImageUploadError };

package/src/components/ImageUpload/ImageUploadError/styles.css

@@ -1,6 +0,0 @@
-.arkynImageUploadError {
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 600;
-  color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/ImageUpload/ImageUploadLabel/index.tsx

@@ -1,13 +0,0 @@
-import { ImageUploadLabelProps } from "@arkyn/types";
-import "./styles.css";
-
-function ImageUploadLabel(props: ImageUploadLabelProps) {
-  const { label, showAsterisk } = props;
-
-  const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
-  const className = `arkynImageUploadLabel ${show}`;
-
-  return <strong className={className.trim()}>{label}</strong>;
-}
-
-export { ImageUploadLabel };

package/src/components/ImageUpload/ImageUploadLabel/styles.css

@@ -1,15 +0,0 @@
-.arkynImageUploadLabel {
-  color: var(--text-body);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 19.07px;
-}
-
-.arkynImageUploadLabel.asteriskTrue::before {
-  content: "* ";
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16.34px;
-  text-align: left;
-  color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/ImageUpload/NoFileContent/index.tsx

@@ -1,60 +0,0 @@
-import { ImageUploadNoFileContentProps } from "@arkyn/types";
-import { DragEvent } from "react";
-
-import { Button } from "../../Button";
-
-import "./styles.css";
-
-function NoFileContent(props: ImageUploadNoFileContentProps) {
-  const {
-    dropImageText,
-    isLoading,
-    acceptImage,
-    handleSelectFile,
-    selectImageButtonText,
-    disabled,
-  } = props;
-
-  function handleDrop(event: DragEvent<HTMLDivElement>) {
-    if (disabled) return;
-
-    event.preventDefault();
-    const file = event.dataTransfer.files[0];
-    if (file) handleSelectFile(file);
-  }
-
-  function handleClick() {
-    if (disabled) return;
-
-    const input = document.createElement("input");
-
-    input.type = "file";
-    input.accept = acceptImage;
-
-    input.onchange = (event) => {
-      const file = (event.target as HTMLInputElement).files?.[0];
-      if (file) handleSelectFile(file);
-    };
-
-    input.click();
-  }
-
-  return (
-    <div onDrop={handleDrop} className="arkynImageUploadNoFileContent">
-      <Button
-        isLoading={isLoading}
-        onClick={handleClick}
-        variant="ghost"
-        size="sm"
-        type="button"
-        disabled={disabled}
-      >
-        {selectImageButtonText}
-      </Button>
-
-      <p>{dropImageText}</p>
-    </div>
-  );
-}
-
-export { NoFileContent };

package/src/components/ImageUpload/NoFileContent/styles.css

@@ -1,19 +0,0 @@
-.arkynImageUploadNoFileContent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-
-  height: 100%;
-  width: 100%;
-}
-
-.arkynImageUploadNoFileContent > p {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 12px;
-  text-align: center;
-  white-space: nowrap;
-  color: var(--text-body);
-}

package/src/components/ImageUpload/index.tsx

@@ -1,115 +0,0 @@
-import { ImageUploadProps } from "@arkyn/types";
-import { useState } from "react";
-
-import { useFieldErrors } from "../../hooks/useFieldErrors";
-
-import { HasFileContent } from "./HasFileContent";
-import { ImageUploadError } from "./ImageUploadError";
-import { ImageUploadLabel } from "./ImageUploadLabel";
-import { NoFileContent } from "./NoFileContent";
-
-import "./styles.css";
-
-function ImageUpload(props: ImageUploadProps) {
-  const {
-    name,
-    defaultValue = "",
-    label,
-    showAsterisk = false,
-    action,
-    fileName = "file",
-    method = "POST",
-    acceptImage = "image/*",
-    fileResponseName = "url",
-    changeImageButtonText = "Alterar imagem",
-    selectImageButtonText = "Selecionar imagem",
-    dropImageText = "Ou arraste e solte a imagem aqui",
-    onUpload,
-    disabled = false,
-  } = props;
-
-  const fieldErrors = useFieldErrors();
-  const fieldError = fieldErrors[name];
-
-  const [value, setValue] = useState(defaultValue);
-  const [error, setError] = useState("");
-  const [file, setFile] = useState<File | null>(null);
-  const [filePath, setFilePath] = useState(defaultValue);
-  const [isLoading, setIsLoading] = useState(false);
-
-  async function handleUploadImage(file: File) {
-    if (disabled) return;
-
-    setIsLoading(true);
-    setFile(file);
-    setError("");
-
-    const formData = new FormData();
-    formData.append(fileName, file);
-
-    await fetch(action, { method: method, body: formData })
-      .then(async (response) => await response.json())
-      .then((response) => {
-        if (!!response?.error) setError(response.error);
-        else setValue(response?.[fileResponseName]);
-        onUpload && onUpload(response?.[fileResponseName]);
-      })
-      .catch((error) => {
-        console.error(error);
-        setError("Erro ao enviar imagem");
-      })
-      .finally(() => setIsLoading(false));
-  }
-
-  function handleSelectFile(file: File) {
-    if (disabled) return;
-
-    setFilePath(URL.createObjectURL(file));
-    handleUploadImage(file);
-  }
-
-  const errorMessage = fieldError || error;
-
-  const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
-  const hasImageClassName = filePath ? "hasImage" : "noHasImage";
-  const className = `arkynImageUpload ${hasErrorClassName} ${hasImageClassName}`;
-
-  return (
-    <div className="arkynImageUploadContainer">
-      {label && <ImageUploadLabel label={label} showAsterisk={showAsterisk} />}
-
-      <div className={className}>
-        <input type="hidden" name={name} value={value || ""} />
-
-        {!filePath && (
-          <NoFileContent
-            disabled={disabled}
-            isLoading={isLoading}
-            acceptImage={acceptImage}
-            dropImageText={dropImageText}
-            handleSelectFile={handleSelectFile}
-            selectImageButtonText={selectImageButtonText}
-          />
-        )}
-
-        {filePath && (
-          <HasFileContent
-            disabled={disabled}
-            isLoading={isLoading}
-            acceptImage={acceptImage}
-            filePath={filePath}
-            handleSelectFile={handleSelectFile}
-            changeImageButtonText={changeImageButtonText}
-            reSendImage={
-              !!errorMessage && file ? () => handleUploadImage(file) : undefined
-            }
-          />
-        )}
-      </div>
-
-      {errorMessage && <ImageUploadError error={errorMessage} />}
-    </div>
-  );
-}
-
-export { ImageUpload };

package/src/components/ImageUpload/styles.css

@@ -1,32 +0,0 @@
-.arkynImageUploadContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.arkynImageUpload {
-  outline: 1px solid transparent;
-
-  border-width: 1px;
-  border-color: var(--border);
-  border-radius: var(--rounded-inputs);
-
-  width: 100%;
-  height: 174px;
-  max-width: 475px;
-
-  background: rgba(var(--input-background), 1);
-}
-
-.arkynImageUpload.hasImage {
-  border-style: solid;
-}
-
-.arkynImageUpload.noHasImage {
-  border-style: dashed;
-}
-
-.arkynImageUpload.hasError {
-  border-color: rgb(var(--spotlight-danger));
-  outline-color: Ørgb(var(--spotlight-danger));
-}

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

@@ -1,75 +0,0 @@
-import type { CpfCnpjInputProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import { morpheme } from "../utils/morpheme";
-import { MAX_LENGTH, TYPES, applyMask, clear, getMask } from "./utils";
-
-function getConfig(props: CpfCnpjInputProps, isFocused: boolean) {
-  const {
-    isLoading,
-    isError,
-    size = "md",
-    className: baseClassName = "",
-    variant = "solid",
-    prefix: basePrefix,
-    sufix: baseSufix,
-    leftIcon: LeftIcon,
-    rightIcon: RightIcon,
-    disabled,
-    defaultValue,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    ...rest
-  } = props;
-
-  function parseDefault(event: string) {
-    let value = clear(event);
-    const mask = getMask(value);
-
-    let nextLength = value.length;
-
-    if (nextLength > MAX_LENGTH) return;
-    value = applyMask(value, TYPES[mask] as "CPF" | "CNPJ");
-
-    return value;
-  }
-
-  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,
-    defaultValue: parseDefault(defaultValue || ""),
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    loadingPosition,
-    iconSize: iconSize,
-    Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,
-    ...rest,
-  };
-}
-
-export { getConfig };