@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/datatable/hooks/useColumns.mjs

@@ -0,0 +1,42 @@
+import { ExpandedColumn as g } from "../common/helpers/ExpandedColumn.mjs";
+import { RowActionsColumn as C } from "../common/helpers/RowActionsColumn.mjs";
+import { RowSelectionColumn as d } from "../common/helpers/RowSelectionColumn.mjs";
+function x({
+  columns: n,
+  containerWidth: r,
+  isSubComponent: l,
+  isRowActions: s,
+  isRowSelection: f,
+  columnVisibility: u,
+  offset: a = 0
+}) {
+  let t = n;
+  const o = n?.filter(
+    (e) => u[e?.id ?? ""]
+  ), m = o?.reduce(
+    (e, i) => i?.size ? e + i.size : e,
+    a
+  );
+  l && (t = [
+    g,
+    ...t
+  ]), f && (t = [
+    d,
+    ...t
+  ]), s && (t = [
+    ...t,
+    C
+  ]);
+  const p = o?.filter((e) => e?.enableVisible === !1 ? !1 : e?.size === void 0).length, b = r - m;
+  return t?.map((e) => {
+    const i = e?.enableDraggable !== !1;
+    return {
+      ...e,
+      enableDraggable: i,
+      size: e?.size ?? b / p
+    };
+  });
+}
+export {
+  x as getColumns
+};

package/datatable/hooks/useComponentEventListener.mjs

@@ -0,0 +1,24 @@
+import { useState as t, useCallback as r, useEffect as d } from "react";
+const v = (l) => {
+  const n = document.getElementById(l), [e, h] = t(null), [o, f] = t(e?.getBoundingClientRect()), [c, g] = t({
+    x: e?.scrollLeft,
+    y: e?.scrollTop
+  }), [u, w] = t(
+    e?.offsetWidth || e?.clientWidth || o?.width
+  ), [a, m] = t(
+    e?.offsetHeight || e?.clientHeight || o?.height
+  ), s = r(() => {
+    w(e?.offsetWidth || e?.clientWidth), m(e?.offsetHeight || e?.clientHeight);
+  }, [e]), i = r(() => {
+    f(e?.getBoundingClientRect()), g({ x: e?.scrollLeft, y: e?.scrollTop });
+  }, [e]);
+  return d(() => (window.addEventListener("resize", s), window.addEventListener("scroll", i), () => {
+    window.removeEventListener("resize", s), window.removeEventListener("scroll", i);
+  }), [s, i, c, e]), d(() => {
+    n && h(n);
+  }, [e, l, n]), { width: u, height: a, position: o, element: e, scroll: c };
+};
+export {
+  v as default,
+  v as useComponentEventListener
+};

package/datatable/hooks/useDataTableStore.mjs

@@ -0,0 +1,188 @@
+import { create as f } from "zustand";
+import { persist as y } from "zustand/middleware";
+const e = /* @__PURE__ */ new Map();
+function F(i) {
+  return f()(
+    y(
+      (n) => ({
+        tableData: {
+          id: i,
+          pagination: {
+            pageSize: 10,
+            pageIndex: 0
+          },
+          sorting: [],
+          columnOrder: [],
+          columnVisibility: {},
+          columnPinning: {
+            left: [],
+            right: []
+          },
+          columnFilters: [],
+          columnSizing: {},
+          manualPagination: {
+            enabled: !1,
+            rowCount: 0,
+            pagination: {
+              pageSize: 5,
+              pageIndex: 0
+            }
+          }
+        },
+        setPagination: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              pagination: a
+            }
+          }));
+        },
+        setTotalCount: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              totalCount: a
+            }
+          }));
+        },
+        setSorting: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              sorting: a
+            }
+          }));
+        },
+        setColumnOrder: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              columnOrder: a
+            }
+          }));
+        },
+        setColumnVisibility: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              columnVisibility: a
+            }
+          }));
+        },
+        setColumnPinning: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              columnPinning: a
+            }
+          }));
+        },
+        setColumnFilters: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              columnFilters: a
+            }
+          }));
+        },
+        setColumnSizing: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              columnSizing: a
+            }
+          }));
+        },
+        setManualPagination: (a) => {
+          n((t) => ({
+            tableData: {
+              ...t.tableData,
+              manualPagination: a
+            }
+          }));
+        },
+        resetStoreData: () => {
+          n(() => ({
+            tableData: {
+              id: i,
+              pagination: {
+                pageSize: 10,
+                pageIndex: 0
+              },
+              sorting: [],
+              columnOrder: [],
+              columnVisibility: {},
+              columnPinning: {
+                left: [],
+                right: []
+              },
+              columnFilters: [],
+              columnSizing: {},
+              manualPagination: {
+                enabled: !1,
+                rowCount: 0,
+                pagination: {
+                  pageSize: 5,
+                  pageIndex: 0
+                }
+              }
+            }
+          }));
+        }
+      }),
+      {
+        name: `${i}-datatable`,
+        partialize: (n) => ({ tableData: n.tableData })
+      }
+    )
+  );
+}
+const x = (i) => {
+  e.has(i) || e.set(i, F(i));
+  const n = e.get(i), {
+    tableData: {
+      pagination: a,
+      sorting: t,
+      columnOrder: l,
+      columnVisibility: o,
+      columnPinning: r,
+      columnFilters: u,
+      columnSizing: g,
+      manualPagination: s
+    },
+    setPagination: m,
+    setTotalCount: b,
+    setSorting: c,
+    setColumnOrder: D,
+    setColumnVisibility: p,
+    setColumnPinning: S,
+    setColumnFilters: C,
+    setColumnSizing: P,
+    setManualPagination: d,
+    resetStoreData: z
+  } = n();
+  return {
+    pagination: a,
+    sorting: t,
+    columnOrder: l,
+    columnVisibility: o,
+    columnPinning: r,
+    columnFilters: u,
+    columnSizing: g,
+    manualPagination: s,
+    setPagination: m,
+    setTotalCount: b,
+    setSorting: c,
+    setColumnOrder: D,
+    setColumnVisibility: p,
+    setColumnPinning: S,
+    setColumnFilters: C,
+    setColumnSizing: P,
+    setManualPagination: d,
+    resetStoreData: z
+  };
+};
+export {
+  x as default,
+  x as useDataTableStore
+};

package/datatable/hooks/useGetCommonPinningStyles.mjs

@@ -0,0 +1,24 @@
+const l = (t) => {
+  const i = t.getIsPinned(), e = i === "left" && t.getIsLastColumn("left"), n = i === "right" && t.getIsFirstColumn("right"), s = t.id === "Expanded", d = t.id === "RowActionsColumn", r = t.id === "RowSelectionColumn", o = s || d || r;
+  return {
+    pinStyles: {
+      boxShadow: e ? `-5px 0 4px -4px ${o ? "transparent" : "var(--color-table-divider)"} inset` : n ? `5px 0 4px -4px ${o ? "transparent" : "var(--color-table-divider)"} inset` : void 0,
+      left: i === "left" ? `${t.getStart("left")}px` : void 0,
+      right: i === "right" ? `${t.getAfter("right")}px` : void 0,
+      opacity: i ? 1 : void 0,
+      position: i ? "sticky" : "relative",
+      width: t.getSize(),
+      // REMOVE: if not the resize not working and columns not set width correctly
+      minWidth: t.columnDef?.minSize,
+      maxWidth: t.columnDef?.maxSize,
+      zIndex: i ? 1 : 0
+    },
+    isPinned: i,
+    isFirstRightPinnedColumn: n,
+    isLastLeftPinnedColumn: e
+  };
+};
+export {
+  l as default,
+  l as useGetCommonPinningStyles
+};

package/datatable/hooks/useInitialState.mjs

@@ -0,0 +1,61 @@
+import n from "react";
+import { ExpandedColumn as O } from "../common/helpers/ExpandedColumn.mjs";
+import { OffsetColumn as h } from "../common/helpers/OffsetColumn.mjs";
+import { RowActionsColumn as I } from "../common/helpers/RowActionsColumn.mjs";
+import { RowSelectionColumn as V } from "../common/helpers/RowSelectionColumn.mjs";
+import { useDataTableStore as v } from "./useDataTableStore.mjs";
+const T = (g, s) => {
+  const {
+    pagination: o,
+    sorting: r,
+    columnOrder: a,
+    columnVisibility: u,
+    columnPinning: l,
+    manualPagination: m
+  } = v(g), t = n.useMemo(
+    () => [
+      O,
+      V,
+      ...s,
+      I,
+      h
+    ],
+    [s]
+  ), c = n.useMemo(() => ({
+    pageIndex: o?.pageIndex || 0,
+    pageSize: o?.pageSize || 10
+  }), [o]), d = n.useMemo(() => ({
+    pageIndex: 0,
+    pageSize: 10
+  }), []), f = n.useMemo(() => r?.length === 0 ? [] : r, [r]), p = n.useMemo(() => [], []), S = n.useMemo(() => a?.length !== 0 ? a : t.map((i) => i?.id ?? ""), [a, t]), M = n.useMemo(() => t.map((e) => e?.id ?? ""), [t]), C = n.useMemo(() => u !== void 0 ? u : t.reduce((e, i) => (e[i?.id ?? ""] = i?.enableVisible ?? !0, e), {}), [u, t]), P = n.useMemo(() => l !== void 0 ? l : {
+    left: [],
+    right: []
+  }, [l]), b = n.useMemo(() => ({
+    left: [],
+    right: []
+  }), []), w = n.useMemo(() => ({
+    enabled: m?.enabled ?? !1,
+    rowCount: m?.rowCount ?? void 0
+  }), [m]), x = n.useMemo(() => ({
+    enabled: !1,
+    rowCount: 0
+  }), []);
+  return {
+    columns: t,
+    initialPagination: c,
+    initialSorting: f,
+    initialColumnOrder: S,
+    initialColumnVisibility: C,
+    initialColumnPinning: P,
+    initialManualPagination: w,
+    defaultPagination: d,
+    defaultSorting: p,
+    defaultColumnOrder: M,
+    defaultColumnPinning: b,
+    defaultManualPagination: x
+  };
+};
+export {
+  T as default,
+  T as useInitialState
+};

package/datatable/hooks/useResetCacheVersion.mjs

@@ -0,0 +1,42 @@
+import { create as c } from "zustand";
+import { persist as i } from "zustand/middleware";
+const v = c()(
+  i(
+    (r, s) => ({
+      versions: {},
+      setCacheVersion: (e, o, t) => {
+        r((a) => ({
+          versions: {
+            ...a.versions,
+            [e]: {
+              version: o,
+              lastUpdated: t
+            }
+          }
+        }));
+      },
+      getCacheVersion: (e) => s().versions[e],
+      removeTableCache: (e) => {
+        typeof window < "u" && localStorage.removeItem(`${e}-datatable`);
+      }
+    }),
+    {
+      name: "datatable-cache-versions",
+      partialize: (r) => ({ versions: r.versions })
+    }
+  )
+);
+function u(r, s) {
+  try {
+    const { getCacheVersion: e, setCacheVersion: o, removeTableCache: t } = v.getState();
+    if (e(r)?.version === s?.version)
+      return !1;
+    const n = (/* @__PURE__ */ new Date()).toISOString();
+    return o(r, s?.version || 0, n), t(r), s?.onSuccess?.(), !0;
+  } catch (e) {
+    return console.error(e), s?.onError?.(e), !1;
+  }
+}
+export {
+  u as useResetCacheVersion
+};

package/datatable/hooks/useScrollableTable.mjs

@@ -0,0 +1,27 @@
+import { useState as o, useEffect as f } from "react";
+import { debounce as h } from "lodash-es";
+const W = (e) => {
+  const [c, l] = o(0), n = e.current, [s, i] = o(
+    n?.clientWidth
+  ), a = n?.scrollWidth > n?.clientWidth, d = h((t) => {
+    t.preventDefault();
+    const u = t.target.scrollLeft;
+    l(u);
+  }, 50);
+  return f(() => {
+    function t() {
+      const r = e.current;
+      i(r?.clientWidth || 0);
+    }
+    return window.addEventListener("resize", t), t(), () => window.removeEventListener("resize", t);
+  }, [e]), {
+    containerWith: s,
+    isScrollable: a,
+    scrollX: c,
+    handleScroll: d
+  };
+};
+export {
+  W as default,
+  W as useScrollableTable
+};

package/docs-kit/components/auto-props-table.mjs

@@ -0,0 +1,112 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import p, { useMemo as x } from "react";
+import { propsRegistry as f } from "../generated/props-metadata.mjs";
+import { CardTitle as c } from "../../components/cards/card-title.mjs";
+import { BasicTable as u } from "../../components/table/basic-table.mjs";
+import { Badge as g } from "../../components/common/badge.mjs";
+import { CardContainer as m } from "../../components/cards/card-container.mjs";
+const h = [
+  {
+    key: "prop",
+    label: "Prop",
+    render: (r) => /* @__PURE__ */ e("code", { className: "text-xs font-mono text-brand font-semibold", children: String(r) })
+  },
+  {
+    key: "type",
+    label: "Type",
+    render: (r) => {
+      const a = String(r);
+      if (a.includes("|")) {
+        const s = a.split("|").map((n) => n.trim());
+        return /* @__PURE__ */ e("span", { className: "text-xs font-mono", children: s.map((n, t) => /* @__PURE__ */ o(p.Fragment, { children: [
+          t > 0 && /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-gray-500", children: " | " }),
+          /* @__PURE__ */ e("span", { className: "text-blue-600 dark:text-blue-400", children: n })
+        ] }, t)) });
+      }
+      return /* @__PURE__ */ e("code", { className: "text-xs font-mono text-gray-600 dark:text-gray-400", children: a });
+    }
+  },
+  {
+    key: "default",
+    label: "Default",
+    render: (r) => {
+      const a = String(r);
+      return a === "required" ? /* @__PURE__ */ e(
+        g,
+        {
+          color: "danger",
+          size: "small",
+          className: "text-[10px] font-semibold",
+          children: "required"
+        }
+      ) : a === "—" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "—" }) : /* @__PURE__ */ e("code", { className: "text-xs font-mono text-emerald-600 dark:text-emerald-400", children: a });
+    }
+  },
+  {
+    key: "description",
+    label: "Description",
+    render: (r) => /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(r) || "—" })
+  }
+];
+function y(r, a, s) {
+  let n = r;
+  if (a?.length) {
+    const t = new Set(a);
+    n = n.filter((i) => t.has(i.name));
+  }
+  if (s?.length) {
+    const t = new Set(s);
+    n = n.filter((i) => !t.has(i.name));
+  }
+  return n.map((t) => ({
+    prop: t.name,
+    type: t.type,
+    default: t.required ? "required" : t.defaultValue ?? "—",
+    description: t.description
+  }));
+}
+const v = ({
+  componentName: r,
+  title: a,
+  showFilePath: s = !1,
+  className: n,
+  filterProps: t,
+  hideProps: i
+}) => {
+  const l = f[r], d = x(() => l ? y(l.props, t, i) : [], [l, t, i]);
+  return l ? /* @__PURE__ */ e(m, { className: n, children: /* @__PURE__ */ e(c, { title: a || `${l.displayName} Props`, children: /* @__PURE__ */ o("div", { className: "w-full p-4 sm:p-6", children: [
+    s && /* @__PURE__ */ o("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-3 font-mono", children: [
+      /* @__PURE__ */ e("span", { role: "img", "aria-label": "folder", children: "📁" }),
+      " ",
+      l.filePath
+    ] }),
+    l.description && /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4", children: l.description }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        columns: h,
+        data: d,
+        containerClassName: "mb-4",
+        hoverable: !0,
+        striped: !0
+      }
+    ),
+    /* @__PURE__ */ o("p", { className: "text-[10px] text-gray-400 dark:text-gray-500 mt-2 text-right", children: [
+      d.length,
+      " props · Auto-generated from TypeScript"
+    ] })
+  ] }) }) }) : /* @__PURE__ */ e(m, { className: n, children: /* @__PURE__ */ e(c, { title: `${r} Props`, children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("p", { className: "text-sm text-yellow-600 dark:text-yellow-400", children: [
+    /* @__PURE__ */ e("span", { role: "img", "aria-label": "warning", children: "⚠️" }),
+    " ",
+    'No props metadata found for "',
+    r,
+    '". Run',
+    " ",
+    /* @__PURE__ */ e("code", { className: "text-xs", children: "pnpm tsx scripts/generate-props.ts" }),
+    " ",
+    "to regenerate."
+  ] }) }) }) });
+};
+export {
+  v as AutoPropsTable
+};

package/docs-kit/components/dynamic-sections-page.mjs

@@ -0,0 +1,124 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useMemo as d, useCallback as v, Suspense as b } from "react";
+import { useLocation as w, useNavigate as C, useParams as k } from "react-router-dom";
+/* empty css                */
+import * as O from "lucide-react";
+import "swiper/react";
+import "swiper/modules";
+import { TableOfContents as T } from "./table-of-contents/index.mjs";
+import { Skeleton as h } from "../../components/common/skeleton.mjs";
+import { useTheme as I } from "../../themes/hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as f } from "../../themes/config/index.mjs";
+import { Typography as u } from "../../components/typography/index.mjs";
+import { CardContainer as A } from "../../components/cards/card-container.mjs";
+function M(a) {
+  const s = w(), n = C(), { "*": o } = k(), r = d(() => {
+    const m = o?.replace(/^\/+|\/+$/g, "") || "";
+    return a.includes(m) ? m : void 0;
+  }, [o, a]), t = d(() => r ? s.pathname.slice(0, -(r.length + 1)) : s.pathname.replace(/\/+$/, ""), [s.pathname, r]), l = v(
+    (m) => {
+      n(`${t}/${m}`), window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    [n, t]
+  ), p = v(() => {
+    n(t);
+  }, [n, t]);
+  return { sectionId: r, basePath: t, navigateToSection: l, navigateToBase: p };
+}
+const $ = () => /* @__PURE__ */ c("div", { className: "space-y-8", children: [
+  /* @__PURE__ */ c("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(h, { className: "h-10 w-64 mx-auto" }),
+    /* @__PURE__ */ e(h, { className: "h-6 w-96 mx-auto" })
+  ] }),
+  /* @__PURE__ */ c("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e(h, { className: "h-64 w-full" }),
+    /* @__PURE__ */ e(h, { className: "h-64 w-full" })
+  ] })
+] }), P = ({
+  sections: a,
+  onSectionClick: s
+}) => {
+  const n = d(() => {
+    const o = {};
+    return a.forEach((r) => {
+      const t = r.category || "General";
+      o[t] || (o[t] = []), o[t].push(r);
+    }), o;
+  }, [a]);
+  return /* @__PURE__ */ c("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ c("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ e(u, { tag: "h3", className: "text-2xl font-bold", children: "Browse Components" }),
+      /* @__PURE__ */ e(u, { tag: "p", className: "text-gray-500 dark:text-gray-400", children: "Select a component from the sidebar or click below to explore." })
+    ] }),
+    Object.entries(n).map(([o, r]) => /* @__PURE__ */ c("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ e(
+        u,
+        {
+          tag: "h4",
+          className: "text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",
+          children: o
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3", children: r.map((t) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => s(t.id),
+          className: "w-full p-4 text-left transition-colors hover:bg-gray-100 dark:hover:bg-gray-800/50 rounded-lg group",
+          children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(O.ChevronRight, { className: "w-4 h-4 text-gray-400 group-hover:text-brand transition-colors" }),
+            /* @__PURE__ */ e(
+              u,
+              {
+                tag: "span",
+                className: "text-sm font-medium group-hover:text-brand transition-colors",
+                children: t.label
+              }
+            )
+          ] })
+        }
+      ) }, t.id)) })
+    ] }, o))
+  ] });
+}, q = ({
+  sections: a,
+  hero: s,
+  tocTitle: n = "Table of Contents",
+  placeholder: o,
+  hideHeroInSubSections: r = !1
+}) => {
+  const t = d(() => a.map((i) => i.id), [a]), { sectionId: l, navigateToSection: p } = M(t), m = d(
+    () => a.map(({ id: i, label: y, category: S }) => ({ id: i, label: y, category: S })),
+    [a]
+  ), { layout: g } = I(), N = g === f.MACOS || g === f.MACOS_TAHOE || g === f.MACOS_TAHOE_DOCK, x = d(() => l ? a.find((i) => i.id === l)?.component ?? null : null, [l, a]);
+  return /* @__PURE__ */ e("div", { className: "relative scroll-smooth", children: /* @__PURE__ */ e(
+    T,
+    {
+      items: m,
+      title: n,
+      navigationMode: "route",
+      activeSectionId: l,
+      onItemClick: (i) => p(i.id),
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          className: `w-full mx-auto px-2 sm:px-4 lg:px-4 xl:px-6 space-y-8 sm:space-y-12 pt-8 lg:pt-0 ${N ? "max-w-none" : "max-w-7xl"}`,
+          children: [
+            !r || !l ? s : null,
+            x ? /* @__PURE__ */ e(b, { fallback: /* @__PURE__ */ e($, {}), children: /* @__PURE__ */ e(x, {}) }) : o ?? /* @__PURE__ */ e(
+              P,
+              {
+                sections: a,
+                onSectionClick: p
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+export {
+  q as DynamicSectionsPage,
+  q as default,
+  M as useDynamicSection
+};