@expcat/tigercat-react 2.0.19 → 2.1.1

package/README.md

@@ -17,7 +17,7 @@ pnpm add @expcat/tigercat-react
 npm install @expcat/tigercat-react
 ```
 
-**Requirements:** React ≥19, Tailwind CSS ≥3.4
+**Requirements:** React / React DOM 19.x, Tailwind CSS 4.x, Node.js ≥22.13.0
 
 ## Quick Start
 
@@ -35,24 +35,33 @@ function App() {
 
 ## Components
 
-| Category       | Components                                                                            |
-| -------------- | ------------------------------------------------------------------------------------- |
-| **Basic**      | Alert, Avatar, Badge, Button, Code, Divider, Icon, Link, Tag, Text                    |
-| **Form**       | Input, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, Upload, Form  |
-| **Layout**     | Card, Container, Grid (Row/Col), Layout, List, Descriptions, Skeleton, Space          |
-| **Navigation** | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree                             |
-| **Feedback**   | Modal, Drawer, Message, Notification, Loading, Popconfirm, Popover, Tooltip, Progress |
-| **Data**       | Table, Timeline                                                                       |
-| **Charts**     | BarChart, LineChart, AreaChart, PieChart, DonutChart, RadarChart, ScatterChart        |
+172 public component entries across 9 categories. The authoritative list with
+import subpaths lives in
+[component-index.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/component-index.md)
+(generated); the table below is only a sampler.
+
+| Category       | Count | Examples                                                      |
+| -------------- | ----- | ------------------------------------------------------------- |
+| **Basic**      | 30    | Button, Alert, Avatar, Badge, Icon, Tag, Text, Result, QRCode |
+| **Form**       | 31    | Input, Select, DatePicker, Form, Upload, InputOTP, TagsInput  |
+| **Layout**     | 19    | Card, Row/Col, Layout, List, Descriptions, Skeleton, Space    |
+| **Navigation** | 33    | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree     |
+| **Feedback**   | 13    | Modal, Drawer, Message, Popover, Tooltip, Progress, Tour      |
+| **Data**       | 7     | Table, Calendar, Collapse, Timeline, DataExport               |
+| **Charts**     | 20    | BarChart, LineChart, PieChart, RadarChart, GaugeChart, Gantt  |
+| **Advanced**   | 12    | VirtualTable, VirtualList, RichTextEditor, CodeEditor         |
+| **Composite**  | 7     | DataTableWithToolbar, ChatWindow, FormWizard, TaskBoard       |
+
+`Message` and `notification` are also available as imperative command APIs from
+the package root; `notification` is a command API, not a component.
 
 ## Hooks
 
-- `useChartInteraction` - Chart interaction utilities
-- `useFormContext` - Form state management
-- `useMenuContext` - Menu state access
-- `useTabsContext` - Tabs state access
-- `useBreadcrumbContext` - Breadcrumb navigation
-- `useStepsContext` - Steps state access
+`useTigerConfig`, `useControlledState`, `useDrag`, `useChartInteraction`,
+`useFormController`, plus the component context hooks `useFormContext`,
+`useMenuContext`, `useTabsContext`, `useCollapseContext`, `useAnchorContext`,
+`useBreadcrumbContext` and `useStepsContext`. Signatures are listed in
+[api-summary.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/shared/api-summary.md).
 
 ## License
 

package/dist/chunk-246DAUEF.mjs

@@ -0,0 +1,181 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+
+// src/components/MaskInput.tsx
+import { useEffect, useId, useLayoutEffect, useMemo, useRef } from "react";
+import {
+  applyMaskInput,
+  classNames,
+  formatMaskValue,
+  getInputClasses,
+  getInputClearButtonClasses,
+  getInputErrorClasses,
+  getInputWrapperClasses,
+  injectShakeStyle,
+  parseMask,
+  SHAKE_CLASS
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MaskInput = ({
+  size,
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  mask,
+  tokens,
+  value,
+  defaultValue,
+  placeholder = "",
+  disabled = false,
+  readonly = false,
+  clearable = false,
+  name,
+  id,
+  autoComplete,
+  autoFocus = false,
+  onChange,
+  onComplete,
+  onFocus,
+  onBlur,
+  onClear,
+  className,
+  style,
+  ...rest
+}) => {
+  injectShakeStyle();
+  const formItemControl = useFormItemControlContext();
+  const effectiveSize = size ?? "md";
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const isComposing = useRef(false);
+  const pendingCaret = useRef(null);
+  const reactId = useId();
+  const errorMsgId = `tiger-mask-input-error-${reactId}`;
+  const spec = useMemo(() => parseMask(mask, tokens), [mask, tokens]);
+  const [rawValue, setRawValue] = useControlledState(value, defaultValue ?? "");
+  const formatted = useMemo(() => formatMaskValue(rawValue, spec), [rawValue, spec]);
+  const maskedValue = formatted.maskedValue;
+  useEffect(() => {
+    if (status === "error" && wrapperRef.current) {
+      const el = wrapperRef.current;
+      el.classList.remove(SHAKE_CLASS);
+      void el.offsetWidth;
+      el.classList.add(SHAKE_CLASS);
+    }
+  }, [status, shakeTrigger]);
+  useLayoutEffect(() => {
+    if (pendingCaret.current !== null && inputRef.current) {
+      const caret = pendingCaret.current;
+      inputRef.current.setSelectionRange(caret, caret);
+      pendingCaret.current = null;
+    }
+  });
+  const commit = (raw, detail, previousMasked) => {
+    setRawValue(raw);
+    onChange?.(raw, detail);
+    if (detail.completed && !formatMaskValue(previousMasked, spec).completed) {
+      onComplete?.(raw, detail.maskedValue);
+    }
+  };
+  const applyValue = (inputValue, caret) => {
+    const previousMasked = maskedValue;
+    const result = applyMaskInput(inputValue, caret, spec, previousMasked);
+    if (inputRef.current) inputRef.current.value = result.maskedValue;
+    pendingCaret.current = result.caret;
+    commit(
+      result.rawValue,
+      { maskedValue: result.maskedValue, completed: result.completed },
+      previousMasked
+    );
+  };
+  const handleInput = (event) => {
+    if (isComposing.current) return;
+    const target = event.currentTarget;
+    applyValue(target.value, target.selectionStart ?? target.value.length);
+  };
+  const handlePaste = (event) => {
+    if (disabled || readonly) return;
+    event.preventDefault();
+    const input = event.currentTarget;
+    const text = event.clipboardData.getData("text");
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    applyValue(input.value.slice(0, start) + text + input.value.slice(end), start + text.length);
+  };
+  const handleCompositionStart = () => {
+    isComposing.current = true;
+  };
+  const handleCompositionEnd = (event) => {
+    isComposing.current = false;
+    const target = event.currentTarget;
+    applyValue(target.value, target.selectionStart ?? target.value.length);
+  };
+  const handleClear = () => {
+    setRawValue("");
+    onChange?.("", { maskedValue: "", completed: false });
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const hasSuffix = clearable;
+  const activeError = status === "error" && !!errorMessage;
+  const showClear = clearable && !disabled && !readonly && rawValue.length > 0;
+  const inputClasses = getInputClasses({
+    size: effectiveSize,
+    status,
+    hasPrefix: false,
+    hasSuffix
+  });
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: classNames(getInputWrapperClasses(), className), style, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        ref: inputRef,
+        className: inputClasses,
+        type: "text",
+        value: maskedValue,
+        placeholder,
+        disabled,
+        readOnly: readonly,
+        id,
+        autoComplete,
+        autoFocus,
+        ...status === "error" ? { "aria-invalid": true } : {},
+        ...activeError ? { "aria-describedby": errorMsgId } : {},
+        onInput: handleInput,
+        onChange: () => {
+        },
+        onPaste: handlePaste,
+        onCompositionStart: handleCompositionStart,
+        onCompositionEnd: handleCompositionEnd,
+        onFocus,
+        onBlur
+      }
+    ),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: rawValue }) : null,
+    activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), "aria-live": "polite", children: errorMessage }) : showClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getInputClearButtonClasses(effectiveSize),
+        onClick: handleClear,
+        "aria-label": "Clear input",
+        tabIndex: -1,
+        children: "\u2715"
+      }
+    )
+  ] });
+};
+var MaskInput_default = MaskInput;
+
+export {
+  MaskInput,
+  MaskInput_default
+};

package/dist/{chunk-PU3JY6RE.mjs → chunk-2JMI7TCM.mjs}

@@ -1,6 +1,6 @@
 import {
   TaskBoard
-} from "./chunk-773LH7BK.mjs";
+} from "./chunk-O6VYD4E4.mjs";
 
 // src/components/Kanban.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/chunk-2YBLMVDT.mjs

@@ -0,0 +1,428 @@
+import {
+  ChartCanvas
+} from "./chunk-CUAXRBKO.mjs";
+
+// src/components/Gantt.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  applyGanttTaskDateOverlay,
+  classNames,
+  clampGanttDragDeltaX,
+  computeGanttLayout,
+  ganttAxisTextClasses,
+  ganttDateValuesEqual,
+  ganttDependencyClasses,
+  ganttLabelClasses,
+  ganttProgressClasses,
+  ganttRowClasses,
+  ganttTodayLineClasses,
+  getChartInnerRect,
+  getGanttTaskAriaLabel,
+  getGanttTaskClasses,
+  isBrowser,
+  moveGanttTaskByPx
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GANTT_BAR_CLICK_PX = 4;
+function Gantt({
+  data,
+  width = 760,
+  height = 360,
+  padding = 24,
+  scale = "week",
+  rowHeight = 40,
+  barHeight = 18,
+  taskLabelWidth = 140,
+  timelineHeight = 36,
+  minDate,
+  maxDate,
+  minBarWidth = 6,
+  showToday = false,
+  showProgress = true,
+  showDependencies = true,
+  hoverable = false,
+  selectable = false,
+  selectedId,
+  activeOpacity = 1,
+  inactiveOpacity = 0.35,
+  dateFormatter,
+  colors,
+  title,
+  desc,
+  ariaLabel = "Gantt chart",
+  className,
+  onTaskClick,
+  onTaskHover,
+  onSelectedIdChange,
+  onTaskChange,
+  onDataChange
+}) {
+  const [innerSelectedId, setInnerSelectedId] = useState(null);
+  const [hoveredId, setHoveredId] = useState(null);
+  const [dateOverlay, setDateOverlay] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [dragPreview, setDragPreview] = useState(
+    null
+  );
+  const dragSessionRef = useRef(null);
+  const documentPointerListeningRef = useRef(false);
+  const suppressClickRef = useRef(false);
+  const dragFnsRef = useRef({
+    move: (_event) => {
+    },
+    finish: (_event) => {
+    }
+  });
+  const onDocumentPointerMove = useRef((event) => {
+    dragFnsRef.current.move(event);
+  }).current;
+  const onDocumentPointerEnd = useRef((event) => {
+    dragFnsRef.current.finish(event);
+  }).current;
+  const dataRef = useRef(data);
+  dataRef.current = data;
+  const dateOverlayRef = useRef(dateOverlay);
+  dateOverlayRef.current = dateOverlay;
+  const onTaskChangeRef = useRef(onTaskChange);
+  onTaskChangeRef.current = onTaskChange;
+  const onDataChangeRef = useRef(onDataChange);
+  onDataChangeRef.current = onDataChange;
+  const onTaskClickRef = useRef(onTaskClick);
+  onTaskClickRef.current = onTaskClick;
+  const onSelectedIdChangeRef = useRef(onSelectedIdChange);
+  onSelectedIdChangeRef.current = onSelectedIdChange;
+  const selectedIdRef = useRef(selectedId);
+  selectedIdRef.current = selectedId;
+  const selectableRef = useRef(selectable);
+  selectableRef.current = selectable;
+  const resolvedSelectedId = selectedId === void 0 ? innerSelectedId : selectedId;
+  const resolvedSelectedIdRef = useRef(resolvedSelectedId);
+  resolvedSelectedIdRef.current = resolvedSelectedId;
+  useEffect(
+    () => () => {
+      if (!documentPointerListeningRef.current || !isBrowser()) return;
+      document.removeEventListener("pointermove", onDocumentPointerMove);
+      document.removeEventListener("pointerup", onDocumentPointerEnd);
+      document.removeEventListener("pointercancel", onDocumentPointerEnd);
+      documentPointerListeningRef.current = false;
+    },
+    [onDocumentPointerEnd, onDocumentPointerMove]
+  );
+  const resolvedData = useMemo(
+    () => applyGanttTaskDateOverlay(data, dateOverlay),
+    [data, dateOverlay]
+  );
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [height, padding, width]
+  );
+  const layout = useMemo(
+    () => computeGanttLayout(resolvedData, {
+      width: innerRect.width,
+      rowHeight,
+      barHeight,
+      taskLabelWidth,
+      timelineHeight,
+      minDate,
+      maxDate,
+      minBarWidth,
+      scale,
+      colors,
+      today: showToday ? /* @__PURE__ */ new Date() : void 0,
+      dateFormatter
+    }),
+    [
+      barHeight,
+      colors,
+      dateFormatter,
+      innerRect.width,
+      maxDate,
+      minBarWidth,
+      minDate,
+      resolvedData,
+      rowHeight,
+      scale,
+      showToday,
+      taskLabelWidth,
+      timelineHeight
+    ]
+  );
+  const activeId = resolvedSelectedId ?? hoveredId;
+  const selectTask = (task) => {
+    if (selectableRef.current && !task.task.disabled) {
+      const nextId = resolvedSelectedIdRef.current === task.id ? null : task.id;
+      if (selectedIdRef.current === void 0) setInnerSelectedId(nextId);
+      onSelectedIdChangeRef.current?.(nextId);
+    }
+    onTaskClickRef.current?.(task.task);
+  };
+  const setHoveredTask = (task) => {
+    if (!hoverable) return;
+    setHoveredId(task?.id ?? null);
+    onTaskHover?.(task?.task ?? null);
+  };
+  const getTaskOpacity = (task) => {
+    if (activeId === null) return activeOpacity;
+    return activeId === task.id ? activeOpacity : inactiveOpacity;
+  };
+  const pointerScale = (currentTarget) => {
+    const svg = currentTarget instanceof SVGElement ? currentTarget.ownerSVGElement ?? currentTarget.closest("svg") : currentTarget instanceof Element ? currentTarget.closest("svg") : null;
+    const clientWidth = svg?.clientWidth ?? 0;
+    if (!(clientWidth > 0)) return 1;
+    const viewBoxWidth = svg?.viewBox?.baseVal?.width;
+    const resolvedViewBox = typeof viewBoxWidth === "number" && viewBoxWidth > 0 ? viewBoxWidth : width;
+    return resolvedViewBox / clientWidth;
+  };
+  const captureBarPointer = (target, pointerId) => {
+    if (!(target instanceof Element) || typeof target.setPointerCapture !== "function") return;
+    try {
+      target.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const releaseBarPointer = (target, pointerId) => {
+    if (!target || typeof target.releasePointerCapture !== "function") return;
+    try {
+      target.releasePointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const moveBarDrag = (event) => {
+    const session = dragSessionRef.current;
+    if (!session || event.pointerId !== session.pointerId) return;
+    const rawDelta = (event.clientX - session.startClientX) * session.scale;
+    const deltaX = clampGanttDragDeltaX(
+      rawDelta,
+      session.barX,
+      session.barWidth,
+      session.taskLabelWidth,
+      session.layoutWidth
+    );
+    session.deltaX = deltaX;
+    setDragPreview({ id: session.task.id, deltaX });
+  };
+  const detachDocumentPointerListeners = () => {
+    if (!documentPointerListeningRef.current || !isBrowser()) return;
+    document.removeEventListener("pointermove", onDocumentPointerMove);
+    document.removeEventListener("pointerup", onDocumentPointerEnd);
+    document.removeEventListener("pointercancel", onDocumentPointerEnd);
+    documentPointerListeningRef.current = false;
+  };
+  const finishBarDrag = (event) => {
+    const session = dragSessionRef.current;
+    if (!session || event.pointerId !== session.pointerId) return;
+    moveBarDrag(event);
+    const deltaX = session.deltaX;
+    dragSessionRef.current = null;
+    setDragPreview(null);
+    detachDocumentPointerListeners();
+    releaseBarPointer(session.captureTarget, session.pointerId);
+    suppressClickRef.current = true;
+    if (Math.abs(deltaX) < GANTT_BAR_CLICK_PX) {
+      selectTask(session.task);
+      return;
+    }
+    const nextTask = moveGanttTaskByPx(session.sourceTask, deltaX, {
+      minMs: session.minMs,
+      maxMs: session.maxMs,
+      timelineWidth: session.timelineWidth
+    });
+    if (ganttDateValuesEqual(nextTask.start, session.sourceTask.start) && ganttDateValuesEqual(nextTask.end, session.sourceTask.end)) {
+      selectTask(session.task);
+      return;
+    }
+    const incoming = dataRef.current.find((item) => item.id === nextTask.id);
+    const previous = dateOverlayRef.current.get(nextTask.id);
+    const nextOverlay = new Map(dateOverlayRef.current);
+    nextOverlay.set(nextTask.id, {
+      start: nextTask.start,
+      end: nextTask.end,
+      baseStart: previous?.baseStart ?? incoming?.start ?? session.sourceTask.start,
+      baseEnd: previous?.baseEnd ?? incoming?.end ?? session.sourceTask.end
+    });
+    setDateOverlay(nextOverlay);
+    const nextData = applyGanttTaskDateOverlay(dataRef.current, nextOverlay);
+    onTaskChangeRef.current?.(nextTask);
+    onDataChangeRef.current?.(nextData);
+  };
+  dragFnsRef.current.move = moveBarDrag;
+  dragFnsRef.current.finish = finishBarDrag;
+  const attachDocumentPointerListeners = () => {
+    if (documentPointerListeningRef.current || !isBrowser()) return;
+    document.addEventListener("pointermove", onDocumentPointerMove);
+    document.addEventListener("pointerup", onDocumentPointerEnd);
+    document.addEventListener("pointercancel", onDocumentPointerEnd);
+    documentPointerListeningRef.current = true;
+  };
+  const startBarDrag = (event, task) => {
+    if (task.task.disabled || dragSessionRef.current) return;
+    if (event.button !== void 0 && event.button !== 0) return;
+    event.preventDefault();
+    const captureTarget = event.currentTarget instanceof Element ? event.currentTarget : null;
+    dragSessionRef.current = {
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      scale: pointerScale(event.currentTarget),
+      task,
+      sourceTask: task.task,
+      barX: task.x,
+      barWidth: task.width,
+      taskLabelWidth,
+      layoutWidth: layout.width,
+      minMs: layout.minMs,
+      maxMs: layout.maxMs,
+      timelineWidth: layout.timelineWidth,
+      deltaX: 0,
+      captureTarget
+    };
+    setDragPreview({ id: task.id, deltaX: 0 });
+    captureBarPointer(event.currentTarget, event.pointerId);
+    attachDocumentPointerListeners();
+  };
+  const handleBarClick = (event, task) => {
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    selectTask(task);
+  };
+  return /* @__PURE__ */ jsx(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      role: "img",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs("g", { "data-series-type": "gantt", children: [
+        /* @__PURE__ */ jsxs("g", { "data-gantt-axis": "true", children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: taskLabelWidth,
+              x2: layout.width,
+              y1: timelineHeight - 1,
+              y2: timelineHeight - 1,
+              stroke: "var(--tiger-border,#d1d5db)"
+            }
+          ),
+          layout.ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: tick.x,
+                x2: tick.x,
+                y1: 0,
+                y2: layout.height,
+                stroke: "var(--tiger-border,#e5e7eb)"
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: tick.x + 4, y: 16, className: ganttAxisTextClasses, children: tick.label })
+          ] }, `${tick.label}-${tick.x}`))
+        ] }),
+        /* @__PURE__ */ jsx("g", { "data-gantt-rows": "true", children: layout.tasks.map((task) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: timelineHeight + task.index * rowHeight,
+            width: layout.width,
+            height: rowHeight,
+            className: task.index % 2 === 0 ? ganttRowClasses : void 0,
+            opacity: task.index % 2 === 0 ? 0.75 : 0
+          },
+          `row-${task.id}`
+        )) }),
+        showToday && layout.todayX !== null ? /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: layout.todayX,
+            x2: layout.todayX,
+            y1: 0,
+            y2: layout.height,
+            className: ganttTodayLineClasses,
+            "data-gantt-today": "true"
+          }
+        ) : null,
+        showDependencies ? /* @__PURE__ */ jsx("g", { "data-gantt-dependencies": "true", children: layout.dependencies.map((dependency) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: dependency.path,
+            className: ganttDependencyClasses
+          },
+          `${dependency.sourceId}-${dependency.targetId}`
+        )) }) : null,
+        /* @__PURE__ */ jsx("g", { "data-gantt-tasks": "true", children: layout.tasks.map((task) => {
+          const selected = resolvedSelectedId === task.id;
+          const interactive = (hoverable || selectable) && !task.task.disabled;
+          const movable = !task.task.disabled;
+          const grabbing = dragPreview?.id === task.id;
+          const previewDeltaX = grabbing ? dragPreview?.deltaX ?? 0 : 0;
+          return /* @__PURE__ */ jsxs("g", { opacity: getTaskOpacity(task), children: [
+            /* @__PURE__ */ jsx("text", { x: 0, y: task.y + task.height / 2 + 4, className: ganttLabelClasses, children: task.task.label }),
+            /* @__PURE__ */ jsxs(
+              "g",
+              {
+                className: getGanttTaskClasses(interactive, selected, movable, grabbing),
+                role: interactive ? "button" : "group",
+                tabIndex: interactive ? 0 : void 0,
+                "aria-label": getGanttTaskAriaLabel(task.task),
+                "data-gantt-task-id": task.id,
+                transform: previewDeltaX !== 0 ? `translate(${previewDeltaX} 0)` : void 0,
+                onMouseEnter: () => setHoveredTask(task),
+                onMouseLeave: () => setHoveredTask(null),
+                onPointerDown: (event) => startBarDrag(event, task),
+                onPointerMove: (event) => moveBarDrag(event.nativeEvent),
+                onPointerUp: (event) => finishBarDrag(event.nativeEvent),
+                onPointerCancel: (event) => finishBarDrag(event.nativeEvent),
+                onClick: (event) => handleBarClick(event, task),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    selectTask(task);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: task.x,
+                      y: task.y,
+                      width: task.width,
+                      height: task.height,
+                      rx: 4,
+                      fill: task.color,
+                      stroke: selected ? "var(--tiger-text,#111827)" : void 0,
+                      strokeWidth: selected ? 2 : void 0
+                    }
+                  ),
+                  showProgress && task.progressWidth > 0 ? /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: task.x,
+                      y: task.y,
+                      width: task.progressWidth,
+                      height: task.height,
+                      rx: 4,
+                      className: ganttProgressClasses
+                    }
+                  ) : null
+                ]
+              }
+            )
+          ] }, task.id);
+        }) })
+      ] })
+    }
+  );
+}
+Gantt.displayName = "Gantt";
+
+export {
+  Gantt
+};