@elaraai/east-ui-components 0.0.1-beta.1 → 0.0.1-beta.2

package/dist/index.cjs

@@ -18240,7 +18240,7 @@ function useChart(props) {
     },
     [env.locale]
   );
-  const formatDate = React__namespace.useCallback(
+  const formatDate2 = React__namespace.useCallback(
     (options) => {
       return (value) => new Date(value).toLocaleDateString(env.locale, options);
     },
@@ -18311,7 +18311,7 @@ function useChart(props) {
     spacing,
     // formatters
     formatNumber,
-    formatDate,
+    formatDate: formatDate2,
     // state
     highlightedSeries,
     setHighlightedSeries,
@@ -53313,7 +53313,7 @@ class RowStateManager {
   }
 }
 const tableRootEqual = east.equalFor(eastUi.Table.Types.Root);
-function toChakraTableRoot(value) {
+function toChakraTableRoot$1(value) {
   var _a, _b, _c;
   const style = getSomeorUndefined(value.style);
   return {
@@ -53337,7 +53337,7 @@ const EastChakraTable = React.memo(function EastChakraTable2({
   loadingDelay = 200,
   enableColumnResizing = true
 }) {
-  const props = React.useMemo(() => toChakraTableRoot(value), [value]);
+  const props = React.useMemo(() => toChakraTableRoot$1(value), [value]);
   const tableContainerRef = React.useRef(null);
   const [rowStateManager] = React.useState(() => new RowStateManager());
   const [rowStates, setRowStates] = React.useState(/* @__PURE__ */ new Map());
@@ -53756,6 +53756,898 @@ function toChakraTreeViewRoot(value) {
     selectionMode: style ? (_c = getSomeorUndefined(style.selectionMode)) == null ? void 0 : _c.type : void 0
   };
 }
+const formatDate = (date2) => {
+  return date2.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  });
+};
+const generateDateTicks = (startDate, endDate, maxTicks = 8) => {
+  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24));
+  const tickInterval = Math.max(1, Math.ceil(totalDays / maxTicks));
+  const ticks2 = [];
+  const current2 = new Date(startDate);
+  while (current2 <= endDate) {
+    ticks2.push(new Date(current2));
+    current2.setDate(current2.getDate() + tickInterval);
+  }
+  return ticks2;
+};
+const getDatePosition = (date2, startDate, endDate, width) => {
+  const totalTimeDiff = endDate.getTime() - startDate.getTime();
+  const currentTimeDiff = date2.getTime() - startDate.getTime();
+  const ratio = currentTimeDiff / totalTimeDiff;
+  return ratio * width;
+};
+const LABEL_HALF_WIDTH = 40;
+const EventAxis = ({
+  startDate,
+  endDate,
+  width,
+  height
+}) => {
+  const ticks2 = React.useMemo(() => {
+    const dates = generateDateTicks(startDate, endDate, Math.floor(width / 100));
+    return dates.map((date2, index) => {
+      const x2 = getDatePosition(date2, startDate, endDate, width);
+      if (x2 >= LABEL_HALF_WIDTH && x2 <= width - LABEL_HALF_WIDTH) {
+        return { date: date2, x: x2, index };
+      }
+      return null;
+    }).filter(Boolean);
+  }, [startDate, endDate, width]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.HStack,
+    {
+      position: "relative",
+      width: "100%",
+      height: `${height}px`,
+      px: "3",
+      alignItems: "center",
+      borderBottomWidth: "1px",
+      borderColor: "border.muted",
+      gap: 0,
+      children: ticks2.map(({ date: date2, x: x2, index }) => /* @__PURE__ */ jsxRuntime.jsx(
+        react.Box,
+        {
+          position: "absolute",
+          left: `${x2}px`,
+          transform: "translateX(-50%)",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            react.Text,
+            {
+              fontSize: "sm",
+              fontWeight: "semibold",
+              color: "fg.default",
+              whiteSpace: "nowrap",
+              children: formatDate(date2)
+            }
+          )
+        },
+        `tick-${index}`
+      ))
+    }
+  );
+};
+const GanttTask = ({
+  x: x2,
+  y: y2,
+  width,
+  height,
+  value,
+  onClick
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const { colorPalette, label, progress } = React.useMemo(() => {
+    var _a;
+    return {
+      colorPalette: ((_a = getSomeorUndefined(value.colorPalette)) == null ? void 0 : _a.type) ?? "blue",
+      label: getSomeorUndefined(value.label),
+      progress: getSomeorUndefined(value.progress)
+    };
+  }, [value]);
+  const [fillColor, strokeColor] = react.useToken("colors", [
+    `${colorPalette}.500`,
+    `${colorPalette}.600`
+  ]);
+  const fontSize = React.useMemo(() => Math.min(height * 0.7, 14), [height]);
+  const textX = React.useMemo(() => x2 + 8, [x2]);
+  const taskWidth = React.useMemo(() => Math.max(width, 4), [width]);
+  const progressWidth = React.useMemo(() => taskWidth * ((progress ?? 0) / 100), [taskWidth, progress]);
+  const handleMouseEnter = React.useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = React.useCallback(() => setIsHovered(false), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: x2,
+        y: y2,
+        width: taskWidth,
+        height,
+        fill: fillColor,
+        stroke: strokeColor,
+        strokeWidth: isHovered ? 3 : 2,
+        opacity: isHovered ? 1 : 0.9,
+        rx: 4,
+        ry: 4,
+        onClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style: { cursor: onClick ? "pointer" : "default" }
+      }
+    ),
+    progress !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: x2,
+        y: y2,
+        width: progressWidth,
+        height,
+        fill: "rgba(255,255,255,0.3)",
+        rx: 4,
+        ry: 4,
+        style: { pointerEvents: "none" }
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "foreignObject",
+      {
+        x: textX,
+        y: y2,
+        width: 180,
+        height,
+        style: { pointerEvents: "auto" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.Text,
+          {
+            fontSize: `${fontSize}px`,
+            color: "fg.default",
+            opacity: isHovered ? 1 : 0.9,
+            whiteSpace: "nowrap",
+            cursor: onClick ? "pointer" : "default",
+            userSelect: "none",
+            lineHeight: "1",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            display: "flex",
+            alignItems: "center",
+            height: "100%",
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onClick,
+            m: 0,
+            p: 0,
+            children: label
+          }
+        )
+      }
+    )
+  ] });
+};
+const makeDiamondPoints = (x2, y2, size) => {
+  const centerX = x2;
+  const centerY = y2 + size / 2;
+  return `${centerX},${y2} ${centerX + size / 2},${centerY} ${centerX},${y2 + size} ${centerX - size / 2},${centerY}`;
+};
+const GanttMilestone = ({
+  x: x2,
+  y: y2,
+  height,
+  value,
+  onClick
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const { colorPalette, label } = React.useMemo(() => {
+    var _a;
+    return {
+      colorPalette: ((_a = getSomeorUndefined(value.colorPalette)) == null ? void 0 : _a.type) ?? "blue",
+      label: getSomeorUndefined(value.label)
+    };
+  }, [value]);
+  const [fillColor, strokeColor] = react.useToken("colors", [
+    `${colorPalette}.500`,
+    `${colorPalette}.600`
+  ]);
+  const fontSize = React.useMemo(() => Math.min(height * 0.7, 14), [height]);
+  const diamondSize = React.useMemo(() => height, [height]);
+  const textX = React.useMemo(() => x2 + diamondSize / 2 + 4, [x2, diamondSize]);
+  const diamondPoints = React.useMemo(() => makeDiamondPoints(x2, y2, diamondSize), [x2, y2, diamondSize]);
+  const handleMouseEnter = React.useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = React.useCallback(() => setIsHovered(false), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "polygon",
+      {
+        points: diamondPoints,
+        fill: fillColor,
+        stroke: strokeColor,
+        strokeWidth: isHovered ? 3 : 2,
+        opacity: isHovered ? 1 : 0.9,
+        onClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style: { cursor: onClick ? "pointer" : "default" }
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "foreignObject",
+      {
+        x: textX,
+        y: y2,
+        width: 200,
+        height,
+        style: { pointerEvents: "auto" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.Text,
+          {
+            fontSize: `${fontSize}px`,
+            color: "fg.default",
+            opacity: isHovered ? 1 : 0.9,
+            whiteSpace: "nowrap",
+            cursor: onClick ? "pointer" : "default",
+            userSelect: "none",
+            lineHeight: "1",
+            display: "flex",
+            alignItems: "center",
+            height: "100%",
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onClick,
+            m: 0,
+            p: 0,
+            children: label
+          }
+        )
+      }
+    )
+  ] });
+};
+const getEventPosition = (event, startDate, endDate, width) => {
+  const totalTimespan = endDate.getTime() - startDate.getTime();
+  if (event.type === "Milestone") {
+    const eventDate = event.value.date;
+    const eventTime = eventDate.getTime();
+    if (eventTime >= startDate.getTime() && eventTime <= endDate.getTime()) {
+      const position = (eventTime - startDate.getTime()) / totalTimespan;
+      return {
+        x: position * width,
+        width: 0,
+        isMilestone: true
+      };
+    }
+    return { x: 0, width: 0, isMilestone: true };
+  }
+  const taskValue = event.value;
+  const eventStart = taskValue.start;
+  const eventEnd = taskValue.end;
+  const clampedStart = Math.max(eventStart.getTime(), startDate.getTime());
+  const clampedEnd = Math.min(eventEnd.getTime(), endDate.getTime());
+  const startOffset = (clampedStart - startDate.getTime()) / totalTimespan;
+  const duration = (clampedEnd - clampedStart) / totalTimespan;
+  return {
+    x: startOffset * width,
+    width: Math.max(duration * width, 2),
+    isMilestone: false
+  };
+};
+const GanttEventRow = ({
+  events,
+  rowIndex,
+  y: y2,
+  width,
+  height,
+  startDate,
+  endDate,
+  onEventClick
+}) => {
+  const renderedEvents = React.useMemo(() => {
+    const eventHeight = height - 24;
+    const eventY = y2 + 12;
+    return events.map((event, eventIndex) => {
+      const position = getEventPosition(event, startDate, endDate, width);
+      if (position.x < 0 || position.x > width) return null;
+      if (event.type === "Milestone") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          GanttMilestone,
+          {
+            x: position.x,
+            y: eventY,
+            height: eventHeight,
+            value: event.value,
+            onClick: onEventClick ? () => onEventClick(event, rowIndex, eventIndex) : () => {
+            }
+          },
+          `${rowIndex}-${eventIndex}`
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        GanttTask,
+        {
+          x: position.x,
+          y: eventY,
+          width: position.width,
+          height: eventHeight,
+          value: event.value,
+          onClick: onEventClick ? () => onEventClick(event, rowIndex, eventIndex) : () => {
+          }
+        },
+        `${rowIndex}-${eventIndex}`
+      );
+    }).filter(Boolean);
+  }, [events, rowIndex, y2, width, height, startDate, endDate, onEventClick]);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: renderedEvents });
+};
+const ganttRootEqual = east.equalFor(eastUi.Gantt.Types.Root);
+function toChakraTableRoot(value) {
+  var _a, _b, _c;
+  const style = getSomeorUndefined(value.style);
+  return {
+    variant: style ? (_a = getSomeorUndefined(style.variant)) == null ? void 0 : _a.type : void 0,
+    size: style ? (_b = getSomeorUndefined(style.size)) == null ? void 0 : _b.type : void 0,
+    striped: style ? getSomeorUndefined(style.striped) : void 0,
+    interactive: style ? getSomeorUndefined(style.interactive) : void 0,
+    stickyHeader: style ? getSomeorUndefined(style.stickyHeader) : void 0,
+    showColumnBorder: style ? getSomeorUndefined(style.showColumnBorder) : void 0,
+    colorPalette: style ? (_c = getSomeorUndefined(style.colorPalette)) == null ? void 0 : _c.type : void 0
+  };
+}
+const EastChakraGantt = React.memo(function EastChakraGantt2({
+  value,
+  height = "400px",
+  rowHeight = 48,
+  overscan = 8,
+  onSortChange,
+  enableMultiSort = true,
+  maxSortColumns = 5,
+  loadingDelay = 200,
+  enableColumnResizing = true,
+  onEventClick,
+  tablePanelSize = 40
+}) {
+  const props = React.useMemo(() => toChakraTableRoot(value), [value]);
+  const headerHeight = 56;
+  const [gridLineColor] = react.useToken("colors", ["gray.300"]);
+  const tableContainerRef = React.useRef(null);
+  const timelineContainerRef = React.useRef(null);
+  const [timelineWidth, setTimelineWidth] = React.useState(400);
+  const [rowStateManager] = React.useState(() => new RowStateManager());
+  const [rowStates, setRowStates] = React.useState(/* @__PURE__ */ new Map());
+  const visibleRowsRef = React.useRef(/* @__PURE__ */ new Set());
+  const dateRange = React.useMemo(() => {
+    let minDate = null;
+    let maxDate = null;
+    value.rows.forEach((row) => {
+      row.events.forEach((event) => {
+        if (event.type === "Milestone") {
+          const date2 = event.value.date;
+          if (minDate === null || date2 < minDate) minDate = date2;
+          if (maxDate === null || date2 > maxDate) maxDate = date2;
+        } else {
+          const start = event.value.start;
+          const end3 = event.value.end;
+          if (minDate === null || start < minDate) minDate = start;
+          if (maxDate === null || end3 > maxDate) maxDate = end3;
+        }
+      });
+    });
+    if (minDate === null) minDate = /* @__PURE__ */ new Date();
+    if (maxDate === null) maxDate = /* @__PURE__ */ new Date();
+    const totalDuration = maxDate.getTime() - minDate.getTime();
+    const bufferDuration = Math.max(totalDuration * 0.1, 24 * 60 * 60 * 1e3);
+    return {
+      start: new Date(minDate.getTime() - bufferDuration),
+      end: new Date(maxDate.getTime() + bufferDuration)
+    };
+  }, [value.rows]);
+  const gridLinePositions = React.useMemo(() => {
+    const dates = generateDateTicks(dateRange.start, dateRange.end, Math.floor(timelineWidth / 100));
+    return dates.map((date2) => getDatePosition(date2, dateRange.start, dateRange.end, timelineWidth)).filter((x2) => x2 >= 0 && x2 <= timelineWidth);
+  }, [dateRange.start, dateRange.end, timelineWidth]);
+  React.useEffect(() => {
+    const container = timelineContainerRef.current;
+    if (!container) return;
+    const updateWidth = () => {
+      const width = container.offsetWidth;
+      setTimelineWidth(Math.max(200, width));
+    };
+    updateWidth();
+    const resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, []);
+  React.useEffect(() => {
+    return rowStateManager.subscribe(() => {
+      setRowStates(new Map(rowStateManager.getStates()));
+    });
+  }, [rowStateManager]);
+  React.useEffect(() => {
+    return () => {
+      rowStateManager.clear();
+    };
+  }, [rowStateManager]);
+  const columnHelper = createColumnHelper();
+  const columns = React.useMemo(() => {
+    return value.columns.map((col) => {
+      const print = east.printFor(col.type);
+      return columnHelper.accessor(
+        (row) => row.cells.get(col.key),
+        {
+          id: col.key,
+          header: getSomeorUndefined(col.header) ?? col.key,
+          enableSorting: true,
+          minSize: 80,
+          size: 150,
+          maxSize: 400,
+          meta: {
+            print,
+            columnKey: col.key
+          }
+        }
+      );
+    });
+  }, [value.columns, columnHelper]);
+  const [sorting, setSorting] = React.useState([]);
+  const handleSortingChange = React.useCallback(
+    (updater) => {
+      setSorting((prev) => {
+        const newSorting = typeof updater === "function" ? updater(prev) : updater;
+        const sorts = newSorting.map((s2) => ({
+          columnKey: s2.id,
+          direction: s2.desc ? "desc" : "asc"
+        }));
+        onSortChange == null ? void 0 : onSortChange(sorts);
+        return newSorting;
+      });
+    },
+    [onSortChange]
+  );
+  const [columnSizing, setColumnSizing] = React.useState({});
+  const table = useReactTable({
+    data: value.rows,
+    columns,
+    state: {
+      sorting,
+      columnSizing
+    },
+    onSortingChange: handleSortingChange,
+    onColumnSizingChange: setColumnSizing,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableMultiSort,
+    isMultiSortEvent: () => enableMultiSort,
+    maxMultiSortColCount: maxSortColumns,
+    enableColumnResizing,
+    columnResizeMode: "onChange"
+  });
+  const { rows } = table.getRowModel();
+  const columnSizeVars = React.useMemo(() => {
+    const headers = table.getFlatHeaders();
+    const colSizes = {};
+    headers.forEach((header) => {
+      colSizes[`--header-${header.id}-size`] = `${header.getSize()}px`;
+      colSizes[`--col-${header.column.id}-size`] = `${header.column.getSize()}px`;
+    });
+    return colSizes;
+  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => rowHeight,
+    overscan
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  React.useEffect(() => {
+    const currentVisible = /* @__PURE__ */ new Set();
+    virtualItems.forEach((item) => {
+      currentVisible.add(item.index);
+    });
+    const prevVisible = visibleRowsRef.current;
+    const load = [];
+    currentVisible.forEach((key) => {
+      const rowState = rowStateManager.getRowState(key);
+      if (rowState.status === "unloaded") {
+        load.push(key);
+      }
+    });
+    const unload = [];
+    prevVisible.forEach((key) => {
+      if (!currentVisible.has(key)) {
+        unload.push(key);
+      }
+    });
+    if (load.length > 0) {
+      rowStateManager.markRowsLoading(load);
+      load.forEach((key) => rowStateManager.scheduleLoaded(key, loadingDelay));
+    }
+    if (unload.length > 0) {
+      rowStateManager.markRowsUnloaded(unload);
+    }
+    visibleRowsRef.current = currentVisible;
+  }, [virtualItems, rowStateManager, loadingDelay]);
+  const getSortIndex = React.useCallback(
+    (columnId) => {
+      const idx = sorting.findIndex((s2) => s2.id === columnId);
+      return idx >= 0 ? idx + 1 : void 0;
+    },
+    [sorting]
+  );
+  const handleTableScroll = React.useCallback(() => {
+    if (tableContainerRef.current && timelineContainerRef.current) {
+      timelineContainerRef.current.scrollTop = tableContainerRef.current.scrollTop;
+    }
+  }, []);
+  const handleTimelineScroll = React.useCallback(() => {
+    if (tableContainerRef.current && timelineContainerRef.current) {
+      tableContainerRef.current.scrollTop = timelineContainerRef.current.scrollTop;
+    }
+  }, []);
+  const panels = React.useMemo(() => [
+    { id: "table", minSize: 20 },
+    { id: "timeline", minSize: 20 }
+  ], []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Splitter.Root,
+    {
+      defaultSize: [tablePanelSize, 100 - tablePanelSize],
+      panels,
+      width: "100%",
+      height,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Splitter.Panel, { id: "table", children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            ref: tableContainerRef,
+            height: "100%",
+            overflowY: "auto",
+            position: "relative",
+            onScroll: handleTableScroll,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              react.Table.Root,
+              {
+                ...props,
+                style: {
+                  ...columnSizeVars,
+                  width: "100%",
+                  minWidth: table.getCenterTotalSize(),
+                  tableLayout: "fixed"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Table.Header,
+                    {
+                      style: { display: "block" },
+                      position: "sticky",
+                      top: 0,
+                      zIndex: 1,
+                      bg: "bg.panel",
+                      children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(
+                        react.Table.Row,
+                        {
+                          style: { display: "flex", width: "100%", height: `${headerHeight}px` },
+                          children: headerGroup.headers.map((header) => {
+                            const sortIndex = getSortIndex(header.id);
+                            const isSorted = header.column.getIsSorted();
+                            const sortDirection = isSorted || null;
+                            const icon3 = !isSorted ? faAnglesDown : sortDirection === "asc" ? faChevronUp : faChevronDown;
+                            return /* @__PURE__ */ jsxRuntime.jsxs(
+                              react.Table.ColumnHeader,
+                              {
+                                cursor: header.column.getCanSort() ? "pointer" : "default",
+                                _hover: header.column.getCanSort() ? { bg: "bg.muted" } : {},
+                                onClick: header.column.getToggleSortingHandler(),
+                                transition: "background 0.2s",
+                                style: {
+                                  width: `var(--header-${header.id}-size)`,
+                                  flex: columnSizing[header.id] ? "none" : 1
+                                },
+                                position: "relative",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs(
+                                    react.HStack,
+                                    {
+                                      justify: "space-between",
+                                      width: "100%",
+                                      pr: enableColumnResizing ? "8px" : "0",
+                                      children: [
+                                        /* @__PURE__ */ jsxRuntime.jsx(
+                                          react.Text,
+                                          {
+                                            fontSize: "sm",
+                                            fontWeight: "semibold",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap",
+                                            flex: "1",
+                                            children: header.isPlaceholder ? null : flexRender(
+                                              header.column.columnDef.header,
+                                              header.getContext()
+                                            )
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { gap: 1, flexShrink: 0, children: header.column.getCanSort() && /* @__PURE__ */ jsxRuntime.jsxs(
+                                          react.IconButton,
+                                          {
+                                            "aria-label": `Sort by ${header.id}`,
+                                            size: "xs",
+                                            variant: "ghost",
+                                            color: isSorted ? "fg.default" : "fg.muted",
+                                            onClick: (e3) => {
+                                              e3.stopPropagation();
+                                              header.column.toggleSorting(
+                                                void 0,
+                                                enableMultiSort
+                                              );
+                                            },
+                                            _hover: {
+                                              bg: "bg.muted",
+                                              color: "fg.default"
+                                            },
+                                            position: "relative",
+                                            children: [
+                                              /* @__PURE__ */ jsxRuntime.jsx(
+                                                FontAwesomeIcon,
+                                                {
+                                                  icon: icon3,
+                                                  style: {
+                                                    width: "12px",
+                                                    height: "12px"
+                                                  }
+                                                }
+                                              ),
+                                              isSorted && sortIndex && /* @__PURE__ */ jsxRuntime.jsx(
+                                                react.Box,
+                                                {
+                                                  position: "absolute",
+                                                  top: "-2px",
+                                                  right: "-2px",
+                                                  bg: "fg.muted",
+                                                  color: "bg.panel",
+                                                  borderRadius: "full",
+                                                  width: "12px",
+                                                  height: "12px",
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  justifyContent: "center",
+                                                  fontSize: "8px",
+                                                  fontWeight: "bold",
+                                                  children: sortIndex
+                                                }
+                                              )
+                                            ]
+                                          }
+                                        ) })
+                                      ]
+                                    }
+                                  ),
+                                  enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(
+                                    react.Box,
+                                    {
+                                      position: "absolute",
+                                      right: "0",
+                                      top: "0",
+                                      bottom: "0",
+                                      width: "8px",
+                                      cursor: "col-resize",
+                                      bg: "transparent",
+                                      _hover: {
+                                        _before: {
+                                          opacity: 1,
+                                          bg: "fg.muted"
+                                        }
+                                      },
+                                      transition: "all 0.2s",
+                                      zIndex: 10,
+                                      onMouseDown: header.getResizeHandler(),
+                                      onTouchStart: header.getResizeHandler(),
+                                      _before: {
+                                        content: '""',
+                                        position: "absolute",
+                                        right: "2px",
+                                        top: "50%",
+                                        transform: "translateY(-50%)",
+                                        width: "2px",
+                                        height: "16px",
+                                        bg: "gray.300",
+                                        borderRadius: "1px",
+                                        opacity: 0.4,
+                                        transition: "opacity 0.2s"
+                                      }
+                                    }
+                                  )
+                                ]
+                              },
+                              header.id
+                            );
+                          })
+                        },
+                        headerGroup.id
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Table.Body,
+                    {
+                      style: {
+                        display: "block",
+                        position: "relative",
+                        height: `${virtualizer.getTotalSize()}px`
+                      },
+                      children: virtualItems.map((virtualRow) => {
+                        const row = rows[virtualRow.index];
+                        if (!row) return null;
+                        const rowKey = virtualRow.index;
+                        const rowState = rowStates.get(rowKey) || { status: "unloaded" };
+                        const isRowLoading = !rowStateManager.isRowLoaded(rowKey) || rowState.status === "loading";
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          react.Table.Row,
+                          {
+                            style: {
+                              display: "flex",
+                              position: "absolute",
+                              top: 0,
+                              left: 0,
+                              width: "100%",
+                              height: `${virtualRow.size}px`,
+                              transform: `translateY(${virtualRow.start}px)`
+                            },
+                            children: row.getVisibleCells().map((cell) => {
+                              var _a;
+                              const cellValue = cell.getValue();
+                              const meta = cell.column.columnDef.meta;
+                              const cellStyle = {
+                                width: `var(--col-${cell.column.id}-size)`,
+                                flex: columnSizing[cell.column.id] ? "none" : 1
+                              };
+                              if (isRowLoading) {
+                                return /* @__PURE__ */ jsxRuntime.jsx(react.Table.Cell, { style: cellStyle, children: /* @__PURE__ */ jsxRuntime.jsx(react.Skeleton, { height: "20px", width: "80%" }) }, cell.id);
+                              }
+                              if (cellValue == null) {
+                                return /* @__PURE__ */ jsxRuntime.jsx(
+                                  react.Table.Cell,
+                                  {
+                                    style: cellStyle
+                                  },
+                                  cell.id
+                                );
+                              }
+                              if (cellValue.content != null) {
+                                return /* @__PURE__ */ jsxRuntime.jsx(react.Table.Cell, { style: cellStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  EastChakraComponent,
+                                  {
+                                    value: cellValue.content
+                                  }
+                                ) }, cell.id);
+                              }
+                              return /* @__PURE__ */ jsxRuntime.jsx(react.Table.Cell, { style: cellStyle, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: ((_a = meta == null ? void 0 : meta.print) == null ? void 0 : _a.call(meta, cellValue.value.value)) ?? null }) }, cell.id);
+                            })
+                          },
+                          row.id
+                        );
+                      })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Splitter.ResizeTrigger, { id: "table:timeline" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Splitter.Panel, { id: "timeline", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          react.Box,
+          {
+            ref: timelineContainerRef,
+            width: "100%",
+            height: "100%",
+            overflowY: "auto",
+            overflowX: "hidden",
+            position: "relative",
+            onScroll: handleTimelineScroll,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Box, { position: "sticky", top: 0, zIndex: 1, bg: "bg.panel", children: /* @__PURE__ */ jsxRuntime.jsx(
+                EventAxis,
+                {
+                  startDate: dateRange.start,
+                  endDate: dateRange.end,
+                  width: timelineWidth,
+                  height: headerHeight
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Table.Root,
+                  {
+                    ...props,
+                    style: {
+                      width: "100%",
+                      tableLayout: "fixed",
+                      position: "relative"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      react.Table.Body,
+                      {
+                        style: {
+                          display: "block",
+                          position: "relative",
+                          height: `${virtualizer.getTotalSize()}px`
+                        },
+                        children: virtualItems.map((virtualRow) => {
+                          const row = rows[virtualRow.index];
+                          if (!row) return null;
+                          return /* @__PURE__ */ jsxRuntime.jsx(
+                            react.Table.Row,
+                            {
+                              style: {
+                                display: "flex",
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: `${virtualRow.size}px`,
+                                transform: `translateY(${virtualRow.start}px)`
+                              },
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                react.Table.Cell,
+                                {
+                                  style: { width: "100%", padding: 0 },
+                                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "100%", height: virtualRow.size, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    GanttEventRow,
+                                    {
+                                      events: row.original.events,
+                                      rowIndex: virtualRow.index,
+                                      y: 0,
+                                      width: timelineWidth,
+                                      height: virtualRow.size,
+                                      startDate: dateRange.start,
+                                      endDate: dateRange.end,
+                                      onEventClick
+                                    }
+                                  ) })
+                                }
+                              )
+                            },
+                            row.id
+                          );
+                        })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: timelineWidth,
+                    height: virtualizer.getTotalSize(),
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      pointerEvents: "none",
+                      zIndex: 1
+                    },
+                    children: gridLinePositions.map((x2, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: x2,
+                        y1: 0,
+                        x2,
+                        y2: virtualizer.getTotalSize(),
+                        stroke: gridLineColor,
+                        strokeWidth: 1,
+                        strokeDasharray: "4 4",
+                        opacity: 0.6
+                      },
+                      `grid-${index}`
+                    ))
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}, (prev, next) => ganttRootEqual(prev.value, next.value));
 const badgeEqual = east.equalFor(eastUi.Badge.Types.Badge);
 function toChakraBadge(value) {
   var _a, _b, _c;
@@ -53868,7 +54760,7 @@ function toChakraDateTimeInput(value) {
   var _a, _b;
   const showTime = getSomeorUndefined(value.showTime);
   const dateValue = value.value instanceof Date ? value.value : new Date(value.value);
-  const formatDate = (d2) => {
+  const formatDate2 = (d2) => {
     if (showTime) {
       return d2.toISOString().slice(0, 16);
     }
@@ -53876,9 +54768,9 @@ function toChakraDateTimeInput(value) {
   };
   return {
     type: showTime ? "datetime-local" : "date",
-    value: formatDate(dateValue),
-    min: getSomeorUndefined(value.min) ? formatDate(new Date(getSomeorUndefined(value.min))) : void 0,
-    max: getSomeorUndefined(value.max) ? formatDate(new Date(getSomeorUndefined(value.max))) : void 0,
+    value: formatDate2(dateValue),
+    min: getSomeorUndefined(value.min) ? formatDate2(new Date(getSomeorUndefined(value.min))) : void 0,
+    max: getSomeorUndefined(value.max) ? formatDate2(new Date(getSomeorUndefined(value.max))) : void 0,
     variant: (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type,
     size: (_b = getSomeorUndefined(value.size)) == null ? void 0 : _b.type,
     disabled: getSomeorUndefined(value.disabled)
@@ -54473,6 +55365,7 @@ const EastChakraComponent = React.memo(function EastChakraComponent2({ value })
       // Collections
       DataList: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraDataList, { value: v2 }),
       Table: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraTable, { value: v2 }),
+      Gantt: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraGantt, { value: v2 }),
       // Charts
       Sparkline: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraSparkline, { value: v2 }),
       AreaChart: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraAreaChart, { value: v2 }),
@@ -54799,7 +55692,7 @@ exports.toChakraSplitter = toChakraSplitter;
 exports.toChakraStack = toChakraStack;
 exports.toChakraStringInput = toChakraStringInput;
 exports.toChakraSwitch = toChakraSwitch;
-exports.toChakraTableRoot = toChakraTableRoot;
+exports.toChakraTableRoot = toChakraTableRoot$1;
 exports.toChakraTabsContent = toChakraTabsContent;
 exports.toChakraTabsRoot = toChakraTabsRoot;
 exports.toChakraTabsTrigger = toChakraTabsTrigger;