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

package/dist/src/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/src/components/multiSelect/index.d.ts

@@ -1,125 +0,0 @@
-import { LucideIcon } from "lucide-react";
-import { FocusEvent } from "react";
-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}
- * />
- * ```
- */
-declare function MultiSelect(props: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelect };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAA2B,MAAM,OAAO,CAAC;AAiB5D,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAE5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAErC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAEjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,QAAQ,CAAC,EAAE,UAAU,CAAC;IAEtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAyK3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/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 = "", 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, { 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, className: className, 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 };

package/dist/src/components/multiSelect/multiSelectChevron/index.d.ts

@@ -1,11 +0,0 @@
-import "./styles.css";
-type MultiSelectChevronProps = {
-    isLoading: boolean;
-    iconSize: number;
-    disabled: boolean;
-    readOnly: boolean;
-    isFocused: boolean;
-};
-declare function MultiSelectChevron(props: MultiSelectChevronProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelectChevron };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/multiSelectChevron/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectChevron/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAYzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectChevron/index.js

@@ -1,13 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import "./styles.css";
-function MultiSelectChevron(props) {
-    const { iconSize, isLoading, disabled, readOnly, isFocused } = props;
-    const notAnimate = disabled || readOnly ? "notAnimate" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynMultiSelectChevron ${notAnimate} ${focused}`;
-    if (isLoading)
-        return _jsx(_Fragment, {});
-    return (_jsx(ChevronDown, { className: className, size: iconSize, strokeWidth: 2.5 }));
-}
-export { MultiSelectChevron };

package/dist/src/components/multiSelect/multiSelectContainer/index.d.ts

@@ -1,19 +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";
-};
-declare function MultiSelectContainer(props: MultiSelectContainerProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelectContainer };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/multiSelectContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC3C,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CA8B7D;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectContainer/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectContainer(props) {
-    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 (_jsx("section", { id: id, className: `arkynMultiSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`, onClick: handleContainerFocus, children: children }));
-}
-export { MultiSelectContainer };

package/dist/src/components/multiSelect/multiSelectContent/index.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-import "./styles.css";
-type MultiSelectContentProps = {
-    children: ReactNode;
-    size: "md" | "lg";
-};
-declare function MultiSelectContent(props: MultiSelectContentProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelectContent };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/multiSelectContent/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAIzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectContent/index.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectContent(props) {
-    const { children, size } = props;
-    const className = `arkynMultiSelectContent ${size}`;
-    return _jsx("div", { className: className, children: children });
-}
-export { MultiSelectContent };

package/dist/src/components/multiSelect/multiSelectMark/index.d.ts

@@ -1,10 +0,0 @@
-import "./styles.css";
-type MultiSelectMarkProps = {
-    label: string;
-    disabled: boolean;
-    value: string;
-    handleChangeValue: (value: string) => void;
-};
-declare function MultiSelectMark(props: MultiSelectMarkProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelectMark };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/multiSelectMark/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectMark/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAmBnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectMark/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-import "./styles.css";
-function MultiSelectMark(props) {
-    const { label, value, disabled, handleChangeValue } = props;
-    return (_jsxs("div", { className: "arkynMultiSelectMark", children: [label, _jsx("button", { disabled: disabled, type: "button", onClick: (e) => {
-                    e.stopPropagation();
-                    handleChangeValue(value);
-                }, children: _jsx(X, {}) })] }));
-}
-export { MultiSelectMark };

package/dist/src/components/multiSelect/multiSelectOption/index.d.ts

@@ -1,11 +0,0 @@
-import "./styles.css";
-type MultiSelectOptionProps = {
-    value: string;
-    label: string;
-    size: "md" | "lg";
-    optionHasSelected: (value: string) => boolean;
-    handleChangeValue: (value: string) => void;
-};
-declare function MultiSelectOption(props: MultiSelectOptionProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelectOption };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/multiSelectOption/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,iBAAS,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAWvD;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectOption/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-import "./styles.css";
-function MultiSelectOption(props) {
-    const { label, optionHasSelected, handleChangeValue, value, size } = props;
-    const hasActive = optionHasSelected(value) ? "active" : "";
-    const className = `arkynMultiSelectOption ${size} ${hasActive}`;
-    return (_jsxs("div", { onClick: () => handleChangeValue(value), className: className, children: [label, " ", _jsx(Check, {})] }));
-}
-export { MultiSelectOption };

package/dist/src/components/multiSelect/multiSelectOptionsContainer/index.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-import "./styles.css";
-type MultiSelectOptionsContainerProps = {
-    isFocused: boolean;
-    isSearchable: boolean;
-    children: ReactNode;
-    search: string;
-    onSearch: (value: string) => void;
-};
-declare function MultiSelectOptionsContainer(props: MultiSelectOptionsContainerProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelectOptionsContainer };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/multiSelectOptionsContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectOptionsContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,SAAS,EAA+B,MAAM,OAAO,CAAC;AAK5E,OAAO,cAAc,CAAC;AAEtB,KAAK,gCAAgC,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,2CA8D3E;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectOptionsContainer/index.js

@@ -1,44 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { Input } from "../../input";
-import "./styles.css";
-function MultiSelectOptionsContainer(props) {
-    const { children, isFocused, isSearchable, search, onSearch } = props;
-    const containerRef = useRef(null);
-    const [position, setPosition] = useState("bottom");
-    useScrollLock(isFocused);
-    useEffect(() => {
-        if (!isFocused)
-            return;
-        const checkContainerPosition = () => {
-            if (!containerRef.current)
-                return;
-            const parentElement = containerRef.current.parentElement;
-            if (!parentElement)
-                return;
-            const parentRect = parentElement.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const estimatedContainerHeight = 300;
-            const spaceBelow = viewportHeight - parentRect.bottom;
-            if (spaceBelow < estimatedContainerHeight &&
-                parentRect.top > estimatedContainerHeight) {
-                setPosition("top");
-            }
-            else {
-                setPosition("bottom");
-            }
-        };
-        checkContainerPosition();
-    }, [isFocused]);
-    function handleSearch(e) {
-        if (!isSearchable)
-            return;
-        onSearch(e.target.value);
-    }
-    if (!isFocused)
-        return _jsx(_Fragment, {});
-    return (_jsxs("div", { ref: containerRef, className: `arkynMultiSelectOptionsContainer ${position}`, children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, value: search, onChange: handleSearch })), children] }));
-}
-export { MultiSelectOptionsContainer };

package/dist/src/components/multiSelect/multiSelectOverlay/index.d.ts

@@ -1,8 +0,0 @@
-import "./styles.css";
-type MultiSelectOverlayProps = {
-    isFocused: boolean;
-    handleBlur: () => void;
-};
-declare function MultiSelectOverlay(props: MultiSelectOverlayProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelectOverlay };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/multiSelectOverlay/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAIzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectOverlay/index.js

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectOverlay(props) {
-    const { isFocused, handleBlur } = props;
-    if (!isFocused)
-        return _jsx(_Fragment, {});
-    return _jsx("aside", { className: "arkynMultiSelectOverlay", onClick: handleBlur });
-}
-export { MultiSelectOverlay };

package/dist/src/components/multiSelect/multiSelectSpinner/index.d.ts

@@ -1,8 +0,0 @@
-import "./styles.css";
-type MultiSelectSpinnerProps = {
-    iconSize: number;
-    isLoading: boolean;
-};
-declare function MultiSelectSpinner(props: MultiSelectSpinnerProps): import("react/jsx-runtime").JSX.Element;
-export { MultiSelectSpinner };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/multiSelect/multiSelectSpinner/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/multiSelect/multiSelectSpinner/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAWzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/src/components/multiSelect/multiSelectSpinner/index.js

@@ -1,10 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import "./styles.css";
-function MultiSelectSpinner(props) {
-    const { iconSize, isLoading } = props;
-    if (!isLoading)
-        return _jsx(_Fragment, {});
-    return (_jsx(Loader2, { className: "arkynMultiSelectSpinner", size: iconSize, strokeWidth: 2.5 }));
-}
-export { MultiSelectSpinner };