@tesouro/embedded-components-react 0.5.189 → 0.5.190

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index43.js

@@ -1,56 +1,374 @@
-import { FieldRequirement as e, Input as t, Label as n } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { mergeBillFormFieldsLabels as r } from "./index42.js";
-import { useId as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Button as e, FieldRequirement as t, Input as n, InputGroup as r, InputGroupAddon as i, InputGroupInput as a, Label as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Tooltip as f, TooltipContent as p, TooltipProvider as m, TooltipTrigger as h, Typography as g, cn as _ } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { mergeLineItemsSectionLabels as v } from "./index42.js";
+import { useId as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { CircleAlert as S, Minus as C, Plus as w, Trash2 as T, X as E } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index43.js
-var s = 255, c = {
-	invoiceDate: e.Required,
-	dueDate: e.Required,
-	invoiceNumber: e.Required,
-	poNumber: e.Optional
+var D = {
+	description: t.Required,
+	glCode: t.Optional,
+	quantity: t.Required,
+	price: t.Required,
+	amount: t.Required
+}, O = {
+	discount: t.Optional,
+	tax: t.Optional,
+	total: t.Required
 };
-function l({ values: l, errors: u, onChange: d, disabled: f, testId: p, labels: m }) {
-	let h = r(m), g = i(), _ = (r, i, p) => {
-		let m = `${g}-${r}`, _ = `${m}-error`, v = u?.[r], y = c[r];
-		return /* @__PURE__ */ o("div", {
-			className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-			children: [
-				/* @__PURE__ */ a(n, {
-					htmlFor: m,
-					requirement: y,
-					labels: h.fieldMarkers,
-					children: i
-				}),
-				/* @__PURE__ */ a(t, {
-					id: m,
-					type: p,
-					value: l[r],
-					disabled: f,
-					"aria-required": y === e.Required || void 0,
-					maxLength: r === "poNumber" ? s : void 0,
-					"aria-invalid": v ? !0 : void 0,
-					"aria-describedby": v ? _ : void 0,
-					onChange: (e) => d({ [r]: e.target.value })
-				}),
-				v ? /* @__PURE__ */ a("p", {
-					id: _,
-					className: "ttw:text-sm ttw:text-destructive",
-					children: v
-				}) : null
-			]
-		});
+function k({ items: t, glCodeOptions: k, glCodeDisabled: A, glCodeUnavailableMessage: j, discount: M, onDiscountChange: N, onDiscountBlur: P, tax: F, onTaxChange: I, onTaxBlur: L, total: R, onTotalChange: z, onTotalBlur: B, onAddLineItem: V, errors: H, totalsErrors: U, disabled: W, testId: G, labels: K }) {
+	let q = v(K), J = y(), Y = t.length > 1, X = j ? `${J}-gl-code-unavailable` : void 0, Z = (e) => `${J}-${e}-error`, Q = (e) => {
+		let t = U?.[e];
+		return t ? /* @__PURE__ */ b("p", {
+			id: Z(e),
+			className: "ttw:text-sm ttw:text-destructive ttw:text-right",
+			children: t
+		}) : null;
 	};
-	return /* @__PURE__ */ o("div", {
-		className: "ttw:flex ttw:flex-col ttw:gap-4",
-		"data-testid": p,
-		children: [/* @__PURE__ */ o("div", {
-			className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
-			children: [_("invoiceDate", h.invoiceDate, "date"), _("dueDate", h.dueDate, "date")]
-		}), /* @__PURE__ */ o("div", {
-			className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
-			children: [_("invoiceNumber", h.invoiceNumber), _("poNumber", h.poNumber)]
-		})]
+	return /* @__PURE__ */ x("section", {
+		className: "ttw:flex ttw:flex-col ttw:gap-3",
+		"data-testid": G,
+		children: [
+			/* @__PURE__ */ b(g, {
+				component: "h2",
+				variant: "h6",
+				className: "ttw:font-semibold",
+				children: q.heading
+			}),
+			/* @__PURE__ */ b("p", {
+				className: "ttw:text-sm ttw:text-muted-foreground",
+				children: q.helpText
+			}),
+			j ? /* @__PURE__ */ b("span", {
+				id: X,
+				className: "ttw:sr-only",
+				children: j
+			}) : null,
+			t.map((t, g) => {
+				let v = `${J}-${t.id}`, y = H?.[t.id], O = (e) => `${v}-${e}-error`, M = (e) => y?.[e], N = (e) => {
+					let t = M(e);
+					return t ? /* @__PURE__ */ b("p", {
+						id: O(e),
+						className: "ttw:text-sm ttw:text-destructive",
+						children: t
+					}) : null;
+				};
+				return /* @__PURE__ */ b("div", {
+					className: "ttw:rounded-lg ttw:border ttw:border-border ttw:bg-muted/30 ttw:p-4",
+					children: /* @__PURE__ */ x("div", {
+						className: "ttw:@container/line-item ttw:flex ttw:flex-col ttw:gap-3",
+						children: [
+							/* @__PURE__ */ x("div", {
+								className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-2",
+								children: [/* @__PURE__ */ x("div", {
+									className: "ttw:flex ttw:items-center ttw:gap-2",
+									children: [Y ? /* @__PURE__ */ x("span", {
+										className: "ttw:text-sm ttw:text-muted-foreground",
+										children: [g + 1, "."]
+									}) : null, /* @__PURE__ */ b(o, {
+										htmlFor: `${v}-description`,
+										requirement: D.description,
+										labels: q.fieldMarkers,
+										children: q.description
+									})]
+								}), Y ? /* @__PURE__ */ b(e, {
+									type: "button",
+									variant: "ghost",
+									size: "icon",
+									disabled: W,
+									"aria-label": q.removeLineItem(g + 1),
+									onClick: t.onRemove,
+									children: /* @__PURE__ */ b(T, { className: "ttw:size-4" })
+								}) : null]
+							}),
+							/* @__PURE__ */ x("div", {
+								className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+								children: [/* @__PURE__ */ b(n, {
+									id: `${v}-description`,
+									placeholder: q.descriptionPlaceholder,
+									value: t.description,
+									disabled: W,
+									"aria-required": !0,
+									"aria-invalid": M("description") ? !0 : void 0,
+									"aria-describedby": M("description") ? O("description") : void 0,
+									onChange: (e) => t.onChange({ description: e.target.value })
+								}), N("description")]
+							}),
+							/* @__PURE__ */ x("div", {
+								className: "ttw:grid ttw:grid-cols-1 ttw:@sm/line-item:grid-cols-3 ttw:@4xl/line-item:grid-cols-12 ttw:gap-3",
+								children: [
+									/* @__PURE__ */ x("div", {
+										className: "ttw:col-span-1 ttw:@sm/line-item:col-span-3 ttw:@4xl/line-item:col-span-5 ttw:flex ttw:flex-col ttw:gap-1.5",
+										children: [
+											/* @__PURE__ */ x("div", {
+												className: "ttw:flex ttw:items-center ttw:gap-1",
+												children: [/* @__PURE__ */ b(o, {
+													htmlFor: `${v}-gl-code`,
+													requirement: D.glCode,
+													labels: q.fieldMarkers,
+													children: q.glCode
+												}), j ? /* @__PURE__ */ b(m, { children: /* @__PURE__ */ x(f, { children: [/* @__PURE__ */ b(h, {
+													type: "button",
+													className: "ttw:inline-flex ttw:shrink-0 ttw:cursor-help ttw:text-muted-foreground",
+													"aria-label": j,
+													children: /* @__PURE__ */ b(S, { className: "ttw:size-3.5" })
+												}), /* @__PURE__ */ b(p, { children: j })] }) }) : null]
+											}),
+											/* @__PURE__ */ x("div", {
+												className: "ttw:relative",
+												children: [/* @__PURE__ */ x(s, {
+													value: t.glCode,
+													disabled: W || A,
+													onValueChange: (e) => t.onChange({ glCode: e }),
+													children: [/* @__PURE__ */ b(u, {
+														id: `${v}-gl-code`,
+														className: _("ttw:w-full", t.glCode && "ttw:[&>svg:last-child]:hidden!"),
+														"aria-invalid": M("glCode") ? !0 : void 0,
+														"aria-describedby": [M("glCode") ? O("glCode") : null, X].filter(Boolean).join(" ") || void 0,
+														children: /* @__PURE__ */ b(d, { placeholder: q.glCodePlaceholder })
+													}), /* @__PURE__ */ b(c, { children: k.map((e) => /* @__PURE__ */ b(l, {
+														value: e.value,
+														children: e.label
+													}, e.value)) })]
+												}), t.glCode && !(W || A) ? /* @__PURE__ */ b(e, {
+													type: "button",
+													variant: "ghost",
+													size: "icon-sm",
+													"aria-label": q.glCodeClear,
+													className: "ttw:absolute ttw:top-1/2 ttw:right-1 ttw:-translate-y-1/2",
+													onPointerDown: (e) => {
+														e.preventDefault(), e.stopPropagation();
+													},
+													onClick: (e) => {
+														e.preventDefault(), e.stopPropagation(), t.onChange({ glCode: "" });
+													},
+													children: /* @__PURE__ */ b(E, {
+														className: "ttw:size-4",
+														"aria-hidden": !0
+													})
+												}) : null]
+											}),
+											N("glCode")
+										]
+									}),
+									/* @__PURE__ */ x("div", {
+										className: "ttw:col-span-1 ttw:@4xl/line-item:col-span-3 ttw:flex ttw:flex-col ttw:gap-1.5",
+										children: [
+											/* @__PURE__ */ b(o, {
+												htmlFor: `${v}-quantity`,
+												requirement: D.quantity,
+												labels: q.fieldMarkers,
+												children: q.quantity
+											}),
+											/* @__PURE__ */ x(r, {
+												className: "ttw:h-9 ttw:rounded-md ttw:border ttw:border-input ttw:shadow-xs ttw:has-[:focus-visible]:border-ring ttw:has-[:focus-visible]:ring-[3px] ttw:has-[:focus-visible]:ring-ring/50 ttw:has-[[aria-invalid=true]]:border-destructive ttw:has-[[aria-invalid=true]]:ring-destructive/20",
+												children: [
+													/* @__PURE__ */ b(e, {
+														type: "button",
+														variant: "ghost",
+														size: "icon",
+														className: "ttw:h-full ttw:shrink-0 ttw:rounded-r-none",
+														disabled: W,
+														"aria-label": q.decreaseQuantity(g + 1),
+														onClick: () => t.onQuantityStep(-1),
+														children: /* @__PURE__ */ b(C, { className: "ttw:size-3.5" })
+													}),
+													/* @__PURE__ */ b(a, {
+														id: `${v}-quantity`,
+														inputMode: "decimal",
+														className: "ttw:min-w-0 ttw:flex-1 ttw:rounded-none ttw:border-0 ttw:text-center ttw:shadow-none ttw:focus-visible:ring-0",
+														value: t.quantity,
+														disabled: W,
+														"aria-required": !0,
+														"aria-invalid": M("quantity") ? !0 : void 0,
+														"aria-describedby": M("quantity") ? O("quantity") : void 0,
+														onChange: (e) => t.onChange({ quantity: e.target.value })
+													}),
+													/* @__PURE__ */ b(e, {
+														type: "button",
+														variant: "ghost",
+														size: "icon",
+														className: "ttw:h-full ttw:shrink-0 ttw:rounded-l-none",
+														disabled: W,
+														"aria-label": q.increaseQuantity(g + 1),
+														onClick: () => t.onQuantityStep(1),
+														children: /* @__PURE__ */ b(w, { className: "ttw:size-3.5" })
+													})
+												]
+											}),
+											N("quantity")
+										]
+									}),
+									/* @__PURE__ */ x("div", {
+										className: "ttw:col-span-1 ttw:@4xl/line-item:col-span-2 ttw:flex ttw:flex-col ttw:gap-1.5",
+										children: [
+											/* @__PURE__ */ b(o, {
+												htmlFor: `${v}-price`,
+												requirement: D.price,
+												labels: q.fieldMarkers,
+												children: q.price
+											}),
+											/* @__PURE__ */ x(r, { children: [/* @__PURE__ */ b(i, {
+												align: "inline-start",
+												"aria-hidden": !0,
+												children: q.currencySymbol
+											}), /* @__PURE__ */ b(a, {
+												id: `${v}-price`,
+												"data-has-start-addon": !0,
+												inputMode: "decimal",
+												className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
+												value: t.price,
+												disabled: W,
+												"aria-required": !0,
+												"aria-invalid": M("price") ? !0 : void 0,
+												"aria-describedby": M("price") ? O("price") : void 0,
+												onChange: (e) => t.onChange({ price: e.target.value }),
+												onBlur: () => t.onBlur?.("price")
+											})] }),
+											N("price")
+										]
+									}),
+									/* @__PURE__ */ x("div", {
+										className: "ttw:col-span-1 ttw:@4xl/line-item:col-span-2 ttw:flex ttw:flex-col ttw:gap-1.5",
+										children: [
+											/* @__PURE__ */ b(o, {
+												htmlFor: `${v}-amount`,
+												requirement: D.amount,
+												labels: q.fieldMarkers,
+												children: q.amount
+											}),
+											/* @__PURE__ */ x(r, { children: [/* @__PURE__ */ b(i, {
+												align: "inline-start",
+												"aria-hidden": !0,
+												children: q.currencySymbol
+											}), /* @__PURE__ */ b(a, {
+												id: `${v}-amount`,
+												"data-has-start-addon": !0,
+												inputMode: "decimal",
+												className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
+												value: t.amount,
+												disabled: W,
+												"aria-required": !0,
+												"aria-invalid": M("amount") ? !0 : void 0,
+												"aria-describedby": M("amount") ? O("amount") : void 0,
+												onChange: (e) => t.onChange({ amount: e.target.value }),
+												onBlur: () => t.onBlur?.("amount")
+											})] }),
+											N("amount")
+										]
+									})
+								]
+							})
+						]
+					})
+				}, t.id);
+			}),
+			/* @__PURE__ */ b(e, {
+				type: "button",
+				variant: "link",
+				disabled: W,
+				className: "ttw:self-start",
+				onClick: V,
+				children: q.addLineItem
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:border-t ttw:border-border ttw:pt-3",
+				children: [
+					/* @__PURE__ */ x("div", {
+						className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-4",
+						children: [/* @__PURE__ */ b(o, {
+							htmlFor: `${J}-discount`,
+							requirement: O.discount,
+							labels: q.fieldMarkers,
+							children: q.discount
+						}), /* @__PURE__ */ x("div", {
+							className: "ttw:flex ttw:flex-col ttw:items-end ttw:gap-1.5",
+							children: [/* @__PURE__ */ x(r, {
+								className: "ttw:w-36",
+								children: [/* @__PURE__ */ b(i, {
+									align: "inline-start",
+									"aria-hidden": !0,
+									children: q.currencySymbol
+								}), /* @__PURE__ */ b(a, {
+									id: `${J}-discount`,
+									"data-has-start-addon": !0,
+									inputMode: "decimal",
+									className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
+									value: M,
+									disabled: W,
+									"aria-invalid": U?.discount ? !0 : void 0,
+									"aria-describedby": U?.discount ? Z("discount") : void 0,
+									onChange: (e) => N(e.target.value),
+									onBlur: P
+								})]
+							}), Q("discount")]
+						})]
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-4",
+						children: [/* @__PURE__ */ b(o, {
+							htmlFor: `${J}-tax`,
+							requirement: O.tax,
+							labels: q.fieldMarkers,
+							children: q.tax
+						}), /* @__PURE__ */ x("div", {
+							className: "ttw:flex ttw:flex-col ttw:items-end ttw:gap-1.5",
+							children: [/* @__PURE__ */ x(r, {
+								className: "ttw:w-36",
+								children: [/* @__PURE__ */ b(i, {
+									align: "inline-start",
+									"aria-hidden": !0,
+									children: q.currencySymbol
+								}), /* @__PURE__ */ b(a, {
+									id: `${J}-tax`,
+									"data-has-start-addon": !0,
+									inputMode: "decimal",
+									className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
+									value: F,
+									disabled: W,
+									"aria-invalid": U?.tax ? !0 : void 0,
+									"aria-describedby": U?.tax ? Z("tax") : void 0,
+									onChange: (e) => I(e.target.value),
+									onBlur: L
+								})]
+							}), Q("tax")]
+						})]
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-4",
+						children: [/* @__PURE__ */ b(o, {
+							htmlFor: `${J}-total`,
+							className: "ttw:font-semibold",
+							requirement: O.total,
+							labels: q.fieldMarkers,
+							children: q.totalAmount
+						}), /* @__PURE__ */ x("div", {
+							className: "ttw:flex ttw:flex-col ttw:items-end ttw:gap-1.5",
+							children: [/* @__PURE__ */ x(r, {
+								className: "ttw:w-36",
+								children: [/* @__PURE__ */ b(i, {
+									align: "inline-start",
+									"aria-hidden": !0,
+									children: q.currencySymbol
+								}), /* @__PURE__ */ b(a, {
+									id: `${J}-total`,
+									"data-has-start-addon": !0,
+									inputMode: "decimal",
+									className: "ttw:text-right ttw:font-semibold ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
+									value: R,
+									disabled: W,
+									"aria-required": !0,
+									"aria-invalid": U?.total ? !0 : void 0,
+									"aria-describedby": U?.total ? Z("total") : void 0,
+									onChange: (e) => z(e.target.value),
+									onBlur: B
+								})]
+							}), Q("total")]
+						})]
+					})
+				]
+			})
+		]
 	});
 }
 //#endregion
-export { l as BillFormFields, l as default };
+export { k as LineItemsSection, k as default };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index45.js

@@ -1,18 +1,23 @@
+import { LABEL_LABELS_EN as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index45.js
-function e(e) {
-	let t = [];
-	for (let n of e) {
-		let e = t.at(-1);
-		if (e && e.heading === n.sectionHeading) {
-			e.items = [...e.items, n];
-			continue;
+var t = {
+	fieldLabel: "Select or add vendor",
+	triggerPlaceholder: "Select vendor",
+	placeholder: "Search",
+	loading: "Searching vendors...",
+	emptyResults: "No vendors found",
+	addVendorAction: "Add vendor",
+	fieldMarkers: e
+};
+function n(e) {
+	return {
+		...t,
+		...e,
+		fieldMarkers: {
+			...t.fieldMarkers,
+			...e?.fieldMarkers
 		}
-		t.push({
-			heading: n.sectionHeading,
-			items: [n]
-		});
-	}
-	return t;
+	};
 }
 //#endregion
-export { e as groupBySectionHeading };
+export { t as VENDOR_SEARCH_COMBOBOX_LABELS_EN, n as mergeVendorSearchComboboxLabels };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index46.js

@@ -1,54 +1,96 @@
-import { Button as e, DropdownMenu as t, DropdownMenuContent as n, DropdownMenuGroup as r, DropdownMenuItem as i, DropdownMenuLabel as a, DropdownMenuSeparator as o, DropdownMenuTrigger as s } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { groupBySectionHeading as c } from "./index45.js";
-import { Fragment as l, useId as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { MoreHorizontalIcon as p, MoreVerticalIcon as m } from "lucide-react";
+import { Command as e, CommandGroup as t, CommandInput as n, CommandItem as r, CommandList as i, CommandSeparator as a, FieldRequirement as o, Label as s, Popover as c, PopoverContent as l, PopoverTrigger as u, Skeleton as d, cn as f } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { mergeVendorSearchComboboxLabels as p } from "./index45.js";
+import { useId as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { ChevronDown as v, Plus as y } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index46.js
-function h({ actions: h, triggerLabel: g, placement: _ = "row", testId: v }) {
-	let y = u();
-	if (!h.length) return null;
-	let b = _ === "header", x = _ === "header" || _ === "table", S = b ? p : m, C = c(h);
-	return /* @__PURE__ */ f(t, { children: [/* @__PURE__ */ d(s, {
-		asChild: !0,
-		children: /* @__PURE__ */ d(e, {
-			type: "button",
-			variant: x ? "ghost" : "outline",
-			size: "icon",
-			"aria-label": g,
-			"data-testid": v,
-			onPointerDown: (e) => e.stopPropagation(),
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ d(S, { className: "ttw:size-4" })
-		})
-	}), /* @__PURE__ */ d(n, {
-		align: "end",
-		onPointerDown: (e) => e.stopPropagation(),
-		onClick: (e) => e.stopPropagation(),
-		children: C.map((e, t) => {
-			let n = e.items.map((e) => {
-				let t = e.icon;
-				return /* @__PURE__ */ f(i, {
-					disabled: e.disabled,
-					onClick: e.onSelect,
-					children: [t ? /* @__PURE__ */ d(t, { className: "ttw:size-4" }) : null, e.label]
-				}, e.id);
-			});
-			if (!e.heading) return /* @__PURE__ */ d(l, { children: n }, e.items[0]?.id);
-			let s = `${y}-${t}`;
-			return /* @__PURE__ */ f(l, { children: [
-				t > 0 ? /* @__PURE__ */ d(o, {}) : null,
-				/* @__PURE__ */ d(a, {
-					id: s,
-					className: "ttw:py-1 ttw:text-xs ttw:font-medium ttw:text-muted-foreground",
-					children: e.heading
-				}),
-				/* @__PURE__ */ d(r, {
-					"aria-labelledby": s,
-					children: n
+var b = 5, x = "ttw:min-h-44";
+function S({ query: S, onQueryChange: C, results: w, isLoading: T, onAddVendor: E, testId: D, labels: O }) {
+	let k = p(O), A = m(), [j, M] = h(!1);
+	return /* @__PURE__ */ _("div", {
+		className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+		"data-testid": D,
+		children: [/* @__PURE__ */ g(s, {
+			htmlFor: A,
+			requirement: o.Required,
+			labels: k.fieldMarkers,
+			children: k.fieldLabel
+		}), /* @__PURE__ */ _(c, {
+			open: j,
+			onOpenChange: M,
+			children: [/* @__PURE__ */ g(u, {
+				asChild: !0,
+				children: /* @__PURE__ */ _("button", {
+					type: "button",
+					id: A,
+					role: "combobox",
+					"aria-expanded": j,
+					"aria-required": !0,
+					className: "ttw:flex ttw:h-10 ttw:w-full ttw:items-center ttw:justify-between ttw:gap-2 ttw:rounded-md ttw:border ttw:border-border ttw:bg-background ttw:px-3 ttw:text-left ttw:text-sm ttw:shadow-xs ttw:outline-none ttw:focus-visible:border-ring ttw:focus-visible:ring-[3px] ttw:focus-visible:ring-ring/50",
+					children: [/* @__PURE__ */ g("span", {
+						className: "ttw:min-w-0 ttw:flex-1 ttw:truncate ttw:text-muted-foreground",
+						children: k.triggerPlaceholder
+					}), /* @__PURE__ */ g(v, {
+						"aria-hidden": !0,
+						className: "ttw:size-4 ttw:shrink-0 ttw:opacity-50"
+					})]
 				})
-			] }, e.items[0]?.id);
-		})
-	})] });
+			}), /* @__PURE__ */ g(l, {
+				align: "start",
+				className: "ttw:w-[var(--radix-popover-trigger-width)] ttw:p-0",
+				children: /* @__PURE__ */ _(e, {
+					shouldFilter: !1,
+					children: [/* @__PURE__ */ g(n, {
+						value: S,
+						onValueChange: C,
+						placeholder: k.placeholder,
+						"aria-label": k.placeholder
+					}), /* @__PURE__ */ _(i, {
+						className: f("ttw:max-h-72", x),
+						children: [
+							T ? /* @__PURE__ */ _("div", {
+								className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:p-2",
+								"aria-busy": "true",
+								children: [/* @__PURE__ */ g("span", {
+									className: "ttw:sr-only",
+									children: k.loading
+								}), Array.from({ length: b }).map((e, t) => /* @__PURE__ */ _("div", {
+									className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:px-2 ttw:py-1.5",
+									children: [/* @__PURE__ */ g(d, {
+										height: 14,
+										width: "55%"
+									}), /* @__PURE__ */ g(d, {
+										height: 14,
+										width: "30%"
+									})]
+								}, t))]
+							}) : w.length === 0 ? /* @__PURE__ */ g("div", {
+								className: f("ttw:flex ttw:items-center ttw:justify-center ttw:py-6 ttw:text-center ttw:text-sm", x),
+								children: k.emptyResults
+							}) : /* @__PURE__ */ g(t, { children: w.map((e, t) => /* @__PURE__ */ _(r, {
+								value: `${e.name} ${e.email} ${t}`,
+								onSelect: () => e.onSelect(),
+								children: [/* @__PURE__ */ g("span", {
+									className: "ttw:text-foreground",
+									children: e.name
+								}), /* @__PURE__ */ g("span", {
+									className: "ttw:ml-auto ttw:text-muted-foreground",
+									children: e.email
+								})]
+							}, `${e.name}:${e.email}:${t}`)) }),
+							/* @__PURE__ */ g(a, {}),
+							/* @__PURE__ */ _(r, {
+								value: "__add_vendor__",
+								onSelect: E,
+								className: "ttw:sticky ttw:bottom-0 ttw:bg-popover ttw:text-primary",
+								children: [/* @__PURE__ */ g(y, { className: "ttw:size-4 ttw:text-primary" }), k.addVendorAction]
+							})
+						]
+					})]
+				})
+			})]
+		})]
+	});
 }
 //#endregion
-export { h as BillOverflowMenu, h as default };
+export { S as VendorSearchCombobox, S as default };