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

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 };

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

@@ -1,18 +0,0 @@
-.arkynTableCaption {
-  margin-bottom: 24px;
-}
-
-.arkynTableCaptionContent {
-  display: flex;
-  align-items: center;
-}
-
-.arkynTableCaptionContent > .rightSection {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  gap: 16px;
-
-  flex: 2;
-  padding-left: auto;
-}

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

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

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

@@ -1,15 +0,0 @@
-.arkynTableContainer {
-  display: flex;
-  flex-direction: column;
-
-  width: 100%;
-  height: max-content;
-
-  overflow-y: hidden;
-  overflow-x: auto;
-}
-
-.arkynTableContainer table {
-  border-collapse: separate;
-  border-spacing: 0;
-}

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

@@ -1,20 +0,0 @@
-import { TableFooterProps } from "@arkyn/types";
-import "./styles.css";
-
-function TableFooter(props: TableFooterProps) {
-  const { className: baseClassName, children, ...rest } = props;
-  const className = `arkynTableFooter ${baseClassName}`;
-
-  return (
-    <tfoot className={className.trim()} {...rest}>
-      <tr className="spacingRow" />
-      <tr>
-        <th colSpan={100}>
-          <div className="arkynTableFooterContent">{children}</div>
-        </th>
-      </tr>
-    </tfoot>
-  );
-}
-
-export { TableFooter };

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

@@ -1,13 +0,0 @@
-.arkynTableFooterContent {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  height: 48px;
-  padding-top: 16px;
-  border-top: 1px solid var(--border);
-}
-
-.arkynTableFooter .spacingRow {
-  height: 24px;
-}

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

@@ -1,16 +0,0 @@
-import { TableHeaderProps } from "@arkyn/types";
-import "./styles.css";
-
-function TableHeader(props: TableHeaderProps) {
-  const { className: baseClassName, children, ...rest } = props;
-  const className = `arkynTableHeader ${baseClassName}`;
-
-  return (
-    <thead className={className.trim()} {...rest}>
-      <tr>{children}</tr>
-      <tr className="spacingRow" />
-    </thead>
-  );
-}
-
-export { TableHeader };

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

@@ -1,28 +0,0 @@
-.arkynTableHeader th {
-  text-align: left;
-  background-color: var(--card-foreground-secondary);
-  padding-left: 16px;
-  height: 44px;
-
-  color: var(--text-heading);
-  font-weight: 600;
-  font-size: 14px;
-
-  white-space: nowrap;
-}
-
-.arkynTableHeader th:first-child {
-  border-top-left-radius: var(--rounded-cards);
-  border-bottom-left-radius: var(--rounded-cards);
-}
-
-.arkynTableHeader th:last-child {
-  border-top-right-radius: var(--rounded-cards);
-  border-bottom-right-radius: var(--rounded-cards);
-
-  padding-right: 16px;
-}
-
-.arkynTableHeader .spacingRow {
-  height: 12px;
-}

package/src/components/Table/index.ts

@@ -1,7 +0,0 @@
-import { TableBody } from "./TableBody";
-import { TableCaption } from "./TableCaption";
-import { TableContainer } from "./TableContainer";
-import { TableFooter } from "./TableFooter";
-import { TableHeader } from "./TableHeader";
-
-export { TableBody, TableCaption, TableContainer, TableFooter, TableHeader };

package/src/components/Tabs/TabButton/index.tsx

@@ -1,35 +0,0 @@
-import { TabButtonProps } from "@arkyn/types";
-import { MouseEvent } from "react";
-
-import { useTabContext } from "../TabContainer";
-import "./styles.css";
-
-function TabButton(props: TabButtonProps) {
-  const { children, className: baseClassName = "", onClick, ...rest } = props;
-  const { value, showInitialTab, handleTabClick } = useTabContext();
-
-  const activeClass =
-    value === rest.value && value ? "activeTrue" : "activeFalse";
-  const defaultShowBorderBottomTable =
-    value === rest.value && showInitialTab ? "showBorderBottom" : "";
-
-  const className = `arkynTabButton ${defaultShowBorderBottomTable} ${activeClass} ${baseClassName}`;
-
-  function handleClick(event: MouseEvent<HTMLButtonElement>) {
-    handleTabClick(event);
-    onClick && onClick(event);
-  }
-
-  return (
-    <button
-      onClick={handleClick}
-      className={className.trim()}
-      {...rest}
-      type="button"
-    >
-      {children}
-    </button>
-  );
-}
-
-export { TabButton };

package/src/components/Tabs/TabButton/styles.css

@@ -1,38 +0,0 @@
-.arkynTabButton {
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: 8px 16px;
-  background-color: transparent;
-  border: none;
-
-  font-size: 14px;
-  font-weight: 600;
-  text-align: center;
-
-  color: var(--text-muted);
-
-  transition: all 0.3s ease-in-out;
-}
-
-.arkynTabButton.showBorderBottom::after {
-  content: "";
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-
-  height: 1px;
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynTabButton:hover {
-  cursor: pointer;
-}
-
-.arkynTabButton.activeTrue {
-  color: rgba(var(--spotlight-primary), 1);
-}

package/src/components/Tabs/TabContainer/index.tsx

@@ -1,98 +0,0 @@
-import { TabContainerProps } from "@arkyn/types";
-import {
-  createContext,
-  MouseEvent,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-
-import "./styles.css";
-
-type TabContextType = {
-  value: string;
-  showInitialTab: boolean;
-  handleTabClick: (event: MouseEvent<HTMLButtonElement>) => void;
-};
-
-const TabContext = createContext({} as TabContextType);
-
-function useTabContext() {
-  if (!TabContext)
-    throw new Error("useTabContext must be used within a TabProvider");
-
-  return useContext(TabContext);
-}
-
-function TabContainer(props: TabContainerProps) {
-  const {
-    children,
-    onClick,
-    defaultActive,
-    className: baseClassName,
-    ...rest
-  } = props;
-
-  const [value, setValue] = useState(defaultActive || "");
-  const [showInitialTab, setShowInitialTab] = useState(true);
-
-  const reference = useRef<HTMLElement>(null);
-  const className = `arkynTabContainer ${baseClassName || ""}`;
-
-  const [activeLineStyle, setActiveLineStyle] = useState({
-    width: "0px",
-    left: "0px",
-    transition: "none" as string | undefined,
-  });
-
-  const updateActiveLine = (
-    button: HTMLButtonElement,
-    applyTransition?: boolean
-  ) => {
-    const rect = button.getBoundingClientRect();
-    const containerRect = reference.current!.getBoundingClientRect();
-
-    const transition = applyTransition ? undefined : "none";
-
-    setShowInitialTab(false);
-    setActiveLineStyle({
-      transition,
-      width: `${rect.width}px`,
-      left: `${rect.left - containerRect.left}px`,
-    });
-  };
-
-  useEffect(() => {
-    const tabContainer = reference.current;
-    if (!tabContainer) return;
-
-    let activeButton: HTMLButtonElement | null = null;
-
-    activeButton = tabContainer.querySelector("button.activeTrue");
-    if (activeButton) updateActiveLine(activeButton);
-  }, []);
-
-  const handleTabClick = (event: MouseEvent<HTMLButtonElement>) => {
-    const target = event.target as HTMLButtonElement;
-
-    if (target) {
-      setValue(target.value);
-      target.classList.add("activeTrue");
-
-      updateActiveLine(target, true);
-      onClick && onClick(target.value);
-    }
-  };
-
-  return (
-    <nav ref={reference} className={className.trim()} {...rest}>
-      <TabContext.Provider value={{ handleTabClick, showInitialTab, value }}>
-        {children}
-      </TabContext.Provider>
-      <div className="activeLine" style={activeLineStyle} />
-    </nav>
-  );
-}
-
-export { TabContainer, useTabContext };

package/src/components/Tabs/TabContainer/styles.css

@@ -1,21 +0,0 @@
-.arkynTabContainer {
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  justify-content: start;
-
-  gap: 4px;
-
-  border-bottom: 1px solid var(--border);
-}
-
-.arkynTabContainer .activeLine {
-  position: absolute;
-  height: 1px;
-
-  transition: all 0.3s ease-in-out;
-  bottom: -1px;
-
-  background-color: rgba(var(--spotlight-primary), 1);
-}

package/src/components/Tabs/index.ts

@@ -1,4 +0,0 @@
-import { TabButton } from "./TabButton";
-import { TabContainer } from "./TabContainer";
-
-export { TabContainer, TabButton };