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

package/dist/src/components/modal/modalContainer/index.d.ts

@@ -0,0 +1,78 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type ModalContainerProps = HTMLAttributes<HTMLElement> & {
+    isVisible: boolean;
+    makeInvisible: () => void;
+};
+/**
+ * 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>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function ModalContainer(args: ModalContainerProps): import("react/jsx-runtime").JSX.Element;
+export { ModalContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/modal/modalContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/modalContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,iBAAS,cAAc,CAAC,IAAI,EAAE,mBAAmB,2CA0ChD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,82 @@
+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/src/components/modal/modalContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+type ModalContextProps = {
+    makeInvisible: () => void;
+};
+type ModalProviderProps = {
+    children: ReactNode;
+    makeInvisible: () => void;
+};
+declare function ModalProvider(props: ModalProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useModal(): ModalContextProps;
+export { ModalProvider, useModal };
+//# sourceMappingURL=modalContext.d.ts.map

package/dist/src/components/modal/modalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalContext.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,iBAAiB,GAAG;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAIF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAM/C;AAED,iBAAS,QAAQ,sBAEhB;AAED,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/components/modal/modalContext.js

@@ -0,0 +1,10 @@
+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/src/components/modal/modalFooter/index.d.ts

@@ -0,0 +1,72 @@
+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>
+ * ```
+ */
+declare function ModalFooter(args: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+export { ModalFooter };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/modal/modalFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/modalFooter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;CAChE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AAEH,iBAAS,WAAW,CAAC,IAAI,EAAE,gBAAgB,2CAK1C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,72 @@
+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/src/components/modal/modalHeader/index.d.ts

@@ -0,0 +1,66 @@
+import { HTMLAttributes } from "react";
+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>
+ * ```
+ */
+declare function ModalHeader(args: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { ModalHeader };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/modal/modalHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/modalHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,WAAW,CAAC,IAAI,EAAE,gBAAgB,2CA2B1C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"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"}