@acronis-platform/ui-react 0.62.0 → 2.0.0

package/dist/components/ui/table/table.js

@@ -1,129 +1,178 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import * as t from "react";
-import { ArrowUpIcon as m, ArrowDownIcon as p, ArrowsDownUpIcon as u } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as l } from "../../../lib/utils.js";
-const f = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ r(
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import * as i from "react";
+import { ArrowUpIcon as u, ArrowDownIcon as v, ArrowsDownUpIcon as g } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as o } from "../../../lib/utils.js";
+const m = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ r(
   "table",
   {
-    ref: o,
-    className: l(
+    ref: l,
+    className: o(
       "w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]",
       a
     ),
     ...e
   }
 ) }));
-f.displayName = "Table";
-const v = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r("thead", { ref: o, className: l(a), ...e }));
-v.displayName = "TableHeader";
-const w = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+m.displayName = "Table";
+const h = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r("thead", { ref: l, className: o(a), ...e }));
+h.displayName = "TableHeader";
+const p = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
   "tbody",
   {
-    ref: o,
-    className: l("[&_tr:last-child]:border-0", a),
+    ref: l,
+    className: o("[&_tr:last-child]:border-0", a),
     ...e
   }
 ));
-w.displayName = "TableBody";
-const h = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+p.displayName = "TableBody";
+const f = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
   "tfoot",
   {
-    ref: o,
-    className: l(
-      "border-t border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0",
+    ref: l,
+    className: o(
+      "border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0",
       a
     ),
     ...e
   }
 ));
-h.displayName = "TableFooter";
-const x = t.forwardRef(
-  ({ className: a, selected: e, ...o }, s) => /* @__PURE__ */ r(
+f.displayName = "TableFooter";
+const w = i.forwardRef(
+  ({ className: a, selected: e, ...l }, t) => /* @__PURE__ */ r(
     "tr",
     {
-      ref: s,
+      ref: t,
       "data-state": e ? "selected" : void 0,
-      className: l(
-        "border-b border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]",
+      className: o(
+        "border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]",
+        // The design documents a keyboard-nav focus state on the row itself
+        // (a ring spanning the full row). Rows aren't focusable by default, so
+        // this only paints once a consumer makes them focusable (`tabIndex`).
+        "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]",
         a
       ),
-      ...o
+      ...l
     }
   )
 );
-x.displayName = "TableRow";
-function g({ direction: a }) {
+w.displayName = "TableRow";
+function x({ direction: a }) {
   const e = "size-[var(--ui-table-header-sort-icon-size)]";
-  return a === "asc" ? /* @__PURE__ */ r(m, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ r(p, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ r(u, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
+  return a === "asc" ? /* @__PURE__ */ r(u, { className: o(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ r(v, { className: o(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ r(g, { className: o(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
 }
-const N = t.forwardRef(
+const y = i.forwardRef(
   ({
     className: a,
     children: e,
-    sortable: o,
-    sortDirection: s = !1,
-    onSort: i,
+    sortable: l,
+    sortDirection: t = !1,
+    onSort: s,
     wrap: c,
     ...d
-  }, n) => /* @__PURE__ */ r(
+  }, b) => /* @__PURE__ */ r(
     "th",
     {
-      ref: n,
-      "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : o ? "none" : void 0,
-      className: l(
-        "px-[var(--ui-table-global-cell-padding-x)] text-start align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pe-0",
-        c ? "whitespace-normal" : "h-10",
+      ref: b,
+      "aria-sort": t === "asc" ? "ascending" : t === "desc" ? "descending" : l ? "none" : void 0,
+      className: o(
+        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0",
+        c ? "whitespace-normal" : "h-[var(--ui-table-global-cell-min-height)]",
+        // Per the design, a sortable header tints the whole cell on hover/press
+        // and draws the focus ring on the cell, not on the inner control.
+        l && "cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]",
         a
       ),
       ...d,
-      children: o ? /* @__PURE__ */ b(
+      children: l ? /* @__PURE__ */ n(
         "button",
         {
           type: "button",
-          onClick: i,
-          className: "-mx-1 inline-flex cursor-pointer items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
+          onClick: s,
+          className: "flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none",
           children: [
             e,
-            /* @__PURE__ */ r(g, { direction: s })
+            /* @__PURE__ */ r(x, { direction: t })
           ]
         }
       ) : e
     }
   )
 );
-N.displayName = "TableHead";
-const T = t.forwardRef(
-  ({ className: a, wrap: e, ...o }, s) => /* @__PURE__ */ r(
+y.displayName = "TableHead";
+const N = i.forwardRef(
+  ({ className: a, wrap: e, ...l }, t) => /* @__PURE__ */ r(
     "td",
     {
-      ref: s,
-      className: l(
-        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pe-0",
-        e ? "whitespace-normal" : "h-10",
+      ref: t,
+      className: o(
+        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] [&:has([role=checkbox])]:pe-0",
+        e ? "whitespace-normal" : "h-[var(--ui-table-global-cell-min-height)]",
         a
       ),
-      ...o
+      ...l
     }
   )
 );
-T.displayName = "TableCell";
-const y = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+N.displayName = "TableCell";
+const T = i.forwardRef(({ className: a, header: e, ...l }, t) => /* @__PURE__ */ r(
+  e ? "th" : "td",
+  {
+    ref: t,
+    className: o(
+      "w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle",
+      e ? "bg-[var(--ui-table-header-cell-color-idle)]" : "bg-[var(--ui-table-data-cell-color-idle)]",
+      a
+    ),
+    ...l
+  }
+));
+T.displayName = "TableSelectCell";
+const R = i.forwardRef(({ className: a, bulkSelectionActive: e, children: l, ...t }, s) => /* @__PURE__ */ r(
+  "td",
+  {
+    ref: s,
+    className: o(
+      "w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]",
+      !e && "rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]",
+      a
+    ),
+    ...t,
+    children: e ? null : l
+  }
+));
+R.displayName = "TableActionsCell";
+const C = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
+  "th",
+  {
+    ref: l,
+    className: o(
+      "w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]",
+      a
+    ),
+    ...e
+  }
+));
+C.displayName = "TableSettingsCell";
+const A = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ r(
   "caption",
   {
-    ref: o,
-    className: l("mt-4 text-sm text-muted-foreground", a),
+    ref: l,
+    className: o("mt-4 text-sm text-muted-foreground", a),
     ...e
   }
 ));
-y.displayName = "TableCaption";
+A.displayName = "TableCaption";
 export {
-  f as Table,
-  w as TableBody,
-  y as TableCaption,
-  T as TableCell,
-  h as TableFooter,
-  N as TableHead,
-  v as TableHeader,
-  x as TableRow
+  m as Table,
+  R as TableActionsCell,
+  p as TableBody,
+  A as TableCaption,
+  N as TableCell,
+  f as TableFooter,
+  y as TableHead,
+  h as TableHeader,
+  w as TableRow,
+  T as TableSelectCell,
+  C as TableSettingsCell
 };
 //# sourceMappingURL=table.js.map

package/dist/components/ui/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell   -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row    -> --ui-table-global-row-border-color, --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • header -> --ui-table-header-{label-color,cell-color-hover,gap}\n//   • sort   -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • data   -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] text-start align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pe-0',\n        wrap ? 'whitespace-normal' : 'h-10',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"-mx-1 inline-flex cursor-pointer items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pe-0',\n        wrap ? 'whitespace-normal' : 'h-10',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","wrap","jsxs","TableCell","TableCaption"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives, reconciled against the Table design in the\n// ui-react Figma (canvas 2948-2416; assembled example 4567-6801, part state\n// matrices TableHeaderCell 3427-207 / TableDataCell 4536-97 / TableDataRow\n// 4536-699 / TableSettings 3698-497 / TableActions 4536-414 / TableCheckbox\n// 3698-746). A `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell     -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row      -> --ui-table-global-row-{border-color,border-width,border-style},\n//                 --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • head     -> --ui-table-header-{label-color,gap}, --ui-table-header-cell-color-{idle,hover,active}\n//   • data     -> --ui-table-data-cell-color-{idle,hover,active}, --ui-table-data-value-color-{idle,disabled}\n//   • sort     -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • focus    -> --ui-focus-primary (the kit-wide 3px focus ring, radius/radius-4)\n// Per the design, the header/settings/actions cells tint on hover and press at\n// the *cell* level (not on an inner control), so the interaction tokens sit on\n// the `<th>`/`<td>` and the focus ring is drawn on the cell via `has-[…]`.\n//\n// The design's cell content (tags, status dots, links) stays consumer\n// composition — `--ui-table-global-cell-{tag,icon}-margin-y` and\n// --ui-table-data-gap describe that content's own insets, not a part contract,\n// so no wrapper part is invented for them here.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        // The design documents a keyboard-nav focus state on the row itself\n        // (a ring spanning the full row). Rows aren't focusable by default, so\n        // this only paints once a consumer makes them focusable (`tabIndex`).\n        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        // Per the design, a sortable header tints the whole cell on hover/press\n        // and draws the focus ring on the cell, not on the inner control.\n        sortable &&\n          'cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableSelectCellProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the select-all cell of the header row (`<th>`) instead of a row's\n   * selection cell (`<td>`).\n   */\n  header?: boolean;\n}\n\n/**\n * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column\n * holding a label-less `Checkbox`. Only the leading padding is applied, matching\n * the design (16px padding + a 16px box), so the checkbox sits flush against the\n * first data cell.\n */\nconst TableSelectCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableSelectCellProps\n>(({ className, header, ...props }, ref) => {\n  const Comp = header ? 'th' : 'td';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle',\n        header\n          ? 'bg-[var(--ui-table-header-cell-color-idle)]'\n          : 'bg-[var(--ui-table-data-cell-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableSelectCell.displayName = 'TableSelectCell';\n\nexport interface TableActionsCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Suppress this row's actions because a selection is in play — the cell\n   * still reserves its 48px column (so the grid doesn't reflow) but renders no\n   * children and no hover/press tint. Per the design, that means any row is\n   * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from\n   * the data-table part) rather than re-deriving the threshold.\n   */\n  bulkSelectionActive?: boolean;\n}\n\n/**\n * The trailing row-actions cell (design part `TableActions`) — a fixed 48px\n * column, end-aligned, holding the consumer's overflow trigger (e.g. a\n * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself\n * carries the hover/press tint and the focus ring, per the design.\n */\nconst TableActionsCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableActionsCellProps\n>(({ className, bulkSelectionActive, children, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]',\n      !bulkSelectionActive &&\n        'rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  >\n    {bulkSelectionActive ? null : children}\n  </td>\n));\nTableActionsCell.displayName = 'TableActionsCell';\n\n/**\n * The trailing header cell holding the column-settings trigger (design part\n * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's\n * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what\n * the trigger opens (a column-visibility menu) is the consumer's choice —\n * `TableViewOptions` is the ready-made one.\n */\nconst TableSettingsCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTableSettingsCell.displayName = 'TableSettingsCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableSelectCell,\n  TableActionsCell,\n  TableSettingsCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","wrap","jsxs","TableCell","TableSelectCell","header","TableActionsCell","bulkSelectionActive","TableSettingsCell","TableCaption"],"mappings":";;;;AA+BA,MAAMA,IAAQC,EAAM,WAGlB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,GACF,CACD;AACDH,EAAM,cAAc;AAEpB,MAAMO,IAAcN,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC,EAAC,SAAA,EAAM,KAAAD,GAAU,WAAWE,EAAGJ,CAAS,GAAI,GAAGC,GAAO,CACvD;AACDI,EAAY,cAAc;AAE1B,MAAMC,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,8BAA8BJ,CAAS;AAAA,IACpD,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAU,cAAc;AAExB,MAAMC,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAY,cAAc;AAQ1B,MAAMC,IAAWT,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,UAAAS,GAAU,GAAGR,EAAA,GAASC,MAClC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,cAAYO,IAAW,aAAa;AAAA,MACpC,WAAWL;AAAA,QACT;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAS,cAAc;AAmBvB,SAASE,EAAS,EAAE,WAAAC,KAA2C;AAC7D,QAAMC,IAAO;AACb,SAAID,MAAc,0BACRE,GAAA,EAAY,WAAWT,EAAGQ,GAAM,sDAAsD,GAAG,IAE/FD,MAAc,2BACRG,GAAA,EAAc,WAAWV,EAAGQ,GAAM,sDAAsD,GAAG,sBAE7FG,GAAA,EAAiB,WAAWX,EAAGQ,GAAM,wDAAwD,GAAG;AAC1G;AAEA,MAAMI,IAAYjB,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,UAAAiB;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGpB;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aACEiB,MAAkB,QACd,cACAA,MAAkB,SAChB,eACAD,IACE,SACA;AAAA,MAEV,WAAWd;AAAA,QACT;AAAA,QACAiB,IACI,sBACA;AAAA;AAAA;AAAA,QAGJH,KACE;AAAA,QACFlB;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAiB,IACC,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASF;AAAA,UACT,WAAU;AAAA,UAET,UAAA;AAAA,YAAAH;AAAA,YACD,gBAAAd,EAACO,GAAA,EAAS,WAAWS,EAAA,CAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,IAGtCF;AAAA,IAAA;AAAA,EAAA;AAIR;AACAD,EAAU,cAAc;AAWxB,MAAMO,IAAYxB,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,MAAAqB,GAAM,GAAGpB,EAAA,GAASC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAiB,IACI,sBACA;AAAA,QACJrB;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAsB,EAAU,cAAc;AAiBxB,MAAMC,IAAkBzB,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,QAAAyB,GAAQ,GAAGxB,EAAA,GAASC,MAGhC,gBAAAC;AAAA,EAFWsB,IAAS,OAAO;AAAA,EAE1B;AAAA,IACC,KAAAvB;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAqB,IACI,gDACA;AAAA,MACJzB;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AAAA,CAGT;AACDuB,EAAgB,cAAc;AAoB9B,MAAME,IAAmB3B,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,qBAAA2B,GAAqB,UAAAV,GAAU,GAAGhB,KAASC,MACzD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA,CAACuB,KACC;AAAA,MACF3B;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,cAAsB,OAAOgB;AAAA,EAAA;AAChC,CACD;AACDS,EAAiB,cAAc;AAS/B,MAAME,IAAoB7B,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACD2B,EAAkB,cAAc;AAEhC,MAAMC,IAAe9B,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,sCAAsCJ,CAAS;AAAA,IAC5D,GAAGC;AAAA,EAAA;AACN,CACD;AACD4B,EAAa,cAAc;"}

package/dist/components/ui/timeline/timeline.js

@@ -6,9 +6,9 @@ import { cn as O } from "../../../lib/utils.js";
 import { Avatar as Y, AvatarFallback as Z } from "../avatar/avatar.js";
 import { Card as ee } from "../card/card.js";
 import { ButtonIcon as ae } from "../button-icon/button-icon.js";
-const G = "var(--ui-border-on-surface-border)", te = "var(--ui-gap-16)", p = "var(--ui-avatar-global-avatar-size)", P = "calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))", V = r.createContext({
+const G = "var(--ui-timeline-connector-color)", te = "var(--ui-timeline-gap)", p = "var(--ui-avatar-global-avatar-size)", P = "calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))", V = r.createContext({
   variant: "default"
-}), _ = r.createContext(null), M = (u, m) => String(u.key ?? m), ne = X("flex flex-col", {
+}), _ = r.createContext(null), M = (m, u) => String(m.key ?? u), ne = X("flex flex-col", {
   variants: {
     variant: {
       default: "",
@@ -19,8 +19,8 @@ const G = "var(--ui-border-on-surface-border)", te = "var(--ui-gap-16)", p = "va
     variant: "default"
   }
 }), D = r.forwardRef(
-  ({ className: u, variant: m, children: g, ...T }, C) => {
-    const o = m ?? "default", k = r.useMemo(() => ({ variant: o }), [o]), [$, f] = r.useState(
+  ({ className: m, variant: u, children: g, ...T }, C) => {
+    const o = u ?? "default", k = r.useMemo(() => ({ variant: o }), [o]), [$, f] = r.useState(
       {}
     ), h = r.Children.toArray(g).filter(
       r.isValidElement
@@ -98,7 +98,7 @@ const G = "var(--ui-border-on-surface-border)", te = "var(--ui-gap-16)", p = "va
         className: O(
           ne({ variant: o }),
           "gap-[var(--ui-gap-16)]",
-          u
+          m
         ),
         ...T,
         children: b
@@ -109,8 +109,8 @@ const G = "var(--ui-border-on-surface-border)", te = "var(--ui-gap-16)", p = "va
 D.displayName = "Timeline";
 const B = r.forwardRef(
   ({
-    className: u,
-    title: m,
+    className: m,
+    title: u,
     timestamp: g,
     tag: T,
     description: C,
@@ -167,9 +167,9 @@ const B = r.forwardRef(
           "--timeline-marker": J
         },
         className: O(
-          "relative flex items-start gap-[var(--ui-gap-16)]",
+          "relative flex items-start gap-[var(--ui-timeline-gap)]",
           "ps-[var(--timeline-indent)]",
-          u
+          m
         ),
         ...i,
         children: [
@@ -213,7 +213,7 @@ const B = r.forwardRef(
             /* @__PURE__ */ c("div", { className: "flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2", children: [
               /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col", children: [
                 /* @__PURE__ */ c("div", { className: "flex h-8 items-center gap-[var(--ui-gap-8)]", children: [
-                  /* @__PURE__ */ n("span", { className: "truncate text-base font-medium leading-6 text-foreground", children: m }),
+                  /* @__PURE__ */ n("span", { className: "truncate text-base font-medium leading-6 text-foreground", children: u }),
                   (T != null || g != null) && /* @__PURE__ */ c("div", { className: "flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]", children: [
                     T,
                     g != null && /* @__PURE__ */ n("span", { className: "whitespace-nowrap text-xs leading-4 text-muted-foreground", children: g })

package/dist/components/ui/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../../../src/components/ui/timeline/timeline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Avatar, AvatarFallback } from '../avatar';\nimport { ButtonIcon } from '../button-icon';\nimport { Card } from '../card';\n\n// A presentational, chronological *tree* of events — an activity feed / audit\n// log / status history. Each row is an Avatar marker plus a Card carrying the\n// title, an optional tag, the timestamp, a description, and an optional body;\n// rows join their parent through an elbow and their next sibling through a\n// vertical line. It owns structure, the connector geometry, and collapsing only;\n// it never sorts, groups, fetches, or interprets events, and it ships no domain\n// event types or icons. Rendered as a semantic ordered list (`<ol>`/`<li>`);\n// markers and connectors are decorative. Not a temporal chart — use a Line /\n// Area / Composed chart for that.\n//\n// Nesting is **flat**, mirroring the Figma `Nesting` variant: a consumer renders\n// one `Timeline.Item` per entry and declares its `level` (1-3). Depth is never\n// derived from JSX nesting — the level sequence *is* the tree. `Timeline` reads\n// that sequence and derives the rest: which rows get a disclosure control, which\n// rows are dropped when one collapses, and the whole connector geometry — both a\n// row's descending line and the elbow joining a branch's first row to its parent\n// (Figma's `-First`). `connector` and `branchStart` exist only to override those\n// two, and the pair is resolved together so neither half can be drawn alone.\n//\n// Collapsing is the **variant**, not a per-row flag. `tree` gives every row that\n// has descendants a disclosure button ahead of its marker and widens the indent\n// step to reserve it; `default` never collapses anything. There is no `collapsible`\n// prop, because the two would say the same thing: a tree branch nobody can collapse\n// is just `default` with a wider indent.\n//\n// An expandable *card* is a separate, orthogonal axis — `collapsibleBody` puts a\n// chevron at the trailing edge of a row's card header that folds that card's own\n// body (Figma's `Action Button`). It is not a variant: it behaves identically in\n// `default` and `tree`, and a tree row can carry both controls — the branch one\n// drops the rows below, this one folds this card. It lives here only because\n// `Card` cannot do it yet; move it there once it can.\n//\n// Connector geometry is reproduced with logical CSS borders rather than Figma's\n// two exported 1px SVG strokes (a straight line and a right angle): both are\n// design primitives, not iconography, and CSS borders mirror correctly under\n// `dir=\"rtl\"` where a baked-in asset cannot.\n//\n// The design references `components/Timeline/{connectorColor,gap}`, which are\n// not \"ready for dev\" and have no `--ui-timeline-*` tier. Both are pure aliases\n// in Figma — identical across all six brand modes — so this consumes the alias\n// targets directly: `--ui-border-on-surface-border` (connector) and\n// `--ui-gap-16` (gap). Re-point them at `--ui-timeline-*` once that tier ships.\n\nconst CONNECTOR_COLOR = 'var(--ui-border-on-surface-border)';\n// Load-bearing invariant: the elbow's vertical lands on the parent's connector\n// only while GAP === MARKER / 2 (16 === 32 / 2 today). The elbow is offset from the\n// child's indent while the connector is offset from the parent's marker centre, and\n// those two coincide at exactly that ratio. If either token moves, every elbow\n// detaches — re-derive the elbow's `insetInlineStart` rather than nudging it.\nconst GAP = 'var(--ui-gap-16)';\n/** The Avatar marker's own width — also the elbow's horizontal reach. */\nconst MARKER = 'var(--ui-avatar-global-avatar-size)';\n/** Disclosure button + its gap, present only on a `tree` row with descendants. */\nconst TOGGLE =\n  'calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))';\n\ntype TimelineVariant = 'default' | 'tree';\n\nconst TimelineContext = React.createContext<{ variant: TimelineVariant }>({\n  variant: 'default',\n});\n\n/**\n * Per-row disclosure state, resolved by the root so it can also drop the\n * collapsed row's descendants. Null when an item renders outside a `Timeline`,\n * in which case the item falls back to its own state.\n */\nconst TimelineRowContext = React.createContext<{\n  expanded: boolean;\n  connector: boolean;\n  elbow: boolean;\n  hasToggle: boolean;\n  onToggle: () => void;\n} | null>(null);\n\n/** A row's identity for the uncontrolled disclosure map. */\nconst key = (element: React.ReactElement, index: number) =>\n  String(element.key ?? index);\n\nconst timelineVariants = cva('flex flex-col', {\n  variants: {\n    variant: {\n      default: '',\n      tree: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport interface TimelineProps\n  extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {\n  /**\n   * Whether the list collapses. `default` never does; `tree` gives every row that\n   * has descendants a disclosure button ahead of its marker, which hides those\n   * descendants, and widens the indent step to reserve it on every row.\n   *\n   * Unrelated to `Timeline.Item`'s `collapsibleBody`, which folds a single card's\n   * own body and works the same under both variants.\n   */\n  variant?: TimelineVariant;\n  /**\n   * `Timeline.Item`s — pass them as direct children in visual order (never\n   * wrapped in a fragment, or their levels can't be read). Connectors are derived\n   * from the levels, so no row ever leaves a dangling line.\n   */\n  children?: React.ReactNode;\n}\n\nconst TimelineRoot = React.forwardRef<HTMLOListElement, TimelineProps>(\n  ({ className, variant, children, ...props }, ref) => {\n    const resolved = variant ?? 'default';\n    const context = React.useMemo(() => ({ variant: resolved }), [resolved]);\n    const [openState, setOpenState] = React.useState<Record<string, boolean>>(\n      {}\n    );\n\n    const items = React.Children.toArray(children).filter(\n      React.isValidElement\n    ) as React.ReactElement<TimelineItemProps>[];\n\n    // A row has descendants when the row *authored* after it is deeper. Read from\n    // the full child list, never the visible one: a collapsed row must keep its\n    // disclosure control, or there would be no way to expand it again.\n    const levelAt = (index: number) => items[index]?.props.level ?? 1;\n    const hasDescendants = (index: number) =>\n      index + 1 < items.length && levelAt(index + 1) > levelAt(index);\n\n    // Pass 1 — in `tree` mode only, drop the rows beneath a collapsed one. Rows\n    // deeper than a collapsed row are hidden until the level rises back to it; one\n    // cursor is enough, since a nested collapse can only ever narrow the range.\n    const visible: {\n      element: React.ReactElement<TimelineItemProps>;\n      key: string;\n      level: number;\n      expanded: boolean;\n      isControlled: boolean;\n      hasToggle: boolean;\n    }[] = [];\n    let hideBelowLevel: number | null = null;\n\n    items.forEach((element, index) => {\n      const level = element.props.level ?? 1;\n      if (hideBelowLevel !== null && level > hideBelowLevel) return;\n      hideBelowLevel = null;\n\n      const isControlled = element.props.expanded !== undefined;\n      const expanded = isControlled\n        ? Boolean(element.props.expanded)\n        : (openState[key(element, index)] ??\n          element.props.defaultExpanded ??\n          true);\n\n      // Collapsing is the variant, not a per-row opt-in: `tree` rows that have\n      // descendants get the control, `default` rows never do. A tree row without\n      // it would be a branch nobody can collapse — which is just `default` with a\n      // wider indent — so there is nothing for a `collapsible` prop to decide.\n      const hasToggle = resolved === 'tree' && hasDescendants(index);\n\n      if (hasToggle && !expanded) {\n        hideBelowLevel = level;\n      }\n\n      visible.push({\n        element,\n        key: key(element, index),\n        level,\n        expanded,\n        isControlled,\n        hasToggle,\n      });\n    });\n\n    // Pass 2 — the connector and the elbow are two halves of one join, so they are\n    // resolved together and neither can be drawn without the other.\n    //\n    // A row draws the elbow when it is deeper than the row above it: that is what\n    // \"opens a branch\" means, and reading it from the sequence keeps a level jump\n    // from having to be declared twice. `branchStart` overrides it, like\n    // `connector` overrides the descending line.\n    const drawsElbow = (index: number) => {\n      const row = visible[index];\n      if (row == null || row.level <= 1) return false;\n      const previous = visible[index - 1];\n      return (\n        row.element.props.branchStart ??\n        (previous != null && row.level > previous.level)\n      );\n    };\n\n    // A row's connector descends from its own marker to the *next visible* row, so\n    // it may only be drawn when it actually lands on something. Otherwise the line\n    // dangles in the margin: at the end of the list, at the end of a branch, and\n    // (the case that needs the two passes) once a collapse has removed the\n    // descendants it used to point at.\n    const rows = visible.map((row, index) => {\n      const next = visible[index + 1];\n      const reachesNextRow =\n        next != null &&\n        (next.level > row.level\n          ? // A deeper row bridges the gap with its own elbow, which starts exactly\n            // at this row's marker centre — so the line lands only if that elbow is\n            // actually drawn. It normally is, since a level jump derives one; it is\n            // not when the consumer refuses it with `branchStart={false}`, and then\n            // this line has nothing to meet.\n            drawsElbow(index + 1)\n          : next.level === row.level &&\n            // Same level, but a `tree` row that reserves a disclosure button has a\n            // wider marker column than one that doesn't — so their markers sit at\n            // different offsets and a vertical line between them can't be straight.\n            // Figma only ever shows homogeneous siblings, so skip the line instead\n            // of drawing a crooked one.\n            next.hasToggle === row.hasToggle);\n      return (\n        <TimelineRowContext.Provider\n          key={row.key}\n          value={{\n            expanded: row.expanded,\n            connector: row.element.props.connector ?? reachesNextRow,\n            elbow: drawsElbow(index),\n            hasToggle: row.hasToggle,\n            onToggle: () => {\n              const nextExpanded = !row.expanded;\n              row.element.props.onExpandedChange?.(nextExpanded);\n              if (!row.isControlled) {\n                setOpenState((state) => ({\n                  ...state,\n                  [row.key]: nextExpanded,\n                }));\n              }\n            },\n          }}\n        >\n          {row.element}\n        </TimelineRowContext.Provider>\n      );\n    });\n\n    return (\n      <TimelineContext.Provider value={context}>\n        <ol\n          ref={ref}\n          data-variant={resolved}\n          style={\n            {\n              // The indent step is the widest marker column plus the gap: a\n              // `tree` row reserves the disclosure button even when a given row\n              // is a leaf, so every level lines up.\n              '--timeline-step': `calc(${\n                resolved === 'tree' ? `${TOGGLE} + ${MARKER}` : MARKER\n              } + ${GAP})`,\n            } as React.CSSProperties\n          }\n          className={cn(\n            timelineVariants({ variant: resolved }),\n            'gap-[var(--ui-gap-16)]',\n            className\n          )}\n          {...props}\n        >\n          {rows}\n        </ol>\n      </TimelineContext.Provider>\n    );\n  }\n);\nTimelineRoot.displayName = 'Timeline';\n\nexport type TimelineLevel = 1 | 2 | 3;\n\n/** The marker Avatar's color scheme (Figma ships the Timeline marker as Blue). */\nexport type TimelineMarkerColor =\n  | 'blue'\n  | 'gray'\n  | 'green'\n  | 'teal'\n  | 'violet'\n  | 'red'\n  | 'yellow'\n  | 'orange';\n\nexport interface TimelineItemProps extends Omit<\n  React.ComponentProps<'li'>,\n  'title'\n> {\n  /** Event title (the primary line in the card header). */\n  title: React.ReactNode;\n  /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */\n  timestamp?: React.ReactNode;\n  /** Slot beside the title, before the timestamp — e.g. a `Tag`. */\n  tag?: React.ReactNode;\n  /** Optional secondary description under the title. */\n  description?: React.ReactNode;\n  /** Icon rendered inside the marker Avatar. Takes precedence over `initials`. */\n  icon?: React.ReactNode;\n  /** Initials rendered inside the marker Avatar when no `icon` is given. */\n  initials?: string;\n  /** Marker Avatar color scheme. */\n  color?: TimelineMarkerColor;\n  /** Nesting depth (Figma `Nesting` L1-L3). Drives the indent only. */\n  level?: TimelineLevel;\n  /**\n   * Force the elbow joining this row to its parent's connector on or off (Figma's\n   * `Nesting` `-First`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it whenever this row is deeper than the one above it. Ignored at\n   * `level={1}`, which has no parent.\n   */\n  branchStart?: boolean;\n  /**\n   * Force the connector descending to the next row on or off (Figma\n   * `Connecting line`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it only when the next visible row is at this row's depth or deeper.\n   */\n  connector?: boolean;\n  /**\n   * Branch disclosure state (controlled). Only meaningful under `variant=\"tree\"`\n   * on a row that has descendants — those rows get the control automatically.\n   */\n  expanded?: boolean;\n  /** Initial branch disclosure state when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called with the requested disclosure state whenever the control is activated. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the branch disclosure control — the one that drops this\n   * row's descendant rows. Distinct from `bodyToggleLabel` by default, because a\n   * tree row can carry both controls at once.\n   */\n  toggleLabel?: string;\n  /**\n   * Give this row's card a chevron at the trailing edge of its header that shows\n   * and hides the body (Figma's `Action Button`).\n   *\n   * Orthogonal to `variant`: it is the *card's* disclosure, not the timeline's, so\n   * it works the same in `default` and `tree` and a tree row can have both — the\n   * branch control drops the rows below, this one folds this card's own body.\n   * (It lives here only until `Card` grows the behaviour itself.)\n   */\n  collapsibleBody?: boolean;\n  /** Card-body disclosure state (controlled). */\n  bodyExpanded?: boolean;\n  /** Initial card-body disclosure state when uncontrolled. */\n  defaultBodyExpanded?: boolean;\n  /** Called with the requested card-body disclosure state. */\n  onBodyExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the card-body disclosure control — the one that folds this\n   * row's own body. Distinct from `toggleLabel` by default.\n   */\n  bodyToggleLabel?: string;\n  /** Card body, rendered below a divider. */\n  children?: React.ReactNode;\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      title,\n      timestamp,\n      tag,\n      description,\n      icon,\n      initials,\n      color = 'blue',\n      level = 1,\n      branchStart,\n      connector,\n      // Destructured only to keep them off the `<li>`: the root reads them from\n      // `element.props`, because it owns the disclosure state for the whole branch.\n      expanded: expandedProp,\n      defaultExpanded,\n      onExpandedChange,\n      // The two controls can sit in the same `<li>`, so their default names have to\n      // name their own action — a shared generic default would give one row two\n      // buttons that are indistinguishable to a screen reader.\n      toggleLabel = 'Toggle nested events',\n      collapsibleBody = false,\n      bodyExpanded: bodyExpandedProp,\n      defaultBodyExpanded = true,\n      onBodyExpandedChange,\n      bodyToggleLabel = 'Toggle event details',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { variant } = React.useContext(TimelineContext);\n    const row = React.useContext(TimelineRowContext);\n\n    // The card's own disclosure is entirely local — unlike the branch control, it\n    // changes nothing outside this row, so the root has no reason to own it.\n    const [localBodyExpanded, setLocalBodyExpanded] =\n      React.useState(defaultBodyExpanded);\n    const bodyExpanded = bodyExpandedProp ?? localBodyExpanded;\n    const handleBodyToggle = () => {\n      const next = !bodyExpanded;\n      onBodyExpandedChange?.(next);\n      if (bodyExpandedProp === undefined) setLocalBodyExpanded(next);\n    };\n\n    // All three are resolved by the root: `expanded` and the control depend on the\n    // row's descendants, which only the root can see, and it owns the uncontrolled\n    // state so it can drop those descendants too. Rendered outside a `Timeline`\n    // there is no branch at all, so an item is simply never collapsible.\n    const expanded = row?.expanded ?? true;\n    const drawConnector = row ? row.connector : (connector ?? false);\n    // Likewise derived by the root, which is the only place the row above is\n    // visible. Standalone there is no row above, so only the explicit prop can\n    // ask for an elbow — and it has nothing to meet, which is the consumer's call.\n    const drawElbow = row ? row.elbow : Boolean(branchStart) && level > 1;\n    const treeToggle = variant === 'tree' && (row?.hasToggle ?? false);\n    // A `tree` leaf drops the disclosure button, so its own marker column is\n    // narrower than the indent step — the connector tracks the Avatar, not the step.\n    const ownMarker = treeToggle ? `calc(${TOGGLE} + ${MARKER})` : MARKER;\n\n    // Collapsed, the chevron points toward the inline end — so it has to mirror\n    // under RTL; logical positioning can't rotate artwork.\n    const chevron = (\n      open: boolean,\n      label: string,\n      onClick: () => void\n    ) => (\n      <ButtonIcon\n        type=\"button\"\n        aria-label={label}\n        aria-expanded={open}\n        onClick={onClick}\n        className={cn(\n          'shrink-0 transition-transform',\n          !open && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      >\n        <ChevronDownIcon />\n      </ButtonIcon>\n    );\n\n    return (\n      <li\n        ref={ref}\n        data-level={level}\n        data-branch-start={drawElbow || undefined}\n        data-expanded={treeToggle ? expanded : undefined}\n        data-body-expanded={collapsibleBody ? bodyExpanded : undefined}\n        style={\n          {\n            '--timeline-indent': `calc(var(--timeline-step) * ${level - 1})`,\n            '--timeline-marker': ownMarker,\n          } as React.CSSProperties\n        }\n        className={cn(\n          'relative flex items-start gap-[var(--ui-gap-16)]',\n          'ps-[var(--timeline-indent)]',\n          className\n        )}\n        {...props}\n      >\n        {drawConnector && (\n          <span\n            data-slot=\"timeline-connector\"\n            aria-hidden\n            // Descends from the marker's lower edge into the row gap, meeting\n            // the next row's elbow (or its marker) exactly.\n            className=\"absolute top-[var(--ui-avatar-global-avatar-size)] bottom-[calc(var(--ui-gap-16)*-1)] w-px\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) + var(--timeline-marker) - ${MARKER} / 2)`,\n              backgroundColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n        {drawElbow && (\n          <span\n            data-slot=\"timeline-elbow\"\n            aria-hidden\n            // A right angle: down the parent's connector line, then across to\n            // this row's marker column. `border-s`/`border-b` mirror in RTL.\n            className=\"absolute top-0 h-[calc(var(--ui-avatar-global-avatar-size)/2)] w-[var(--ui-avatar-global-avatar-size)] border-b border-s\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) - ${MARKER})`,\n              borderColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n\n        {/* Marker column: the optional tree disclosure button, then the Avatar. */}\n        <div className=\"relative flex shrink-0 items-center gap-[var(--ui-gap-8)]\">\n          {treeToggle && chevron(expanded, toggleLabel, () => row?.onToggle())}\n          <Avatar\n            aria-hidden\n            color={color}\n            // The Figma Timeline marker carries no stroke, so Avatar's 2px outset\n            // ring (which exists to separate overlapping avatars in a group) is\n            // switched off here.\n            className=\"[box-shadow:none] [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0\"\n          >\n            {icon ??\n              (initials ? <AvatarFallback>{initials}</AvatarFallback> : null)}\n          </Avatar>\n        </div>\n\n        {/* Content column: a Card header, plus an optional body below a divider. */}\n        <Card className=\"min-w-0 flex-1 shadow-none\">\n          <div className=\"flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2\">\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              <div className=\"flex h-8 items-center gap-[var(--ui-gap-8)]\">\n                <span className=\"truncate text-base font-medium leading-6 text-foreground\">\n                  {title}\n                </span>\n                {(tag != null || timestamp != null) && (\n                  <div className=\"flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]\">\n                    {tag}\n                    {timestamp != null && (\n                      <span className=\"whitespace-nowrap text-xs leading-4 text-muted-foreground\">\n                        {timestamp}\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              {description != null && (\n                <div className=\"flex items-center pb-1\">\n                  <span className=\"truncate text-xs leading-4 text-muted-foreground\">\n                    {description}\n                  </span>\n                </div>\n              )}\n            </div>\n            {collapsibleBody &&\n              chevron(bodyExpanded, bodyToggleLabel, handleBodyToggle)}\n          </div>\n          {children != null && (!collapsibleBody || bodyExpanded) && (\n            <div className=\"border-t border-border py-2\">{children}</div>\n          )}\n        </Card>\n      </li>\n    );\n  }\n);\nTimelineItem.displayName = 'Timeline.Item';\n\nconst Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });\n\nexport { Timeline, TimelineItem };\n"],"names":["CONNECTOR_COLOR","GAP","MARKER","TOGGLE","TimelineContext","React","TimelineRowContext","key","element","index","timelineVariants","cva","TimelineRoot","className","variant","children","props","ref","resolved","context","openState","setOpenState","items","levelAt","_a","hasDescendants","visible","hideBelowLevel","level","isControlled","expanded","hasToggle","drawsElbow","row","previous","rows","next","reachesNextRow","jsx","nextExpanded","_b","state","cn","TimelineItem","title","timestamp","tag","description","icon","initials","color","branchStart","connector","expandedProp","defaultExpanded","onExpandedChange","toggleLabel","collapsibleBody","bodyExpandedProp","defaultBodyExpanded","onBodyExpandedChange","bodyToggleLabel","localBodyExpanded","setLocalBodyExpanded","bodyExpanded","handleBodyToggle","drawConnector","drawElbow","treeToggle","ownMarker","chevron","open","label","onClick","ButtonIcon","ChevronDownIcon","jsxs","Avatar","AvatarFallback","Card","Timeline"],"mappings":"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"}
+{"version":3,"file":"timeline.js","sources":["../../../../src/components/ui/timeline/timeline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Avatar, AvatarFallback } from '../avatar';\nimport { ButtonIcon } from '../button-icon';\nimport { Card } from '../card';\n\n// A presentational, chronological *tree* of events — an activity feed / audit\n// log / status history. Each row is an Avatar marker plus a Card carrying the\n// title, an optional tag, the timestamp, a description, and an optional body;\n// rows join their parent through an elbow and their next sibling through a\n// vertical line. It owns structure, the connector geometry, and collapsing only;\n// it never sorts, groups, fetches, or interprets events, and it ships no domain\n// event types or icons. Rendered as a semantic ordered list (`<ol>`/`<li>`);\n// markers and connectors are decorative. Not a temporal chart — use a Line /\n// Area / Composed chart for that.\n//\n// Nesting is **flat**, mirroring the Figma `Nesting` variant: a consumer renders\n// one `Timeline.Item` per entry and declares its `level` (1-3). Depth is never\n// derived from JSX nesting — the level sequence *is* the tree. `Timeline` reads\n// that sequence and derives the rest: which rows get a disclosure control, which\n// rows are dropped when one collapses, and the whole connector geometry — both a\n// row's descending line and the elbow joining a branch's first row to its parent\n// (Figma's `-First`). `connector` and `branchStart` exist only to override those\n// two, and the pair is resolved together so neither half can be drawn alone.\n//\n// Collapsing is the **variant**, not a per-row flag. `tree` gives every row that\n// has descendants a disclosure button ahead of its marker and widens the indent\n// step to reserve it; `default` never collapses anything. There is no `collapsible`\n// prop, because the two would say the same thing: a tree branch nobody can collapse\n// is just `default` with a wider indent.\n//\n// An expandable *card* is a separate, orthogonal axis — `collapsibleBody` puts a\n// chevron at the trailing edge of a row's card header that folds that card's own\n// body (Figma's `Action Button`). It is not a variant: it behaves identically in\n// `default` and `tree`, and a tree row can carry both controls — the branch one\n// drops the rows below, this one folds this card. It lives here only because\n// `Card` cannot do it yet; move it there once it can.\n//\n// Connector geometry is reproduced with logical CSS borders rather than Figma's\n// two exported 1px SVG strokes (a straight line and a right angle): both are\n// design primitives, not iconography, and CSS borders mirror correctly under\n// `dir=\"rtl\"` where a baked-in asset cannot.\n//\n// The design references `components/Timeline/{connectorColor,gap}`, which now\n// ship as a `--ui-timeline-*` tier (imported in `src/styles/index.css`), so this\n// consumes them directly rather than the alias targets it used while the tier\n// was missing.\n//\n// Figma binds `Timeline/gap` to exactly one thing: the row's *horizontal* gap\n// between the marker column and the card (and, through it, the indent step).\n// The vertical rhythm between rows and the card header's own spacing are\n// unbound 16px literals in the design, so they stay on `--ui-gap-16` — do not\n// \"tidy\" them onto the Timeline token, or a future change to `Timeline/gap`\n// would silently retune the vertical layout the design never tied to it.\n\nconst CONNECTOR_COLOR = 'var(--ui-timeline-connector-color)';\n// Load-bearing invariant: the elbow's vertical lands on the parent's connector\n// only while GAP === MARKER / 2 (16 === 32 / 2 today). The elbow is offset from the\n// child's indent while the connector is offset from the parent's marker centre, and\n// those two coincide at exactly that ratio. If either token moves, every elbow\n// detaches — re-derive the elbow's `insetInlineStart` rather than nudging it.\nconst GAP = 'var(--ui-timeline-gap)';\n/** The Avatar marker's own width — also the elbow's horizontal reach. */\nconst MARKER = 'var(--ui-avatar-global-avatar-size)';\n/** Disclosure button + its gap, present only on a `tree` row with descendants. */\nconst TOGGLE =\n  'calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))';\n\ntype TimelineVariant = 'default' | 'tree';\n\nconst TimelineContext = React.createContext<{ variant: TimelineVariant }>({\n  variant: 'default',\n});\n\n/**\n * Per-row disclosure state, resolved by the root so it can also drop the\n * collapsed row's descendants. Null when an item renders outside a `Timeline`,\n * in which case the item falls back to its own state.\n */\nconst TimelineRowContext = React.createContext<{\n  expanded: boolean;\n  connector: boolean;\n  elbow: boolean;\n  hasToggle: boolean;\n  onToggle: () => void;\n} | null>(null);\n\n/** A row's identity for the uncontrolled disclosure map. */\nconst key = (element: React.ReactElement, index: number) =>\n  String(element.key ?? index);\n\nconst timelineVariants = cva('flex flex-col', {\n  variants: {\n    variant: {\n      default: '',\n      tree: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport interface TimelineProps\n  extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {\n  /**\n   * Whether the list collapses. `default` never does; `tree` gives every row that\n   * has descendants a disclosure button ahead of its marker, which hides those\n   * descendants, and widens the indent step to reserve it on every row.\n   *\n   * Unrelated to `Timeline.Item`'s `collapsibleBody`, which folds a single card's\n   * own body and works the same under both variants.\n   */\n  variant?: TimelineVariant;\n  /**\n   * `Timeline.Item`s — pass them as direct children in visual order (never\n   * wrapped in a fragment, or their levels can't be read). Connectors are derived\n   * from the levels, so no row ever leaves a dangling line.\n   */\n  children?: React.ReactNode;\n}\n\nconst TimelineRoot = React.forwardRef<HTMLOListElement, TimelineProps>(\n  ({ className, variant, children, ...props }, ref) => {\n    const resolved = variant ?? 'default';\n    const context = React.useMemo(() => ({ variant: resolved }), [resolved]);\n    const [openState, setOpenState] = React.useState<Record<string, boolean>>(\n      {}\n    );\n\n    const items = React.Children.toArray(children).filter(\n      React.isValidElement\n    ) as React.ReactElement<TimelineItemProps>[];\n\n    // A row has descendants when the row *authored* after it is deeper. Read from\n    // the full child list, never the visible one: a collapsed row must keep its\n    // disclosure control, or there would be no way to expand it again.\n    const levelAt = (index: number) => items[index]?.props.level ?? 1;\n    const hasDescendants = (index: number) =>\n      index + 1 < items.length && levelAt(index + 1) > levelAt(index);\n\n    // Pass 1 — in `tree` mode only, drop the rows beneath a collapsed one. Rows\n    // deeper than a collapsed row are hidden until the level rises back to it; one\n    // cursor is enough, since a nested collapse can only ever narrow the range.\n    const visible: {\n      element: React.ReactElement<TimelineItemProps>;\n      key: string;\n      level: number;\n      expanded: boolean;\n      isControlled: boolean;\n      hasToggle: boolean;\n    }[] = [];\n    let hideBelowLevel: number | null = null;\n\n    items.forEach((element, index) => {\n      const level = element.props.level ?? 1;\n      if (hideBelowLevel !== null && level > hideBelowLevel) return;\n      hideBelowLevel = null;\n\n      const isControlled = element.props.expanded !== undefined;\n      const expanded = isControlled\n        ? Boolean(element.props.expanded)\n        : (openState[key(element, index)] ??\n          element.props.defaultExpanded ??\n          true);\n\n      // Collapsing is the variant, not a per-row opt-in: `tree` rows that have\n      // descendants get the control, `default` rows never do. A tree row without\n      // it would be a branch nobody can collapse — which is just `default` with a\n      // wider indent — so there is nothing for a `collapsible` prop to decide.\n      const hasToggle = resolved === 'tree' && hasDescendants(index);\n\n      if (hasToggle && !expanded) {\n        hideBelowLevel = level;\n      }\n\n      visible.push({\n        element,\n        key: key(element, index),\n        level,\n        expanded,\n        isControlled,\n        hasToggle,\n      });\n    });\n\n    // Pass 2 — the connector and the elbow are two halves of one join, so they are\n    // resolved together and neither can be drawn without the other.\n    //\n    // A row draws the elbow when it is deeper than the row above it: that is what\n    // \"opens a branch\" means, and reading it from the sequence keeps a level jump\n    // from having to be declared twice. `branchStart` overrides it, like\n    // `connector` overrides the descending line.\n    const drawsElbow = (index: number) => {\n      const row = visible[index];\n      if (row == null || row.level <= 1) return false;\n      const previous = visible[index - 1];\n      return (\n        row.element.props.branchStart ??\n        (previous != null && row.level > previous.level)\n      );\n    };\n\n    // A row's connector descends from its own marker to the *next visible* row, so\n    // it may only be drawn when it actually lands on something. Otherwise the line\n    // dangles in the margin: at the end of the list, at the end of a branch, and\n    // (the case that needs the two passes) once a collapse has removed the\n    // descendants it used to point at.\n    const rows = visible.map((row, index) => {\n      const next = visible[index + 1];\n      const reachesNextRow =\n        next != null &&\n        (next.level > row.level\n          ? // A deeper row bridges the gap with its own elbow, which starts exactly\n            // at this row's marker centre — so the line lands only if that elbow is\n            // actually drawn. It normally is, since a level jump derives one; it is\n            // not when the consumer refuses it with `branchStart={false}`, and then\n            // this line has nothing to meet.\n            drawsElbow(index + 1)\n          : next.level === row.level &&\n            // Same level, but a `tree` row that reserves a disclosure button has a\n            // wider marker column than one that doesn't — so their markers sit at\n            // different offsets and a vertical line between them can't be straight.\n            // Figma only ever shows homogeneous siblings, so skip the line instead\n            // of drawing a crooked one.\n            next.hasToggle === row.hasToggle);\n      return (\n        <TimelineRowContext.Provider\n          key={row.key}\n          value={{\n            expanded: row.expanded,\n            connector: row.element.props.connector ?? reachesNextRow,\n            elbow: drawsElbow(index),\n            hasToggle: row.hasToggle,\n            onToggle: () => {\n              const nextExpanded = !row.expanded;\n              row.element.props.onExpandedChange?.(nextExpanded);\n              if (!row.isControlled) {\n                setOpenState((state) => ({\n                  ...state,\n                  [row.key]: nextExpanded,\n                }));\n              }\n            },\n          }}\n        >\n          {row.element}\n        </TimelineRowContext.Provider>\n      );\n    });\n\n    return (\n      <TimelineContext.Provider value={context}>\n        <ol\n          ref={ref}\n          data-variant={resolved}\n          style={\n            {\n              // The indent step is the widest marker column plus the gap: a\n              // `tree` row reserves the disclosure button even when a given row\n              // is a leaf, so every level lines up.\n              '--timeline-step': `calc(${\n                resolved === 'tree' ? `${TOGGLE} + ${MARKER}` : MARKER\n              } + ${GAP})`,\n            } as React.CSSProperties\n          }\n          className={cn(\n            timelineVariants({ variant: resolved }),\n            'gap-[var(--ui-gap-16)]',\n            className\n          )}\n          {...props}\n        >\n          {rows}\n        </ol>\n      </TimelineContext.Provider>\n    );\n  }\n);\nTimelineRoot.displayName = 'Timeline';\n\nexport type TimelineLevel = 1 | 2 | 3;\n\n/** The marker Avatar's color scheme (Figma ships the Timeline marker as Blue). */\nexport type TimelineMarkerColor =\n  | 'blue'\n  | 'gray'\n  | 'green'\n  | 'teal'\n  | 'violet'\n  | 'red'\n  | 'yellow'\n  | 'orange';\n\nexport interface TimelineItemProps extends Omit<\n  React.ComponentProps<'li'>,\n  'title'\n> {\n  /** Event title (the primary line in the card header). */\n  title: React.ReactNode;\n  /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */\n  timestamp?: React.ReactNode;\n  /** Slot beside the title, before the timestamp — e.g. a `Tag`. */\n  tag?: React.ReactNode;\n  /** Optional secondary description under the title. */\n  description?: React.ReactNode;\n  /** Icon rendered inside the marker Avatar. Takes precedence over `initials`. */\n  icon?: React.ReactNode;\n  /** Initials rendered inside the marker Avatar when no `icon` is given. */\n  initials?: string;\n  /** Marker Avatar color scheme. */\n  color?: TimelineMarkerColor;\n  /** Nesting depth (Figma `Nesting` L1-L3). Drives the indent only. */\n  level?: TimelineLevel;\n  /**\n   * Force the elbow joining this row to its parent's connector on or off (Figma's\n   * `Nesting` `-First`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it whenever this row is deeper than the one above it. Ignored at\n   * `level={1}`, which has no parent.\n   */\n  branchStart?: boolean;\n  /**\n   * Force the connector descending to the next row on or off (Figma\n   * `Connecting line`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it only when the next visible row is at this row's depth or deeper.\n   */\n  connector?: boolean;\n  /**\n   * Branch disclosure state (controlled). Only meaningful under `variant=\"tree\"`\n   * on a row that has descendants — those rows get the control automatically.\n   */\n  expanded?: boolean;\n  /** Initial branch disclosure state when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called with the requested disclosure state whenever the control is activated. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the branch disclosure control — the one that drops this\n   * row's descendant rows. Distinct from `bodyToggleLabel` by default, because a\n   * tree row can carry both controls at once.\n   */\n  toggleLabel?: string;\n  /**\n   * Give this row's card a chevron at the trailing edge of its header that shows\n   * and hides the body (Figma's `Action Button`).\n   *\n   * Orthogonal to `variant`: it is the *card's* disclosure, not the timeline's, so\n   * it works the same in `default` and `tree` and a tree row can have both — the\n   * branch control drops the rows below, this one folds this card's own body.\n   * (It lives here only until `Card` grows the behaviour itself.)\n   */\n  collapsibleBody?: boolean;\n  /** Card-body disclosure state (controlled). */\n  bodyExpanded?: boolean;\n  /** Initial card-body disclosure state when uncontrolled. */\n  defaultBodyExpanded?: boolean;\n  /** Called with the requested card-body disclosure state. */\n  onBodyExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the card-body disclosure control — the one that folds this\n   * row's own body. Distinct from `toggleLabel` by default.\n   */\n  bodyToggleLabel?: string;\n  /** Card body, rendered below a divider. */\n  children?: React.ReactNode;\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      title,\n      timestamp,\n      tag,\n      description,\n      icon,\n      initials,\n      color = 'blue',\n      level = 1,\n      branchStart,\n      connector,\n      // Destructured only to keep them off the `<li>`: the root reads them from\n      // `element.props`, because it owns the disclosure state for the whole branch.\n      expanded: expandedProp,\n      defaultExpanded,\n      onExpandedChange,\n      // The two controls can sit in the same `<li>`, so their default names have to\n      // name their own action — a shared generic default would give one row two\n      // buttons that are indistinguishable to a screen reader.\n      toggleLabel = 'Toggle nested events',\n      collapsibleBody = false,\n      bodyExpanded: bodyExpandedProp,\n      defaultBodyExpanded = true,\n      onBodyExpandedChange,\n      bodyToggleLabel = 'Toggle event details',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { variant } = React.useContext(TimelineContext);\n    const row = React.useContext(TimelineRowContext);\n\n    // The card's own disclosure is entirely local — unlike the branch control, it\n    // changes nothing outside this row, so the root has no reason to own it.\n    const [localBodyExpanded, setLocalBodyExpanded] =\n      React.useState(defaultBodyExpanded);\n    const bodyExpanded = bodyExpandedProp ?? localBodyExpanded;\n    const handleBodyToggle = () => {\n      const next = !bodyExpanded;\n      onBodyExpandedChange?.(next);\n      if (bodyExpandedProp === undefined) setLocalBodyExpanded(next);\n    };\n\n    // All three are resolved by the root: `expanded` and the control depend on the\n    // row's descendants, which only the root can see, and it owns the uncontrolled\n    // state so it can drop those descendants too. Rendered outside a `Timeline`\n    // there is no branch at all, so an item is simply never collapsible.\n    const expanded = row?.expanded ?? true;\n    const drawConnector = row ? row.connector : (connector ?? false);\n    // Likewise derived by the root, which is the only place the row above is\n    // visible. Standalone there is no row above, so only the explicit prop can\n    // ask for an elbow — and it has nothing to meet, which is the consumer's call.\n    const drawElbow = row ? row.elbow : Boolean(branchStart) && level > 1;\n    const treeToggle = variant === 'tree' && (row?.hasToggle ?? false);\n    // A `tree` leaf drops the disclosure button, so its own marker column is\n    // narrower than the indent step — the connector tracks the Avatar, not the step.\n    const ownMarker = treeToggle ? `calc(${TOGGLE} + ${MARKER})` : MARKER;\n\n    // Collapsed, the chevron points toward the inline end — so it has to mirror\n    // under RTL; logical positioning can't rotate artwork.\n    const chevron = (\n      open: boolean,\n      label: string,\n      onClick: () => void\n    ) => (\n      <ButtonIcon\n        type=\"button\"\n        aria-label={label}\n        aria-expanded={open}\n        onClick={onClick}\n        className={cn(\n          'shrink-0 transition-transform',\n          !open && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      >\n        <ChevronDownIcon />\n      </ButtonIcon>\n    );\n\n    return (\n      <li\n        ref={ref}\n        data-level={level}\n        data-branch-start={drawElbow || undefined}\n        data-expanded={treeToggle ? expanded : undefined}\n        data-body-expanded={collapsibleBody ? bodyExpanded : undefined}\n        style={\n          {\n            '--timeline-indent': `calc(var(--timeline-step) * ${level - 1})`,\n            '--timeline-marker': ownMarker,\n          } as React.CSSProperties\n        }\n        className={cn(\n          'relative flex items-start gap-[var(--ui-timeline-gap)]',\n          'ps-[var(--timeline-indent)]',\n          className\n        )}\n        {...props}\n      >\n        {drawConnector && (\n          <span\n            data-slot=\"timeline-connector\"\n            aria-hidden\n            // Descends from the marker's lower edge into the row gap, meeting\n            // the next row's elbow (or its marker) exactly.\n            className=\"absolute top-[var(--ui-avatar-global-avatar-size)] bottom-[calc(var(--ui-gap-16)*-1)] w-px\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) + var(--timeline-marker) - ${MARKER} / 2)`,\n              backgroundColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n        {drawElbow && (\n          <span\n            data-slot=\"timeline-elbow\"\n            aria-hidden\n            // A right angle: down the parent's connector line, then across to\n            // this row's marker column. `border-s`/`border-b` mirror in RTL.\n            className=\"absolute top-0 h-[calc(var(--ui-avatar-global-avatar-size)/2)] w-[var(--ui-avatar-global-avatar-size)] border-b border-s\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) - ${MARKER})`,\n              borderColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n\n        {/* Marker column: the optional tree disclosure button, then the Avatar. */}\n        <div className=\"relative flex shrink-0 items-center gap-[var(--ui-gap-8)]\">\n          {treeToggle && chevron(expanded, toggleLabel, () => row?.onToggle())}\n          <Avatar\n            aria-hidden\n            color={color}\n            // The Figma Timeline marker carries no stroke, so Avatar's 2px outset\n            // ring (which exists to separate overlapping avatars in a group) is\n            // switched off here.\n            className=\"[box-shadow:none] [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0\"\n          >\n            {icon ??\n              (initials ? <AvatarFallback>{initials}</AvatarFallback> : null)}\n          </Avatar>\n        </div>\n\n        {/* Content column: a Card header, plus an optional body below a divider. */}\n        <Card className=\"min-w-0 flex-1 shadow-none\">\n          <div className=\"flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2\">\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              <div className=\"flex h-8 items-center gap-[var(--ui-gap-8)]\">\n                <span className=\"truncate text-base font-medium leading-6 text-foreground\">\n                  {title}\n                </span>\n                {(tag != null || timestamp != null) && (\n                  <div className=\"flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]\">\n                    {tag}\n                    {timestamp != null && (\n                      <span className=\"whitespace-nowrap text-xs leading-4 text-muted-foreground\">\n                        {timestamp}\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              {description != null && (\n                <div className=\"flex items-center pb-1\">\n                  <span className=\"truncate text-xs leading-4 text-muted-foreground\">\n                    {description}\n                  </span>\n                </div>\n              )}\n            </div>\n            {collapsibleBody &&\n              chevron(bodyExpanded, bodyToggleLabel, handleBodyToggle)}\n          </div>\n          {children != null && (!collapsibleBody || bodyExpanded) && (\n            <div className=\"border-t border-border py-2\">{children}</div>\n          )}\n        </Card>\n      </li>\n    );\n  }\n);\nTimelineItem.displayName = 'Timeline.Item';\n\nconst Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });\n\nexport { Timeline, TimelineItem };\n"],"names":["CONNECTOR_COLOR","GAP","MARKER","TOGGLE","TimelineContext","React","TimelineRowContext","key","element","index","timelineVariants","cva","TimelineRoot","className","variant","children","props","ref","resolved","context","openState","setOpenState","items","levelAt","_a","hasDescendants","visible","hideBelowLevel","level","isControlled","expanded","hasToggle","drawsElbow","row","previous","rows","next","reachesNextRow","jsx","nextExpanded","_b","state","cn","TimelineItem","title","timestamp","tag","description","icon","initials","color","branchStart","connector","expandedProp","defaultExpanded","onExpandedChange","toggleLabel","collapsibleBody","bodyExpandedProp","defaultBodyExpanded","onBodyExpandedChange","bodyToggleLabel","localBodyExpanded","setLocalBodyExpanded","bodyExpanded","handleBodyToggle","drawConnector","drawElbow","treeToggle","ownMarker","chevron","open","label","onClick","ButtonIcon","ChevronDownIcon","jsxs","Avatar","AvatarFallback","Card","Timeline"],"mappings":"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"}

package/dist/components/ui/timer/timer.js

@@ -0,0 +1,47 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import * as m from "react";
+import { cn as i } from "../../../lib/utils.js";
+import { ButtonGroup as c } from "../button-group/button-group.js";
+const u = m.forwardRef(
+  ({ className: t, value: o, children: r, actionsLabel: n = "Timer actions", ...a }, l) => /* @__PURE__ */ d(
+    "div",
+    {
+      ref: l,
+      className: i(
+        // `overflow-hidden` clips the trailing action's hover fill and inset
+        // focus ring to the container's radius — the same reason ButtonGroup
+        // needs it, one level up.
+        "inline-flex h-[var(--ui-timer-container-height)] w-fit items-center overflow-hidden",
+        "rounded-[var(--ui-timer-container-radius)] bg-[var(--ui-timer-container-color)]",
+        "border-[length:var(--ui-timer-container-border-width)] border-[color:var(--ui-timer-container-border-color)] [border-style:var(--ui-timer-container-border-style)]",
+        t
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            role: "timer",
+            className: i(
+              "ui-timer-value-text-style flex h-full shrink-0 items-center whitespace-nowrap",
+              "px-[var(--ui-timer-content-box-padding-x)] text-[var(--ui-timer-value-color)]",
+              "[font-variant-numeric:var(--ui-timer-value-font-variant-numeric)]",
+              // The divider is the readout's own inline-end border, as in Figma,
+              // and is derived from the DOM rather than a prop: with no actions the
+              // readout is the last child and the border is dropped. `border-e-*`
+              // (not `border-r-*`) so it flips under `dir="rtl"`.
+              "border-e-[length:var(--ui-timer-content-box-divider-width)] border-[color:var(--ui-timer-content-box-divider-color)] [border-inline-end-style:var(--ui-timer-content-box-divider-style)] last:border-e-0"
+            ),
+            children: o
+          }
+        ),
+        r ? /* @__PURE__ */ e(c, { variant: "inlined", "aria-label": n, children: r }) : null
+      ]
+    }
+  )
+);
+u.displayName = "Timer";
+export {
+  u as Timer
+};
+//# sourceMappingURL=timer.js.map

package/dist/components/ui/timer/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sources":["../../../../src/components/ui/timer/timer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { ButtonGroup } from '@/components/ui/button-group';\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Timer\" component (node 7987:25477): a bordered 32px pill\n// holding an elapsed-time readout, hairline-separated from a cluster of\n// icon-only actions.\n//\n// Figma models exactly two properties on it — `value` (TEXT) and the nested\n// ButtonGroup's `ListItem` slot — so that is the whole API: a required `value`\n// and variadic `children`. There is no variant axis and no design-defined\n// state, so no `cva` here.\n//\n// The action cluster is a real `ButtonGroup` with `variant=\"inlined\"` (the\n// design instantiates it exactly that way) because the Timer container already\n// draws the border and radius an `outlined` group would duplicate. Composing it\n// rather than re-implementing the item box keeps the separators, the roving\n// tabindex, and the hover/active/focus fills in one place — which is also why\n// the actions are plain `ButtonGroupItem` children rather than a Timer-specific\n// alias of it.\n//\n// The Timer does NOT tick: it renders whatever it is given. Formatting and the\n// interval belong to the consumer, who owns the clock the actions operate on.\n\nexport interface TimerProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /**\n   * The formatted time to display, e.g. `\"12:01:45\"`. Rendered with tabular\n   * figures so the readout doesn't jitter as the digits change. The component\n   * neither ticks nor formats — pass an already-formatted value.\n   */\n  value: React.ReactNode;\n  /**\n   * The actions, as `ButtonGroupItem` elements in visual order. Omit them for a\n   * read-only readout — with no actions the divider is dropped too.\n   */\n  children?: React.ReactNode;\n  /**\n   * Accessible name for the action cluster's toolbar. Localize it; the default\n   * is English.\n   */\n  actionsLabel?: string;\n}\n\n/**\n * An elapsed-time readout paired with a cluster of icon-only actions.\n *\n * The readout is a `role=\"timer\"` live region — implicitly `aria-live=\"off\"`,\n * so it is not announced on every tick. Each action needs its own accessible\n * name; the cluster as a whole is named by `actionsLabel`.\n */\nconst Timer = React.forwardRef<HTMLDivElement, TimerProps>(\n  (\n    { className, value, children, actionsLabel = 'Timer actions', ...props },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        // `overflow-hidden` clips the trailing action's hover fill and inset\n        // focus ring to the container's radius — the same reason ButtonGroup\n        // needs it, one level up.\n        'inline-flex h-[var(--ui-timer-container-height)] w-fit items-center overflow-hidden',\n        'rounded-[var(--ui-timer-container-radius)] bg-[var(--ui-timer-container-color)]',\n        'border-[length:var(--ui-timer-container-border-width)] border-[color:var(--ui-timer-container-border-color)] [border-style:var(--ui-timer-container-border-style)]',\n        className\n      )}\n      {...props}\n    >\n      <div\n        role=\"timer\"\n        className={cn(\n          'ui-timer-value-text-style flex h-full shrink-0 items-center whitespace-nowrap',\n          'px-[var(--ui-timer-content-box-padding-x)] text-[var(--ui-timer-value-color)]',\n          '[font-variant-numeric:var(--ui-timer-value-font-variant-numeric)]',\n          // The divider is the readout's own inline-end border, as in Figma,\n          // and is derived from the DOM rather than a prop: with no actions the\n          // readout is the last child and the border is dropped. `border-e-*`\n          // (not `border-r-*`) so it flips under `dir=\"rtl\"`.\n          'border-e-[length:var(--ui-timer-content-box-divider-width)] border-[color:var(--ui-timer-content-box-divider-color)] [border-inline-end-style:var(--ui-timer-content-box-divider-style)] last:border-e-0'\n        )}\n      >\n        {value}\n      </div>\n      {children ? (\n        <ButtonGroup variant=\"inlined\" aria-label={actionsLabel}>\n          {children}\n        </ButtonGroup>\n      ) : null}\n    </div>\n  )\n);\nTimer.displayName = 'Timer';\n\nexport { Timer };\n"],"names":["Timer","React","className","value","children","actionsLabel","props","ref","jsxs","cn","jsx","ButtonGroup"],"mappings":";;;;AAoDA,MAAMA,IAAQC,EAAM;AAAA,EAClB,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,cAAAC,IAAe,iBAAiB,GAAGC,KACjEC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA,QACA;AAAA,QACA;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA;AAAA;AAAA;AAAA,cAKA;AAAA,YAAA;AAAA,YAGD,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC,sBACEO,GAAA,EAAY,SAAQ,WAAU,cAAYN,GACxC,UAAAD,GACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAM,cAAc;"}