@pagehub/sdk 0.1.5 → 0.1.7

package/dist/chunks/IconPickerPanel-BjNOlCh6.js

@@ -0,0 +1,670 @@
+import { jsxs as w, jsx as t, Fragment as Q } from "react/jsx-runtime";
+import { F as Se } from "./FloatingPanel-DJP5Vhua.js";
+import { M as Me } from "./MediaManagerModal-Dc5PK3dn.js";
+import { memo as ye, useMemo as Z, useState as g, useRef as $e, useEffect as C, useCallback as $ } from "react";
+import { a as re } from "./index.esm-mqFx3NOs.js";
+import { _ as Fe, a_ as se, db as B, fi as he, ct as De, aR as Ae, aO as Ee, a4 as Re, w as E, a0 as _e, W as Le } from "./index-C66dAl3Q.js";
+import { S as Oe } from "./SearchInput-DRUztbM0.js";
+import { useEditor as Pe } from "@craftjs/core";
+import { M as Be } from "./MiniPreviewTile-B4zxTj9Y.js";
+function We({
+  iconRef: e,
+  isSelected: r,
+  isFocused: a,
+  isFavorite: c,
+  onClick: s,
+  onDoubleClick: l,
+  onContextMenu: i,
+  onHover: f
+}) {
+  const d = e.indexOf("/"), I = d > 0 ? e.slice(d + 1) : e;
+  return /* @__PURE__ */ w(
+    "button",
+    {
+      type: "button",
+      onClick: () => s(e),
+      onDoubleClick: () => l(e),
+      onContextMenu: (p) => {
+        p.preventDefault(), i(e);
+      },
+      onMouseEnter: f ? () => f(e) : void 0,
+      onMouseLeave: f ? () => f(null) : void 0,
+      onFocus: f ? () => f(e) : void 0,
+      className: `relative flex size-full cursor-pointer items-center justify-center rounded-md transition-colors ${r ? "bg-primary/10 text-primary" : a ? "ring-primary/40 bg-primary/5 ring-1" : "text-base-content/80 hover:bg-neutral hover:text-base-content"}`,
+      "aria-label": `Icon: ${I}${c ? " (favorite)" : ""}`,
+      tabIndex: a ? 0 : -1,
+      role: "gridcell",
+      "aria-selected": r,
+      children: [
+        /* @__PURE__ */ t("svg", { className: "h-[18px] w-[18px]", "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ t("use", { href: `#${I}` }) }),
+        c && /* @__PURE__ */ t(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "bg-primary absolute top-1 right-1 size-1 rounded-full"
+          }
+        )
+      ]
+    }
+  );
+}
+const X = ye(We);
+function W({
+  refs: e,
+  selectedIcon: r,
+  favorites: a,
+  onPick: c,
+  onDoublePick: s,
+  onToggleFavorite: l,
+  onHover: i
+}) {
+  if (e.length === 0)
+    return /* @__PURE__ */ t("div", { className: "text-neutral-content px-3 py-4 text-center text-xs", children: "No icons." });
+  const f = new Set(a);
+  return /* @__PURE__ */ t("div", { role: "grid", "aria-label": "Icons", className: "grid grid-cols-5 gap-1", children: e.map((d) => /* @__PURE__ */ t("div", { className: "aspect-square", children: /* @__PURE__ */ t(
+    X,
+    {
+      iconRef: d,
+      isSelected: r === `ref-icon:${d}`,
+      isFavorite: f.has(d),
+      onClick: c,
+      onDoubleClick: s,
+      onContextMenu: l,
+      onHover: i
+    }
+  ) }, d)) });
+}
+const ze = [
+  "tb/TbBookmark",
+  "tb/TbCalendar",
+  "tb/TbLink",
+  "tb/TbKey",
+  "tb/TbBriefcase",
+  "tb/TbCamera",
+  "tb/TbCreditCard",
+  "tb/TbDatabase",
+  "tb/TbFolder",
+  "tb/TbGlobe",
+  "tb/TbHeart",
+  "tb/TbShare",
+  "tb/TbBell",
+  "tb/TbCloud",
+  "tb/TbFlag",
+  "tb/TbHome",
+  "tb/TbLock",
+  "tb/TbPhone",
+  "tb/TbStar",
+  "tb/TbTrash",
+  "tb/TbArrowLeft",
+  "tb/TbArrowRight",
+  "tb/TbCode",
+  "tb/TbDownload",
+  "tb/TbFilter",
+  "tb/TbGift",
+  "fa/FaInfo",
+  "tb/TbMap",
+  "tb/TbRss",
+  "tb/TbSearch"
+], He = 20, Ge = 200, ce = /* @__PURE__ */ new Map();
+function je(e) {
+  if (!e) return null;
+  const r = e.match(/^[A-Z][a-z0-9]*/);
+  return r ? r[0] : null;
+}
+function Ue(e, r) {
+  if (!e || !r || r.length === 0) return [];
+  const a = ce.get(e);
+  if (a) return a;
+  const c = e[0].toUpperCase() + e.slice(1), s = /* @__PURE__ */ new Map();
+  for (const i of r) {
+    if (!i.startsWith(c)) continue;
+    const f = i.slice(c.length), d = je(f);
+    if (!d) continue;
+    const I = `${e}/${i}`, p = s.get(d);
+    p ? p.push(I) : s.set(d, [I]);
+  }
+  const l = [];
+  for (const [i, f] of s)
+    f.length < He || l.push({
+      key: i,
+      label: i,
+      refs: f.slice(0, Ge)
+    });
+  return l.sort((i, f) => f.refs.length - i.refs.length), ce.set(e, l), l;
+}
+const v = 7, ee = 44, R = 44, q = 7 * ee, J = 8, le = "icon-recents", ie = "icon-favorites", Ke = 30, Ye = 100, z = { data: null }, H = /* @__PURE__ */ new Map();
+async function Ve() {
+  if (z.data) return z.data;
+  const e = await fetch("/api/icon-manifest");
+  if (!e.ok) throw new Error("Failed to load icon set index");
+  const r = await e.json();
+  return z.data = r, r;
+}
+async function fe(e) {
+  const r = H.get(e);
+  if (r) return r;
+  const a = await fetch(`/api/icon-manifest?set=${encodeURIComponent(e)}`);
+  if (!a.ok) throw new Error(`Failed to load manifest for set "${e}"`);
+  const c = await a.json();
+  return H.set(e, c), c;
+}
+function de(e) {
+  const r = e.indexOf("/");
+  return r > 0 ? e.slice(0, r) : null;
+}
+function Ze({
+  value: e,
+  prefix: r,
+  isOpen: a,
+  onChange: c,
+  onClose: s,
+  onUseMedia: l
+}) {
+  const { query: i } = Pe(), f = Fe(i).pageMedia, d = Z(
+    () => ({ value: e, prefix: r, enabled: a, changed: c, onUseMedia: l }),
+    [e, r, a, c, l]
+  ), I = () => e != null && e.startsWith("ref-image:") ? "media" : "icons", [p, F] = g(I()), [h, M] = g(e), [m, N] = g(() => {
+    if (e != null && e.startsWith("ref-icon:")) {
+      const n = e.replace("ref-icon:", ""), o = n.indexOf("/");
+      if (o > 0) return n.slice(0, o);
+    }
+    return "tb";
+  }), [T, k] = g(""), [S, y] = g(!1), [G, be] = g(z.data), [D, j] = g(H.get(m) || null), [me, U] = g(!1), [K, te] = g([]), [Y, ne] = g([]), [x, A] = g(0), _ = $e(null), [ge, pe] = g(!1);
+  C(() => {
+    pe(!0);
+  }, []), C(() => {
+    G || Ve().then(be).catch((n) => se.error(n));
+  }, [a, G]), C(() => {
+    const n = H.get(m);
+    if (n) {
+      j(n);
+      return;
+    }
+    U(!0), fe(m).then((o) => {
+      j(o), U(!1);
+    }).catch((o) => {
+      se.error(o), j([]), U(!1);
+    });
+  }, [m, a]), C(() => {
+    const n = B.getJSON(le, []), o = B.getJSON(ie, []);
+    Array.isArray(n) && te(n), Array.isArray(o) && ne(o);
+  }, [a]), C(() => {
+    const n = /* @__PURE__ */ new Set(["tb"]);
+    for (const o of K) {
+      const u = de(o);
+      u && n.add(u);
+    }
+    for (const o of Y) {
+      const u = de(o);
+      u && n.add(u);
+    }
+    for (const o of n)
+      he(o), fe(o).catch(() => {
+      });
+  }, [a, K, Y]);
+  const L = Z(() => {
+    const n = D || [];
+    if (!T) return n;
+    const o = new RegExp(T.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+    return n.filter((u) => o.test(u));
+  }, [D, T]), xe = Z(
+    () => Ue(m, D || []),
+    [m, D]
+  ), Ie = Math.ceil(L.length / v);
+  C(() => {
+    F(I());
+  }, [e, a]), C(() => {
+    M(e);
+  }, [a, e]), C(() => {
+    A(0);
+  }, [p, m, T]);
+  const oe = s, ae = $((n) => {
+    te((o) => {
+      const u = [n, ...o.filter((b) => b !== n)].slice(0, Ke);
+      return B.set(le, u), u;
+    });
+  }, []), ve = $((n) => {
+    ne((o) => {
+      const b = o.includes(n) ? o.filter((P) => P !== n) : [n, ...o].slice(0, Ye);
+      return B.set(ie, b), b;
+    });
+  }, []), O = $(
+    (n) => {
+      const o = `ref-icon:${n}`;
+      ae(n), c(o), s();
+    },
+    [ae, c, s]
+  ), Te = $(
+    (n) => {
+      const o = `ref-icon:${n}`;
+      M(o), c(o);
+    },
+    [c]
+  ), Ce = $(
+    (n) => {
+      O(n);
+    },
+    [O]
+  ), ke = (n) => {
+    if (!n) return;
+    const o = `ref-image:${n}`;
+    c(o), s(), y(!1);
+  }, we = (n) => {
+    var o;
+    k(n), (o = _.current) == null || o.scrollTo({ scrollLeft: 0, scrollTop: 0 });
+  }, Ne = (n) => {
+    var o;
+    N(n), k(""), (o = _.current) == null || o.scrollTo({ scrollLeft: 0, scrollTop: 0 });
+  }, V = $(
+    (n) => {
+      if (p !== "icons") return;
+      const o = L;
+      if (o.length === 0) return;
+      const u = (b) => {
+        var P;
+        (P = _.current) == null || P.scrollToItem({
+          rowIndex: Math.floor(b / v),
+          columnIndex: b % v
+        });
+      };
+      switch (n.key) {
+        case "ArrowRight":
+          n.preventDefault(), x < o.length - 1 && (A(x + 1), u(x + 1));
+          break;
+        case "ArrowLeft":
+          n.preventDefault(), x > 0 && (A(x - 1), u(x - 1));
+          break;
+        case "ArrowDown":
+          n.preventDefault();
+          {
+            const b = x + v;
+            b < o.length && (A(b), u(b));
+          }
+          break;
+        case "ArrowUp":
+          n.preventDefault();
+          {
+            const b = x - v;
+            b >= 0 && (A(b), u(b));
+          }
+          break;
+        case "Enter":
+          n.preventDefault(), o[x] && O(`${m}/${o[x]}`);
+          break;
+      }
+    },
+    [a, p, L, x, m, O]
+  );
+  return C(() => (document.addEventListener("keydown", V), () => document.removeEventListener("keydown", V)), [a, V]), De({ id: "icon-dialog", isOpen: a, onDismiss: oe }), {
+    dialog: d,
+    closeDialog: oe,
+    isClient: ge,
+    activeTab: p,
+    setActiveTab: F,
+    set: m,
+    setIndex: G,
+    setNames: D,
+    handleSetChange: Ne,
+    search: T,
+    setSearch: k,
+    filteredIcons: L,
+    rowCount: Ie,
+    selectedIcon: h,
+    focusedIndex: x,
+    gridRef: _,
+    loadingNames: me,
+    handleSearch: we,
+    handleIconClick: Te,
+    handleIconDoubleClick: Ce,
+    recents: K,
+    favorites: Y,
+    toggleFavorite: ve,
+    categories: xe,
+    showMediaBrowser: S,
+    setShowMediaBrowser: y,
+    handleMediaSelect: ke,
+    pageMedia: f,
+    getMediaContent: Ae
+  };
+}
+function qe({ d: e }) {
+  var d, I, p, F;
+  C(() => {
+    he(e.set);
+  }, [e.set]);
+  const [r, a] = g(null), c = e.search.length > 0, s = (d = e.selectedIcon) != null && d.startsWith("ref-icon:") ? e.selectedIcon.slice(9) : null, l = r ?? s, i = l ? l.slice(l.indexOf("/") + 1) : null, f = l ? l.slice(0, l.indexOf("/")) : null;
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      role: "tabpanel",
+      id: "icons-tabpanel",
+      "aria-labelledby": "icons-tab",
+      "aria-label": "Icon selection",
+      className: "flex min-h-0 flex-1 flex-col",
+      children: [
+        /* @__PURE__ */ w("div", { className: "flex shrink-0 items-center gap-2 px-3 py-2", children: [
+          /* @__PURE__ */ t(
+            Oe,
+            {
+              value: e.search,
+              onChange: e.handleSearch,
+              placeholder: "Search icons...",
+              size: "slim",
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "w-32 shrink-0", children: /* @__PURE__ */ t(Ee, { value: e.set, onChange: e.handleSetChange, placeholder: "Icon set", children: (e.setIndex ?? [{ id: e.set, name: e.set, count: 0 }]).map((h) => /* @__PURE__ */ t("option", { value: h.id, children: h.name }, h.id)) }) })
+        ] }),
+        (c || e.loadingNames) && /* @__PURE__ */ t("div", { className: "text-neutral-content shrink-0 px-3 pb-1 text-[10px]", children: e.loadingNames ? "Loading…" : `${e.filteredIcons.length} result${e.filteredIcons.length !== 1 ? "s" : ""}` }),
+        c ? /* @__PURE__ */ t(
+          "div",
+          {
+            role: "grid",
+            "aria-label": "Icons grid",
+            "aria-rowcount": e.rowCount,
+            "aria-colcount": v,
+            className: "min-h-0 flex-1 overflow-hidden",
+            children: /* @__PURE__ */ t(
+              re,
+              {
+                ref: e.gridRef,
+                columnCount: v,
+                columnWidth: ee,
+                height: J * R,
+                rowCount: e.rowCount,
+                rowHeight: R,
+                width: q,
+                className: "scrollbar-light text-base-content",
+                children: ({ columnIndex: h, rowIndex: M, style: m }) => {
+                  const N = M * v + h;
+                  if (N >= e.filteredIcons.length) return null;
+                  const T = e.filteredIcons[N], k = `${e.set}/${T}`, S = `ref-icon:${k}`, y = e.focusedIndex === N;
+                  return /* @__PURE__ */ t("div", { style: m, className: "p-0.5", children: /* @__PURE__ */ t(
+                    X,
+                    {
+                      iconRef: k,
+                      isSelected: e.selectedIcon === S,
+                      isFocused: y,
+                      isFavorite: e.favorites.includes(k),
+                      onClick: e.handleIconClick,
+                      onDoubleClick: e.handleIconDoubleClick,
+                      onContextMenu: e.toggleFavorite,
+                      onHover: a
+                    }
+                  ) });
+                }
+              }
+            )
+          }
+        ) : /* @__PURE__ */ w(Re, { className: "min-h-0 flex-1", children: [
+          /* @__PURE__ */ t(E, { title: "Common", defaultOpen: !0, full: 1, children: /* @__PURE__ */ t(
+            W,
+            {
+              refs: ze,
+              selectedIcon: e.selectedIcon,
+              favorites: e.favorites,
+              onPick: e.handleIconClick,
+              onDoublePick: e.handleIconDoubleClick,
+              onToggleFavorite: e.toggleFavorite,
+              onHover: a
+            }
+          ) }),
+          e.recents.length > 0 && /* @__PURE__ */ t(E, { title: `Recents · ${e.recents.length}`, defaultOpen: !1, full: 1, children: /* @__PURE__ */ t(
+            W,
+            {
+              refs: e.recents,
+              selectedIcon: e.selectedIcon,
+              favorites: e.favorites,
+              onPick: e.handleIconClick,
+              onDoublePick: e.handleIconDoubleClick,
+              onToggleFavorite: e.toggleFavorite
+            }
+          ) }),
+          e.favorites.length > 0 && /* @__PURE__ */ t(
+            E,
+            {
+              title: `Favorites · ${e.favorites.length}`,
+              defaultOpen: !1,
+              full: 1,
+              children: /* @__PURE__ */ t(
+                W,
+                {
+                  refs: e.favorites,
+                  selectedIcon: e.selectedIcon,
+                  favorites: e.favorites,
+                  onPick: e.handleIconClick,
+                  onDoublePick: e.handleIconDoubleClick,
+                  onToggleFavorite: e.toggleFavorite
+                }
+              )
+            }
+          ),
+          e.categories.map((h) => /* @__PURE__ */ t(
+            E,
+            {
+              title: `${h.label} · ${h.refs.length}`,
+              defaultOpen: !1,
+              full: 1,
+              scrollable: h.refs.length > 50,
+              maxHeight: "280px",
+              children: /* @__PURE__ */ t(
+                W,
+                {
+                  refs: h.refs,
+                  selectedIcon: e.selectedIcon,
+                  favorites: e.favorites,
+                  onPick: e.handleIconClick,
+                  onDoublePick: e.handleIconDoubleClick,
+                  onToggleFavorite: e.toggleFavorite
+                }
+              )
+            },
+            `${e.set}:${h.key}`
+          )),
+          (((I = e.setNames) == null ? void 0 : I.length) ?? 0) > 0 && /* @__PURE__ */ t(
+            E,
+            {
+              title: `All · ${(((p = e.setNames) == null ? void 0 : p.length) ?? 0).toLocaleString()}`,
+              defaultOpen: e.categories.length === 0,
+              full: 1,
+              children: /* @__PURE__ */ t(
+                "div",
+                {
+                  role: "grid",
+                  "aria-label": `All ${e.set} icons`,
+                  style: { width: q, height: J * R },
+                  children: /* @__PURE__ */ t(
+                    re,
+                    {
+                      columnCount: v,
+                      columnWidth: ee,
+                      height: J * R,
+                      rowCount: Math.ceil((((F = e.setNames) == null ? void 0 : F.length) ?? 0) / v),
+                      rowHeight: R,
+                      width: q,
+                      className: "scrollbar-light",
+                      children: ({ columnIndex: h, rowIndex: M, style: m }) => {
+                        const N = M * v + h, T = e.setNames || [];
+                        if (N >= T.length) return null;
+                        const k = T[N], S = `${e.set}/${k}`, y = `ref-icon:${S}`;
+                        return /* @__PURE__ */ t("div", { style: m, className: "p-1", children: /* @__PURE__ */ t(
+                          X,
+                          {
+                            iconRef: S,
+                            isSelected: e.selectedIcon === y,
+                            isFocused: !1,
+                            isFavorite: e.favorites.includes(S),
+                            onClick: e.handleIconClick,
+                            onDoubleClick: e.handleIconDoubleClick,
+                            onContextMenu: e.toggleFavorite,
+                            onHover: a
+                          }
+                        ) });
+                      }
+                    }
+                  )
+                }
+              )
+            },
+            `${e.set}:__all__`
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { className: "border-base-300 bg-neutral text-neutral-content flex h-10 shrink-0 items-center gap-2 border-t px-3 text-xs", children: i ? /* @__PURE__ */ w(Q, { children: [
+          /* @__PURE__ */ t(
+            "svg",
+            {
+              className: "text-base-content size-5 shrink-0",
+              "aria-hidden": "true",
+              fill: "currentColor",
+              children: /* @__PURE__ */ t("use", { href: `#${i}` })
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "text-base-content truncate font-mono text-[11px]", children: i }),
+          /* @__PURE__ */ t("span", { className: "text-neutral-content/60 shrink-0 tracking-wide uppercase", children: f })
+        ] }) : /* @__PURE__ */ t("span", { className: "text-neutral-content/60", children: "Hover an icon to preview" }) })
+      ]
+    }
+  );
+}
+function Je({ d: e }) {
+  var a;
+  const r = (a = e.dialog.value) != null && a.startsWith("ref-image:") ? e.getMediaContent(e.pageMedia, e.dialog.value.replace("ref-image:", "")) : null;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: "flex flex-1 flex-col items-center justify-center gap-4 p-8",
+      role: "tabpanel",
+      id: "media-tabpanel",
+      "aria-labelledby": "media-tab",
+      "aria-label": "Media selection",
+      children: r ? /* @__PURE__ */ w(Q, { children: [
+        /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-4", children: /* @__PURE__ */ t(Be, { size: "video", bg: "neutral", relative: !0, children: /* @__PURE__ */ t("img", { src: r, alt: "Selected media", className: "size-full object-contain" }) }) }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => e.setShowMediaBrowser(!0),
+            className: "btn btn-primary",
+            "aria-label": "Change selected image",
+            children: "Change Image"
+          }
+        )
+      ] }) : /* @__PURE__ */ w(Q, { children: [
+        /* @__PURE__ */ t(_e, { size: 48, className: "text-neutral-content" }),
+        /* @__PURE__ */ t("p", { className: "text-neutral-content text-center text-sm", children: "Select an image from your media library" }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => e.setShowMediaBrowser(!0),
+            className: "btn btn-primary",
+            "aria-label": "Browse media library",
+            children: "Browse Media"
+          }
+        )
+      ] })
+    }
+  );
+}
+function lt({
+  value: e,
+  prefix: r,
+  onChange: a,
+  onClose: c,
+  initialPosition: s,
+  defaultWidth: l,
+  defaultHeight: i
+}) {
+  return /* @__PURE__ */ t(
+    Se,
+    {
+      isOpen: !0,
+      onClose: c,
+      title: "Select Icon",
+      storageKey: "icon-picker",
+      autoSize: !1,
+      defaultWidth: l,
+      defaultHeight: i,
+      minWidth: 320,
+      maxWidth: 640,
+      minHeight: 360,
+      initialPosition: s,
+      zIndex: Le,
+      children: /* @__PURE__ */ t(Qe, { value: e, prefix: r, onChange: a, onClose: c })
+    }
+  );
+}
+function Qe({ value: e, prefix: r, onChange: a, onClose: c }) {
+  const s = Ze({
+    value: e,
+    prefix: r,
+    isOpen: !0,
+    // body only mounts when panel open
+    onChange: a,
+    onClose: c
+  });
+  return s.isClient ? /* @__PURE__ */ w("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ w(
+      "div",
+      {
+        className: "border-base-300 flex shrink-0 gap-4 border-b px-3",
+        role: "tablist",
+        "aria-label": "Icon selection tabs",
+        children: [
+          /* @__PURE__ */ t(
+            ue,
+            {
+              active: s.activeTab === "icons",
+              onClick: () => s.setActiveTab("icons"),
+              label: "Icons",
+              id: "icons"
+            }
+          ),
+          /* @__PURE__ */ t(
+            ue,
+            {
+              active: s.activeTab === "media",
+              onClick: () => s.setActiveTab("media"),
+              label: "Media",
+              id: "media"
+            }
+          )
+        ]
+      }
+    ),
+    s.activeTab === "icons" && /* @__PURE__ */ t(qe, { d: s }),
+    s.activeTab === "media" && /* @__PURE__ */ t(Je, { d: s }),
+    s.showMediaBrowser && /* @__PURE__ */ t(
+      Me,
+      {
+        isOpen: s.showMediaBrowser,
+        onClose: () => s.setShowMediaBrowser(!1),
+        onSelect: s.handleMediaSelect,
+        selectionMode: !0
+      }
+    )
+  ] }) : null;
+}
+function ue({
+  active: e,
+  onClick: r,
+  label: a,
+  id: c
+}) {
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      onClick: r,
+      className: `relative cursor-pointer py-2 text-xs font-medium transition-colors ${e ? "text-base-content after:bg-base-content after:absolute after:inset-x-0 after:-bottom-px after:h-px after:content-['']" : "text-neutral-content hover:text-base-content"}`,
+      role: "tab",
+      "aria-selected": e,
+      "aria-controls": `${c}-tabpanel`,
+      id: `${c}-tab`,
+      tabIndex: e ? 0 : -1,
+      children: a
+    }
+  );
+}
+export {
+  lt as default
+};