sea-react-components 1.3.14 → 1.3.16

package/dist/components/accordion/index.d.ts

@@ -14,6 +14,8 @@ export type AccordionItemProps = {
     children: ReactNode;
     id?: string;
     onOpenChange?: (isOpen: boolean) => void;
+    badgeTitle?: string;
+    className?: string;
 };
 export declare const AccordionItem: React.FC<AccordionItemProps>;
 export {};

package/dist/components/accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAIF,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAe9C,CAAC;AAEF,eAAO,MAAM,YAAY,mBAMxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6CtD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAIF,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAe9C,CAAC;AAEF,eAAO,MAAM,YAAY,mBAMxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2DtD,CAAC"}

package/dist/components/accordion/index.js

@@ -18,7 +18,7 @@ export const useAccordion = () => {
     }
     return context;
 };
-export const AccordionItem = ({ title, children, id, onOpenChange, }) => {
+export const AccordionItem = ({ title, children, id, onOpenChange, badgeTitle, className, }) => {
     const generatedId = useId();
     const itemId = id || generatedId;
     const { openItem, toggleItem } = useAccordion();
@@ -30,7 +30,10 @@ export const AccordionItem = ({ title, children, id, onOpenChange, }) => {
             onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
         }
     }, [isOpen, onOpenChange]);
-    return (_jsxs("div", { className: "group", children: [_jsxs("div", { onClick: () => toggleItem(itemId), className: "w-full flex justify-between items-center gap-3 px-4 py-3 bg-white hover:bg-primary/10 custom-animation text-left", children: [_jsx("div", { className: "w-full", children: title }), _jsx(Icon, { icon: "weui:arrow-filled", className: clsx("h-5 w-5 cursor-pointer  custom-animation", {
+    return (_jsxs("div", { className: "group", children: [_jsxs("div", { onClick: () => toggleItem(itemId), className: clsx({
+                    "w-full flex justify-between items-center gap-3 px-4 py-3 bg-white hover:bg-primary/10 custom-animation text-left": className == undefined,
+                    [className]: className != undefined,
+                }), children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "w-full", children: title }), badgeTitle && (_jsx("div", { className: "mt-1 inline-block px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded-full", children: badgeTitle }))] }), _jsx(Icon, { icon: "weui:arrow-filled", className: clsx("h-5 w-5 cursor-pointer  custom-animation", {
                             "-rotate-90": isOpen,
                             "rotate-90": !isOpen,
                         }) })] }), _jsx("div", { className: `px-4 pb-4 overflow-auto transition-all duration-300 ease-in-out ${isOpen ? "max-h-screen opacity-100" : "max-h-0 opacity-0"}`, children: isOpen && _jsx("div", { className: "pt-2 text-gray-700", children: children }) })] }));

package/dist/components/activity-message/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/activity-message/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,GAAG,EAAS,MAAM,sBAAsB,CAAC;AAG7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC;CAClC,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CA6Q1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/activity-message/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,GAAG,EAAS,MAAM,sBAAsB,CAAC;AAG7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC;CAClC,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAoQ1D"}

package/dist/components/activity-message/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CONSTANTS, Utils } from "sea-platform-helpers";
 const NONE = "N/A";
 export default function ActivityMessage({ activity }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     let message = null;
     switch (activity.type) {
         case CONSTANTS.Activity.ActivityTypes.SystemAction: {
@@ -46,7 +46,7 @@ export default function ActivityMessage({ activity }) {
         }
         case CONSTANTS.Activity.ActivityTypes.TaskGetUpdated: {
             const metadata = activity.metadata;
-            message = (_jsxs("div", { className: "flex flex-col gap-[1px]", children: [_jsx("p", { children: "Task updated" }), _jsxs("div", { className: "text-sm", children: [metadata.title && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Title:", " ", _jsx("span", { className: "font-semibold", children: metadata.title.to })] }) })), metadata.description && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Description:", " ", _jsx("span", { className: "font-semibold", children: metadata.description.to })] }) })), metadata.section && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Section:", " ", _jsx("span", { className: "font-semibold", children: (_d = (_c = metadata.section.to) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : NONE })] }) })), metadata.milestone && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Milestone:", " ", _jsx("span", { className: "font-semibold", children: (_f = (_e = metadata.milestone.to) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : NONE })] }) })), metadata.priority && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Priority:", " ", _jsx("span", { className: "font-semibold", children: metadata.priority.to })] }) })), metadata.assignedAccount && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Assigned to:", " ", _jsx("span", { className: "font-semibold", children: (_h = (_g = metadata.assignedAccount.to) === null || _g === void 0 ? void 0 : _g.name) !== null && _h !== void 0 ? _h : NONE })] }) })), metadata.dueDate && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Due date:", " ", _jsx("span", { className: "font-semibold", children: Utils.Moment.formatDate(metadata.dueDate.to) })] }) })), metadata.isCompleted && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Completed:", " ", _jsx("span", { className: "font-semibold", children: metadata.isCompleted.to ? "Yes" : "No" })] }) }))] })] }));
+            message = (_jsxs("div", { className: "flex flex-col gap-[1px]", children: [_jsx("p", { children: "Task updated" }), _jsxs("div", { className: "text-sm", children: [metadata.title && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Title:", " ", _jsx("span", { className: "font-semibold", children: metadata.title.to })] }) })), metadata.description && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Description:", " ", _jsx("span", { className: "font-semibold", children: metadata.description.to })] }) })), metadata.section && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Section:", " ", _jsx("span", { className: "font-semibold", children: (_d = (_c = metadata.section.to) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : NONE })] }) })), metadata.milestone && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Milestone:", " ", _jsx("span", { className: "font-semibold", children: (_f = (_e = metadata.milestone.to) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : NONE })] }) })), metadata.priority && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Priority:", " ", _jsx("span", { className: "font-semibold", children: metadata.priority.to })] }) })), metadata.dueDate && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Due date:", " ", _jsx("span", { className: "font-semibold", children: Utils.Moment.formatDate(metadata.dueDate.to) })] }) })), metadata.isCompleted && (_jsx("div", { className: "flex gap-1", children: _jsxs("p", { children: ["Completed:", " ", _jsx("span", { className: "font-semibold", children: metadata.isCompleted.to ? "Yes" : "No" })] }) }))] })] }));
             break;
         }
         case CONSTANTS.Activity.ActivityTypes.TaskGetDeleted: {

package/dist/components/auto-complete/auto-complete-context copy.d.ts

@@ -0,0 +1,16 @@
+import { SelectOption } from "../select";
+export type AutocompleteContextType<T> = {
+    inputValue: string;
+    setInputValue: (v: string) => void;
+    open: boolean;
+    setOpen: (v: boolean) => void;
+    filteredOptions: SelectOption<T>[];
+    select: (option: T) => void;
+    remove: (option: T) => void;
+    highlightedIndex: number;
+    setHighlightedIndex: (i: number) => void;
+    selected: T[];
+};
+export declare const AutocompleteContext: import("react").Context<AutocompleteContextType<any>>;
+export declare function useAutocompleteContext<T>(): AutocompleteContextType<T>;
+//# sourceMappingURL=auto-complete-context%20copy.d.ts.map

package/dist/components/auto-complete/auto-complete-context copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-context copy.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/auto-complete-context copy.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,MAAM,uBAAuB,CAAC,CAAC,IAAI;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9B,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,EAAE,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,mBAAmB,uDAC0B,CAAC;AAE3D,wBAAgB,sBAAsB,CAAC,CAAC,KAMxB,uBAAuB,CAAC,CAAC,CAAC,CACzC"}

package/dist/components/auto-complete/auto-complete-context copy.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+export const AutocompleteContext = createContext(null);
+export function useAutocompleteContext() {
+    const ctx = useContext(AutocompleteContext);
+    if (!ctx)
+        throw new Error("Autocomplete compound components must be used within <Autocomplete>");
+    return ctx;
+}

package/dist/components/auto-complete/auto-complete-context.d.ts

@@ -0,0 +1,22 @@
+export type AutocompleteContextType<T> = {
+    inputValue: string;
+    setInputValue: (v: string) => void;
+    open: boolean;
+    setOpen: (v: boolean) => void;
+    filteredOptions: T[];
+    select: (option: T) => void;
+    remove: (option: T) => void;
+    highlightedIndex: number;
+    setHighlightedIndex: (i: number) => void;
+    selected: T[];
+    label?: string;
+    name?: string;
+    loading?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    errorMessage?: string;
+    onDebouncedChange?: (val: string) => void;
+};
+export declare const AutocompleteContext: import("react").Context<AutocompleteContextType<any>>;
+export declare function useAutocompleteContext<T>(): AutocompleteContextType<T>;
+//# sourceMappingURL=auto-complete-context.d.ts.map

package/dist/components/auto-complete/auto-complete-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-context.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/auto-complete-context.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,uBAAuB,CAAC,CAAC,IAAI;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9B,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,mBAAmB,uDAC0B,CAAC;AAE3D,wBAAgB,sBAAsB,CAAC,CAAC,KAMxB,uBAAuB,CAAC,CAAC,CAAC,CACzC"}

package/dist/components/auto-complete/auto-complete-context.js

@@ -0,0 +1,9 @@
+"use client";
+import { createContext, useContext } from "react";
+export const AutocompleteContext = createContext(null);
+export function useAutocompleteContext() {
+    const ctx = useContext(AutocompleteContext);
+    if (!ctx)
+        throw new Error("Autocomplete compound components must be used within <Autocomplete>");
+    return ctx;
+}

package/dist/components/auto-complete/auto-complete-dropdown.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type DropdownProps<T> = {
+    renderOption: (option: T, isHighlighted: boolean) => React.ReactNode;
+};
+export declare function AutocompleteDropdown<T>({ renderOption }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auto-complete-dropdown.d.ts.map

package/dist/components/auto-complete/auto-complete-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/auto-complete-dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,aAAa,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;CACtE,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EAAE,YAAY,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,2CAqCzE"}

package/dist/components/auto-complete/auto-complete-dropdown.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAutocompleteContext } from "./auto-complete-context";
+import clsx from "clsx";
+import Loader from "../loader";
+export function AutocompleteDropdown({ renderOption }) {
+    const { open, filteredOptions, highlightedIndex, setHighlightedIndex, select, loading, } = useAutocompleteContext();
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "absolute z-10 w-full mt-1 bg-white border rounded shadow max-h-60 overflow-y-auto", children: loading ? (_jsx("div", { className: "p-4 flex justify-center items-center", children: _jsx(Loader, {}) })) : filteredOptions.length > 0 ? (filteredOptions.map((o, i) => (_jsx("div", { className: clsx("px-4 py-2 cursor-pointer hover:bg-primary hover:bg-opacity-20", highlightedIndex === i && "bg-gray-100"), onMouseEnter: () => setHighlightedIndex(i), onClick: () => select(o), children: renderOption(o, highlightedIndex === i) }, `option-${i}`)))) : (_jsx("div", { className: "p-4 text-center text-gray-400", children: "No options found" })) }));
+}

package/dist/components/auto-complete/auto-complete-input.d.ts

@@ -0,0 +1,2 @@
+export declare function AutocompleteInput(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=auto-complete-input.d.ts.map

package/dist/components/auto-complete/auto-complete-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-input.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/auto-complete-input.tsx"],"names":[],"mappings":"AAKA,wBAAgB,iBAAiB,4CA2BhC"}

package/dist/components/auto-complete/auto-complete-input.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAutocompleteContext } from "./auto-complete-context";
+import SearchInput from "../search-input";
+export function AutocompleteInput() {
+    const { inputValue, setInputValue, setOpen, label, name, required, placeholder, errorMessage, onDebouncedChange, } = useAutocompleteContext();
+    return (_jsx(SearchInput, { label: label, name: name, value: inputValue, required: required, onFocus: () => setOpen(true), onChange: (e) => setInputValue(e.target.value), onDebouncedChange: (val) => onDebouncedChange === null || onDebouncedChange === void 0 ? void 0 : onDebouncedChange(val), autoComplete: "off", placeholder: placeholder, errorMessage: errorMessage }));
+}

package/dist/components/auto-complete/auto-complete-selected.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type SelectedProps<T> = {
+    render?: (selected: T[], remove: (option: T) => void) => React.ReactNode;
+};
+export declare function AutocompleteSelected<T>({ render }: SelectedProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auto-complete-selected.d.ts.map

package/dist/components/auto-complete/auto-complete-selected.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-selected.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/auto-complete-selected.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1E,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,2CAKnE"}

package/dist/components/auto-complete/auto-complete-selected.js

@@ -0,0 +1,9 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useAutocompleteContext } from "./auto-complete-context";
+export function AutocompleteSelected({ render }) {
+    const { selected, remove } = useAutocompleteContext();
+    if (!selected.length)
+        return null;
+    return _jsx(_Fragment, { children: render ? render(selected, remove) : null });
+}

package/dist/components/auto-complete/auto-complete.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export type AutocompleteProps<T> = {
+    options: T[];
+    selected?: T[];
+    onSelect?: (selected: T[]) => void;
+    multiselect?: boolean;
+    loading?: boolean;
+    label?: string;
+    name?: string;
+    required?: boolean;
+    placeholder?: string;
+    errorMessage?: string;
+    onDebouncedChange?: (val: string) => void;
+    children: React.ReactNode;
+};
+export declare function Autocomplete<T extends string | number | {
+    id: string;
+}>({ options, selected, onSelect, multiselect, loading, label, name, required, placeholder, errorMessage, onDebouncedChange, children, }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=auto-complete.d.ts.map

package/dist/components/auto-complete/auto-complete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/auto-complete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IACjC,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,EACvE,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAkB,EAClB,OAAe,EACf,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,QAAQ,GACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAqCtB"}

package/dist/components/auto-complete/auto-complete.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { AutocompleteContext } from "./auto-complete-context";
+import { useAutocomplete } from "./use-autocomplete";
+export function Autocomplete({ options, selected, onSelect, multiselect = true, loading = false, label, name, required, placeholder, errorMessage, onDebouncedChange, children, }) {
+    const containerRef = useRef(null);
+    const ac = useAutocomplete({
+        options,
+        selected,
+        multiselect,
+        onSelect,
+    });
+    // Expose label, name, loading, onDebouncedChange through context if needed
+    const contextValue = {
+        ...ac,
+        label,
+        name,
+        loading,
+        required,
+        placeholder,
+        errorMessage,
+        onDebouncedChange,
+    };
+    useEffect(() => {
+        const handler = (e) => {
+            var _a;
+            if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
+                ac.setOpen(false);
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [ac]);
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsx("div", { ref: containerRef, className: "relative w-full", children: children }) }));
+}

package/dist/components/auto-complete/component.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import SearchInput from "../search-input";
+import { SelectOption } from "../select";
+export type Props<T extends string | number | {
+    id: string;
+}> = {
+    label?: string;
+    name?: string;
+    options: SelectOption<T>[];
+    selectedOptions?: T[];
+    setSelectedOptions?: (opts: T[]) => void;
+    onOptionSelect?: (option: SelectOption<T>) => void;
+    multiselect?: boolean;
+    loading?: boolean;
+    renderSelectedOptions?: (selected: T[], remove: (option: T) => void) => React.ReactNode;
+    renderOption?: (option: SelectOption<T>, isHighlighted: boolean) => React.ReactNode;
+    renderContainer?: (content: {
+        input: React.ReactNode;
+        dropdown: React.ReactNode;
+        selected: React.ReactNode;
+        multiselect: boolean;
+    }) => React.ReactNode;
+} & Omit<React.ComponentProps<typeof SearchInput>, "onDebouncedChange"> & {
+    onDebouncedChange?: (val: string) => void;
+};
+export default function AutoCompleteInput<T extends string | number | {
+    id: string;
+}>({ label, name, options, selectedOptions, setSelectedOptions, onOptionSelect, value, onChange, onDebouncedChange, loading, multiselect, renderSelectedOptions, renderOption, renderContainer, ...rest }: Props<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=component.d.ts.map

package/dist/components/auto-complete/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,CACtB,QAAQ,EAAE,CAAC,EAAE,EACb,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,KACxB,KAAK,CAAC,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,EACvB,aAAa,EAAE,OAAO,KACnB,KAAK,CAAC,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,EAAE,OAAO,CAAC;KACtB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,mBAAmB,CAAC,GAAG;IACtE,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAC1C,EACA,KAAK,EACL,IAAI,EACJ,OAAO,EACP,eAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,OAAe,EACf,WAAkB,EAClB,qBAAqB,EACrB,YAAY,EACZ,eAAe,EACf,GAAG,IAAI,EACR,EAAE,KAAK,CAAC,CAAC,CAAC,2CAsGV"}

package/dist/components/auto-complete/component.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import SearchInput from "../search-input";
+import Loader from "../loader";
+import clsx from "clsx";
+import { useAutocomplete } from "./use-autocomplete";
+export default function AutoCompleteInput({ label, name, options, selectedOptions = [], setSelectedOptions, onOptionSelect, value, onChange, onDebouncedChange, loading = false, multiselect = true, renderSelectedOptions, renderOption, renderContainer, ...rest }) {
+    const containerRef = useRef(null);
+    const { inputValue, setInputValue, open, setOpen, filteredOptions, select, remove, highlightedIndex, setHighlightedIndex, selected, } = useAutocomplete({
+        options,
+        selected: selectedOptions,
+        multiselect,
+        onSelect: setSelectedOptions,
+    });
+    // Click outside to close
+    useEffect(() => {
+        const handler = (e) => {
+            var _a;
+            if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, []);
+    const handleOptionSelect = (option) => {
+        select(option.value);
+        onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(option);
+    };
+    const input = (_jsx(SearchInput, { label: label, name: name, value: inputValue, onFocus: () => setOpen(true), onChange: (e) => {
+            setInputValue(e.target.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        }, onDebouncedChange: (val) => {
+            setOpen(true);
+            onDebouncedChange === null || onDebouncedChange === void 0 ? void 0 : onDebouncedChange(val);
+        }, autoComplete: "off", ...rest }));
+    const dropdown = open ? (_jsx("div", { className: "absolute z-10 w-full mt-1 bg-white border rounded shadow max-h-60 overflow-y-auto", children: loading ? (_jsx("div", { className: "p-4 flex justify-center items-center", children: _jsx(Loader, {}) })) : filteredOptions.length > 0 ? (filteredOptions.map((o, i) => (_jsx("div", { className: clsx("px-4 py-2 cursor-pointer custom-animation hover:bg-primary hover:bg-opacity-20", highlightedIndex === i && "bg-gray-100"), onMouseEnter: () => setHighlightedIndex(i), onClick: () => handleOptionSelect(o), children: renderOption ? renderOption(o, highlightedIndex === i) : o.label }, `${name}-option-${i}`)))) : (_jsx("div", { className: "p-4 text-center text-gray-400", children: "No options found" })) })) : null;
+    const selectedNode = selected.length
+        ? renderSelectedOptions === null || renderSelectedOptions === void 0 ? void 0 : renderSelectedOptions(selected, remove)
+        : null;
+    return (_jsx("div", { ref: containerRef, className: "relative w-full", children: renderContainer ? (renderContainer({
+            input,
+            dropdown,
+            selected: selectedNode,
+            multiselect,
+        })) : (_jsxs(_Fragment, { children: [selectedNode, input, dropdown] })) }));
+}

package/dist/components/auto-complete/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./auto-complete-context";
+export * from "./auto-complete-dropdown";
+export * from "./auto-complete-input";
+export * from "./auto-complete-selected";
+export * from "./auto-complete";
+export * from "./use-autocomplete";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/auto-complete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/index.tsx"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/dist/components/auto-complete/index.js

@@ -0,0 +1,6 @@
+export * from "./auto-complete-context";
+export * from "./auto-complete-dropdown";
+export * from "./auto-complete-input";
+export * from "./auto-complete-selected";
+export * from "./auto-complete";
+export * from "./use-autocomplete";

package/dist/components/auto-complete/use-autocomplete.d.ts

@@ -0,0 +1,20 @@
+export declare function useAutocomplete<T extends string | number | {
+    id: string;
+}>(props: {
+    options: T[];
+    selected?: T[];
+    multiselect?: boolean;
+    onSelect?: (selected: T[]) => void;
+}): {
+    inputValue: string;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    filteredOptions: T[];
+    select: (option: T) => void;
+    remove: (option: T) => void;
+    highlightedIndex: number;
+    setHighlightedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    selected: T[];
+};
+//# sourceMappingURL=use-autocomplete.d.ts.map

package/dist/components/auto-complete/use-autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete/use-autocomplete.ts"],"names":[],"mappings":"AAGA,wBAAgB,eAAe,CAC7B,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAC1C,KAAK,EAAE;IACP,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CACpC;;;;;;qBAyByB,CAAC;qBAWD,CAAC;;;;EA4B1B"}

package/dist/components/auto-complete/use-autocomplete.js

@@ -0,0 +1,57 @@
+"use client";
+import { useState, useMemo } from "react";
+export function useAutocomplete(props) {
+    const { options, selected = [], multiselect = true, onSelect } = props;
+    const [inputValue, setInputValue] = useState("");
+    const [open, setOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const filteredOptions = useMemo(() => {
+        if (!multiselect)
+            return options;
+        return options.filter((o) => !selected.some((s) => {
+            if (typeof s === "string" || typeof s === "number")
+                return s === o;
+            if (typeof s === "object" &&
+                "id" in s &&
+                typeof o === "object" &&
+                "id" in o)
+                return s.id === o.id;
+            return false;
+        }));
+    }, [options, selected, multiselect]);
+    const select = (option) => {
+        if (multiselect) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selected, option]);
+        }
+        else {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([option]);
+            setOpen(false);
+        }
+        setInputValue("");
+        setHighlightedIndex(0);
+    };
+    const remove = (option) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected.filter((s) => {
+            if (typeof s === "string" || typeof s === "number")
+                return s !== option;
+            if (typeof s === "object" &&
+                "id" in s &&
+                typeof option === "object" &&
+                "id" in option)
+                return s.id !== option.id;
+            return true;
+        }));
+    };
+    return {
+        inputValue,
+        setInputValue,
+        open,
+        setOpen,
+        filteredOptions,
+        select,
+        remove,
+        highlightedIndex,
+        setHighlightedIndex,
+        selected,
+    };
+}

package/dist/components/auto-complete-input/index.d.ts

@@ -4,6 +4,7 @@ import { SelectOption } from "../select";
 export type Props<T extends string | number | {
     id: string;
 }> = {
+    label?: string;
     options: SelectOption<T>[];
     selectedOptions?: T[];
     setSelectedOptions?: (opts: T[]) => void;
@@ -21,5 +22,5 @@ export type Props<T extends string | number | {
 };
 export default function AutoCompleteInput<T extends string | number | {
     id: string;
-}>({ name, options, selectedOptions, setSelectedOptions, onOptionSelect, value, onChange, onDebouncedChange, loading, multiselect, renderSelectedOptions, renderContainer, ...rest }: Props<T>): import("react/jsx-runtime").JSX.Element;
+}>({ label, name, options, selectedOptions, setSelectedOptions, onOptionSelect, value, onChange, onDebouncedChange, loading, multiselect, renderSelectedOptions, renderContainer, ...rest }: Props<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/auto-complete-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAIzC,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IAC9D,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,mBAAmB,CAAC,GAAG;IACtE,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAC1C,EACA,IAAI,EACJ,OAAO,EACP,eAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,OAAe,EACf,WAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,KAAK,CAAC,CAAC,CAAC,2CA+HV"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAIzC,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,mBAAmB,CAAC,GAAG;IACtE,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAC1C,EACA,KAAK,EACL,IAAI,EACJ,OAAO,EACP,eAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,OAAe,EACf,WAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,KAAK,CAAC,CAAC,CAAC,2CAgIV"}

package/dist/components/auto-complete-input/index.js

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from "react";
 import SearchInput from "../search-input";
 import clsx from "clsx";
 import Loader from "../loader";
-export default function AutoCompleteInput({ name, options, selectedOptions = [], setSelectedOptions, onOptionSelect, value, onChange, onDebouncedChange, loading = false, multiselect = true, renderSelectedOptions, renderContainer, ...rest }) {
+export default function AutoCompleteInput({ label, name, options, selectedOptions = [], setSelectedOptions, onOptionSelect, value, onChange, onDebouncedChange, loading = false, multiselect = true, renderSelectedOptions, renderContainer, ...rest }) {
     var _a;
     const [show, setShow] = useState(false);
     const [inputValue, setInputValue] = useState((_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : "");
@@ -55,7 +55,7 @@ export default function AutoCompleteInput({ name, options, selectedOptions = [],
         var _a;
         setInputValue((_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : "");
     }, [value]);
-    const input = (_jsx(SearchInput, { name: name, value: inputValue, onFocus: () => setShow(true), onChange: (e) => {
+    const input = (_jsx(SearchInput, { label: label, name: name, value: inputValue, onFocus: () => setShow(true), onChange: (e) => {
             setInputValue(e.target.value);
             onChange === null || onChange === void 0 ? void 0 : onChange(e);
         }, onDebouncedChange: (val) => {

package/dist/components/auto-complete-input copy/index.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import SearchInput from "../search-input";
+import { SelectOption } from "../select";
+export type Props<T extends string | number | {
+    id: string;
+}> = {
+    label?: string;
+    options: SelectOption<T>[];
+    selectedOptions?: T[];
+    setSelectedOptions?: (opts: T[]) => void;
+    onOptionSelect?: (option: SelectOption<T>) => void;
+    multiselect?: boolean;
+    loading?: boolean;
+    renderSelectedOptions?: (selected: T[]) => React.ReactNode;
+    renderContainer?: (content: {
+        input: React.ReactNode;
+        dropdown: React.ReactNode;
+        selected: React.ReactNode;
+        multiselect: boolean;
+    }) => React.ReactNode;
+} & Omit<React.ComponentProps<typeof SearchInput>, "onDebouncedChange"> & {
+    onDebouncedChange?: (val: string) => void;
+};
+export default function AutoCompleteInput<T extends string | number | {
+    id: string;
+}>({ label, name, options, selectedOptions, setSelectedOptions, onOptionSelect, value, onChange, onDebouncedChange, loading, multiselect, renderSelectedOptions, renderContainer, ...rest }: Props<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/auto-complete-input copy/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/auto-complete-input copy/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAIzC,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,EAAE,OAAO,CAAC;KACtB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,mBAAmB,CAAC,GAAG;IACtE,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAC1C,EACA,KAAK,EACL,IAAI,EACJ,OAAO,EACP,eAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,OAAe,EACf,WAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,KAAK,CAAC,CAAC,CAAC,2CAiIV"}

package/dist/components/auto-complete-input copy/index.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import SearchInput from "../search-input";
+import clsx from "clsx";
+import Loader from "../loader";
+export default function AutoCompleteInput({ label, name, options, selectedOptions = [], setSelectedOptions, onOptionSelect, value, onChange, onDebouncedChange, loading = false, multiselect = true, renderSelectedOptions, renderContainer, ...rest }) {
+    var _a;
+    const [show, setShow] = useState(false);
+    const [inputValue, setInputValue] = useState((_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : "");
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            var _a;
+            if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                setShow(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, []);
+    const isAlreadySelected = (option) => {
+        return selectedOptions.some((selected) => {
+            if ((typeof selected === "string" || typeof selected === "number") &&
+                (typeof option.value === "string" || typeof option.value === "number")) {
+                return selected === option.value;
+            }
+            if (typeof selected === "object" &&
+                typeof option.value === "object" &&
+                "id" in selected &&
+                "id" in option.value) {
+                return selected.id === option.value.id;
+            }
+            return false;
+        });
+    };
+    const filteredOptions = multiselect
+        ? options.filter((o) => !isAlreadySelected(o))
+        : options;
+    const handleSelect = (option) => {
+        setInputValue("");
+        onChange === null || onChange === void 0 ? void 0 : onChange({ target: { name, value: "" } });
+        if (multiselect) {
+            if (!isAlreadySelected(option)) {
+                setSelectedOptions === null || setSelectedOptions === void 0 ? void 0 : setSelectedOptions([...selectedOptions, option.value]);
+            }
+        }
+        else {
+            setSelectedOptions === null || setSelectedOptions === void 0 ? void 0 : setSelectedOptions([option.value]); // Only one selection
+            setShow(false); // Hide dropdown immediately
+        }
+        onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(option);
+    };
+    useEffect(() => {
+        var _a;
+        setInputValue((_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : "");
+    }, [value]);
+    const input = (_jsx(SearchInput, { label: label, name: name, value: inputValue, onFocus: () => setShow(true), onChange: (e) => {
+            setInputValue(e.target.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        }, onDebouncedChange: (val) => {
+            setShow(true);
+            onDebouncedChange === null || onDebouncedChange === void 0 ? void 0 : onDebouncedChange(val);
+        }, autoComplete: "off", ...rest }));
+    const dropdown = show && inputValue.trim() !== "" ? (_jsx("div", { className: "absolute z-10 w-full mt-1 bg-white border rounded shadow max-h-60 overflow-y-auto", children: loading ? (_jsx("div", { className: "p-4 flex justify-center items-center", children: _jsx(Loader, {}) })) : filteredOptions.length > 0 ? (filteredOptions.map((o, i) => (_jsx("div", { className: clsx("px-4 py-2 cursor-pointer custom-animation hover:bg-primary hover:bg-opacity-20"), onClick: () => handleSelect(o), children: o.label }, `${name}-option-${i}`)))) : (_jsx("div", { className: "p-4 text-center text-gray-400", children: "No options found" })) })) : null;
+    const selected = selectedOptions.length
+        ? renderSelectedOptions === null || renderSelectedOptions === void 0 ? void 0 : renderSelectedOptions(selectedOptions)
+        : null;
+    return (_jsx("div", { ref: containerRef, children: renderContainer ? (_jsx("div", { className: "relative", children: renderContainer({
+                input,
+                dropdown,
+                selected,
+                multiselect,
+            }) })) : (_jsxs("div", { className: "relative", children: [selected, input, dropdown] })) }));
+}