@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/combobox.js

@@ -1,294 +1,279 @@
 "use client";
-import { jsx as a, jsxs as o, Fragment as G } from "react/jsx-runtime";
-import * as r from "react";
-import { o as U, p as J, q as Q, r as W } from "../_chunks/primitives.js";
-import { IconChevronDown as Y, IconSearch as Z, IconCheck as V, IconX as ee } from "@tabler/icons-react";
-import { cn as h } from "./lib/utils.js";
-import { tweens as se, springs as te } from "./lib/motion.js";
-import { Icon as w } from "./icon.js";
-import { m as re } from "../_chunks/framer.js";
-const A = 2, ae = 36, ne = r.forwardRef(
-  ({
-    options: f,
-    value: u,
-    onValueChange: b,
-    placeholder: S = "Select...",
-    searchPlaceholder: L = "Search...",
-    emptyMessage: T = "No results found",
-    multiple: p = !1,
-    disabled: x = !1,
-    className: $,
-    triggerClassName: j,
-    maxVisible: z = 6,
-    renderOption: R,
-    accessibleLabel: H,
-    ...M
-  }, O) => {
-    const [m, y] = r.useState(!1), [v, k] = r.useState(""), [i, d] = r.useState(-1), I = r.useRef(null), N = r.useRef(null), P = r.useId(), C = r.useId(), n = r.useMemo(() => u == null ? [] : Array.isArray(u) ? u : [u], [u]), c = r.useMemo(
-      () => v ? f.filter(
-        (e) => e.label.toLowerCase().includes(v.toLowerCase())
-      ) : f,
-      [f, v]
-    ), _ = r.useCallback(
-      (e) => n.includes(e),
-      [n]
-    ), g = r.useCallback(
-      (e) => {
-        if (p) {
-          const s = n.includes(e) ? n.filter((t) => t !== e) : [...n, e];
-          b(s);
-        } else
-          b(e), y(!1);
-      },
-      [p, n, b]
-    ), K = r.useCallback(
-      (e, s) => {
-        e.stopPropagation(), e.preventDefault();
-        const t = n.filter((l) => l !== s);
-        b(t);
-      },
-      [n, b]
-    ), X = r.useCallback(
-      (e) => {
-        x || (y(e), e || (k(""), d(-1)));
-      },
-      [x]
-    );
-    r.useEffect(() => {
-      if (m) {
-        const e = setTimeout(() => {
-          I.current?.focus();
-        }, 0);
-        return () => clearTimeout(e);
-      }
-    }, [m]);
-    const D = r.useCallback(
-      (e, s) => {
-        const t = c.length;
-        if (t === 0) return -1;
-        let l = e + s;
-        for (; l >= 0 && l < t; ) {
-          if (!c[l].disabled) return l;
-          l += s;
-        }
-        return e;
-      },
-      [c]
-    ), F = r.useCallback(
-      (e) => {
-        switch (e.key) {
-          case "ArrowDown": {
-            e.preventDefault();
-            const s = D(i, 1);
-            d(s);
-            break;
-          }
-          case "ArrowUp": {
-            e.preventDefault();
-            const s = D(i, -1);
-            d(s);
-            break;
-          }
-          case "Home": {
-            e.preventDefault();
-            const s = c.findIndex((t) => !t.disabled);
-            d(s);
-            break;
-          }
-          case "End": {
-            e.preventDefault();
-            let s = -1;
-            for (let t = c.length - 1; t >= 0; t--)
-              if (!c[t].disabled) {
-                s = t;
-                break;
-              }
-            d(s);
-            break;
-          }
-          case "Enter": {
-            e.preventDefault(), i >= 0 && i < c.length && !c[i].disabled && g(c[i].value);
-            break;
-          }
-          case "Escape": {
-            e.preventDefault(), y(!1), k(""), d(-1);
-            break;
-          }
-        }
-      },
-      [i, c, D, g]
-    );
-    r.useEffect(() => {
-      if (i >= 0 && N.current) {
-        const e = N.current.children[i];
-        e && e.scrollIntoView?.({ block: "nearest" });
-      }
-    }, [i]);
-    const q = r.useCallback(() => n.length === 0 ? null : f.find((s) => s.value === n[0])?.label ?? null, [n, f]), B = () => {
-      if (p && n.length > 0) {
-        const e = n.slice(0, A), s = n.length - A;
-        return /* @__PURE__ */ o("span", { className: "flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden", children: [
-          e.map((t) => {
-            const l = f.find((E) => E.value === t);
-            return l ? /* @__PURE__ */ o(
-              "span",
-              {
-                className: "inline-flex items-center gap-ds-01 rounded-ds-md bg-accent-2 px-ds-03 py-[1px] text-ds-sm",
-                children: [
-                  l.label,
-                  /* @__PURE__ */ a(
-                    "button",
-                    {
-                      type: "button",
-                      className: "inline-flex items-center justify-center rounded-ds-full outline-hidden hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard",
-                      onClick: (E) => K(E, t),
-                      "aria-label": `Remove ${l.label}`,
-                      tabIndex: -1,
-                      children: /* @__PURE__ */ a(w, { icon: ee, size: "sm" })
-                    }
-                  )
-                ]
-              },
-              t
-            ) : null;
-          }),
-          s > 0 && /* @__PURE__ */ o("span", { className: "text-ds-sm text-surface-fg-muted", children: [
-            "+",
-            s,
-            " more"
-          ] })
-        ] });
-      }
-      if (!p && n.length === 1) {
-        const e = q();
-        if (e)
-          return /* @__PURE__ */ a("span", { className: "flex-1 truncate text-left", children: e });
-      }
-      return /* @__PURE__ */ a("span", { className: "flex-1 truncate text-left text-surface-fg-subtle", children: S });
-    };
-    return /* @__PURE__ */ a(U, { open: m, onOpenChange: X, children: /* @__PURE__ */ o("div", { className: h("relative", $), ...M, children: [
-      /* @__PURE__ */ a(J, { asChild: !0, disabled: x, children: /* @__PURE__ */ o(
-        "button",
-        {
-          ref: O,
-          type: "button",
-          role: "combobox",
-          "aria-expanded": m,
-          "aria-controls": C,
-          "aria-haspopup": "listbox",
-          "aria-label": H ?? S,
-          disabled: x,
-          className: h(
-            "flex h-ds-md w-full items-center justify-between whitespace-nowrap rounded-ds-md border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 text-ds-md",
-            "transition-colors duration-fast-01 ease-productive-standard",
-            "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7",
-            "disabled:cursor-not-allowed disabled:opacity-action-disabled",
-            m && "border-accent-7",
-            j
-          ),
-          children: [
-            B(),
-            /* @__PURE__ */ a(w, { icon: Y, size: "sm", className: h("ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard", m && "rotate-180") })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ a(Q, { children: /* @__PURE__ */ a(
-        W,
-        {
-          asChild: !0,
-          sideOffset: 4,
-          align: "start",
-          onOpenAutoFocus: (e) => {
-            e.preventDefault(), I.current?.focus();
-          },
-          children: /* @__PURE__ */ o(
-            re.div,
-            {
-              initial: { opacity: 0, scale: 0.95 },
-              animate: { opacity: 1, scale: 1 },
-              transition: { ...te.snappy, opacity: se.fade },
-              className: h(
-                "z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-ds-lg border border-surface-border bg-surface-overlay shadow-floating"
-              ),
-              children: [
-                /* @__PURE__ */ o("div", { className: "flex items-center gap-ds-02 border-b border-surface-border px-ds-04", children: [
-                  /* @__PURE__ */ a(w, { icon: Z, size: "sm", className: "shrink-0 text-surface-fg-subtle" }),
-                  /* @__PURE__ */ a(
-                    "input",
-                    {
-                      ref: I,
-                      type: "text",
-                      className: "flex-1 bg-transparent py-ds-03 text-ds-md outline-hidden placeholder:text-surface-fg-subtle",
-                      placeholder: L,
-                      value: v,
-                      onChange: (e) => {
-                        k(e.target.value), d(-1);
-                      },
-                      onKeyDown: F,
-                      "aria-autocomplete": "list",
-                      "aria-controls": C,
-                      "aria-activedescendant": i >= 0 ? `${P}-option-${i}` : void 0,
-                      "aria-label": "Search options"
-                    }
-                  )
-                ] }),
-                c.length === 0 ? /* @__PURE__ */ a("div", { className: "px-ds-04 py-ds-05 text-center text-ds-md text-surface-fg-subtle", children: T }) : /* @__PURE__ */ a(
-                  "ul",
-                  {
-                    ref: N,
-                    id: C,
-                    role: "listbox",
-                    "aria-multiselectable": p || void 0,
-                    className: "overflow-auto p-ds-02",
-                    style: { maxHeight: `${z * ae}px` },
-                    children: c.map((e, s) => {
-                      const t = _(e.value);
-                      return /* @__PURE__ */ o(
-                        "li",
-                        {
-                          id: `${P}-option-${s}`,
-                          role: "option",
-                          "aria-selected": t,
-                          "aria-disabled": e.disabled || void 0,
-                          className: h(
-                            "relative flex cursor-pointer select-none items-center gap-ds-03 rounded-ds-md px-ds-04 py-ds-03 text-ds-md outline-hidden",
-                            "transition-colors duration-fast-01 ease-productive-standard",
-                            i === s && "bg-accent-2",
-                            t && "text-accent-11",
-                            e.disabled && "pointer-events-none opacity-action-disabled"
-                          ),
-                          onClick: () => {
-                            e.disabled || g(e.value);
-                          },
-                          onKeyDown: (l) => {
-                            !e.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), g(e.value));
-                          },
-                          onMouseEnter: () => {
-                            e.disabled || d(s);
-                          },
-                          children: [
-                            e.icon && /* @__PURE__ */ a("span", { className: "flex h-ico-sm w-ico-sm items-center justify-center shrink-0", children: e.icon }),
-                            /* @__PURE__ */ a("span", { className: "flex flex-1 flex-col", children: R ? R(e, t) : /* @__PURE__ */ o(G, { children: [
-                              /* @__PURE__ */ a("span", { children: e.label }),
-                              e.description && /* @__PURE__ */ a("span", { className: "text-ds-sm text-surface-fg-muted", children: e.description })
-                            ] }) }),
-                            t && /* @__PURE__ */ a(w, { icon: V, size: "sm", className: "shrink-0" })
-                          ]
-                        },
-                        e.value
-                      );
-                    })
-                  }
-                )
-              ]
-            }
-          )
-        }
-      ) })
-    ] }) });
-  }
-);
-ne.displayName = "Combobox";
-export {
-  ne as Combobox
-};
+import { Jt as e, Kt as t, Yt as n, qt as r } from "../_chunks/primitives.js";
+import { a as i } from "../_chunks/framer.js";
+import { springs as a, tweens as o } from "./lib/motion.js";
+import { t as s } from "../_chunks/vendor-utils.js";
+import { cn as c } from "./lib/utils.js";
+import { Icon as l } from "./icon.js";
+import { useFormField as u } from "./form.js";
+import * as d from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { IconCheck as h, IconChevronDown as ee, IconSearch as te, IconX as g } from "@tabler/icons-react";
+//#region src/ui/combobox.tsx
+var _ = s([
+	"flex w-full items-center justify-between whitespace-nowrap rounded-ds-md",
+	"border border-surface-border-strong bg-surface-raised-hover",
+	"transition-colors duration-fast-01 ease-productive-standard",
+	"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7",
+	"disabled:cursor-not-allowed disabled:opacity-action-disabled"
+], {
+	variants: { size: {
+		xs: "h-ds-xs-plus text-ds-sm px-ds-02",
+		sm: "h-ds-sm text-ds-sm px-ds-03",
+		md: "h-ds-md text-ds-md px-ds-04",
+		lg: "h-ds-lg text-ds-md px-ds-05"
+	} },
+	defaultVariants: { size: "md" }
+}), v = {
+	xs: "xs",
+	sm: "sm",
+	md: "sm",
+	lg: "md"
+}, y = {
+	xs: "px-ds-02 py-0 text-ds-xs",
+	sm: "px-ds-02 py-0 text-ds-xs",
+	md: "px-ds-03 py-[1px] text-ds-sm",
+	lg: "px-ds-03 py-[2px] text-ds-sm"
+}, b = {
+	xs: "text-ds-xs",
+	sm: "text-ds-xs",
+	md: "text-ds-sm",
+	lg: "text-ds-sm"
+}, x = 2, S = 36, C = d.forwardRef(({ options: s, value: C, onValueChange: w, placeholder: T = "Select...", searchPlaceholder: E = "Search...", emptyMessage: D = "No results found", multiple: O = !1, disabled: k = !1, className: ne, triggerClassName: re, maxVisible: ie = 6, renderOption: A, accessibleLabel: j, size: M = "md", ...N }, P) => {
+	let F = M ?? "md", [I, L] = d.useState(!1), [R, z] = d.useState(""), [B, V] = d.useState(-1), H = d.useRef(null), U = d.useRef(null), W = d.useId(), G = d.useId(), K = d.useMemo(() => C == null ? [] : Array.isArray(C) ? C : [C], [C]), q = d.useMemo(() => R ? s.filter((e) => e.label.toLowerCase().includes(R.toLowerCase())) : s, [s, R]), J = d.useCallback((e) => K.includes(e), [K]), Y = d.useCallback((e) => {
+		O ? w(K.includes(e) ? K.filter((t) => t !== e) : [...K, e]) : (w(e), L(!1));
+	}, [
+		O,
+		K,
+		w
+	]), ae = d.useCallback((e, t) => {
+		e.stopPropagation(), e.preventDefault(), w(K.filter((e) => e !== t));
+	}, [K, w]), oe = d.useCallback((e) => {
+		k || (L(e), e || (z(""), V(-1)));
+	}, [k]);
+	d.useEffect(() => {
+		if (I) {
+			let e = setTimeout(() => {
+				H.current?.focus();
+			}, 0);
+			return () => clearTimeout(e);
+		}
+	}, [I]);
+	let X = d.useCallback((e, t) => {
+		let n = q.length;
+		if (n === 0) return -1;
+		let r = e + t;
+		for (; r >= 0 && r < n;) {
+			if (!q[r].disabled) return r;
+			r += t;
+		}
+		return e;
+	}, [q]), se = d.useCallback((e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), V(X(B, 1));
+				break;
+			case "ArrowUp":
+				e.preventDefault(), V(X(B, -1));
+				break;
+			case "Home":
+				e.preventDefault(), V(q.findIndex((e) => !e.disabled));
+				break;
+			case "End": {
+				e.preventDefault();
+				let t = -1;
+				for (let e = q.length - 1; e >= 0; e--) if (!q[e].disabled) {
+					t = e;
+					break;
+				}
+				V(t);
+				break;
+			}
+			case "Enter":
+				e.preventDefault(), B >= 0 && B < q.length && !q[B].disabled && Y(q[B].value);
+				break;
+			case "Escape":
+				e.preventDefault(), L(!1), z(""), V(-1);
+				break;
+		}
+	}, [
+		B,
+		q,
+		X,
+		Y
+	]);
+	d.useEffect(() => {
+		if (B >= 0 && U.current) {
+			let e = U.current.children[B];
+			e && e.scrollIntoView?.({ block: "nearest" });
+		}
+	}, [B]);
+	let ce = d.useCallback(() => K.length === 0 ? null : s.find((e) => e.value === K[0])?.label ?? null, [K, s]), Z = v[F], le = y[F], ue = b[F], Q = () => {
+		if (O && K.length > 0) {
+			let e = K.slice(0, x), t = K.length - x;
+			return /* @__PURE__ */ m("span", {
+				className: "flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden",
+				children: [e.map((e) => {
+					let t = s.find((t) => t.value === e);
+					return t ? /* @__PURE__ */ m("span", {
+						className: c("inline-flex items-center gap-ds-01 rounded-ds-md bg-accent-2", le),
+						children: [t.label, /* @__PURE__ */ p("button", {
+							type: "button",
+							className: "inline-flex items-center justify-center rounded-ds-full outline-hidden hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard",
+							onClick: (t) => ae(t, e),
+							"aria-label": `Remove ${t.label}`,
+							tabIndex: -1,
+							children: /* @__PURE__ */ p(l, {
+								icon: g,
+								size: Z
+							})
+						})]
+					}, e) : null;
+				}), t > 0 && /* @__PURE__ */ m("span", {
+					className: c("text-surface-fg-muted", ue),
+					children: [
+						"+",
+						t,
+						" more"
+					]
+				})]
+			});
+		}
+		if (!O && K.length === 1) {
+			let e = ce();
+			if (e) return /* @__PURE__ */ p("span", {
+				className: "flex-1 truncate text-left",
+				children: e
+			});
+		}
+		return /* @__PURE__ */ p("span", {
+			className: "flex-1 truncate text-left text-surface-fg-subtle",
+			children: T
+		});
+	}, $ = u(), de = $.state === "error", fe = $.helperTextId, pe = $.required;
+	return /* @__PURE__ */ p(e, {
+		open: I,
+		onOpenChange: oe,
+		children: /* @__PURE__ */ m("div", {
+			className: c("relative", ne),
+			...N,
+			children: [/* @__PURE__ */ p(n, {
+				asChild: !0,
+				disabled: k,
+				children: /* @__PURE__ */ m("button", {
+					ref: P,
+					type: "button",
+					role: "combobox",
+					"aria-expanded": I,
+					"aria-controls": G,
+					"aria-haspopup": "listbox",
+					"aria-label": j ?? T,
+					"aria-invalid": de || void 0,
+					"aria-describedby": fe,
+					"aria-required": pe || void 0,
+					disabled: k,
+					className: c(_({ size: F }), I && "border-accent-7", re),
+					children: [Q(), /* @__PURE__ */ p(l, {
+						icon: ee,
+						size: Z,
+						className: c("ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard", I && "rotate-180")
+					})]
+				})
+			}), /* @__PURE__ */ p(r, { children: /* @__PURE__ */ p(t, {
+				asChild: !0,
+				sideOffset: 4,
+				align: "start",
+				onOpenAutoFocus: (e) => {
+					e.preventDefault(), H.current?.focus();
+				},
+				children: /* @__PURE__ */ m(i.div, {
+					initial: {
+						opacity: 0,
+						scale: .95
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					transition: {
+						...a.snappy,
+						opacity: o.fade
+					},
+					className: c("z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-ds-lg border border-surface-border bg-surface-overlay shadow-floating"),
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex items-center gap-ds-02 border-b border-surface-border px-ds-04",
+						children: [/* @__PURE__ */ p(l, {
+							icon: te,
+							size: "sm",
+							className: "shrink-0 text-surface-fg-subtle"
+						}), /* @__PURE__ */ p("input", {
+							ref: H,
+							type: "text",
+							className: "flex-1 bg-transparent py-ds-03 text-ds-md outline-hidden placeholder:text-surface-fg-subtle",
+							placeholder: E,
+							value: R,
+							onChange: (e) => {
+								z(e.target.value), V(-1);
+							},
+							onKeyDown: se,
+							"aria-autocomplete": "list",
+							"aria-controls": G,
+							"aria-activedescendant": B >= 0 ? `${W}-option-${B}` : void 0,
+							"aria-label": "Search options"
+						})]
+					}), q.length === 0 ? /* @__PURE__ */ p("div", {
+						className: "px-ds-04 py-ds-05 text-center text-ds-md text-surface-fg-subtle",
+						children: D
+					}) : /* @__PURE__ */ p("ul", {
+						ref: U,
+						id: G,
+						role: "listbox",
+						"aria-multiselectable": O || void 0,
+						className: "overflow-auto p-ds-02",
+						style: { maxHeight: `${ie * S}px` },
+						children: q.map((e, t) => {
+							let n = J(e.value);
+							return /* @__PURE__ */ m("li", {
+								id: `${W}-option-${t}`,
+								role: "option",
+								"aria-selected": n,
+								"aria-disabled": e.disabled || void 0,
+								className: c("relative flex cursor-pointer select-none items-center gap-ds-03 rounded-ds-md px-ds-04 py-ds-03 text-ds-md outline-hidden", "transition-colors duration-fast-01 ease-productive-standard", B === t && "bg-accent-2", n && "text-accent-11", e.disabled && "pointer-events-none opacity-action-disabled"),
+								onClick: () => {
+									e.disabled || Y(e.value);
+								},
+								onKeyDown: (t) => {
+									!e.disabled && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), Y(e.value));
+								},
+								onMouseEnter: () => {
+									e.disabled || V(t);
+								},
+								children: [
+									e.icon && /* @__PURE__ */ p("span", {
+										className: "flex h-ico-sm w-ico-sm items-center justify-center shrink-0",
+										children: e.icon
+									}),
+									/* @__PURE__ */ p("span", {
+										className: "flex flex-1 flex-col",
+										children: A ? A(e, n) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", { children: e.label }), e.description && /* @__PURE__ */ p("span", {
+											className: "text-ds-sm text-surface-fg-muted",
+											children: e.description
+										})] })
+									}),
+									n && /* @__PURE__ */ p(l, {
+										icon: h,
+										size: "sm",
+										className: "shrink-0"
+									})
+								]
+							}, e.value);
+						})
+					})]
+				})
+			}) })]
+		})
+	});
+});
+C.displayName = "Combobox";
+//#endregion
+export { C as Combobox, _ as comboboxTriggerVariants };