@acronis-platform/ui-react 1.0.0 → 3.0.0

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/toast/toast.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as u } from "react/jsx-runtime";
 import { Toast as r } from "@base-ui/react/toast";
 import { cva as v } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { TimesIcon as m } from "@acronis-platform/icons-react/stroke-mono";
-import { DiamondWarningRedIcon as x, CircleWarningOrangeIcon as w, TriangleWarningYellowIcon as h, CircleCheckGreenIcon as y, CircleInfoBlueIcon as C } from "@acronis-platform/icons-react/stroke-multi";
+import { DiamondWarningRedIcon as x, CircleWarningOrangeIcon as w, TriangleWarningYellowIcon as y, CircleCheckGreenIcon as h, CircleInfoBlueIcon as C } from "@acronis-platform/icons-react/stroke-multi";
 import { cn as N } from "../../../lib/utils.js";
 import { usePortalContainer as T } from "../../../lib/portal-container.js";
 import { Spinner as I } from "../spinner/spinner.js";
@@ -26,8 +26,8 @@ const _ = v(
   }
 ), B = {
   info: C,
-  success: y,
-  warning: h,
+  success: h,
+  warning: y,
   critical: w,
   danger: x
 }, P = {
@@ -40,12 +40,12 @@ const _ = v(
   loading: "info"
 }, d = r.createToastManager();
 function s(t, a, n = {}) {
-  const { actions: e, dismissable: l, ...i } = n;
+  const { actions: i, dismissable: l, ...e } = n;
   return d.add({
     title: t,
     type: a,
-    data: { actions: e, dismissable: l },
-    ...i
+    data: { actions: i, dismissable: l },
+    ...e
   });
 }
 const G = Object.assign(
@@ -65,16 +65,16 @@ function S({ closeAriaLabel: t }) {
   const { toasts: a } = r.useToastManager();
   return a.map((n) => {
     var b, p;
-    const e = P[n.type ?? ""] ?? "info", l = B[e], i = (b = n.data) == null ? void 0 : b.actions, c = ((p = n.data) == null ? void 0 : p.dismissable) ?? !0;
+    const i = P[n.type ?? ""] ?? "info", l = B[i], e = (b = n.data) == null ? void 0 : b.actions, c = ((p = n.data) == null ? void 0 : p.dismissable) ?? !0;
     return /* @__PURE__ */ u(
       r.Root,
       {
         toast: n,
         "data-slot": "toast",
-        "data-variant": e,
+        "data-variant": i,
         swipeDirection: c ? void 0 : [],
         className: N(
-          _({ variant: e }),
+          _({ variant: i }),
           "transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
           // The stack sits on the inline-end edge, so a toast slides in from the
           // right in LTR and from the left in RTL.
@@ -113,7 +113,7 @@ function S({ closeAriaLabel: t }) {
                         {
                           "data-slot": "toast-title",
                           render: /* @__PURE__ */ o("h5", {}),
-                          className: "ui-typography-headings-lead mb-0 w-full text-[var(--ui-toast-global-content-text-container-title-color)]"
+                          className: "ui-toast-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-toast-global-content-text-container-title-color)]"
                         }
                       ),
                       n.description ? /* @__PURE__ */ o(
@@ -126,12 +126,12 @@ function S({ closeAriaLabel: t }) {
                     ]
                   }
                 ),
-                i != null && i.length ? /* @__PURE__ */ o(
+                e != null && e.length ? /* @__PURE__ */ o(
                   "div",
                   {
                     "data-slot": "toast-actions",
                     className: "flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-toast-global-content-actions-container-gap-x)] gap-y-[var(--ui-toast-global-content-actions-container-gap-y)] px-[var(--ui-toast-global-content-actions-container-padding-x)] py-[var(--ui-toast-global-content-actions-container-padding-y)]",
-                    children: i.map((g, f) => /* @__PURE__ */ o(
+                    children: e.map((g, f) => /* @__PURE__ */ o(
                       k,
                       {
                         variant: g.variant ?? (f === 0 ? "secondary" : "ghost"),
@@ -163,10 +163,10 @@ function L({
   timeout: t,
   limit: a,
   label: n = "Notifications",
-  closeAriaLabel: e = "Close",
+  closeAriaLabel: i = "Close",
   portalContainer: l
 }) {
-  const i = T(), c = l ?? i;
+  const e = T(), c = l ?? e;
   return /* @__PURE__ */ o(
     r.Provider,
     {
@@ -178,7 +178,7 @@ function L({
         {
           "aria-label": n,
           className: "fixed bottom-4 end-4 z-[100] flex w-[var(--ui-toast-global-container-width-min)] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none",
-          children: /* @__PURE__ */ o(S, { closeAriaLabel: e })
+          children: /* @__PURE__ */ o(S, { closeAriaLabel: i })
         }
       ) })
     }

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

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Spinner } from '../spinner';\n\n// Mirrors the Figma \"Toast\" component set (node 7421:126262), which is the Alert\n// banner plus a drop shadow: a *neutral* surface — not a status tint — with the\n// severity carried by a 1px border in the status color and a 6px status line down\n// the leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-toast-*` tier (imported in `src/styles/index.css`).\n//\n// The delivery mechanism is unchanged from the Sonner-compatible port: a single\n// `<Toaster />` at the app root plus the imperative `toast(...)` API, built on the\n// Base UI toast manager (no Sonner dependency). Only the rendered surface and the\n// variant vocabulary changed.\n//\n// The Figma's `hasDescription` / `hasActions` / `dismissable` booleans map onto\n// per-toast options rather than props, since there is no per-toast component to\n// take them: omitting `description` or `actions` drops those parts, and\n// `dismissable: false` drops the close control. `dismissable` also has to switch\n// off Base UI's swipe-to-dismiss, which is on by default — see the `Root` below.\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the generated classes rather than hand-written utilities:\n// `ui-typography-headings-lead` is the title's Figma text style (Inter Regular\n// 18 / 24 — the same treatment Alert's title uses) and the Toast tier emits its\n// own class for the description (Inter Regular 14 / 24). Only the *colors* are\n// separate token references.\n//\n// One deliberate deviation from the Figma: `container/widthMin` (384px) is applied\n// to the viewport, not to the card. A fixed-position stack with a 384px\n// `min-width` overflows a narrow phone viewport (min-width always beats\n// max-width), so the viewport owns the width and clamps it with `max-w`, and the\n// card just fills it.\nconst toastVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'gap-[var(--ui-toast-global-container-gap)] ' +\n    'px-[var(--ui-toast-global-container-padding-x)] py-[var(--ui-toast-global-container-padding-y)] ' +\n    'rounded-[var(--ui-toast-global-container-border-radius)] ' +\n    'border-[length:var(--ui-toast-global-container-border-width)] ' +\n    'bg-[var(--ui-toast-global-container-background)] ' +\n    'shadow-[var(--ui-toast-global-container-shadow)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-toast-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-toast-info-border-color)] before:bg-[var(--ui-toast-info-left-line)]',\n        success:\n          'border-[color:var(--ui-toast-success-border-color)] before:bg-[var(--ui-toast-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-toast-warning-border-color)] before:bg-[var(--ui-toast-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-toast-critical-border-color)] before:bg-[var(--ui-toast-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-toast-danger-border-color)] before:bg-[var(--ui-toast-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type ToastVariant = NonNullable<\n  VariantProps<typeof toastVariants>['variant']\n>;\n\n/**\n * A toast's kind. The five severities match the Figma variants; `loading` has no\n * Figma variant — it is the spinner state `toast.promise` needs.\n */\nexport type ToastType = ToastVariant | 'loading';\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so nothing here tints them.\nconst STATUS_ICON: Record<ToastVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\n// Base UI's `promise` helper hardcodes `type: 'loading' | 'success' | 'error'`\n// *after* spreading the caller's options, so `'error'` reaches us even though the\n// public API only offers `toast.danger` — it has to resolve to the danger chrome.\n// `loading` has no Figma variant, so its spinner borrows info's border and status\n// line. Anything else (including a bare `toast(...)`) falls back to info, the\n// Figma's default variant.\nconst VARIANT_BY_TYPE: Record<string, ToastVariant> = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  critical: 'critical',\n  danger: 'danger',\n  error: 'danger',\n  loading: 'info',\n};\n\nexport interface ToastAction {\n  /** The button's label. */\n  label: React.ReactNode;\n  /** Invoked on click. The toast is not dismissed automatically. */\n  onClick?: () => void;\n  /**\n   * Button style. Defaults to `secondary` for the first action and `ghost` for\n   * the rest, matching the Figma's button pairing.\n   */\n  variant?: 'secondary' | 'ghost';\n}\n\n/** Custom per-toast payload carried through the Base UI manager. */\ninterface ToastData {\n  actions?: ToastAction[];\n  dismissable?: boolean;\n}\n\n// A module-level manager so `toast(...)` works outside React (like Sonner's\n// `toast`). `<Toaster />` subscribes this manager to its provider.\n//\n// Module-level means it is a *per-package-instance* singleton, which matters in a\n// micro-frontend host. Two copies of this package — an MFE bundling its own, or\n// module federation without `singleton: true` — get two independent managers, and\n// then `toast(...)` called through one copy is invisible to the `<Toaster />`\n// rendered by the other: the toast is queued and simply never appears. Two\n// `<Toaster />`s also both pin to `bottom-4 end-4`, so they overlap in the same\n// corner, and `timeout` / `limit` are per-region props that drift independently.\n//\n// So: share one ui-react instance across MFEs and mount exactly one `<Toaster />`\n// for the page (typically in the shell). See apps/docs `shadow-dom.mdx` for the\n// MFE integration contract, and use `PortalContainerProvider` when the single\n// region has to render inside a shadow root.\nconst toastManager = ToastPrimitive.createToastManager<ToastData>();\n\nexport interface ToastOptions {\n  /** Secondary line under the title; clamped to three lines. */\n  description?: React.ReactNode;\n  /** Auto-dismiss delay in ms; `0` keeps the toast until dismissed. */\n  timeout?: number;\n  /** Action buttons rendered in a wrapping row under the text. */\n  actions?: ToastAction[];\n  /**\n   * Whether the toast shows its dismiss control and can be swiped away.\n   * Defaults to `true`. A non-dismissable toast with `timeout: 0` can only be\n   * removed with `toast.dismiss(id)`.\n   */\n  dismissable?: boolean;\n  /** Stable id — re-adding with the same id updates the toast in place. */\n  id?: string;\n}\n\nfunction add(title: React.ReactNode, type?: ToastType, options: ToastOptions = {}) {\n  const { actions, dismissable, ...rest } = options;\n  return toastManager.add({\n    title,\n    type,\n    data: { actions, dismissable },\n    ...rest,\n  });\n}\n\n/**\n * Imperative toast API. `toast(title, options)` shows an info toast;\n * `toast.info` / `success` / `warning` / `critical` / `danger` set the severity\n * and `toast.loading` shows a persistent spinner. `toast.dismiss(id?)` closes one\n * (or all) and `toast.promise` ties a toast to a promise's lifecycle.\n */\nconst toast = Object.assign(\n  (title: React.ReactNode, options?: ToastOptions) => add(title, undefined, options),\n  {\n    info: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'info', options),\n    success: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'success', options),\n    warning: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'warning', options),\n    critical: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'critical', options),\n    danger: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'danger', options),\n    loading: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'loading', { timeout: 0, ...options }),\n    dismiss: (id?: string) => toastManager.close(id),\n    promise: toastManager.promise,\n  }\n);\n\nfunction ToastList({ closeAriaLabel }: { closeAriaLabel: string }) {\n  const { toasts } = ToastPrimitive.useToastManager<ToastData>();\n  return toasts.map((item) => {\n    const variant = VARIANT_BY_TYPE[item.type ?? ''] ?? 'info';\n    const StatusIcon = STATUS_ICON[variant];\n    const actions = item.data?.actions;\n    const dismissable = item.data?.dismissable ?? true;\n    return (\n      <ToastPrimitive.Root\n        key={item.id}\n        toast={item}\n        data-slot=\"toast\"\n        data-variant={variant}\n        // Base UI enables swipe-to-dismiss by default (`['down', 'right']`), so\n        // a non-dismissable toast has to opt out of it too — otherwise hiding\n        // the close button would only hide the *control*, not the capability.\n        swipeDirection={dismissable ? undefined : []}\n        className={cn(\n          toastVariants({ variant }),\n          'transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n          // The stack sits on the inline-end edge, so a toast slides in from the\n          // right in LTR and from the left in RTL.\n          'data-[ending-style]:translate-x-4 data-[starting-style]:translate-x-4',\n          'rtl:data-[ending-style]:-translate-x-4 rtl:data-[starting-style]:-translate-x-4'\n        )}\n      >\n        {/* The icon box's padding (4/8) is what optically aligns the 16px glyph\n            with the first line of the title: glyph centre 8 + 8 = 16, title\n            centre (the text block's 4px padding) 4 + 12 = 16. */}\n        <div\n          data-slot=\"toast-icon\"\n          className=\"flex shrink-0 items-start px-[var(--ui-toast-global-icon-padding-x)] py-[var(--ui-toast-global-icon-padding-y)] [&_svg]:size-[var(--ui-toast-global-icon-size)] [&_svg]:shrink-0\"\n        >\n          {item.type === 'loading' ? (\n            <Spinner\n              size=\"sm\"\n              className=\"size-[var(--ui-toast-global-icon-size)]\"\n            />\n          ) : (\n            <StatusIcon size={16} />\n          )}\n        </div>\n        <div\n          data-slot=\"toast-content\"\n          className=\"flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-toast-global-content-gap)] px-[var(--ui-toast-global-content-padding-x)] py-[var(--ui-toast-global-content-padding-y)]\"\n        >\n          <div\n            data-slot=\"toast-text\"\n            className=\"flex w-full shrink-0 flex-col items-start gap-[var(--ui-toast-global-content-text-container-gap)] px-[var(--ui-toast-global-content-text-container-padding-x)] py-[var(--ui-toast-global-content-text-container-padding-y)] [word-break:break-word]\"\n          >\n            <ToastPrimitive.Title\n              data-slot=\"toast-title\"\n              // `h5` overrides Base UI's `h2` default to match Alert — a toast\n              // is not a page-level heading.\n              render={<h5 />}\n              className=\"ui-typography-headings-lead mb-0 w-full text-[var(--ui-toast-global-content-text-container-title-color)]\"\n            />\n            {item.description ? (\n              <ToastPrimitive.Description\n                data-slot=\"toast-description\"\n                className=\"ui-toast-global-content-text-container-description-text-style line-clamp-3 w-full text-[var(--ui-toast-global-content-text-container-description-color)]\"\n              />\n            ) : null}\n          </div>\n          {actions?.length ? (\n            <div\n              data-slot=\"toast-actions\"\n              className=\"flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-toast-global-content-actions-container-gap-x)] gap-y-[var(--ui-toast-global-content-actions-container-gap-y)] px-[var(--ui-toast-global-content-actions-container-padding-x)] py-[var(--ui-toast-global-content-actions-container-padding-y)]\"\n            >\n              {actions.map((action, index) => (\n                <Button\n                  key={index}\n                  variant={action.variant ?? (index === 0 ? 'secondary' : 'ghost')}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              ))}\n            </div>\n          ) : null}\n        </div>\n        {dismissable ? (\n          <ToastPrimitive.Close\n            aria-label={closeAriaLabel}\n            data-slot=\"toast-close\"\n            render={\n              <ButtonIcon variant=\"ghost\">\n                <TimesIcon />\n              </ButtonIcon>\n            }\n          />\n        ) : null}\n      </ToastPrimitive.Root>\n    );\n  });\n}\n\nexport interface ToasterProps {\n  /** Default auto-dismiss delay in ms for toasts that don't set one. */\n  timeout?: number;\n  /** Max toasts shown at once; the oldest is dropped past the limit. */\n  limit?: number;\n  /** Accessible name for the toast region. */\n  label?: string;\n  /** Accessible name for each toast's dismiss control. */\n  closeAriaLabel?: string;\n  /**\n   * Portal container for the toast stack. Pass a shadow-root mount for\n   * isolated-style previews (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: ToastPrimitive.Portal.Props['container'];\n}\n\n/**\n * The toast region. Render once near the app root; it portals a bottom-end stack\n * and renders every queued toast. Trigger toasts with the `toast` API.\n */\nfunction Toaster({\n  timeout,\n  limit,\n  label = 'Notifications',\n  closeAriaLabel = 'Close',\n  portalContainer,\n}: ToasterProps) {\n  const ctxContainer = usePortalContainer();\n  const resolvedContainer = portalContainer ?? ctxContainer;\n\n  return (\n    <ToastPrimitive.Provider\n      toastManager={toastManager}\n      timeout={timeout}\n      limit={limit}\n    >\n      <ToastPrimitive.Portal container={resolvedContainer}>\n        <ToastPrimitive.Viewport\n          aria-label={label}\n          className=\"fixed bottom-4 end-4 z-[100] flex w-[var(--ui-toast-global-container-width-min)] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none\"\n        >\n          <ToastList closeAriaLabel={closeAriaLabel} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nexport { toast, Toaster, toastVariants };\n"],"names":["toastVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","VARIANT_BY_TYPE","toastManager","ToastPrimitive","add","title","type","options","actions","dismissable","rest","toast","id","ToastList","closeAriaLabel","toasts","item","variant","StatusIcon","_a","_b","jsxs","cn","jsx","Spinner","action","index","Button","ButtonIcon","TimesIcon","Toaster","timeout","limit","label","portalContainer","ctxContainer","usePortalContainer","resolvedContainer"],"mappings":"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"}
+{"version":3,"file":"toast.js","sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Spinner } from '../spinner';\n\n// Mirrors the Figma \"Toast\" component set (node 7421:126262), which is the Alert\n// banner plus a drop shadow: a *neutral* surface — not a status tint — with the\n// severity carried by a 1px border in the status color and a 6px status line down\n// the leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-toast-*` tier (imported in `src/styles/index.css`).\n//\n// The delivery mechanism is unchanged from the Sonner-compatible port: a single\n// `<Toaster />` at the app root plus the imperative `toast(...)` API, built on the\n// Base UI toast manager (no Sonner dependency). Only the rendered surface and the\n// variant vocabulary changed.\n//\n// The Figma's `hasDescription` / `hasActions` / `dismissable` booleans map onto\n// per-toast options rather than props, since there is no per-toast component to\n// take them: omitting `description` or `actions` drops those parts, and\n// `dismissable: false` drops the close control. `dismissable` also has to switch\n// off Base UI's swipe-to-dismiss, which is on by default — see the `Root` below.\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Toast tier's own emitted classes rather than\n// hand-written utilities: one for the title (Inter Regular 18 / 24 — the same\n// treatment Alert's title uses) and one for the description (Inter Regular\n// 14 / 24). The title previously borrowed the semantic\n// `ui-typography-headings-lead` because the tier emitted no title class; it does\n// now, and the two resolve identically today. Only the *colors* are separate\n// token references.\n//\n// One deliberate deviation from the Figma: `container/widthMin` (384px) is applied\n// to the viewport, not to the card. A fixed-position stack with a 384px\n// `min-width` overflows a narrow phone viewport (min-width always beats\n// max-width), so the viewport owns the width and clamps it with `max-w`, and the\n// card just fills it.\nconst toastVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'gap-[var(--ui-toast-global-container-gap)] ' +\n    'px-[var(--ui-toast-global-container-padding-x)] py-[var(--ui-toast-global-container-padding-y)] ' +\n    'rounded-[var(--ui-toast-global-container-border-radius)] ' +\n    'border-[length:var(--ui-toast-global-container-border-width)] ' +\n    'bg-[var(--ui-toast-global-container-background)] ' +\n    'shadow-[var(--ui-toast-global-container-shadow)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-toast-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-toast-info-border-color)] before:bg-[var(--ui-toast-info-left-line)]',\n        success:\n          'border-[color:var(--ui-toast-success-border-color)] before:bg-[var(--ui-toast-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-toast-warning-border-color)] before:bg-[var(--ui-toast-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-toast-critical-border-color)] before:bg-[var(--ui-toast-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-toast-danger-border-color)] before:bg-[var(--ui-toast-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type ToastVariant = NonNullable<\n  VariantProps<typeof toastVariants>['variant']\n>;\n\n/**\n * A toast's kind. The five severities match the Figma variants; `loading` has no\n * Figma variant — it is the spinner state `toast.promise` needs.\n */\nexport type ToastType = ToastVariant | 'loading';\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so nothing here tints them.\nconst STATUS_ICON: Record<ToastVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\n// Base UI's `promise` helper hardcodes `type: 'loading' | 'success' | 'error'`\n// *after* spreading the caller's options, so `'error'` reaches us even though the\n// public API only offers `toast.danger` — it has to resolve to the danger chrome.\n// `loading` has no Figma variant, so its spinner borrows info's border and status\n// line. Anything else (including a bare `toast(...)`) falls back to info, the\n// Figma's default variant.\nconst VARIANT_BY_TYPE: Record<string, ToastVariant> = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  critical: 'critical',\n  danger: 'danger',\n  error: 'danger',\n  loading: 'info',\n};\n\nexport interface ToastAction {\n  /** The button's label. */\n  label: React.ReactNode;\n  /** Invoked on click. The toast is not dismissed automatically. */\n  onClick?: () => void;\n  /**\n   * Button style. Defaults to `secondary` for the first action and `ghost` for\n   * the rest, matching the Figma's button pairing.\n   */\n  variant?: 'secondary' | 'ghost';\n}\n\n/** Custom per-toast payload carried through the Base UI manager. */\ninterface ToastData {\n  actions?: ToastAction[];\n  dismissable?: boolean;\n}\n\n// A module-level manager so `toast(...)` works outside React (like Sonner's\n// `toast`). `<Toaster />` subscribes this manager to its provider.\n//\n// Module-level means it is a *per-package-instance* singleton, which matters in a\n// micro-frontend host. Two copies of this package — an MFE bundling its own, or\n// module federation without `singleton: true` — get two independent managers, and\n// then `toast(...)` called through one copy is invisible to the `<Toaster />`\n// rendered by the other: the toast is queued and simply never appears. Two\n// `<Toaster />`s also both pin to `bottom-4 end-4`, so they overlap in the same\n// corner, and `timeout` / `limit` are per-region props that drift independently.\n//\n// So: share one ui-react instance across MFEs and mount exactly one `<Toaster />`\n// for the page (typically in the shell). See apps/docs `shadow-dom.mdx` for the\n// MFE integration contract, and use `PortalContainerProvider` when the single\n// region has to render inside a shadow root.\nconst toastManager = ToastPrimitive.createToastManager<ToastData>();\n\nexport interface ToastOptions {\n  /** Secondary line under the title; clamped to three lines. */\n  description?: React.ReactNode;\n  /** Auto-dismiss delay in ms; `0` keeps the toast until dismissed. */\n  timeout?: number;\n  /** Action buttons rendered in a wrapping row under the text. */\n  actions?: ToastAction[];\n  /**\n   * Whether the toast shows its dismiss control and can be swiped away.\n   * Defaults to `true`. A non-dismissable toast with `timeout: 0` can only be\n   * removed with `toast.dismiss(id)`.\n   */\n  dismissable?: boolean;\n  /** Stable id — re-adding with the same id updates the toast in place. */\n  id?: string;\n}\n\nfunction add(title: React.ReactNode, type?: ToastType, options: ToastOptions = {}) {\n  const { actions, dismissable, ...rest } = options;\n  return toastManager.add({\n    title,\n    type,\n    data: { actions, dismissable },\n    ...rest,\n  });\n}\n\n/**\n * Imperative toast API. `toast(title, options)` shows an info toast;\n * `toast.info` / `success` / `warning` / `critical` / `danger` set the severity\n * and `toast.loading` shows a persistent spinner. `toast.dismiss(id?)` closes one\n * (or all) and `toast.promise` ties a toast to a promise's lifecycle.\n */\nconst toast = Object.assign(\n  (title: React.ReactNode, options?: ToastOptions) => add(title, undefined, options),\n  {\n    info: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'info', options),\n    success: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'success', options),\n    warning: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'warning', options),\n    critical: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'critical', options),\n    danger: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'danger', options),\n    loading: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'loading', { timeout: 0, ...options }),\n    dismiss: (id?: string) => toastManager.close(id),\n    promise: toastManager.promise,\n  }\n);\n\nfunction ToastList({ closeAriaLabel }: { closeAriaLabel: string }) {\n  const { toasts } = ToastPrimitive.useToastManager<ToastData>();\n  return toasts.map((item) => {\n    const variant = VARIANT_BY_TYPE[item.type ?? ''] ?? 'info';\n    const StatusIcon = STATUS_ICON[variant];\n    const actions = item.data?.actions;\n    const dismissable = item.data?.dismissable ?? true;\n    return (\n      <ToastPrimitive.Root\n        key={item.id}\n        toast={item}\n        data-slot=\"toast\"\n        data-variant={variant}\n        // Base UI enables swipe-to-dismiss by default (`['down', 'right']`), so\n        // a non-dismissable toast has to opt out of it too — otherwise hiding\n        // the close button would only hide the *control*, not the capability.\n        swipeDirection={dismissable ? undefined : []}\n        className={cn(\n          toastVariants({ variant }),\n          'transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n          // The stack sits on the inline-end edge, so a toast slides in from the\n          // right in LTR and from the left in RTL.\n          'data-[ending-style]:translate-x-4 data-[starting-style]:translate-x-4',\n          'rtl:data-[ending-style]:-translate-x-4 rtl:data-[starting-style]:-translate-x-4'\n        )}\n      >\n        {/* The icon box's padding (4/8) is what optically aligns the 16px glyph\n            with the first line of the title: glyph centre 8 + 8 = 16, title\n            centre (the text block's 4px padding) 4 + 12 = 16. */}\n        <div\n          data-slot=\"toast-icon\"\n          className=\"flex shrink-0 items-start px-[var(--ui-toast-global-icon-padding-x)] py-[var(--ui-toast-global-icon-padding-y)] [&_svg]:size-[var(--ui-toast-global-icon-size)] [&_svg]:shrink-0\"\n        >\n          {item.type === 'loading' ? (\n            <Spinner\n              size=\"sm\"\n              className=\"size-[var(--ui-toast-global-icon-size)]\"\n            />\n          ) : (\n            <StatusIcon size={16} />\n          )}\n        </div>\n        <div\n          data-slot=\"toast-content\"\n          className=\"flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-toast-global-content-gap)] px-[var(--ui-toast-global-content-padding-x)] py-[var(--ui-toast-global-content-padding-y)]\"\n        >\n          <div\n            data-slot=\"toast-text\"\n            className=\"flex w-full shrink-0 flex-col items-start gap-[var(--ui-toast-global-content-text-container-gap)] px-[var(--ui-toast-global-content-text-container-padding-x)] py-[var(--ui-toast-global-content-text-container-padding-y)] [word-break:break-word]\"\n          >\n            <ToastPrimitive.Title\n              data-slot=\"toast-title\"\n              // `h5` overrides Base UI's `h2` default to match Alert — a toast\n              // is not a page-level heading.\n              render={<h5 />}\n              className=\"ui-toast-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-toast-global-content-text-container-title-color)]\"\n            />\n            {item.description ? (\n              <ToastPrimitive.Description\n                data-slot=\"toast-description\"\n                className=\"ui-toast-global-content-text-container-description-text-style line-clamp-3 w-full text-[var(--ui-toast-global-content-text-container-description-color)]\"\n              />\n            ) : null}\n          </div>\n          {actions?.length ? (\n            <div\n              data-slot=\"toast-actions\"\n              className=\"flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-toast-global-content-actions-container-gap-x)] gap-y-[var(--ui-toast-global-content-actions-container-gap-y)] px-[var(--ui-toast-global-content-actions-container-padding-x)] py-[var(--ui-toast-global-content-actions-container-padding-y)]\"\n            >\n              {actions.map((action, index) => (\n                <Button\n                  key={index}\n                  variant={action.variant ?? (index === 0 ? 'secondary' : 'ghost')}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              ))}\n            </div>\n          ) : null}\n        </div>\n        {dismissable ? (\n          <ToastPrimitive.Close\n            aria-label={closeAriaLabel}\n            data-slot=\"toast-close\"\n            render={\n              <ButtonIcon variant=\"ghost\">\n                <TimesIcon />\n              </ButtonIcon>\n            }\n          />\n        ) : null}\n      </ToastPrimitive.Root>\n    );\n  });\n}\n\nexport interface ToasterProps {\n  /** Default auto-dismiss delay in ms for toasts that don't set one. */\n  timeout?: number;\n  /** Max toasts shown at once; the oldest is dropped past the limit. */\n  limit?: number;\n  /** Accessible name for the toast region. */\n  label?: string;\n  /** Accessible name for each toast's dismiss control. */\n  closeAriaLabel?: string;\n  /**\n   * Portal container for the toast stack. Pass a shadow-root mount for\n   * isolated-style previews (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: ToastPrimitive.Portal.Props['container'];\n}\n\n/**\n * The toast region. Render once near the app root; it portals a bottom-end stack\n * and renders every queued toast. Trigger toasts with the `toast` API.\n */\nfunction Toaster({\n  timeout,\n  limit,\n  label = 'Notifications',\n  closeAriaLabel = 'Close',\n  portalContainer,\n}: ToasterProps) {\n  const ctxContainer = usePortalContainer();\n  const resolvedContainer = portalContainer ?? ctxContainer;\n\n  return (\n    <ToastPrimitive.Provider\n      toastManager={toastManager}\n      timeout={timeout}\n      limit={limit}\n    >\n      <ToastPrimitive.Portal container={resolvedContainer}>\n        <ToastPrimitive.Viewport\n          aria-label={label}\n          className=\"fixed bottom-4 end-4 z-[100] flex w-[var(--ui-toast-global-container-width-min)] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none\"\n        >\n          <ToastList closeAriaLabel={closeAriaLabel} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nexport { toast, Toaster, toastVariants };\n"],"names":["toastVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","VARIANT_BY_TYPE","toastManager","ToastPrimitive","add","title","type","options","actions","dismissable","rest","toast","id","ToastList","closeAriaLabel","toasts","item","variant","StatusIcon","_a","_b","jsxs","cn","jsx","Spinner","action","index","Button","ButtonIcon","TimesIcon","Toaster","timeout","limit","label","portalContainer","ctxContainer","usePortalContainer","resolvedContainer"],"mappings":"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"}