@accelint/design-toolkit 9.9.2 → 9.10.0

package/dist/components/gantt/components/content-row/icon-marker.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { GANTT_ROW_ELEMENT_HEIGHT_PX } from "../../constants.js";
+import { Point } from "../base-elements/point.js";
+import { useIsElapsed } from "./use-is-elapsed/index.js";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/gantt/components/content-row/icon-marker.tsx
+/** Point marker that displays a custom icon at a specific timestamp. Pass an icon element as `children`. */
+function GanttIconMarker({ children, color = "accent", ...rest }) {
+	const isElapsed = useIsElapsed({ timeMs: rest.timeMs });
+	return /* @__PURE__ */ jsx(Point, {
+		className: styles["marker-container"],
+		"data-height": GANTT_ROW_ELEMENT_HEIGHT_PX,
+		"data-elapsed": isElapsed || void 0,
+		color,
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			className: styles["marker-icon"],
+			"data-color": color,
+			"data-elapsed": isElapsed || void 0,
+			children
+		})
+	});
+}
+
+//#endregion
+export { GanttIconMarker };
+//# sourceMappingURL=icon-marker.js.map

package/dist/components/gantt/components/content-row/icon-marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-marker.js","names":[],"sources":["../../../../../src/components/gantt/components/content-row/icon-marker.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { GANTT_ROW_ELEMENT_HEIGHT_PX } from '../../constants';\nimport { Point, type PointProps } from '../base-elements/point';\nimport styles from './styles.module.css';\nimport { useIsElapsed } from './use-is-elapsed';\nimport type { PropsWithChildren } from 'react';\n\ntype GanttIconMarkerProps = PropsWithChildren<PointProps>;\n\n/** Point marker that displays a custom icon at a specific timestamp. Pass an icon element as `children`. */\nexport function GanttIconMarker({\n  children,\n  color = 'accent',\n  ...rest\n}: GanttIconMarkerProps) {\n  const isElapsed = useIsElapsed({ timeMs: rest.timeMs });\n\n  return (\n    <Point\n      className={styles['marker-container']}\n      data-height={GANTT_ROW_ELEMENT_HEIGHT_PX}\n      data-elapsed={isElapsed || undefined}\n      color={color}\n      {...rest}\n    >\n      <span\n        className={styles['marker-icon']}\n        data-color={color}\n        data-elapsed={isElapsed || undefined}\n      >\n        {children}\n      </span>\n    </Point>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,gBAAgB,EAC9B,UACA,QAAQ,UACR,GAAG,QACoB;CACvB,MAAM,YAAY,aAAa,EAAE,QAAQ,KAAK,QAAQ,CAAC;AAEvD,QACE,oBAAC;EACC,WAAW,OAAO;EAClB,eAAa;EACb,gBAAc,aAAa;EACpB;EACP,GAAI;YAEJ,oBAAC;GACC,WAAW,OAAO;GAClB,cAAY;GACZ,gBAAc,aAAa;GAE1B;IACI;GACD"}

package/dist/components/gantt/components/content-row/index.d.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { PropsWithChildren } from "react";
+import * as react_jsx_runtime202 from "react/jsx-runtime";
+
+//#region src/components/gantt/components/content-row/index.d.ts
+/** Row wrapper for content-side elements (blocks, markers, spacers, brackets). Paired 1:1 with `GanttPanelRow`. */
+declare function GanttContentRow({
+  children,
+  ...rest
+}: PropsWithChildren): react_jsx_runtime202.JSX.Element;
+//#endregion
+export { GanttContentRow };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/gantt/components/content-row/index.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { useGanttContext } from "../../context/index.js";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/gantt/components/content-row/index.tsx
+/** Row wrapper for content-side elements (blocks, markers, spacers, brackets). Paired 1:1 with `GanttPanelRow`. */
+function GanttContentRow({ children, ...rest }) {
+	const { rowHeightPx } = useGanttContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: styles["row-container"],
+		"data-height": rowHeightPx,
+		...rest,
+		children
+	});
+}
+
+//#endregion
+export { GanttContentRow };
+//# sourceMappingURL=index.js.map

package/dist/components/gantt/components/content-row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/gantt/components/content-row/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { useGanttContext } from '../../context';\nimport styles from './styles.module.css';\nimport type { PropsWithChildren } from 'react';\n\n/** Row wrapper for content-side elements (blocks, markers, spacers, brackets). Paired 1:1 with `GanttPanelRow`. */\nexport function GanttContentRow({ children, ...rest }: PropsWithChildren) {\n  const { rowHeightPx } = useGanttContext();\n\n  return (\n    <div\n      className={styles['row-container']}\n      data-height={rowHeightPx}\n      // spread props, including virtualizer-augmented style prop, if used\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,SAAgB,gBAAgB,EAAE,UAAU,GAAG,QAA2B;CACxE,MAAM,EAAE,gBAAgB,iBAAiB;AAEzC,QACE,oBAAC;EACC,WAAW,OAAO;EAClB,eAAa;EAEb,GAAI;EAEH;GACG"}

package/dist/components/gantt/components/content-row/marker.d.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { PointProps } from "../base-elements/point.js";
+import * as react_jsx_runtime208 from "react/jsx-runtime";
+
+//#region src/components/gantt/components/content-row/marker.d.ts
+/** Point marker rendered as a vertical line with a dot at a specific timestamp on the timeline. */
+declare function GanttMarker(props: PointProps): react_jsx_runtime208.JSX.Element;
+//#endregion
+export { GanttMarker };
+//# sourceMappingURL=marker.d.ts.map

package/dist/components/gantt/components/content-row/marker.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { GANTT_ROW_ELEMENT_HEIGHT_PX } from "../../constants.js";
+import { Point } from "../base-elements/point.js";
+import { useIsElapsed } from "./use-is-elapsed/index.js";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/gantt/components/content-row/marker.tsx
+/** Point marker rendered as a vertical line with a dot at a specific timestamp on the timeline. */
+function GanttMarker(props) {
+	const isElapsed = useIsElapsed({ timeMs: props.timeMs });
+	return /* @__PURE__ */ jsx(Point, {
+		className: styles["marker-container"],
+		"data-height": GANTT_ROW_ELEMENT_HEIGHT_PX,
+		"data-elapsed": isElapsed || void 0,
+		...props,
+		children: /* @__PURE__ */ jsx("div", { className: styles["marker-point"] })
+	});
+}
+
+//#endregion
+export { GanttMarker };
+//# sourceMappingURL=marker.js.map

package/dist/components/gantt/components/content-row/marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.js","names":[],"sources":["../../../../../src/components/gantt/components/content-row/marker.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { GANTT_ROW_ELEMENT_HEIGHT_PX } from '../../constants';\nimport { Point, type PointProps } from '../base-elements/point';\nimport styles from './styles.module.css';\nimport { useIsElapsed } from './use-is-elapsed';\n\n/** Point marker rendered as a vertical line with a dot at a specific timestamp on the timeline. */\nexport function GanttMarker(props: PointProps) {\n  const isElapsed = useIsElapsed({ timeMs: props.timeMs });\n\n  return (\n    <Point\n      className={styles['marker-container']}\n      data-height={GANTT_ROW_ELEMENT_HEIGHT_PX}\n      data-elapsed={isElapsed || undefined}\n      {...props}\n    >\n      <div className={styles['marker-point']} />\n    </Point>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,YAAY,OAAmB;CAC7C,MAAM,YAAY,aAAa,EAAE,QAAQ,MAAM,QAAQ,CAAC;AAExD,QACE,oBAAC;EACC,WAAW,OAAO;EAClB,eAAa;EACb,gBAAc,aAAa;EAC3B,GAAI;YAEJ,oBAAC,SAAI,WAAW,OAAO,kBAAmB;GACpC"}

package/dist/components/gantt/components/content-row/spacer.d.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { RangeProps } from "../base-elements/range.js";
+import * as react_jsx_runtime209 from "react/jsx-runtime";
+
+//#region src/components/gantt/components/content-row/spacer.d.ts
+/** Props for the GanttSpacer component. Inherits RangeProps except className. */
+type GanttSpacerProps = Omit<RangeProps, 'className'>;
+/** Time-range connector line between visible elements on the timeline. */
+declare function GanttSpacer(props: GanttSpacerProps): react_jsx_runtime209.JSX.Element;
+//#endregion
+export { GanttSpacer, GanttSpacerProps };
+//# sourceMappingURL=spacer.d.ts.map

package/dist/components/gantt/components/content-row/spacer.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { Range } from "../base-elements/range.js";
+import { useElapsedPercentage } from "./use-elapsed-percentage/index.js";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/gantt/components/content-row/spacer.tsx
+/** Time-range connector line between visible elements on the timeline. */
+function GanttSpacer(props) {
+	const elapsedPct = useElapsedPercentage({
+		startMs: props.startTimeMs,
+		endMs: props.endTimeMs
+	});
+	return /* @__PURE__ */ jsx(Range, {
+		...props,
+		className: styles["row-spacer"],
+		"data-elapsed-pct": elapsedPct
+	});
+}
+
+//#endregion
+export { GanttSpacer };
+//# sourceMappingURL=spacer.js.map

package/dist/components/gantt/components/content-row/spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.js","names":[],"sources":["../../../../../src/components/gantt/components/content-row/spacer.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Range, type RangeProps } from '../base-elements/range';\nimport styles from './styles.module.css';\nimport { useElapsedPercentage } from './use-elapsed-percentage';\n\n/** Props for the GanttSpacer component. Inherits RangeProps except className. */\nexport type GanttSpacerProps = Omit<RangeProps, 'className'>;\n\n/** Time-range connector line between visible elements on the timeline. */\nexport function GanttSpacer(props: GanttSpacerProps) {\n  const elapsedPct = useElapsedPercentage({\n    startMs: props.startTimeMs,\n    endMs: props.endTimeMs,\n  });\n\n  return (\n    <Range\n      {...props}\n      className={styles['row-spacer']}\n      data-elapsed-pct={elapsedPct}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,YAAY,OAAyB;CACnD,MAAM,aAAa,qBAAqB;EACtC,SAAS,MAAM;EACf,OAAO,MAAM;EACd,CAAC;AAEF,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,OAAO;EAClB,oBAAkB;GAClB"}

package/dist/components/gantt/components/content-row/styles.module.css

@@ -0,0 +1,198 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '@accelint/design-foundation/styles';
+
+@utility bracket-pseudo-base {
+  @apply rounded-small absolute border border-current border-t-transparent border-b-transparent border-l-transparent content-[''];
+  left: 4px;
+}
+
+@layer components.l1 {
+  .row-container {
+    --height: attr(data-height px);
+    --row-padding: 4.5px;
+    --element-height: calc(100% - calc(var(--row-padding) * 2));
+
+    @apply relative flex items-center border-b;
+    padding-block: var(--row-padding);
+    height: var(--height);
+    border-color: var(--outline-static);
+
+    & .row-block,
+    & .bracket-container,
+    & .marker-container {
+      height: var(--element-height);
+    }
+  }
+
+  .row-block {
+    --block-height: attr(data-height px);
+    --elapsed-pct: attr(data-elapsed-pct %);
+    --bg-color: var(--bg-interactive-muted);
+    --outline-color: var(--outline-interactive);
+    --elapsed-color: var(--bg-interactive-muted);
+
+    @apply rounded-small p-xs absolute flex flex-nowrap items-center overflow-hidden whitespace-nowrap;
+
+    height: var(--block-height);
+    border: 1px solid transparent;
+    background:
+      linear-gradient(
+          to right,
+          var(--elapsed-color) var(--elapsed-pct, 0%),
+          var(--bg-color) var(--elapsed-pct, 0%)
+        )
+        padding-box,
+      linear-gradient(
+          to right,
+          var(--elapsed-color) var(--elapsed-pct, 0%),
+          var(--outline-color) var(--elapsed-pct, 0%)
+        )
+        border-box;
+
+    @variant color-accent {
+      --bg-color: var(--bg-accent-primary-muted);
+      --outline-color: var(--outline-accent-primary-bold);
+    }
+
+    @variant color-serious {
+      --bg-color: var(--bg-serious-muted);
+      --outline-color: var(--outline-serious-bold);
+    }
+
+    @variant color-critical {
+      --bg-color: var(--bg-critical-muted);
+      --outline-color: var(--outline-critical-bold);
+    }
+  }
+
+  .row-spacer {
+    --elapsed-pct: attr(data-elapsed-pct %);
+
+    @apply absolute h-px;
+    transform: translateX(var(--translate-x));
+    width: var(--width);
+    background: linear-gradient(
+      to right,
+      var(--fg-inverse-muted) var(--elapsed-pct, 0%),
+      currentColor var(--elapsed-pct, 0%)
+    );
+
+    @variant color-accent {
+      @apply fg-accent-primary-bold;
+    }
+
+    @variant color-serious {
+      @apply fg-serious-bold;
+    }
+
+    @variant color-critical {
+      @apply fg-critical-bold;
+    }
+  }
+
+  .bracket-container {
+    @apply absolute;
+
+    --rotate: attr(data-rotate deg);
+    transform: translateX(var(--translate-x)) rotate(var(--rotate));
+
+    &[data-elapsed] {
+      @apply fg-inverse-muted;
+    }
+
+    &::before {
+      @apply bracket-pseudo-base -top-px rotate-45;
+    }
+
+    &::after {
+      @apply bracket-pseudo-base -bottom-px -rotate-45;
+    }
+
+    @variant color-accent {
+      @apply fg-accent-primary-bold;
+    }
+
+    @variant color-serious {
+      @apply fg-serious-bold;
+    }
+
+    @variant color-critical {
+      @apply fg-critical-bold;
+    }
+  }
+
+  .bracket {
+    @apply rounded-bl-small rounded-tl-small absolute left-0 h-full border border-r-transparent border-b-current bg-transparent;
+    width: 6px;
+  }
+
+  .marker-container {
+    @apply absolute flex w-px items-center justify-center border-solid border-current bg-current;
+    /* Ensure the marker is displayed above other elements (like spacers) that may
+       be rendered at same point in time */
+    z-index: 1;
+    min-height: attr(data-height px);
+    transform: translateX(var(--translate-x));
+
+    &[data-elapsed] {
+      @apply fg-inverse-muted;
+    }
+
+    @variant color-accent {
+      @apply fg-accent-primary-bold;
+    }
+
+    @variant color-serious {
+      @apply fg-serious-bold;
+    }
+
+    @variant color-critical {
+      @apply fg-critical-bold;
+    }
+  }
+
+  .marker-point {
+    @apply absolute rounded-full bg-current;
+    width: 3px;
+    height: 3px;
+  }
+
+  .marker-icon {
+    @apply outline outline-transparent;
+    border-radius: 50%;
+    border: 2px solid currentColor;
+
+    > * {
+      @apply fg-primary-bold;
+      /* Scale the icon down to provide some spacing */
+      transform: scale(0.6);
+    }
+
+    &[data-elapsed] {
+      @apply bg-interactive-muted;
+    }
+
+    @variant color-accent {
+      @apply bg-accent-primary-muted;
+    }
+
+    @variant color-serious {
+      @apply bg-serious-muted;
+    }
+
+    @variant color-critical {
+      @apply bg-critical-muted;
+    }
+  }
+}

package/dist/components/gantt/components/content-row/use-elapsed-percentage/index.d.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { GanttTimeBounds } from "../../../types.js";
+
+//#region src/components/gantt/components/content-row/use-elapsed-percentage/index.d.ts
+declare function useElapsedPercentage(props: GanttTimeBounds): number;
+//#endregion
+export { useElapsedPercentage };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/gantt/components/content-row/use-elapsed-percentage/index.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { useTemporalDataContext } from "../../../context/temporal-data/index.js";
+
+//#region src/components/gantt/components/content-row/use-elapsed-percentage/index.ts
+function useElapsedPercentage(props) {
+	const { currentTimeMs, renderedRegionBounds } = useTemporalDataContext();
+	const startMs = Math.max(props.startMs, renderedRegionBounds.startMs);
+	const totalDuration = Math.min(props.endMs, renderedRegionBounds.endMs) - startMs;
+	if (totalDuration <= 0) return 0;
+	return Math.max(0, Math.min(currentTimeMs - startMs, totalDuration)) / totalDuration * 100;
+}
+
+//#endregion
+export { useElapsedPercentage };
+//# sourceMappingURL=index.js.map

package/dist/components/gantt/components/content-row/use-elapsed-percentage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/gantt/components/content-row/use-elapsed-percentage/index.ts"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { useTemporalDataContext } from '@/components/gantt/context/temporal-data';\nimport type { GanttTimeBounds } from '@/components/gantt/types';\n\nexport function useElapsedPercentage(props: GanttTimeBounds): number {\n  const { currentTimeMs, renderedRegionBounds } = useTemporalDataContext();\n\n  const startMs = Math.max(props.startMs, renderedRegionBounds.startMs);\n  const endMs = Math.min(props.endMs, renderedRegionBounds.endMs);\n\n  const totalDuration = endMs - startMs;\n  if (totalDuration <= 0) {\n    return 0;\n  }\n\n  const elapsed = Math.max(0, Math.min(currentTimeMs - startMs, totalDuration));\n  return (elapsed / totalDuration) * 100;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,eAAe,yBAAyB,wBAAwB;CAExE,MAAM,UAAU,KAAK,IAAI,MAAM,SAAS,qBAAqB,QAAQ;CAGrE,MAAM,gBAFQ,KAAK,IAAI,MAAM,OAAO,qBAAqB,MAAM,GAEjC;AAC9B,KAAI,iBAAiB,EACnB,QAAO;AAIT,QADgB,KAAK,IAAI,GAAG,KAAK,IAAI,gBAAgB,SAAS,cAAc,CAAC,GAC3D,gBAAiB"}

package/dist/components/gantt/components/content-row/use-is-elapsed/index.d.ts

@@ -0,0 +1,10 @@
+//#region src/components/gantt/components/content-row/use-is-elapsed/index.d.ts
+type UseIsElapsedProps = {
+  timeMs: number | undefined;
+};
+declare function useIsElapsed({
+  timeMs
+}: UseIsElapsedProps): boolean;
+//#endregion
+export { useIsElapsed };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/gantt/components/content-row/use-is-elapsed/index.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { useTemporalDataContext } from "../../../context/temporal-data/index.js";
+
+//#region src/components/gantt/components/content-row/use-is-elapsed/index.ts
+function useIsElapsed({ timeMs }) {
+	const { currentTimeMs } = useTemporalDataContext();
+	return timeMs !== void 0 && timeMs <= currentTimeMs;
+}
+
+//#endregion
+export { useIsElapsed };
+//# sourceMappingURL=index.js.map

package/dist/components/gantt/components/content-row/use-is-elapsed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/gantt/components/content-row/use-is-elapsed/index.ts"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { useTemporalDataContext } from '../../../context/temporal-data';\n\ntype UseIsElapsedProps = {\n  timeMs: number | undefined;\n};\n\nexport function useIsElapsed({ timeMs }: UseIsElapsedProps): boolean {\n  const { currentTimeMs } = useTemporalDataContext();\n\n  return timeMs !== undefined && timeMs <= currentTimeMs;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,SAAgB,aAAa,EAAE,UAAsC;CACnE,MAAM,EAAE,kBAAkB,wBAAwB;AAElD,QAAO,WAAW,UAAa,UAAU"}

package/dist/components/gantt/components/current-time/index.d.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import * as react_jsx_runtime210 from "react/jsx-runtime";
+
+//#region src/components/gantt/components/current-time/index.d.ts
+/**
+ * Needed because parent component does not have access to
+ * Gantt context. Need renderedRegionBounds for conditional
+ * rendering calculation.
+ */
+declare function CurrentTime({
+  currentTimeMs
+}: {
+  currentTimeMs: number;
+}): react_jsx_runtime210.JSX.Element | null;
+//#endregion
+export { CurrentTime };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/gantt/components/current-time/index.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { GANTT_CONTAINER_TOP_PX } from "../../constants.js";
+import { shouldRenderCurrentTime } from "../../utils/helpers.js";
+import { useTemporalDataContext } from "../../context/temporal-data/index.js";
+import { formatTimestampLabel } from "../../utils/formatting.js";
+import { useCurrentTimeLayout } from "./use-current-time-layout/index.js";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/gantt/components/current-time/index.tsx
+function CurrentTimeInner({ currentTimeMs }) {
+	const [element, setElement] = useState(null);
+	const indicatorElementRef = useRef(null);
+	const { labelElementRef } = useCurrentTimeLayout({
+		currentTimeElement: element,
+		currentTimeMs,
+		indicatorElement: indicatorElementRef.current
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useCallback((node) => {
+			setElement(node);
+		}, []),
+		className: styles["current-time-marker"],
+		"data-top": GANTT_CONTAINER_TOP_PX,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: labelElementRef,
+			className: styles["current-time-label"],
+			children: /* @__PURE__ */ jsx("span", { children: formatTimestampLabel(currentTimeMs) })
+		}), /* @__PURE__ */ jsx("div", {
+			ref: indicatorElementRef,
+			className: styles["current-time-indicator"]
+		})]
+	});
+}
+function useDisplayCurrentTime(currentTimeMs) {
+	const { renderedRegionBounds } = useTemporalDataContext();
+	return shouldRenderCurrentTime(currentTimeMs, renderedRegionBounds);
+}
+/**
+* Needed because parent component does not have access to
+* Gantt context. Need renderedRegionBounds for conditional
+* rendering calculation.
+*/
+function CurrentTime({ currentTimeMs }) {
+	return useDisplayCurrentTime(currentTimeMs) ? /* @__PURE__ */ jsx(CurrentTimeInner, { currentTimeMs }) : null;
+}
+
+//#endregion
+export { CurrentTime };
+//# sourceMappingURL=index.js.map

package/dist/components/gantt/components/current-time/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/gantt/components/current-time/index.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { useCallback, useRef, useState } from 'react';\nimport { GANTT_CONTAINER_TOP_PX } from '@/components/gantt/constants';\nimport { useTemporalDataContext } from '@/components/gantt/context/temporal-data';\nimport { formatTimestampLabel } from '@/components/gantt/utils/formatting';\nimport { shouldRenderCurrentTime } from '@/components/gantt/utils/helpers';\nimport styles from './styles.module.css';\nimport { useCurrentTimeLayout } from './use-current-time-layout';\n\nfunction CurrentTimeInner({ currentTimeMs }: { currentTimeMs: number }) {\n  const [element, setElement] = useState<HTMLDivElement | null>(null);\n  const indicatorElementRef = useRef<HTMLDivElement>(null);\n\n  const { labelElementRef } = useCurrentTimeLayout({\n    currentTimeElement: element,\n    currentTimeMs,\n    indicatorElement: indicatorElementRef.current,\n  });\n\n  const assignElementRef = useCallback((node: HTMLDivElement | null) => {\n    setElement(node);\n  }, []);\n\n  return (\n    <div\n      ref={assignElementRef}\n      className={styles['current-time-marker']}\n      data-top={GANTT_CONTAINER_TOP_PX}\n    >\n      <div ref={labelElementRef} className={styles['current-time-label']}>\n        <span>{formatTimestampLabel(currentTimeMs)}</span>\n      </div>\n      <div\n        ref={indicatorElementRef}\n        className={styles['current-time-indicator']}\n      />\n    </div>\n  );\n}\n\nfunction useDisplayCurrentTime(currentTimeMs: number) {\n  const { renderedRegionBounds } = useTemporalDataContext();\n\n  return shouldRenderCurrentTime(currentTimeMs, renderedRegionBounds);\n}\n\n/**\n * Needed because parent component does not have access to\n * Gantt context. Need renderedRegionBounds for conditional\n * rendering calculation.\n */\nexport function CurrentTime({ currentTimeMs }: { currentTimeMs: number }) {\n  const shouldDisplayCurrentTime = useDisplayCurrentTime(currentTimeMs);\n\n  return shouldDisplayCurrentTime ? (\n    <CurrentTimeInner currentTimeMs={currentTimeMs} />\n  ) : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAAS,iBAAiB,EAAE,iBAA4C;CACtE,MAAM,CAAC,SAAS,cAAc,SAAgC,KAAK;CACnE,MAAM,sBAAsB,OAAuB,KAAK;CAExD,MAAM,EAAE,oBAAoB,qBAAqB;EAC/C,oBAAoB;EACpB;EACA,kBAAkB,oBAAoB;EACvC,CAAC;AAMF,QACE,qBAAC;EACC,KANqB,aAAa,SAAgC;AACpE,cAAW,KAAK;KACf,EAAE,CAAC;EAKF,WAAW,OAAO;EAClB,YAAU;aAEV,oBAAC;GAAI,KAAK;GAAiB,WAAW,OAAO;aAC3C,oBAAC,oBAAM,qBAAqB,cAAc,GAAQ;IAC9C,EACN,oBAAC;GACC,KAAK;GACL,WAAW,OAAO;IAClB;GACE;;AAIV,SAAS,sBAAsB,eAAuB;CACpD,MAAM,EAAE,yBAAyB,wBAAwB;AAEzD,QAAO,wBAAwB,eAAe,qBAAqB;;;;;;;AAQrE,SAAgB,YAAY,EAAE,iBAA4C;AAGxE,QAFiC,sBAAsB,cAAc,GAGnE,oBAAC,oBAAgC,gBAAiB,GAChD"}