@arkyn/components 3.0.1-beta.99 → 3.0.2

package/dist/components/input/index.js

@@ -1,114 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import { 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 "./style.css";
-/**
- * Input component - used for text input fields with support for labels, validation, icons, and loading states
- *
- * @param props - Input component properties
- * @param props.name - Required field name for form handling
- * @param props.label - Optional label text to display above the input
- * @param props.errorMessage - Error message to display below the input
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Input size. Default: "md"
- * @param props.variant - Visual variant of the input. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the input
- * @param props.suffix - Text or icon to display at the end of the input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.rightIcon - Optional icon to display on the right side
- *
- * **...Other valid HTML properties for input element**
- *
- * @returns Input JSX element wrapped in FieldGroup with optional label and error
- *
- * @example
- * ```tsx
- * // Basic input
- * <Input name="username" placeholder="Enter username" />
- *
- * // Input with label and validation
- * <Input
- *   name="email"
- *   label="Email Address"
- *   type="email"
- *   showAsterisk
- *   errorMessage="Please enter a valid email"
- * />
- *
- * // Input with icons and loading state
- * <Input
- *   name="search"
- *   label="Search"
- *   leftIcon={SearchIcon}
- *   rightIcon={FilterIcon}
- *   isLoading
- * />
- *
- * // Input with prefix/suffix
- * <Input
- *   name="website"
- *   label="Website"
- *   prefix="https://"
- *   suffix=".com"
- *   variant="outline"
- * />
- *
- * // Large input with underline variant
- * <Input
- *   name="title"
- *   label="Article Title"
- *   size="lg"
- *   variant="underline"
- *   placeholder="Enter article title"
- * />
- * ```
- */
-function Input(props) {
-    const { name, disabled, title, style, variant = "solid", label, className: wrapperClassName = "", prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, showAsterisk, rightIcon, type = "text", size = "md", id, value, placeholder, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const [isFocused, setIsFocused] = useState(false);
-    const inputRef = useRef(null);
-    const inputId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const isDisabled = disabled || isLoading;
-    const iconSizes = { md: 20, lg: 20 };
-    const iconSize = iconSizes[size];
-    const loadingPosition = rightIcon ? "right" : "left";
-    const showLeftSpinner = loadingPosition === "left" && isLoading;
-    const showRightSpinner = loadingPosition === "right" && isLoading;
-    function handleSectionClick() {
-        if (isDisabled || !inputRef?.current)
-            return;
-        setIsFocused(true);
-        inputRef.current.focus();
-    }
-    function handleFocus(e) {
-        setIsFocused(true);
-        if (onFocus)
-            onFocus(e);
-    }
-    function handleBlur(e) {
-        setIsFocused(false);
-        if (onBlur)
-            onBlur(e);
-    }
-    if (type === "hidden") {
-        return (_jsx("input", { style: { display: "none" }, readOnly: true, type: "text", ref: inputRef, ...rest }));
-    }
-    const hasPrefix = !!prefix ? "hasPrefix" : "";
-    const hasSuffix = !!suffix ? "hasSuffix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = isDisabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    const disabledClass = disabled ? "disabled" : "";
-    const className = `arkynInput ${hasPrefix} ${disabledClass} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, type: type, id: inputId, name: name, placeholder: isDisabled ? value || placeholder : placeholder, value: isDisabled ? undefined : value, ...rest }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { Input };

package/dist/components/mapView/index.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { GoogleMap as Map, Marker } from "@react-google-maps/api";
-import { MapPinned } from "lucide-react";
-import "./styles.css";
-function MapView(props) {
-    const { coordinates, zoom = 18, draggable = false, className, ...rest } = props;
-    if (!coordinates) {
-        return (_jsx("div", { className: "arkynMapViewPinnedEmpty " + className, ...rest, children: _jsx(MapPinned, {}) }));
-    }
-    return (_jsx("div", { className: "arkynMapViewPinned " + className, ...rest, children: _jsx(Map, { zoom: zoom, center: coordinates, mapContainerStyle: {
-                borderRadius: "8px",
-                width: "100%",
-                height: "100%",
-            }, children: _jsx(Marker, { draggable: draggable, position: coordinates }) }) }));
-}
-export { MapView };

package/dist/components/maskedInput/index.js

@@ -1,131 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputMask } from "@react-input/mask";
-import { Loader2 } from "lucide-react";
-import { forwardRef, 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 "./style.css";
-const BaseInput = forwardRef((props, ref) => {
-    return _jsx("input", { ref: ref, ...props });
-});
-/**
- * MaskedInput component - used for text input fields with input masking support, labels, validation, icons, and loading states
- *
- * @param props - MaskedInput component properties
- * @param props.name - Required field name for form handling
- * @param props.mask - Input mask pattern (e.g., "___.___.___-__" for CPF)
- * @param props.replacement - Character or replacement configuration for mask positions
- * @param props.separate - Whether to separate mask characters from input value. Default: undefined
- * @param props.showMask - Whether to show the mask placeholder. Default: undefined
- * @param props.label - Optional label text to display above the input
- * @param props.errorMessage - Error message to display below the input
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Input size. Default: "md"
- * @param props.variant - Visual variant of the input. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the input
- * @param props.suffix - Text or icon to display at the end of the input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.rightIcon - Optional icon to display on the right side
- *
- * **...Other valid HTML properties for input element (except 'type' which is controlled by the mask)**
- *
- * @returns MaskedInput JSX element wrapped in FieldGroup with optional label and error
- *
- * @example
- * ```tsx
- * // Basic masked input for phone number
- * <MaskedInput
- *   name="phone"
- *   mask="(__) _____-____"
- *   replacement={{ _: /\d/ }}
- *   placeholder="(00) 00000-0000"
- * />
- *
- * // CPF input with label and validation
- * <MaskedInput
- *   name="cpf"
- *   label="CPF"
- *   mask="___.___.___-__"
- *   replacement="_"
- *   showAsterisk
- *   errorMessage="Please enter a valid CPF"
- *   showMask
- * />
- *
- * // Credit card input with icons and loading state
- * <MaskedInput
- *   name="creditCard"
- *   label="Credit Card"
- *   mask="____ ____ ____ ____"
- *   replacement={{ _: /\d/ }}
- *   leftIcon={CreditCardIcon}
- *   rightIcon={ShieldIcon}
- *   isLoading
- * />
- *
- * // Date input with prefix/suffix
- * <MaskedInput
- *   name="birthDate"
- *   label="Birth Date"
- *   mask="__/__/____"
- *   replacement="_"
- *   prefix="📅"
- *   variant="outline"
- *   separate
- * />
- *
- * // Large masked input with underline variant
- * <MaskedInput
- *   name="zipCode"
- *   label="ZIP Code"
- *   mask="_____-___"
- *   replacement={{ _: /\d/ }}
- *   size="lg"
- *   variant="underline"
- *   placeholder="00000-000"
- * />
- * ```
- */
-function MaskedInput(props) {
-    const { name, disabled, title, style, variant = "solid", separate, mask, showMask, replacement, label, className: wrapperClassName = "", prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, defaultValue, showAsterisk, rightIcon, size = "md", id, value, placeholder, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const [isFocused, setIsFocused] = useState(false);
-    const inputRef = useRef(null);
-    const inputId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const isDisabled = disabled || isLoading;
-    const iconSizes = { md: 20, lg: 20 };
-    const iconSize = iconSizes[size];
-    const loadingPosition = rightIcon ? "right" : "left";
-    const showLeftSpinner = loadingPosition === "left" && isLoading;
-    const showRightSpinner = loadingPosition === "right" && isLoading;
-    function handleSectionClick() {
-        if (isDisabled || !inputRef?.current)
-            return;
-        setIsFocused(true);
-        inputRef.current.focus();
-    }
-    function handleFocus(e) {
-        setIsFocused(true);
-        if (onFocus)
-            onFocus(e);
-    }
-    function handleBlur(e) {
-        setIsFocused(false);
-        if (onBlur)
-            onBlur(e);
-    }
-    const hasPrefix = !!prefix ? "hasPrefix" : "";
-    const hasSuffix = !!suffix ? "hasSuffix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = isDisabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynMaskedInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx(InputMask, { component: BaseInput, mask: mask, replacement: replacement, separate: separate, showMask: showMask, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, readOnly: readOnly, id: inputId, name: name, defaultValue: defaultValue || undefined, placeholder: isDisabled ? value || placeholder : placeholder, value: isDisabled ? undefined : value, ...rest }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { MaskedInput };

package/dist/components/modal/modalContainer/index.js

@@ -1,82 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "framer-motion";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { ModalProvider } from "../modalContext";
-import "./styles.css";
-/**
- * ModalContainer component - animated overlay modal for dialogs and content
- *
- * @param props - ModalContainer component properties
- * @param props.isVisible - Controls modal visibility state
- * @param props.makeInvisible - Callback function to hide the modal
- *
- * **...Other valid HTML properties for aside element**
- *
- * @returns ModalContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic modal
- * const [isOpen, setIsOpen] = useState(false);
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- * >
- *   <p>Modal content</p>
- * </ModalContainer>
- *
- * // Modal with custom styling
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- *   className="custom-modal"
- * >
- *   <div className="modal-content">
- *     <h2>Confirmation</h2>
- *     <p>Are you sure you want to proceed?</p>
- *   </div>
- * </ModalContainer>
- *
- * // Complete modal example
- * function ModalExample() {
- *   const [isModalOpen, setIsModalOpen] = useState(false);
- *
- *   return (
- *     <>
- *       <button onClick={() => setIsModalOpen(true)}>
- *         Open Modal
- *       </button>
- *
- *       <ModalContainer
- *         isVisible={isModalOpen}
- *         makeInvisible={() => setIsModalOpen(false)}
- *       >
- *         <div className="modal-dialog">
- *           <header>
- *             <h2>Modal Title</h2>
- *           </header>
- *
- *           <main>
- *             <p>This is the modal content.</p>
- *           </main>
- *
- *           <footer>
- *             <button onClick={() => setIsModalOpen(false)}>
- *               Close
- *             </button>
- *           </footer>
- *         </div>
- *       </ModalContainer>
- *     </>
- *   );
- * }
- * ```
- */
-function ModalContainer(args) {
-    const { isVisible, makeInvisible, children, className: baseClassName = "", ...rest } = args;
-    useScrollLock(isVisible);
-    const visibleClass = isVisible ? "visibleTrue" : "visibleFalse";
-    const className = `arkynModalContainer ${visibleClass} ${baseClassName}`;
-    return (_jsx(ModalProvider, { makeInvisible: makeInvisible, children: _jsx(AnimatePresence, { children: isVisible && (_jsxs("aside", { className: className.trim(), ...rest, children: [_jsx(motion.div, { className: "arkynModalContainerOverlay", transition: { duration: 0.15, ease: "easeOut" }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: makeInvisible }), _jsx(motion.div, { className: "arkynModalContainerContent", transition: { duration: 0.15, ease: "easeOut" }, initial: { opacity: 0, scale: 0.75 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0 }, children: children })] })) }) }));
-}
-export { ModalContainer };

package/dist/components/modal/modalContext.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const modalContext = createContext({});
-function ModalProvider(props) {
-    return (_jsx(modalContext.Provider, { value: { makeInvisible: props.makeInvisible }, children: props.children }));
-}
-function useModal() {
-    return useContext(modalContext);
-}
-export { ModalProvider, useModal };

package/dist/components/modal/modalFooter/index.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * 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) {
-    const { alignment = "right", className: baseClassName, ...rest } = args;
-    const className = `arkynModalFooter ${alignment} ${baseClassName}`;
-    return _jsx("footer", { className: className.trim(), ...rest });
-}
-export { ModalFooter };

package/dist/components/modal/modalHeader/index.js

@@ -1,69 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-import { useModal } from "../modalContext";
-import "./styles.css";
-/**
- * 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) {
-    const { showCloseButton = true, className: baseClassName, children, ...rest } = args;
-    const { makeInvisible } = useModal();
-    const className = `arkynModalHeader ${baseClassName}`;
-    return (_jsxs("header", { className: className.trim(), ...rest, children: [children, showCloseButton && (_jsx("button", { type: "button", onClick: makeInvisible, "aria-label": "Close modal button", className: "arkynModalHeaderCloseButton", children: _jsx(X, { size: 24 }) }))] }));
-}
-export { ModalHeader };

package/dist/components/multiSelect/index.js

@@ -1,169 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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";
-/**
- * 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) {
-    const { name, options, className: wrapperClassName = "", 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(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) {
-        return forceSelectedOptions.includes(value);
-    }
-    function getOptionLabel(value) {
-        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) {
-        setSearch(value);
-        if (onSearch)
-            onSearch(value);
-    }
-    function handleChangeValue(value) {
-        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 (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(MultiSelectContainer, { handleContainerFocus: handleContainerFocus, disabled: disabled, isError: isError, isFocused: isFocused, isLoading: isLoading, readOnly: readOnly, size: size, variant: variant, prefixExists: !!prefix, id: multiSelectId, children: [_jsx("input", { ref: multiSelectRef, name: name, value: JSON.stringify(forceSelectedOptions), type: "hidden" }), _jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsxs(MultiSelectContent, { size: size, children: [forceSelectedOptions.map((value) => (_jsx(MultiSelectMark, { label: getOptionLabel(value), value: value, handleChangeValue: handleChangeValue, disabled: disabled }, value))), forceSelectedOptions.length <= 0 && _jsx("p", { children: placeholder })] }), _jsxs(MultiSelectOptionsContainer, { isFocused: isFocused, isSearchable: isSearchable, search: search, onSearch: handleSearch, children: [mappedOptions.map(({ label, value }) => (_jsx(MultiSelectOption, { label: label, value: value, size: size, handleChangeValue: handleChangeValue, optionHasSelected: optionHasSelected }, value))), mappedOptions.length <= 0 && _jsx("p", { children: notFoundText })] }), _jsx(MultiSelectChevron, { disabled: disabled, isFocused: isFocused, readOnly: readOnly, iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectSpinner, { iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectOverlay, { handleBlur: handleBlur, isFocused: isFocused })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { MultiSelect };