@arkyn/components 3.0.1-beta.20 → 3.0.1-beta.22

package/src/components/multiSelect/index.tsx

@@ -1,319 +0,0 @@
-import { LucideIcon } from "lucide-react";
-import { FocusEvent, useId, useRef, useState } from "react";
-
-import { useForm } from "../../hooks/useForm";
-import { IconRenderer } from "../../services/iconRenderer";
-
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-import { MultiSelectChevron } from "./multiSelectChevron";
-import { MultiSelectContainer } from "./multiSelectContainer";
-import { MultiSelectContent } from "./multiSelectContent";
-import { MultiSelectMark } from "./multiSelectMark";
-import { MultiSelectOption } from "./multiSelectOption";
-import { MultiSelectOptionsContainer } from "./multiSelectOptionsContainer";
-import { MultiSelectOverlay } from "./multiSelectOverlay";
-import { MultiSelectSpinner } from "./multiSelectSpinner";
-
-type MultiSelectProps = {
-  name: string;
-  options: { label: string; value: string }[];
-
-  id?: string;
-  value?: string[];
-  defaultValue?: string[];
-  showAsterisk?: boolean;
-  label?: string;
-  errorMessage?: string;
-
-  placeholder?: string;
-  notFoundText?: string;
-  className?: string;
-
-  disabled?: boolean;
-  readOnly?: boolean;
-
-  isLoading?: boolean;
-  isSearchable?: boolean;
-
-  closeOnSelect?: boolean;
-
-  onSearch?: (value: string) => void;
-  onChange?: (value: string[]) => void;
-
-  onFocus?: () => void;
-  onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
-
-  size?: "md" | "lg";
-  variant?: "solid" | "outline" | "underline";
-
-  prefix?: string | LucideIcon;
-  leftIcon?: LucideIcon;
-
-  optionMaxHeight?: number;
-};
-
-/**
- * MultiSelect component - used for selecting multiple options from a dropdown list with support for search, labels, and validation
- *
- * @param props - MultiSelect component properties
- * @param props.name - Required field name for form handling
- * @param props.options - Array of options with label and value properties
- * @param props.id - Optional unique identifier for the component
- * @param props.value - Controlled value array of selected option values
- * @param props.defaultValue - Default selected values. Default: []
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.label - Optional label text to display above the multiselect
- * @param props.errorMessage - Error message to display below the multiselect
- * @param props.placeholder - Placeholder text when no options are selected. Default: "Selecione..."
- * @param props.notFoundText - Text to display when no options match search. Default: "Sem opções disponíveis"
- * @param props.className - Additional CSS classes to apply
- * @param props.disabled - Whether the multiselect is disabled. Default: false
- * @param props.readOnly - Whether the multiselect is read-only. Default: false
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.isSearchable - Whether the multiselect supports search functionality. Default: false
- * @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: false
- * @param props.onSearch - Callback function called when search value changes
- * @param props.onChange - Callback function called when selected values change
- * @param props.onFocus - Callback function called when multiselect gains focus
- * @param props.onBlur - Callback function called when multiselect loses focus
- * @param props.size - MultiSelect size. Default: "md"
- * @param props.variant - Visual variant of the multiselect. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the multiselect
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.optionMaxHeight - Maximum height for the options dropdown
- *
- * @returns MultiSelect JSX element wrapped in FieldWrapper with optional label and error
- *
- * @example
- * ```tsx
- * // Basic multiselect
- * <MultiSelect
- *   name="categories"
- *   options={[
- *     { label: "Technology", value: "tech" },
- *     { label: "Design", value: "design" },
- *     { label: "Marketing", value: "marketing" }
- *   ]}
- * />
- *
- * // MultiSelect with label and validation
- * <MultiSelect
- *   name="skills"
- *   label="Select Skills"
- *   showAsterisk
- *   errorMessage="Please select at least one skill"
- *   options={skillOptions}
- *   placeholder="Choose your skills..."
- * />
- *
- * // Searchable multiselect with custom styling
- * <MultiSelect
- *   name="countries"
- *   label="Countries"
- *   isSearchable
- *   variant="outline"
- *   size="lg"
- *   leftIcon={GlobeIcon}
- *   options={countryOptions}
- *   notFoundText="No countries found"
- * />
- *
- * // Controlled multiselect with callbacks
- * <MultiSelect
- *   name="tags"
- *   label="Tags"
- *   value={selectedTags}
- *   onChange={setSelectedTags}
- *   onSearch={handleSearch}
- *   closeOnSelect={false}
- *   isLoading={isLoadingTags}
- *   options={tagOptions}
- * />
- *
- * // MultiSelect with prefix and custom behavior
- * <MultiSelect
- *   name="departments"
- *   label="Departments"
- *   prefix="Dept:"
- *   closeOnSelect={true}
- *   variant="underline"
- *   defaultValue={["hr", "it"]}
- *   options={departmentOptions}
- * />
- * ```
- */
-
-function MultiSelect(props: MultiSelectProps) {
-  const {
-    name,
-    options,
-    className = "",
-    placeholder = "Selecione...",
-    closeOnSelect = false,
-    defaultValue = [],
-    errorMessage: baseErrorMessage,
-    isLoading = false,
-    readOnly = false,
-    isSearchable = false,
-    id,
-    label,
-    optionMaxHeight,
-    showAsterisk,
-    leftIcon: LeftIcon,
-    onSearch,
-    onChange,
-    onBlur,
-    notFoundText = "Sem opções disponíveis",
-    onFocus,
-    disabled: baseDisabled = false,
-    prefix,
-    size = "md",
-    value,
-    variant = "solid",
-  } = props;
-
-  const { fieldErrors } = useForm();
-
-  const multiSelectRef = useRef<HTMLInputElement>(null);
-  const multiSelectId = id || useId();
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-  const disabled = baseDisabled || isLoading || readOnly;
-
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  const [search, setSearch] = useState("");
-  const [isFocused, setIsFocused] = useState(false);
-  const [selectedOptions, setSelectedOptions] = useState(defaultValue);
-
-  const forceSelectedOptions = value || selectedOptions;
-
-  function optionHasSelected(value: string) {
-    return forceSelectedOptions.includes(value);
-  }
-
-  function getOptionLabel(value: string) {
-    const option = options.find((option) => option.value === value);
-    return option?.label || "";
-  }
-
-  function handleContainerFocus() {
-    if (disabled || !multiSelectRef?.current || isFocused) return;
-    setIsFocused(true);
-    multiSelectRef.current.focus();
-    onFocus && onFocus();
-  }
-
-  function handleBlur() {
-    setIsFocused(false);
-    if (onBlur && multiSelectRef.current) multiSelectRef.current.blur();
-  }
-
-  function handleSearch(value: string) {
-    setSearch(value);
-    if (onSearch) onSearch(value);
-  }
-
-  function handleChangeValue(value: string) {
-    if (optionHasSelected(value)) {
-      setSelectedOptions(selectedOptions.filter((v) => v !== value));
-      if (onChange) onChange(selectedOptions.filter((v) => v !== value));
-    } else {
-      setSelectedOptions([...selectedOptions, value]);
-      if (onChange) onChange([...selectedOptions, value]);
-    }
-
-    if (closeOnSelect) handleBlur();
-  }
-
-  const mappedOptions = options.filter((option) => {
-    if (props.onSearch) return true;
-    if (!props.isSearchable) return true;
-    if (option.label.toLowerCase().includes(search.toLowerCase())) return true;
-    return false;
-  });
-
-  return (
-    <FieldWrapper>
-      {label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}
-
-      <MultiSelectContainer
-        handleContainerFocus={handleContainerFocus}
-        disabled={disabled}
-        isError={isError}
-        isFocused={isFocused}
-        isLoading={isLoading}
-        readOnly={readOnly}
-        size={size}
-        variant={variant}
-        className={className}
-        prefixExists={!!prefix}
-        id={multiSelectId}
-      >
-        <input
-          ref={multiSelectRef}
-          name={name}
-          value={JSON.stringify(forceSelectedOptions)}
-          type="hidden"
-        />
-
-        <IconRenderer iconSize={iconSize} icon={prefix} className="prefix" />
-
-        {LeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
-
-        <MultiSelectContent size={size}>
-          {forceSelectedOptions.map((value) => (
-            <MultiSelectMark
-              key={value}
-              label={getOptionLabel(value)}
-              value={value}
-              handleChangeValue={handleChangeValue}
-              disabled={disabled}
-            />
-          ))}
-
-          {forceSelectedOptions.length <= 0 && <p>{placeholder}</p>}
-        </MultiSelectContent>
-
-        <MultiSelectOptionsContainer
-          isFocused={isFocused}
-          isSearchable={isSearchable}
-          search={search}
-          onSearch={handleSearch}
-        >
-          {mappedOptions.map(({ label, value }) => (
-            <MultiSelectOption
-              key={value}
-              label={label}
-              value={value}
-              size={size}
-              handleChangeValue={handleChangeValue}
-              optionHasSelected={optionHasSelected}
-            />
-          ))}
-
-          {mappedOptions.length <= 0 && <p>{notFoundText}</p>}
-        </MultiSelectOptionsContainer>
-
-        <MultiSelectChevron
-          disabled={disabled}
-          isFocused={isFocused}
-          readOnly={readOnly}
-          iconSize={iconSize}
-          isLoading={isLoading}
-        />
-
-        <MultiSelectSpinner iconSize={iconSize} isLoading={isLoading} />
-        <MultiSelectOverlay handleBlur={handleBlur} isFocused={isFocused} />
-      </MultiSelectContainer>
-
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { MultiSelect };

package/src/components/multiSelect/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/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/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/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(--spotlight-secondary), 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/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/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/multiSelectMark/index.tsx

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

package/src/components/multiSelect/multiSelectMark/styles.css

@@ -1,44 +0,0 @@
-.arkynMultiSelectMark {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 4px;
-  background: var(--card-foreground-third);
-
-  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:disabled {
-  cursor: not-allowed;
-}
-
-.arkynMultiSelectMark button:hover:not(:disabled) {
-  cursor: pointer;
-  filter: brightness(0.9);
-}
-
-.arkynMultiSelectMark button svg {
-  min-width: 10px;
-  min-height: 10px;
-  color: var(--text-muted);
-}

package/src/components/multiSelect/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 };