@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/tabs/tab.mjs

@@ -0,0 +1,444 @@
+import { jsx as b, jsxs as N } from "react/jsx-runtime";
+import { useState as A, useId as W, useCallback as I, Children as M, isValidElement as T, createContext as X, useContext as B, useRef as R, cloneElement as K, useEffect as H } from "react";
+import { createPortal as Y } from "react-dom";
+import { motion as Z, LayoutGroup as ee } from "framer-motion";
+import w from "classnames";
+import { useIsMounted as re } from "../../hooks/use-is-mounted.mjs";
+import { ChevronDown as te } from "../icons/chevron-down.mjs";
+import { useBreakpoint as U } from "../../hooks/use-breakpoint.mjs";
+const _ = {
+  underline: {
+    base: "relative pb-2 border-b-2 border-transparent",
+    selected: "border-brand text-brand dark:border-brand dark:text-brand",
+    unselected: "hover:border-border dark:hover:border-gray-600"
+  },
+  pills: {
+    base: "rounded-full px-4 py-2 transition-all duration-200",
+    selected: "bg-brand text-white shadow-sm",
+    unselected: "hover:bg-gray-100 dark:hover:bg-gray-800"
+  },
+  bordered: {
+    base: "rounded-lg border-2 px-4 py-2 transition-all duration-200",
+    selected: "border-brand bg-brand/10 text-brand dark:bg-brand/20",
+    unselected: "border-border hover:border-border dark:hover:border-gray-600"
+  },
+  solid: {
+    base: "rounded-lg px-4 py-2 transition-all duration-200",
+    selected: "bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-white",
+    unselected: "hover:bg-gray-100 dark:hover:bg-gray-800"
+  }
+}, ne = {
+  small: "text-sm",
+  medium: "text-base",
+  large: "text-lg"
+}, z = {
+  primary: "text-blue-600 dark:text-blue-400",
+  secondary: "text-gray-600 dark:text-gray-400",
+  success: "text-green-600 dark:text-green-400",
+  danger: "text-red-600 dark:text-red-400"
+}, oe = () => {
+}, O = X({
+  selectedIndex: 0,
+  setSelectedIndex: oe,
+  tabCount: 0,
+  baseId: ""
+}), ye = ({
+  variant: r = "underline",
+  className: f,
+  children: m,
+  selectedIndex: d,
+  defaultIndex: o = 0,
+  onChange: t
+}) => {
+  const [y, v] = A(o), k = W(), l = d !== void 0, u = l ? d : y, x = I(
+    (i) => {
+      l || v(i), t?.(i);
+    },
+    [l, t]
+  );
+  let E = 0;
+  return M.forEach(m, (i) => {
+    T(i) && i.type === ae && M.forEach(i.props.children, (g) => {
+      T(g) && E++;
+    });
+  }), /* @__PURE__ */ b(
+    O.Provider,
+    {
+      value: { selectedIndex: u, setSelectedIndex: x, tabCount: E, baseId: k },
+      children: /* @__PURE__ */ b("div", { className: w("w-full", f), "data-variant": r, children: m })
+    }
+  );
+}, ae = ({
+  variant: r = "underline",
+  className: f,
+  children: m,
+  responsive: d = !0
+}) => {
+  const { selectedIndex: o, setSelectedIndex: t, baseId: y } = B(O), v = R(null), k = re(), l = U(), u = M.toArray(m).filter(T), x = u.length, E = d && k && ["xs", "sm"].indexOf(l) !== -1, i = u.map((a) => T(a) ? {
+    label: a.props.children,
+    icon: a.props.icon,
+    disabled: a.props.disabled,
+    color: a.props.color
+  } : { label: null, icon: void 0, disabled: !1, color: void 0 }), g = I(
+    (a) => {
+      let p = o;
+      a.key === "ArrowRight" ? (a.preventDefault(), p = (o + 1) % x) : a.key === "ArrowLeft" ? (a.preventDefault(), p = (o - 1 + x) % x) : a.key === "Home" ? (a.preventDefault(), p = 0) : a.key === "End" && (a.preventDefault(), p = x - 1), p !== o && (t(p), v.current?.querySelectorAll(
+        '[role="tab"]:not([disabled])'
+      )?.[p]?.focus());
+    },
+    [o, t, x]
+  ), L = w(
+    "flex",
+    {
+      "gap-6 border-b border-border": r === "underline",
+      "gap-2 bg-gray-100 dark:bg-gray-900 p-1 rounded-xl": r === "pills",
+      "gap-2": r === "bordered",
+      "gap-1 bg-gray-100 dark:bg-gray-800 p-1 rounded-xl": r === "solid"
+    },
+    f
+  );
+  return E ? /* @__PURE__ */ b(
+    le,
+    {
+      tabItems: i,
+      selectedIndex: o,
+      onChange: t,
+      variant: r,
+      className: f
+    }
+  ) : /* @__PURE__ */ b(
+    "div",
+    {
+      ref: v,
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      className: L,
+      onKeyDown: g,
+      children: u.map(
+        (a, p) => K(a, {
+          __index: p,
+          __selected: p === o,
+          __baseId: y,
+          __onSelect: () => t(p)
+        })
+      )
+    }
+  );
+}, se = {
+  underline: "border-2 border-border rounded-lg hover:bg-gray-100  dark:hover:bg-gray-800/50",
+  pills: "bg-gray-100 dark:bg-gray-900 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800",
+  bordered: "border-2 border-brand rounded-lg bg-brand/5 dark:bg-brand/10",
+  solid: "bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700"
+}, de = {
+  underline: "rounded-xl border border-border",
+  pills: "rounded-2xl border border-border",
+  bordered: "rounded-xl border-2 border-brand/30 dark:border-brand/20",
+  solid: "rounded-xl border border-border"
+}, j = {
+  underline: {
+    selected: "bg-gray-100 dark:bg-gray-700 font-medium border-l-2 border-brand",
+    highlighted: "bg-gray-100 dark:bg-gray-700/50"
+  },
+  pills: {
+    selected: "bg-brand text-white font-medium rounded-full",
+    highlighted: "bg-gray-100 dark:bg-gray-700/50 rounded-full"
+  },
+  bordered: {
+    selected: "bg-brand/10 dark:bg-brand/20 text-brand font-medium border border-brand/30 rounded-lg",
+    highlighted: "bg-gray-100 dark:bg-gray-700/50 rounded-lg"
+  },
+  solid: {
+    selected: "bg-gray-200 dark:bg-gray-700 font-medium text-gray-900 dark:text-white",
+    highlighted: "bg-gray-100 dark:bg-gray-700/50"
+  }
+};
+function le({
+  tabItems: r,
+  selectedIndex: f,
+  onChange: m,
+  variant: d = "underline",
+  className: o
+}) {
+  const [t, y] = A(!1), [v, k] = A(!1), [l, u] = A(-1), [x, E] = A({}), i = R(null), g = R(null), L = R([]), a = r.map((e, n) => e.disabled ? -1 : n).filter((e) => e !== -1), p = I(() => {
+    if (!i.current) return;
+    const e = i.current.getBoundingClientRect(), n = 200, s = window.innerHeight - e.bottom, h = e.top, c = s < n && h > s;
+    E({
+      position: "fixed",
+      ...c ? { bottom: window.innerHeight - e.top + 4 } : { top: e.bottom + 4 },
+      left: e.left,
+      width: e.width,
+      zIndex: 9999
+    });
+  }, []), $ = I(() => {
+    p(), u(f), k(!1), y(!0);
+  }, [f, p]), D = I(() => {
+    k(!0);
+    const e = setTimeout(() => {
+      y(!1), k(!1), u(-1);
+    }, 100);
+    return () => clearTimeout(e);
+  }, []), G = I(() => {
+    t ? D() : $();
+  }, [t, $, D]), P = I(
+    (e) => {
+      r[e]?.disabled || (m(e), D(), i.current?.focus());
+    },
+    [m, D, r]
+  ), V = I(
+    (e, n) => {
+      const s = r.length;
+      let h = (e + n + s) % s, c = 0;
+      for (; r[h]?.disabled && c < s; )
+        h = (h + n + s) % s, c++;
+      return h;
+    },
+    [r]
+  );
+  H(() => {
+    if (!t) return;
+    const e = (n) => {
+      i.current && !i.current.contains(n.target) && g.current && !g.current.contains(n.target) && D();
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [t, D]), H(() => {
+    if (!t) return;
+    const e = (n) => {
+      n.key === "Escape" && (D(), i.current?.focus());
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [t, D]), H(() => {
+    if (!t) return;
+    const e = () => p();
+    return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+    };
+  }, [t, p]), H(() => {
+    l >= 0 && L.current[l] && L.current[l]?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [l]);
+  const q = (e) => {
+    if (!t) {
+      ["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key) && (e.preventDefault(), $());
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), u((n) => V(n, 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault(), u((n) => V(n, -1));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), l >= 0 && !r[l]?.disabled && P(l);
+        break;
+      case "Escape":
+      case "Tab":
+        e.preventDefault(), D();
+        break;
+      case "Home":
+        e.preventDefault(), u(a[0] ?? 0);
+        break;
+      case "End":
+        e.preventDefault(), u(
+          a[a.length - 1] ?? r.length - 1
+        );
+        break;
+    }
+  }, S = r[f], F = S?.color ? z[S.color] : "text-gray-900 dark:text-gray-100", J = t && Y(
+    /* @__PURE__ */ b(
+      "div",
+      {
+        ref: g,
+        id: "tablist-mobile-listbox",
+        role: "listbox",
+        tabIndex: -1,
+        "aria-activedescendant": l >= 0 ? `tablist-mobile-option-${l}` : void 0,
+        style: x,
+        className: w(
+          "max-h-52 overflow-auto bg-white p-1.5 shadow-large dark:bg-gray-800",
+          de[d],
+          "transition ease-in duration-100",
+          v ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"
+        ),
+        children: r.map((e, n) => {
+          const s = n === f, h = n === l, c = e.disabled, C = e.color ? z[e.color] : "";
+          return /* @__PURE__ */ N(
+            "button",
+            {
+              id: `tablist-mobile-option-${n}`,
+              ref: (Q) => {
+                L.current[n] = Q;
+              },
+              type: "button",
+              role: "option",
+              "aria-selected": s,
+              "aria-disabled": c,
+              disabled: c,
+              onClick: () => P(n),
+              onMouseEnter: () => !c && u(n),
+              className: w(
+                "flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm transition-colors",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand",
+                d !== "pills" && "rounded-lg",
+                d === "pills" && "rounded-full",
+                c && "opacity-40 cursor-not-allowed",
+                !c && s && j[d].selected,
+                !c && s && !C && "text-gray-900 dark:text-white",
+                !c && s && C,
+                !c && !s && h && j[d].highlighted,
+                !c && !s && h && !C && "text-gray-900 dark:text-gray-100",
+                !c && !s && h && C,
+                !c && !s && !h && !C && "text-gray-600 dark:text-gray-400",
+                !c && !s && !h && C
+              ),
+              children: [
+                e.icon && /* @__PURE__ */ b("span", { className: "shrink-0 flex items-center", children: e.icon }),
+                /* @__PURE__ */ b("span", { className: "flex-1 truncate", children: e.label }),
+                s && d !== "pills" && /* @__PURE__ */ b("span", { className: "shrink-0 h-1.5 w-1.5 rounded-full bg-brand" })
+              ]
+            },
+            n
+          );
+        })
+      }
+    ),
+    document.body
+  );
+  return /* @__PURE__ */ N("div", { className: o, children: [
+    /* @__PURE__ */ N(
+      "button",
+      {
+        ref: i,
+        type: "button",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": t,
+        "aria-controls": "tablist-mobile-listbox",
+        onClick: G,
+        onKeyDown: q,
+        className: w(
+          "flex w-full items-center justify-between px-4 py-2.5 text-sm font-medium transition-colors sm:px-5 sm:py-3.5",
+          se[d]
+        ),
+        children: [
+          /* @__PURE__ */ N("span", { className: w("flex items-center gap-2", F), children: [
+            S?.icon && /* @__PURE__ */ b("span", { className: "shrink-0 flex items-center", children: S.icon }),
+            /* @__PURE__ */ b("span", { className: "truncate", children: S?.label ?? r[0]?.label })
+          ] }),
+          /* @__PURE__ */ b(
+            te,
+            {
+              className: w(
+                "h-auto w-3.5 shrink-0 transition-transform duration-200 text-gray-500 dark:text-gray-400",
+                t && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    J
+  ] });
+}
+function he({
+  children: r,
+  className: f,
+  disabled: m,
+  showMobileIndicator: d = !0,
+  variant: o = "underline",
+  size: t = "medium",
+  color: y,
+  icon: v,
+  __index: k = 0,
+  __selected: l = !1,
+  __baseId: u = "",
+  __onSelect: x
+}) {
+  const E = U(), i = ["xs"].indexOf(E) !== -1, g = l;
+  return /* @__PURE__ */ N(
+    "button",
+    {
+      role: "tab",
+      type: "button",
+      id: `${u}-tab-${k}`,
+      "aria-selected": g,
+      "aria-controls": `${u}-panel-${k}`,
+      tabIndex: g ? 0 : -1,
+      disabled: m,
+      onClick: () => !m && x?.(),
+      className: w(
+        "relative font-medium tracking-wide transition-all duration-200",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        _[o].base,
+        ne[t],
+        {
+          [_[o].selected]: g,
+          [_[o].unselected]: !g,
+          "text-sm": i
+        },
+        y && !g && z[y],
+        {
+          "text-gray-600 dark:text-gray-400": !g && !y,
+          "text-gray-900 dark:text-white": g && o === "underline"
+        },
+        f
+      ),
+      children: [
+        /* @__PURE__ */ N("span", { className: "flex items-center justify-center gap-2 whitespace-nowrap", children: [
+          v && /* @__PURE__ */ b("span", { className: "shrink-0", children: v }),
+          /* @__PURE__ */ b("span", { children: r })
+        ] }),
+        g && o === "underline" && d && /* @__PURE__ */ b(
+          Z.span,
+          {
+            className: "absolute bottom-0 left-0 right-0 h-0.5 bg-brand rounded-full",
+            layoutId: "tab-indicator",
+            transition: { type: "spring", stiffness: 500, damping: 30 }
+          }
+        )
+      ]
+    }
+  );
+}
+function xe({ children: r, className: f }) {
+  const { selectedIndex: m, baseId: d } = B(O), o = M.toArray(r).filter(T);
+  return /* @__PURE__ */ b("div", { className: w("mt-4", f), children: /* @__PURE__ */ b(ee, { children: o.map(
+    (t, y) => K(t, {
+      __index: y,
+      __selected: y === m,
+      __baseId: d
+    })
+  ) }) });
+}
+function ke({
+  children: r,
+  className: f,
+  __index: m = 0,
+  __selected: d = !1,
+  __baseId: o = ""
+}) {
+  return d ? /* @__PURE__ */ b(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${o}-panel-${m}`,
+      "aria-labelledby": `${o}-tab-${m}`,
+      tabIndex: 0,
+      className: w(
+        "rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-brand",
+        f
+      ),
+      children: r
+    }
+  ) : null;
+}
+export {
+  ye as TabGroup,
+  he as TabItem,
+  ae as TabList,
+  ke as TabPanel,
+  xe as TabPanels
+};

package/components/typography/index.mjs

@@ -0,0 +1,113 @@
+import { jsx as d } from "react/jsx-runtime";
+import u from "classnames";
+import { Tooltip as h } from "../common/tooltip.mjs";
+const g = {
+  h1: "text-h1",
+  h2: "text-h2",
+  h3: "text-h3",
+  h4: "text-h4",
+  h5: "text-h5",
+  h6: "text-h6",
+  p: "",
+  i: "",
+  b: "",
+  q: "text-quote",
+  em: "",
+  strong: "",
+  small: "",
+  span: "",
+  del: "",
+  mark: "",
+  abbr: "cursor-help",
+  pre: "border-2 border-border py-3 px-4 rounded-xl dark:border-border dark:bg-gray-800 bg-gray-100",
+  code: "whitespace-pre prose text-sm prose-sm py-2 px-3 rounded-md shadow-sm bg-gray-100 dark:bg-gray-900 text-current px-4 py-2 rounded-lg block font-mono",
+  kbd: "bg-gray-100 border border-border text-gray-900 rounded-lg leading-none inline-flex items-center justify-center text-sm py-1.5 px-2",
+  blockquote: "border-l-4 border-border text-quote py-3 px-4",
+  sub: "p-3 text-sx text-bottom",
+  sup: "p-3 text-sx text-top",
+  headline: "text-headline",
+  body: "text-body",
+  "label-1": "text-label-1",
+  "label-2": "text-label-2",
+  caption: "text-caption",
+  legal: "text-legal"
+}, y = {
+  default: "text-primary-color",
+  primary: "text-primary",
+  secondary: "text-secondary-color",
+  dark: "text-dark",
+  light: "text-light",
+  muted: "text-muted",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error"
+}, f = {
+  default: "font-sans",
+  mono: "font-mono"
+}, k = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "i",
+  "b",
+  "q",
+  "em",
+  "strong",
+  "small",
+  "span",
+  "del",
+  "mark",
+  "abbr",
+  "pre",
+  "code",
+  "kbd",
+  "blockquote",
+  "sub",
+  "sup"
+];
+function v({
+  tag: t = "p",
+  title: e,
+  children: p,
+  className: x,
+  color: r,
+  fontFamily: o,
+  tooltip: a,
+  tooltipPlacement: b = "top",
+  tooltipColor: i,
+  tooltipArrow: c = !0
+}) {
+  const m = !k.includes(
+    t
+  ) ? "div" : t;
+  let s = "", n = "";
+  t === "abbr" && e === void 0 && console.warn("title attribute is missing for abbr tag."), r && (s = y[r]), o && (n = f[o]);
+  const l = /* @__PURE__ */ d(
+    m,
+    {
+      "data-tucu": "typography",
+      "data-typography-tag": t,
+      ...e && { title: e },
+      className: u(g[t], n, s, x),
+      children: p
+    }
+  );
+  return a ? /* @__PURE__ */ d(
+    h,
+    {
+      content: a,
+      placement: b,
+      color: i,
+      arrow: c,
+      children: l
+    }
+  ) : l;
+}
+export {
+  v as Typography,
+  v as default
+};

package/components/utils/code-block.mjs

@@ -0,0 +1,124 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as l, useEffect as x } from "react";
+import { Scrollbar as k } from "../common/scrollbar.mjs";
+import { Check as v, Copy as C, ChevronUp as w, ChevronDown as N } from "lucide-react";
+import d from "prismjs";
+import e from "classnames";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-sql";
+import { useIsMobile as j } from "../../hooks/use-is-mobile.mjs";
+const G = ({
+  code: t,
+  language: o,
+  expanded: f = !0,
+  noExpand: c = !1,
+  className: m
+}) => {
+  const { isMobile: a } = j(), [i, g] = l(!1), [s, h] = l(
+    !!(!c && f)
+  ), [b, p] = l("");
+  x(() => {
+    if (o && d.languages[o]) {
+      const y = d.highlight(
+        t,
+        d.languages[o],
+        o
+      );
+      p(y);
+    } else
+      p(t);
+  }, [t, o]);
+  const u = () => {
+    navigator.clipboard.writeText(t).then(() => {
+      g(!0), setTimeout(() => g(!1), 2e3);
+    });
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-tucu": "code-block",
+      className: e(
+        "overflow-x-auto min-h-[150px] relative rounded-xl border mt-4",
+        "bg-gray-100 dark:bg-gray-800 border-border hover:border-gray-400 dark:hover:border-gray-600",
+        s ? "h-fit max-h-[300px] transition-all duration-300" : "h-full transition-all duration-300",
+        m
+      ),
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: e(
+              "absolute z-10 top-1 right-1 p-2 flex justify-end items-center w-full gap-1",
+              a && "flex-col items-end"
+            ),
+            children: [
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  onClick: u,
+                  "aria-label": i ? "Copied to clipboard" : "Copy to clipboard",
+                  className: e(
+                    "code-block-btn p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
+                    a && "p-1 w-8 h-8"
+                  ),
+                  title: "Copy to clipboard",
+                  children: [
+                    i ? /* @__PURE__ */ r(v, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ r(C, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }),
+                    /* @__PURE__ */ r("span", { className: "sr-only", children: i ? "Copied!" : "Copy code" })
+                  ]
+                }
+              ),
+              !c && /* @__PURE__ */ r(
+                "button",
+                {
+                  onClick: () => h(!s),
+                  className: e(
+                    "code-block-btn p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
+                    a && "p-1 w-8 h-8"
+                  ),
+                  title: "Expand/Collapse",
+                  children: s ? /* @__PURE__ */ r(N, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ r(w, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" })
+                }
+              ),
+              o && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: e(
+                    "code-block-btn p-2 text-sm font-mono bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:pointer dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
+                    a && "w-max max-w-11 h-8"
+                  ),
+                  children: o
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          k,
+          {
+            className: "overflow-x-auto h-full p-4 pr-16 pt-4 lg:pr-4 lg:pt-16 transition-all duration-300",
+            children: /* @__PURE__ */ r("pre", { className: "text-xs whitespace-pre-wrap font-mono block", children: /* @__PURE__ */ r(
+              "code",
+              {
+                className: `language-${o || "text"}`,
+                dangerouslySetInnerHTML: { __html: b }
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  G as CodeBlock,
+  G as default
+};