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

package/src/components/modal/modalFooter/index.tsx

@@ -0,0 +1,80 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+
+type ModalFooterProps = HTMLAttributes<HTMLElement> & {
+  alignment?: "left" | "center" | "right" | "between" | "around";
+};
+
+/**
+ * ModalFooter component - footer section for modals with flexible alignment options
+ *
+ * @param props - ModalFooter component properties
+ * @param props.alignment - Content alignment within the footer. Default: "right"
+ *
+ * **...Other valid HTML properties for footer element**
+ *
+ * @returns ModalFooter JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic footer with right alignment (default)
+ * <ModalFooter>
+ *   <button>Cancel</button>
+ *   <button>Save</button>
+ * </ModalFooter>
+ *
+ * // Left aligned footer
+ * <ModalFooter alignment="left">
+ *   <button>Delete</button>
+ * </ModalFooter>
+ *
+ * // Center aligned footer
+ * <ModalFooter alignment="center">
+ *   <button>OK</button>
+ * </ModalFooter>
+ *
+ * // Space between buttons
+ * <ModalFooter alignment="between">
+ *   <button>Cancel</button>
+ *   <button>Confirm</button>
+ * </ModalFooter>
+ *
+ * // Space around buttons
+ * <ModalFooter alignment="around">
+ *   <button>Previous</button>
+ *   <button>Next</button>
+ *   <button>Finish</button>
+ * </ModalFooter>
+ *
+ * // Complete modal example
+ * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
+ *   <div className="modal-content">
+ *     <header>
+ *       <h2>Confirm Action</h2>
+ *     </header>
+ *
+ *     <main>
+ *       <p>Are you sure you want to delete this item?</p>
+ *     </main>
+ *
+ *     <ModalFooter alignment="right">
+ *       <button onClick={() => setIsOpen(false)}>
+ *         Cancel
+ *       </button>
+ *       <button onClick={handleDelete}>
+ *         Delete
+ *       </button>
+ *     </ModalFooter>
+ *   </div>
+ * </ModalContainer>
+ * ```
+ */
+
+function ModalFooter(args: ModalFooterProps) {
+  const { alignment = "right", className: baseClassName, ...rest } = args;
+  const className = `arkynModalFooter ${alignment} ${baseClassName}`;
+
+  return <footer className={className.trim()} {...rest} />;
+}
+
+export { ModalFooter };

package/src/components/modal/modalHeader/index.tsx

@@ -0,0 +1,99 @@
+import { X } from "lucide-react";
+import { HTMLAttributes } from "react";
+
+import { useModal } from "../modalContext";
+import "./styles.css";
+
+type ModalHeaderProps = HTMLAttributes<HTMLElement> & {
+  showCloseButton?: boolean;
+};
+
+/**
+ * ModalHeader component - header section for modals with optional close button
+ *
+ * @param props - ModalHeader component properties
+ * @param props.showCloseButton - Shows close button in header. Default: true
+ *
+ * **...Other valid HTML properties for header element**
+ *
+ * @returns ModalHeader JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic modal header with close button
+ * <ModalHeader>
+ *   <h2>Modal Title</h2>
+ * </ModalHeader>
+ *
+ * // Header without close button
+ * <ModalHeader showCloseButton={false}>
+ *   <h2>Important Notice</h2>
+ * </ModalHeader>
+ *
+ * // Header with subtitle
+ * <ModalHeader>
+ *   <div>
+ *     <h2>Settings</h2>
+ *     <p>Manage your preferences</p>
+ *   </div>
+ * </ModalHeader>
+ *
+ * // Complete modal example
+ * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
+ *   <div className="modal-content">
+ *     <ModalHeader>
+ *       <h2>Confirm Delete</h2>
+ *       <p>This action cannot be undone</p>
+ *     </ModalHeader>
+ *
+ *     <main>
+ *       <p>Are you sure you want to delete this item?</p>
+ *     </main>
+ *
+ *     <ModalFooter>
+ *       <button onClick={() => setIsOpen(false)}>Cancel</button>
+ *       <button onClick={handleDelete}>Delete</button>
+ *     </ModalFooter>
+ *   </div>
+ * </ModalContainer>
+ *
+ * // Custom styled header
+ * <ModalHeader className="custom-header">
+ *   <div className="header-content">
+ *     <img src="/icon.png" alt="Icon" />
+ *     <h1>Welcome</h1>
+ *   </div>
+ * </ModalHeader>
+ * ```
+ */
+
+function ModalHeader(args: ModalHeaderProps) {
+  const {
+    showCloseButton = true,
+    className: baseClassName,
+    children,
+    ...rest
+  } = args;
+
+  const { makeInvisible } = useModal();
+  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/multiSelect/index.tsx

@@ -0,0 +1,319 @@
+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/multiSelectContainer/styles.css

@@ -0,0 +1,134 @@
+/* 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/multiSelectMark/index.tsx

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,44 @@
+.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);
+}