@arkyn/components 3.0.1-beta.3 → 3.0.1-beta.31

package/src/components/Modal/Header/index.tsx

@@ -1,37 +0,0 @@
-import { ModalHeaderProps } from "@arkyn/types";
-import { X } from "lucide-react";
-import { useContext } from "react";
-
-import { modalContext } from "../Container";
-import "./styles.css";
-
-function ModalHeader(args: ModalHeaderProps) {
-  const {
-    showCloseButton = true,
-    className: baseClassName,
-    children,
-    ...rest
-  } = args;
-
-  const { makeInvisible } = useContext(modalContext);
-  const className = `arkynModalHeader ${baseClassName}`;
-
-  return (
-    <header className={className.trim()} {...rest}>
-      {children}
-
-      {showCloseButton && (
-        <button
-          type="button"
-          onClick={makeInvisible}
-          aria-label="Close modal button"
-          className="arkynModalHeaderCloseButton"
-        >
-          <X size={24} />
-        </button>
-      )}
-    </header>
-  );
-}
-
-export { ModalHeader };

package/src/components/Modal/Header/styles.css

@@ -1,38 +0,0 @@
-.arkynModalHeader {
-  display: flex;
-  align-items: center;
-
-  height: 56px;
-  padding: 16px;
-
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 20px;
-
-  color: var(--text-heading);
-
-  border-bottom: 1px solid var(--border);
-}
-
-.arkynModalHeaderCloseButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  margin-left: auto;
-
-  padding: 2px;
-  border-radius: 4px;
-
-  border: none;
-  background: none;
-
-  color: var(--text-body);
-  background-color: var(--card);
-  transition: all 0.15s ease-out;
-}
-
-.arkynModalHeaderCloseButton:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}

package/src/components/Modal/index.ts

@@ -1,5 +0,0 @@
-import { ModalContainer } from "./Container";
-import { ModalFooter } from "./Footer";
-import { ModalHeader } from "./Header";
-
-export { ModalContainer, ModalHeader, ModalFooter };

package/src/components/MultiSelect/components/MultiSelectChevron/index.tsx

@@ -1,26 +0,0 @@
-import { ChevronDown } from "lucide-react";
-import "./styles.css";
-
-type MultiSelectChevronProps = {
-  isLoading: boolean;
-  iconSize: number;
-  disabled: boolean;
-  readOnly: boolean;
-  isFocused: boolean;
-};
-
-function MultiSelectChevron(props: MultiSelectChevronProps) {
-  const { iconSize, isLoading, disabled, readOnly, isFocused } = props;
-
-  const notAnimate = disabled || readOnly ? "notAnimate" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkynMultiSelectChevron ${notAnimate} ${focused}`;
-
-  if (isLoading) return <></>;
-  return (
-    <ChevronDown className={className} size={iconSize} strokeWidth={2.5} />
-  );
-}
-
-export { MultiSelectChevron };

package/src/components/MultiSelect/components/MultiSelectChevron/styles.css

@@ -1,7 +0,0 @@
-.arkynMultiSelectChevron {
-  transition: 0.15s all ease-in-out;
-  color: var(--text-muted);
-}
-.arkynMultiSelectChevron:not(.notAnimate).focused {
-  transform: rotate(180deg);
-}

package/src/components/MultiSelect/components/MultiSelectContainer/index.tsx

@@ -1,51 +0,0 @@
-import { ReactNode } from "react";
-import "./styles.css";
-
-type MultiSelectContainerProps = {
-  children: ReactNode;
-  handleContainerFocus: () => void;
-  prefixExists: boolean;
-  isError: boolean;
-  disabled: boolean;
-  readOnly: boolean;
-  isLoading: boolean;
-  isFocused: boolean;
-  className?: string;
-  id: string;
-  variant: "solid" | "outline" | "underline";
-  size: "md" | "lg";
-};
-
-function MultiSelectContainer(props: MultiSelectContainerProps) {
-  const {
-    children,
-    handleContainerFocus,
-    disabled,
-    isError,
-    isLoading,
-    isFocused,
-    className,
-    readOnly,
-    variant,
-    size,
-    id,
-    prefixExists,
-  } = props;
-
-  const hasPrefix = prefixExists ? "hasPrefix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  return (
-    <section
-      id={id}
-      className={`arkynMultiSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`}
-      onClick={handleContainerFocus}
-    >
-      {children}
-    </section>
-  );
-}
-
-export { MultiSelectContainer };

package/src/components/MultiSelect/components/MultiSelectContainer/styles.css

@@ -1,134 +0,0 @@
-/* BASE CSS */
-.arkynMultiSelectContainer {
-  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;
-}
-.arkynMultiSelectContainer:hover {
-  cursor: pointer;
-}
-.arkynMultiSelectContainer.opacity {
-  opacity: 0.5;
-}
-
-/* PREFIX */
-.arkynMultiSelectContainer .prefix {
-  color: var(--text-body);
-  background: var(--border);
-  font-weight: 400;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-}
-.arkynMultiSelectContainer .prefix {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: 5px 0 0 5px;
-  border-right: 1px solid var(--border);
-}
-
-/* LEFT ICON */
-.arkynMultiSelectContainer > svg {
-  color: var(--text-muted);
-}
-.arkynMultiSelectContainer.errored > svg {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).focused > svg {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-/* VARIANTS */
-.arkynMultiSelectContainer.solid {
-  border-color: var(--border);
-  background-color: rgba(var(--input-background), 1);
-}
-.arkynMultiSelectContainer.solid.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).solid.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynMultiSelectContainer.outline {
-  border-color: var(--border);
-}
-.arkynMultiSelectContainer.outline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).outline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynMultiSelectContainer.underline {
-  border-radius: 0;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  outline: none;
-  border-color: var(--border);
-}
-.arkynMultiSelectContainer.underline .prefix {
-  display: none;
-}
-.arkynMultiSelectContainer.underline::before {
-  content: " ";
-  position: absolute;
-  height: 1px;
-  left: 0;
-  right: 0;
-  bottom: -2px;
-  background: transparent;
-}
-.arkynMultiSelectContainer.underline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer.underline.errored::before {
-  background: rgba(var(--spotlight-danger), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).underline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynMultiSelectContainer:not(.opacity).underline.focused::before {
-  background: rgba(var(--spotlight-primary), 1);
-}
-
-/* SIZE */
-.arkynMultiSelectContainer.md {
-  min-height: 40px;
-  /* max-height: 40px; */
-}
-.arkynMultiSelectContainer.md.hasPrefix {
-  padding-left: 60px;
-}
-.arkynMultiSelectContainer.md .prefix {
-  height: 40px;
-  width: 44px;
-  font-size: 14px;
-}
-.arkynMultiSelectContainer.lg {
-  min-height: 44px;
-  /* max-height: 44px; */
-}
-.arkynMultiSelectContainer.lg .prefix {
-  height: 44px;
-  width: 48px;
-  font-size: 16px;
-}
-.arkynMultiSelectContainer.lg.hasPrefix {
-  padding-left: 64px;
-}

package/src/components/MultiSelect/components/MultiSelectContent/index.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-import "./styles.css";
-
-type MultiSelectContentProps = {
-  children: ReactNode;
-  size: "md" | "lg";
-};
-
-function MultiSelectContent(props: MultiSelectContentProps) {
-  const { children, size } = props;
-  const className = `arkynMultiSelectContent ${size}`;
-  return <div className={className}>{children}</div>;
-}
-
-export { MultiSelectContent };

package/src/components/MultiSelect/components/MultiSelectContent/styles.css

@@ -1,24 +0,0 @@
-.arkynMultiSelectContent {
-  display: flex;
-  align-items: start;
-  gap: 4px;
-  flex-wrap: wrap;
-
-  flex: 1;
-}
-
-.arkynMultiSelectContent > p {
-  font-weight: 400;
-  color: var(--text-muted);
-  user-select: none;
-}
-
-.arkynMultiSelectContent.md > p {
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.arkynMultiSelectContent.lg > p {
-  font-size: 16px;
-  line-height: 16px;
-}

package/src/components/MultiSelect/components/MultiSelectMark/index.tsx

@@ -1,30 +0,0 @@
-import { X } from "lucide-react";
-import "./styles.css";
-
-type MultiSelectMarkProps = {
-  label: string;
-  value: string;
-  handleChangeValue: (value: string) => void;
-};
-
-function MultiSelectMark(props: MultiSelectMarkProps) {
-  const { label, value, handleChangeValue } = props;
-
-  return (
-    <div className="arkynMultiSelectMark">
-      {label}
-
-      <button
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          handleChangeValue(value);
-        }}
-      >
-        <X />
-      </button>
-    </div>
-  );
-}
-
-export { MultiSelectMark };

package/src/components/MultiSelect/components/MultiSelectMark/styles.css

@@ -1,40 +0,0 @@
-.arkynMultiSelectMark {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 4px;
-  background: var(--card-foreground-terceary);
-
-  padding: 2px 6px;
-
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 19.07px;
-  text-align: left;
-  z-index: 6;
-  user-select: none;
-}
-
-.arkynMultiSelectMark button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: none;
-  background: inherit;
-
-  width: 15px;
-  height: 15px;
-}
-
-.arkynMultiSelectMark button:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}
-
-.arkynMultiSelectMark button svg {
-  min-width: 10px;
-  min-height: 10px;
-  color: var(--text-muted);
-}

package/src/components/MultiSelect/components/MultiSelectOption/index.tsx

@@ -1,25 +0,0 @@
-import { Check } from "lucide-react";
-import "./styles.css";
-
-type MultiSelectOptionProps = {
-  value: string;
-  label: string;
-  size: "md" | "lg";
-  optionHasSelected: (value: string) => boolean;
-  handleChangeValue: (value: string) => void;
-};
-
-function MultiSelectOption(props: MultiSelectOptionProps) {
-  const { label, optionHasSelected, handleChangeValue, value, size } = props;
-
-  const hasActive = optionHasSelected(value) ? "active" : "";
-  const className = `arkynMultiSelectOption ${size} ${hasActive}`;
-
-  return (
-    <div onClick={() => handleChangeValue(value)} className={className}>
-      {label} <Check />
-    </div>
-  );
-}
-
-export { MultiSelectOption };

package/src/components/MultiSelect/components/MultiSelectOption/styles.css

@@ -1,37 +0,0 @@
-.arkynMultiSelectOption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  font-weight: 400;
-  line-height: 21.79px;
-
-  color: var(--text-body);
-  user-select: none;
-}
-.arkynMultiSelectOption.md {
-  font-size: 14px;
-  padding: 8px 16px;
-}
-.arkynMultiSelectOption.lg {
-  font-size: 16px;
-  padding: 8px 16px;
-}
-.arkynMultiSelectOption svg {
-  display: none;
-  height: 20px;
-  width: 20px;
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynMultiSelectOption:hover {
-  cursor: pointer;
-  background-color: var(--card-foreground-primary);
-}
-.arkynMultiSelectOption.active {
-  font-weight: 600;
-  color: var(--text-heading);
-  background-color: var(--card-foreground-primary);
-}
-.arkynMultiSelectOption.active svg {
-  display: unset;
-}

package/src/components/MultiSelect/components/MultiSelectOptionsContainer/index.tsx

@@ -1,42 +0,0 @@
-import { Search } from "lucide-react";
-import { ChangeEvent, ReactNode } from "react";
-
-import { Input } from "../../../Input";
-
-import "./styles.css";
-
-type MultiSelectOptionsContainerProps = {
-  isFocused: boolean;
-  isSearchable: boolean;
-  children: ReactNode;
-  onSearch: (value: string) => void;
-};
-
-function MultiSelectOptionsContainer(props: MultiSelectOptionsContainerProps) {
-  const { children, isFocused, isSearchable, onSearch } = props;
-
-  function handleSearch(e: ChangeEvent<HTMLInputElement>) {
-    if (!isSearchable) return;
-    onSearch(e.target.value);
-  }
-
-  if (!isFocused) return <></>;
-
-  return (
-    <div className="arkynMultiSelectOptionsContainer">
-      {isSearchable && (
-        <Input
-          type="search"
-          name="search-select"
-          variant="underline"
-          leftIcon={Search}
-          onChange={handleSearch}
-        />
-      )}
-
-      {children}
-    </div>
-  );
-}
-
-export { MultiSelectOptionsContainer };

package/src/components/MultiSelect/components/MultiSelectOptionsContainer/styles.css

@@ -1,36 +0,0 @@
-/* BASE CSS */
-.arkynMultiSelectOptionsContainer {
-  position: absolute;
-  z-index: 7;
-
-  top: calc(100% + 5px);
-  left: -2px;
-  right: -2px;
-
-  border-radius: 6px;
-  list-style: none;
-
-  display: flex;
-  flex-direction: column;
-
-  flex: 1;
-  overflow: auto;
-  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);
-}
-
-/* NOT FOUND TEXT */
-.arkynMultiSelectOptionsContainer > p {
-  font-weight: 400;
-  font-size: 14px;
-  padding: 16px;
-  text-align: center;
-  line-height: 21.79px;
-
-  color: var(--text-body);
-}

package/src/components/MultiSelect/components/MultiSelectOverlay/index.tsx

@@ -1,14 +0,0 @@
-import "./styles.css";
-
-type MultiSelectOverlayProps = {
-  isFocused: boolean;
-  handleBlur: () => void;
-};
-
-function MultiSelectOverlay(props: MultiSelectOverlayProps) {
-  const { isFocused, handleBlur } = props;
-  if (!isFocused) return <></>;
-  return <aside className="arkynMultiSelectOverlay" onClick={handleBlur} />;
-}
-
-export { MultiSelectOverlay };

package/src/components/MultiSelect/components/MultiSelectOverlay/styles.css

@@ -1,8 +0,0 @@
-.arkynMultiSelectOverlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 5;
-}

package/src/components/MultiSelect/components/MultiSelectSpinner/index.tsx

@@ -1,22 +0,0 @@
-import { Loader2 } from "lucide-react";
-import "./styles.css";
-
-type MultiSelectSpinnerProps = {
-  iconSize: number;
-  isLoading: boolean;
-};
-
-function MultiSelectSpinner(props: MultiSelectSpinnerProps) {
-  const { iconSize, isLoading } = props;
-
-  if (!isLoading) return <></>;
-  return (
-    <Loader2
-      className="arkynMultiSelectSpinner"
-      size={iconSize}
-      strokeWidth={2.5}
-    />
-  );
-}
-
-export { MultiSelectSpinner };

package/src/components/MultiSelect/components/MultiSelectSpinner/styles.css

@@ -1,12 +0,0 @@
-.arkynMultiSelectSpinner {
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}