@appcorp/shadcn 1.0.10

package/components/shadcn-io/gantt/index.js

@@ -0,0 +1,767 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GanttToday = exports.GanttTimeline = exports.GanttProvider = exports.GanttMarker = exports.GanttFeatureList = exports.GanttFeatureRow = exports.GanttFeatureListGroup = exports.GanttFeatureItem = exports.GanttFeatureItemCard = exports.GanttFeatureDragHelper = exports.GanttCreateMarkerTrigger = exports.GanttColumns = exports.GanttColumn = exports.GanttAddFeatureHelper = exports.GanttSidebar = exports.GanttSidebarGroup = exports.GanttSidebarHeader = exports.GanttSidebarItem = exports.GanttHeader = exports.GanttContentHeader = exports.useGanttScrollX = exports.useGanttDragging = void 0;
+var core_1 = require("@dnd-kit/core");
+var modifiers_1 = require("@dnd-kit/modifiers");
+var usehooks_1 = require("@uidotdev/usehooks");
+var date_fns_1 = require("date-fns");
+var jotai_1 = require("jotai");
+var lodash_throttle_1 = __importDefault(require("lodash.throttle"));
+var lucide_react_1 = require("lucide-react");
+var react_1 = __importStar(require("react"));
+var card_1 = require("../../card");
+var context_menu_1 = require("../../context-menu");
+var utils_1 = require("../../../lib/utils");
+var draggingAtom = (0, jotai_1.atom)(false);
+var scrollXAtom = (0, jotai_1.atom)(0);
+var useGanttDragging = function () { return (0, jotai_1.useAtom)(draggingAtom); };
+exports.useGanttDragging = useGanttDragging;
+var useGanttScrollX = function () { return (0, jotai_1.useAtom)(scrollXAtom); };
+exports.useGanttScrollX = useGanttScrollX;
+var getsDaysIn = function (range) {
+    // For when range is daily
+    var fn = function (_date) { return 1; }; // eslint-disable-line @typescript-eslint/no-unused-vars
+    if (range === "monthly" || range === "quarterly") {
+        fn = date_fns_1.getDaysInMonth;
+    }
+    return fn;
+};
+var getDifferenceIn = function (range) {
+    var fn = date_fns_1.differenceInDays;
+    if (range === "monthly" || range === "quarterly") {
+        fn = date_fns_1.differenceInMonths;
+    }
+    return fn;
+};
+var getInnerDifferenceIn = function (range) {
+    var fn = date_fns_1.differenceInHours;
+    if (range === "monthly" || range === "quarterly") {
+        fn = date_fns_1.differenceInDays;
+    }
+    return fn;
+};
+var getStartOf = function (range) {
+    var fn = date_fns_1.startOfDay;
+    if (range === "monthly" || range === "quarterly") {
+        fn = date_fns_1.startOfMonth;
+    }
+    return fn;
+};
+var getEndOf = function (range) {
+    var fn = date_fns_1.endOfDay;
+    if (range === "monthly" || range === "quarterly") {
+        fn = date_fns_1.endOfMonth;
+    }
+    return fn;
+};
+var getAddRange = function (range) {
+    var fn = date_fns_1.addDays;
+    if (range === "monthly" || range === "quarterly") {
+        fn = date_fns_1.addMonths;
+    }
+    return fn;
+};
+var getDateByMousePosition = function (context, mouseX) {
+    var timelineStartDate = new Date(context.timelineData[0].year, 0, 1);
+    var columnWidth = (context.columnWidth * context.zoom) / 100;
+    var offset = Math.floor(mouseX / columnWidth);
+    var daysIn = getsDaysIn(context.range);
+    var addRange = getAddRange(context.range);
+    var month = addRange(timelineStartDate, offset);
+    var daysInMonth = daysIn(month);
+    var pixelsPerDay = Math.round(columnWidth / daysInMonth);
+    var dayOffset = Math.floor((mouseX % columnWidth) / pixelsPerDay);
+    var actualDate = (0, date_fns_1.addDays)(month, dayOffset);
+    return actualDate;
+};
+var createInitialTimelineData = function (today) {
+    var data = [];
+    data.push({ year: today.getFullYear() - 1, quarters: new Array(4).fill(null) }, { year: today.getFullYear(), quarters: new Array(4).fill(null) }, { year: today.getFullYear() + 1, quarters: new Array(4).fill(null) });
+    var _loop_1 = function (yearObj) {
+        yearObj.quarters = new Array(4).fill(null).map(function (_, quarterIndex) { return ({
+            months: new Array(3).fill(null).map(function (_, monthIndex) {
+                var month = quarterIndex * 3 + monthIndex;
+                return {
+                    days: (0, date_fns_1.getDaysInMonth)(new Date(yearObj.year, month, 1)),
+                };
+            }),
+        }); });
+    };
+    for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+        var yearObj = data_1[_i];
+        _loop_1(yearObj);
+    }
+    return data;
+};
+var getOffset = function (date, timelineStartDate, context) {
+    var parsedColumnWidth = (context.columnWidth * context.zoom) / 100;
+    var differenceIn = getDifferenceIn(context.range);
+    var startOf = getStartOf(context.range);
+    var fullColumns = differenceIn(startOf(date), timelineStartDate);
+    if (context.range === "daily") {
+        return parsedColumnWidth * fullColumns;
+    }
+    var partialColumns = date.getDate();
+    var daysInMonth = (0, date_fns_1.getDaysInMonth)(date);
+    var pixelsPerDay = parsedColumnWidth / daysInMonth;
+    return fullColumns * parsedColumnWidth + partialColumns * pixelsPerDay;
+};
+var getWidth = function (startAt, endAt, context) {
+    var parsedColumnWidth = (context.columnWidth * context.zoom) / 100;
+    if (!endAt) {
+        return parsedColumnWidth * 2;
+    }
+    var differenceIn = getDifferenceIn(context.range);
+    if (context.range === "daily") {
+        var delta = differenceIn(endAt, startAt);
+        return parsedColumnWidth * (delta ? delta : 1);
+    }
+    var daysInStartMonth = (0, date_fns_1.getDaysInMonth)(startAt);
+    var pixelsPerDayInStartMonth = parsedColumnWidth / daysInStartMonth;
+    if ((0, date_fns_1.isSameDay)(startAt, endAt)) {
+        return pixelsPerDayInStartMonth;
+    }
+    var innerDifferenceIn = getInnerDifferenceIn(context.range);
+    var startOf = getStartOf(context.range);
+    if ((0, date_fns_1.isSameDay)(startOf(startAt), startOf(endAt))) {
+        return innerDifferenceIn(endAt, startAt) * pixelsPerDayInStartMonth;
+    }
+    var startRangeOffset = daysInStartMonth - (0, date_fns_1.getDate)(startAt);
+    var endRangeOffset = (0, date_fns_1.getDate)(endAt);
+    var fullRangeOffset = differenceIn(startOf(endAt), startOf(startAt));
+    var daysInEndMonth = (0, date_fns_1.getDaysInMonth)(endAt);
+    var pixelsPerDayInEndMonth = parsedColumnWidth / daysInEndMonth;
+    return ((fullRangeOffset - 1) * parsedColumnWidth +
+        startRangeOffset * pixelsPerDayInStartMonth +
+        endRangeOffset * pixelsPerDayInEndMonth);
+};
+var calculateInnerOffset = function (date, range, columnWidth) {
+    var startOf = getStartOf(range);
+    var endOf = getEndOf(range);
+    var differenceIn = getInnerDifferenceIn(range);
+    var startOfRange = startOf(date);
+    var endOfRange = endOf(date);
+    var totalRangeDays = differenceIn(endOfRange, startOfRange);
+    var dayOfMonth = date.getDate();
+    return (dayOfMonth / totalRangeDays) * columnWidth;
+};
+var GanttContext = (0, react_1.createContext)({
+    zoom: 100,
+    range: "monthly",
+    columnWidth: 50,
+    headerHeight: 60,
+    sidebarWidth: 300,
+    rowHeight: 36,
+    onAddItem: undefined,
+    placeholderLength: 2,
+    timelineData: [],
+    ref: null,
+    scrollToFeature: undefined,
+});
+var GanttContentHeader = function (_a) {
+    var title = _a.title, columns = _a.columns, renderHeaderItem = _a.renderHeaderItem;
+    var id = (0, react_1.useId)();
+    return (react_1.default.createElement("div", { className: "sticky top-0 z-20 grid w-full shrink-0 bg-backdrop/90 backdrop-blur-sm", style: { height: "var(--gantt-header-height)" } },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "sticky inline-flex whitespace-nowrap px-3 py-2 text-muted-foreground text-xs", style: {
+                    left: "var(--gantt-sidebar-width)",
+                } },
+                react_1.default.createElement("p", null, title))),
+        react_1.default.createElement("div", { className: "grid w-full", style: {
+                gridTemplateColumns: "repeat(".concat(columns, ", var(--gantt-column-width))"),
+            } }, Array.from({ length: columns }).map(function (_, index) { return (react_1.default.createElement("div", { className: "shrink-0 border-border/50 border-b py-1 text-center text-xs", key: "".concat(id, "-").concat(index) }, renderHeaderItem(index))); }))));
+};
+exports.GanttContentHeader = GanttContentHeader;
+var DailyHeader = function () {
+    var gantt = (0, react_1.useContext)(GanttContext);
+    return gantt.timelineData.map(function (year) {
+        return year.quarters
+            .flatMap(function (quarter) { return quarter.months; })
+            .map(function (month, index) { return (react_1.default.createElement("div", { className: "relative flex flex-col", key: "".concat(year.year, "-").concat(index) },
+            react_1.default.createElement(exports.GanttContentHeader, { columns: month.days, renderHeaderItem: function (item) { return (react_1.default.createElement("div", { className: "flex items-center justify-center gap-1" },
+                    react_1.default.createElement("p", null, (0, date_fns_1.format)((0, date_fns_1.addDays)(new Date(year.year, index, 1), item), "d")),
+                    react_1.default.createElement("p", { className: "text-muted-foreground" }, (0, date_fns_1.format)((0, date_fns_1.addDays)(new Date(year.year, index, 1), item), "EEEEE")))); }, title: (0, date_fns_1.format)(new Date(year.year, index, 1), "MMMM yyyy") }),
+            react_1.default.createElement(exports.GanttColumns, { columns: month.days, isColumnSecondary: function (item) {
+                    return [0, 6].includes((0, date_fns_1.addDays)(new Date(year.year, index, 1), item).getDay());
+                } }))); });
+    });
+};
+var MonthlyHeader = function () {
+    var gantt = (0, react_1.useContext)(GanttContext);
+    return gantt.timelineData.map(function (year) { return (react_1.default.createElement("div", { className: "relative flex flex-col", key: year.year },
+        react_1.default.createElement(exports.GanttContentHeader, { columns: year.quarters.flatMap(function (quarter) { return quarter.months; }).length, renderHeaderItem: function (item) { return (react_1.default.createElement("p", null, (0, date_fns_1.format)(new Date(year.year, item, 1), "MMM"))); }, title: "".concat(year.year) }),
+        react_1.default.createElement(exports.GanttColumns, { columns: year.quarters.flatMap(function (quarter) { return quarter.months; }).length }))); });
+};
+var QuarterlyHeader = function () {
+    var gantt = (0, react_1.useContext)(GanttContext);
+    return gantt.timelineData.map(function (year) {
+        return year.quarters.map(function (quarter, quarterIndex) { return (react_1.default.createElement("div", { className: "relative flex flex-col", key: "".concat(year.year, "-").concat(quarterIndex) },
+            react_1.default.createElement(exports.GanttContentHeader, { columns: quarter.months.length, renderHeaderItem: function (item) { return (react_1.default.createElement("p", null, (0, date_fns_1.format)(new Date(year.year, quarterIndex * 3 + item, 1), "MMM"))); }, title: "Q".concat(quarterIndex + 1, " ").concat(year.year) }),
+            react_1.default.createElement(exports.GanttColumns, { columns: quarter.months.length }))); });
+    });
+};
+var headers = {
+    daily: DailyHeader,
+    monthly: MonthlyHeader,
+    quarterly: QuarterlyHeader,
+};
+var GanttHeader = function (_a) {
+    var className = _a.className;
+    var gantt = (0, react_1.useContext)(GanttContext);
+    var Header = headers[gantt.range];
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("-space-x-px flex h-full w-max divide-x divide-border/50", className) },
+        react_1.default.createElement(Header, null)));
+};
+exports.GanttHeader = GanttHeader;
+var GanttSidebarItem = function (_a) {
+    var feature = _a.feature, onSelectItem = _a.onSelectItem, className = _a.className;
+    var gantt = (0, react_1.useContext)(GanttContext);
+    var tempEndAt = feature.endAt && (0, date_fns_1.isSameDay)(feature.startAt, feature.endAt)
+        ? (0, date_fns_1.addDays)(feature.endAt, 1)
+        : feature.endAt;
+    var duration = tempEndAt
+        ? (0, date_fns_1.formatDistance)(feature.startAt, tempEndAt)
+        : "".concat((0, date_fns_1.formatDistance)(feature.startAt, new Date()), " so far");
+    var handleClick = function (event) {
+        var _a;
+        if (event.target === event.currentTarget) {
+            // Scroll to the feature in the timeline
+            (_a = gantt.scrollToFeature) === null || _a === void 0 ? void 0 : _a.call(gantt, feature);
+            // Call the original onSelectItem callback
+            onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(feature.id);
+        }
+    };
+    var handleKeyDown = function (event) {
+        var _a;
+        if (event.key === "Enter") {
+            // Scroll to the feature in the timeline
+            (_a = gantt.scrollToFeature) === null || _a === void 0 ? void 0 : _a.call(gantt, feature);
+            // Call the original onSelectItem callback
+            onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(feature.id);
+        }
+    };
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("relative flex items-center gap-2.5 p-2.5 text-xs hover:bg-secondary", className), key: feature.id, onClick: handleClick, onKeyDown: handleKeyDown, 
+        // biome-ignore lint/a11y/useSemanticElements: "This is a clickable item"
+        role: "button", style: {
+            height: "var(--gantt-row-height)",
+        }, tabIndex: 0 },
+        react_1.default.createElement("div", { className: "pointer-events-none h-2 w-2 shrink-0 rounded-full", style: {
+                backgroundColor: feature.status.color,
+            } }),
+        react_1.default.createElement("p", { className: "pointer-events-none flex-1 truncate text-left font-medium" }, feature.name),
+        react_1.default.createElement("p", { className: "pointer-events-none text-muted-foreground" }, duration)));
+};
+exports.GanttSidebarItem = GanttSidebarItem;
+var GanttSidebarHeader = function () { return (react_1.default.createElement("div", { className: "sticky top-0 z-10 flex shrink-0 items-end justify-between gap-2.5 border-border/50 border-b bg-backdrop/90 p-2.5 font-medium text-muted-foreground text-xs backdrop-blur-sm", style: { height: "var(--gantt-header-height)" } },
+    react_1.default.createElement("p", { className: "flex-1 truncate text-left" }, "Issues"),
+    react_1.default.createElement("p", { className: "shrink-0" }, "Duration"))); };
+exports.GanttSidebarHeader = GanttSidebarHeader;
+var GanttSidebarGroup = function (_a) {
+    var children = _a.children, name = _a.name, className = _a.className;
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("p", { className: "w-full truncate p-2.5 text-left font-medium text-muted-foreground text-xs", style: { height: "var(--gantt-row-height)" } }, name),
+        react_1.default.createElement("div", { className: "divide-y divide-border/50" }, children)));
+};
+exports.GanttSidebarGroup = GanttSidebarGroup;
+var GanttSidebar = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("sticky left-0 z-30 h-max min-h-full overflow-clip border-border/50 border-r bg-background/90 backdrop-blur-md", className), "data-roadmap-ui": "gantt-sidebar" },
+        react_1.default.createElement(exports.GanttSidebarHeader, null),
+        react_1.default.createElement("div", { className: "space-y-4" }, children)));
+};
+exports.GanttSidebar = GanttSidebar;
+var GanttAddFeatureHelper = function (_a) {
+    var top = _a.top, className = _a.className;
+    var scrollX = (0, exports.useGanttScrollX)()[0];
+    var gantt = (0, react_1.useContext)(GanttContext);
+    var _b = (0, usehooks_1.useMouse)(), mousePosition = _b[0], mouseRef = _b[1];
+    var handleClick = function () {
+        var _a, _b, _c, _d;
+        var ganttRect = (_b = (_a = gantt.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        var x = mousePosition.x - ((_c = ganttRect === null || ganttRect === void 0 ? void 0 : ganttRect.left) !== null && _c !== void 0 ? _c : 0) + scrollX - gantt.sidebarWidth;
+        var currentDate = getDateByMousePosition(gantt, x);
+        (_d = gantt.onAddItem) === null || _d === void 0 ? void 0 : _d.call(gantt, currentDate);
+    };
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("absolute top-0 w-full px-0.5", className), ref: mouseRef, style: {
+            marginTop: -gantt.rowHeight / 2,
+            transform: "translateY(".concat(top, "px)"),
+        } },
+        react_1.default.createElement("button", { className: "flex h-full w-full items-center justify-center rounded-md border border-dashed p-2", onClick: handleClick, type: "button" },
+            react_1.default.createElement(lucide_react_1.PlusIcon, { className: "pointer-events-none select-none text-muted-foreground", size: 16 }))));
+};
+exports.GanttAddFeatureHelper = GanttAddFeatureHelper;
+var GanttColumn = function (_a) {
+    var _b, _c, _d;
+    var index = _a.index, isColumnSecondary = _a.isColumnSecondary;
+    var gantt = (0, react_1.useContext)(GanttContext);
+    var dragging = (0, exports.useGanttDragging)()[0];
+    var _e = (0, usehooks_1.useMouse)(), mousePosition = _e[0], mouseRef = _e[1];
+    var _f = (0, react_1.useState)(false), hovering = _f[0], setHovering = _f[1];
+    var windowScroll = (0, usehooks_1.useWindowScroll)()[0];
+    var handleMouseEnter = function () { return setHovering(true); };
+    var handleMouseLeave = function () { return setHovering(false); };
+    var top = (0, usehooks_1.useThrottle)(mousePosition.y -
+        ((_c = (_b = mouseRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y) !== null && _c !== void 0 ? _c : 0) -
+        ((_d = windowScroll.y) !== null && _d !== void 0 ? _d : 0), 10);
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: "This is a clickable column"
+    // biome-ignore lint/nursery/noNoninteractiveElementInteractions: "This is a clickable column"
+    react_1.default.createElement("div", { className: (0, utils_1.cn)("group relative h-full overflow-hidden", (isColumnSecondary === null || isColumnSecondary === void 0 ? void 0 : isColumnSecondary(index)) ? "bg-secondary" : ""), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mouseRef }, !dragging && hovering && gantt.onAddItem ? (react_1.default.createElement(exports.GanttAddFeatureHelper, { top: top })) : null));
+};
+exports.GanttColumn = GanttColumn;
+var GanttColumns = function (_a) {
+    var columns = _a.columns, isColumnSecondary = _a.isColumnSecondary;
+    var id = (0, react_1.useId)();
+    return (react_1.default.createElement("div", { className: "divide grid h-full w-full divide-x divide-border/50", style: {
+            gridTemplateColumns: "repeat(".concat(columns, ", var(--gantt-column-width))"),
+        } }, Array.from({ length: columns }).map(function (_, index) { return (react_1.default.createElement(exports.GanttColumn, { index: index, isColumnSecondary: isColumnSecondary, key: "".concat(id, "-").concat(index) })); })));
+};
+exports.GanttColumns = GanttColumns;
+var GanttCreateMarkerTrigger = function (_a) {
+    var _b, _c, _d;
+    var onCreateMarker = _a.onCreateMarker, className = _a.className;
+    var gantt = (0, react_1.useContext)(GanttContext);
+    var _e = (0, usehooks_1.useMouse)(), mousePosition = _e[0], mouseRef = _e[1];
+    var windowScroll = (0, usehooks_1.useWindowScroll)()[0];
+    var x = (0, usehooks_1.useThrottle)(mousePosition.x -
+        ((_c = (_b = mouseRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().x) !== null && _c !== void 0 ? _c : 0) -
+        ((_d = windowScroll.x) !== null && _d !== void 0 ? _d : 0), 10);
+    var date = getDateByMousePosition(gantt, x);
+    var handleClick = function () { return onCreateMarker(date); };
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("group pointer-events-none absolute top-0 left-0 h-full w-full select-none overflow-visible", className), ref: mouseRef },
+        react_1.default.createElement("div", { className: "-ml-2 pointer-events-auto sticky top-6 z-20 flex w-4 flex-col items-center justify-center gap-1 overflow-visible opacity-0 group-hover:opacity-100", style: { transform: "translateX(".concat(x, "px)") } },
+            react_1.default.createElement("button", { className: "z-50 inline-flex h-4 w-4 items-center justify-center rounded-full bg-card", onClick: handleClick, type: "button" },
+                react_1.default.createElement(lucide_react_1.PlusIcon, { className: "text-muted-foreground", size: 12 })),
+            react_1.default.createElement("div", { className: "whitespace-nowrap rounded-full border border-border/50 bg-background/90 px-2 py-1 text-foreground text-xs backdrop-blur-lg" }, (0, date_fns_1.formatDate)(date, "MMM dd, yyyy")))));
+};
+exports.GanttCreateMarkerTrigger = GanttCreateMarkerTrigger;
+var GanttFeatureDragHelper = function (_a) {
+    var direction = _a.direction, featureId = _a.featureId, date = _a.date;
+    var _b = (0, exports.useGanttDragging)(), setDragging = _b[1];
+    var _c = (0, core_1.useDraggable)({
+        id: "feature-drag-helper-".concat(featureId),
+    }), attributes = _c.attributes, listeners = _c.listeners, setNodeRef = _c.setNodeRef;
+    var isPressed = Boolean(attributes["aria-pressed"]);
+    (0, react_1.useEffect)(function () { return setDragging(isPressed); }, [isPressed, setDragging]);
+    return (react_1.default.createElement("div", __assign({ className: (0, utils_1.cn)("group -translate-y-1/2 !cursor-col-resize absolute top-1/2 z-[3] h-full w-6 rounded-md outline-none", direction === "left" ? "-left-2.5" : "-right-2.5"), ref: setNodeRef }, attributes, listeners),
+        react_1.default.createElement("div", { className: (0, utils_1.cn)("-translate-y-1/2 absolute top-1/2 h-[80%] w-1 rounded-sm bg-muted-foreground opacity-0 transition-all", direction === "left" ? "left-2.5" : "right-2.5", direction === "left" ? "group-hover:left-0" : "group-hover:right-0", isPressed && (direction === "left" ? "left-0" : "right-0"), "group-hover:opacity-100", isPressed && "opacity-100") }),
+        date && (react_1.default.createElement("div", { className: (0, utils_1.cn)("-translate-x-1/2 absolute top-10 hidden whitespace-nowrap rounded-lg border border-border/50 bg-background/90 px-2 py-1 text-foreground text-xs backdrop-blur-lg group-hover:block", isPressed && "block") }, (0, date_fns_1.format)(date, "MMM dd, yyyy")))));
+};
+exports.GanttFeatureDragHelper = GanttFeatureDragHelper;
+var GanttFeatureItemCard = function (_a) {
+    var id = _a.id, children = _a.children;
+    var _b = (0, exports.useGanttDragging)(), setDragging = _b[1];
+    var _c = (0, core_1.useDraggable)({ id: id }), attributes = _c.attributes, listeners = _c.listeners, setNodeRef = _c.setNodeRef;
+    var isPressed = Boolean(attributes["aria-pressed"]);
+    (0, react_1.useEffect)(function () { return setDragging(isPressed); }, [isPressed, setDragging]);
+    return (react_1.default.createElement(card_1.Card, { className: "h-full w-full rounded-md bg-background p-2 text-xs shadow-sm" },
+        react_1.default.createElement("div", __assign({ className: (0, utils_1.cn)("flex h-full w-full items-center justify-between gap-2 text-left", isPressed && "cursor-grabbing") }, attributes, listeners, { ref: setNodeRef }), children)));
+};
+exports.GanttFeatureItemCard = GanttFeatureItemCard;
+var GanttFeatureItem = function (_a) {
+    var onMove = _a.onMove, children = _a.children, className = _a.className, feature = __rest(_a, ["onMove", "children", "className"]);
+    var scrollX = (0, exports.useGanttScrollX)()[0];
+    var gantt = (0, react_1.useContext)(GanttContext);
+    var timelineStartDate = (0, react_1.useMemo)(function () { var _a, _b; return new Date((_b = (_a = gantt.timelineData.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : 0, 0, 1); }, [gantt.timelineData]);
+    var _b = (0, react_1.useState)(feature.startAt), startAt = _b[0], setStartAt = _b[1];
+    var _c = (0, react_1.useState)(feature.endAt), endAt = _c[0], setEndAt = _c[1];
+    // Memoize expensive calculations
+    var width = (0, react_1.useMemo)(function () { return getWidth(startAt, endAt, gantt); }, [startAt, endAt, gantt]);
+    var offset = (0, react_1.useMemo)(function () { return getOffset(startAt, timelineStartDate, gantt); }, [startAt, timelineStartDate, gantt]);
+    var addRange = (0, react_1.useMemo)(function () { return getAddRange(gantt.range); }, [gantt.range]);
+    var mousePosition = (0, usehooks_1.useMouse)()[0];
+    var _d = (0, react_1.useState)(0), previousMouseX = _d[0], setPreviousMouseX = _d[1];
+    var _e = (0, react_1.useState)(startAt), previousStartAt = _e[0], setPreviousStartAt = _e[1];
+    var _f = (0, react_1.useState)(endAt), previousEndAt = _f[0], setPreviousEndAt = _f[1];
+    var mouseSensor = (0, core_1.useSensor)(core_1.MouseSensor, {
+        activationConstraint: {
+            distance: 10,
+        },
+    });
+    var handleItemDragStart = (0, react_1.useCallback)(function () {
+        setPreviousMouseX(mousePosition.x);
+        setPreviousStartAt(startAt);
+        setPreviousEndAt(endAt);
+    }, [mousePosition.x, startAt, endAt]);
+    var handleItemDragMove = (0, react_1.useCallback)(function () {
+        var currentDate = getDateByMousePosition(gantt, mousePosition.x);
+        var originalDate = getDateByMousePosition(gantt, previousMouseX);
+        var delta = gantt.range === "daily"
+            ? getDifferenceIn(gantt.range)(currentDate, originalDate)
+            : getInnerDifferenceIn(gantt.range)(currentDate, originalDate);
+        var newStartDate = (0, date_fns_1.addDays)(previousStartAt, delta);
+        var newEndDate = previousEndAt ? (0, date_fns_1.addDays)(previousEndAt, delta) : null;
+        setStartAt(newStartDate);
+        setEndAt(newEndDate);
+    }, [gantt, mousePosition.x, previousMouseX, previousStartAt, previousEndAt]);
+    var onDragEnd = (0, react_1.useCallback)(function () { return onMove === null || onMove === void 0 ? void 0 : onMove(feature.id, startAt, endAt); }, [onMove, feature.id, startAt, endAt]);
+    var handleLeftDragMove = (0, react_1.useCallback)(function () {
+        var _a, _b, _c;
+        var ganttRect = (_b = (_a = gantt.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        var x = mousePosition.x - ((_c = ganttRect === null || ganttRect === void 0 ? void 0 : ganttRect.left) !== null && _c !== void 0 ? _c : 0) + scrollX - gantt.sidebarWidth;
+        var newStartAt = getDateByMousePosition(gantt, x);
+        setStartAt(newStartAt);
+    }, [gantt, mousePosition.x, scrollX]);
+    var handleRightDragMove = (0, react_1.useCallback)(function () {
+        var _a, _b, _c;
+        var ganttRect = (_b = (_a = gantt.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        var x = mousePosition.x - ((_c = ganttRect === null || ganttRect === void 0 ? void 0 : ganttRect.left) !== null && _c !== void 0 ? _c : 0) + scrollX - gantt.sidebarWidth;
+        var newEndAt = getDateByMousePosition(gantt, x);
+        setEndAt(newEndAt);
+    }, [gantt, mousePosition.x, scrollX]);
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("relative flex w-max min-w-full py-0.5", className), style: { height: "var(--gantt-row-height)" } },
+        react_1.default.createElement("div", { className: "pointer-events-auto absolute top-0.5", style: {
+                height: "calc(var(--gantt-row-height) - 4px)",
+                width: Math.round(width),
+                left: Math.round(offset),
+            } },
+            onMove && (react_1.default.createElement(core_1.DndContext, { modifiers: [modifiers_1.restrictToHorizontalAxis], onDragEnd: onDragEnd, onDragMove: handleLeftDragMove, sensors: [mouseSensor] },
+                react_1.default.createElement(exports.GanttFeatureDragHelper, { date: startAt, direction: "left", featureId: feature.id }))),
+            react_1.default.createElement(core_1.DndContext, { modifiers: [modifiers_1.restrictToHorizontalAxis], onDragEnd: onDragEnd, onDragMove: handleItemDragMove, onDragStart: handleItemDragStart, sensors: [mouseSensor] },
+                react_1.default.createElement(exports.GanttFeatureItemCard, { id: feature.id }, children !== null && children !== void 0 ? children : (react_1.default.createElement("p", { className: "flex-1 truncate text-xs" }, feature.name)))),
+            onMove && (react_1.default.createElement(core_1.DndContext, { modifiers: [modifiers_1.restrictToHorizontalAxis], onDragEnd: onDragEnd, onDragMove: handleRightDragMove, sensors: [mouseSensor] },
+                react_1.default.createElement(exports.GanttFeatureDragHelper, { date: endAt !== null && endAt !== void 0 ? endAt : addRange(startAt, 2), direction: "right", featureId: feature.id }))))));
+};
+exports.GanttFeatureItem = GanttFeatureItem;
+var GanttFeatureListGroup = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (react_1.default.createElement("div", { className: className, style: { paddingTop: "var(--gantt-row-height)" } }, children));
+};
+exports.GanttFeatureListGroup = GanttFeatureListGroup;
+var GanttFeatureRow = function (_a) {
+    var features = _a.features, onMove = _a.onMove, children = _a.children, className = _a.className;
+    // Sort features by start date to handle potential overlaps
+    var sortedFeatures = __spreadArray([], features, true).sort(function (a, b) { return a.startAt.getTime() - b.startAt.getTime(); });
+    // Calculate sub-row positions for overlapping features using a proper algorithm
+    var featureWithPositions = [];
+    var subRowEndTimes = []; // Track when each sub-row becomes free
+    for (var _i = 0, sortedFeatures_1 = sortedFeatures; _i < sortedFeatures_1.length; _i++) {
+        var feature = sortedFeatures_1[_i];
+        var subRow = 0;
+        // Find the first sub-row that's free (doesn't overlap)
+        while (subRow < subRowEndTimes.length &&
+            subRowEndTimes[subRow] > feature.startAt) {
+            subRow++;
+        }
+        // Update the end time for this sub-row
+        if (subRow === subRowEndTimes.length) {
+            subRowEndTimes.push(feature.endAt);
+        }
+        else {
+            subRowEndTimes[subRow] = feature.endAt;
+        }
+        featureWithPositions.push(__assign(__assign({}, feature), { subRow: subRow }));
+    }
+    var maxSubRows = Math.max(1, subRowEndTimes.length);
+    var subRowHeight = 36; // Base row height
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("relative", className), style: {
+            height: "".concat(maxSubRows * subRowHeight, "px"),
+            minHeight: "var(--gantt-row-height)",
+        } }, featureWithPositions.map(function (feature) { return (react_1.default.createElement("div", { key: feature.id, className: "absolute w-full", style: {
+            top: "".concat(feature.subRow * subRowHeight, "px"),
+            height: "".concat(subRowHeight, "px"),
+        } },
+        react_1.default.createElement(exports.GanttFeatureItem, __assign({}, feature, { onMove: onMove }), children ? (children(feature)) : (react_1.default.createElement("p", { className: "flex-1 truncate text-xs" }, feature.name))))); })));
+};
+exports.GanttFeatureRow = GanttFeatureRow;
+var GanttFeatureList = function (_a) {
+    var className = _a.className, children = _a.children;
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("absolute top-0 left-0 h-full w-max space-y-4", className), style: { marginTop: "var(--gantt-header-height)" } }, children));
+};
+exports.GanttFeatureList = GanttFeatureList;
+exports.GanttMarker = (0, react_1.memo)(function (_a) {
+    var label = _a.label, date = _a.date, id = _a.id, onRemove = _a.onRemove, className = _a.className;
+    var gantt = (0, react_1.useContext)(GanttContext);
+    var differenceIn = (0, react_1.useMemo)(function () { return getDifferenceIn(gantt.range); }, [gantt.range]);
+    var timelineStartDate = (0, react_1.useMemo)(function () { var _a, _b; return new Date((_b = (_a = gantt.timelineData.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : 0, 0, 1); }, [gantt.timelineData]);
+    // Memoize expensive calculations
+    var offset = (0, react_1.useMemo)(function () { return differenceIn(date, timelineStartDate); }, [differenceIn, date, timelineStartDate]);
+    var innerOffset = (0, react_1.useMemo)(function () {
+        return calculateInnerOffset(date, gantt.range, (gantt.columnWidth * gantt.zoom) / 100);
+    }, [date, gantt.range, gantt.columnWidth, gantt.zoom]);
+    var handleRemove = (0, react_1.useCallback)(function () { return onRemove === null || onRemove === void 0 ? void 0 : onRemove(id); }, [onRemove, id]);
+    return (react_1.default.createElement("div", { className: "pointer-events-none absolute top-0 left-0 z-20 flex h-full select-none flex-col items-center justify-center overflow-visible", style: {
+            width: 0,
+            transform: "translateX(calc(var(--gantt-column-width) * ".concat(offset, " + ").concat(innerOffset, "px))"),
+        } },
+        react_1.default.createElement(context_menu_1.ContextMenu, null,
+            react_1.default.createElement(context_menu_1.ContextMenuTrigger, { asChild: true },
+                react_1.default.createElement("div", { className: (0, utils_1.cn)("group pointer-events-auto sticky top-0 flex select-auto flex-col flex-nowrap items-center justify-center whitespace-nowrap rounded-b-md bg-card px-2 py-1 text-foreground text-xs", className) },
+                    label,
+                    react_1.default.createElement("span", { className: "max-h-[0] overflow-hidden opacity-80 transition-all group-hover:max-h-[2rem]" }, (0, date_fns_1.formatDate)(date, "MMM dd, yyyy")))),
+            react_1.default.createElement(context_menu_1.ContextMenuContent, null, onRemove ? (react_1.default.createElement(context_menu_1.ContextMenuItem, { className: "flex items-center gap-2 text-destructive", onClick: handleRemove },
+                react_1.default.createElement(lucide_react_1.TrashIcon, { size: 16 }),
+                "Remove marker")) : null)),
+        react_1.default.createElement("div", { className: (0, utils_1.cn)("h-full w-px bg-card", className) })));
+});
+exports.GanttMarker.displayName = "GanttMarker";
+var GanttProvider = function (_a) {
+    var _b = _a.zoom, zoom = _b === void 0 ? 100 : _b, _c = _a.range, range = _c === void 0 ? "monthly" : _c, onAddItem = _a.onAddItem, children = _a.children, className = _a.className;
+    var scrollRef = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useState)(createInitialTimelineData(new Date())), timelineData = _d[0], setTimelineData = _d[1];
+    var _e = (0, exports.useGanttScrollX)(), setScrollX = _e[1];
+    var _f = (0, react_1.useState)(0), sidebarWidth = _f[0], setSidebarWidth = _f[1];
+    var headerHeight = 60;
+    var rowHeight = 36;
+    var columnWidth = 50;
+    if (range === "monthly") {
+        columnWidth = 150;
+    }
+    else if (range === "quarterly") {
+        columnWidth = 100;
+    }
+    // Memoize CSS variables to prevent unnecessary re-renders
+    var cssVariables = (0, react_1.useMemo)(function () {
+        return ({
+            "--gantt-zoom": "".concat(zoom),
+            "--gantt-column-width": "".concat((zoom / 100) * columnWidth, "px"),
+            "--gantt-header-height": "".concat(headerHeight, "px"),
+            "--gantt-row-height": "".concat(rowHeight, "px"),
+            "--gantt-sidebar-width": "".concat(sidebarWidth, "px"),
+        });
+    }, [zoom, columnWidth, sidebarWidth]);
+    (0, react_1.useEffect)(function () {
+        if (scrollRef.current) {
+            scrollRef.current.scrollLeft =
+                scrollRef.current.scrollWidth / 2 - scrollRef.current.clientWidth / 2;
+            setScrollX(scrollRef.current.scrollLeft);
+        }
+    }, [setScrollX]);
+    // Update sidebar width when DOM is ready
+    (0, react_1.useEffect)(function () {
+        var updateSidebarWidth = function () {
+            var _a;
+            var sidebarElement = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-roadmap-ui="gantt-sidebar"]');
+            var newWidth = sidebarElement ? 300 : 0;
+            setSidebarWidth(newWidth);
+        };
+        // Update immediately
+        updateSidebarWidth();
+        // Also update on resize or when children change
+        var observer = new MutationObserver(updateSidebarWidth);
+        if (scrollRef.current) {
+            observer.observe(scrollRef.current, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var handleScroll = (0, react_1.useCallback)((0, lodash_throttle_1.default)(function () {
+        var _a, _b;
+        var scrollElement = scrollRef.current;
+        if (!scrollElement) {
+            return;
+        }
+        var scrollLeft = scrollElement.scrollLeft, scrollWidth = scrollElement.scrollWidth, clientWidth = scrollElement.clientWidth;
+        setScrollX(scrollLeft);
+        if (scrollLeft === 0) {
+            // Extend timelineData to the past
+            var firstYear_1 = (_a = timelineData[0]) === null || _a === void 0 ? void 0 : _a.year;
+            if (!firstYear_1) {
+                return;
+            }
+            var newTimelineData = __spreadArray([], timelineData, true);
+            newTimelineData.unshift({
+                year: firstYear_1 - 1,
+                quarters: new Array(4).fill(null).map(function (_, quarterIndex) { return ({
+                    months: new Array(3).fill(null).map(function (_, monthIndex) {
+                        var month = quarterIndex * 3 + monthIndex;
+                        return {
+                            days: (0, date_fns_1.getDaysInMonth)(new Date(firstYear_1, month, 1)),
+                        };
+                    }),
+                }); }),
+            });
+            setTimelineData(newTimelineData);
+            // Scroll a bit forward so it's not at the very start
+            scrollElement.scrollLeft = scrollElement.clientWidth;
+            setScrollX(scrollElement.scrollLeft);
+        }
+        else if (scrollLeft + clientWidth >= scrollWidth) {
+            // Extend timelineData to the future
+            var lastYear_1 = (_b = timelineData.at(-1)) === null || _b === void 0 ? void 0 : _b.year;
+            if (!lastYear_1) {
+                return;
+            }
+            var newTimelineData = __spreadArray([], timelineData, true);
+            newTimelineData.push({
+                year: lastYear_1 + 1,
+                quarters: new Array(4).fill(null).map(function (_, quarterIndex) { return ({
+                    months: new Array(3).fill(null).map(function (_, monthIndex) {
+                        var month = quarterIndex * 3 + monthIndex;
+                        return {
+                            days: (0, date_fns_1.getDaysInMonth)(new Date(lastYear_1, month, 1)),
+                        };
+                    }),
+                }); }),
+            });
+            setTimelineData(newTimelineData);
+            // Scroll a bit back so it's not at the very end
+            scrollElement.scrollLeft =
+                scrollElement.scrollWidth - scrollElement.clientWidth;
+            setScrollX(scrollElement.scrollLeft);
+        }
+    }, 100), []);
+    (0, react_1.useEffect)(function () {
+        var scrollElement = scrollRef.current;
+        if (scrollElement) {
+            scrollElement.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            // Fix memory leak by properly referencing the scroll element
+            if (scrollElement) {
+                scrollElement.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [handleScroll]);
+    var scrollToFeature = (0, react_1.useCallback)(function (feature) {
+        var scrollElement = scrollRef.current;
+        if (!scrollElement) {
+            return;
+        }
+        // Calculate timeline start date from timelineData
+        var timelineStartDate = new Date(timelineData[0].year, 0, 1);
+        // Calculate the horizontal offset for the feature's start date
+        var offset = getOffset(feature.startAt, timelineStartDate, {
+            zoom: zoom,
+            range: range,
+            columnWidth: columnWidth,
+            sidebarWidth: sidebarWidth,
+            headerHeight: headerHeight,
+            rowHeight: rowHeight,
+            onAddItem: onAddItem,
+            placeholderLength: 2,
+            timelineData: timelineData,
+            ref: scrollRef,
+        });
+        // Scroll to align the feature's start with the right side of the sidebar
+        var targetScrollLeft = Math.max(0, offset);
+        scrollElement.scrollTo({
+            left: targetScrollLeft,
+            behavior: "smooth",
+        });
+    }, [
+        timelineData,
+        zoom,
+        range,
+        columnWidth,
+        sidebarWidth,
+        headerHeight,
+        rowHeight,
+        onAddItem,
+    ]);
+    return (react_1.default.createElement(GanttContext.Provider, { value: {
+            zoom: zoom,
+            range: range,
+            headerHeight: headerHeight,
+            columnWidth: columnWidth,
+            sidebarWidth: sidebarWidth,
+            rowHeight: rowHeight,
+            onAddItem: onAddItem,
+            timelineData: timelineData,
+            placeholderLength: 2,
+            ref: scrollRef,
+            scrollToFeature: scrollToFeature,
+        } },
+        react_1.default.createElement("div", { className: (0, utils_1.cn)("gantt relative grid h-full w-full flex-none select-none overflow-auto rounded-sm bg-secondary", range, className), ref: scrollRef, style: __assign(__assign({}, cssVariables), { gridTemplateColumns: "var(--gantt-sidebar-width) 1fr" }) }, children)));
+};
+exports.GanttProvider = GanttProvider;
+var GanttTimeline = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("relative flex h-full w-max flex-none overflow-clip", className) }, children));
+};
+exports.GanttTimeline = GanttTimeline;
+var GanttToday = function (_a) {
+    var className = _a.className;
+    var label = "Today";
+    var date = (0, react_1.useMemo)(function () { return new Date(); }, []);
+    var gantt = (0, react_1.useContext)(GanttContext);
+    var differenceIn = (0, react_1.useMemo)(function () { return getDifferenceIn(gantt.range); }, [gantt.range]);
+    var timelineStartDate = (0, react_1.useMemo)(function () { var _a, _b; return new Date((_b = (_a = gantt.timelineData.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : 0, 0, 1); }, [gantt.timelineData]);
+    // Memoize expensive calculations
+    var offset = (0, react_1.useMemo)(function () { return differenceIn(date, timelineStartDate); }, [differenceIn, date, timelineStartDate]);
+    var innerOffset = (0, react_1.useMemo)(function () {
+        return calculateInnerOffset(date, gantt.range, (gantt.columnWidth * gantt.zoom) / 100);
+    }, [date, gantt.range, gantt.columnWidth, gantt.zoom]);
+    return (react_1.default.createElement("div", { className: "pointer-events-none absolute top-0 left-0 z-20 flex h-full select-none flex-col items-center justify-center overflow-visible", style: {
+            width: 0,
+            transform: "translateX(calc(var(--gantt-column-width) * ".concat(offset, " + ").concat(innerOffset, "px))"),
+        } },
+        react_1.default.createElement("div", { className: (0, utils_1.cn)("group pointer-events-auto sticky top-0 flex select-auto flex-col flex-nowrap items-center justify-center whitespace-nowrap rounded-b-md bg-card px-2 py-1 text-foreground text-xs", className) },
+            label,
+            react_1.default.createElement("span", { className: "max-h-[0] overflow-hidden opacity-80 transition-all group-hover:max-h-[2rem]" }, (0, date_fns_1.formatDate)(date, "MMM dd, yyyy"))),
+        react_1.default.createElement("div", { className: (0, utils_1.cn)("h-full w-px bg-card", className) })));
+};
+exports.GanttToday = GanttToday;