@arkyn/components 3.0.1-beta.4 → 3.0.1-beta.41

package/src/components/Select/styles.css

@@ -1,307 +0,0 @@
-/* BASE */
-.arkyn_select {
-  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;
-}
-
-.arkyn_select:hover {
-  cursor: pointer;
-}
-
-.arkyn_select input {
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-}
-
-.arkyn_select input {
-  color: var(--text-heading);
-}
-
-.arkyn_select .prefix {
-  color: var(--text-body);
-  background: var(--border);
-  font-weight: 400;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-}
-
-.arkyn_select .prefix {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: 5px 0 0 5px;
-  border-right: 1px solid var(--border);
-}
-
-.arkyn_select.placeholder_dark_true input::placeholder {
-  color: var(--text-heading);
-}
-
-.arkyn_select.placeholder_dark_false input::placeholder {
-  color: var(--text-muted);
-}
-
-.arkyn_select svg {
-  color: var(--text-muted);
-}
-
-.arkyn_select.errored svg {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkyn_select:not(.opacity).focused svg {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkyn_select.opacity {
-  opacity: 0.5;
-}
-
-.arkyn_select .arkyn_select_arrow {
-  transition: 0.15s all ease-in-out;
-  color: var(--text-muted);
-}
-
-.arkyn_select:not(.opacity).focused .arkyn_select_arrow {
-  transform: rotate(180deg);
-}
-
-/* VARIANTS */
-.arkyn_select.solid {
-  border-color: var(--border);
-  background-color: rgba(var(--input-background), 1);
-}
-
-.arkyn_select.solid.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkyn_select:not(.opacity).solid.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkyn_select.outline {
-  border-color: var(--border);
-}
-
-.arkyn_select.outline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkyn_select:not(.opacity).outline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkyn_select.underline {
-  border-radius: 0;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  outline: none;
-  border-color: var(--border);
-}
-
-.arkyn_select.underline .prefix {
-  display: none;
-}
-
-.arkyn_select.underline::before {
-  content: " ";
-  position: absolute;
-  height: 1px;
-  left: 0;
-  right: 0;
-  bottom: -2px;
-  background: transparent;
-}
-
-.arkyn_select.underline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkyn_select.underline.errored::before {
-  background: rgba(var(--spotlight-danger), 1);
-}
-
-.arkyn_select:not(.opacity).underline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkyn_select:not(.opacity).underline.focused::before {
-  background: rgba(var(--spotlight-primary), 1);
-}
-
-/* SIZE */
-.arkyn_select.md input {
-  min-height: 40px;
-  max-height: 40px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 400;
-}
-
-.arkyn_select.md input::placeholder {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.arkyn_select.md.hasPrefix {
-  padding-left: 60px;
-}
-
-.arkyn_select.md .prefix {
-  height: 40px;
-  width: 44px;
-  font-size: 14px;
-}
-
-.arkyn_select.lg input {
-  min-height: 44px;
-  max-height: 44px;
-  line-height: 16px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.arkyn_select.lg input::placeholder {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
-}
-
-.arkyn_select.lg .prefix {
-  height: 44px;
-  width: 48px;
-  font-size: 16px;
-}
-
-.arkyn_select.lg.hasPrefix {
-  padding-left: 64px;
-}
-
-/* CONTENT */
-.arkyn_select_content {
-  position: absolute;
-  z-index: 6;
-
-  top: calc(100% + 5px);
-  left: -2px;
-  right: -2px;
-
-  border-radius: 6px;
-  list-style: none;
-
-  display: flex;
-  flex-direction: column;
-
-  flex: 1;
-  overflow: hidden;
-  height: max-content;
-
-  border: 1px solid var(--border);
-  background-color: var(--card);
-
-  max-height: 300px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.arkyn_select_content .arkyn_select_option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  font-weight: 400;
-  line-height: 21.79px;
-
-  color: var(--text-body);
-}
-
-.arkyn_select.md .arkyn_select_content .arkyn_select_option {
-  font-size: 14px;
-  padding: 8px 16px;
-}
-
-.arkyn_select.lg .arkyn_select_content .arkyn_select_option {
-  font-size: 16px;
-  padding: 8px 16px;
-}
-
-.arkyn_select_content > p {
-  font-weight: 400;
-  font-size: 14px;
-  padding: 16px;
-  text-align: center;
-  line-height: 21.79px;
-
-  color: var(--text-body);
-}
-
-.arkyn_select_content .arkyn_select_option svg {
-  height: 20px;
-  width: 20px;
-  color: rgba(var(--spotlight-primary), 1);
-  display: none;
-}
-
-.arkyn_select_content .arkyn_select_option:hover {
-  cursor: pointer;
-  background-color: var(--card-foreground-primary);
-}
-
-/* .arkyn_select_content .arkyn_select_option:not(:last-child) {
-  border-bottom: 1px solid var(--secondary-300);
-} */
-
-.arkyn_select_content .arkyn_select_option.active {
-  font-weight: 600;
-  color: var(--text-heading);
-  background-color: var(--card-foreground-primary);
-}
-
-.arkyn_select_content .arkyn_select_option.active svg {
-  display: unset;
-}
-
-/* SPIN */
-.arkyn_select .spinner {
-  animation: spin 2s linear infinite;
-}
-
-/* OVERLAY */
-.arkyn_select_overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 5;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/Skeleton/index.tsx

@@ -1,11 +0,0 @@
-import { SkeletonProps } from "@arkyn/types";
-import "./styles.css";
-
-function Skeleton(props: SkeletonProps) {
-  const { className: baseClassName, ...rest } = props;
-  const className = `arkynSkeleton ${baseClassName}`;
-
-  return <aside className={className.trim()} {...rest} />;
-}
-
-export { Skeleton };

package/src/components/Skeleton/styles.css

@@ -1,24 +0,0 @@
-.arkynSkeleton {
-  width: 100%;
-  height: 100%;
-  border-radius: 6px;
-
-  background: linear-gradient(
-    to right,
-    var(--skeleton) 4%,
-    var(--skeleton-foreground) 25%,
-    var(--skeleton) 36%
-  );
-
-  background-size: 40rem 100%;
-  animation: shimmer 1.5s infinite linear;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -40rem 0;
-  }
-  100% {
-    background-position: 40rem 0;
-  }
-}

package/src/components/Slider/index.tsx

@@ -1,73 +0,0 @@
-import { SliderProps } from "@arkyn/types";
-import { useEffect, useRef, useState } from "react";
-
-import "./styles.css";
-
-function Slider(props: SliderProps) {
-  const { onChange, value, disableDrag = false, onDragging } = props;
-  const [isDragging, setIsDragging] = useState(false);
-  const sliderRef = useRef<HTMLDivElement>(null);
-
-  const handleMouseDown = () => {
-    setIsDragging(true);
-  };
-
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
-
-  const handleMouseMove = (event: MouseEvent) => {
-    if (disableDrag) return;
-    if (!isDragging || !sliderRef.current) return;
-
-    const rect = sliderRef.current.getBoundingClientRect();
-    const offsetX = event.clientX - rect.left;
-    const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
-
-    onChange(newValue);
-  };
-
-  const handleSliderClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (!sliderRef.current) return;
-
-    const rect = sliderRef.current.getBoundingClientRect();
-    const offsetX = event.clientX - rect.left;
-    const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
-
-    onChange(newValue);
-  };
-
-  useEffect(() => {
-    if (isDragging) {
-      onDragging && onDragging(true);
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    } else {
-      onDragging && onDragging(false);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    }
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging]);
-
-  const isDraggingClass = isDragging ? "isDragging" : "isNotDragging";
-  const sliderClassname = `arkynSliderTrack ${isDraggingClass}`;
-
-  return (
-    <div
-      className={sliderClassname}
-      ref={sliderRef}
-      onMouseDown={handleMouseDown}
-      onClick={handleSliderClick}
-    >
-      <div className="arkynSliderFill" style={{ width: `${value}%` }} />
-      <div className="arkynSliderThumb" style={{ left: `${value}%` }} />
-    </div>
-  );
-}
-
-export { Slider };

package/src/components/Slider/styles.css

@@ -1,37 +0,0 @@
-.arkynSliderTrack {
-  width: 100%;
-  max-width: 400px;
-
-  height: 6px;
-  border: 1px solid var(--border);
-  background: rgba(var(--input-background), 1);
-  border-radius: 5px;
-  position: relative;
-  cursor: pointer;
-}
-
-.arkynSliderTrack.isDragging {
-  cursor: grabbing;
-}
-
-.arkynSliderFill {
-  height: 100%;
-  background: rgb(var(--spotlight-primary));
-  border-radius: 5px;
-}
-
-.arkynSliderThumb {
-  width: 12px;
-  cursor: grab;
-  height: 12px;
-  background: rgb(var(--spotlight-primary));
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.arkynSliderValue {
-  margin-top: 10px;
-  font-size: 18px;
-}

package/src/components/Switch/index.tsx

@@ -1,48 +0,0 @@
-import { SwitchProps } from "@arkyn/types";
-import { useState } from "react";
-
-import { useFormController } from "../Form/FormController";
-import "./styles.css";
-
-function Switch(props: SwitchProps) {
-  const {
-    size = "lg",
-    defaultChecked = false,
-    checked: baseChecked = null,
-    value,
-    unCheckedValue = "",
-    name,
-    className: baseClassName = "",
-    onCheck,
-    ...rest
-  } = props;
-
-  const [isChecked, setIsChecked] = useState(defaultChecked);
-  const { id, inputRef } = useFormController();
-
-  const currentChecked =
-    typeof baseChecked === "boolean" ? baseChecked : isChecked;
-
-  function handleCheck() {
-    setIsChecked(!isChecked);
-    onCheck && onCheck(!currentChecked ? value || "checked" : unCheckedValue);
-  }
-
-  const checkedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-  const className = `arkynSwitch ${checkedClass} ${size} ${baseClassName}`;
-
-  return (
-    <button type="button" onClick={handleCheck} className={className} {...rest}>
-      <input
-        id={id}
-        type="hidden"
-        name={name}
-        ref={inputRef}
-        onClick={handleCheck}
-        value={currentChecked ? value || "checked" : unCheckedValue}
-      />
-    </button>
-  );
-}
-
-export { Switch };

package/src/components/Switch/styles.css

@@ -1,90 +0,0 @@
-.arkynSwitch {
-  position: relative;
-
-  border: 1px solid transparent;
-  border-radius: 999999px;
-
-  transition: all 0.3s ease-in-out;
-}
-
-.arkynSwitch:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynSwitch::before {
-  content: "";
-  position: absolute;
-  top: 2px;
-  bottom: 2px;
-  border-radius: 50%;
-  background-color: white;
-  transition: all 0.2s;
-  transform: translateX(-2px);
-}
-
-.arkynSwitch.checkedTrue {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynSwitch.checkedFalse {
-  background-color: var(--border);
-}
-
-.arkynSwitch.checkedTrue::before {
-  transform: translateX(3px);
-}
-
-.arkynSwitch.sm {
-  min-width: 32px;
-  max-width: 32px;
-  min-height: 16px;
-  max-height: 16px;
-}
-
-.arkynSwitch.sm::before {
-  min-height: 10px;
-  max-height: 10px;
-  min-width: 10px;
-  max-width: 10px;
-}
-
-.arkynSwitch.sm.checkedFalse::before {
-  transform: translateX(-13px);
-}
-
-.arkynSwitch.md {
-  min-width: 40px;
-  max-width: 40px;
-  min-height: 20px;
-  max-height: 20px;
-}
-
-.arkynSwitch.md::before {
-  min-height: 14px;
-  max-height: 14px;
-  min-width: 14px;
-  max-width: 14px;
-}
-
-.arkynSwitch.md.checkedFalse::before {
-  transform: translateX(-17px);
-}
-
-.arkynSwitch.lg {
-  min-width: 48px;
-  max-width: 48px;
-  min-height: 24px;
-  max-height: 24px;
-}
-
-.arkynSwitch.lg::before {
-  min-height: 18px;
-  max-height: 18px;
-  min-width: 18px;
-  max-width: 18px;
-}
-
-.arkynSwitch.lg.checkedFalse::before {
-  transform: translateX(-21px);
-}

package/src/components/Table/TableBody/index.tsx

@@ -1,31 +0,0 @@
-import { TableBodyProps } from "@arkyn/types";
-import { Children } from "react";
-import "./styles.css";
-
-function TableBody(props: TableBodyProps) {
-  const {
-    emptyMessage = "Nenhum dado adicionado.",
-    className: baseClassName,
-    children,
-    ...rest
-  } = props;
-  const className = `arkynTableBody ${baseClassName}`;
-
-  const isEmpty = Children.count(children) === 0;
-
-  return (
-    <tbody className={className.trim()} {...rest}>
-      {isEmpty ? (
-        <tr className="arkynTableBodyEmptyLine">
-          <td colSpan={100}>
-            <div>{emptyMessage}</div>
-          </td>
-        </tr>
-      ) : (
-        children
-      )}
-    </tbody>
-  );
-}
-
-export { TableBody };

package/src/components/Table/TableBody/styles.css

@@ -1,62 +0,0 @@
-.arkynTableBody > tr:nth-child(odd) > td {
-  background-color: var(--card-foreground-primary);
-}
-
-.arkynTableBody > tr > td {
-  padding-left: 16px;
-  height: 64px;
-
-  font-weight: 400;
-  font-size: 14px;
-
-  color: var(--text-body);
-}
-
-.arkynTableBody > tr > td:first-child {
-  border-top-left-radius: var(--rounded-cards);
-  border-bottom-left-radius: var(--rounded-cards);
-}
-
-.arkynTableBody > tr > td:last-child {
-  border-top-right-radius: var(--rounded-cards);
-  border-bottom-right-radius: var(--rounded-cards);
-
-  padding-right: 16px;
-}
-
-.arkynTableBody > tr:nth-child(odd):hover > td {
-  filter: brightness(0.98);
-}
-
-.arkynTableBody > tr:nth-child(even):hover > td {
-  background-color: var(--card-foreground-primary);
-  filter: brightness(0.98);
-}
-
-html.dark .arkynTableBody > tr:nth-child(odd):hover > td {
-  filter: brightness(1.2);
-}
-
-html.dark .arkynTableBody > tr:nth-child(even):hover > td {
-  background-color: var(--card-foreground-primary);
-  filter: brightness(1.2);
-}
-
-.arkynTableBodyEmptyLine > td {
-  background-color: var(--card-foreground-primary);
-  height: 64px;
-}
-
-.arkynTableBodyEmptyLine > td > div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  text-align: center;
-  white-space: nowrap;
-
-  font-weight: 400;
-  font-size: 14px;
-
-  color: var(--text-body);
-}

package/src/components/Table/TableCaption/index.tsx

@@ -1,15 +0,0 @@
-import { TableCaptionProps } from "@arkyn/types";
-import "./styles.css";
-
-function TableCaption(props: TableCaptionProps) {
-  const { className: baseClassName, children, ...rest } = props;
-  const className = `arkynTableCaption ${baseClassName}`;
-
-  return (
-    <caption className={className.trim()} {...rest}>
-      <div className="arkynTableCaptionContent">{children}</div>
-    </caption>
-  );
-}
-
-export { TableCaption };