@arcadeai/design-system 3.36.0 → 3.37.0

package/dist/components/ui/atoms/loader.js

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
 import { cn as a } from "../../../lib/utils.js";
 function m({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
   return /* @__PURE__ */ n(
@@ -10,7 +10,7 @@ function m({
       className: a(
         "animate-spin rounded-full border-2 border-primary border-t-transparent",
         { sm: "size-4", md: "size-5", lg: "size-6" }[e],
-        t
+        i
       ),
       children: /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading" })
     }
@@ -30,16 +30,16 @@ const c = {
   lg: "14px"
 };
 function g({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "size-4", md: "size-5", lg: "size-6" }, s = {
+  const t = { sm: "size-4", md: "size-5", lg: "size-6" }, s = {
     sm: { height: "6px", width: "1.5px" },
     md: { height: "8px", width: "2px" },
     lg: { height: "10px", width: "2.5px" }
   };
-  return /* @__PURE__ */ d("div", { className: a("relative", i[e], t), children: [
-    /* @__PURE__ */ n("div", { className: "absolute h-full w-full", children: Array.from({ length: 12 }, (l, r) => /* @__PURE__ */ n(
+  return /* @__PURE__ */ l("div", { className: a("relative", t[e], i), children: [
+    /* @__PURE__ */ n("div", { className: "absolute h-full w-full", children: Array.from({ length: 12 }, (d, r) => /* @__PURE__ */ n(
       "div",
       {
         className: "absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full bg-primary",
@@ -61,16 +61,16 @@ function g({
   ] });
 }
 function p({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  return /* @__PURE__ */ d("div", { className: a("relative", { sm: "size-4", md: "size-5", lg: "size-6" }[e], t), children: [
+  return /* @__PURE__ */ l("div", { className: a("relative", { sm: "size-4", md: "size-5", lg: "size-6" }[e], i), children: [
     /* @__PURE__ */ n("div", { className: "absolute inset-0 animate-[thin-pulse_1.5s_ease-in-out_infinite] rounded-full border-2 border-primary" }),
     /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading" })
   ] });
 }
 function x({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
   return /* @__PURE__ */ n(
@@ -79,32 +79,32 @@ function x({
       className: a(
         "animate-[pulse-dot_1.2s_ease-in-out_infinite] rounded-full bg-primary",
         { sm: "size-1", md: "size-2", lg: "size-3" }[e],
-        t
+        i
       ),
       children: /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading" })
     }
   );
 }
 function f({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "h-1.5 w-1.5", md: "h-2 w-2", lg: "h-2.5 w-2.5" };
-  return /* @__PURE__ */ d(
+  const t = { sm: "h-1.5 w-1.5", md: "h-2 w-2", lg: "h-2.5 w-2.5" };
+  return /* @__PURE__ */ l(
     "div",
     {
       className: a(
         "flex items-center space-x-1",
         { sm: "h-4", md: "h-5", lg: "h-6" }[e],
-        t
+        i
       ),
       children: [
-        Array.from({ length: 3 }, (l, r) => /* @__PURE__ */ n(
+        Array.from({ length: 3 }, (d, r) => /* @__PURE__ */ n(
           "div",
           {
             className: a(
               "animate-[bounce-dots_1.4s_ease-in-out_infinite] rounded-full bg-primary",
-              i[e]
+              t[e]
             ),
             style: { animationDelay: `${r * 160}ms` }
           },
@@ -116,25 +116,25 @@ function f({
   );
 }
 function _({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "h-1 w-1", md: "h-1.5 w-1.5", lg: "h-2 w-2" };
-  return /* @__PURE__ */ d(
+  const t = { sm: "h-1 w-1", md: "h-1.5 w-1.5", lg: "h-2 w-2" };
+  return /* @__PURE__ */ l(
     "div",
     {
       className: a(
         "flex items-center space-x-1",
         { sm: "h-4", md: "h-5", lg: "h-6" }[e],
-        t
+        i
       ),
       children: [
-        Array.from({ length: 3 }, (l, r) => /* @__PURE__ */ n(
+        Array.from({ length: 3 }, (d, r) => /* @__PURE__ */ n(
           "div",
           {
             className: a(
               "animate-[typing_1s_infinite] rounded-full bg-primary",
-              i[e]
+              t[e]
             ),
             style: { animationDelay: `${r * 250}ms` }
           },
@@ -146,21 +146,21 @@ function _({
   );
 }
 function y({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "w-0.5", md: "w-0.5", lg: "w-1" }, s = { sm: "h-4", md: "h-5", lg: "h-6" }, l = {
+  const t = { sm: "w-0.5", md: "w-0.5", lg: "w-1" }, s = { sm: "h-4", md: "h-5", lg: "h-6" }, d = {
     sm: ["6px", "9px", "12px", "9px", "6px"],
     md: ["8px", "12px", "16px", "12px", "8px"],
     lg: ["10px", "15px", "20px", "15px", "10px"]
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ l(
     "div",
     {
       className: a(
         "flex items-center gap-0.5",
         s[e],
-        t
+        i
       ),
       children: [
         Array.from({ length: 5 }, (r, o) => /* @__PURE__ */ n(
@@ -168,11 +168,11 @@ function y({
           {
             className: a(
               "animate-[wave_1s_ease-in-out_infinite] rounded-full bg-primary",
-              i[e]
+              t[e]
             ),
             style: {
               animationDelay: `${o * 100}ms`,
-              height: l[e][o]
+              height: d[e][o]
             }
           },
           o
@@ -183,21 +183,21 @@ function y({
   );
 }
 function b({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "w-1", md: "w-1.5", lg: "w-2" };
-  return /* @__PURE__ */ d("div", { className: a("flex", {
+  const t = { sm: "w-1", md: "w-1.5", lg: "w-2" };
+  return /* @__PURE__ */ l("div", { className: a("flex", {
     sm: "h-4 gap-1",
     md: "h-5 gap-1.5",
     lg: "h-6 gap-2"
-  }[e], t), children: [
-    Array.from({ length: 3 }, (l, r) => /* @__PURE__ */ n(
+  }[e], i), children: [
+    Array.from({ length: 3 }, (d, r) => /* @__PURE__ */ n(
       "div",
       {
         className: a(
           "h-full animate-[wave-bars_1.2s_ease-in-out_infinite] bg-primary",
-          i[e]
+          t[e]
         ),
         style: { animationDelay: `${r * 0.2}s` }
       },
@@ -207,17 +207,17 @@ function b({
   ] });
 }
 function v({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "h-3 w-1.5", md: "h-4 w-2", lg: "h-5 w-2.5" }, s = { sm: "text-xs", md: "text-sm", lg: "text-base" };
-  return /* @__PURE__ */ d(
+  const t = { sm: "h-3 w-1.5", md: "h-4 w-2", lg: "h-5 w-2.5" }, s = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  return /* @__PURE__ */ l(
     "div",
     {
       className: a(
         "flex items-center space-x-1",
         { sm: "h-4", md: "h-5", lg: "h-6" }[e],
-        t
+        i
       ),
       children: [
         /* @__PURE__ */ n("span", { className: a("font-mono text-primary", s[e]), children: ">" }),
@@ -226,7 +226,7 @@ function v({
           {
             className: a(
               "animate-[blink_1s_step-end_infinite] bg-primary",
-              i[e]
+              t[e]
             )
           }
         ),
@@ -236,26 +236,26 @@ function v({
   );
 }
 function L({
-  text: t = "Thinking",
+  text: i = "Thinking",
   className: e,
-  size: i = "md"
+  size: t = "md"
 }) {
   return /* @__PURE__ */ n(
     "div",
     {
       className: a(
         "animate-[text-blink_2s_ease-in-out_infinite] font-medium",
-        { sm: "text-xs", md: "text-sm", lg: "text-base" }[i],
+        { sm: "text-xs", md: "text-sm", lg: "text-base" }[t],
         e
       ),
-      children: t
+      children: i
     }
   );
 }
 function N({
-  text: t = "Thinking",
+  text: i = "Thinking",
   className: e,
-  size: i = "md"
+  size: t = "md"
 }) {
   return /* @__PURE__ */ n(
     "div",
@@ -264,41 +264,69 @@ function N({
         "bg-[linear-gradient(to_right,var(--muted-foreground)_40%,var(--foreground)_60%,var(--muted-foreground)_80%)]",
         "bg-size-[200%_auto] bg-clip-text font-medium text-transparent",
         "animate-[shimmer_4s_infinite_linear]",
-        { sm: "text-xs", md: "text-sm", lg: "text-base" }[i],
+        { sm: "text-xs", md: "text-sm", lg: "text-base" }[t],
         e
       ),
-      children: t
+      children: i
     }
   );
 }
 function S({
-  className: t,
+  className: i,
   text: e = "Thinking",
-  size: i = "md"
+  size: t = "md"
 }) {
   const s = { sm: "text-xs", md: "text-sm", lg: "text-base" };
-  return /* @__PURE__ */ d("div", { className: a("inline-flex items-center", t), children: [
+  return /* @__PURE__ */ l("div", { className: a("inline-flex items-center", i), children: [
     /* @__PURE__ */ n(
       "span",
       {
-        className: a("font-medium text-muted-foreground", s[i]),
+        className: a("font-medium text-muted-foreground", s[t]),
         children: e
       }
     ),
-    /* @__PURE__ */ d("span", { className: "inline-flex", children: [
+    /* @__PURE__ */ l("span", { className: "inline-flex", children: [
       /* @__PURE__ */ n("span", { className: "animate-[loading-dots_1.4s_infinite_0.2s] text-muted-foreground", children: "." }),
       /* @__PURE__ */ n("span", { className: "animate-[loading-dots_1.4s_infinite_0.4s] text-muted-foreground", children: "." }),
       /* @__PURE__ */ n("span", { className: "animate-[loading-dots_1.4s_infinite_0.6s] text-muted-foreground", children: "." })
     ] })
   ] });
 }
-function C({
-  variant: t = "circular",
+function w({
+  className: i,
   size: e = "md",
-  text: i,
+  text: t
+}) {
+  const s = { sm: "text-sm", md: "text-base", lg: "text-lg" }, d = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  return /* @__PURE__ */ l("div", { className: a("inline-flex items-center gap-1.5", i), children: [
+    /* @__PURE__ */ n(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: a(
+          "before:animate-[braille-spin_0.8s_steps(10,end)_infinite] before:content-['⠋']",
+          "font-mono text-primary leading-none",
+          s[e]
+        )
+      }
+    ),
+    t && /* @__PURE__ */ n(
+      "span",
+      {
+        className: a("text-muted-foreground leading-none", d[e]),
+        children: t
+      }
+    ),
+    !t && /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading" })
+  ] });
+}
+function A({
+  variant: i = "circular",
+  size: e = "md",
+  text: t,
   className: s
 }) {
-  switch (t) {
+  switch (i) {
     case "circular":
       return /* @__PURE__ */ n(m, { className: s, size: e });
     case "classic":
@@ -318,15 +346,17 @@ function C({
     case "terminal":
       return /* @__PURE__ */ n(v, { className: s, size: e });
     case "text-blink":
-      return /* @__PURE__ */ n(L, { className: s, size: e, text: i });
+      return /* @__PURE__ */ n(L, { className: s, size: e, text: t });
     case "text-shimmer":
-      return /* @__PURE__ */ n(N, { className: s, size: e, text: i });
+      return /* @__PURE__ */ n(N, { className: s, size: e, text: t });
     case "loading-dots":
-      return /* @__PURE__ */ n(S, { className: s, size: e, text: i });
+      return /* @__PURE__ */ n(S, { className: s, size: e, text: t });
+    case "braille":
+      return /* @__PURE__ */ n(w, { className: s, size: e, text: t });
     default:
       return /* @__PURE__ */ n(m, { className: s, size: e });
   }
 }
 export {
-  C as Loader
+  A as Loader
 };

package/dist/components/ui/atoms/virtualized-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtualized-grid.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/atoms/virtualized-grid.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IACpC,0BAA0B;IAC1B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,oCAAoC;IACpC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,2CAA2C;IAC3C,eAAe,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAiBF,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACV,eAAe,EACf,UAAU,EACV,QAA2B,EAC3B,QAA6B,EAC7B,aAAkC,GACnC,EAAE,oBAAoB,CAAC,CAAC,CAAC,kDA0GzB"}
+{"version":3,"file":"virtualized-grid.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/atoms/virtualized-grid.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IACpC,0BAA0B;IAC1B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,oCAAoC;IACpC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,2CAA2C;IAC3C,eAAe,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAgBF,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACV,eAAe,EACf,UAAU,EACV,QAA2B,EAC3B,QAA6B,EAC7B,aAAwC,GACzC,EAAE,oBAAoB,CAAC,CAAC,CAAC,kDA0GzB"}

package/dist/components/ui/atoms/virtualized-grid.js

@@ -1,6 +1,6 @@
 import { jsx as x } from "react/jsx-runtime";
 import * as w from "react";
-import { useRef as F, useState as D, useEffect as T, useMemo as k } from "react";
+import { useRef as F, useState as k, useEffect as T, useMemo as D } from "react";
 import { flushSync as N } from "react-dom";
 function y(r, l, e) {
   let s = e.initialDeps ?? [], t, n = !0;
@@ -42,7 +42,7 @@ function O(r, l) {
     throw new Error("Unexpected undefined");
   return r;
 }
-const W = (r, l) => Math.abs(r - l) < 1.01, L = (r, l, e) => {
+const W = (r, l) => Math.abs(r - l) < 1.01, V = (r, l, e) => {
   let s;
   return function(...t) {
     r.clearTimeout(s), s = r.setTimeout(() => l.apply(this, t), e);
@@ -50,7 +50,7 @@ const W = (r, l) => Math.abs(r - l) < 1.01, L = (r, l, e) => {
 }, z = (r) => {
   const { offsetWidth: l, offsetHeight: e } = r;
   return { width: l, height: e };
-}, V = (r) => r, j = (r) => {
+}, L = (r) => r, j = (r) => {
   const l = Math.max(r.startIndex - r.overscan, 0), e = Math.min(r.endIndex + r.overscan, r.count - 1), s = [];
   for (let t = l; t <= e; t++)
     s.push(t);
@@ -97,7 +97,7 @@ const W = (r, l) => Math.abs(r - l) < 1.01, L = (r, l, e) => {
     return;
   let t = 0;
   const n = r.options.useScrollendEvent && I ? () => {
-  } : L(
+  } : V(
     s,
     () => {
       l(t, !1);
@@ -132,7 +132,7 @@ const W = (r, l) => Math.abs(r - l) < 1.01, L = (r, l, e) => {
     behavior: e
   });
 };
-class U {
+class q {
   constructor(l) {
     this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.isScrolling = !1, this.currentScrollToIndex = null, this.measurementsCache = [], this.itemSizeCache = /* @__PURE__ */ new Map(), this.laneAssignments = /* @__PURE__ */ new Map(), this.pendingMeasuredCacheIndexes = [], this.prevLanes = void 0, this.lanesChangedFlag = !1, this.lanesSettling = !1, this.scrollRect = null, this.scrollOffset = null, this.scrollDirection = null, this.scrollAdjustments = 0, this.elementsCache = /* @__PURE__ */ new Map(), this.observer = /* @__PURE__ */ (() => {
       let e = null;
@@ -170,7 +170,7 @@ class U {
         scrollPaddingStart: 0,
         scrollPaddingEnd: 0,
         horizontal: !1,
-        getItemKey: V,
+        getItemKey: L,
         rangeExtractor: j,
         onChange: () => {
         },
@@ -323,7 +323,7 @@ class U {
         this.getScrollOffset(),
         this.options.lanes
       ],
-      (e, s, t, n) => this.range = e.length > 0 && s > 0 ? q({
+      (e, s, t, n) => this.range = e.length > 0 && s > 0 ? U({
         measurements: e,
         outerSize: s,
         scrollOffset: t,
@@ -531,7 +531,7 @@ const _ = (r, l, e, s) => {
   }
   return r > 0 ? r - 1 : 0;
 };
-function q({
+function U({
   measurements: r,
   outerSize: l,
   scrollOffset: e,
@@ -579,7 +579,7 @@ function K({
       r && o ? N(e) : e(), (i = l.onChange) == null || i.call(l, n, o);
     }
   }, [t] = w.useState(
-    () => new U(s)
+    () => new q(s)
   );
   return t.setOptions(s), A(() => t._didMount(), []), A(() => t._willUpdate()), t;
 }
@@ -591,8 +591,8 @@ function G(r) {
     ...r
   });
 }
-const X = 5, Y = 0, J = "grid grid-cols-1 gap-4";
-function Q(r, l) {
+const X = 5, Y = 0;
+function J(r, l) {
   if (l <= 0)
     throw new Error(`chunkArray: size must be positive, received ${l}`);
   const e = [];
@@ -600,7 +600,7 @@ function Q(r, l) {
     e.push(r.slice(s, s + l));
   return e;
 }
-function se({
+function te({
   items: r,
   columns: l,
   parentRef: e,
@@ -609,13 +609,13 @@ function se({
   getItemKey: n,
   overscan: o = X,
   rowGapPx: i = Y,
-  gridClassName: h = J
+  gridClassName: h = "grid grid-cols-1 gap-4"
 }) {
   if (l <= 0)
     throw new Error(
       `VirtualizedGrid: columns must be positive, received ${l}`
     );
-  const u = F(null), [c, v] = D(0);
+  const u = F(null), [c, v] = k(0);
   T(() => {
     const m = u.current, p = e.current;
     if (!(m && p))
@@ -628,7 +628,7 @@ function se({
     const E = new ResizeObserver(d);
     return E.observe(m), E.observe(p), () => E.disconnect();
   }, [e]);
-  const a = k(() => Q(r, l).map(
+  const a = D(() => J(r, l).map(
     (p, d) => p.map((E, S) => ({
       item: E,
       index: d * l + S
@@ -679,5 +679,5 @@ function se({
   );
 }
 export {
-  se as VirtualizedGrid
+  te as VirtualizedGrid
 };