@arcadeai/design-system 3.39.4 → 3.41.1

package/dist/components/ui/molecules/tags-input.js

@@ -0,0 +1,139 @@
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
+import { X as _ } from "lucide-react";
+import { useId as C, useState as D, useRef as P, Fragment as L } from "react";
+import { Badge as X } from "../atoms/badge.js";
+import { cn as $ } from "../../../lib/utils.js";
+const T = /[,\n\r]+/;
+function q({ value: n, onRemove: s }) {
+  return /* @__PURE__ */ h(X, { className: "gap-1 pr-1", variant: "secondary", children: [
+    /* @__PURE__ */ c("span", { className: "max-w-[220px] truncate", children: n }),
+    /* @__PURE__ */ c(
+      "button",
+      {
+        "aria-label": `Remove ${n}`,
+        className: "ml-0.5 rounded text-muted-foreground hover:text-foreground",
+        onClick: (p) => {
+          p.stopPropagation(), s();
+        },
+        type: "button",
+        children: /* @__PURE__ */ c(_, { className: "size-3" })
+      }
+    )
+  ] });
+}
+function G(n, s) {
+  return /* @__PURE__ */ c(q, { onRemove: s, value: n });
+}
+function W({
+  values: n,
+  onChange: s,
+  placeholder: p,
+  addOnBlur: z = !0,
+  validateValue: f,
+  isDuplicate: x,
+  renderValue: B,
+  className: V,
+  disabled: y = !1,
+  id: A,
+  ...F
+}) {
+  const S = C(), b = A ?? S, [i, m] = D(""), [w, d] = D(null), k = P(null), l = P(n);
+  l.current = n;
+  const j = B ?? G, I = (e, t) => {
+    for (const o of t) {
+      const r = x ? x(e, o) : e === o;
+      if (r === !0)
+        return "Already added";
+      if (typeof r == "string" && r)
+        return r;
+    }
+    return null;
+  }, N = (e) => {
+    const t = e.trim();
+    if (!t)
+      return;
+    const o = l.current, r = f ? f(t, o) : {};
+    if (r.error) {
+      d(r.error);
+      return;
+    }
+    const u = r.normalizedValue ?? t, a = I(u, o);
+    if (a) {
+      d(a);
+      return;
+    }
+    s([...o, u]), m(""), d(null);
+  }, v = (e) => {
+    s(l.current.filter((t) => t !== e));
+  }, K = (e) => {
+    if ((e.key === "Enter" || e.key === ",") && !e.nativeEvent.isComposing)
+      e.preventDefault(), N(i);
+    else if (e.key === "Backspace" && i === "") {
+      const t = l.current.at(-1);
+      t !== void 0 && v(t);
+    } else
+      d(null);
+  }, M = (e) => {
+    const t = e.clipboardData.getData("text");
+    if (!T.test(t))
+      return;
+    e.preventDefault();
+    const o = t.split(T).map((a) => a.trim()).filter(Boolean);
+    let r = [...l.current], u = null;
+    for (const a of o) {
+      const g = f ? f(a, r) : {};
+      if (g.error) {
+        u = g.error;
+        break;
+      }
+      const E = g.normalizedValue ?? a, R = I(E, r);
+      if (R) {
+        u = R;
+        break;
+      }
+      r = [...r, E];
+    }
+    r.length > l.current.length && s(r), m(""), d(u);
+  };
+  return /* @__PURE__ */ h("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ h(
+      "label",
+      {
+        className: $(
+          "flex min-h-10 w-full cursor-text flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
+          y && "cursor-not-allowed opacity-50",
+          V
+        ),
+        htmlFor: b,
+        ref: k,
+        children: [
+          n.map((e) => /* @__PURE__ */ c(L, { children: j(e, () => v(e)) }, e)),
+          /* @__PURE__ */ c(
+            "input",
+            {
+              ...F,
+              className: "min-w-32 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+              disabled: y,
+              id: b,
+              onBlur: (e) => {
+                const t = k.current?.contains(e.relatedTarget);
+                z && i.trim() && !t && N(i);
+              },
+              onChange: (e) => m(e.target.value),
+              onKeyDown: K,
+              onPaste: M,
+              placeholder: n.length === 0 ? p : "",
+              type: "text",
+              value: i
+            }
+          )
+        ]
+      }
+    ),
+    w && /* @__PURE__ */ c("p", { className: "text-destructive text-sm", children: w })
+  ] });
+}
+export {
+  W as TagsInput,
+  q as TagsInputValue
+};

package/dist/components/ui/molecules/tool-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/tool-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAY7C,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAE3D,iBAAS,YAAY,CAAC,EACpB,oBAAoB,EACpB,IAAI,EACJ,WAAW,EACX,WAAW,EACX,IAA+B,EAC/B,UAAkB,EAClB,QAAQ,EACR,YAAoB,EACpB,GAAG,IAAI,EACR,EAAE,aAAa,eA0If;AAcD,eAAO,MAAM,QAAQ,gDAAoD,CAAC"}
+{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/tool-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAY7C,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAE3D,iBAAS,YAAY,CAAC,EACpB,oBAAoB,EACpB,IAAI,EACJ,WAAW,EACX,WAAW,EACX,IAA+B,EAC/B,UAAkB,EAClB,QAAQ,EACR,YAAoB,EACpB,GAAG,IAAI,EACR,EAAE,aAAa,eAyIf;AAcD,eAAO,MAAM,QAAQ,gDAAoD,CAAC"}

package/dist/components/ui/molecules/tool-card.js

@@ -13,22 +13,22 @@ function R({
   fully_qualified_name: m,
   name: f,
   toolkitName: p,
-  description: u,
-  Icon: b = (l) => /* @__PURE__ */ r(E, { ...l }),
+  description: h,
+  Icon: b = (s) => /* @__PURE__ */ r(E, { ...s }),
   isSelected: o = !1,
-  onSelect: s,
-  hideCheckbox: h = !1,
+  onSelect: n,
+  hideCheckbox: u = !1,
   ...g
 }) {
-  const l = t.useCallback(
-    () => s?.(!o),
-    [o, s]
-  ), [n, k] = t.useState(!1), { ref: x, isTruncated: C } = z(!n), v = (e) => {
+  const s = t.useCallback(
+    () => n?.(!o),
+    [o, n]
+  ), [l, k] = t.useState(!1), { ref: x, isTruncated: C } = z(!l), v = (e) => {
     const i = e.key === "Enter" || e.code === "Enter", c = e.key === " " || e.key === "Spacebar" || e.code === "Space";
-    (i || c) && (e.preventDefault(), l());
+    (i || c) && (e.preventDefault(), s());
   }, y = t.useCallback(
-    (e) => s?.(!!e),
-    [s]
+    (e) => n?.(!!e),
+    [n]
   ), w = t.useCallback((e) => {
     e.stopPropagation();
   }, []), N = t.useCallback((e) => {
@@ -47,7 +47,7 @@ function R({
         !o && "border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700"
       ),
       onClick: (e) => {
-        e.target.closest('[data-slot="checkbox-wrapper"]') || l();
+        e.target.closest('[data-slot="checkbox-wrapper"]') || s();
       },
       onKeyDown: v,
       tabIndex: 0,
@@ -57,10 +57,10 @@ function R({
           className: d(
             "grid items-start gap-2",
             "grid-cols-[20px_1fr_auto]",
-            h && "grid-cols-[1fr_auto]"
+            u && "grid-cols-[1fr_auto]"
           ),
           children: [
-            !h && /* @__PURE__ */ r(
+            !u && /* @__PURE__ */ r(
               "div",
               {
                 className: "flex items-center justify-center pt-1.5",
@@ -84,20 +84,20 @@ function R({
                   p && /* @__PURE__ */ r("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: p })
                 ] })
               ] }),
-              u && /* @__PURE__ */ a(T, { onOpenChange: k, open: n, children: [
+              h && /* @__PURE__ */ a(T, { onOpenChange: k, open: l, children: [
                 /* @__PURE__ */ a("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ r(
                     "p",
                     {
                       className: d(
                         "text-neutral-600 text-sm dark:text-neutral-400",
-                        !n && "line-clamp-3"
+                        !l && "line-clamp-3"
                       ),
                       ref: x,
-                      children: u
+                      children: h
                     }
                   ),
-                  C && /* @__PURE__ */ a(
+                  C && /* @__PURE__ */ r(
                     K,
                     {
                       render: /* @__PURE__ */ r(
@@ -110,10 +110,7 @@ function R({
                           variant: "link"
                         }
                       ),
-                      children: [
-                        n && "Show less",
-                        !n && "Show more"
-                      ]
+                      children: /* @__PURE__ */ r("span", { children: l ? "Show less" : "Show more" })
                     }
                   )
                 ] }),

package/dist/components/ui/pages/login-page.js

@@ -5,7 +5,7 @@ import { ArcadeGrid as g } from "../../../assets/images/arcade-grid.js";
 import { Button as A } from "../atoms/button.js";
 import { ArcadeLogo as b } from "../atoms/icons/arcade-logo.js";
 import { AuthTemplate as T, AuthTemplateVideoBackground as v, AuthTemplateLogo as y, AuthTemplateCard as L, AuthTemplateHeader as N, AuthTemplateTitle as x, AuthTemplateDescription as k, AuthTemplateContent as z, AuthTemplateFooter as w, AuthTemplatePrompt as P, AuthTemplatePromptLink as _, AuthTemplateLegal as B, AuthTemplateLegalLink as C } from "../templates/auth-template.js";
-import { cn as m } from "../../../lib/utils.js";
+import { cn as s } from "../../../lib/utils.js";
 import { PUBLIC_VIDEO_URL as D } from "../../../metadata/constants.js";
 const I = `${D}/A_L_Orange_Pink.mp4`;
 function F({ isLoading: t }) {
@@ -13,32 +13,32 @@ function F({ isLoading: t }) {
 }
 function j({
   termsHref: t,
-  privacyHref: n
+  privacyHref: o
 }) {
   const i = [
     t && { href: t, label: "Terms of Service" },
-    n && { href: n, label: "Privacy Policy" }
+    o && { href: o, label: "Privacy Policy" }
   ].filter((a) => !!a);
   return i.length === 0 ? null : /* @__PURE__ */ r(B, { children: [
     "By continuing, you agree to the",
     " ",
-    i.map((a, o) => /* @__PURE__ */ r(f, { children: [
-      o > 0 && " and ",
+    i.map((a, n) => /* @__PURE__ */ r(f, { children: [
+      n > 0 && /* @__PURE__ */ e("span", { children: " and " }),
       /* @__PURE__ */ e(C, { href: a.href, children: a.label })
     ] }, a.href))
   ] });
 }
 function q({
   isLoading: t = !1,
-  loadingText: n = "Authenticating...",
+  loadingText: o = "Authenticating...",
   onSubmit: i,
   privacyHref: a,
-  registerHref: o,
-  submitText: s = "Sign in with Arcade",
+  registerHref: n,
+  submitText: m = "Sign in with Arcade",
   termsHref: l,
   videoSrc: c = I
 }) {
-  const h = t ? n : s, u = o || l || a;
+  const h = t ? o : m, u = n || l || a;
   return /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ e("div", { className: "absolute -inset-4 z-0 bg-gradient-to-br from-rose-500/70 via-pink-400/50 to-amber-500/70 opacity-60 blur-lg brightness-50" }),
     c && /* @__PURE__ */ e(v, { src: c }),
@@ -52,7 +52,7 @@ function q({
       /* @__PURE__ */ e(z, { children: /* @__PURE__ */ r(
         A,
         {
-          className: m(
+          className: s(
             "group relative h-12 w-full overflow-hidden text-base transition-all duration-300",
             "hover:scale-[1.01] hover:shadow-md hover:brightness-105 active:scale-[0.99]"
           ),
@@ -67,7 +67,7 @@ function q({
             /* @__PURE__ */ e(
               "div",
               {
-                className: m(
+                className: s(
                   "absolute inset-0 bg-gradient-to-r from-primary/5 via-primary/0 to-primary/5 transition-opacity duration-300 group-hover:opacity-100",
                   t ? "pointer-events-none opacity-0" : "opacity-0"
                 )
@@ -77,10 +77,10 @@ function q({
         }
       ) }),
       u && /* @__PURE__ */ r(w, { children: [
-        o && /* @__PURE__ */ r(P, { children: [
+        n && /* @__PURE__ */ r(P, { children: [
           /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: "Don't have an account?" }),
           " ",
-          /* @__PURE__ */ e(_, { href: o, children: "Register" })
+          /* @__PURE__ */ e(_, { href: n, children: "Register" })
         ] }),
         /* @__PURE__ */ e(j, { privacyHref: a, termsHref: l })
       ] })