@alfadocs/ui-kit 0.1.9 → 0.2.0

package/dist/_chunks/{audio-visualiser-CeMPCZkd.js → audio-visualiser-ByDEFLNm.js}

@@ -23,8 +23,16 @@ const K = H(
     defaultVariants: { size: "md" }
   }
 ), O = U(
-  ({ stream: m, size: T = "md", barCount: t = 32, deviceName: A, label: V, className: k, ...q }, B) => {
-    const { t: M } = J(), d = i([]), c = i(null), f = i(null), l = i(null), h = i(null), v = i(null), [R, j] = _(!1);
+  ({
+    stream: p,
+    size: T = "md",
+    barCount: t = 32,
+    deviceName: A,
+    label: V,
+    className: k,
+    ...q
+  }, B) => {
+    const { t: M } = J(), o = i([]), c = i(null), f = i(null), l = i(null), h = i(null), v = i(null), [R, j] = _(!1);
     b(() => {
       var n;
       if (typeof window > "u") return;
@@ -32,12 +40,12 @@ const K = H(
       j(e.matches);
       const r = () => j(e.matches);
       return (n = e.addEventListener) == null || n.call(e, "change", r), () => {
-        var o;
-        return (o = e.removeEventListener) == null ? void 0 : o.call(e, "change", r);
+        var d;
+        return (d = e.removeEventListener) == null ? void 0 : d.call(e, "change", r);
       };
     }, []), b(() => {
-      if (!m) {
-        d.current.forEach((s) => {
+      if (!p) {
+        o.current.forEach((s) => {
           s == null || s.style.setProperty("--bar-height", "10%");
         });
         return;
@@ -46,8 +54,8 @@ const K = H(
       if (!e) return;
       const r = new e(), n = r.createAnalyser();
       n.fftSize = 256;
-      const o = r.createMediaStreamSource(m);
-      o.connect(n), f.current = r, l.current = n, h.current = o, v.current = new Uint8Array(n.frequencyBinCount);
+      const d = r.createMediaStreamSource(p);
+      d.connect(n), f.current = r, l.current = n, h.current = d, v.current = new Uint8Array(n.frequencyBinCount);
       let z = 0;
       const x = (s) => {
         var E;
@@ -62,12 +70,12 @@ const K = H(
           a
         );
         const y = Math.max(1, Math.floor(a.length / t));
-        for (let p = 0; p < t; p += 1) {
+        for (let m = 0; m < t; m += 1) {
           let L = 0;
           for (let w = 0; w < y; w += 1)
-            L += a[p * y + w] ?? 0;
+            L += a[m * y + w] ?? 0;
           const D = L / y, I = Math.max(8, Math.min(100, D / 255 * 100));
-          (E = d.current[p]) == null || E.style.setProperty("--bar-height", `${I}%`);
+          (E = o.current[m]) == null || E.style.setProperty("--bar-height", `${I}%`);
         }
         c.current = requestAnimationFrame(x);
       };
@@ -85,19 +93,17 @@ const K = H(
         (u = f.current) == null || u.close().catch(() => {
         }), f.current = null, l.current = null, h.current = null, v.current = null;
       };
-    }, [m, t, R]);
-    const N = $(
-      () => Array.from({ length: t }),
-      [t]
-    );
+    }, [p, t, R]);
+    const N = $(() => Array.from({ length: t }), [t]);
     b(() => {
-      d.current.length > t && (d.current.length = t);
+      o.current.length > t && (o.current.length = t);
     }, [t]);
     const P = V ?? M("ui.chat.audio.visualiserLabel"), g = A ? M("ui.chat.audio.device", { name: A }) : null, F = G();
     return /* @__PURE__ */ C(
       "div",
       {
         ref: B,
+        role: "img",
         "aria-label": P,
         "aria-describedby": g ? F : void 0,
         "data-component": "audio-visualiser",
@@ -108,7 +114,7 @@ const K = H(
             "div",
             {
               ref: (n) => {
-                d.current[r] = n;
+                o.current[r] = n;
               },
               "aria-hidden": "true",
               className: [
@@ -136,4 +142,4 @@ O.displayName = "AudioVisualiser";
 export {
   O as A
 };
-//# sourceMappingURL=audio-visualiser-CeMPCZkd.js.map
+//# sourceMappingURL=audio-visualiser-ByDEFLNm.js.map

package/dist/_chunks/autocomplete-D4oUZbsP.js

@@ -0,0 +1,466 @@
+import { jsx as o, jsxs as D } from "react/jsx-runtime";
+import { forwardRef as Ye, useId as Ze, useState as I, useRef as c, useCallback as T, useEffect as N, useMemo as S } from "react";
+import { _ as m } from "./index-4xgbg-sn.js";
+import * as A from "@radix-ui/react-popover";
+import { c as F } from "./index-D2ZczOXr.js";
+import { useTranslation as et } from "react-i18next";
+import { S as me } from "./spinner-DLaYfLPl.js";
+import { u as tt } from "./form-field-context-B3APVHKx.js";
+import { u as st } from "./use-debounced-callback-BisrB-Fq.js";
+import { g as nt } from "./group-options-BvKhQ3xb.js";
+import { I as ot, a as X, b as J, c as at } from "./input-surface-u4QB0lxe.js";
+import { u as rt } from "./registry-C9nwlNyL.js";
+const it = {
+  id: "autocomplete",
+  capabilities: ["filter", "pick", "open", "close"],
+  state: {
+    value: {
+      type: "string | null",
+      description: "Currently-selected option value, or null when nothing is committed.",
+      read: (s) => s.getValue()
+    },
+    query: {
+      type: "string",
+      description: "Current free-text query in the input.",
+      read: (s) => s.getQuery()
+    },
+    isOpen: {
+      type: "boolean",
+      description: "True when the suggestion list is visible.",
+      read: (s) => s.getIsOpen()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "read",
+      argsType: "{ value: string | null }",
+      description: "Set the committed value programmatically.",
+      invoke: (s, l) => {
+        s.setValue(l.value);
+      }
+    },
+    apply_filter: {
+      safety: "read",
+      argsType: "{ query: string }",
+      description: "Set the input query, which filters the suggestion list.",
+      invoke: (s, l) => {
+        s.setQuery(l.query);
+      }
+    },
+    clear: {
+      safety: "read",
+      description: "Clear the value and the query.",
+      invoke: (s) => {
+        s.clear();
+      }
+    },
+    open: {
+      safety: "read",
+      description: "Open the suggestion list.",
+      invoke: (s) => {
+        s.open();
+      }
+    },
+    close: {
+      safety: "read",
+      description: "Close the suggestion list.",
+      invoke: (s) => {
+        s.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "autocomplete" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-option-id",
+      description: "Each suggestion emits its value as data-option-id."
+    }
+  }
+}, dt = F(
+  ["ds:flex ds:w-full ds:items-center", at].join(" "),
+  {
+    variants: {
+      size: {
+        sm: `${X.sm} ${J.sm}`,
+        md: `${X.md} ${J.md}`,
+        lg: `${X.lg} ${J.lg}`
+      },
+      tone: ot
+    },
+    defaultVariants: { size: "md", tone: "default" }
+  }
+), lt = F(
+  [
+    "ds:flex-1 ds:min-w-0 ds:bg-transparent ds:text-foreground",
+    "ds:placeholder:text-muted-foreground",
+    "ds:outline-none ds:focus:outline-none ds:focus-visible:outline-none",
+    "ds:disabled:cursor-not-allowed",
+    "ds:read-only:cursor-default"
+  ].join(" "),
+  {
+    variants: {
+      hasStart: { true: "ds:ps-2", false: "ds:ps-3" },
+      hasEnd: { true: "ds:pe-2", false: "ds:pe-3" }
+    },
+    defaultVariants: { hasStart: !1, hasEnd: !1 }
+  }
+), ut = F(
+  [
+    "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
+    "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-background",
+    "ds:shadow-[var(--shadow-md)]",
+    "ds:w-[var(--radix-popover-trigger-width)]",
+    "ds:animate-in ds:fade-in ds:zoom-in-95",
+    "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out",
+    "ds:data-[state=closed]:zoom-out-95",
+    "ds:motion-reduce:animate-none"
+  ].join(" ")
+), ge = F(
+  [
+    "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:ps-3 ds:pe-3 ds:py-2 ds:text-[length:var(--font-size-sm)] ds:text-foreground",
+    "ds:rounded-[var(--radius-sm)] ds:select-none ds:cursor-pointer",
+    "ds:data-[disabled=true]:pointer-events-none ds:data-[disabled=true]:opacity-50",
+    "ds:data-[selected=true]:bg-primary ds:data-[selected=true]:text-primary-foreground",
+    "ds:hover:bg-muted ds:data-[selected=true]:hover:bg-primary"
+  ].join(" ")
+), he = [
+  "ds:[&_[cmdk-group-heading]]:ps-3",
+  "ds:[&_[cmdk-group-heading]]:pe-3",
+  "ds:[&_[cmdk-group-heading]]:py-1.5",
+  "ds:[&_[cmdk-group-heading]]:type-eyebrow",
+  "ds:[&_[cmdk-group-heading]]:text-muted-foreground"
+].join(" "), W = "ds:inline-flex ds:items-center ds:shrink-0 ds:text-muted-foreground ds:[&_svg]:size-4";
+function Y(s, l, B) {
+  return `${s}-${l}-${B}`;
+}
+function ve(s, l) {
+  return `${s}:${l}`;
+}
+const ct = Ye(
+  function({
+    loadOptions: l,
+    debounceMs: B = 250,
+    value: Z,
+    defaultValue: be,
+    onChange: R,
+    onSelect: u,
+    recents: v,
+    onRecentSelect: M,
+    snapOnBlur: ye = !1,
+    size: we = "md",
+    tone: ke = "default",
+    startAdornment: P,
+    endAdornment: z,
+    placeholder: ee,
+    disabled: xe,
+    readOnly: b,
+    required: Ce,
+    name: Ve,
+    id: j,
+    className: Ie,
+    "aria-label": te
+  }, k) {
+    const { t: x, i18n: Ne } = et(), C = tt(), Re = Ze(), g = j ?? C.id ?? Re, se = `${g}-listbox`, Ee = `${g}-live`, h = !!(C.disabled || xe), _e = !!(C.required || Ce), ne = C.invalid, $e = ne ? "error" : ke ?? "default", De = C.describedBy || void 0, U = Z !== void 0, [Te, Ae] = I(
+      be ?? ""
+    ), r = U ? Z : Te, [i, d] = I(!1), [y, oe] = I([]), [V, q] = I(!1), [p, Fe] = I(""), E = c(!1), H = c(null), O = c(r), ae = c(/* @__PURE__ */ new Map()), re = c(/* @__PURE__ */ new Map()), Q = c(null), G = c(null), Be = T(
+      (e) => {
+        Q.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
+      },
+      [k]
+    ), ie = Ne.language;
+    N(() => {
+      const e = /* @__PURE__ */ new Map();
+      for (const t of y) e.set(t.value, t);
+      ae.current = e;
+    }, [y]), N(() => {
+      const e = /* @__PURE__ */ new Map();
+      if (v) for (const t of v) e.set(t.value, t);
+      re.current = e;
+    }, [v]);
+    const Me = T(
+      (e) => {
+        var n;
+        if (h || b || E.current) return;
+        (n = H.current) == null || n.abort();
+        const t = new AbortController();
+        H.current = t, O.current = e, q(!0), l(e, { signal: t.signal, locale: ie }).then((a) => {
+          t.signal.aborted || O.current === e && (oe(a), q(!1));
+        }).catch((a) => {
+          t.signal.aborted || a && typeof a == "object" && "name" in a && a.name === "AbortError" || O.current === e && (oe([]), q(!1));
+        });
+      },
+      [h, b, l, ie]
+    ), w = st(Me, B);
+    N(() => () => {
+      var e;
+      w.cancel(), (e = H.current) == null || e.abort();
+    }, [w]);
+    const f = T(
+      (e) => {
+        U || Ae(e), R == null || R(e);
+      },
+      [U, R]
+    ), de = T(
+      (e) => {
+        const [t, n] = e.split(":");
+        if (!n || t !== "recent" && t !== "option") return null;
+        const fe = (t === "recent" ? re.current : ae.current).get(n);
+        return fe ? { kind: t, option: fe } : null;
+      },
+      []
+    ), Pe = (e) => {
+      f(e), !(h || b) && (i || d(!0), !E.current && w(e));
+    }, ze = (e) => {
+      E.current = !0;
+    }, je = (e) => {
+      E.current = !1;
+      const t = e.currentTarget.value;
+      w(t);
+    }, Ue = (e) => {
+      h || b || (d(!0), r && w(r));
+    }, qe = (e) => {
+      const t = e.relatedTarget;
+      if (!(t && G.current && G.current.contains(t))) {
+        if (ye && p) {
+          const n = de(p);
+          n && (f(n.option.label), u == null || u(n.option));
+        }
+        d(!1);
+      }
+    }, He = (e) => {
+      if (!e.nativeEvent.isComposing) {
+        if (e.key === "Escape") {
+          i && (e.preventDefault(), e.stopPropagation(), d(!1));
+          return;
+        }
+        if (e.key === "ArrowDown" && !i) {
+          e.preventDefault(), d(!0), r && w(r);
+          return;
+        }
+        if (e.key === "Tab" && i && p) {
+          const t = de(p);
+          t && (f(t.option.label), u == null || u(t.option), d(!1));
+        }
+      }
+    }, le = (e, t) => {
+      var n;
+      f(t.label), e === "recent" ? M == null || M(t) : u == null || u(t), d(!1), (n = Q.current) == null || n.focus();
+    }, L = (e) => {
+      e.preventDefault();
+    }, _ = !!(v && v.length > 0) && r.length === 0, Oe = S(
+      () => nt(y),
+      [y]
+    ), Qe = !!P, Ge = !!z || V, Le = dt({
+      size: we,
+      tone: $e,
+      className: Ie
+    }), Ke = S(() => {
+      if (!p) return;
+      const [e, t] = p.split(":");
+      if (!(!t || e !== "recent" && e !== "option"))
+        return Y(g, e, t);
+    }, [p, g]), $ = y.length > 0, ue = !_ && !$ && !V && r.length > 0, ce = V && !$, Se = _ || $ || ue || ce, K = c(r);
+    N(() => {
+      K.current = r;
+    }, [r]);
+    const pe = c(i);
+    N(() => {
+      pe.current = i;
+    }, [i]);
+    const Xe = S(
+      () => ({
+        getValue: () => K.current || null,
+        getQuery: () => K.current,
+        getIsOpen: () => pe.current,
+        setValue: (e) => {
+          f(e ?? "");
+        },
+        setQuery: (e) => {
+          f(e);
+        },
+        clear: () => {
+          f("");
+        },
+        open: () => {
+          d(!0);
+        },
+        close: () => {
+          d(!1);
+        }
+      }),
+      [f]
+    );
+    rt(it, Xe, j);
+    const Je = y.length, We = V ? x("ui.common.loading", "Loading…") : i && r.length > 0 ? x("ui.inputs.autocomplete.results", {
+      count: Je,
+      defaultValue: "{{count}} results"
+    }) : "";
+    return /* @__PURE__ */ o(
+      m,
+      {
+        shouldFilter: !1,
+        value: p,
+        onValueChange: Fe,
+        label: te ?? ee,
+        className: "ds:w-full",
+        children: /* @__PURE__ */ D(
+          A.Root,
+          {
+            open: i && !h && !b && Se,
+            children: [
+              /* @__PURE__ */ o(A.Anchor, { asChild: !0, children: /* @__PURE__ */ D(
+                "div",
+                {
+                  className: Le,
+                  "data-component": "autocomplete",
+                  "data-component-id": j,
+                  "data-disabled": h || void 0,
+                  children: [
+                    P ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: `${W} ds:ps-3`, children: P }) : null,
+                    /* @__PURE__ */ o(
+                      m.Input,
+                      {
+                        ref: Be,
+                        id: g,
+                        name: Ve,
+                        placeholder: ee,
+                        value: r,
+                        onValueChange: Pe,
+                        onFocus: Ue,
+                        onBlur: qe,
+                        onKeyDown: He,
+                        onCompositionStart: ze,
+                        onCompositionEnd: je,
+                        disabled: h,
+                        readOnly: b,
+                        required: _e,
+                        role: "combobox",
+                        "aria-autocomplete": "both",
+                        "aria-expanded": i,
+                        "aria-controls": i ? se : void 0,
+                        "aria-activedescendant": Ke,
+                        "aria-describedby": De,
+                        "aria-invalid": ne || void 0,
+                        "aria-label": te,
+                        autoComplete: "off",
+                        className: lt({ hasStart: Qe, hasEnd: Ge })
+                      }
+                    ),
+                    V ? /* @__PURE__ */ o("span", { className: `${W} ds:pe-3`, "aria-hidden": "true", children: /* @__PURE__ */ o(me, { size: "sm" }) }) : z ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: `${W} ds:pe-3`, children: z }) : null,
+                    /* @__PURE__ */ o(
+                      "span",
+                      {
+                        id: Ee,
+                        role: "status",
+                        "aria-live": "polite",
+                        "aria-atomic": "true",
+                        className: "ds:sr-only",
+                        children: We
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ o(A.Portal, { forceMount: !0, children: /* @__PURE__ */ o(
+                A.Content,
+                {
+                  ref: G,
+                  forceMount: !0,
+                  hidden: !i,
+                  side: "bottom",
+                  align: "start",
+                  sideOffset: 4,
+                  onOpenAutoFocus: (e) => e.preventDefault(),
+                  onCloseAutoFocus: (e) => e.preventDefault(),
+                  onPointerDownOutside: (e) => {
+                    var n;
+                    const t = e.target;
+                    if (t && ((n = Q.current) != null && n.contains(t))) {
+                      e.preventDefault();
+                      return;
+                    }
+                    d(!1);
+                  },
+                  onEscapeKeyDown: () => d(!1),
+                  onMouseDown: L,
+                  className: ut(),
+                  children: /* @__PURE__ */ D(
+                    m.List,
+                    {
+                      id: se,
+                      className: "ds:max-h-[min(24rem,var(--radix-popover-content-available-height))] ds:overflow-auto ds:p-1",
+                      children: [
+                        _ ? /* @__PURE__ */ o(
+                          m.Group,
+                          {
+                            heading: x("ui.inputs.autocomplete.recent", "Recent"),
+                            className: he,
+                            children: (v ?? []).map((e) => /* @__PURE__ */ o(
+                              m.Item,
+                              {
+                                id: Y(g, "recent", e.value),
+                                value: ve("recent", e.value),
+                                disabled: e.disabled,
+                                onSelect: () => le("recent", e),
+                                onMouseDown: L,
+                                className: ge(),
+                                children: e.label
+                              },
+                              `recent-${e.value}`
+                            ))
+                          }
+                        ) : null,
+                        ue ? /* @__PURE__ */ o("div", { className: "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", children: x("ui.inputs.autocomplete.noResults", "No results") }) : null,
+                        ce ? /* @__PURE__ */ D("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", children: [
+                          /* @__PURE__ */ o(me, { size: "sm" }),
+                          /* @__PURE__ */ o("span", { children: x("ui.common.loading", "Loading…") })
+                        ] }) : null,
+                        !_ && $ ? Oe.map((e, t) => {
+                          const n = e.items.map((a) => /* @__PURE__ */ o(
+                            m.Item,
+                            {
+                              id: Y(g, "option", a.value),
+                              value: ve("option", a.value),
+                              disabled: a.disabled,
+                              onSelect: () => le("option", a),
+                              onMouseDown: L,
+                              className: ge(),
+                              children: a.label
+                            },
+                            `option-${a.value}`
+                          ));
+                          return e.group ? /* @__PURE__ */ o(
+                            m.Group,
+                            {
+                              heading: e.group,
+                              className: he,
+                              children: n
+                            },
+                            `group-${e.group}`
+                          ) : /* @__PURE__ */ o(m.Group, { children: n }, `group-${t}`);
+                        }) : null
+                      ]
+                    }
+                  )
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+), pt = ct;
+pt.displayName = "Autocomplete";
+export {
+  pt as A,
+  it as a,
+  dt as b
+};
+//# sourceMappingURL=autocomplete-D4oUZbsP.js.map

package/dist/_chunks/{badge-mrstWxve.js → badge-DKFbntoa.js}

@@ -41,18 +41,21 @@ const z = r(
       shape: "pill"
     }
   }
-), N = r("ds:text-[length:var(--font-size-dot)] ds:leading-none ds:shrink-0", {
-  variants: {
-    variant: {
-      neutral: "ds:text-muted-foreground",
-      info: "ds:text-info",
-      success: "ds:text-success",
-      warning: "ds:text-warning",
-      error: "ds:text-destructive"
-    }
-  },
-  defaultVariants: { variant: "neutral" }
-}), V = r("ds:shrink-0 ds:[&>svg]:block", {
+), N = r(
+  "ds:text-[length:var(--font-size-dot)] ds:leading-none ds:shrink-0",
+  {
+    variants: {
+      variant: {
+        neutral: "ds:text-muted-foreground",
+        info: "ds:text-info",
+        success: "ds:text-success",
+        warning: "ds:text-warning",
+        error: "ds:text-destructive"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
+  }
+), V = r("ds:shrink-0 ds:[&>svg]:block", {
   variants: {
     size: {
       // Icons shrink with the compact Badge scale: sm badge is 16 px tall, so
@@ -102,4 +105,4 @@ j.displayName = "Badge";
 export {
   j as B
 };
-//# sourceMappingURL=badge-mrstWxve.js.map
+//# sourceMappingURL=badge-DKFbntoa.js.map