tembro 1.0.0

package/dist/components/form/form-switch.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type Control, type FieldPath, type FieldValues } from "react-hook-form";
+import { type FormFieldShellControlProps } from "@/components/form/form-field-shell";
+import { Switch } from "@/components/ui/switch";
+export type FormSwitchLabelPlacement = "start" | "end";
+export type FormSwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<React.ComponentProps<typeof Switch>, "name" | "checked" | "defaultChecked" | "disabled"> & FormFieldShellControlProps & {
+    control: Control<TFieldValues>;
+    name: TName;
+    fieldClassName?: string;
+    labelPlacement?: FormSwitchLabelPlacement;
+    onCheckedChange?: (checked: boolean) => void;
+};
+declare function FormSwitch<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, label, description, required, className, layout, descriptionPosition, labelAction, requiredIndicator, errorIcon, showErrorIcon, disabled, readOnly, labelClassName, labelRowClassName, descriptionClassName, errorClassName, contentClassName, fieldClassName, labelPlacement, id, onCheckedChange, ...props }: FormSwitchProps<TFieldValues, TName>): React.JSX.Element;
+export { FormSwitch };

package/dist/components/form/form-switch.js

@@ -0,0 +1,85 @@
+import { cn as e } from "../../lib/utils.js";
+import { Switch as t } from "../ui/switch/index.js";
+import { FormFieldShell as n } from "./form-field-shell.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Controller as a } from "react-hook-form";
+//#region src/components/form/form-switch.tsx
+function o({ control: o, name: s, label: c, description: l, required: u, className: d, layout: f, descriptionPosition: p, labelAction: m, requiredIndicator: h, errorIcon: g, showErrorIcon: _, disabled: v, readOnly: y, labelClassName: b, labelRowClassName: x, descriptionClassName: S, errorClassName: C, contentClassName: w, fieldClassName: T, labelPlacement: E = "end", id: D, onCheckedChange: O, ...k }) {
+	let A = D ?? s, j = c ? /* @__PURE__ */ i("label", {
+		htmlFor: A,
+		className: e("text-sm font-medium leading-none", v && "opacity-60", b),
+		children: [c, u && (h ?? /* @__PURE__ */ r("span", {
+			className: "ml-1 text-destructive",
+			children: "*"
+		}))]
+	}) : null;
+	return /* @__PURE__ */ r(a, {
+		control: o,
+		name: s,
+		render: ({ field: a, fieldState: o }) => {
+			let s = /* @__PURE__ */ r(t, {
+				id: A,
+				ref: a.ref,
+				checked: !!a.value,
+				disabled: v || y,
+				"aria-invalid": o.invalid || void 0,
+				className: T,
+				onBlur: a.onBlur,
+				onCheckedChange: (e) => {
+					a.onChange(e), O?.(e);
+				},
+				...k
+			});
+			return E === "start" ? /* @__PURE__ */ r(n, {
+				label: c,
+				description: l,
+				required: u,
+				error: o.error?.message,
+				htmlFor: A,
+				className: d,
+				layout: f,
+				descriptionPosition: p,
+				labelAction: m,
+				requiredIndicator: h,
+				errorIcon: g,
+				showErrorIcon: _,
+				disabled: v,
+				readOnly: y,
+				labelClassName: b,
+				labelRowClassName: x,
+				descriptionClassName: S,
+				errorClassName: C,
+				contentClassName: w,
+				children: s
+			}) : /* @__PURE__ */ r(n, {
+				error: o.error?.message,
+				className: d,
+				errorIcon: g,
+				showErrorIcon: _,
+				disabled: v,
+				readOnly: y,
+				errorClassName: C,
+				contentClassName: w,
+				children: /* @__PURE__ */ i("div", {
+					className: "flex items-start gap-3",
+					children: [s, (c || l || m) && /* @__PURE__ */ i("div", {
+						className: "grid min-w-0 gap-1",
+						children: [(c || m) && /* @__PURE__ */ i("div", {
+							className: e("flex items-center justify-between gap-2", x),
+							children: [j, m && /* @__PURE__ */ r("div", {
+								className: "shrink-0 text-sm",
+								children: m
+							})]
+						}), l && /* @__PURE__ */ r("p", {
+							className: e("text-xs text-muted-foreground", S),
+							children: l
+						})]
+					})]
+				})
+			});
+		}
+	});
+}
+//#endregion
+export { o as FormSwitch };

package/dist/components/form/form-textarea.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../ui/textarea/index.cjs"),n=require("./form-field-shell.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime"),a=require("react-hook-form");function o({control:e,name:r,rules:o,label:s,description:c,required:l,className:u,layout:d,descriptionPosition:f,labelAction:p,requiredIndicator:m,errorIcon:h,showErrorIcon:g,disabled:_,readOnly:v,labelClassName:y,labelRowClassName:b,descriptionClassName:x,errorClassName:S,contentClassName:C,fieldClassName:w,transformIn:T,transformOut:E,id:D,onChange:O,onBlur:k,...A}){let j=D??r;return(0,i.jsx)(a.Controller,{control:e,name:r,rules:o,render:({field:e,fieldState:r})=>(0,i.jsx)(n.FormFieldShell,{label:s,description:c,required:l,error:r.error?.message,htmlFor:j,className:u,layout:d,descriptionPosition:f,labelAction:p,requiredIndicator:m,errorIcon:h,showErrorIcon:g,disabled:_,readOnly:v,labelClassName:y,labelRowClassName:b,descriptionClassName:x,errorClassName:S,contentClassName:C,children:(0,i.jsx)(t.Textarea,{id:j,ref:e.ref,name:e.name,value:T?T(e.value):e.value??``,disabled:_,readOnly:v,onBlur:t=>{e.onBlur(),k?.(t)},onChange:t=>{e.onChange(E?E(t):t),O?.(t)},"aria-invalid":r.invalid||void 0,className:w,...A})})})}exports.FormTextarea=o;

package/dist/components/form/form-textarea.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type Control, type FieldPath, type FieldValues, type RegisterOptions } from "react-hook-form";
+import { type FormFieldShellControlProps } from "@/components/form/form-field-shell";
+import { Textarea } from "@/components/ui/textarea";
+export type FormTextareaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<React.ComponentProps<typeof Textarea>, "name" | "value" | "defaultValue"> & FormFieldShellControlProps & {
+    control: Control<TFieldValues>;
+    name: TName;
+    rules?: RegisterOptions<TFieldValues, TName>;
+    fieldClassName?: string;
+    transformIn?: (value: unknown) => string | number | readonly string[] | undefined;
+    transformOut?: (event: React.ChangeEvent<HTMLTextAreaElement>) => unknown;
+};
+declare function FormTextarea<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, rules, label, description, required, className, layout, descriptionPosition, labelAction, requiredIndicator, errorIcon, showErrorIcon, disabled, readOnly, labelClassName, labelRowClassName, descriptionClassName, errorClassName, contentClassName, fieldClassName, transformIn, transformOut, id, onChange, onBlur, ...props }: FormTextareaProps<TFieldValues, TName>): React.JSX.Element;
+export { FormTextarea };

package/dist/components/form/form-textarea.js

@@ -0,0 +1,54 @@
+import { Textarea as e } from "../ui/textarea/index.js";
+import { FormFieldShell as t } from "./form-field-shell.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Controller as r } from "react-hook-form";
+//#region src/components/form/form-textarea.tsx
+function i({ control: i, name: a, rules: o, label: s, description: c, required: l, className: u, layout: d, descriptionPosition: f, labelAction: p, requiredIndicator: m, errorIcon: h, showErrorIcon: g, disabled: _, readOnly: v, labelClassName: y, labelRowClassName: b, descriptionClassName: x, errorClassName: S, contentClassName: C, fieldClassName: w, transformIn: T, transformOut: E, id: D, onChange: O, onBlur: k, ...A }) {
+	let j = D ?? a;
+	return /* @__PURE__ */ n(r, {
+		control: i,
+		name: a,
+		rules: o,
+		render: ({ field: r, fieldState: i }) => /* @__PURE__ */ n(t, {
+			label: s,
+			description: c,
+			required: l,
+			error: i.error?.message,
+			htmlFor: j,
+			className: u,
+			layout: d,
+			descriptionPosition: f,
+			labelAction: p,
+			requiredIndicator: m,
+			errorIcon: h,
+			showErrorIcon: g,
+			disabled: _,
+			readOnly: v,
+			labelClassName: y,
+			labelRowClassName: b,
+			descriptionClassName: x,
+			errorClassName: S,
+			contentClassName: C,
+			children: /* @__PURE__ */ n(e, {
+				id: j,
+				ref: r.ref,
+				name: r.name,
+				value: T ? T(r.value) : r.value ?? "",
+				disabled: _,
+				readOnly: v,
+				onBlur: (e) => {
+					r.onBlur(), k?.(e);
+				},
+				onChange: (e) => {
+					r.onChange(E ? E(e) : e), O?.(e);
+				},
+				"aria-invalid": i.invalid || void 0,
+				className: w,
+				...A
+			})
+		})
+	});
+}
+//#endregion
+export { i as FormTextarea };

package/dist/components/form/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./form-field-shell.cjs"),t=require("./form-input.cjs"),n=require("./form-select.cjs"),r=require("./form-switch.cjs"),i=require("./form-textarea.cjs"),a=require("./form-date-picker.cjs"),o=require("./form-date-range-picker.cjs"),s=require("./repeater-field.cjs"),c=require("./form-async-select.cjs"),l=require("./form-date-input.cjs"),u=require("./form-date-range-input.cjs"),d=require("./form-number-input.cjs"),f=require("./form-password-input.cjs"),p=require("./form-phone-input.cjs"),m=require("./form-search-input.cjs");exports.FormAsyncSelect=c.FormAsyncSelect,exports.FormDateInput=l.FormDateInput,exports.FormDatePicker=a.FormDatePicker,exports.FormDateRangeInput=u.FormDateRangeInput,exports.FormDateRangePicker=o.FormDateRangePicker,exports.FormFieldShell=e.FormFieldShell,exports.FormInput=t.FormInput,exports.FormNumberInput=d.FormNumberInput,exports.FormPasswordInput=f.FormPasswordInput,exports.FormPhoneInput=p.FormPhoneInput,exports.FormSearchInput=m.FormSearchInput,exports.FormSelect=n.FormSelect,exports.FormSwitch=r.FormSwitch,exports.FormTextarea=i.FormTextarea,exports.RepeaterField=s.RepeaterField;

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

@@ -0,0 +1,15 @@
+export * from "./form-field-shell";
+export * from "./form-input";
+export * from "./form-select";
+export * from "./form-async-select";
+export * from "./form-textarea";
+export * from "./form-switch";
+export * from "./form-search-input";
+export * from "./form-password-input";
+export * from "./form-number-input";
+export * from "./form-phone-input";
+export * from "./form-date-input";
+export * from "./form-date-range-input";
+export * from "./form-date-picker";
+export * from "./form-date-range-picker";
+export * from "./repeater-field";

package/dist/components/form/index.js

@@ -0,0 +1,16 @@
+import { FormFieldShell as e } from "./form-field-shell.js";
+import { FormInput as t } from "./form-input.js";
+import { FormSelect as n } from "./form-select.js";
+import { FormSwitch as r } from "./form-switch.js";
+import { FormTextarea as i } from "./form-textarea.js";
+import { FormDatePicker as a } from "./form-date-picker.js";
+import { FormDateRangePicker as o } from "./form-date-range-picker.js";
+import { RepeaterField as s } from "./repeater-field.js";
+import { FormAsyncSelect as c } from "./form-async-select.js";
+import { FormDateInput as l } from "./form-date-input.js";
+import { FormDateRangeInput as u } from "./form-date-range-input.js";
+import { FormNumberInput as d } from "./form-number-input.js";
+import { FormPasswordInput as f } from "./form-password-input.js";
+import { FormPhoneInput as p } from "./form-phone-input.js";
+import { FormSearchInput as m } from "./form-search-input.js";
+export { c as FormAsyncSelect, l as FormDateInput, a as FormDatePicker, u as FormDateRangeInput, o as FormDateRangePicker, e as FormFieldShell, t as FormInput, d as FormNumberInput, f as FormPasswordInput, p as FormPhoneInput, m as FormSearchInput, n as FormSelect, r as FormSwitch, i as FormTextarea, s as RepeaterField };

package/dist/components/form/public.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./form-field-shell.cjs"),t=require("./form-input.cjs"),n=require("./form-select.cjs"),r=require("./form-switch.cjs"),i=require("./form-textarea.cjs"),a=require("./form-date-picker.cjs"),o=require("./form-date-range-picker.cjs"),s=require("./repeater-field.cjs"),c=require("./form-async-select.cjs"),l=require("./form-date-input.cjs"),u=require("./form-date-range-input.cjs"),d=require("./form-number-input.cjs"),f=require("./form-password-input.cjs"),p=require("./form-phone-input.cjs"),m=require("./form-search-input.cjs");exports.FormAsyncSelect=c.FormAsyncSelect,exports.FormDateInput=l.FormDateInput,exports.FormDatePicker=a.FormDatePicker,exports.FormDateRangeInput=u.FormDateRangeInput,exports.FormDateRangePicker=o.FormDateRangePicker,exports.FormFieldShell=e.FormFieldShell,exports.FormInput=t.FormInput,exports.FormNumberInput=d.FormNumberInput,exports.FormPasswordInput=f.FormPasswordInput,exports.FormPhoneInput=p.FormPhoneInput,exports.FormSearchInput=m.FormSearchInput,exports.FormSelect=n.FormSelect,exports.FormSwitch=r.FormSwitch,exports.FormTextarea=i.FormTextarea,exports.RepeaterField=s.RepeaterField;

package/dist/components/form/public.d.ts

@@ -0,0 +1,15 @@
+export * from "./form-field-shell";
+export * from "./form-input";
+export * from "./form-select";
+export * from "./form-switch";
+export * from "./form-textarea";
+export * from "./form-date-picker";
+export * from "./form-date-range-picker";
+export * from "./repeater-field";
+export * from "./form-async-select";
+export * from "./form-date-input";
+export * from "./form-date-range-input";
+export * from "./form-number-input";
+export * from "./form-password-input";
+export * from "./form-phone-input";
+export * from "./form-search-input";

package/dist/components/form/public.js

@@ -0,0 +1,16 @@
+import { FormFieldShell as e } from "./form-field-shell.js";
+import { FormInput as t } from "./form-input.js";
+import { FormSelect as n } from "./form-select.js";
+import { FormSwitch as r } from "./form-switch.js";
+import { FormTextarea as i } from "./form-textarea.js";
+import { FormDatePicker as a } from "./form-date-picker.js";
+import { FormDateRangePicker as o } from "./form-date-range-picker.js";
+import { RepeaterField as s } from "./repeater-field.js";
+import { FormAsyncSelect as c } from "./form-async-select.js";
+import { FormDateInput as l } from "./form-date-input.js";
+import { FormDateRangeInput as u } from "./form-date-range-input.js";
+import { FormNumberInput as d } from "./form-number-input.js";
+import { FormPasswordInput as f } from "./form-password-input.js";
+import { FormPhoneInput as p } from "./form-phone-input.js";
+import { FormSearchInput as m } from "./form-search-input.js";
+export { c as FormAsyncSelect, l as FormDateInput, a as FormDatePicker, u as FormDateRangeInput, o as FormDateRangePicker, e as FormFieldShell, t as FormInput, d as FormNumberInput, f as FormPasswordInput, p as FormPhoneInput, m as FormSearchInput, n as FormSelect, r as FormSwitch, i as FormTextarea, s as RepeaterField };

package/dist/components/form/repeater-field.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o({value:e,onValueChange:r,renderItem:o,createItem:s,addLabel:c=`Add item`,max:l=1/0,min:u=0,disabled:d=!1,className:f,...p}){let m=()=>{e.length<l&&r([...e,s()])},h=t=>{e.length>u&&r(e.filter((e,n)=>n!==t))},g=(t,n)=>{let i=[...e];i[t]=n,r(i)},_=e.length<l&&!d,v=e.length>u&&!d;return(0,a.jsxs)(`div`,{"data-slot":`repeater-field`,className:t.cn(`flex flex-col gap-4`,f),...p,children:[e.map((e,t)=>(0,a.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,a.jsx)(`div`,{className:`flex-1 min-w-0`,children:o(e,t,{remove:()=>h(t),update:e=>g(t,e)})}),v&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon`,className:`shrink-0 text-muted-foreground hover:text-destructive`,onClick:()=>h(t),"aria-label":`Remove item`,children:(0,a.jsx)(i.Trash2Icon,{className:`size-4`})})]},t)),_&&(0,a.jsx)(`div`,{children:(0,a.jsxs)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:m,className:`w-full sm:w-auto`,children:[(0,a.jsx)(i.PlusIcon,{className:`mr-2 size-4`}),c]})})]})}exports.RepeaterField=o;

package/dist/components/form/repeater-field.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type RepeaterFieldProps<T> = Omit<React.ComponentProps<"div">, "value" | "onChange"> & {
+    value: T[];
+    onValueChange: (value: T[]) => void;
+    renderItem: (item: T, index: number, helpers: {
+        remove: () => void;
+        update: (item: T) => void;
+    }) => React.ReactNode;
+    createItem: () => T;
+    addLabel?: React.ReactNode;
+    max?: number;
+    min?: number;
+    disabled?: boolean;
+};
+declare function RepeaterField<T>({ value, onValueChange, renderItem, createItem, addLabel, max, min, disabled, className, ...props }: RepeaterFieldProps<T>): React.JSX.Element;
+export { RepeaterField };

package/dist/components/form/repeater-field.js

@@ -0,0 +1,48 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import "react";
+import { PlusIcon as n, Trash2Icon as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/form/repeater-field.tsx
+function o({ value: o, onValueChange: s, renderItem: c, createItem: l, addLabel: u = "Add item", max: d = Infinity, min: f = 0, disabled: p = !1, className: m, ...h }) {
+	let g = () => {
+		o.length < d && s([...o, l()]);
+	}, _ = (e) => {
+		o.length > f && s(o.filter((t, n) => n !== e));
+	}, v = (e, t) => {
+		let n = [...o];
+		n[e] = t, s(n);
+	}, y = o.length < d && !p, b = o.length > f && !p;
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "repeater-field",
+		className: e("flex flex-col gap-4", m),
+		...h,
+		children: [o.map((e, n) => /* @__PURE__ */ a("div", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ i("div", {
+				className: "flex-1 min-w-0",
+				children: c(e, n, {
+					remove: () => _(n),
+					update: (e) => v(n, e)
+				})
+			}), b && /* @__PURE__ */ i(t, {
+				type: "button",
+				variant: "outline",
+				size: "icon",
+				className: "shrink-0 text-muted-foreground hover:text-destructive",
+				onClick: () => _(n),
+				"aria-label": "Remove item",
+				children: /* @__PURE__ */ i(r, { className: "size-4" })
+			})]
+		}, n)), y && /* @__PURE__ */ i("div", { children: /* @__PURE__ */ a(t, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			onClick: g,
+			className: "w-full sm:w-auto",
+			children: [/* @__PURE__ */ i(n, { className: "mr-2 size-4" }), u]
+		}) })]
+	});
+}
+//#endregion
+export { o as RepeaterField };

package/dist/components/inputs/async-select.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/input/index.cjs"),i=require("../ui/popover/index.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");function ee(e,t){let[n,r]=a.useState(e);return a.useEffect(()=>{let n=window.setTimeout(()=>{r(e)},t);return()=>{window.clearTimeout(n)}},[t,e]),n}function c(e){return typeof e==`object`&&!!e&&`options`in e}function l(e){if(!e||e.length===0)return[];let t=e[0];return c(t)?e:[{options:e}]}function u(e){return e.flatMap(e=>e.options)}function te(e){return typeof e.label==`string`||typeof e.label==`number`?String(e.label).toLowerCase():e.value.toLowerCase()}function ne(e,t){let n=e.trim().toLowerCase();return n?!t.some(e=>e.value.toLowerCase()===n||te(e)===n):!1}function re(e,t,n,r,i){if(e)return t?.value===e?t:i?.value===e?i:[...n,...r].find(t=>t.value===e)}function d(...e){let t=new Map;return e.forEach(e=>{e?.forEach(e=>{t.set(e.value,e)})}),Array.from(t.values())}function f(e,t){let n=new Map(t.map(e=>[e.value,e]));return e.map(e=>n.get(e)).filter(e=>!!e)}function ie(e,t,n){let r=e.get(t);if(r){if(Number.isFinite(n)&&Date.now()-r.createdAt>n){e.delete(t);return}return r.groups}}function ae(e,t,n){e.set(t,{groups:n,createdAt:Date.now()})}function oe(e){return e.trim().toLowerCase()}function p({className:e,children:n}){return(0,s.jsx)(`div`,{"data-slot":`async-select-state`,className:t.cn(`rounded-[min(var(--radius-xl),16px)] border px-3 py-3 text-sm text-muted-foreground`,e),children:n})}function m(e){return typeof e.label==`string`||typeof e.label==`number`?String(e.label):e.value}function se({option:e,selected:n,renderOption:r,optionClassName:i,onSelect:a}){return(0,s.jsxs)(`button`,{type:`button`,disabled:e.disabled,"data-slot":`async-select-option`,"data-selected":n||void 0,"data-disabled":e.disabled||void 0,className:t.cn(`flex w-full items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50`,i),onClick:()=>a(e),children:[(0,s.jsx)(`span`,{className:`flex size-4 shrink-0 items-center justify-center`,children:n&&(0,s.jsx)(o.CheckIcon,{className:`size-4`})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1`,children:r?.(e,{selected:n})??(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:e.label}),e.description&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:e.description}),e.disabled&&e.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:e.disabledReason})]})})]})}function ce({search:e,isCreating:t,label:n,onCreate:r}){return(0,s.jsxs)(`button`,{type:`button`,disabled:t,"data-slot":`async-select-create`,className:`flex w-full items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-dashed px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50`,onClick:r,children:[(0,s.jsx)(`span`,{className:`flex size-4 shrink-0 items-center justify-center`,children:t?(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}):(0,s.jsx)(o.PlusIcon,{className:`size-4`})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:n?.(e)??`Create "${e.trim()}"`})]})}function h({className:e,value:c,selectedOption:te,onValueChange:d,loadOptions:f,loadSelectedOption:m,defaultOptions:h,disabled:g=!1,clearable:le=!0,cacheOptions:_=!0,cacheTtl:ue=1/0,debounceMs:v=250,minSearchLength:y=0,labels:b,renderOption:de,renderValue:x,renderLoading:S,renderEmpty:fe,renderError:C,renderMinSearch:pe,onCreateOption:me,createOptionLabel:he,showCreateOption:ge,triggerClassName:_e,contentClassName:ve,searchClassName:ye,optionClassName:be,invalid:w,...xe}){let T=a.useMemo(()=>l(h),[h]),Se=a.useMemo(()=>u(T),[T]),[E,D]=a.useState(!1),[O,k]=a.useState(``),[A,j]=a.useState(T),[M,Ce]=a.useState(null),[N,P]=a.useState(!1),[F,I]=a.useState(!1),[L,R]=a.useState(!1),z=a.useRef(new Map),B=a.useRef(0),we=a.useRef(0),V=ee(O,v).trim(),H=a.useMemo(()=>u(A),[A]),U=a.useMemo(()=>({search:O,minSearchLength:y,options:H}),[H,y,O]),W=re(c,te,H,Se,M),Te=le&&!!c&&!g,G=V.length<y,K=!G&&!!me&&(ge??ne)(O,H);a.useEffect(()=>{z.current.clear()},[f]),a.useEffect(()=>{j(T)},[T]),a.useEffect(()=>{if(!c||W||!m)return;let e=new AbortController,t=++we.current;async function n(){let n=await m?.(c,e.signal);!e.signal.aborted&&t===we.current&&Ce(n??null)}return n(),()=>{e.abort()}},[W,m,c]),a.useEffect(()=>{if(!E)return;if(G){j(T),P(!1),R(!1);return}let e=_?ie(z.current,V,ue):void 0;if(e){j(e),P(!1),R(!1);return}let t=new AbortController,n=++B.current;async function r(){P(!0),R(!1);try{let e=l(await f(V,t.signal));!t.signal.aborted&&n===B.current&&(_&&ae(z.current,V,e),j(e))}catch{!t.signal.aborted&&n===B.current&&(R(!0),j([]))}finally{!t.signal.aborted&&n===B.current&&P(!1)}}return r(),()=>{t.abort()}},[_,ue,f,E,T,V,G]);let q=e=>{e.disabled||(d?.(e.value,e),D(!1),k(``))},J=()=>{d?.(void 0),k(``)},Ee=e=>{t.stopInteractivePropagation(e),J()},Y=e=>{if(!g){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),D(!0);return}(e.key===`Backspace`||e.key===`Delete`)&&c&&(e.preventDefault(),J())}},X=async()=>{if(!(!me||!O.trim()||G)){I(!0);try{let e=await me(O.trim()),t=oe(O);j(t=>[{options:[e]},...t]),_&&t&&ae(z.current,t,[{options:[e]}]),d?.(e.value,e),k(``),D(!1)}finally{I(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-select`,className:t.cn(`w-full`,e),...xe,children:(0,s.jsxs)(i.Popover,{open:E,onOpenChange:D,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:g,"aria-expanded":E,"aria-invalid":w||void 0,"data-slot":`async-select-trigger`,className:t.cn(`min-h-11 w-full justify-between`,_e),onKeyDown:Y}),children:[(0,s.jsx)(`span`,{className:`min-w-0 flex-1 text-left`,children:W?(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:x?.(W)??W.label}),W.disabled&&W.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:W.disabledReason})]}):(0,s.jsx)(`span`,{className:`truncate`,children:b?.placeholder??`Select`})}),(0,s.jsxs)(`span`,{className:`ml-2 flex shrink-0 items-center gap-1`,children:[Te&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,className:`rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground`,"aria-label":b?.clear??`Clear`,onClick:Ee,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),J())},children:(0,s.jsx)(o.XIcon,{className:`size-3.5`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5`,ve),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{"data-slot":`async-select-search`,value:O,onChange:e=>k(e.target.value),placeholder:b?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,ye)})]}),(0,s.jsxs)(`div`,{className:`max-h-64 space-y-1 overflow-y-auto pr-1`,children:[G&&H.length===0&&(pe?.(U)??(0,s.jsx)(p,{children:b?.minSearchLength?.(y)??`Type at least ${y} characters`})),N&&(S?.(U)??(0,s.jsx)(p,{children:(0,s.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}),b?.loading??`Loading...`]})})),!N&&L&&(C?.(U)??(0,s.jsx)(p,{className:`text-destructive`,children:b?.error??`Could not load options`})),!N&&!L&&!G&&H.length===0&&!K&&(fe?.(U)??(0,s.jsx)(p,{children:b?.empty??`No options found`})),!N&&!L&&K&&(0,s.jsx)(ce,{search:O,isCreating:F,label:he,onCreate:X}),!N&&!L&&A.map((e,t)=>(0,s.jsxs)(`div`,{children:[e.label&&(0,s.jsx)(`div`,{className:`sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground`,children:e.label}),e.options.map(e=>(0,s.jsx)(se,{option:e,selected:e.value===c,renderOption:de,optionClassName:be,onSelect:q},e.value))]},t))]})]})]})})}function g({className:e,value:c,selectedOptions:te,onValueChange:re,loadOptions:h,loadSelectedOptions:g,defaultOptions:le,disabled:_=!1,clearable:ue=!0,cacheOptions:v=!0,cacheTtl:y=1/0,closeOnSelect:b=!1,debounceMs:de=250,minSearchLength:x=0,maxSelected:S,showSelectAll:fe=!1,labels:C,renderOption:pe,renderValue:me,renderTag:he,renderLoading:ge,renderEmpty:_e,renderError:ve,renderMinSearch:ye,renderMaxSelected:be,onCreateOption:w,createOptionLabel:xe,showCreateOption:T,triggerClassName:Se,contentClassName:E,searchClassName:D,optionClassName:O,tagClassName:k,invalid:A,...j}){let M=a.useMemo(()=>c??[],[c]),Ce=M.join(`|`),N=a.useMemo(()=>l(le),[le]),P=a.useMemo(()=>u(N),[N]),[F,I]=a.useState(!1),[L,R]=a.useState(``),[z,B]=a.useState(N),[we,V]=a.useState([]),[H,U]=a.useState(!1),[W,Te]=a.useState(!1),[G,K]=a.useState(!1),q=a.useRef(new Map),J=a.useRef(0),Ee=a.useRef(0),Y=ee(L,de).trim(),X=a.useMemo(()=>u(z),[z]),De=a.useMemo(()=>new Set(M),[M]),Z=a.useMemo(()=>d(te,we,X,P),[P,X,we,te]),Oe=a.useMemo(()=>f(M,Z),[Z,M]),Q=a.useMemo(()=>({search:L,minSearchLength:x,options:X,selectedCount:M.length,maxSelected:S}),[X,S,x,L,M.length]),ke=M.length>0,Ae=ue&&ke&&!_,je=typeof S==`number`&&M.length>=S,$=Y.length<x,Me=!$&&!!w&&(T??ne)(L,X),Ne=X.filter(e=>!e.disabled).filter(e=>!De.has(e.value)),Pe=fe&&Ne.length>0&&!je;a.useEffect(()=>{q.current.clear()},[h]),a.useEffect(()=>{B(N)},[N]),a.useEffect(()=>{if(!M.length||!g)return;let e=new Set(Z.map(e=>e.value)),t=M.filter(t=>!e.has(t));if(!t.length)return;let n=new AbortController,r=++Ee.current;async function i(){let e=await g?.(t,n.signal);!n.signal.aborted&&r===Ee.current&&e&&V(t=>d(t,e))}return i(),()=>{n.abort()}},[Z,g,Ce,M]),a.useEffect(()=>{if(!F)return;if($){B(N),U(!1),K(!1);return}let e=v?ie(q.current,Y,y):void 0;if(e){B(e),U(!1),K(!1);return}let t=new AbortController,n=++J.current;async function r(){U(!0),K(!1);try{let e=l(await h(Y,t.signal));!t.signal.aborted&&n===J.current&&(v&&ae(q.current,Y,e),B(e))}catch{!t.signal.aborted&&n===J.current&&(K(!0),B([]))}finally{!t.signal.aborted&&n===J.current&&U(!1)}}return r(),()=>{t.abort()}},[v,y,h,F,N,Y,$]);let Fe=(e,t)=>{re?.(e,f(e,t))},Ie=e=>{Fe(M.filter(t=>t!==e),Z)},Le=e=>{e.disabled||(Fe(De.has(e.value)?M.filter(t=>t!==e.value):je?M:[...M,e.value],d(Z,[e])),b&&(I(!1),R(``)))},Re=(e,n)=>{e.key!==`Enter`&&e.key!==` `&&e.key!==`Backspace`&&e.key!==`Delete`||(e.preventDefault(),t.stopInteractivePropagation(e),Ie(n.value))},ze=e=>{if(!_){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),I(!0);return}L.length>0||M.length===0||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),Ie(M[M.length-1]))}},Be=()=>{if(!Ne.length)return;let e=typeof S==`number`?Math.max(S-M.length,0):Ne.length,t=Ne.slice(0,e);Fe(Array.from(new Set([...M,...t.map(e=>e.value)])),d(Z,t))},Ve=e=>{Ie(e.value)},He=()=>{re?.([],[]),R(``)},Ue=e=>{t.stopInteractivePropagation(e),He()},We=async()=>{if(!(!w||!L.trim()||$)){Te(!0);try{let e=await w(L.trim()),t=oe(L),n=d(Z,[e]),r=De.has(e.value)||je?M:[...M,e.value];B(t=>[{options:[e]},...t]),v&&t&&ae(q.current,t,[{options:[e]}]),Fe(r,n),R(``),b&&I(!1)}finally{Te(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-multi-select`,className:t.cn(`w-full`,e),...j,children:(0,s.jsxs)(i.Popover,{open:F,onOpenChange:I,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:_,"aria-expanded":F,"aria-invalid":A||void 0,"data-slot":`async-select-trigger`,className:t.cn(`min-h-11 w-full justify-between`,Se),onKeyDown:ze}),children:[(0,s.jsx)(`span`,{className:`flex min-w-0 flex-1 flex-wrap gap-1 text-left`,children:Oe.length>0?Oe.map(e=>(0,s.jsxs)(`span`,{"data-slot":`async-select-tag`,className:t.cn(`inline-flex max-w-full items-center gap-1 rounded-full border px-2 py-1 text-xs text-foreground`,k),children:[(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:he?.(e,{remove:()=>Ve(e)})??me?.(e)??e.label}),e.disabled&&e.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-[11px] text-muted-foreground`,children:e.disabledReason})]}),!_&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-tag-remove`,className:`rounded-full text-muted-foreground transition-colors hover:text-foreground`,"aria-label":`Remove ${m(e)}`,onClick:n=>{t.stopInteractivePropagation(n),Ve(e)},onKeyDown:t=>Re(t,e),children:(0,s.jsx)(o.XIcon,{className:`size-3`})})]},e.value)):(0,s.jsx)(`span`,{className:`truncate text-muted-foreground`,children:C?.placeholder??`Select`})}),(0,s.jsxs)(`span`,{className:`ml-2 flex shrink-0 items-center gap-1`,children:[Ae&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-clear`,className:`rounded-full border p-1 text-muted-foreground transition-colors hover:text-foreground`,"aria-label":C?.clearAll??C?.clear??`Clear all`,onClick:Ue,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),He())},children:(0,s.jsx)(o.XIcon,{className:`size-3.5`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5`,E),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{"data-slot":`async-select-search`,value:L,onChange:e=>R(e.target.value),placeholder:C?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,D)})]}),(0,s.jsxs)(`div`,{"data-slot":`async-select-meta`,className:`flex flex-wrap items-center justify-between gap-2 rounded-[min(var(--radius-xl),16px)] border px-3 py-2 text-xs text-muted-foreground`,children:[ke&&C?.selectedCount&&(0,s.jsx)(`span`,{children:C.selectedCount(M.length)}),je&&(be?.(Q)??(0,s.jsx)(`span`,{children:C?.maxSelected?.(S??M.length)??`Maximum ${S} selected`})),(0,s.jsxs)(`div`,{className:`ml-auto flex items-center gap-2`,children:[Pe&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,className:`rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background`,onClick:Be,children:C?.selectAll??`Select all`}),Ae&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,className:`rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background`,onClick:()=>re?.([],[]),children:C?.clearAll??C?.clear??`Clear all`})]})]}),(0,s.jsxs)(`div`,{className:`max-h-64 space-y-1 overflow-y-auto pr-1`,children:[$&&X.length===0&&(ye?.(Q)??(0,s.jsx)(p,{children:C?.minSearchLength?.(x)??`Type at least ${x} characters`})),H&&(ge?.(Q)??(0,s.jsx)(p,{children:(0,s.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}),C?.loading??`Loading...`]})})),!H&&G&&(ve?.(Q)??(0,s.jsx)(p,{className:`text-destructive`,children:C?.error??`Could not load options`})),!H&&!G&&!$&&X.length===0&&!Me&&(_e?.(Q)??(0,s.jsx)(p,{children:C?.empty??`No options found`})),!H&&!G&&Me&&(0,s.jsx)(ce,{search:L,isCreating:W,label:xe,onCreate:We}),!H&&!G&&z.map((e,t)=>(0,s.jsxs)(`div`,{children:[e.label&&(0,s.jsx)(`div`,{className:`sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground`,children:(0,s.jsx)(`span`,{"data-slot":`async-select-group-label`,children:e.label})}),e.options.map(e=>(0,s.jsx)(se,{option:e,selected:De.has(e.value),renderOption:pe,optionClassName:O,onSelect:Le},e.value))]},t))]})]})]})})}exports.AsyncMultiSelect=g,exports.AsyncSelect=h;

package/dist/components/inputs/async-select.d.ts

@@ -0,0 +1,109 @@
+import * as React from "react";
+export type AsyncSelectOption<TValue extends string = string, TData = unknown> = {
+    value: TValue;
+    label: React.ReactNode;
+    disabled?: boolean;
+    disabledReason?: React.ReactNode;
+    description?: React.ReactNode;
+    data?: TData;
+};
+export type AsyncSelectOptionGroup<TValue extends string = string, TData = unknown, TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>> = {
+    label?: React.ReactNode;
+    options: TOption[];
+};
+export type AsyncSelectOptionsResult<TValue extends string = string, TData = unknown, TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>> = TOption[] | AsyncSelectOptionGroup<TValue, TData, TOption>[];
+export type AsyncSelectRenderState<TValue extends string = string, TData = unknown, TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>> = {
+    search: string;
+    minSearchLength: number;
+    options: TOption[];
+    selectedCount?: number;
+    maxSelected?: number;
+};
+export type AsyncSelectStateRenderer<TValue extends string = string, TData = unknown, TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>> = (state: AsyncSelectRenderState<TValue, TData, TOption>) => React.ReactNode;
+export type AsyncSelectLabels = {
+    placeholder?: string;
+    searchPlaceholder?: string;
+    loading?: string;
+    creating?: string;
+    empty?: string;
+    error?: string;
+    clear?: string;
+    clearAll?: string;
+    selectAll?: string;
+    minSearchLength?: (minSearchLength: number) => string;
+    maxSelected?: (maxSelected: number) => string;
+    selectedCount?: (count: number) => string;
+};
+export type AsyncSelectProps<TValue extends string = string, TData = unknown, TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>> = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: TValue;
+    selectedOption?: TOption | null;
+    onValueChange?: (value: TValue | undefined, option?: TOption) => void;
+    loadOptions: (search: string, signal?: AbortSignal) => Promise<AsyncSelectOptionsResult<TValue, TData, TOption>>;
+    loadSelectedOption?: (value: TValue, signal?: AbortSignal) => Promise<TOption | null | undefined>;
+    defaultOptions?: AsyncSelectOptionsResult<TValue, TData, TOption>;
+    disabled?: boolean;
+    clearable?: boolean;
+    cacheOptions?: boolean;
+    cacheTtl?: number;
+    debounceMs?: number;
+    minSearchLength?: number;
+    labels?: AsyncSelectLabels;
+    renderOption?: (option: TOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    renderValue?: (option: TOption) => React.ReactNode;
+    renderLoading?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    renderEmpty?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    renderError?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    renderMinSearch?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    onCreateOption?: (search: string) => Promise<TOption> | TOption;
+    createOptionLabel?: (search: string) => React.ReactNode;
+    showCreateOption?: (search: string, options: TOption[]) => boolean;
+    triggerClassName?: string;
+    contentClassName?: string;
+    searchClassName?: string;
+    optionClassName?: string;
+    invalid?: boolean;
+};
+export type AsyncMultiSelectProps<TValue extends string = string, TData = unknown, TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>> = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: TValue[];
+    selectedOptions?: TOption[];
+    onValueChange?: (value: TValue[], options: TOption[]) => void;
+    loadOptions: (search: string, signal?: AbortSignal) => Promise<AsyncSelectOptionsResult<TValue, TData, TOption>>;
+    loadSelectedOptions?: (values: TValue[], signal?: AbortSignal) => Promise<TOption[]>;
+    defaultOptions?: AsyncSelectOptionsResult<TValue, TData, TOption>;
+    disabled?: boolean;
+    clearable?: boolean;
+    cacheOptions?: boolean;
+    cacheTtl?: number;
+    closeOnSelect?: boolean;
+    debounceMs?: number;
+    minSearchLength?: number;
+    maxSelected?: number;
+    showSelectAll?: boolean;
+    labels?: AsyncSelectLabels;
+    renderOption?: (option: TOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    renderValue?: (option: TOption) => React.ReactNode;
+    renderTag?: (option: TOption, state: {
+        remove: () => void;
+    }) => React.ReactNode;
+    renderLoading?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    renderEmpty?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    renderError?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    renderMinSearch?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    renderMaxSelected?: AsyncSelectStateRenderer<TValue, TData, TOption>;
+    onCreateOption?: (search: string) => Promise<TOption> | TOption;
+    createOptionLabel?: (search: string) => React.ReactNode;
+    showCreateOption?: (search: string, options: TOption[]) => boolean;
+    triggerClassName?: string;
+    contentClassName?: string;
+    searchClassName?: string;
+    optionClassName?: string;
+    tagClassName?: string;
+    invalid?: boolean;
+};
+declare function AsyncSelect<TValue extends string = string, TData = unknown, TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>>({ className, value, selectedOption, onValueChange, loadOptions, loadSelectedOption, defaultOptions, disabled, clearable, cacheOptions, cacheTtl, debounceMs, minSearchLength, labels, renderOption, renderValue, renderLoading, renderEmpty, renderError, renderMinSearch, onCreateOption, createOptionLabel, showCreateOption, triggerClassName, contentClassName, searchClassName, optionClassName, invalid, ...props }: AsyncSelectProps<TValue, TData, TOption>): React.JSX.Element;
+declare function AsyncMultiSelect<TValue extends string = string, TData = unknown, TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>>({ className, value, selectedOptions, onValueChange, loadOptions, loadSelectedOptions, defaultOptions, disabled, clearable, cacheOptions, cacheTtl, closeOnSelect, debounceMs, minSearchLength, maxSelected, showSelectAll, labels, renderOption, renderValue, renderTag, renderLoading, renderEmpty, renderError, renderMinSearch, renderMaxSelected, onCreateOption, createOptionLabel, showCreateOption, triggerClassName, contentClassName, searchClassName, optionClassName, tagClassName, invalid, ...props }: AsyncMultiSelectProps<TValue, TData, TOption>): React.JSX.Element;
+export { AsyncSelect, AsyncMultiSelect };