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

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

package/src/components/Textarea/index.tsx

@@ -1,70 +0,0 @@
-import { TextareaProps } from "@arkyn/types";
-import { FocusEvent, useRef, useState } from "react";
-
-import { useFormController } from "../Form/FormController";
-import "./styles.css";
-
-function Textarea(props: TextareaProps) {
-  const {
-    variant = "solid",
-    size = "md",
-    className: baseClassName,
-    disabled = false,
-    readOnly = false,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    ...rest
-  } = props;
-
-  const [isFocused, setIsFocused] = useState(false);
-  const { inputRef, id, error } = useFormController();
-  const baseRef = useRef<HTMLInputElement>(null);
-
-  const ref = inputRef || baseRef;
-  const isError = props.isError || !!error;
-
-  const errorClass = isError ? "errorTrue" : "errorFalse";
-  const opacityClass = disabled || readOnly ? "opacityTrue" : "opacityFalse";
-  const focusedClass = isFocused ? "focusedTrue" : "focusedFalse";
-
-  const className = `arkynTextarea ${variant} ${size} ${opacityClass} ${errorClass} ${focusedClass} ${baseClassName}`;
-
-  function handleSectionClick() {
-    if (disabled || !ref?.current) return;
-    setIsFocused(true);
-    ref.current.focus();
-  }
-
-  function handleFocus(e: FocusEvent<HTMLTextAreaElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLTextAreaElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  return (
-    <section
-      title={title}
-      style={style}
-      onClick={handleSectionClick}
-      className={className}
-    >
-      <textarea
-        id={id}
-        disabled={disabled}
-        readOnly={readOnly}
-        ref={ref as any}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        {...rest}
-      />
-    </section>
-  );
-}
-
-export { Textarea };

package/src/components/Textarea/styles.css

@@ -1,93 +0,0 @@
-/* BASE */
-.arkynTextarea {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  padding: 16px;
-  gap: 8px;
-  border-radius: var(--rounded-inputs);
-
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-}
-
-.arkynTextarea:hover {
-  cursor: text;
-}
-
-.arkynTextarea textarea {
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-  resize: none;
-}
-
-.arkynTextarea textarea {
-  color: var(--text-heading);
-}
-
-.arkynTextarea textarea::placeholder {
-  color: var(--text-muted);
-}
-
-.arkynTextarea.opacityTrue {
-  opacity: 0.5;
-}
-
-/* VARIANTS */
-.arkynTextarea.solid {
-  border-color: var(--border);
-  background-color: rgba(var(--input-background), 1);
-}
-
-.arkynTextarea.solid.errorTrue {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynTextarea:not(.opacityTrue).solid.focusedTrue {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynTextarea.outline {
-  border-color: var(--border);
-}
-
-.arkynTextarea.outline.errorTrue {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynTextarea:not(.opacityTrue).outline.focusedTrue {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-/* SIZE */
-.arkynTextarea.md textarea {
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 400;
-}
-
-.arkynTextarea.md textarea::placeholder {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.arkynTextarea.lg textarea {
-  line-height: 16px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.arkynTextarea.lg textarea::placeholder {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
-}

package/src/components/Toast/index.tsx

@@ -1,36 +0,0 @@
-import { ToastProps } from "@arkyn/types";
-import { CheckCircle2, Info, XCircle } from "lucide-react";
-
-import "./styles.css";
-
-function Toast(props: ToastProps) {
-  const { message, type } = props;
-
-  const className = `arkynToast ${type}}`;
-
-  function Icon() {
-    switch (type) {
-      case "success":
-        return <CheckCircle2 />;
-      case "danger":
-        return <XCircle />;
-      default:
-        return <Info />;
-    }
-  }
-
-  return (
-    <div className={className}>
-      <div>
-        <div className="bg" />
-        <Icon />
-      </div>
-      <p>
-        {/* <strong title={title}>{title}</strong> */}
-        <span>{message}</span>
-      </p>
-    </div>
-  );
-}
-
-export { Toast };

package/src/components/Toast/styles.css

@@ -1,153 +0,0 @@
-.arkynToast {
-  display: flex;
-  align-items: start;
-
-  min-width: 300px;
-  max-width: 300px;
-  padding: 16px;
-  gap: 12px;
-
-  border-radius: var(--rounded-cards);
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.arkynToast > div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-
-  border-radius: 90px;
-  overflow: hidden;
-}
-
-.arkynToast > div > .bg {
-  content: " ";
-  left: 0px;
-  right: 0px;
-  top: 0px;
-  bottom: 0px;
-  position: absolute;
-  z-index: 1;
-}
-
-.arkynToast > div > svg {
-  z-index: 2;
-}
-
-.arkynToast > div circle {
-  display: none;
-}
-
-.arkynToast > p {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  width: 100%;
-  overflow: hidden;
-}
-
-.arkynToast > p > strong {
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Schemas */
-.arkynToast.info {
-  background-color: rgba(var(--toast-info), 1);
-  color: #ffffff;
-}
-
-.arkynToast.info > div > .bg {
-  background-color: rgba(var(--toast-info), 1);
-  filter: brightness(0.8);
-}
-
-.arkynToast.warning {
-  background-color: rgba(var(--toast-warning), 1);
-  color: #ffffff;
-}
-
-.arkynToast.warning > div > .bg {
-  background-color: rgba(var(--toast-warning), 1);
-  filter: brightness(0.8);
-}
-
-.arkynToast.danger {
-  background-color: rgba(var(--toast-danger), 1);
-  color: #ffffff;
-}
-
-.arkynToast.danger > div > .bg {
-  background-color: rgba(var(--toast-danger), 1);
-  filter: brightness(0.8);
-}
-
-.arkynToast.success {
-  background-color: rgba(var(--toast-success), 1);
-  color: #ffffff;
-}
-
-.arkynToast.success > div > .bg {
-  background-color: rgba(var(--toast-success), 1);
-  filter: brightness(0.8);
-}
-
-/* Sizes */
-.arkynToast.md {
-  min-width: 260px;
-}
-
-.arkynToast.md > div {
-  min-height: 20px;
-  max-height: 20px;
-  min-width: 20px;
-  max-width: 20px;
-}
-
-.arkynToast.md > div > svg {
-  min-height: 26px;
-  min-width: 26px;
-}
-
-.arkynToast.md > p > strong {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 16px;
-}
-
-.arkynToast.md > p > span {
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-}
-
-.arkynToast.lg {
-  min-width: 260px;
-}
-
-.arkynToast.lg > div {
-  min-height: 24px;
-  max-height: 24px;
-  min-width: 24px;
-  max-width: 24px;
-}
-
-.arkynToast.lg > div > svg {
-  min-height: 30px;
-  min-width: 30px;
-}
-
-.arkynToast.lg > p > strong {
-  font-weight: 600;
-  font-size: 15px;
-  line-height: 17px;
-}
-
-.arkynToast.lg > p > span {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-}