@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/docs-kit/components/hero-card.mjs

@@ -0,0 +1,140 @@
+import { jsxs as a, jsx as e, Fragment as p } from "react/jsx-runtime";
+/* empty css                */
+import * as u from "lucide-react";
+import "react-router-dom";
+import "swiper/react";
+import "swiper/modules";
+import { INTRODUCTION_DOCS_URL as h, GITHUB_URL as f } from "../utils/constants.mjs";
+import { Github as b } from "../../components/icons/brands/github.mjs";
+import { ScrollToTop as g } from "../../components/utils/scroll-to-top.mjs";
+import { Typography as o } from "../../components/typography/index.mjs";
+import { Button as r } from "../../components/buttons/button/index.mjs";
+import { AnchorLink as t } from "../../components/links/anchor-link.mjs";
+const S = ({
+  icon: i,
+  title: n,
+  description: m,
+  githubButton: d,
+  getStartedButton: c,
+  docsButton: v,
+  backgroundAnimation: x,
+  customButton: l,
+  content: s
+}) => /* @__PURE__ */ a("section", { className: "relative overflow-hidden", children: [
+  /* @__PURE__ */ a("div", { className: "relative rounded-2xl p-6 sm:p-8 md:p-12 lg:p-16", children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        id: "animated-background-elements",
+        className: "absolute inset-0 overflow-hidden",
+        children: [
+          /* @__PURE__ */ e("div", { className: "absolute inset-0 opacity-40", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute inset-0",
+              style: {
+                backgroundImage: "linear-gradient(var(--hero-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-color) 1px, transparent 1px)",
+                backgroundSize: "32px 32px"
+              }
+            }
+          ) }),
+          x && /* @__PURE__ */ a(p, { children: [
+            /* @__PURE__ */ e("div", { className: "absolute w-12 h-12 bg-red-500 opacity-50 rounded-full animate-full-move-1 z-5" }),
+            /* @__PURE__ */ e("div", { className: "absolute w-12 h-12 bg-blue-500 opacity-50 rounded-full animate-full-move-2 z-5" }),
+            /* @__PURE__ */ e("div", { className: "absolute w-12 h-12 bg-green-500 opacity-50 rounded-full animate-full-move-3 z-5" }),
+            /* @__PURE__ */ e("div", { className: "absolute w-12 h-12 bg-purple-500 opacity-50 rounded-full animate-full-move-4 z-5" }),
+            /* @__PURE__ */ e("div", { className: "absolute w-12 h-12 bg-yellow-500 opacity-50 rounded-full animate-full-move-5 z-5" }),
+            /* @__PURE__ */ e("div", { className: "absolute w-12 h-12 bg-pink-500 opacity-50 rounded-full animate-full-move-6 z-5" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "relative text-center z-10", children: [
+      i && /* @__PURE__ */ e("div", { className: "relative mx-auto mb-6 w-fit", children: i }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "h1",
+          className: "text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl font-bold text-brand mb-6",
+          children: n
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-xs sm:text-sm md:text-base lg:text-lg text-current max-w-6xl mx-auto leading-relaxed",
+          children: m
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "flex flex-wrap sm:flex-row gap-4 justify-center mt-8 max-w-md mx-auto sm:max-w-none", children: [
+        s && s,
+        l && /* @__PURE__ */ e(
+          r,
+          {
+            variant: l.variant,
+            size: "large",
+            className: "backdrop-blur-sm shadow-xl transition-all duration-300 transform",
+            children: /* @__PURE__ */ a(
+              t,
+              {
+                to: l.link,
+                target: l.target,
+                className: "flex items-center text-inherit no-underline",
+                children: [
+                  l?.icon && l.icon,
+                  l.label
+                ]
+              }
+            )
+          }
+        ),
+        c && /* @__PURE__ */ e(
+          r,
+          {
+            variant: "solid",
+            size: "large",
+            className: "backdrop-blur-sm shadow-xl transition-all duration-300 transform",
+            children: /* @__PURE__ */ a(
+              t,
+              {
+                to: h,
+                target: "_blank",
+                className: "flex items-center no-underline",
+                children: [
+                  /* @__PURE__ */ e(u.Rocket, { className: "w-5 h-5 mr-2 animate-pulse" }),
+                  "Get Started"
+                ]
+              }
+            )
+          }
+        ),
+        d && /* @__PURE__ */ e(
+          r,
+          {
+            variant: "ghost",
+            size: "large",
+            className: "backdrop-blur-sm shadow-xl transition-all duration-300 transform",
+            children: /* @__PURE__ */ a(
+              t,
+              {
+                to: f,
+                target: "_blank",
+                className: "flex items-center text-inherit no-underline",
+                children: [
+                  /* @__PURE__ */ e(b, { className: "w-5 h-5 mr-2" }),
+                  "View on GitHub"
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] }),
+  /* @__PURE__ */ e(g, { size: "small", showAfter: 400 })
+] });
+export {
+  S as HeroCard,
+  S as default
+};

package/docs-kit/components/lazy-component-section.mjs

@@ -0,0 +1,87 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useState as L, useRef as v, useEffect as E, Suspense as x } from "react";
+/* empty css                */
+import "lucide-react";
+import "react-router-dom";
+import "swiper/react";
+import "swiper/modules";
+import { Skeleton as t } from "../../components/common/skeleton.mjs";
+const j = ({
+  id: c,
+  component: p,
+  fallback: N
+}) => {
+  const [h, a] = L(!1), m = v(null), n = v(null);
+  return E(() => {
+    const r = m.current;
+    if (!r || h) return;
+    const w = () => window.location.hash.slice(1) === c ? (a(!0), !0) : !1, u = () => {
+      const s = r.getBoundingClientRect(), d = window.innerHeight;
+      return s.top < d + 800 && s.bottom > -800 ? (a(!0), !0) : !1;
+    }, f = (s) => {
+      s.detail?.sectionId === c && (a(!0), window.dispatchEvent(
+        new CustomEvent("sectionReadyForScroll", {
+          detail: { sectionId: c }
+        })
+      ));
+    };
+    if (w() || u())
+      return;
+    window.addEventListener(
+      "forceLoadSection",
+      f
+    );
+    const i = () => {
+      w() || u();
+    }, l = () => {
+      u() && (window.removeEventListener("scroll", l), window.removeEventListener("hashchange", i));
+    };
+    return window.addEventListener("hashchange", i), window.addEventListener("scroll", l, { passive: !0 }), n.current = new IntersectionObserver(
+      (s) => {
+        s.forEach((d) => {
+          d.isIntersecting && (a(!0), n.current && r && n.current.unobserve(r), window.removeEventListener("scroll", l), window.removeEventListener("hashchange", i));
+        });
+      },
+      {
+        rootMargin: "800px",
+        // Increased to load much earlier
+        threshold: 0
+      }
+    ), n.current.observe(r), () => {
+      window.removeEventListener(
+        "forceLoadSection",
+        f
+      ), window.removeEventListener("hashchange", i), window.removeEventListener("scroll", l), n.current && r && n.current.unobserve(r), n.current = null;
+    };
+  }, [h, c]), /* @__PURE__ */ e(
+    "section",
+    {
+      id: c,
+      ref: m,
+      className: "space-y-8 scroll-mt-[120px] min-h-[400px]",
+      children: h ? /* @__PURE__ */ e(x, { fallback: N || /* @__PURE__ */ o("div", { className: "space-y-8", children: [
+        /* @__PURE__ */ o("div", { className: "text-center space-y-4", children: [
+          /* @__PURE__ */ e(t, { className: "h-10 w-64 mx-auto" }),
+          /* @__PURE__ */ e(t, { className: "h-6 w-96 mx-auto" })
+        ] }),
+        /* @__PURE__ */ o("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ e(t, { className: "h-64 w-full" }),
+          /* @__PURE__ */ e(t, { className: "h-64 w-full" })
+        ] })
+      ] }), children: /* @__PURE__ */ e(p, {}) }) : /* @__PURE__ */ o("div", { className: "space-y-8", children: [
+        /* @__PURE__ */ o("div", { className: "text-center space-y-4", children: [
+          /* @__PURE__ */ e(t, { className: "h-10 w-64 mx-auto" }),
+          /* @__PURE__ */ e(t, { className: "h-6 w-96 mx-auto" })
+        ] }),
+        /* @__PURE__ */ o("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ e(t, { className: "h-64 w-full" }),
+          /* @__PURE__ */ e(t, { className: "h-64 w-full" })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  j as LazyComponentSection,
+  j as default
+};

package/docs-kit/components/nav-options.mjs

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ListContainer as o } from "../../components/list/list-container.mjs";
+import { SwitchVariant as i } from "../../themes/components/settings/switch-variant.mjs";
+import { SwitchMode as r } from "../../themes/components/settings/switch-mode.mjs";
+const p = () => /* @__PURE__ */ t(
+  o,
+  {
+    label: "Options",
+    items: [
+      {
+        id: "theme-variant",
+        content: /* @__PURE__ */ t(i, {})
+      },
+      {
+        id: "theme",
+        content: /* @__PURE__ */ t(r, {})
+      }
+    ]
+  }
+);
+export {
+  p as NavOptions,
+  p as default
+};

package/docs-kit/components/playground-button.mjs

@@ -0,0 +1,22 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { DOCUMENTATION_URL as o } from "../utils/constants.mjs";
+import { Button as r } from "../../components/buttons/button/index.mjs";
+import * as n from "lucide-react";
+const l = () => /* @__PURE__ */ e(
+  r,
+  {
+    variant: "ghost",
+    size: "small",
+    fullWidth: !0,
+    onClick: () => {
+      window.open(o, "_blank");
+    },
+    children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(n.PlayCircle, { className: "w-4 h-4 animate-pulse" }),
+      /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Playground" })
+    ] })
+  }
+);
+export {
+  l as PlaygroundButton
+};

package/docs-kit/components/prop-playground.mjs

@@ -0,0 +1,289 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useMemo as f, useCallback as w, useState as z } from "react";
+import { propsRegistry as B } from "../generated/props-metadata.mjs";
+import { LucideAlertTriangle as _ } from "lucide-react";
+import { Switch as I } from "../../components/inputs/switch.mjs";
+import { CardContainer as E } from "../../components/cards/card-container.mjs";
+import { CardTitle as R } from "../../components/cards/card-title.mjs";
+import { Badge as D } from "../../components/common/badge.mjs";
+import { BasicTable as O } from "../../components/table/basic-table.mjs";
+import { Input as S } from "../../components/inputs/input.mjs";
+import { Select as F } from "../../components/inputs/select.mjs";
+function G(l) {
+  if (l.propType) return l.propType;
+  switch (l.type) {
+    case "boolean":
+      return "false | true";
+    case "number":
+      return "number";
+    case "select":
+      return (l.options || []).map((r) => `"${r}"`).join(" | ");
+    default:
+      return "string";
+  }
+}
+function M(l) {
+  const r = l.type.toLowerCase();
+  if (r === "boolean" || r === "false | true" || r === "true | false")
+    return { type: "boolean" };
+  if (l.type.includes("|") && l.type.includes('"')) {
+    const o = l.type.split("|").map((s) => s.trim().replace(/^"|"$/g, "")).filter((s) => s.length > 0 && !s.includes("=>"));
+    if (o.length > 0)
+      return { type: "select", options: o };
+  }
+  return r === "number" ? { type: "number" } : r === "string" ? { type: "text" } : r.includes("=>") || r.includes("reactnode") || r.includes("reactelement") || r.includes("element") || r.includes("ref") ? { type: "none" } : !r.includes("<") && !r.includes("{") && !r.includes("(") ? { type: "text" } : { type: "none" };
+}
+const L = ({ prop: l, value: r, onChange: o }) => /* @__PURE__ */ a(
+  I,
+  {
+    checked: !!r,
+    onChange: () => o(l.name, !r)
+  }
+), X = ({
+  prop: l,
+  control: r,
+  value: o,
+  onChange: s
+}) => {
+  const u = f(
+    () => (r.options || []).map((d) => ({
+      name: d,
+      value: d
+    })),
+    [r.options]
+  );
+  return /* @__PURE__ */ a(
+    F,
+    {
+      value: o || "",
+      onSelect: (d) => s(l.name, d),
+      options: u,
+      label: "",
+      variant: "solid",
+      className: "text-xs w-full",
+      size: "sm"
+    }
+  );
+}, V = ({ prop: l, value: r, onChange: o }) => /* @__PURE__ */ a(
+  S,
+  {
+    label: "",
+    placeholder: l.name,
+    value: r ?? "",
+    onChange: (s) => o(l.name, s.target.value),
+    variant: "solid",
+    className: "text-xs w-full",
+    size: "sm"
+  }
+), H = ({ prop: l, value: r, onChange: o }) => /* @__PURE__ */ a(
+  S,
+  {
+    label: "",
+    placeholder: l.name,
+    type: "number",
+    value: r ?? "",
+    onChange: (s) => o(l.name, Number(s.target.value)),
+    variant: "solid",
+    className: "text-xs w-full",
+    size: "sm"
+  }
+), ae = ({
+  componentName: l,
+  children: r,
+  defaultValues: o = {},
+  excludeProps: s = [],
+  includeProps: u,
+  className: d,
+  title: P,
+  controlOverrides: b = []
+}) => {
+  const p = B[l], g = f(
+    () => new Map(b.map((t) => [t.name, t])),
+    [b]
+  ), k = f(() => {
+    if (!p) return [];
+    const t = new Map(p.props.map((e) => [e.name, e]));
+    for (const e of b)
+      t.has(e.name) || t.set(e.name, {
+        name: e.name,
+        type: G(e),
+        defaultValue: null,
+        required: e.required ?? !1,
+        description: e.description ?? ""
+      });
+    return Array.from(t.values());
+  }, [p, b]), y = f(() => {
+    if (!p) return [];
+    const t = /* @__PURE__ */ new Set([
+      ...s,
+      "children",
+      "className",
+      "style",
+      "ref",
+      "key"
+    ]), e = k.filter((n) => {
+      if (t.has(n.name) || u && !u.includes(n.name)) return !1;
+      const m = g.get(n.name), x = m ? { type: m.type, options: m.options } : M(n);
+      return x.type === "none" && n.name in o ? !0 : x.type !== "none";
+    }).map((n) => {
+      const m = g.get(n.name), x = m ? { type: m.type, options: m.options } : M(n);
+      if (x.type === "none" && n.name in o) {
+        const j = o[n.name];
+        return typeof j == "boolean" ? { prop: n, control: { type: "boolean" } } : typeof j == "number" ? { prop: n, control: { type: "number" } } : { prop: n, control: { type: "text" } };
+      }
+      return { prop: n, control: x };
+    });
+    if (!u?.length)
+      return e;
+    const i = new Map(
+      u.map((n, m) => [n, m])
+    );
+    return e.sort(
+      (n, m) => (i.get(n.prop.name) ?? Number.MAX_SAFE_INTEGER) - (i.get(m.prop.name) ?? Number.MAX_SAFE_INTEGER)
+    );
+  }, [
+    p,
+    k,
+    s,
+    u,
+    o,
+    g
+  ]), h = w(() => {
+    const t = { ...o };
+    for (const { prop: e, control: i } of y)
+      if (!(e.name in t))
+        if (e.defaultValue !== null)
+          t[e.name] = i.type === "boolean" ? e.defaultValue === "true" : e.defaultValue;
+        else
+          switch (i.type) {
+            case "boolean":
+              t[e.name] = !1;
+              break;
+            case "select":
+              t[e.name] = i.options?.[0] ?? "";
+              break;
+            case "number":
+              t[e.name] = "";
+              break;
+            default:
+              t[e.name] = "";
+              break;
+          }
+    return t;
+  }, [y, o]), [N, C] = z(
+    () => h()
+  ), v = w((t, e) => {
+    C((i) => ({ ...i, [t]: e }));
+  }, []), A = w(() => {
+    C(h());
+  }, [h]), T = f(() => y.map(({ prop: t, control: e }) => {
+    const i = {
+      prop: t,
+      control: e,
+      value: N[t.name],
+      onChange: v
+    };
+    let n = null;
+    switch (e.type) {
+      case "boolean":
+        n = /* @__PURE__ */ a(L, { ...i });
+        break;
+      case "select":
+        n = /* @__PURE__ */ a(X, { ...i });
+        break;
+      case "number":
+        n = /* @__PURE__ */ a(H, { ...i });
+        break;
+      case "text":
+        n = /* @__PURE__ */ a(V, { ...i });
+        break;
+    }
+    return {
+      id: t.name,
+      propName: t.name,
+      propType: t.type,
+      propDescription: t.description,
+      propRequired: t.required,
+      controlElement: n
+    };
+  }), [y, N, v]), q = f(
+    () => [
+      {
+        key: "propName",
+        label: "Prop",
+        headerClassName: "w-1/2 max-w-[50%] px-4 py-2.5 text-[11px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider",
+        className: "w-1/2 max-w-[50%] px-4 py-3 align-middle",
+        render: (t, e) => /* @__PURE__ */ c("div", { className: "flex min-w-0 max-w-full flex-col gap-0.5", children: [
+          /* @__PURE__ */ c("span", { className: "text-xs font-mono font-medium text-gray-900 dark:text-gray-100", children: [
+            e.propName,
+            e.propRequired && /* @__PURE__ */ a("span", { className: "text-red-500 ml-0.5", children: "*" })
+          ] }),
+          /* @__PURE__ */ a("span", { className: "text-[10px] font-mono text-gray-400 dark:text-gray-500", children: e.propType }),
+          e.propDescription && /* @__PURE__ */ a("span", { className: "text-[11px] text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2", children: e.propDescription })
+        ] })
+      },
+      {
+        key: "controlElement",
+        label: "Control",
+        headerClassName: "w-1/2 max-w-[50%] px-4 py-2.5 text-[11px] font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider",
+        className: "w-1/2 max-w-[50%] px-4 py-3 align-middle",
+        render: (t) => /* @__PURE__ */ a("div", { className: "min-w-0 max-w-full w-full", children: t })
+      }
+    ],
+    []
+  );
+  if (!p)
+    return /* @__PURE__ */ a(E, { className: d, children: /* @__PURE__ */ a(R, { title: "Playground", children: /* @__PURE__ */ a("div", { className: "w-full p-4", children: /* @__PURE__ */ c("p", { className: "text-sm text-yellow-600 dark:text-yellow-400 flex items-center gap-2", children: [
+      /* @__PURE__ */ a(_, { className: "w-4 h-4" }),
+      'No metadata for "',
+      l,
+      '"'
+    ] }) }) }) });
+  const $ = Object.fromEntries(
+    Object.entries(N).filter(([, t]) => t !== void 0 && t !== "")
+  );
+  return /* @__PURE__ */ a(E, { className: d, children: /* @__PURE__ */ a(R, { title: P || `${p.displayName} Playground`, children: /* @__PURE__ */ c("div", { className: "w-full min-w-0", children: [
+    /* @__PURE__ */ a("div", { className: "pb-6 mt-6 rounded-2xl sm:p-8 border border-border bg-gray-100 dark:bg-gray-800/50 flex items-center justify-center min-h-[120px]", children: r($) }),
+    /* @__PURE__ */ c("div", { className: "p-4 sm:p-6", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ a("span", { className: "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Controls" }),
+          /* @__PURE__ */ c(D, { color: "info", size: "small", className: "text-[10px]", children: [
+            y.length,
+            " props"
+          ] })
+        ] }),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            onClick: A,
+            className: "text-xs text-brand hover:underline cursor-pointer",
+            children: "Reset defaults"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(
+        O,
+        {
+          columns: q,
+          data: T,
+          tableClassName: "table-fixed",
+          hoverable: !1,
+          striped: !1,
+          maxRows: Math.max(T.length, 10),
+          rowClassName: "hover:bg-gray-100 dark:hover:bg-gray-800/30"
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: "mt-4 p-3 bg-gray-900 dark:bg-gray-950 rounded-lg", children: [
+        /* @__PURE__ */ a("p", { className: "text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: "Current Props" }),
+        /* @__PURE__ */ a("pre", { className: "text-xs text-emerald-400 font-mono overflow-x-auto", children: `<${p.displayName}
+${Object.entries($).map(([t, e]) => typeof e == "boolean" ? e ? `  ${t}` : `  ${t}={false}` : typeof e == "number" ? `  ${t}={${e}}` : `  ${t}="${e}"`).join(`
+`)}
+/>` })
+      ] })
+    ] })
+  ] }) }) });
+};
+export {
+  ae as PropPlayground
+};

package/docs-kit/components/table-of-contents/index.mjs

@@ -0,0 +1,19 @@
+import { jsx as m } from "react/jsx-runtime";
+/* empty css                   */
+import "lucide-react";
+import "react-router-dom";
+import "swiper/react";
+import "swiper/modules";
+import { TocDefault as A } from "./toc-default.mjs";
+import { TocSonoma as O } from "./toc-sonoma.mjs";
+import { TocTahoe as i } from "./toc-tahoe.mjs";
+import { useTheme as e } from "../../../themes/hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as r } from "../../../themes/config/index.mjs";
+const c = (t) => {
+  const { layout: o } = e();
+  return o === r.MACOS_TAHOE || o === r.MACOS_TAHOE_DOCK || o === r.MACOS_TAHOE_NAVBAR || o === r.MACOS_TAHOE_CLEAN ? /* @__PURE__ */ m(i, { ...t }) : o === r.MACOS || o === r.MACOS_CLEAN || o === r.MACOS_NAVBAR ? /* @__PURE__ */ m(O, { ...t }) : /* @__PURE__ */ m(A, { ...t });
+};
+export {
+  c as TableOfContents,
+  c as default
+};