@arkyn/components 1.2.0

package/src/components/IconButton/styles.css

@@ -0,0 +1,318 @@
+/* BASE */
+
+.arkyn_icon_button {
+  background: transparent;
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
+  position: relative;
+  transition: 0.15s all ease-out;
+}
+
+.arkyn_icon_button:hover {
+  cursor: pointer;
+}
+
+.arkyn_icon_button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.arkyn_icon_button .content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* VARIANTS */
+.arkyn_icon_button.solid {
+  color: #fff;
+}
+
+.arkyn_icon_button.solid:disabled {
+  opacity: 0.4;
+}
+
+.arkyn_icon_button.solid.primary {
+  background-color: var(--primary-500);
+}
+
+.arkyn_icon_button.solid.primary:hover {
+  background-color: var(--primary-400);
+}
+
+.arkyn_icon_button.solid.primary:disabled {
+  background-color: var(--primary-400);
+}
+
+.arkyn_icon_button.solid.danger {
+  background-color: var(--danger-600);
+}
+
+.arkyn_icon_button.solid.danger:hover {
+  background-color: var(--danger-500);
+}
+
+.arkyn_icon_button.solid.danger:disabled {
+  background-color: var(--danger-500);
+}
+
+.arkyn_icon_button.solid.success {
+  background-color: var(--success-500);
+}
+
+.arkyn_icon_button.solid.success:hover {
+  background-color: var(--success-400);
+}
+
+.arkyn_icon_button.solid.success:disabled {
+  background-color: var(--success-400);
+}
+
+.arkyn_icon_button.solid.warning {
+  background-color: var(--warning-600);
+}
+
+.arkyn_icon_button.solid.warning:hover {
+  background-color: var(--warning-500);
+}
+
+.arkyn_icon_button.solid.warning:disabled {
+  background-color: var(--warning-500);
+}
+
+.arkyn_icon_button.outline {
+  border-color: var(--secondary-300);
+}
+
+.arkyn_icon_button.outline:hover {
+  border-color: var(--secondary-200);
+}
+
+.arkyn_icon_button.outline:disabled {
+  border-color: var(--secondary-200);
+}
+
+.arkyn_icon_button.outline.primary {
+  color: var(--primary-500);
+}
+
+.arkyn_icon_button.outline.primary:hover {
+  color: var(--primary-400);
+}
+
+.arkyn_icon_button.outline.primary:disabled {
+  color: var(--primary-400);
+}
+
+.arkyn_icon_button.outline.danger {
+  color: var(--danger-600);
+}
+
+.arkyn_icon_button.outline.danger:hover {
+  color: var(--danger-500);
+}
+
+.arkyn_icon_button.outline.danger:disabled {
+  color: var(--danger-500);
+}
+
+.arkyn_icon_button.outline.success {
+  color: var(--success-500);
+}
+
+.arkyn_icon_button.outline.success:hover {
+  color: var(--success-400);
+}
+
+.arkyn_icon_button.outline.success:disabled {
+  color: var(--success-400);
+}
+
+.arkyn_icon_button.outline.warning {
+  color: var(--warning-600);
+}
+
+.arkyn_icon_button.outline.warning:hover {
+  color: var(--warning-500);
+}
+
+.arkyn_icon_button.outline.warning:disabled {
+  color: var(--warning-500);
+}
+
+.arkyn_icon_button.ghost:disabled {
+  opacity: 0.4;
+}
+
+.arkyn_icon_button.ghost.primary {
+  color: var(--primary-500);
+  background-color: var(--primary-100);
+}
+
+.arkyn_icon_button.ghost.primary:hover {
+  color: var(--primary-400);
+  background-color: var(--primary-50);
+}
+
+.arkyn_icon_button.ghost.primary:disabled {
+  color: var(--primary-400);
+  background-color: var(--primary-50);
+}
+
+.arkyn_icon_button.ghost.danger {
+  color: var(--danger-600);
+  background-color: var(--danger-100);
+}
+
+.arkyn_icon_button.ghost.danger:hover {
+  color: var(--danger-500);
+  background-color: var(--danger-50);
+}
+
+.arkyn_icon_button.ghost.danger:disabled {
+  color: var(--danger-500);
+  background-color: var(--danger-50);
+}
+
+.arkyn_icon_button.ghost.success {
+  color: var(--success-500);
+  background-color: var(--success-100);
+}
+
+.arkyn_icon_button.ghost.success:hover {
+  color: var(--success-400);
+  background-color: var(--success-50);
+}
+
+.arkyn_icon_button.ghost.success:disabled {
+  color: var(--success-400);
+  background-color: var(--success-50);
+}
+
+.arkyn_icon_button.ghost.warning {
+  color: var(--warning-600);
+  background-color: var(--warning-100);
+}
+
+.arkyn_icon_button.ghost.warning:hover {
+  color: var(--warning-500);
+  background-color: var(--warning-50);
+}
+
+.arkyn_icon_button.ghost.warning:disabled {
+  color: var(--warning-500);
+  background-color: var(--warning-50);
+}
+
+.arkyn_icon_button.invisible:disabled {
+  opacity: 0.4;
+}
+
+.arkyn_icon_button.invisible.primary {
+  color: var(--primary-500);
+}
+
+.arkyn_icon_button.invisible.primary:hover {
+  color: var(--primary-400);
+}
+
+.arkyn_icon_button.invisible.primary:disabled {
+  color: var(--primary-400);
+}
+
+.arkyn_icon_button.invisible.danger {
+  color: var(--danger-600);
+}
+
+.arkyn_icon_button.invisible.danger:hover {
+  color: var(--danger-500);
+}
+
+.arkyn_icon_button.invisible.danger:disabled {
+  color: var(--danger-500);
+}
+
+.arkyn_icon_button.invisible.success {
+  color: var(--success-500);
+}
+
+.arkyn_icon_button.invisible.success:hover {
+  color: var(--success-400);
+}
+
+.arkyn_icon_button.invisible.success:disabled {
+  color: var(--success-400);
+}
+
+.arkyn_icon_button.invisible.warning {
+  color: var(--warning-600);
+}
+
+.arkyn_icon_button.invisible.warning:hover {
+  color: var(--warning-500);
+}
+
+.arkyn_icon_button.invisible.warning:disabled {
+  color: var(--warning-500);
+}
+
+/* SIZE */
+
+.arkyn_icon_button.lg {
+  border-radius: 6px;
+  height: 44px;
+  width: 44px;
+}
+
+.arkyn_icon_button.md {
+  border-radius: 6px;
+  height: 40px;
+  width: 40px;
+}
+
+.arkyn_icon_button.sm {
+  border-radius: 6px;
+  height: 32px;
+  width: 32px;
+}
+
+.arkyn_icon_button.xs {
+  border-radius: 4px;
+  height: 24px;
+  width: 24px;
+}
+
+/* SPIN */
+
+.arkyn_icon_button .spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+}
+
+.arkyn_icon_button .spinner svg {
+  animation: spin 2s linear infinite;
+}
+
+.arkyn_icon_button.loading_true .content {
+  opacity: 0;
+}
+
+.arkyn_icon_button.loading_true .spinner {
+  opacity: 1;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,60 @@
+import type { CpfCnpjInputProps } from "@arkyn/types";
+import { Loader2 } from "lucide-react";
+
+import { morpheme } from "../utils/morpheme";
+
+function getConfig(props: CpfCnpjInputProps, 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: 14, lg: 16 };
+  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/CpfCpnjInput/index.tsx

@@ -0,0 +1,112 @@
+import type { CpfCnpjInputProps } from "@arkyn/types";
+import type { ChangeEvent, FocusEvent } from "react";
+
+import { useRef, useState } from "react";
+
+import { useFormController } from "../../Form/FormController";
+import { getConfig } from "./getConfig";
+import { MAX_LENGTH, TYPES, applyMask, clear, getMask } from "./utils";
+
+function CpfCnpjInput(props: CpfCnpjInputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [inputValue, setInputValue] = useState(
+    clear(props?.defaultValue || "")
+  );
+
+  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,
+    Spinner,
+    onChange,
+    value,
+    defaultValue = "",
+    ...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 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 "CPF" | "CNPJ");
+
+    event.target.value = value;
+
+    setInputValue(value);
+    onChange && onChange(event);
+  }
+
+  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} />}
+
+      <input
+        disabled={disabled || isLoading}
+        readOnly={readOnly}
+        ref={ref}
+        value={value || inputValue}
+        onFocus={handleFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        {...rest}
+      />
+
+      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
+      {showRightSpinner && Spinner}
+      {sufix}
+    </section>
+  );
+}
+
+export { CpfCnpjInput };

package/src/components/Input/CpfCpnjInput/utils.ts

@@ -0,0 +1,30 @@
+function clear(value: string) {
+  return value && value.replace(/[^0-9]/g, "");
+}
+
+function applyMask(value: string, mask: "CPF" | "CNPJ") {
+  let result = "";
+
+  let inc = 0;
+  Array.from(value).forEach((letter, index) => {
+    if (!mask[index + inc].match(/[0-9]/)) {
+      result += mask[index + inc];
+      inc++;
+    }
+    result += letter;
+  });
+  return result;
+}
+
+function getMask(value: string): "CNPJ" | "CPF" {
+  return value.length > 11 ? "CNPJ" : "CPF";
+}
+
+const TYPES = {
+  CPF: "999.999.999-999",
+  CNPJ: "99.999.999/9999-99",
+};
+
+const MAX_LENGTH = clear(TYPES.CNPJ).length;
+
+export { clear, applyMask, MAX_LENGTH, TYPES, getMask };

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

@@ -0,0 +1,64 @@
+import type { CurrencyInputProps } from "@arkyn/types";
+import { Loader2 } from "lucide-react";
+
+import { morpheme } from "../utils/morpheme";
+
+function getConfig(props: CurrencyInputProps, 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,
+    showCents = false,
+    max = 1000000000,
+    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: 14, lg: 16 };
+  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,
+    max,
+    onChange,
+    showCents,
+    loadingPosition,
+    iconSize: iconSize,
+    Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,
+    ...rest,
+  };
+}
+
+export { getConfig };

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

@@ -0,0 +1,103 @@
+import type { CurrencyInputProps } from "@arkyn/types";
+import type { FocusEvent, KeyboardEvent } from "react";
+
+import { useRef, useState } from "react";
+
+import { useFormController } from "../../Form/FormController";
+import { getConfig } from "./getConfig";
+import { currencyInputKeyDown, valueDisplay } from "./utils";
+
+function CurrencyInput(props: CurrencyInputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [currencyValue, setCurrencyValue] = useState(props.defaultValue || 0);
+
+  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,
+    Spinner,
+    value,
+    max,
+    onKeyDown,
+    onChange,
+    showCents,
+    ...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 handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    currencyInputKeyDown({ currencyValue, event, max, setCurrencyValue });
+    onChange && onChange(currencyValue);
+    onKeyDown && onKeyDown(event);
+  }
+
+  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} />}
+
+      <input
+        value={valueDisplay(value || currencyValue, showCents)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled || isLoading}
+        readOnly={readOnly}
+        ref={ref}
+        onFocus={handleFocus}
+        onChange={() => {}}
+        onBlur={handleBlur}
+        {...rest}
+      />
+
+      {showRightSpinner && Spinner}
+      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
+      {sufix}
+    </section>
+  );
+}
+
+export { CurrencyInput };