@powerhousedao/design-system 6.0.2-staging.8 → 6.1.0-dev.0

package/dist/document-timeline-BTTeXWMa.js

@@ -1,288 +0,0 @@
-import { h as Icon } from "./src-DTHkTkyy.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { twMerge } from "tailwind-merge";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Content, Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
-import { format, formatDistanceToNow, parseISO } from "date-fns";
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
-//#region src/connect/components/tooltip/tooltip.tsx
-function ConnectTooltip(props) {
-	const { children, content, open, defaultOpen, onOpenChange, className, side = "top", sideOffset = 5, delayDuration, ...rest } = props;
-	return /* @__PURE__ */ jsxs(Root, {
-		defaultOpen,
-		delayDuration,
-		onOpenChange,
-		open,
-		children: [/* @__PURE__ */ jsx(Trigger, {
-			asChild: true,
-			children
-		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
-			...rest,
-			side,
-			sideOffset,
-			className: twMerge("shadow-tooltip z-50 rounded-lg border border-gray-200 bg-white p-2 text-xs", className),
-			children: content
-		}) })]
-	});
-}
-const ConnectTooltipProvider = Provider;
-//#endregion
-//#region src/connect/components/document-timeline/components/h-divider.tsx
-const HDivider = (props) => {
-	const { className, timestampUtcMs: timestamp, title, subtitle, onClick, isSelected = false } = props;
-	const [open, setOpen] = useState(false);
-	const hasContent = !!title || !!subtitle || !!timestamp;
-	useEffect(() => {
-		if (open) {
-			setOpen(false);
-			setTimeout(() => hasContent && setOpen(true), 50);
-		}
-	}, [
-		title,
-		subtitle,
-		timestamp,
-		hasContent
-	]);
-	const formatTimestamp = (isoString) => {
-		if (!isoString) return "";
-		try {
-			return formatDistanceToNow(new Date(isoString), { addSuffix: true });
-		} catch {
-			return isoString;
-		}
-	};
-	const tooltipContent = /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col text-xs",
-		children: [
-			!!title && /* @__PURE__ */ jsx("div", { children: title }),
-			!!subtitle && /* @__PURE__ */ jsx("div", {
-				className: "text-gray-300",
-				children: subtitle
-			}),
-			!!timestamp && /* @__PURE__ */ jsx("div", { children: formatTimestamp(timestamp) })
-		]
-	});
-	const handleMouseEnter = () => {
-		if (hasContent) setOpen(true);
-	};
-	const handleMouseLeave = () => {
-		setOpen(false);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: [isSelected && /* @__PURE__ */ jsx(Icon, {
-			name: "TimelineCaret",
-			color: "#4EA9FF",
-			size: 10,
-			className: "absolute top-[-11px] z-40"
-		}), /* @__PURE__ */ jsx(ConnectTooltip, {
-			className: "rounded-md bg-gray-900 text-white",
-			content: tooltipContent,
-			open: open && hasContent,
-			onOpenChange: setOpen,
-			delayDuration: 0,
-			side: "bottom",
-			sideOffset: 5,
-			children: /* @__PURE__ */ jsx("div", {
-				className: twMerge("mx-0.5 flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", isSelected && "bg-blue-300", className),
-				onClick,
-				"data-title": title,
-				"data-subtitle": subtitle,
-				"data-timestamp": timestamp,
-				children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-1 rounded-full bg-gray-500" })
-			})
-		})]
-	});
-};
-//#endregion
-//#region src/connect/components/document-timeline/components/timeline-bar.tsx
-const getBarHeight = (size = 0) => {
-	switch (true) {
-		case size <= 0: return "h-[1px]";
-		case size === 1: return "h-[3px]";
-		case size === 2: return "h-[6px]";
-		case size === 3: return "h-[9px]";
-		case size >= 4: return "h-[12px]";
-		default: return "h-[1px]";
-	}
-};
-const formatTimestamp = (isoString) => {
-	if (!isoString) return "";
-	try {
-		return format(parseISO(isoString), "HH:mm, dd, MMMM");
-	} catch {
-		return isoString;
-	}
-};
-const TimelineBar = ({ onClick, className, timestampUtcMs: timestamp, additions, deletions, addSize = 0, delSize = 0, isSelected = false }) => {
-	const [open, setOpen] = useState(false);
-	const noChanges = addSize === 0 && delSize === 0;
-	const addBarHeight = getBarHeight(addSize);
-	const delBarHeight = getBarHeight(delSize);
-	const tooltipContent = /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col text-xs",
-		children: [
-			/* @__PURE__ */ jsx("div", { children: formatTimestamp(timestamp) }),
-			/* @__PURE__ */ jsx("div", {
-				className: "text-green-900",
-				children: `${additions} additions +`
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "text-red-700",
-				children: `${deletions} deletions -`
-			})
-		]
-	});
-	const handleMouseEnter = () => {
-		if (!noChanges) setOpen(true);
-	};
-	const handleMouseLeave = () => {
-		setOpen(false);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: [isSelected && /* @__PURE__ */ jsx(Icon, {
-			name: "TimelineCaret",
-			color: "#4EA9FF",
-			size: 10,
-			className: "absolute left-[-2px] top-[-11px] z-40"
-		}), noChanges ? /* @__PURE__ */ jsx("div", {
-			className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", className),
-			"data-timestamp": timestamp,
-			onClick,
-			children: /* @__PURE__ */ jsx("div", { className: "size-[3px] rounded-full bg-gray-500" })
-		}) : /* @__PURE__ */ jsx(ConnectTooltip, {
-			className: "rounded-md bg-gray-900 text-white",
-			content: tooltipContent,
-			open,
-			onOpenChange: setOpen,
-			delayDuration: 0,
-			side: "bottom",
-			sideOffset: 5,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", className, isSelected && "bg-blue-300"),
-				"data-timestamp": timestamp,
-				onClick,
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex h-3 w-0.5 items-end",
-					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-t-full bg-green-600", addBarHeight) })
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex h-3 w-0.5 items-start",
-					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-b-full bg-red-600", delBarHeight) })
-				})]
-			})
-		})]
-	});
-};
-//#endregion
-//#region src/connect/components/document-timeline/document-timeline.tsx
-var document_timeline_exports = /* @__PURE__ */ __exportAll({ DocumentTimeline: () => DocumentTimeline });
-const defaultTimeLineItem = {
-	id: "default",
-	type: "bar",
-	addSize: 0,
-	delSize: 0
-};
-const DocumentTimeline = (props) => {
-	const { timeline = [], onItemClick } = props;
-	const [selectedItem, setSelectedItem] = useState(null);
-	const scrollContainerRef = useRef(null);
-	const handleClick = (item) => {
-		if (item.id === selectedItem || item.id === defaultTimeLineItem.id) {
-			onItemClick?.(null);
-			setSelectedItem(null);
-		} else {
-			onItemClick?.(item);
-			setSelectedItem(item.id);
-		}
-	};
-	const mergedTimelineItems = [...timeline, defaultTimeLineItem];
-	const [unselectedItems, selectedItems] = useMemo(() => {
-		const indexSelected = mergedTimelineItems.findIndex((item) => item.id === selectedItem);
-		return indexSelected === -1 ? [mergedTimelineItems, []] : [mergedTimelineItems.slice(0, indexSelected), mergedTimelineItems.slice(indexSelected)];
-	}, [mergedTimelineItems, selectedItem]);
-	const renderTimelineItems = useCallback((items) => {
-		return items.map((item) => {
-			if (item.type === "divider") {
-				const { timestampUtcMs, title, subtitle } = item;
-				return /* @__PURE__ */ jsx(HDivider, {
-					timestampUtcMs,
-					title,
-					subtitle,
-					onClick: () => handleClick(item),
-					isSelected: item.id === selectedItem
-				}, item.id);
-			}
-			return /* @__PURE__ */ jsx(TimelineBar, {
-				timestampUtcMs: item.timestampUtcMs,
-				addSize: item.addSize,
-				delSize: item.delSize,
-				additions: item.additions,
-				deletions: item.deletions,
-				isSelected: item.id === selectedItem,
-				onClick: () => handleClick(item)
-			}, item.id);
-		});
-	}, [handleClick, selectedItem]);
-	const unselectedContent = useMemo(() => renderTimelineItems(unselectedItems), [unselectedItems, renderTimelineItems]);
-	const selectedContent = useMemo(() => renderTimelineItems(selectedItems), [selectedItems, renderTimelineItems]);
-	useEffect(() => {
-		if (scrollContainerRef.current) scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
-	}, []);
-	return /* @__PURE__ */ jsx(ConnectTooltipProvider, {
-		delayDuration: 0,
-		skipDelayDuration: 0,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative h-[36px] w-full",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "absolute left-[0px] z-[20] h-[17px] w-[6px] bg-white",
-					children: /* @__PURE__ */ jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-slate-50" })
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "absolute right-[0px] top-[11px] z-[20] h-[6px] w-[6px] bg-white",
-					children: /* @__PURE__ */ jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-slate-50" })
-				}),
-				/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-slate-50" }),
-				/* @__PURE__ */ jsx("div", {
-					className: "absolute inset-x-0 bottom-0 h-[36px]",
-					children: /* @__PURE__ */ jsx("div", {
-						ref: scrollContainerRef,
-						className: "h-full overflow-x-auto rounded-md",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "ml-auto flex h-[36px] w-max items-end px-2 pb-0",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "flex",
-								children: unselectedContent
-							}), /* @__PURE__ */ jsx("div", {
-								className: "flex rounded-sm bg-blue-200",
-								children: selectedContent
-							})]
-						})
-					})
-				}),
-				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-slate-50" }),
-				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 right-0 z-10 h-[25px] w-2 rounded-r-md bg-slate-50" })
-			]
-		})
-	});
-};
-//#endregion
-export { ConnectTooltipProvider as i, document_timeline_exports as n, ConnectTooltip as r, DocumentTimeline as t };
-
-//# sourceMappingURL=document-timeline-BTTeXWMa.js.map

package/dist/document-timeline-BTTeXWMa.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"document-timeline-BTTeXWMa.js","names":["Content","Portal","Provider","Root","Trigger","twMerge","ConnectTooltip","props","children","content","open","defaultOpen","onOpenChange","className","side","sideOffset","delayDuration","rest","ConnectTooltipProvider","Icon","formatDistanceToNow","useEffect","useState","twMerge","ConnectTooltip","HDivider","props","className","timestampUtcMs","timestamp","title","subtitle","onClick","isSelected","open","setOpen","hasContent","setTimeout","formatTimestamp","isoString","Date","addSuffix","tooltipContent","handleMouseEnter","handleMouseLeave","Icon","format","parseISO","useState","twMerge","ConnectTooltip","getBarHeight","size","formatTimestamp","isoString","date","TimelineBar","onClick","className","timestampUtcMs","timestamp","additions","deletions","addSize","delSize","isSelected","open","setOpen","noChanges","addBarHeight","delBarHeight","tooltipContent","handleMouseEnter","handleMouseLeave","useCallback","useEffect","useMemo","useRef","useState","ConnectTooltipProvider","HDivider","TimelineBar","defaultTimeLineItem","id","type","addSize","delSize","DocumentTimeline","props","timeline","onItemClick","selectedItem","setSelectedItem","scrollContainerRef","handleClick","item","mergedTimelineItems","unselectedItems","selectedItems","indexSelected","findIndex","slice","renderTimelineItems","items","map","timestampUtcMs","title","subtitle","additions","deletions","unselectedContent","selectedContent","current","scrollLeft","scrollWidth"],"sources":["../src/connect/components/tooltip/tooltip.tsx","../src/connect/components/document-timeline/components/h-divider.tsx","../src/connect/components/document-timeline/components/timeline-bar.tsx","../src/connect/components/document-timeline/document-timeline.tsx"],"sourcesContent":["import type { TooltipProps } from \"@radix-ui/react-tooltip\";\nimport {\n  Content,\n  Portal,\n  Provider,\n  Root,\n  Trigger,\n} from \"@radix-ui/react-tooltip\";\nimport type { ReactNode } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\ntype Props = TooltipProps & {\n  readonly className?: string;\n  readonly content: ReactNode;\n  readonly side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  readonly sideOffset?: number;\n};\n\nexport function ConnectTooltip(props: Props) {\n  const {\n    children,\n    content,\n    open,\n    defaultOpen,\n    onOpenChange,\n    className,\n    side = \"top\",\n    sideOffset = 5,\n    delayDuration,\n    ...rest\n  } = props;\n\n  return (\n    <Root\n      defaultOpen={defaultOpen}\n      delayDuration={delayDuration}\n      onOpenChange={onOpenChange}\n      open={open}\n    >\n      <Trigger asChild>{children}</Trigger>\n      <Portal>\n        <Content\n          {...rest}\n          side={side}\n          sideOffset={sideOffset}\n          className={twMerge(\n            \"shadow-tooltip z-50 rounded-lg border border-gray-200 bg-white p-2 text-xs\",\n            className,\n          )}\n        >\n          {content}\n        </Content>\n      </Portal>\n    </Root>\n  );\n}\n\nexport const ConnectTooltipProvider = Provider;\n","import { Icon } from \"#design-system\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { ConnectTooltip } from \"../../tooltip/tooltip.js\";\n\nexport interface HDividerProps {\n  className?: string;\n  timestampUtcMs?: string;\n  title?: string;\n  subtitle?: string;\n  onClick?: () => void;\n  isSelected?: boolean;\n}\n\nexport const HDivider = (props: HDividerProps) => {\n  const {\n    className,\n    timestampUtcMs: timestamp,\n    title,\n    subtitle,\n    onClick,\n    isSelected = false,\n  } = props;\n  const [open, setOpen] = useState<boolean>(false);\n  const hasContent = !!title || !!subtitle || !!timestamp;\n\n  // Force update tooltips when props change\n  useEffect(() => {\n    // Force close and re-open if already open to refresh content\n    if (open) {\n      setOpen(false);\n      setTimeout(() => hasContent && setOpen(true), 50);\n    }\n  }, [title, subtitle, timestamp, hasContent]);\n\n  const formatTimestamp = (isoString?: string) => {\n    if (!isoString) return \"\";\n    try {\n      return formatDistanceToNow(new Date(isoString), { addSuffix: true });\n    } catch {\n      return isoString;\n    }\n  };\n\n  const tooltipContent = (\n    <div className=\"flex flex-col text-xs\">\n      {!!title && <div>{title}</div>}\n      {!!subtitle && <div className=\"text-gray-300\">{subtitle}</div>}\n      {!!timestamp && <div>{formatTimestamp(timestamp)}</div>}\n    </div>\n  );\n\n  const handleMouseEnter = () => {\n    if (hasContent) {\n      setOpen(true);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setOpen(false);\n  };\n\n  return (\n    <div\n      className=\"relative\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {isSelected && (\n        <Icon\n          name=\"TimelineCaret\"\n          color=\"#4EA9FF\"\n          size={10}\n          className=\"absolute top-[-11px] z-40\"\n        />\n      )}\n      <ConnectTooltip\n        className=\"rounded-md bg-gray-900 text-white\"\n        content={tooltipContent}\n        open={open && hasContent}\n        onOpenChange={setOpen}\n        delayDuration={0}\n        side=\"bottom\"\n        sideOffset={5}\n      >\n        <div\n          className={twMerge(\n            \"mx-0.5 flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300\",\n            isSelected && \"bg-blue-300\",\n            className,\n          )}\n          onClick={onClick}\n          data-title={title}\n          data-subtitle={subtitle}\n          data-timestamp={timestamp}\n        >\n          <div className=\"h-0.5 w-1 rounded-full bg-gray-500\" />\n        </div>\n      </ConnectTooltip>\n    </div>\n  );\n};\n","import { Icon } from \"#design-system\";\nimport type { TimelineBarItem } from \"@powerhousedao/reactor-browser\";\nimport { format, parseISO } from \"date-fns\";\nimport { useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { ConnectTooltip } from \"../../tooltip/tooltip.js\";\n\nexport interface TimelineBarProps extends Omit<\n  TimelineBarItem,\n  \"id\" | \"type\" | \"revision\" | \"startDate\" | \"endDate\"\n> {\n  readonly className?: string;\n  onClick?: () => void;\n  isSelected?: boolean;\n}\n\nconst getBarHeight = (size = 0) => {\n  switch (true) {\n    case size <= 0:\n      return \"h-[1px]\";\n    case size === 1:\n      return \"h-[3px]\";\n    case size === 2:\n      return \"h-[6px]\";\n    case size === 3:\n      return \"h-[9px]\";\n    case size >= 4:\n      return \"h-[12px]\";\n    default:\n      return \"h-[1px]\";\n  }\n};\n\nconst formatTimestamp = (isoString?: string) => {\n  if (!isoString) return \"\";\n  try {\n    const date = parseISO(isoString);\n    return format(date, \"HH:mm, dd, MMMM\");\n  } catch {\n    return isoString;\n  }\n};\n\nexport const TimelineBar: React.FC<TimelineBarProps> = ({\n  onClick,\n  className,\n  timestampUtcMs: timestamp,\n  additions,\n  deletions,\n  addSize = 0,\n  delSize = 0,\n  isSelected = false,\n}) => {\n  const [open, setOpen] = useState<boolean>(false);\n  const noChanges = addSize === 0 && delSize === 0;\n\n  const addBarHeight = getBarHeight(addSize);\n  const delBarHeight = getBarHeight(delSize);\n\n  const tooltipContent = (\n    <div className=\"flex flex-col text-xs\">\n      <div>{formatTimestamp(timestamp)}</div>\n      <div className=\"text-green-900\">{`${additions} additions +`}</div>\n      <div className=\"text-red-700\">{`${deletions} deletions -`}</div>\n    </div>\n  );\n\n  const handleMouseEnter = () => {\n    if (!noChanges) {\n      setOpen(true);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setOpen(false);\n  };\n\n  return (\n    <div\n      className=\"relative\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {isSelected && (\n        <Icon\n          name=\"TimelineCaret\"\n          color=\"#4EA9FF\"\n          size={10}\n          className=\"absolute left-[-2px] top-[-11px] z-40\"\n        />\n      )}\n      {noChanges ? (\n        <div\n          className={twMerge(\n            \"flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300\",\n            className,\n          )}\n          data-timestamp={timestamp}\n          onClick={onClick}\n        >\n          <div className=\"size-[3px] rounded-full bg-gray-500\" />\n        </div>\n      ) : (\n        <ConnectTooltip\n          className=\"rounded-md bg-gray-900 text-white\"\n          content={tooltipContent}\n          open={open}\n          onOpenChange={setOpen}\n          delayDuration={0}\n          side=\"bottom\"\n          sideOffset={5}\n        >\n          <div\n            className={twMerge(\n              \"flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300\",\n              className,\n              isSelected && \"bg-blue-300\",\n            )}\n            data-timestamp={timestamp}\n            onClick={onClick}\n          >\n            <div className=\"flex h-3 w-0.5 items-end\">\n              <div\n                className={twMerge(\n                  \"h-3 w-0.5 rounded-t-full bg-green-600\",\n                  addBarHeight,\n                )}\n              ></div>\n            </div>\n            <div className=\"flex h-3 w-0.5 items-start\">\n              <div\n                className={twMerge(\n                  \"h-3 w-0.5 rounded-b-full bg-red-600\",\n                  delBarHeight,\n                )}\n              ></div>\n            </div>\n          </div>\n        </ConnectTooltip>\n      )}\n    </div>\n  );\n};\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { ConnectTooltipProvider } from \"../tooltip/tooltip.js\";\nimport { HDivider } from \"./components/h-divider.js\";\nimport { TimelineBar } from \"./components/timeline-bar.js\";\n\nexport type TimelineBarItem = {\n  id: string;\n  type: \"bar\";\n  addSize?: 0 | 1 | 2 | 3 | 4;\n  delSize?: 0 | 1 | 2 | 3 | 4;\n  timestampUtcMs?: string;\n  additions?: number;\n  deletions?: number;\n  revision?: number;\n  startDate?: Date;\n  endDate?: Date;\n};\n\nexport type TimelineDividerItem = {\n  id: string;\n  type: \"divider\";\n  timestampUtcMs?: string;\n  title?: string;\n  subtitle?: string;\n  revision?: number;\n  startDate?: Date;\n  endDate?: Date;\n};\n\nexport type TimelineItem = TimelineBarItem | TimelineDividerItem;\n\nexport interface DocumentTimelineProps {\n  onItemClick?: (item: TimelineItem | null) => void;\n  timeline?: Array<TimelineItem>;\n}\n\nconst defaultTimeLineItem: TimelineBarItem = {\n  id: \"default\",\n  type: \"bar\",\n  addSize: 0,\n  delSize: 0,\n};\n\nexport const DocumentTimeline = (props: DocumentTimelineProps) => {\n  const { timeline = [], onItemClick } = props;\n  const [selectedItem, setSelectedItem] = useState<null | string>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  const handleClick = (item: TimelineItem) => {\n    if (item.id === selectedItem || item.id === defaultTimeLineItem.id) {\n      onItemClick?.(null);\n      setSelectedItem(null);\n    } else {\n      onItemClick?.(item);\n      setSelectedItem(item.id);\n    }\n  };\n\n  const mergedTimelineItems = [...timeline, defaultTimeLineItem];\n  const [unselectedItems, selectedItems] = useMemo(() => {\n    const indexSelected = mergedTimelineItems.findIndex(\n      (item) => item.id === selectedItem,\n    );\n\n    return indexSelected === -1\n      ? [mergedTimelineItems, []]\n      : [\n          mergedTimelineItems.slice(0, indexSelected),\n          mergedTimelineItems.slice(indexSelected),\n        ];\n  }, [mergedTimelineItems, selectedItem]);\n\n  const renderTimelineItems = useCallback(\n    (items: Array<TimelineBarItem | TimelineDividerItem>) => {\n      return items.map((item) => {\n        if (item.type === \"divider\") {\n          const { timestampUtcMs, title, subtitle } = item;\n          return (\n            <HDivider\n              key={item.id}\n              timestampUtcMs={timestampUtcMs}\n              title={title}\n              subtitle={subtitle}\n              onClick={() => handleClick(item)}\n              isSelected={item.id === selectedItem}\n            />\n          );\n        }\n\n        return (\n          <TimelineBar\n            key={item.id}\n            timestampUtcMs={item.timestampUtcMs}\n            addSize={item.addSize}\n            delSize={item.delSize}\n            additions={item.additions}\n            deletions={item.deletions}\n            isSelected={item.id === selectedItem}\n            onClick={() => handleClick(item)}\n          />\n        );\n      });\n    },\n    [handleClick, selectedItem],\n  );\n\n  const unselectedContent = useMemo(\n    () => renderTimelineItems(unselectedItems),\n    [unselectedItems, renderTimelineItems],\n  );\n\n  const selectedContent = useMemo(\n    () => renderTimelineItems(selectedItems),\n    [selectedItems, renderTimelineItems],\n  );\n\n  // Scroll to the end by default\n  useEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollLeft =\n        scrollContainerRef.current.scrollWidth;\n    }\n  }, []);\n\n  return (\n    <ConnectTooltipProvider delayDuration={0} skipDelayDuration={0}>\n      <div className=\"relative h-[36px] w-full\">\n        <div className=\"absolute left-[0px] z-[20] h-[17px] w-[6px] bg-white\">\n          <div className=\"mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-slate-50\" />\n        </div>\n\n        <div className=\"absolute right-[0px] top-[11px] z-[20] h-[6px] w-[6px] bg-white\">\n          <div className=\"h-[6px] w-[6px] rounded-tr-md bg-slate-50\" />\n        </div>\n        <div className=\"absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-slate-50\" />\n\n        <div className=\"absolute inset-x-0 bottom-0 h-[36px]\">\n          <div\n            ref={scrollContainerRef}\n            className=\"h-full overflow-x-auto rounded-md\"\n          >\n            <div className=\"ml-auto flex h-[36px] w-max items-end px-2 pb-0\">\n              <div className=\"flex\">{unselectedContent}</div>\n              <div className=\"flex rounded-sm bg-blue-200\">\n                {selectedContent}\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className=\"pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-slate-50\" />\n        <div className=\"pointer-events-none absolute bottom-0 right-0 z-10 h-[25px] w-2 rounded-r-md bg-slate-50\" />\n      </div>\n    </ConnectTooltipProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/form-group-B092xF-f.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-group-B092xF-f.d.ts","names":[],"sources":["../src/ui/components/form-group/form-group.tsx"],"mappings":";cAAa,SAAA,EAAW,KAAA,CAAM,EAAA,CAAG,KAAA,CAAM,iBAAA"}