@arcadeai/design-system 3.30.0 → 3.32.0

package/dist/components/ui/atoms/code-block.js

@@ -0,0 +1,760 @@
+import { jsxs as q, jsx as m, Fragment as W } from "react/jsx-runtime";
+import { forwardRef as X, useState as $, useMemo as A, useRef as E, useEffect as F } from "react";
+import { c as B } from "../../../bundle-mjs-lrpnyDSX.js";
+import { t as Q, c as Y, g as K, a as Z, b as ee, d as I } from "../../../index-cd1ceFJg.js";
+import { cn as z } from "../../../lib/utils.js";
+var R = Object.prototype.hasOwnProperty;
+function D(e, t, i) {
+  for (i of e.keys())
+    if (h(i, t)) return i;
+}
+function h(e, t) {
+  var i, n, r;
+  if (e === t) return !0;
+  if (e && t && (i = e.constructor) === t.constructor) {
+    if (i === Date) return e.getTime() === t.getTime();
+    if (i === RegExp) return e.toString() === t.toString();
+    if (i === Array) {
+      if ((n = e.length) === t.length)
+        for (; n-- && h(e[n], t[n]); ) ;
+      return n === -1;
+    }
+    if (i === Set) {
+      if (e.size !== t.size)
+        return !1;
+      for (n of e)
+        if (r = n, r && typeof r == "object" && (r = D(t, r), !r) || !t.has(r)) return !1;
+      return !0;
+    }
+    if (i === Map) {
+      if (e.size !== t.size)
+        return !1;
+      for (n of e)
+        if (r = n[0], r && typeof r == "object" && (r = D(t, r), !r) || !h(n[1], t.get(r)))
+          return !1;
+      return !0;
+    }
+    if (i === ArrayBuffer)
+      e = new Uint8Array(e), t = new Uint8Array(t);
+    else if (i === DataView) {
+      if ((n = e.byteLength) === t.byteLength)
+        for (; n-- && e.getInt8(n) === t.getInt8(n); ) ;
+      return n === -1;
+    }
+    if (ArrayBuffer.isView(e)) {
+      if ((n = e.byteLength) === t.byteLength)
+        for (; n-- && e[n] === t[n]; ) ;
+      return n === -1;
+    }
+    if (!i || typeof e == "object") {
+      n = 0;
+      for (i in e)
+        if (R.call(e, i) && ++n && !R.call(t, i) || !(i in t) || !h(e[i], t[i])) return !1;
+      return Object.keys(t).length === n;
+    }
+  }
+  return e !== e && t !== t;
+}
+var N = (e) => {
+  const t = E(e), i = E(0);
+  return typeof e != "object" || e === null ? (e !== t.current && (t.current = e, i.current += 1), [e, i.current]) : (e !== t.current && (h(e, t.current) || (t.current = e, i.current += 1)), [t.current, i.current]);
+}, te = (e, t, i) => {
+  const n = Date.now();
+  clearTimeout(t.current.timeoutId);
+  const r = Math.max(0, t.current.nextAllowedTime - n);
+  t.current.timeoutId = setTimeout(() => {
+    e().catch(console.error), t.current.nextAllowedTime = n + i;
+  }, r);
+}, G = (e, t, i) => {
+  const n = t ? Array.isArray(t) ? t : [t] : [];
+  if (e == null || typeof e == "string" && !e.trim())
+    return {
+      languageId: "plaintext",
+      displayLanguageId: "plaintext",
+      langsToLoad: void 0
+    };
+  if (typeof e == "object")
+    return {
+      languageId: e.name,
+      displayLanguageId: e.name || null,
+      langsToLoad: e
+    };
+  const r = e.toLowerCase(), s = (a) => a?.toLowerCase() === r, d = n.find(
+    (a) => s(a.name) || s(a.scopeName) || s(a.scopeName?.split(".").pop()) || a.aliases?.some(s) || a.fileTypes?.some(s)
+  );
+  return d ? {
+    languageId: d.name || e,
+    displayLanguageId: e,
+    langsToLoad: d
+  } : i?.[e] ? {
+    languageId: i[e],
+    displayLanguageId: e,
+    langsToLoad: i[e]
+  } : {
+    languageId: e,
+    displayLanguageId: e,
+    langsToLoad: e
+  };
+}, P = (e) => typeof e == "object" && e !== null && "tokenColors" in e && Array.isArray(e.tokenColors);
+function ie(e) {
+  const t = P(e), i = typeof e == "object" && e !== null && !t, n = typeof e == "object" && e !== null && !t && Object.entries(e).some(
+    ([r, s]) => r && s && r.trim() !== "" && s !== "" && (typeof s == "string" || P(s))
+  );
+  return i ? {
+    isMultiTheme: !0,
+    themeId: n ? `multi-${Object.values(e).map(
+      (s) => (typeof s == "string" ? s : s?.name) || "custom"
+    ).sort().join("-")}` : "multi-default",
+    multiTheme: n ? e : null,
+    themesToLoad: n ? Object.values(e) : []
+  } : {
+    isMultiTheme: !1,
+    themeId: typeof e == "string" ? e : e?.name || "custom",
+    singleTheme: e,
+    themesToLoad: [e]
+  };
+}
+function ne(e = 1) {
+  return {
+    name: "react-shiki:line-numbers",
+    code(t) {
+      if (this.addClassToHast(t, "has-line-numbers"), e !== 1) {
+        const i = t.properties?.style || "", n = i ? `${i}; --line-start: ${e}` : `--line-start: ${e}`;
+        t.properties = {
+          ...t.properties,
+          style: n
+        };
+      }
+    },
+    line(t) {
+      return this.addClassToHast(t, "line-numbers"), t;
+    }
+  };
+}
+var V = {
+  light: "github-light",
+  dark: "github-dark"
+}, re = (e, t, i, n = {}, r) => {
+  const [s, d] = $(null), [a, j] = N(t), [f, C] = N(i), [o, H] = N(n), { languageId: p, langsToLoad: y } = A(
+    () => G(
+      a,
+      o.customLanguages,
+      o.langAlias
+    ),
+    [a, o.customLanguages, o.langAlias]
+  ), { isMultiTheme: k, themeId: M, multiTheme: b, singleTheme: O, themesToLoad: T } = A(() => ie(f), [f]), L = E({
+    nextAllowedTime: 0,
+    timeoutId: void 0
+  }), c = A(() => {
+    const l = { lang: p }, {
+      defaultColor: u,
+      cssVariablePrefix: S,
+      showLineNumbers: g,
+      startingLineNumber: J,
+      ...v
+    } = o, w = k ? {
+      themes: b || V,
+      defaultColor: u,
+      cssVariablePrefix: S
+    } : {
+      theme: O || V.dark
+    }, x = v.transformers || [];
+    return g && x.push(ne(J)), {
+      ...l,
+      ...w,
+      ...v,
+      transformers: x
+    };
+  }, [p, M, j, C, H]);
+  return F(() => {
+    let l = !0;
+    const u = async () => {
+      if (!p) return;
+      const g = o.highlighter ? o.highlighter : await r(
+        y,
+        T,
+        o.engine
+      ), v = g.getLoadedLanguages().includes(p) ? p : "plaintext", w = { ...c, lang: v };
+      if (l) {
+        const x = o.outputFormat === "html" ? g.codeToHtml(e, w) : Q(g.codeToHast(e, w), {
+          jsx: m,
+          jsxs: q,
+          Fragment: W
+        });
+        d(x);
+      }
+    }, { delay: S } = o;
+    return S ? te(u, L, S) : u().catch(console.error), () => {
+      l = !1, clearTimeout(L.current.timeoutId);
+    };
+  }, [
+    e,
+    c,
+    o.delay,
+    o.highlighter,
+    y,
+    T
+  ]), s;
+};
+function se(e, { insertAt: t } = {}) {
+  if (typeof document > "u") return;
+  const i = document.head || document.getElementsByTagName("head")[0], n = document.createElement("style");
+  n.type = "text/css", t === "top" && i.firstChild ? i.insertBefore(n, i.firstChild) : i.appendChild(n), n.styleSheet ? n.styleSheet.cssText = e : n.appendChild(document.createTextNode(e));
+}
+se(`.relative {
+  position: relative;
+}
+.defaultStyles pre {
+  overflow: auto;
+  border-radius: 0.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+.languageLabel {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.5rem;
+  font-family: monospace;
+  font-size: 0.75rem;
+  letter-spacing: -0.05em;
+  color: rgba(107, 114, 128, 0.85);
+}
+.line-numbers::before {
+  counter-increment: line-number;
+  content: counter(line-number);
+  display: inline-flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  box-sizing: content-box;
+  min-width: var(--line-numbers-width, 2ch);
+  padding-left: var(--line-numbers-padding-left, 2ch);
+  padding-right: var(--line-numbers-padding-right, 2ch);
+  color: var(--line-numbers-foreground, rgba(107, 114, 128, 0.6));
+  font-size: var(--line-numbers-font-size, inherit);
+  font-weight: var(--line-numbers-font-weight, inherit);
+  line-height: var(--line-numbers-line-height, inherit);
+  font-family: var(--line-numbers-font-family, inherit);
+  opacity: var(--line-numbers-opacity, 1);
+  user-select: none;
+  pointer-events: none;
+}
+.has-line-numbers {
+  counter-reset: line-number calc(var(--line-start, 1) - 1);
+  --line-numbers-foreground: rgba(107, 114, 128, 0.5);
+  --line-numbers-width: 2ch;
+  --line-numbers-padding-left: 0ch;
+  --line-numbers-padding-right: 2ch;
+  --line-numbers-font-size: inherit;
+  --line-numbers-font-weight: inherit;
+  --line-numbers-line-height: inherit;
+  --line-numbers-font-family: inherit;
+  --line-numbers-opacity: 1;
+}
+`);
+var oe = (e) => X(
+  ({
+    language: t,
+    theme: i,
+    delay: n,
+    transformers: r,
+    defaultColor: s,
+    cssVariablePrefix: d,
+    addDefaultStyles: a = !0,
+    style: j,
+    langStyle: f,
+    className: C,
+    langClassName: o,
+    showLanguage: H = !0,
+    showLineNumbers: p = !1,
+    startingLineNumber: y = 1,
+    children: k,
+    as: M = "pre",
+    customLanguages: b,
+    ...O
+  }, T) => {
+    const L = {
+      delay: n,
+      transformers: r,
+      customLanguages: b,
+      showLineNumbers: p,
+      defaultColor: s,
+      cssVariablePrefix: d,
+      startingLineNumber: y,
+      ...O
+    }, { displayLanguageId: c } = G(
+      t,
+      b
+    ), l = e(
+      k,
+      t,
+      i,
+      L
+    ), u = typeof l == "string";
+    return /* @__PURE__ */ q(
+      M,
+      {
+        ref: T,
+        "data-testid": "shiki-container",
+        className: B(
+          "relative",
+          "not-prose",
+          a && "defaultStyles",
+          C
+        ),
+        style: j,
+        id: "shiki-container",
+        children: [
+          H && c ? /* @__PURE__ */ m(
+            "span",
+            {
+              className: B("languageLabel", o),
+              style: f,
+              id: "language-label",
+              children: c
+            }
+          ) : null,
+          u ? /* @__PURE__ */ m("div", { dangerouslySetInnerHTML: { __html: l } }) : l
+        ]
+      }
+    );
+  }
+);
+const U = [
+  {
+    id: "angular-html",
+    name: "Angular HTML",
+    import: (() => import("../../../angular-html-DPB4Rf0C.js").then((e) => e.f))
+  },
+  {
+    id: "angular-ts",
+    name: "Angular TypeScript",
+    import: (() => import("../../../angular-ts-CTOR2ofC.js"))
+  },
+  {
+    id: "astro",
+    name: "Astro",
+    import: (() => import("../../../astro-CFFExE8Q.js"))
+  },
+  {
+    id: "blade",
+    name: "Blade",
+    import: (() => import("../../../blade-D0HyNvCw.js"))
+  },
+  {
+    id: "c",
+    name: "C",
+    import: (() => import("../../../c-eeMepfLm.js"))
+  },
+  {
+    id: "coffee",
+    name: "CoffeeScript",
+    aliases: [
+      "coffeescript"
+    ],
+    import: (() => import("../../../coffee-DGBR_nr_.js"))
+  },
+  {
+    id: "cpp",
+    name: "C++",
+    aliases: [
+      "c++"
+    ],
+    import: (() => import("../../../cpp-Cj177cuW.js"))
+  },
+  {
+    id: "css",
+    name: "CSS",
+    import: (() => import("../../../css-CECN5uSL.js"))
+  },
+  {
+    id: "csv",
+    name: "CSV",
+    import: (() => import("../../../csv-CmYOceLb.js"))
+  },
+  {
+    id: "glsl",
+    name: "GLSL",
+    import: (() => import("../../../glsl-CkUcVZNK.js"))
+  },
+  {
+    id: "graphql",
+    name: "GraphQL",
+    aliases: [
+      "gql"
+    ],
+    import: (() => import("../../../graphql-CBu2ehBn.js"))
+  },
+  {
+    id: "haml",
+    name: "Ruby Haml",
+    import: (() => import("../../../haml-NZLVzu_R.js"))
+  },
+  {
+    id: "handlebars",
+    name: "Handlebars",
+    aliases: [
+      "hbs"
+    ],
+    import: (() => import("../../../handlebars-mxStpSE7.js"))
+  },
+  {
+    id: "html",
+    name: "HTML",
+    import: (() => import("../../../html-B50bmoVb.js"))
+  },
+  {
+    id: "html-derivative",
+    name: "HTML (Derivative)",
+    import: (() => import("../../../html-derivative-C6bxFbFW.js"))
+  },
+  {
+    id: "http",
+    name: "HTTP",
+    import: (() => import("../../../http-DLvAkeD-.js"))
+  },
+  {
+    id: "hurl",
+    name: "Hurl",
+    import: (() => import("../../../hurl-CgkFN90t.js"))
+  },
+  {
+    id: "imba",
+    name: "Imba",
+    import: (() => import("../../../imba-CimUv-Uh.js"))
+  },
+  {
+    id: "java",
+    name: "Java",
+    import: (() => import("../../../java-DY6VlHhP.js"))
+  },
+  {
+    id: "javascript",
+    name: "JavaScript",
+    aliases: [
+      "js",
+      "cjs",
+      "mjs"
+    ],
+    import: (() => import("../../../javascript-C25yR2R2.js"))
+  },
+  {
+    id: "jinja",
+    name: "Jinja",
+    import: (() => import("../../../jinja-CFW5uAwY.js"))
+  },
+  {
+    id: "jison",
+    name: "Jison",
+    import: (() => import("../../../jison-DdreslRX.js"))
+  },
+  {
+    id: "json",
+    name: "JSON",
+    import: (() => import("../../../json-DxJze_jm.js"))
+  },
+  {
+    id: "json5",
+    name: "JSON5",
+    import: (() => import("../../../json5-BT4Fjg39.js"))
+  },
+  {
+    id: "jsonc",
+    name: "JSON with Comments",
+    import: (() => import("../../../jsonc-CHjZD8gR.js"))
+  },
+  {
+    id: "jsonl",
+    name: "JSON Lines",
+    import: (() => import("../../../jsonl-BGuvDmy9.js"))
+  },
+  {
+    id: "jsx",
+    name: "JSX",
+    import: (() => import("../../../jsx-BtKADgXT.js"))
+  },
+  {
+    id: "julia",
+    name: "Julia",
+    aliases: [
+      "jl"
+    ],
+    import: (() => import("../../../julia-CZiKXNNP.js"))
+  },
+  {
+    id: "less",
+    name: "Less",
+    import: (() => import("../../../less-B1GLI2Di.js"))
+  },
+  {
+    id: "markdown",
+    name: "Markdown",
+    aliases: [
+      "md"
+    ],
+    import: (() => import("../../../markdown-CrScaQ96.js"))
+  },
+  {
+    id: "marko",
+    name: "Marko",
+    import: (() => import("../../../marko-CJBA24Ri.js"))
+  },
+  {
+    id: "mdc",
+    name: "MDC",
+    import: (() => import("../../../mdc-C9YSUwVC.js"))
+  },
+  {
+    id: "mdx",
+    name: "MDX",
+    import: (() => import("../../../mdx-BOhZZUJ8.js"))
+  },
+  {
+    id: "php",
+    name: "PHP",
+    import: (() => import("../../../php-BIzsF_5x.js"))
+  },
+  {
+    id: "postcss",
+    name: "PostCSS",
+    import: (() => import("../../../postcss-05aHdL-n.js"))
+  },
+  {
+    id: "pug",
+    name: "Pug",
+    aliases: [
+      "jade"
+    ],
+    import: (() => import("../../../pug-XOw9Q1Ho.js"))
+  },
+  {
+    id: "python",
+    name: "Python",
+    aliases: [
+      "py"
+    ],
+    import: (() => import("../../../python-BFNSHbwJ.js"))
+  },
+  {
+    id: "r",
+    name: "R",
+    import: (() => import("../../../r-CSmzDPi7.js"))
+  },
+  {
+    id: "regexp",
+    name: "RegExp",
+    aliases: [
+      "regex"
+    ],
+    import: (() => import("../../../regexp-BazyLpPg.js"))
+  },
+  {
+    id: "sass",
+    name: "Sass",
+    import: (() => import("../../../sass-DxHp5rTx.js"))
+  },
+  {
+    id: "scss",
+    name: "SCSS",
+    import: (() => import("../../../scss-B1FaCqwR.js"))
+  },
+  {
+    id: "shellscript",
+    name: "Shell",
+    aliases: [
+      "bash",
+      "sh",
+      "shell",
+      "zsh"
+    ],
+    import: (() => import("../../../shellscript-InADTalH.js"))
+  },
+  {
+    id: "sql",
+    name: "SQL",
+    import: (() => import("../../../sql-Cn_v3PB0.js"))
+  },
+  {
+    id: "stylus",
+    name: "Stylus",
+    aliases: [
+      "styl"
+    ],
+    import: (() => import("../../../stylus-CyKEU1Ej.js"))
+  },
+  {
+    id: "svelte",
+    name: "Svelte",
+    import: (() => import("../../../svelte-rYri41WT.js"))
+  },
+  {
+    id: "ts-tags",
+    name: "TypeScript with Tags",
+    aliases: [
+      "lit"
+    ],
+    import: (() => import("../../../ts-tags-ioVe2PKw.js"))
+  },
+  {
+    id: "tsx",
+    name: "TSX",
+    import: (() => import("../../../tsx-B8rCNbgL.js"))
+  },
+  {
+    id: "typescript",
+    name: "TypeScript",
+    aliases: [
+      "ts",
+      "cts",
+      "mts"
+    ],
+    import: (() => import("../../../typescript-RycA9KXf.js"))
+  },
+  {
+    id: "vue",
+    name: "Vue",
+    import: (() => import("../../../vue-DXEmyXn9.js"))
+  },
+  {
+    id: "vue-html",
+    name: "Vue HTML",
+    import: (() => import("../../../vue-html-j9xNEdu3.js"))
+  },
+  {
+    id: "vue-vine",
+    name: "Vue Vine",
+    import: (() => import("../../../vue-vine-D41-N99t.js"))
+  },
+  {
+    id: "wasm",
+    name: "WebAssembly",
+    import: (() => import("../../../wasm-BBXxrAl7.js"))
+  },
+  {
+    id: "wgsl",
+    name: "WGSL",
+    import: (() => import("../../../wgsl-DY4iK1q1.js"))
+  },
+  {
+    id: "wit",
+    name: "WebAssembly Interface Types",
+    import: (() => import("../../../wit-CQMQOlTg.js"))
+  },
+  {
+    id: "xml",
+    name: "XML",
+    import: (() => import("../../../xml-C2J0sS9M.js"))
+  },
+  {
+    id: "yaml",
+    name: "YAML",
+    aliases: [
+      "yml"
+    ],
+    import: (() => import("../../../yaml-DaO7k5B1.js"))
+  }
+], ae = Object.fromEntries(U.map((e) => [e.id, e.import])), me = Object.fromEntries(U.flatMap((e) => e.aliases?.map((t) => [t, e.import]) || [])), le = {
+  ...ae,
+  ...me
+}, de = /* @__PURE__ */ Z({
+  langs: le,
+  themes: ee,
+  engine: () => I(import("../../../wasm-DQxwEHae.js"))
+}), {
+  getSingletonHighlighter: _
+} = /* @__PURE__ */ Y(
+  de,
+  { guessEmbeddedLanguages: K }
+);
+async function pe(e, t, i) {
+  try {
+    return await _({
+      langs: [e],
+      themes: t,
+      engine: i ?? I(import("../../../wasm-DQxwEHae.js"))
+    });
+  } catch (n) {
+    if (n instanceof Error && n.message.includes("Language"))
+      return await _({
+        langs: ["plaintext"],
+        themes: t,
+        engine: i ?? I(import("../../../wasm-DQxwEHae.js"))
+      });
+    throw n;
+  }
+}
+var ue = (e, t, i, n = {}) => re(
+  e,
+  t,
+  i,
+  n,
+  pe
+), ce = oe(
+  ue
+), ge = ce;
+const he = { light: "vitesse-light", dark: "vitesse-dark" };
+function Se({ children: e, className: t, ...i }) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: z(
+        "not-prose flex w-full flex-col overflow-clip border",
+        "rounded-xl border-border bg-card text-card-foreground",
+        t
+      ),
+      "data-slot": "code-block",
+      ...i,
+      children: e
+    }
+  );
+}
+function ve({
+  code: e,
+  language: t = "tsx",
+  className: i,
+  ...n
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: z(
+        "w-full overflow-x-auto text-[13px] [&_.shiki]:px-4 [&_.shiki]:py-4",
+        i
+      ),
+      "data-slot": "code-block-code",
+      ...n,
+      children: e ? /* @__PURE__ */ m(
+        ge,
+        {
+          addDefaultStyles: !1,
+          defaultColor: !1,
+          language: t,
+          showLanguage: !1,
+          theme: he,
+          children: e
+        }
+      ) : /* @__PURE__ */ m("pre", { children: /* @__PURE__ */ m("code", {}) })
+    }
+  );
+}
+function we({
+  children: e,
+  className: t,
+  ...i
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: z("flex items-center justify-between", t),
+      "data-slot": "code-block-group",
+      ...i,
+      children: e
+    }
+  );
+}
+export {
+  Se as CodeBlock,
+  ve as CodeBlockCode,
+  we as CodeBlockGroup
+};