@donkit-ai/design-system 1.4.57 → 1.4.59

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import V, { useState as A, useRef as R, useEffect as B, useLayoutEffect as Ze, useContext as Ee, createContext as Qe, useCallback as qe } from "react";
-import { Check as $e, X as ee, ChevronDown as ve, Minus as et, Plus as tt, XCircle as Te, AlertTriangle as Re, CheckCircle as Se, Info as Ae, ChevronUp as st, ChevronsUpDown as nt, ChevronLeft as rt, ChevronRight as at, Copy as ot, Brain as it, Loader as lt, Paperclip as Le, Square as ct, ArrowUp as dt, Zap as ut, Cpu as Pe, FileText as ft, ThumbsUp as mt, ThumbsDown as pt } from "lucide-react";
+import V, { useState as A, useRef as R, useEffect as B, useLayoutEffect as Ze, useContext as Ee, createContext as Qe, useCallback as $e } from "react";
+import { Check as Te, X as ee, ChevronDown as ve, Minus as et, Plus as tt, XCircle as Re, AlertTriangle as Se, CheckCircle as Ae, Info as Ie, ChevronUp as st, ChevronsUpDown as nt, ChevronLeft as rt, ChevronRight as at, Copy as ot, Brain as it, Loader as lt, Paperclip as Pe, Square as ct, ArrowUp as dt, Zap as ut, Cpu as Me, FileText as ft, ThumbsUp as mt, ThumbsDown as pt } from "lucide-react";
 import pe from "react-dom";
 const P = {
   1: 16,
@@ -18,10 +18,10 @@ var ge = { exports: {} }, he = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Me;
+var ze;
 function ht() {
-  if (Me) return he;
-  Me = 1;
+  if (ze) return he;
+  ze = 1;
   var t = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
   function n(a, o, r) {
     var i = null;
@@ -50,9 +50,9 @@ var xe = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ze;
+var Oe;
 function xt() {
-  return ze || (ze = 1, process.env.NODE_ENV !== "production" && function() {
+  return Oe || (Oe = 1, process.env.NODE_ENV !== "production" && function() {
     function t(f) {
       if (f == null) return null;
       if (typeof f == "function")
@@ -310,7 +310,7 @@ function ae({
   className: p = "",
   ...h
 }) {
-  const c = o && !t, v = i === "loading", _ = i === "success", g = i === "error", y = v || _ || g, k = n === "xs" ? "s" : "m", j = s === "danger" ? "on-accent" : "default", S = _t[n] ?? 16, M = v ? /* @__PURE__ */ e.jsx(vt, { size: k, color: j }) : _ ? /* @__PURE__ */ e.jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ e.jsx($e, { size: S, strokeWidth: 2.5 }) }) : g ? /* @__PURE__ */ e.jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ e.jsx(ee, { size: S, strokeWidth: 2.5 }) }) : null, D = [
+  const c = o && !t, v = i === "loading", _ = i === "success", g = i === "error", y = v || _ || g, k = n === "xs" ? "s" : "m", j = s === "danger" ? "on-accent" : "default", S = _t[n] ?? 16, M = v ? /* @__PURE__ */ e.jsx(vt, { size: k, color: j }) : _ ? /* @__PURE__ */ e.jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ e.jsx(Te, { size: S, strokeWidth: 2.5 }) }) : g ? /* @__PURE__ */ e.jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ e.jsx(ee, { size: S, strokeWidth: 2.5 }) }) : null, D = [
     "ds-button",
     `ds-button--${s}`,
     `ds-button--${n}`,
@@ -760,39 +760,37 @@ function de({
   return /* @__PURE__ */ e.jsx("span", { className: r, role: i, ...o, children: t });
 }
 const jt = {
-  info: Ae,
-  success: Se,
-  warning: Re,
-  error: Te
-};
-function xs({
-  children: t,
-  variant: s = "info",
-  title: n,
-  onClose: a,
-  role: o,
-  ...r
-}) {
-  const i = jt[s], l = o || (s === "error" ? "alert" : "status");
-  return /* @__PURE__ */ e.jsxs("div", { className: `ds-alert ds-alert--${s} ${n ? "" : "ds-alert--no-title"}`, role: l, ...r, children: [
-    i && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__icon", children: /* @__PURE__ */ e.jsx(i, { size: P[3], strokeWidth: 1.5 }) }),
+  info: Ie,
+  success: Ae,
+  warning: Se,
+  error: Re
+}, xs = V.forwardRef(function({
+  children: s,
+  variant: n = "info",
+  title: a,
+  onClose: o,
+  role: r,
+  ...i
+}, l) {
+  const u = jt[n], d = r || (n === "error" ? "alert" : "status");
+  return /* @__PURE__ */ e.jsxs("div", { ref: l, className: `ds-alert ds-alert--${n} ${a ? "" : "ds-alert--no-title"}`, role: d, ...i, children: [
+    u && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__icon", children: /* @__PURE__ */ e.jsx(u, { size: P[3], strokeWidth: 1.5 }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "ds-alert__content", children: [
-      n && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__title", children: n }),
-      t && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__message", children: t })
+      a && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__title", children: a }),
+      s && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__message", children: s })
     ] }),
-    a && /* @__PURE__ */ e.jsx(
+    o && /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "ds-alert__close",
-        onClick: a,
+        onClick: o,
         "aria-label": "Close alert",
         children: /* @__PURE__ */ e.jsx(ee, { size: P[3], strokeWidth: 1.5 })
       }
     )
   ] });
-}
-const Nt = 200;
+}), Nt = 200;
 function vs({
   children: t,
   title: s,
@@ -1088,7 +1086,7 @@ function gs({ options: t, value: s, onChange: n, size: a = "m", disabled: o = !1
     }
   );
 }
-function Ie({
+function Be({
   children: t,
   title: s,
   defaultExpanded: n = !1,
@@ -1278,7 +1276,7 @@ function ks({
       }
     ),
     /* @__PURE__ */ e.jsx("span", { className: "ds-checkbox__box", children: t && /* @__PURE__ */ e.jsx(
-      $e,
+      Te,
       {
         size: d,
         strokeWidth: 2.5,
@@ -1662,7 +1660,7 @@ function Cs({
       document.removeEventListener("keydown", c), document.removeEventListener("mousedown", v);
     };
   }, [n, l]);
-  const m = V.Children.toArray(t), p = m.find((c) => (c == null ? void 0 : c.type) === Oe), h = m.filter((c) => (c == null ? void 0 : c.type) !== Oe);
+  const m = V.Children.toArray(t), p = m.find((c) => (c == null ? void 0 : c.type) === Ce), h = m.filter((c) => (c == null ? void 0 : c.type) !== Ce);
   return /* @__PURE__ */ e.jsx(
     "div",
     {
@@ -1690,7 +1688,7 @@ function Cs({
     }
   );
 }
-function Oe({ children: t }) {
+function Ce({ children: t }) {
   return /* @__PURE__ */ e.jsx("footer", { className: "ds-drawer-footer", children: t });
 }
 const It = 320;
@@ -1718,7 +1716,7 @@ function Fs({
       document.removeEventListener("keydown", c), document.removeEventListener("mousedown", v);
     };
   }, [n, l]);
-  const m = V.Children.toArray(t), p = m.find((c) => (c == null ? void 0 : c.type) === Ce || (c == null ? void 0 : c.type) === fe), h = m.filter((c) => (c == null ? void 0 : c.type) !== Ce && (c == null ? void 0 : c.type) !== fe);
+  const m = V.Children.toArray(t), p = m.find((c) => (c == null ? void 0 : c.type) === Fe || (c == null ? void 0 : c.type) === fe), h = m.filter((c) => (c == null ? void 0 : c.type) !== Fe && (c == null ? void 0 : c.type) !== fe);
   return /* @__PURE__ */ e.jsx(
     "div",
     {
@@ -1756,7 +1754,7 @@ function Fs({
     }
   );
 }
-function Ce({ children: t }) {
+function Fe({ children: t }) {
   return !t || V.Children.count(t) === 0 ? null : /* @__PURE__ */ e.jsx("div", { className: "ds-side-page__footer", children: t });
 }
 const be = Qe({ collapsed: !1, side: "left" });
@@ -1869,10 +1867,10 @@ function Gs({ avatar: t, label: s, selected: n = !1, disabled: a = !1, href: o,
   return u ? /* @__PURE__ */ e.jsx(Ke, { content: s, position: v, children: _ }) : _;
 }
 const Bt = {
-  info: Ae,
-  success: Se,
-  warning: Re,
-  error: Te
+  info: Ie,
+  success: Ae,
+  warning: Se,
+  error: Re
 };
 function Xs({
   children: t,
@@ -2176,11 +2174,11 @@ function en({
     d && !m.current && (r == null || r()), !d && m.current && (i == null || i()), m.current = d;
   }, [d]), /* @__PURE__ */ e.jsx(s, { ref: u, ...l, children: typeof t == "function" ? t(d) : t });
 }
-const Fe = {
-  default: Ae,
-  success: Se,
-  warning: Re,
-  error: Te
+const We = {
+  default: Ie,
+  success: Ae,
+  warning: Se,
+  error: Re
 };
 let me = [];
 const ye = /* @__PURE__ */ new Set();
@@ -2211,7 +2209,7 @@ function Ct({ data: t, onDismiss: s }) {
   function r() {
     a(!1), setTimeout(() => s(t.id), 250);
   }
-  const i = Fe[t.type] ?? Fe.default;
+  const i = We[t.type] ?? We.default;
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -2274,7 +2272,7 @@ function nn({
       className: ["ds-tool-card", m && "ds-tool-card--running", u].filter(Boolean).join(" "),
       ...d,
       children: /* @__PURE__ */ e.jsx(
-        Ie,
+        Be,
         {
           title: p,
           padding: "s",
@@ -2324,7 +2322,7 @@ function rn({ content: t, streaming: s = !1, ...n }) {
   return B(() => {
     o(!!s);
   }, [s]), /* @__PURE__ */ e.jsx(
-    Ie,
+    Be,
     {
       expanded: a,
       onToggle: o,
@@ -2368,7 +2366,7 @@ function an({
           "aria-label": `Step ${d + 1}`,
           disabled: !h || d === s,
           onClick: () => a == null ? void 0 : a(d),
-          children: p ? /* @__PURE__ */ e.jsx($e, { size: 8, strokeWidth: 3 }) : null
+          children: p ? /* @__PURE__ */ e.jsx(Te, { size: 8, strokeWidth: 3 }) : null
         },
         d
       );
@@ -2546,8 +2544,8 @@ function dn({
     if (!I) return;
     const X = [];
     for (const Je of I) {
-      const De = Je.getAsFile();
-      De && X.push(De);
+      const Le = Je.getAsFile();
+      Le && X.push(Le);
     }
     if (X.length === 0) return;
     const { imageFiles: J, tooLarge: Z, skipped: te, limitExceeded: ce } = T(X);
@@ -2571,9 +2569,9 @@ function dn({
       }
     }
     o == null || o(N);
-  }, Xe = (t.trim() || (m == null ? void 0 : m.length) > 0 || (d == null ? void 0 : d.length) > 0) && !i, Be = p || h;
+  }, Xe = (t.trim() || (m == null ? void 0 : m.length) > 0 || (d == null ? void 0 : d.length) > 0) && !i, De = p || h;
   return /* @__PURE__ */ e.jsxs("div", { className: ["ds-prompt-input", M].filter(Boolean).join(" "), ...D, children: [
-    Be && /* @__PURE__ */ e.jsx(
+    De && /* @__PURE__ */ e.jsx(
       "input",
       {
         ref: H,
@@ -2639,7 +2637,7 @@ function dn({
             )
           ] }, N.id)) }),
           d && d.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "ds-prompt-input__attachments", children: d.map((N, I) => /* @__PURE__ */ e.jsx(de, { size: "xs", children: /* @__PURE__ */ e.jsxs("span", { className: "ds-prompt-input__badge-content", children: [
-            N.uploading ? /* @__PURE__ */ e.jsx(lt, { size: P[1], strokeWidth: 1.5, className: "spin" }) : /* @__PURE__ */ e.jsx(Le, { size: P[1], strokeWidth: 1.5 }),
+            N.uploading ? /* @__PURE__ */ e.jsx(lt, { size: P[1], strokeWidth: 1.5, className: "spin" }) : /* @__PURE__ */ e.jsx(Pe, { size: P[1], strokeWidth: 1.5 }),
             N.filename,
             N.uploading ? /* @__PURE__ */ e.jsx("span", { className: "ds-prompt-input__uploading", children: "Uploading..." }) : /* @__PURE__ */ e.jsx(
               "button",
@@ -2652,12 +2650,12 @@ function dn({
             )
           ] }) }, I)) }),
           /* @__PURE__ */ e.jsxs("div", { className: "ds-prompt-input__toolbar", children: [
-            Be && /* @__PURE__ */ e.jsx(
+            De && /* @__PURE__ */ e.jsx(
               ae,
               {
                 variant: "ghost",
                 size: "xs",
-                icon: /* @__PURE__ */ e.jsx(Le, { size: P[2], strokeWidth: 1.5 }),
+                icon: /* @__PURE__ */ e.jsx(Pe, { size: P[2], strokeWidth: 1.5 }),
                 "aria-label": "Attach files",
                 onClick: () => {
                   var N;
@@ -2694,7 +2692,7 @@ function dn({
     )
   ] });
 }
-const We = { fast: 0, standard: 1, premium: 2 }, Ue = { fast: "data-5", standard: "data-3", premium: "data-6" };
+const Ue = { fast: 0, standard: 1, premium: 2 }, Ve = { fast: "data-5", standard: "data-3", premium: "data-6" };
 function un({
   models: t = [],
   value: s,
@@ -2706,7 +2704,7 @@ function un({
   className: l = "",
   ...u
 }) {
-  const [d, m] = A(!1), p = R(null), h = R(null), c = R(null), [v, _] = A({}), g = t.filter((w) => !o || w.name === "auto" ? !0 : (We[w.tier] ?? 1) >= (We[o] ?? 1)), y = g.find((w) => w.name === "auto"), k = g.filter((w) => w.name !== "auto"), j = t.find((w) => w.name === s), M = new Set(k.map((w) => w.tier).filter(Boolean)).size > 1;
+  const [d, m] = A(!1), p = R(null), h = R(null), c = R(null), [v, _] = A({}), g = t.filter((w) => !o || w.name === "auto" ? !0 : (Ue[w.tier] ?? 1) >= (Ue[o] ?? 1)), y = g.find((w) => w.name === "auto"), k = g.filter((w) => w.name !== "auto"), j = t.find((w) => w.name === s), M = new Set(k.map((w) => w.tier).filter(Boolean)).size > 1;
   B(() => {
     if (!d) return;
     const w = 320, O = () => {
@@ -2744,9 +2742,9 @@ function un({
       ].filter(Boolean).join(" "),
       onClick: () => D(w.name),
       children: [
-        w.icon ? /* @__PURE__ */ e.jsx("span", { className: "ds-model-picker__item-icon", children: w.icon }) : /* @__PURE__ */ e.jsx(Pe, { size: 12, strokeWidth: 1.5, className: "ds-model-picker__item-icon" }),
+        w.icon ? /* @__PURE__ */ e.jsx("span", { className: "ds-model-picker__item-icon", children: w.icon }) : /* @__PURE__ */ e.jsx(Me, { size: 12, strokeWidth: 1.5, className: "ds-model-picker__item-icon" }),
         /* @__PURE__ */ e.jsx("span", { className: "ds-model-picker__item-name", children: w.displayName || w.name }),
-        M && w.tier && /* @__PURE__ */ e.jsx(de, { size: "xs", variant: Ue[w.tier] || "default", children: w.tier })
+        M && w.tier && /* @__PURE__ */ e.jsx(de, { size: "xs", variant: Ve[w.tier] || "default", children: w.tier })
       ]
     },
     w.name
@@ -2795,9 +2793,9 @@ function un({
             "aria-haspopup": "listbox",
             "aria-expanded": d,
             children: [
-              j != null && j.icon ? /* @__PURE__ */ e.jsx("span", { children: j.icon }) : /* @__PURE__ */ e.jsx(Pe, { size: 12, strokeWidth: 1.5 }),
+              j != null && j.icon ? /* @__PURE__ */ e.jsx("span", { children: j.icon }) : /* @__PURE__ */ e.jsx(Me, { size: 12, strokeWidth: 1.5 }),
               /* @__PURE__ */ e.jsx("span", { className: "ds-model-picker__trigger-name", children: (j == null ? void 0 : j.displayName) || (j == null ? void 0 : j.name) || s }),
-              M && (j == null ? void 0 : j.tier) && /* @__PURE__ */ e.jsx(de, { size: "xs", variant: Ue[j.tier] || "default", children: j.tier })
+              M && (j == null ? void 0 : j.tier) && /* @__PURE__ */ e.jsx(de, { size: "xs", variant: Ve[j.tier] || "default", children: j.tier })
             ]
           }
         ),
@@ -2854,7 +2852,7 @@ function fn({
     d.map((h) => {
       const c = h.items.map((_) => _.page).filter(Boolean), v = !!o;
       return m ? /* @__PURE__ */ e.jsx(
-        Ie,
+        Be,
         {
           title: /* @__PURE__ */ e.jsx(Yt, { filename: h.filename, pages: c }),
           padding: "s",
@@ -2889,7 +2887,7 @@ function fn({
     ] })
   ] });
 }
-function Ve(t) {
+function Ye(t) {
   return t >= 1e6 ? (t / 1e6).toFixed(1).replace(/\.0$/, "") + "M" : t >= 1e3 ? (t / 1e3).toFixed(1).replace(/\.0$/, "") + "K" : String(t);
 }
 function mn({
@@ -2919,11 +2917,11 @@ function mn({
         ) }),
         (a || o) && /* @__PURE__ */ e.jsxs("div", { className: `ds-token-counter__label ds-token-counter__label--${d}`, children: [
           a && /* @__PURE__ */ e.jsxs("span", { children: [
-            Ve(t),
+            Ye(t),
             " / ",
-            Ve(s)
+            Ye(s)
           ] }),
-          o && /* @__PURE__ */ e.jsxs("span", { children: [
+          o && /* @__PURE__ */ e.jsxs("span", { style: { marginLeft: "auto" }, children: [
             Math.round(l * 100),
             "%"
           ] })
@@ -2932,7 +2930,7 @@ function mn({
     }
   );
 }
-const Ye = 5;
+const qe = 5;
 function Ht(t) {
   return t < 0.34 ? "low" : t < 0.67 ? "medium" : "high";
 }
@@ -2942,14 +2940,14 @@ function pn({
   showLabel: n = "none",
   layout: a = "inline"
 }) {
-  const o = Math.max(0, Math.min(1, t)), r = Math.round(o * Ye), i = Ht(o);
+  const o = Math.max(0, Math.min(1, t)), r = Math.round(o * qe), i = Ht(o);
   return /* @__PURE__ */ e.jsxs("div", { className: [
     "ds-confidence-bar",
     `ds-confidence-bar--${s}`,
     `ds-confidence-bar--${i}`,
     a === "block" && "ds-confidence-bar--block"
   ].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ e.jsx("div", { className: "ds-confidence-bar__segments", "aria-hidden": "true", children: Array.from({ length: Ye }, (l, u) => /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx("div", { className: "ds-confidence-bar__segments", "aria-hidden": "true", children: Array.from({ length: qe }, (l, u) => /* @__PURE__ */ e.jsx(
       "div",
       {
         className: `ds-confidence-bar__seg${u < r ? " ds-confidence-bar__seg--filled" : ""}`
@@ -3202,7 +3200,7 @@ function jn({
 }) {
   const v = R(null), _ = R(t), g = R(s), y = R(l);
   _.current = t, g.current = s, y.current = l;
-  const [k, j] = A(!1), [S, M] = A({ position: "fixed", visibility: "hidden", width: we }), [D, H] = A("bottom"), [q, W] = A(null), w = R(!1), O = t[s], K = s === t.length - 1, C = qe(() => {
+  const [k, j] = A(!1), [S, M] = A({ position: "fixed", visibility: "hidden", width: we }), [D, H] = A("bottom"), [q, W] = A(null), w = R(!1), O = t[s], K = s === t.length - 1, C = $e(() => {
     const x = _.current[g.current];
     if (!x || !v.current) return;
     const b = es(x.target);
@@ -3321,7 +3319,7 @@ function jn({
   );
 }
 function Nn(t, s = {}) {
-  const { storageKey: n } = s, [a, o] = A(0), [r, i] = A(!1), l = () => n && typeof localStorage < "u" && localStorage.getItem(n) === "done", u = qe(() => {
+  const { storageKey: n } = s, [a, o] = A(0), [r, i] = A(!1), l = () => n && typeof localStorage < "u" && localStorage.getItem(n) === "done", u = $e(() => {
     i(!1), n && typeof localStorage < "u" && localStorage.setItem(n, "done");
   }, [n]);
   return {
@@ -3336,8 +3334,20 @@ function Nn(t, s = {}) {
     finish: u
   };
 }
+function wn() {
+  const t = R(null), s = $e(() => {
+    const n = t.current;
+    if (!n) return;
+    n.classList.remove("ds-shake"), n.offsetWidth, n.classList.add("ds-shake");
+    const a = () => {
+      n.classList.remove("ds-shake"), n.removeEventListener("animationend", a);
+    };
+    n.addEventListener("animationend", a);
+  }, []);
+  return { ref: t, shake: s };
+}
 export {
-  Ie as Accordion,
+  Be as Accordion,
   xs as Alert,
   Qs as AnimatedNumber,
   $s as Avatar,
@@ -3356,7 +3366,7 @@ export {
   Wt as CopyButton,
   hn as DiffView,
   Cs as Drawer,
-  Oe as DrawerFooter,
+  Ce as DrawerFooter,
   Js as Dropdown,
   Ls as EmptyState,
   _n as EngineerGrid,
@@ -3393,7 +3403,7 @@ export {
   gs as SegmentedControl,
   ls as Select,
   Fs as SidePage,
-  Ce as SidePageFooter,
+  Fe as SidePageFooter,
   Et as Skeleton,
   fn as SourcesPanel,
   vt as Spinner,
@@ -3423,6 +3433,7 @@ export {
   Ut as useAnimatedPlaceholder,
   Nn as useCoachmark,
   Mt as useInView,
+  wn as useShake,
   cn as useStreamScroll,
   tn as useToast
 };