@devalok/shilp-sutra 0.33.2 → 0.34.1

package/dist/ui/combobox.js

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

package/dist/ui/container.js

@@ -1,24 +1,18 @@
-import * as a from "react";
-import { cn as d } from "./lib/utils.js";
-const f = {
-  default: "max-w-layout",
-  body: "max-w-layout-body",
-  full: "max-w-full"
-}, u = a.forwardRef(
-  ({ as: t, maxWidth: o = "default", className: e, children: l, ...m }, n) => {
-    const r = t || "div";
-    return a.createElement(
-      r,
-      {
-        ref: n,
-        className: d("mx-auto w-full px-ds-05", f[o], e),
-        ...m
-      },
-      l
-    );
-  }
-);
-u.displayName = "Container";
-export {
-  u as Container
-};
+import { cn as e } from "./lib/utils.js";
+import * as t from "react";
+//#region src/ui/container.tsx
+var n = {
+	default: "max-w-layout",
+	body: "max-w-layout-body",
+	full: "max-w-full"
+}, r = t.forwardRef(({ as: r, maxWidth: i = "default", className: a, children: o, ...s }, c) => {
+	let l = r || "div";
+	return t.createElement(l, {
+		ref: c,
+		className: e("mx-auto w-full px-ds-05", n[i], a),
+		...s
+	}, o);
+});
+r.displayName = "Container";
+//#endregion
+export { r as Container };