@dbcdk/react-components 0.0.185 → 0.0.186

package/dist/components/tabs/Tabs.js

@@ -51,6 +51,7 @@ function Tabs({
   onRemoveTab,
   onAddTab,
   addition,
+  tabListAddition,
   loading = false,
   children
 }) {
@@ -143,44 +144,52 @@ function Tabs({
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.tabList, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.tabButtons, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
-          const selected = index === activeIndex;
-          const tabDomId = `${uid}-tab-${String(tab.id)}`;
-          const panelDomId = `${uid}-panel-${String(tab.id)}`;
-          return /* @__PURE__ */ jsxs("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                id: tabDomId,
-                type: "button",
-                className: styles.tabButton,
-                role: "tab",
-                "aria-selected": selected,
-                "aria-controls": panelDomId,
-                tabIndex: selected ? 0 : -1,
-                disabled: tab.disabled,
-                onClick: () => setValue(tab.id),
-                onKeyDown: (e) => onKeyDownTab(e, index),
-                children: [
-                  tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
-                  /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
-                  tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-                ]
-              }
-            ),
-            tab.removable && onRemoveTab ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: styles.removeTabButton,
-                "aria-label": `Fjern fane ${tab.header}`,
-                disabled: tab.disabled,
-                onClick: () => onRemoveTab(tab.id, tab, index),
-                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-              }
-            ) : null
-          ] }, tab.id);
-        }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: onAddTab ? styles.tabButtons : `${styles.tabButtons} ${styles.tabButtonsEnd}`,
+            role: "tablist",
+            "aria-label": header != null ? header : "Tabs",
+            children: visibleTabs.map((tab, index) => {
+              const selected = index === activeIndex;
+              const tabDomId = `${uid}-tab-${String(tab.id)}`;
+              const panelDomId = `${uid}-panel-${String(tab.id)}`;
+              return /* @__PURE__ */ jsxs("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    id: tabDomId,
+                    type: "button",
+                    className: styles.tabButton,
+                    role: "tab",
+                    "aria-selected": selected,
+                    "aria-controls": panelDomId,
+                    tabIndex: selected ? 0 : -1,
+                    disabled: tab.disabled,
+                    onClick: () => setValue(tab.id),
+                    onKeyDown: (e) => onKeyDownTab(e, index),
+                    children: [
+                      tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
+                      /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
+                      tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                    ]
+                  }
+                ),
+                tab.removable && onRemoveTab ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: styles.removeTabButton,
+                    "aria-label": `Fjern fane ${tab.header}`,
+                    disabled: tab.disabled,
+                    onClick: () => onRemoveTab(tab.id, tab, index),
+                    children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                  }
+                ) : null
+              ] }, tab.id);
+            })
+          }
+        ),
         onAddTab ? /* @__PURE__ */ jsx(
           "button",
           {
@@ -190,7 +199,8 @@ function Tabs({
             "aria-label": "Tilf\xF8j fane",
             children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
           }
-        ) : null
+        ) : null,
+        tabListAddition ? /* @__PURE__ */ jsx("div", { className: styles.tabListAddition, children: tabListAddition }) : null
       ] }),
       /* @__PURE__ */ jsx(
         "div",

package/dist/components/tabs/Tabs.module.css

@@ -36,6 +36,15 @@
   min-width: 0;
 }
 
+/* Extra content next to the tab buttons, pushed into the free space on the right */
+.tabListAddition {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-inline-start: auto;
+  padding-inline-start: var(--spacing-md);
+}
+
 /* Individual tab wrapper */
 .tab {
   display: flex;
@@ -201,17 +210,26 @@
 
 .filled > .tabList {
   border-block-end: 1px solid var(--color-border-subtle);
-  background: var(--color-bg-toolbar);
-  inline-size: 100%;
 }
 
+/* One continuous backdrop behind the whole button row, so the curved gap
+   next to the active tab's rounded corners shows toolbar gray, not the
+   surface color behind the row. */
 .filled > .tabList > .tabButtons {
   display: flex;
+  background: var(--color-bg-toolbar);
+  border-start-start-radius: var(--border-radius-md);
+}
+
+.filled > .tabList > .tabButtons.tabButtonsEnd {
+  border-start-end-radius: var(--border-radius-md);
 }
 
 .filled > .tabList > .addTabButton {
+  background: var(--color-bg-toolbar);
   border: 1px solid transparent;
   border-block-end: 0;
+  border-start-end-radius: var(--border-radius-md);
 }
 
 .filled > .tabList > .addTabButton:hover {
@@ -253,7 +271,7 @@
   border-block-start: none;
   border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
   box-shadow: var(--shadow-xs);
-  padding: var(--spacing-lg);
+  padding: var(--spacing-md);
 }
 
 /* =========================
@@ -307,7 +325,7 @@
 .panelStyle.outlined > .tabContent {
   border: var(--border-width-thin) solid var(--color-border-default);
   background: var(--color-bg-surface);
-  padding: var(--spacing-lg);
+  padding: var(--spacing-md);
 }
 
 @media (max-width: 767px) {
@@ -333,8 +351,8 @@
 
   .filled > .tabContent,
   .panelStyle.outlined > .tabContent {
-    padding-block: var(--spacing-md);
-    padding-inline: var(--spacing-md);
+    padding-block: var(--spacing-sm);
+    padding-inline: var(--spacing-sm);
   }
 
   .panelStyle > .tabList {

package/dist/components/timeline/Timeline.cjs

@@ -0,0 +1,102 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var TimelineRow = require('./components/TimelineRow');
+var styles = require('./Timeline.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function uniqSorted(nums) {
+  return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+function collapsibleIndexesOf(items) {
+  return items.reduce((acc, item, i) => {
+    if (item.collapsible) acc.push(i);
+    return acc;
+  }, []);
+}
+function normalizeOpenIndexes(indexes, items) {
+  const collapsible = collapsibleIndexesOf(items);
+  if (indexes === "all") {
+    return collapsible;
+  }
+  const collapsibleSet = new Set(collapsible);
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => collapsibleSet.has(n)));
+}
+function Timeline({
+  items,
+  size = "md",
+  variant = "default",
+  renderMode = "lazy",
+  defaultOpenIndexes = [],
+  openIndexes,
+  onOpenIndexesChange,
+  className,
+  ...rest
+}) {
+  const uid = react.useId();
+  const isControlled = openIndexes !== void 0;
+  const [hasMounted, setHasMounted] = react.useState(false);
+  react.useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  const [internalOpenIndexes, setInternalOpenIndexes] = react.useState(
+    () => normalizeOpenIndexes(defaultOpenIndexes, items)
+  );
+  const currentOpenIndexes = react.useMemo(
+    () => normalizeOpenIndexes(isControlled ? openIndexes : internalOpenIndexes, items),
+    [isControlled, openIndexes, internalOpenIndexes, items]
+  );
+  const openSet = react.useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
+  function commit(nextIndexes) {
+    const normalized = normalizeOpenIndexes(nextIndexes, items);
+    if (isControlled) {
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    } else {
+      setInternalOpenIndexes(normalized);
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    }
+  }
+  function toggle(index) {
+    const item = items[index];
+    if (!item || !item.collapsible || item.disabled) return;
+    const isOpen = openSet.has(index);
+    if (isOpen) {
+      commit(currentOpenIndexes.filter((i) => i !== index));
+    } else {
+      commit([...currentOpenIndexes, index]);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      className: [styles__default.default.container, styles__default.default[size], className].filter(Boolean).join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TimelineRow.TimelineRow,
+          {
+            uid,
+            index: i,
+            item,
+            isLast: i === items.length - 1,
+            isOpen: openSet.has(i),
+            onToggle: toggle,
+            shouldAnimate: hasMounted,
+            size,
+            variant,
+            renderMode
+          },
+          (_a = item.id) != null ? _a : i
+        );
+      })
+    }
+  );
+}
+
+exports.Timeline = Timeline;

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,60 @@
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+import type { FormatDateOptions } from '../../utils/date/formatDate';
+export type TimelineContextMenuActionItem = {
+    type?: 'item';
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
+export type TimelineContextMenuHeaderItem = {
+    type: 'header';
+    label: ReactNode;
+};
+export type TimelineContextMenuItem = TimelineContextMenuActionItem | TimelineContextMenuHeaderItem;
+export interface TimelineItem {
+    id?: string;
+    label: ReactNode;
+    content: ReactNode;
+    collapsible?: boolean;
+    severity?: Severity;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /**
+     * When set, renders a muted timestamp next to the label using the
+     * component's own date formatting (see `dateOptions`) instead of the
+     * consumer building one into `label`/`content` by hand.
+     */
+    date?: Date | string | number;
+    /** Passed through to the internal `formatDate` call for `date`. */
+    dateOptions?: FormatDateOptions;
+    /**
+     * Renders a kebab menu next to the label (same pattern as `Table`'s row
+     * actions), instead of the consumer putting action buttons directly in
+     * `label` — those inflate the header's height and throw off its
+     * alignment with the marker dot.
+     */
+    contextMenuItems?: TimelineContextMenuItem[];
+}
+type Size = 'sm' | 'md' | 'lg';
+type Variant = 'default' | 'outlined';
+type OpenIndexes = number[] | 'all';
+type RenderMode = 'lazy' | 'eager';
+export interface TimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: TimelineItem[];
+    size?: Size;
+    variant?: Variant;
+    renderMode?: RenderMode;
+    /** Uncontrolled default */
+    defaultOpenIndexes?: OpenIndexes;
+    /** Controlled state */
+    openIndexes?: OpenIndexes;
+    /** Change callback */
+    onOpenIndexesChange?: (indexes: number[]) => void;
+}
+export declare function Timeline({ items, size, variant, renderMode, defaultOpenIndexes, openIndexes, onOpenIndexesChange, className, ...rest }: TimelineProps): JSX.Element;
+export {};

package/dist/components/timeline/Timeline.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, useEffect, useMemo } from 'react';
+import { TimelineRow } from './components/TimelineRow';
+import styles from './Timeline.module.css';
+
+function uniqSorted(nums) {
+  return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+function collapsibleIndexesOf(items) {
+  return items.reduce((acc, item, i) => {
+    if (item.collapsible) acc.push(i);
+    return acc;
+  }, []);
+}
+function normalizeOpenIndexes(indexes, items) {
+  const collapsible = collapsibleIndexesOf(items);
+  if (indexes === "all") {
+    return collapsible;
+  }
+  const collapsibleSet = new Set(collapsible);
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => collapsibleSet.has(n)));
+}
+function Timeline({
+  items,
+  size = "md",
+  variant = "default",
+  renderMode = "lazy",
+  defaultOpenIndexes = [],
+  openIndexes,
+  onOpenIndexesChange,
+  className,
+  ...rest
+}) {
+  const uid = useId();
+  const isControlled = openIndexes !== void 0;
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  const [internalOpenIndexes, setInternalOpenIndexes] = useState(
+    () => normalizeOpenIndexes(defaultOpenIndexes, items)
+  );
+  const currentOpenIndexes = useMemo(
+    () => normalizeOpenIndexes(isControlled ? openIndexes : internalOpenIndexes, items),
+    [isControlled, openIndexes, internalOpenIndexes, items]
+  );
+  const openSet = useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
+  function commit(nextIndexes) {
+    const normalized = normalizeOpenIndexes(nextIndexes, items);
+    if (isControlled) {
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    } else {
+      setInternalOpenIndexes(normalized);
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    }
+  }
+  function toggle(index) {
+    const item = items[index];
+    if (!item || !item.collapsible || item.disabled) return;
+    const isOpen = openSet.has(index);
+    if (isOpen) {
+      commit(currentOpenIndexes.filter((i) => i !== index));
+    } else {
+      commit([...currentOpenIndexes, index]);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: [styles.container, styles[size], className].filter(Boolean).join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          TimelineRow,
+          {
+            uid,
+            index: i,
+            item,
+            isLast: i === items.length - 1,
+            isOpen: openSet.has(i),
+            onToggle: toggle,
+            shouldAnimate: hasMounted,
+            size,
+            variant,
+            renderMode
+          },
+          (_a = item.id) != null ? _a : i
+        );
+      })
+    }
+  );
+}
+
+export { Timeline };

package/dist/components/timeline/Timeline.module.css

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.sm {
+  --tl-gap: var(--spacing-xs);
+  --tl-row-gap: var(--spacing-sm);
+  --tl-font-size: var(--font-size-sm);
+}
+
+.md {
+  --tl-gap: var(--spacing-sm);
+  --tl-row-gap: var(--spacing-md);
+  --tl-font-size: var(--font-size-md);
+}
+
+.lg {
+  --tl-gap: var(--spacing-sm);
+  --tl-row-gap: var(--spacing-lg);
+  --tl-font-size: var(--font-size-md);
+}

package/dist/components/timeline/components/TimelineRow.cjs

@@ -0,0 +1,147 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Button = require('../../../components/button/Button');
+var Circle = require('../../../components/circle/Circle');
+var Menu = require('../../../components/menu/Menu');
+var Popover = require('../../../components/popover/Popover');
+var useCollapsibleHeight = require('../../../hooks/useCollapsibleHeight');
+var formatDate = require('../../../utils/date/formatDate');
+var styles = require('./TimelineRow.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TimelineRow({
+  uid,
+  index,
+  item,
+  isLast,
+  isOpen,
+  onToggle,
+  shouldAnimate = true,
+  variant = "default",
+  renderMode = "lazy",
+  size = "md"
+}) {
+  var _a, _b;
+  const isDisabled = !!item.disabled;
+  const isCollapsible = !!item.collapsible;
+  const hasContextMenu = Boolean((_a = item.contextMenuItems) == null ? void 0 : _a.length);
+  const buttonId = `${uid}-tl-btn-${index}`;
+  const panelId = `${uid}-tl-panel-${index}`;
+  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight.useCollapsibleHeight(
+    isCollapsible ? isOpen : true,
+    shouldAnimate
+  );
+  const [hasBeenOpened, setHasBeenOpened] = react.useState(isOpen);
+  const shouldRenderContent = !isCollapsible || renderMode === "eager" || isOpen || hasBeenOpened;
+  const contentClassName = [styles__default.default.content, variant === "outlined" ? styles__default.default.outlined : ""].filter(Boolean).join(" ");
+  function handleToggle() {
+    if (!isOpen) {
+      setHasBeenOpened(true);
+    }
+    onToggle(index);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${styles__default.default.row} ${isDisabled ? styles__default.default.disabled : ""}`,
+      "data-state": isCollapsible ? isOpen ? "open" : "closed" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.markerColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.markerSlot, children: item.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: item.icon }) : /* @__PURE__ */ jsxRuntime.jsx(Circle.Circle, { severity: (_b = item.severity) != null ? _b : "neutral", size }) }),
+          !isLast ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.connector, "aria-hidden": "true" }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.body, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.headerRow} ${hasContextMenu ? styles__default.default.headerRowWithActions : ""}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.label, children: item.label }),
+            item.date !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.date, children: formatDate.formatDate(item.date, { userFriendlyLabel: true, ...item.dateOptions }) }) : null,
+            isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                id: buttonId,
+                className: styles__default.default.trigger,
+                "aria-expanded": isOpen,
+                "aria-controls": panelId,
+                "aria-label": isOpen ? "Collapse" : "Expand",
+                onClick: handleToggle,
+                disabled: isDisabled,
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.chevron} ${isOpen ? styles__default.default.open : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
+              }
+            ) : null,
+            hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx(TimelineRowActions, { items: item.contextMenuItems }) : null
+          ] }),
+          isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: panelId,
+              role: "region",
+              "aria-labelledby": buttonId,
+              className: `${styles__default.default.panel} ${shouldAnimate ? styles__default.default.animate : styles__default.default.noAnimate}`,
+              style: { height },
+              onTransitionEnd,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, className: contentClassName, children: shouldRenderContent ? item.content : null })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: item.content })
+        ] })
+      ]
+    }
+  );
+}
+function TimelineRowActions({ items }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.contextMenuOverlay, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "inline",
+          shape: "round",
+          className: styles__default.default.contextMenuTrigger,
+          "aria-label": "Flere handlinger",
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? true : false,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { size: 16 }),
+          onClick: toggle
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: items.map(
+        (item, index) => item.type === "header" ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsxRuntime.jsx(
+          Menu.Menu.Item,
+          {
+            active: item.active,
+            selected: item.selected,
+            disabled: item.disabled,
+            variant: item.variant,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  item.onClick();
+                  close();
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.contextMenuItemLabel, children: [
+                  item.icon,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.contextMenuItemText, children: item.label })
+                ] })
+              }
+            )
+          },
+          index
+        )
+      ) })
+    }
+  ) });
+}
+
+exports.TimelineRow = TimelineRow;

package/dist/components/timeline/components/TimelineRow.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'react';
+import { TimelineItem } from '../Timeline';
+export type TimelineRowProps = {
+    uid: string;
+    index: number;
+    item: TimelineItem;
+    isLast: boolean;
+    isOpen: boolean;
+    onToggle: (index: number) => void;
+    shouldAnimate?: boolean;
+    variant?: 'default' | 'outlined';
+    renderMode?: 'lazy' | 'eager';
+    size?: 'sm' | 'md' | 'lg';
+};
+export declare function TimelineRow({ uid, index, item, isLast, isOpen, onToggle, shouldAnimate, variant, renderMode, size, }: TimelineRowProps): JSX.Element;