@alfadocs/ui-kit 0.1.6 → 0.1.8

package/README.md

@@ -12,6 +12,24 @@ npm install @alfadocs/ui-kit
 
 Requires React 18+ and Node ≥ 22.6.
 
+### Source maps (optional)
+
+The default `@alfadocs/ui-kit` tarball ships without `.map` files to keep
+installs small (~680 KB tarball). Browsers only request source maps on
+demand when devtools is open, so end-users don't pay this cost regardless.
+
+If you need symbolicated stack traces (Sentry / Rollbar uploads, in-browser
+debugging of kit internals), install the `-debug` sibling instead. Both
+packages are runtime-identical and version-locked:
+
+```jsonc
+// package.json — alias-install so imports still resolve as @alfadocs/ui-kit
+"@alfadocs/ui-kit": "npm:@alfadocs/ui-kit-debug@^0.1.8"
+```
+
+Or as a separate dev-only dep if your error reporter accepts maps from a
+sibling package.
+
 ## Usage
 
 ### Tokens

package/dist/_chunks/{balance-cell-renderer-BRWt3neo.js → balance-cell-renderer-BWm3knY9.js}

@@ -8,7 +8,7 @@ import { AgGridReact as He } from "ag-grid-react";
 import { ModuleRegistry as qe, AllCommunityModule as We } from "ag-grid-community";
 import { B as Ue } from "./button-7mLWcMp_.js";
 import { I as P } from "./icon-button-Wnnde5lc.js";
-import { P as E } from "./popover-DvAtFOi-.js";
+import { P as E } from "./popover-C3CTUsqh.js";
 import { C as Je } from "./checkbox-DNK4qS2_.js";
 import { c as te } from "./createLucideIcon-CrFbzy84.js";
 import { P as Ze } from "./printer-CeVEWfQq.js";
@@ -993,4 +993,4 @@ export {
   mt as f,
   aa as u
 };
-//# sourceMappingURL=balance-cell-renderer-BRWt3neo.js.map
+//# sourceMappingURL=balance-cell-renderer-BWm3knY9.js.map

package/dist/_chunks/{chat-container-BZvQ3_yT.js → chat-container-Cm3SlR2p.js}

@@ -47,26 +47,26 @@ const S = b(
     showScrollToLatest: N = !1,
     ...k
   }, I) => {
-    const { t: u } = E(), n = h(null), f = h(null), [d, y] = R(!0), p = H(), r = V(
+    const { t: u } = E(), n = h(null), f = h(null), [d, y] = R(!0), p = H(), i = V(
       (s) => {
         const e = n.current;
         if (!e) return;
-        const i = ((s == null ? void 0 : s.smooth) ?? !0) && !p;
-        e.scrollTo({ top: e.scrollHeight, behavior: i ? "smooth" : "auto" });
+        const r = ((s == null ? void 0 : s.smooth) ?? !0) && !p;
+        e.scrollTo({ top: e.scrollHeight, behavior: r ? "smooth" : "auto" });
       },
       [p]
     );
     L(
       I,
       () => ({
-        scrollToBottom: r,
+        scrollToBottom: i,
         getScrollViewport: () => n.current
       }),
-      [r]
+      [i]
     ), B(() => {
       const s = n.current, e = f.current;
       if (!s || !e) return;
-      const i = new IntersectionObserver(
+      const r = new IntersectionObserver(
         (_) => {
           const g = _[0];
           y(g.isIntersecting), o == null || o(g.isIntersecting);
@@ -78,12 +78,12 @@ const S = b(
           threshold: 0
         }
       );
-      return i.observe(e), () => i.disconnect();
+      return r.observe(e), () => r.disconnect();
     }, [o]);
     const T = a.length;
     C(() => {
-      d && r({ smooth: !1 });
-    }, [T, d, r]);
+      d && i({ smooth: !1 });
+    }, [T, d, i]);
     const v = a.length > D, l = O({
       count: v ? a.length : 0,
       getScrollElement: () => n.current,
@@ -157,13 +157,13 @@ const S = b(
                 size: "sm",
                 variant: "secondary",
                 position: "static",
-                onClick: () => r({ smooth: !0 })
+                onClick: () => i({ smooth: !0 })
               }
             ) })
           }
         ) : null
       ] }),
-      m ? /* @__PURE__ */ t("div", { className: "ds:shrink-0 ds:border-t ds:border-border ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)] ds:bg-background", children: m }) : null
+      m ? /* @__PURE__ */ t("div", { className: "ds:shrink-0 ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)] ds:bg-background", children: m }) : null
     ] });
   }
 );
@@ -171,4 +171,4 @@ K.displayName = "ChatContainer";
 export {
   K as C
 };
-//# sourceMappingURL=chat-container-BZvQ3_yT.js.map
+//# sourceMappingURL=chat-container-Cm3SlR2p.js.map

package/dist/_chunks/{chat-input-DsIrWM4f.js → chat-input-DreOPP8A.js}

@@ -1,5 +1,5 @@
-import { jsxs as d, jsx as s, Fragment as ge } from "react/jsx-runtime";
-import { forwardRef as he, useId as ve, useRef as F, useCallback as K, useState as be, useLayoutEffect as ye } from "react";
+import { jsxs as c, jsx as s, Fragment as ge } from "react/jsx-runtime";
+import { forwardRef as he, useId as ve, useRef as w, useCallback as K, useState as be, useLayoutEffect as ye } from "react";
 import { c as xe } from "./index-D2ZczOXr.js";
 import { useTranslation as Ie } from "react-i18next";
 import { I as W } from "./icon-button-Wnnde5lc.js";
@@ -20,13 +20,18 @@ const ze = [
       key: "1miecu"
     }
   ]
-], Fe = Ce("paperclip", ze), we = xe(
+], we = Ce("paperclip", ze), Fe = xe(
   [
     "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:w-full",
-    "ds:rounded-[var(--radius-md)] ds:border ds:border-border",
+    // Soft drop-shadow + transparent border replaces a flat
+    // `border-border` (grey-800 since the WCAG 1.4.11 bump). Border kept
+    // at 1px so the focus-within color override + forced-colors
+    // fallback still paint a visible edge.
+    "ds:rounded-[var(--radius-md)] ds:shadow-[var(--shadow-sm)] ds:border ds:border-transparent",
     "ds:bg-background ds:focus-within:border-[color:var(--primary)]",
     "ds:transition-[border-color] ds:duration-[var(--animation-duration)]",
-    "ds:motion-reduce:transition-none"
+    "ds:motion-reduce:transition-none",
+    "ds:forced-colors:border-[CanvasText]"
   ].join(" "),
   {
     variants: {
@@ -44,19 +49,19 @@ function He(u, p) {
     try {
       const f = new Intl.Segmenter(p, { granularity: "grapheme" });
       let t = 0;
-      for (const w of f.segment(u)) t += 1;
+      for (const F of f.segment(u)) t += 1;
       return t;
     } catch {
     }
   return Array.from(u).length;
 }
-const je = he(
+const Te = he(
   ({
     size: u = "md",
     value: p,
     defaultValue: f,
     maxLength: t,
-    submitOnEnter: w = !1,
+    submitOnEnter: F = !1,
     minRows: y = 1,
     maxRows: H = 8,
     onSubmit: x,
@@ -64,7 +69,7 @@ const je = he(
     accept: Y,
     disabled: g,
     toolbar: q,
-    label: j,
+    label: T,
     placeholder: G,
     className: J,
     onChange: I,
@@ -74,17 +79,17 @@ const je = he(
     id: L,
     ...O
   }, i) => {
-    const { t: n, i18n: Q } = Ie(), U = ve(), h = F(!1), B = F(null), M = F(null), X = K(
+    const { t: n, i18n: Q } = Ie(), U = ve(), h = w(!1), j = w(null), B = w(null), X = K(
       (e) => {
-        M.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+        B.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
       },
       [i]
-    ), o = p !== void 0, [Z, T] = be(
+    ), o = p !== void 0, [Z, M] = be(
       String(f ?? "")
     ), a = o ? String(p) : Z, z = He(a, Q.language), v = typeof t == "number" && t > 0, D = v ? Math.max(0, t - z) : 0, A = v && z > t * 0.9, l = v && z >= t, E = K(() => {
-      const e = M.current;
+      const e = B.current;
       if (!e) return;
-      const r = window.getComputedStyle(e), b = parseFloat(r.lineHeight) || 24, ce = parseFloat(r.paddingTop) || 0, de = parseFloat(r.paddingBottom) || 0, ue = parseFloat(r.borderTopWidth) || 0, pe = parseFloat(r.borderBottomWidth) || 0, R = ce + de + ue + pe, fe = b * y + R, _ = b * H + R;
+      const r = window.getComputedStyle(e), b = parseFloat(r.lineHeight) || 24, de = parseFloat(r.paddingTop) || 0, ce = parseFloat(r.paddingBottom) || 0, ue = parseFloat(r.borderTopWidth) || 0, pe = parseFloat(r.borderBottomWidth) || 0, R = de + ce + ue + pe, fe = b * y + R, _ = b * H + R;
       e.style.height = "auto";
       const me = Math.max(fe, Math.min(e.scrollHeight, _));
       e.style.height = `${me}px`, e.style.overflowY = e.scrollHeight > _ ? "auto" : "hidden";
@@ -93,31 +98,31 @@ const je = he(
       E();
     }, [E, a]);
     const ee = (e) => {
-      o || T(e.target.value), !h.current && (I == null || I(e));
+      o || M(e.target.value), !h.current && (I == null || I(e));
     }, te = (e) => {
       h.current = !0, N == null || N(e);
     }, se = (e) => {
       h.current = !1, k == null || k(e);
     }, re = (e) => e.nativeEvent.isComposing || e.keyCode === 229 || h.current, V = () => {
-      !a.trim() || g || l || (x == null || x(a), o || T(""));
+      !a.trim() || g || l || (x == null || x(a), o || M(""));
     }, ne = (e) => {
       if (C == null || C(e), !e.defaultPrevented && !re(e) && e.key === "Enter") {
-        const r = e.metaKey || e.ctrlKey, b = w && !e.shiftKey;
+        const r = e.metaKey || e.ctrlKey, b = F && !e.shiftKey;
         (r || b) && (e.preventDefault(), V());
       }
     }, ae = () => {
       var e;
-      (e = B.current) == null || e.click();
+      (e = j.current) == null || e.click();
     }, ie = (e) => {
       e.target.files && e.target.files.length > 0 && (m == null || m(e.target.files)), e.target.value = "";
-    }, c = L ?? U, P = `${c}-label`, S = v ? `${c}-counter` : void 0, $ = `${c}-hint`, oe = G ?? n("chat.input.placeholder"), le = j ?? n("chat.prompt");
-    return /* @__PURE__ */ d("div", { "data-component": "chat-input", className: we({ size: u, className: J }), children: [
-      /* @__PURE__ */ s("label", { id: P, htmlFor: c, className: j ? "type-label ds:ps-[var(--spacing-sm)] ds:pt-[var(--spacing-sm)]" : "ds:sr-only", children: le }),
+    }, d = L ?? U, P = `${d}-label`, S = v ? `${d}-counter` : void 0, $ = `${d}-hint`, oe = G ?? n("chat.input.placeholder"), le = T ?? n("chat.prompt");
+    return /* @__PURE__ */ c("div", { "data-component": "chat-input", className: Fe({ size: u, className: J }), children: [
+      /* @__PURE__ */ s("label", { id: P, htmlFor: d, className: T ? "type-label ds:ps-[var(--spacing-sm)] ds:pt-[var(--spacing-sm)]" : "ds:sr-only", children: le }),
       /* @__PURE__ */ s(
         "textarea",
         {
           ref: X,
-          id: c,
+          id: d,
           value: o ? a : void 0,
           defaultValue: o ? void 0 : f,
           disabled: g,
@@ -149,12 +154,12 @@ const je = he(
           ...O
         }
       ),
-      /* @__PURE__ */ d("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]", children: [
-        m ? /* @__PURE__ */ d(ge, { children: [
+      /* @__PURE__ */ c("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]", children: [
+        m ? /* @__PURE__ */ c(ge, { children: [
           /* @__PURE__ */ s(
             "input",
             {
-              ref: B,
+              ref: j,
               type: "file",
               className: "ds:sr-only",
               multiple: !0,
@@ -165,7 +170,7 @@ const je = he(
           /* @__PURE__ */ s(
             W,
             {
-              icon: /* @__PURE__ */ s(Fe, {}),
+              icon: /* @__PURE__ */ s(we, {}),
               "aria-label": n("chat.input.attach"),
               intent: "ghost",
               size: "sm",
@@ -175,8 +180,8 @@ const je = he(
           )
         ] }) : null,
         q,
-        /* @__PURE__ */ d("div", { className: "ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
-          A ? /* @__PURE__ */ d(
+        /* @__PURE__ */ c("div", { className: "ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+          A ? /* @__PURE__ */ c(
             "span",
             {
               id: S,
@@ -214,8 +219,8 @@ const je = he(
     ] });
   }
 );
-je.displayName = "ChatInput";
+Te.displayName = "ChatInput";
 export {
-  je as C
+  Te as C
 };
-//# sourceMappingURL=chat-input-DsIrWM4f.js.map
+//# sourceMappingURL=chat-input-DreOPP8A.js.map

package/dist/_chunks/{dropdown-menu-JNo66A-j.js → dropdown-menu-Cw3EyPZv.js}

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as t } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
-import * as d from "@radix-ui/react-dropdown-menu";
+import * as o from "@radix-ui/react-dropdown-menu";
 import { c as l } from "./index-D2ZczOXr.js";
 import { S as M } from "./separator-B4wXDLNC.js";
 import { K as m } from "./kbd-8baVw3KU.js";
@@ -12,7 +12,11 @@ const u = l(
     "ds:z-[var(--z-dropdown)]",
     "ds:min-w-[8rem]",
     "ds:rounded-[var(--radius-md)]",
-    "ds:border ds:border-[color:var(--border)]",
+    // Border kept (transparent) so the forced-colors override below can
+    // repaint a visible edge in HCM. In normal modes the soft drop-shadow
+    // carries the edge cue; the heavy `--border` (grey-800 since WCAG
+    // 1.4.11 bump in 67fef8c) made the menu read as a charcoal box.
+    "ds:border ds:border-transparent",
     "ds:bg-[var(--popover)] ds:text-[color:var(--popover-foreground)]",
     "ds:shadow-[var(--shadow-lg)]",
     "ds:p-[var(--spacing-xs)]",
@@ -50,28 +54,28 @@ const u = l(
     "type-eyebrow ds:text-[color:var(--muted-foreground)]",
     "ds:select-none"
   ].join(" ")
-), f = "ds:inline-flex ds:items-center ds:justify-center ds:size-4 ds:shrink-0", h = ({ dir: o, ...e }) => {
+), f = "ds:inline-flex ds:items-center ds:justify-center ds:size-4 ds:shrink-0", h = ({ dir: d, ...e }) => {
   const a = j();
-  return /* @__PURE__ */ s(d.Root, { dir: o ?? a, ...e });
+  return /* @__PURE__ */ s(o.Root, { dir: d ?? a, ...e });
 };
 h.displayName = "DropdownMenu.Root";
-const T = d.Trigger, G = d.Portal, P = d.Group, L = d.RadioGroup, v = r(({ className: o, sideOffset: e = 8, ...a }, n) => /* @__PURE__ */ s(d.Portal, { children: /* @__PURE__ */ s(
-  d.Content,
+const T = o.Trigger, G = o.Portal, P = o.Group, L = o.RadioGroup, v = r(({ className: d, sideOffset: e = 8, ...a }, n) => /* @__PURE__ */ s(o.Portal, { children: /* @__PURE__ */ s(
+  o.Content,
   {
     ref: n,
     sideOffset: e,
-    className: u({ className: o }),
+    className: u({ className: d }),
     "data-component": "dropdown-menu",
     ...a
   }
 ) }));
 v.displayName = "DropdownMenu.Content";
 const g = r(
-  ({ className: o, startIcon: e, endIcon: a, description: n, shortcut: i, children: D, ...z }, R) => /* @__PURE__ */ t(
-    d.Item,
+  ({ className: d, startIcon: e, endIcon: a, description: n, shortcut: i, children: D, ...z }, R) => /* @__PURE__ */ t(
+    o.Item,
     {
       ref: R,
-      className: c({ className: o }),
+      className: c({ className: d }),
       ...z,
       children: [
         e ? /* @__PURE__ */ s(
@@ -99,27 +103,27 @@ const g = r(
   )
 );
 g.displayName = "DropdownMenu.Item";
-const x = r(({ className: o, children: e, ...a }, n) => /* @__PURE__ */ t(
-  d.CheckboxItem,
+const x = r(({ className: d, children: e, ...a }, n) => /* @__PURE__ */ t(
+  o.CheckboxItem,
   {
     ref: n,
-    className: c({ className: o }),
+    className: c({ className: d }),
     ...a,
     children: [
-      /* @__PURE__ */ s("span", { className: f, children: /* @__PURE__ */ s(d.ItemIndicator, { children: /* @__PURE__ */ s(p, { "aria-hidden": !0, className: "ds:size-4" }) }) }),
+      /* @__PURE__ */ s("span", { className: f, children: /* @__PURE__ */ s(o.ItemIndicator, { children: /* @__PURE__ */ s(p, { "aria-hidden": !0, className: "ds:size-4" }) }) }),
       /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: e })
     ]
   }
 ));
 x.displayName = "DropdownMenu.CheckboxItem";
-const K = L, N = r(({ className: o, children: e, ...a }, n) => /* @__PURE__ */ t(
-  d.RadioItem,
+const K = L, N = r(({ className: d, children: e, ...a }, n) => /* @__PURE__ */ t(
+  o.RadioItem,
   {
     ref: n,
-    className: c({ className: o }),
+    className: c({ className: d }),
     ...a,
     children: [
-      /* @__PURE__ */ s("span", { className: f, children: /* @__PURE__ */ s(d.ItemIndicator, { children: /* @__PURE__ */ s(
+      /* @__PURE__ */ s("span", { className: f, children: /* @__PURE__ */ s(o.ItemIndicator, { children: /* @__PURE__ */ s(
         p,
         {
           "aria-hidden": !0,
@@ -131,31 +135,31 @@ const K = L, N = r(({ className: o, children: e, ...a }, n) => /* @__PURE__ */ t
   }
 ));
 N.displayName = "DropdownMenu.RadioItem";
-const b = r(({ className: o, ...e }, a) => /* @__PURE__ */ s(
-  d.Label,
+const b = r(({ className: d, ...e }, a) => /* @__PURE__ */ s(
+  o.Label,
   {
     ref: a,
-    className: I({ className: o }),
+    className: I({ className: d }),
     ...e
   }
 ));
 b.displayName = "DropdownMenu.Label";
-const w = r(({ className: o, ...e }, a) => /* @__PURE__ */ s(d.Separator, { ref: a, asChild: !0, ...e, children: /* @__PURE__ */ s(
+const w = r(({ className: d, ...e }, a) => /* @__PURE__ */ s(o.Separator, { ref: a, asChild: !0, ...e, children: /* @__PURE__ */ s(
   M,
   {
-    className: ["ds:my-[calc(var(--spacing-xs)/2)]", o ?? ""].filter(Boolean).join(" ")
+    className: ["ds:my-[calc(var(--spacing-xs)/2)]", d ?? ""].filter(Boolean).join(" ")
   }
 ) }));
 w.displayName = "DropdownMenu.Separator";
 const y = r(
-  ({ keys: o, separator: e = "none" }, a) => /* @__PURE__ */ s("span", { ref: a, className: "ds:ms-auto ds:ps-[var(--spacing-sm)]", children: /* @__PURE__ */ s(m, { keys: o, separator: e, size: "sm" }) })
+  ({ keys: d, separator: e = "none" }, a) => /* @__PURE__ */ s("span", { ref: a, className: "ds:ms-auto ds:ps-[var(--spacing-sm)]", children: /* @__PURE__ */ s(m, { keys: d, separator: e, size: "sm" }) })
 );
 y.displayName = "DropdownMenu.Shortcut";
-const B = d.Sub, C = r(({ className: o, startIcon: e, children: a, ...n }, i) => /* @__PURE__ */ t(
-  d.SubTrigger,
+const B = o.Sub, C = r(({ className: d, startIcon: e, children: a, ...n }, i) => /* @__PURE__ */ t(
+  o.SubTrigger,
   {
     ref: i,
-    className: c({ className: o }),
+    className: c({ className: d }),
     ...n,
     children: [
       e ? /* @__PURE__ */ s(
@@ -178,12 +182,12 @@ const B = d.Sub, C = r(({ className: o, startIcon: e, children: a, ...n }, i) =>
   }
 ));
 C.displayName = "DropdownMenu.SubTrigger";
-const S = r(({ className: o, ...e }, a) => /* @__PURE__ */ s(d.Portal, { children: /* @__PURE__ */ s(
-  d.SubContent,
+const S = r(({ className: d, ...e }, a) => /* @__PURE__ */ s(o.Portal, { children: /* @__PURE__ */ s(
+  o.SubContent,
   {
     ref: a,
     sideOffset: 8,
-    className: u({ className: o }),
+    className: u({ className: d }),
     ...e
   }
 ) }));
@@ -208,4 +212,4 @@ const Q = {
 export {
   Q as D
 };
-//# sourceMappingURL=dropdown-menu-JNo66A-j.js.map
+//# sourceMappingURL=dropdown-menu-Cw3EyPZv.js.map