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

package/dist/index.js

@@ -5,9 +5,9 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { memo as memo$2, useMemo, useId as useId$1, isValidElement, forwardRef, useContext, createContext, useState, useCallback, useRef, useImperativeHandle, useEffect, PureComponent, useLayoutEffect, cloneElement, createElement as createElement$1, Children, Component, useReducer } from "react";
 import { match, equalFor, printFor, encodeBeast2For, IRType, BlobType } from "@elaraai/east";
-import { Text as Text$1, Button as Button$1, IconButton as IconButton$1, Sparkline, Chart, Box as Box$1, Stack as Stack$1, Separator as Separator$1, Grid as Grid$1, Splitter as Splitter$1, Accordion as Accordion$1, Carousel as Carousel$1, Tabs as Tabs$1, DataList as DataList$1, Table as Table$1, Icon as Icon$1, TreeView as TreeView$1, Badge as Badge$1, Tag as Tag$1, Avatar as Avatar$1, Stat as Stat$1, Input as Input$1, Checkbox as Checkbox$1, Switch as Switch$1, Select as Select$1, Slider as Slider$1, Field as Field$1, Textarea as Textarea$1, TagsInput as TagsInput$1, FileUpload as FileUpload$1, Alert as Alert$1, Progress as Progress$1, Card as Card$1, Tooltip as Tooltip$2, Menu as Menu$1, Popover as Popover$1, HoverCard as HoverCard$1, Dialog as Dialog$1, Drawer as Drawer$1, ActionBar as ActionBar$1, ToggleTip, UIComponentType, state_write, state_read } from "@elaraai/east-ui";
+import { Text as Text$1, Button as Button$1, IconButton as IconButton$1, Sparkline, Chart, Box as Box$1, Stack as Stack$1, Separator as Separator$1, Grid as Grid$1, Splitter as Splitter$1, Accordion as Accordion$1, Carousel as Carousel$1, Tabs as Tabs$1, DataList as DataList$1, Table as Table$1, Icon as Icon$1, TreeView as TreeView$1, Gantt, Badge as Badge$1, Tag as Tag$1, Avatar as Avatar$1, Stat as Stat$1, Input as Input$1, Checkbox as Checkbox$1, Switch as Switch$1, Select as Select$1, Slider as Slider$1, Field as Field$1, Textarea as Textarea$1, TagsInput as TagsInput$1, FileUpload as FileUpload$1, Alert as Alert$1, Progress as Progress$1, Card as Card$1, Tooltip as Tooltip$2, Menu as Menu$1, Popover as Popover$1, HoverCard as HoverCard$1, Dialog as Dialog$1, Drawer as Drawer$1, ActionBar as ActionBar$1, ToggleTip, UIComponentType, state_write, state_read } from "@elaraai/east-ui";
 import { State, state_read as state_read2, state_write as state_write2 } from "@elaraai/east-ui";
-import { Text as Text$2, Button, IconButton, useChakraContext, useLocaleContext, Box, defineStyle, Stack, Flex, ColorSwatch, HStack, Span, Separator, Show, AbsoluteCenter, Grid, GridItem, Splitter, Accordion, Carousel, Tabs, DataList, Table, Skeleton, createTreeCollection, TreeView, Badge, Tag, Avatar, Stat, Input, Checkbox, Switch, createListCollection, Select, Portal, Slider, Field, Fieldset, Textarea, TagsInput, FileUpload, Alert, Progress, Card, Tooltip as Tooltip$1, Menu, Popover, HoverCard, Dialog, CloseButton, Drawer, ActionBar } from "@chakra-ui/react";
+import { Text as Text$2, Button, IconButton, useChakraContext, useLocaleContext, Box, defineStyle, Stack, Flex, ColorSwatch, HStack, Span, Separator, Show, AbsoluteCenter, Grid, GridItem, Splitter, Accordion, Carousel, Tabs, DataList, Table, Skeleton, createTreeCollection, TreeView, useToken, Badge, Tag, Avatar, Stat, Input, Checkbox, Switch, createListCollection, Select, Portal, Slider, Field, Fieldset, Textarea, TagsInput, FileUpload, Alert, Progress, Card, Tooltip as Tooltip$1, Menu, Popover, HoverCard, Dialog, CloseButton, Drawer, ActionBar } from "@chakra-ui/react";
 import { createPortal, flushSync } from "react-dom";
 const getSomeorUndefined = (opt) => {
   return match(opt, {
@@ -18223,7 +18223,7 @@ function useChart(props) {
     },
     [env.locale]
   );
-  const formatDate = React.useCallback(
+  const formatDate2 = React.useCallback(
     (options) => {
       return (value) => new Date(value).toLocaleDateString(env.locale, options);
     },
@@ -18294,7 +18294,7 @@ function useChart(props) {
     spacing,
     // formatters
     formatNumber,
-    formatDate,
+    formatDate: formatDate2,
     // state
     highlightedSeries,
     setHighlightedSeries,
@@ -53296,7 +53296,7 @@ class RowStateManager {
   }
 }
 const tableRootEqual = equalFor(Table$1.Types.Root);
-function toChakraTableRoot(value) {
+function toChakraTableRoot$1(value) {
   var _a, _b, _c;
   const style = getSomeorUndefined(value.style);
   return {
@@ -53320,7 +53320,7 @@ const EastChakraTable = memo$2(function EastChakraTable2({
   loadingDelay = 200,
   enableColumnResizing = true
 }) {
-  const props = useMemo(() => toChakraTableRoot(value), [value]);
+  const props = useMemo(() => toChakraTableRoot$1(value), [value]);
   const tableContainerRef = useRef(null);
   const [rowStateManager] = useState(() => new RowStateManager());
   const [rowStates, setRowStates] = useState(/* @__PURE__ */ new Map());
@@ -53739,6 +53739,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 = 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__ */ jsx(
+    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__ */ jsx(
+        Box,
+        {
+          position: "absolute",
+          left: `${x2}px`,
+          transform: "translateX(-50%)",
+          children: /* @__PURE__ */ jsx(
+            Text$2,
+            {
+              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] = useState(false);
+  const { colorPalette, label, progress } = 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] = useToken("colors", [
+    `${colorPalette}.500`,
+    `${colorPalette}.600`
+  ]);
+  const fontSize = useMemo(() => Math.min(height * 0.7, 14), [height]);
+  const textX = useMemo(() => x2 + 8, [x2]);
+  const taskWidth = useMemo(() => Math.max(width, 4), [width]);
+  const progressWidth = useMemo(() => taskWidth * ((progress ?? 0) / 100), [taskWidth, progress]);
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ 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__ */ 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__ */ jsx(
+      "foreignObject",
+      {
+        x: textX,
+        y: y2,
+        width: 180,
+        height,
+        style: { pointerEvents: "auto" },
+        children: /* @__PURE__ */ jsx(
+          Text$2,
+          {
+            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] = useState(false);
+  const { colorPalette, label } = useMemo(() => {
+    var _a;
+    return {
+      colorPalette: ((_a = getSomeorUndefined(value.colorPalette)) == null ? void 0 : _a.type) ?? "blue",
+      label: getSomeorUndefined(value.label)
+    };
+  }, [value]);
+  const [fillColor, strokeColor] = useToken("colors", [
+    `${colorPalette}.500`,
+    `${colorPalette}.600`
+  ]);
+  const fontSize = useMemo(() => Math.min(height * 0.7, 14), [height]);
+  const diamondSize = useMemo(() => height, [height]);
+  const textX = useMemo(() => x2 + diamondSize / 2 + 4, [x2, diamondSize]);
+  const diamondPoints = useMemo(() => makeDiamondPoints(x2, y2, diamondSize), [x2, y2, diamondSize]);
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      "foreignObject",
+      {
+        x: textX,
+        y: y2,
+        width: 200,
+        height,
+        style: { pointerEvents: "auto" },
+        children: /* @__PURE__ */ jsx(
+          Text$2,
+          {
+            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 = 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__ */ jsx(
+          GanttMilestone,
+          {
+            x: position.x,
+            y: eventY,
+            height: eventHeight,
+            value: event.value,
+            onClick: onEventClick ? () => onEventClick(event, rowIndex, eventIndex) : () => {
+            }
+          },
+          `${rowIndex}-${eventIndex}`
+        );
+      }
+      return /* @__PURE__ */ 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__ */ jsx("g", { children: renderedEvents });
+};
+const ganttRootEqual = equalFor(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 = memo$2(function EastChakraGantt2({
+  value,
+  height = "400px",
+  rowHeight = 48,
+  overscan = 8,
+  onSortChange,
+  enableMultiSort = true,
+  maxSortColumns = 5,
+  loadingDelay = 200,
+  enableColumnResizing = true,
+  onEventClick,
+  tablePanelSize = 40
+}) {
+  const props = useMemo(() => toChakraTableRoot(value), [value]);
+  const headerHeight = 56;
+  const [gridLineColor] = useToken("colors", ["gray.300"]);
+  const tableContainerRef = useRef(null);
+  const timelineContainerRef = useRef(null);
+  const [timelineWidth, setTimelineWidth] = useState(400);
+  const [rowStateManager] = useState(() => new RowStateManager());
+  const [rowStates, setRowStates] = useState(/* @__PURE__ */ new Map());
+  const visibleRowsRef = useRef(/* @__PURE__ */ new Set());
+  const dateRange = 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 = 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]);
+  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();
+  }, []);
+  useEffect(() => {
+    return rowStateManager.subscribe(() => {
+      setRowStates(new Map(rowStateManager.getStates()));
+    });
+  }, [rowStateManager]);
+  useEffect(() => {
+    return () => {
+      rowStateManager.clear();
+    };
+  }, [rowStateManager]);
+  const columnHelper = createColumnHelper();
+  const columns = useMemo(() => {
+    return value.columns.map((col) => {
+      const print = 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] = useState([]);
+  const handleSortingChange = 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] = 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 = 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();
+  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 = useCallback(
+    (columnId) => {
+      const idx = sorting.findIndex((s2) => s2.id === columnId);
+      return idx >= 0 ? idx + 1 : void 0;
+    },
+    [sorting]
+  );
+  const handleTableScroll = useCallback(() => {
+    if (tableContainerRef.current && timelineContainerRef.current) {
+      timelineContainerRef.current.scrollTop = tableContainerRef.current.scrollTop;
+    }
+  }, []);
+  const handleTimelineScroll = useCallback(() => {
+    if (tableContainerRef.current && timelineContainerRef.current) {
+      tableContainerRef.current.scrollTop = timelineContainerRef.current.scrollTop;
+    }
+  }, []);
+  const panels = useMemo(() => [
+    { id: "table", minSize: 20 },
+    { id: "timeline", minSize: 20 }
+  ], []);
+  return /* @__PURE__ */ jsxs(
+    Splitter.Root,
+    {
+      defaultSize: [tablePanelSize, 100 - tablePanelSize],
+      panels,
+      width: "100%",
+      height,
+      children: [
+        /* @__PURE__ */ jsx(Splitter.Panel, { id: "table", children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: tableContainerRef,
+            height: "100%",
+            overflowY: "auto",
+            position: "relative",
+            onScroll: handleTableScroll,
+            children: /* @__PURE__ */ jsxs(
+              Table.Root,
+              {
+                ...props,
+                style: {
+                  ...columnSizeVars,
+                  width: "100%",
+                  minWidth: table.getCenterTotalSize(),
+                  tableLayout: "fixed"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Table.Header,
+                    {
+                      style: { display: "block" },
+                      position: "sticky",
+                      top: 0,
+                      zIndex: 1,
+                      bg: "bg.panel",
+                      children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+                        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__ */ jsxs(
+                              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__ */ jsxs(
+                                    HStack,
+                                    {
+                                      justify: "space-between",
+                                      width: "100%",
+                                      pr: enableColumnResizing ? "8px" : "0",
+                                      children: [
+                                        /* @__PURE__ */ jsx(
+                                          Text$2,
+                                          {
+                                            fontSize: "sm",
+                                            fontWeight: "semibold",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap",
+                                            flex: "1",
+                                            children: header.isPlaceholder ? null : flexRender(
+                                              header.column.columnDef.header,
+                                              header.getContext()
+                                            )
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx(HStack, { gap: 1, flexShrink: 0, children: header.column.getCanSort() && /* @__PURE__ */ jsxs(
+                                          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__ */ jsx(
+                                                FontAwesomeIcon,
+                                                {
+                                                  icon: icon3,
+                                                  style: {
+                                                    width: "12px",
+                                                    height: "12px"
+                                                  }
+                                                }
+                                              ),
+                                              isSorted && sortIndex && /* @__PURE__ */ jsx(
+                                                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__ */ jsx(
+                                    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__ */ jsx(
+                    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__ */ jsx(
+                          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__ */ jsx(Table.Cell, { style: cellStyle, children: /* @__PURE__ */ jsx(Skeleton, { height: "20px", width: "80%" }) }, cell.id);
+                              }
+                              if (cellValue == null) {
+                                return /* @__PURE__ */ jsx(
+                                  Table.Cell,
+                                  {
+                                    style: cellStyle
+                                  },
+                                  cell.id
+                                );
+                              }
+                              if (cellValue.content != null) {
+                                return /* @__PURE__ */ jsx(Table.Cell, { style: cellStyle, children: /* @__PURE__ */ jsx(
+                                  EastChakraComponent,
+                                  {
+                                    value: cellValue.content
+                                  }
+                                ) }, cell.id);
+                              }
+                              return /* @__PURE__ */ jsx(Table.Cell, { style: cellStyle, children: /* @__PURE__ */ jsx(Text$2, { children: ((_a = meta == null ? void 0 : meta.print) == null ? void 0 : _a.call(meta, cellValue.value.value)) ?? null }) }, cell.id);
+                            })
+                          },
+                          row.id
+                        );
+                      })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Splitter.ResizeTrigger, { id: "table:timeline" }),
+        /* @__PURE__ */ jsx(Splitter.Panel, { id: "timeline", children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            ref: timelineContainerRef,
+            width: "100%",
+            height: "100%",
+            overflowY: "auto",
+            overflowX: "hidden",
+            position: "relative",
+            onScroll: handleTimelineScroll,
+            children: [
+              /* @__PURE__ */ jsx(Box, { position: "sticky", top: 0, zIndex: 1, bg: "bg.panel", children: /* @__PURE__ */ jsx(
+                EventAxis,
+                {
+                  startDate: dateRange.start,
+                  endDate: dateRange.end,
+                  width: timelineWidth,
+                  height: headerHeight
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+                /* @__PURE__ */ jsx(
+                  Table.Root,
+                  {
+                    ...props,
+                    style: {
+                      width: "100%",
+                      tableLayout: "fixed",
+                      position: "relative"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      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__ */ jsx(
+                            Table.Row,
+                            {
+                              style: {
+                                display: "flex",
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: `${virtualRow.size}px`,
+                                transform: `translateY(${virtualRow.start}px)`
+                              },
+                              children: /* @__PURE__ */ jsx(
+                                Table.Cell,
+                                {
+                                  style: { width: "100%", padding: 0 },
+                                  children: /* @__PURE__ */ jsx("svg", { width: "100%", height: virtualRow.size, children: /* @__PURE__ */ 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__ */ jsx(
+                  "svg",
+                  {
+                    width: timelineWidth,
+                    height: virtualizer.getTotalSize(),
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      pointerEvents: "none",
+                      zIndex: 1
+                    },
+                    children: gridLinePositions.map((x2, index) => /* @__PURE__ */ 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 = equalFor(Badge$1.Types.Badge);
 function toChakraBadge(value) {
   var _a, _b, _c;
@@ -53851,7 +54743,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);
     }
@@ -53859,9 +54751,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)
@@ -54456,6 +55348,7 @@ const EastChakraComponent = memo$2(function EastChakraComponent2({ value }) {
       // Collections
       DataList: (v2) => /* @__PURE__ */ jsx(EastChakraDataList, { value: v2 }),
       Table: (v2) => /* @__PURE__ */ jsx(EastChakraTable, { value: v2 }),
+      Gantt: (v2) => /* @__PURE__ */ jsx(EastChakraGantt, { value: v2 }),
       // Charts
       Sparkline: (v2) => /* @__PURE__ */ jsx(EastChakraSparkline, { value: v2 }),
       AreaChart: (v2) => /* @__PURE__ */ jsx(EastChakraAreaChart, { value: v2 }),
@@ -54774,7 +55667,7 @@ export {
   toChakraStack,
   toChakraStringInput,
   toChakraSwitch,
-  toChakraTableRoot,
+  toChakraTableRoot$1 as toChakraTableRoot,
   toChakraTabsContent,
   toChakraTabsRoot,
   toChakraTabsTrigger,