@acronis-platform/ui-react 0.57.0 → 0.58.0

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

@@ -0,0 +1,129 @@
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import * as t from "react";
+import { ArrowUpIcon as m, ArrowDownIcon as p, ArrowsDownUpIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as l } from "../../../lib/utils.js";
+const f = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ r(
+  "table",
+  {
+    ref: o,
+    className: l(
+      "w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]",
+      a
+    ),
+    ...e
+  }
+) }));
+f.displayName = "Table";
+const v = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r("thead", { ref: o, className: l(a), ...e }));
+v.displayName = "TableHeader";
+const w = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+  "tbody",
+  {
+    ref: o,
+    className: l("[&_tr:last-child]:border-0", a),
+    ...e
+  }
+));
+w.displayName = "TableBody";
+const h = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+  "tfoot",
+  {
+    ref: o,
+    className: l(
+      "border-t border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0",
+      a
+    ),
+    ...e
+  }
+));
+h.displayName = "TableFooter";
+const x = t.forwardRef(
+  ({ className: a, selected: e, ...o }, s) => /* @__PURE__ */ r(
+    "tr",
+    {
+      ref: s,
+      "data-state": e ? "selected" : void 0,
+      className: l(
+        "border-b border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]",
+        a
+      ),
+      ...o
+    }
+  )
+);
+x.displayName = "TableRow";
+function g({ direction: a }) {
+  const e = "size-[var(--ui-table-header-sort-icon-size)]";
+  return a === "asc" ? /* @__PURE__ */ r(m, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ r(p, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ r(u, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
+}
+const N = t.forwardRef(
+  ({
+    className: a,
+    children: e,
+    sortable: o,
+    sortDirection: s = !1,
+    onSort: i,
+    wrap: c,
+    ...d
+  }, n) => /* @__PURE__ */ r(
+    "th",
+    {
+      ref: n,
+      "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : o ? "none" : void 0,
+      className: l(
+        "px-[var(--ui-table-global-cell-padding-x)] text-start align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pe-0",
+        c ? "whitespace-normal" : "h-10",
+        a
+      ),
+      ...d,
+      children: o ? /* @__PURE__ */ b(
+        "button",
+        {
+          type: "button",
+          onClick: i,
+          className: "-mx-1 inline-flex cursor-pointer items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
+          children: [
+            e,
+            /* @__PURE__ */ r(g, { direction: s })
+          ]
+        }
+      ) : e
+    }
+  )
+);
+N.displayName = "TableHead";
+const T = t.forwardRef(
+  ({ className: a, wrap: e, ...o }, s) => /* @__PURE__ */ r(
+    "td",
+    {
+      ref: s,
+      className: l(
+        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pe-0",
+        e ? "whitespace-normal" : "h-10",
+        a
+      ),
+      ...o
+    }
+  )
+);
+T.displayName = "TableCell";
+const y = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+  "caption",
+  {
+    ref: o,
+    className: l("mt-4 text-sm text-muted-foreground", a),
+    ...e
+  }
+));
+y.displayName = "TableCaption";
+export {
+  f as Table,
+  w as TableBody,
+  y as TableCaption,
+  T as TableCell,
+  h as TableFooter,
+  N as TableHead,
+  v as TableHeader,
+  x as TableRow
+};
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell   -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row    -> --ui-table-global-row-border-color, --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • header -> --ui-table-header-{label-color,cell-color-hover,gap}\n//   • sort   -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • data   -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] text-start align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pe-0',\n        wrap ? 'whitespace-normal' : 'h-10',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"-mx-1 inline-flex cursor-pointer items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pe-0',\n        wrap ? 'whitespace-normal' : 'h-10',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","wrap","jsxs","TableCell","TableCaption"],"mappings":"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"}

package/dist/components/ui/tabs/tabs.js

@@ -0,0 +1,44 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as o from "react";
+import { Tabs as r } from "@base-ui/react/tabs";
+import { cn as t } from "../../../lib/utils.js";
+const b = r.Root, n = o.forwardRef(({ className: e, ...s }, a) => /* @__PURE__ */ i(
+  r.List,
+  {
+    ref: a,
+    className: t("inline-flex items-stretch rounded-md", e),
+    ...s
+  }
+));
+n.displayName = "TabsList";
+const d = o.forwardRef(({ className: e, ...s }, a) => /* @__PURE__ */ i(
+  r.Tab,
+  {
+    ref: a,
+    className: t(
+      "-me-px inline-flex flex-1 items-center justify-center whitespace-nowrap border border-secondary px-2 py-1 text-sm font-semibold text-secondary transition-colors first:rounded-s-md last:-me-0 last:rounded-e-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary data-[active]:text-primary-foreground",
+      e
+    ),
+    ...s
+  }
+));
+d.displayName = "TabsTrigger";
+const m = o.forwardRef(({ className: e, ...s }, a) => /* @__PURE__ */ i(
+  r.Panel,
+  {
+    ref: a,
+    className: t(
+      "mt-2 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
+      e
+    ),
+    ...s
+  }
+));
+m.displayName = "TabsContent";
+export {
+  b as Tabs,
+  m as TabsContent,
+  n as TabsList,
+  d as TabsTrigger
+};
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `tabs`\n// (packages/ui-legacy/src/components/ui/tabs.tsx). A bordered segmented-control\n// tab group built on the Base UI Tabs primitive (keyboard nav, roving focus,\n// ARIA come from Base UI). No `--ui-tabs-*` token tier exists yet, so this\n// design-pending v1 themes from the shared semantic tokens:\n//   • trigger idle   -> border-secondary + text-secondary (brand outline segment)\n//   • trigger active -> bg-secondary + text-primary-foreground (data-[active])\n//     — pure-white label (glyph-on-brand-primary), like the default Button;\n//     NOT text-secondary-foreground, which is a dimmed 60% white.\n//   • focus ring     -> var(--ui-focus-primary)\n// NB: the brand action blue is the `secondary` bridge (--ui-background-brand-\n// secondary, the same blue Button's primary uses); `primary` bridges to the\n// dark navy --ui-background-brand-primary, so it is NOT used here.\n// The legacy active treatment was a `bg-primary/10` tint; the opacity hack is\n// dropped for a token-pure filled segment. Reconcile (and a possible\n// `--ui-tabs-*` tier / underline-indicator variant) with\n// `/figma-component Tabs <url> --update` once a mockup lands.\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn('inline-flex items-stretch rounded-md', className)}\n    {...props}\n  />\n));\nTabsList.displayName = 'TabsList';\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Tab>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Tab>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Tab\n    ref={ref}\n    className={cn(\n      '-me-px inline-flex flex-1 items-center justify-center whitespace-nowrap border border-secondary px-2 py-1 text-sm font-semibold text-secondary transition-colors first:rounded-s-md last:-me-0 last:rounded-e-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary data-[active]:text-primary-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nTabsTrigger.displayName = 'TabsTrigger';\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Panel>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Panel>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Panel\n    ref={ref}\n    className={cn(\n      'mt-2 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTabsContent.displayName = 'TabsContent';\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"names":["Tabs","TabsPrimitive","TabsList","React","className","props","ref","jsx","cn","TabsTrigger","TabsContent"],"mappings":";;;;AAuBA,MAAMA,IAAOC,EAAc,MAErBC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAG,wCAAwCJ,CAAS;AAAA,IAC9D,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAc;AAEvB,MAAMO,IAAcN,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAY,cAAc;AAE1B,MAAMC,IAAcP,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAc;AAAA,EAAd;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;"}

package/dist/components/ui/tag/tag.js

@@ -0,0 +1,47 @@
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import * as g from "react";
+import { cva as u } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as s } from "../../../lib/utils.js";
+const v = u(
+  "inline-flex min-w-[var(--ui-tag-global-container-width-min)] max-w-[var(--ui-tag-global-container-width-max)] items-center gap-[var(--ui-tag-global-container-gap)] overflow-hidden rounded-[var(--ui-tag-global-container-border-radius)] border-[length:var(--ui-tag-global-container-border-width)] border-solid border-transparent px-[var(--ui-tag-global-container-padding-x)] align-middle text-xs font-semibold leading-4 [&_svg]:size-[var(--ui-tag-global-md-icon-size)] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        info: "bg-[var(--ui-tag-info-container-color)] border-[var(--ui-tag-info-container-border-color)] text-[var(--ui-tag-info-label-color)] [&_svg]:text-[var(--ui-tag-info-icon-color)]",
+        success: "bg-[var(--ui-tag-success-container-color)] border-[var(--ui-tag-success-container-border-color)] text-[var(--ui-tag-success-label-color)] [&_svg]:text-[var(--ui-tag-success-icon-color)]",
+        warning: "bg-[var(--ui-tag-warning-container-color)] border-[var(--ui-tag-warning-container-border-color)] text-[var(--ui-tag-warning-label-color)] [&_svg]:text-[var(--ui-tag-warning-icon-color)]",
+        critical: "bg-[var(--ui-tag-critical-container-color)] border-[var(--ui-tag-critical-container-border-color)] text-[var(--ui-tag-critical-label-color)] [&_svg]:text-[var(--ui-tag-critical-icon-color)]",
+        danger: "bg-[var(--ui-tag-danger-container-color)] border-[var(--ui-tag-danger-container-border-color)] text-[var(--ui-tag-danger-label-color)] [&_svg]:text-[var(--ui-tag-danger-icon-color)]",
+        neutral: "bg-[var(--ui-tag-neutral-container-color)] border-[var(--ui-tag-neutral-container-border-color)] text-[var(--ui-tag-neutral-label-color)] [&_svg]:text-[var(--ui-tag-neutral-icon-color)]",
+        ai: "text-[var(--ui-tag-ai-label-color)] [&_svg]:text-[var(--ui-tag-ai-icon-color)] [background:linear-gradient(var(--ui-tag-ai-container-color),var(--ui-tag-ai-container-color))_padding-box,var(--ui-tag-ai-container-border-color)_border-box]"
+      },
+      size: {
+        default: "h-[var(--ui-tag-global-md-container-height)]",
+        sm: "h-[var(--ui-tag-global-sm-container-height)]"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "default"
+    }
+  }
+), d = g.forwardRef(
+  ({ className: a, variant: r, size: o, icon: i, children: t, ...e }, n) => /* @__PURE__ */ c(
+    "span",
+    {
+      ref: n,
+      className: s(v({ variant: r, size: o }), a),
+      ...e,
+      children: [
+        i,
+        /* @__PURE__ */ l("span", { className: "min-w-0 truncate", children: t })
+      ]
+    }
+  )
+);
+d.displayName = "Tag";
+export {
+  d as Tag,
+  v as tagVariants
+};
+//# sourceMappingURL=tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":["../../../../src/components/ui/tag/tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact label for a status, category, or keyword. `variant` wires the\n// container fill, border, label, and icon to the dedicated `--ui-tag-*`\n// component tier from @acronis-platform/tokens-pd (one token per part, per\n// variant). Geometry — radius, border width, gap, padding, max/min width, icon\n// size — comes from `--ui-tag-global-*`; `size` only changes the height (24px\n// `default` / 20px `sm`), padding is uniform. The `ai` variant paints a gradient\n// border (`--ui-tag-ai-container-border-color`) over its solid tinted fill via\n// the padding-box / border-box background-clip trick (the border stays\n// transparent so the border-box gradient shows through). The fill is wrapped in\n// a `linear-gradient(color, color)` so it's a background *image* layer — a plain\n// background-color is only valid in the final layer of the `background`\n// shorthand, and as a non-final layer would invalidate the whole declaration.\nconst tagVariants = cva(\n  'inline-flex min-w-[var(--ui-tag-global-container-width-min)] max-w-[var(--ui-tag-global-container-width-max)] items-center gap-[var(--ui-tag-global-container-gap)] overflow-hidden rounded-[var(--ui-tag-global-container-border-radius)] border-[length:var(--ui-tag-global-container-border-width)] border-solid border-transparent px-[var(--ui-tag-global-container-padding-x)] align-middle text-xs font-semibold leading-4 [&_svg]:size-[var(--ui-tag-global-md-icon-size)] [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        info: 'bg-[var(--ui-tag-info-container-color)] border-[var(--ui-tag-info-container-border-color)] text-[var(--ui-tag-info-label-color)] [&_svg]:text-[var(--ui-tag-info-icon-color)]',\n        success:\n          'bg-[var(--ui-tag-success-container-color)] border-[var(--ui-tag-success-container-border-color)] text-[var(--ui-tag-success-label-color)] [&_svg]:text-[var(--ui-tag-success-icon-color)]',\n        warning:\n          'bg-[var(--ui-tag-warning-container-color)] border-[var(--ui-tag-warning-container-border-color)] text-[var(--ui-tag-warning-label-color)] [&_svg]:text-[var(--ui-tag-warning-icon-color)]',\n        critical:\n          'bg-[var(--ui-tag-critical-container-color)] border-[var(--ui-tag-critical-container-border-color)] text-[var(--ui-tag-critical-label-color)] [&_svg]:text-[var(--ui-tag-critical-icon-color)]',\n        danger:\n          'bg-[var(--ui-tag-danger-container-color)] border-[var(--ui-tag-danger-container-border-color)] text-[var(--ui-tag-danger-label-color)] [&_svg]:text-[var(--ui-tag-danger-icon-color)]',\n        neutral:\n          'bg-[var(--ui-tag-neutral-container-color)] border-[var(--ui-tag-neutral-container-border-color)] text-[var(--ui-tag-neutral-label-color)] [&_svg]:text-[var(--ui-tag-neutral-icon-color)]',\n        ai: 'text-[var(--ui-tag-ai-label-color)] [&_svg]:text-[var(--ui-tag-ai-icon-color)] [background:linear-gradient(var(--ui-tag-ai-container-color),var(--ui-tag-ai-container-color))_padding-box,var(--ui-tag-ai-container-border-color)_border-box]',\n      },\n      size: {\n        default: 'h-[var(--ui-tag-global-md-container-height)]',\n        sm: 'h-[var(--ui-tag-global-sm-container-height)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'default',\n    },\n  }\n);\n\nexport interface TagProps\n  extends\n    React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof tagVariants> {\n  /** Optional leading icon, rendered at 16px before the label. */\n  icon?: React.ReactNode;\n}\n\nconst Tag = React.forwardRef<HTMLSpanElement, TagProps>(\n  ({ className, variant, size, icon, children, ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(tagVariants({ variant, size }), className)}\n      {...props}\n    >\n      {icon}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </span>\n  )\n);\nTag.displayName = 'Tag';\n\nexport { Tag, tagVariants };\n"],"names":["tagVariants","cva","Tag","React","className","variant","size","icon","children","props","ref","jsxs","cn","jsx"],"mappings":";;;;AAiBA,MAAMA,IAAcC;AAAA,EAClB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SACE;AAAA,QACF,SACE;AAAA,QACF,UACE;AAAA,QACF,QACE;AAAA,QACF,SACE;AAAA,QACF,IAAI;AAAA,MAAA;AAAA,MAEN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAUMC,IAAMC,EAAM;AAAA,EAChB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,UAAAC,GAAU,GAAGC,KAASC,MACvD,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAGZ,EAAY,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,MACtD,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAAF;AAAA,QACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAL,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD;AACAN,EAAI,cAAc;"}

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

@@ -0,0 +1,175 @@
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import * as a from "react";
+import { cva as C } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as e } from "../../../lib/utils.js";
+const b = a.createContext({
+  size: "medium",
+  density: "default"
+}), z = C("flex flex-col", {
+  variants: {
+    size: {
+      small: "text-xs",
+      medium: "text-sm"
+    },
+    density: {
+      compact: "",
+      default: ""
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    density: "default"
+  }
+}), p = a.forwardRef(
+  ({ className: d, size: s, density: n, children: o, ...u }, r) => {
+    const i = a.useMemo(
+      () => ({ size: s ?? "medium", density: n ?? "default" }),
+      [s, n]
+    );
+    return /* @__PURE__ */ t(b.Provider, { value: i, children: /* @__PURE__ */ t(
+      "ol",
+      {
+        ref: r,
+        "data-size": i.size,
+        "data-density": i.density,
+        className: e(
+          z({ size: s, density: n }),
+          // Hide the connector on the last item — nothing follows it.
+          "[&>li:last-child_[data-slot=timeline-connector]]:hidden",
+          d
+        ),
+        ...u,
+        children: o
+      }
+    ) });
+  }
+);
+p.displayName = "Timeline";
+const T = {
+  neutral: {
+    dot: "bg-[var(--ui-text-on-status-neutral)]",
+    ring: "border-[var(--ui-text-on-status-neutral)]",
+    ringColor: "ring-[var(--ui-text-on-status-neutral)]",
+    badge: "bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]"
+  },
+  info: {
+    dot: "bg-[var(--ui-text-on-status-info)]",
+    ring: "border-[var(--ui-text-on-status-info)]",
+    ringColor: "ring-[var(--ui-text-on-status-info)]",
+    badge: "bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]"
+  },
+  success: {
+    dot: "bg-[var(--ui-text-on-status-success)]",
+    ring: "border-[var(--ui-text-on-status-success)]",
+    ringColor: "ring-[var(--ui-text-on-status-success)]",
+    badge: "bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]"
+  },
+  warning: {
+    dot: "bg-[var(--ui-text-on-status-warning)]",
+    ring: "border-[var(--ui-text-on-status-warning)]",
+    ringColor: "ring-[var(--ui-text-on-status-warning)]",
+    badge: "bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]"
+  },
+  danger: {
+    dot: "bg-[var(--ui-text-on-status-danger)]",
+    ring: "border-[var(--ui-text-on-status-danger)]",
+    ringColor: "ring-[var(--ui-text-on-status-danger)]",
+    badge: "bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]"
+  },
+  critical: {
+    dot: "bg-[var(--ui-text-on-status-critical)]",
+    ring: "border-[var(--ui-text-on-status-critical)]",
+    ringColor: "ring-[var(--ui-text-on-status-critical)]",
+    badge: "bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]"
+  }
+}, y = { small: "size-2", medium: "size-2.5" }, E = { small: "size-6", medium: "size-7" }, _ = { small: 14, medium: 16 }, I = { compact: "pb-4", default: "pb-6" }, h = a.forwardRef(
+  ({
+    className: d,
+    timestamp: s,
+    title: n,
+    description: o,
+    status: u = "neutral",
+    icon: r,
+    metadata: i,
+    actions: v,
+    current: c = !1,
+    disabled: g = !1,
+    children: f,
+    ...N
+  }, k) => {
+    const { size: m, density: w } = a.useContext(b), l = T[u];
+    return /* @__PURE__ */ x(
+      "li",
+      {
+        ref: k,
+        "data-status": u,
+        "data-current": c || void 0,
+        "data-disabled": g || void 0,
+        "aria-disabled": g || void 0,
+        className: e(
+          "flex gap-3",
+          g && "opacity-60 pointer-events-none",
+          d
+        ),
+        ...N,
+        children: [
+          /* @__PURE__ */ x("div", { className: "flex flex-col items-center", children: [
+            r != null ? /* @__PURE__ */ t(
+              "span",
+              {
+                "aria-hidden": !0,
+                className: e(
+                  "flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0",
+                  E[m],
+                  l.badge,
+                  // Ring the badge for a `current` item (same emphasis as the dot).
+                  c && e(
+                    "ring-2 ring-offset-2 ring-offset-background",
+                    l.ringColor
+                  )
+                ),
+                children: a.isValidElement(r) ? a.cloneElement(
+                  r,
+                  { size: _[m] }
+                ) : r
+              }
+            ) : /* @__PURE__ */ t(
+              "span",
+              {
+                "aria-hidden": !0,
+                className: e(
+                  "mt-1 shrink-0 rounded-full",
+                  y[m],
+                  c ? e("border-2 bg-background", l.ring) : l.dot
+                )
+              }
+            ),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                "data-slot": "timeline-connector",
+                "aria-hidden": !0,
+                className: "mt-1 w-px flex-1 bg-border"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ x("div", { className: e("min-w-0 flex-1", I[w]), children: [
+            s != null && /* @__PURE__ */ t("div", { className: "text-xs leading-tight text-muted-foreground", children: s }),
+            /* @__PURE__ */ t("div", { className: "font-medium leading-snug text-foreground", children: n }),
+            o != null && /* @__PURE__ */ t("div", { className: "mt-0.5 text-muted-foreground", children: o }),
+            i != null && /* @__PURE__ */ t("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: i }),
+            v != null && /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: v }),
+            f != null && /* @__PURE__ */ t("div", { className: "mt-2", children: f })
+          ] })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Timeline.Item";
+const S = Object.assign(p, { Item: h });
+export {
+  S as Timeline,
+  h as TimelineItem
+};
+//# sourceMappingURL=timeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sources":["../../../../src/components/ui/timeline/timeline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A presentational, chronological list of events — an activity feed / audit log\n// / status history. It owns structure, the connector line, markers, and the\n// timestamp/title/description hierarchy only; it never sorts, groups, fetches, or\n// interprets events, and it ships no domain event types or icons. Rendered as a\n// semantic ordered list (`<ol>`/`<li>`); the marker + connector are decorative.\n// Compose Tag / Link / Button / Accordion into the slots. Not a temporal chart —\n// use a Line / Area / Composed chart for that.\n\ntype TimelineSize = 'small' | 'medium';\ntype TimelineDensity = 'compact' | 'default';\n\ntype TimelineContextValue = {\n  size: TimelineSize;\n  density: TimelineDensity;\n};\n\nconst TimelineContext = React.createContext<TimelineContextValue>({\n  size: 'medium',\n  density: 'default',\n});\n\nconst timelineVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      small: 'text-xs',\n      medium: 'text-sm',\n    },\n    density: {\n      compact: '',\n      default: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    density: 'default',\n  },\n});\n\nexport interface TimelineProps\n  extends React.ComponentProps<'ol'>,\n    VariantProps<typeof timelineVariants> {\n  /**\n   * `Timeline.Item`s — pass them as direct children (the connector auto-hides on\n   * the last one). Grouping/headings aren't supported as intervening children.\n   */\n  children?: React.ReactNode;\n}\n\nconst TimelineRoot = React.forwardRef<HTMLOListElement, TimelineProps>(\n  ({ className, size, density, children, ...props }, ref) => {\n    const resolved = React.useMemo(\n      () => ({ size: size ?? 'medium', density: density ?? 'default' }),\n      [size, density]\n    );\n    return (\n      <TimelineContext.Provider value={resolved}>\n        <ol\n          ref={ref}\n          data-size={resolved.size}\n          data-density={resolved.density}\n          className={cn(\n            timelineVariants({ size, density }),\n            // Hide the connector on the last item — nothing follows it.\n            '[&>li:last-child_[data-slot=timeline-connector]]:hidden',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ol>\n      </TimelineContext.Provider>\n    );\n  }\n);\nTimelineRoot.displayName = 'Timeline';\n\nexport type TimelineStatus =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'critical';\n\n// Marker colors mirror Metric / the design's status chips: a filled dot (or,\n// with an icon, a `-pressed` badge) in the status family. Neutral reads as the\n// muted foreground.\nconst STATUS_MARKER: Record<\n  TimelineStatus,\n  { dot: string; ring: string; ringColor: string; badge: string }\n> = {\n  neutral: {\n    dot: 'bg-[var(--ui-text-on-status-neutral)]',\n    ring: 'border-[var(--ui-text-on-status-neutral)]',\n    ringColor: 'ring-[var(--ui-text-on-status-neutral)]',\n    badge:\n      'bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]',\n  },\n  info: {\n    dot: 'bg-[var(--ui-text-on-status-info)]',\n    ring: 'border-[var(--ui-text-on-status-info)]',\n    ringColor: 'ring-[var(--ui-text-on-status-info)]',\n    badge:\n      'bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]',\n  },\n  success: {\n    dot: 'bg-[var(--ui-text-on-status-success)]',\n    ring: 'border-[var(--ui-text-on-status-success)]',\n    ringColor: 'ring-[var(--ui-text-on-status-success)]',\n    badge:\n      'bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]',\n  },\n  warning: {\n    dot: 'bg-[var(--ui-text-on-status-warning)]',\n    ring: 'border-[var(--ui-text-on-status-warning)]',\n    ringColor: 'ring-[var(--ui-text-on-status-warning)]',\n    badge:\n      'bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]',\n  },\n  danger: {\n    dot: 'bg-[var(--ui-text-on-status-danger)]',\n    ring: 'border-[var(--ui-text-on-status-danger)]',\n    ringColor: 'ring-[var(--ui-text-on-status-danger)]',\n    badge:\n      'bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]',\n  },\n  critical: {\n    dot: 'bg-[var(--ui-text-on-status-critical)]',\n    ring: 'border-[var(--ui-text-on-status-critical)]',\n    ringColor: 'ring-[var(--ui-text-on-status-critical)]',\n    badge:\n      'bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]',\n  },\n};\n\nconst DOT_SIZE = { small: 'size-2', medium: 'size-2.5' } as const;\nconst BADGE_SIZE = { small: 'size-6', medium: 'size-7' } as const;\nconst BADGE_ICON_PX = { small: 14, medium: 16 } as const;\nconst ITEM_PB = { compact: 'pb-4', default: 'pb-6' } as const;\n\nexport interface TimelineItemProps\n  extends Omit<React.ComponentProps<'li'>, 'title'> {\n  /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */\n  timestamp?: React.ReactNode;\n  /** Event title (the primary line). */\n  title: React.ReactNode;\n  /** Optional secondary description. */\n  description?: React.ReactNode;\n  /** Semantic status — tints the marker (a subtle cue, never large blocks of text). */\n  status?: TimelineStatus;\n  /** Icon shown in a status-tinted marker badge instead of the plain dot. */\n  icon?: React.ReactNode;\n  /** Metadata slot under the description — e.g. `Tag`s. */\n  metadata?: React.ReactNode;\n  /** Actions slot — e.g. a `Link` or `ButtonMenu`. */\n  actions?: React.ReactNode;\n  /** Emphasize this item as the current one (a ringed marker). */\n  current?: boolean;\n  /** Dim a non-applicable / inactive item. */\n  disabled?: boolean;\n  /** Expandable detail composed by the caller — e.g. an `Accordion`. */\n  children?: React.ReactNode;\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      timestamp,\n      title,\n      description,\n      status = 'neutral',\n      icon,\n      metadata,\n      actions,\n      current = false,\n      disabled = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { size, density } = React.useContext(TimelineContext);\n    const marker = STATUS_MARKER[status];\n\n    return (\n      <li\n        ref={ref}\n        data-status={status}\n        data-current={current || undefined}\n        data-disabled={disabled || undefined}\n        // A disabled item is dimmed *and* announced as disabled; its slotted\n        // controls (actions/links) stop taking pointer input — matching the\n        // repo's `aria-disabled` + `pointer-events-none` pattern (see link.tsx).\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex gap-3',\n          disabled && 'opacity-60 pointer-events-none',\n          className\n        )}\n        {...props}\n      >\n        {/* Marker column: dot / icon badge + the connector line below it. */}\n        <div className=\"flex flex-col items-center\">\n          {icon != null ? (\n            <span\n              aria-hidden\n              className={cn(\n                'flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',\n                BADGE_SIZE[size],\n                marker.badge,\n                // Ring the badge for a `current` item (same emphasis as the dot).\n                current &&\n                  cn(\n                    'ring-2 ring-offset-2 ring-offset-background',\n                    marker.ringColor\n                  )\n              )}\n            >\n              {React.isValidElement(icon)\n                ? React.cloneElement(\n                    icon as React.ReactElement<{ size?: number }>,\n                    { size: BADGE_ICON_PX[size] }\n                  )\n                : icon}\n            </span>\n          ) : (\n            <span\n              aria-hidden\n              className={cn(\n                'mt-1 shrink-0 rounded-full',\n                DOT_SIZE[size],\n                current ? cn('border-2 bg-background', marker.ring) : marker.dot\n              )}\n            />\n          )}\n          <span\n            data-slot=\"timeline-connector\"\n            aria-hidden\n            className=\"mt-1 w-px flex-1 bg-border\"\n          />\n        </div>\n\n        {/* Content column. */}\n        <div className={cn('min-w-0 flex-1', ITEM_PB[density])}>\n          {timestamp != null && (\n            <div className=\"text-xs leading-tight text-muted-foreground\">\n              {timestamp}\n            </div>\n          )}\n          <div className=\"font-medium leading-snug text-foreground\">{title}</div>\n          {description != null && (\n            <div className=\"mt-0.5 text-muted-foreground\">{description}</div>\n          )}\n          {metadata != null && (\n            <div className=\"mt-1.5 flex flex-wrap items-center gap-1.5\">\n              {metadata}\n            </div>\n          )}\n          {actions != null && (\n            <div className=\"mt-2 flex flex-wrap items-center gap-2\">{actions}</div>\n          )}\n          {children != null && <div className=\"mt-2\">{children}</div>}\n        </div>\n      </li>\n    );\n  }\n);\nTimelineItem.displayName = 'Timeline.Item';\n\nconst Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });\n\nexport { Timeline, TimelineItem };\n"],"names":["TimelineContext","React","timelineVariants","cva","TimelineRoot","className","size","density","children","props","ref","resolved","jsx","cn","STATUS_MARKER","DOT_SIZE","BADGE_SIZE","BADGE_ICON_PX","ITEM_PB","TimelineItem","timestamp","title","description","status","icon","metadata","actions","current","disabled","marker","jsxs","Timeline"],"mappings":";;;;AAuBA,MAAMA,IAAkBC,EAAM,cAAoC;AAAA,EAChE,MAAM;AAAA,EACN,SAAS;AACX,CAAC,GAEKC,IAAmBC,EAAI,iBAAiB;AAAA,EAC5C,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC,GAYKC,IAAeH,EAAM;AAAA,EACzB,CAAC,EAAE,WAAAI,GAAW,MAAAC,GAAM,SAAAC,GAAS,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACzD,UAAMC,IAAWV,EAAM;AAAA,MACrB,OAAO,EAAE,MAAMK,KAAQ,UAAU,SAASC,KAAW;MACrD,CAACD,GAAMC,CAAO;AAAA,IAAA;AAEhB,WACE,gBAAAK,EAACZ,EAAgB,UAAhB,EAAyB,OAAOW,GAC/B,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,aAAWC,EAAS;AAAA,QACpB,gBAAcA,EAAS;AAAA,QACvB,WAAWE;AAAA,UACTX,EAAiB,EAAE,MAAAI,GAAM,SAAAC,GAAS;AAAA;AAAA,UAElC;AAAA,UACAF;AAAA,QAAA;AAAA,QAED,GAAGI;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACAJ,EAAa,cAAc;AAa3B,MAAMU,IAGF;AAAA,EACF,SAAS;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OACE;AAAA,EAAA;AAAA,EAEJ,MAAM;AAAA,IACJ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OACE;AAAA,EAAA;AAAA,EAEJ,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OACE;AAAA,EAAA;AAAA,EAEJ,UAAU;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OACE;AAAA,EAAA;AAEN,GAEMC,IAAW,EAAE,OAAO,UAAU,QAAQ,WAAA,GACtCC,IAAa,EAAE,OAAO,UAAU,QAAQ,SAAA,GACxCC,IAAgB,EAAE,OAAO,IAAI,QAAQ,GAAA,GACrCC,IAAU,EAAE,SAAS,QAAQ,SAAS,OAAA,GA0BtCC,IAAelB,EAAM;AAAA,EACzB,CACE;AAAA,IACE,WAAAI;AAAA,IACA,WAAAe;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAApB;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,MAAAJ,GAAM,SAAAC,EAAA,IAAYN,EAAM,WAAWD,CAAe,GACpD6B,IAASf,EAAcS,CAAM;AAEnC,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAApB;AAAA,QACA,eAAaa;AAAA,QACb,gBAAcI,KAAW;AAAA,QACzB,iBAAeC,KAAY;AAAA,QAI3B,iBAAeA,KAAY;AAAA,QAC3B,WAAWf;AAAA,UACT;AAAA,UACAe,KAAY;AAAA,UACZvB;AAAA,QAAA;AAAA,QAED,GAAGI;AAAA,QAGJ,UAAA;AAAA,UAAA,gBAAAqB,EAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,YAAAN,KAAQ,OACP,gBAAAZ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAWC;AAAA,kBACT;AAAA,kBACAG,EAAWV,CAAI;AAAA,kBACfuB,EAAO;AAAA;AAAA,kBAEPF,KACEd;AAAA,oBACE;AAAA,oBACAgB,EAAO;AAAA,kBAAA;AAAA,gBACT;AAAA,gBAGH,UAAA5B,EAAM,eAAeuB,CAAI,IACtBvB,EAAM;AAAA,kBACJuB;AAAA,kBACA,EAAE,MAAMP,EAAcX,CAAI,EAAA;AAAA,gBAAE,IAE9BkB;AAAA,cAAA;AAAA,YAAA,IAGN,gBAAAZ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAWC;AAAA,kBACT;AAAA,kBACAE,EAAST,CAAI;AAAA,kBACbqB,IAAUd,EAAG,0BAA0BgB,EAAO,IAAI,IAAIA,EAAO;AAAA,gBAAA;AAAA,cAC/D;AAAA,YAAA;AAAA,YAGJ,gBAAAjB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,aAAU;AAAA,gBACV,eAAW;AAAA,gBACX,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ,GACF;AAAA,UAGA,gBAAAkB,EAAC,SAAI,WAAWjB,EAAG,kBAAkBK,EAAQX,CAAO,CAAC,GAClD,UAAA;AAAA,YAAAa,KAAa,QACZ,gBAAAR,EAAC,OAAA,EAAI,WAAU,+CACZ,UAAAQ,GACH;AAAA,YAEF,gBAAAR,EAAC,OAAA,EAAI,WAAU,4CAA4C,UAAAS,GAAM;AAAA,YAChEC,KAAe,QACd,gBAAAV,EAAC,OAAA,EAAI,WAAU,gCAAgC,UAAAU,GAAY;AAAA,YAE5DG,KAAY,QACX,gBAAAb,EAAC,OAAA,EAAI,WAAU,8CACZ,UAAAa,GACH;AAAA,YAEDC,KAAW,QACV,gBAAAd,EAAC,OAAA,EAAI,WAAU,0CAA0C,UAAAc,GAAQ;AAAA,YAElElB,KAAY,QAAQ,gBAAAI,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAJ,EAAA,CAAS;AAAA,UAAA,EAAA,CACvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACAW,EAAa,cAAc;AAE3B,MAAMY,IAAW,OAAO,OAAO3B,GAAc,EAAE,MAAMe,GAAc;"}

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

@@ -0,0 +1,85 @@
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Toast as o } from "@base-ui/react/toast";
+import { TimesIcon as d, CircleTimesIcon as m, TriangleWarningIcon as u, CircleInfoIcon as f, CircleCheckIcon as x } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as g } from "../../../lib/utils.js";
+import { usePortalContainer as p } from "../../../lib/portal-container.js";
+import { Spinner as v } from "../spinner/spinner.js";
+const i = o.createToastManager();
+function a(t, e, n = {}) {
+  const { action: r, ...l } = n;
+  return i.add({
+    title: t,
+    type: e,
+    actionProps: r ? { children: r.label, onClick: r.onClick } : void 0,
+    ...l
+  });
+}
+const I = Object.assign(
+  (t, e) => a(t, void 0, e),
+  {
+    success: (t, e) => a(t, "success", e),
+    info: (t, e) => a(t, "info", e),
+    warning: (t, e) => a(t, "warning", e),
+    error: (t, e) => a(t, "error", e),
+    loading: (t, e) => a(t, "loading", { timeout: 0, ...e }),
+    dismiss: (t) => i.close(t),
+    promise: i.promise
+  }
+), N = {
+  success: /* @__PURE__ */ s(x, { className: "size-4 text-[var(--ui-text-on-status-success)]" }),
+  info: /* @__PURE__ */ s(f, { className: "size-4 text-[var(--ui-text-on-status-info)]" }),
+  warning: /* @__PURE__ */ s(u, { className: "size-4 text-[var(--ui-text-on-status-warning)]" }),
+  error: /* @__PURE__ */ s(m, { className: "size-4 text-[var(--ui-text-on-status-danger)]" }),
+  loading: /* @__PURE__ */ s(v, { size: "sm", className: "size-4" })
+};
+function b() {
+  const { toasts: t } = o.useToastManager();
+  return t.map((e) => {
+    const n = N[e.type];
+    return /* @__PURE__ */ c(
+      o.Root,
+      {
+        toast: e,
+        className: g(
+          "relative flex w-full items-start gap-3 rounded border border-border bg-background p-4 shadow-md",
+          "transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+          "data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4"
+        ),
+        children: [
+          n ? /* @__PURE__ */ s("span", { className: "mt-0.5 shrink-0", children: n }) : null,
+          /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            /* @__PURE__ */ s(o.Title, { className: "text-sm font-semibold leading-5 text-foreground" }),
+            /* @__PURE__ */ s(o.Description, { className: "text-sm leading-5 text-muted-foreground" }),
+            e.actionProps ? /* @__PURE__ */ s(o.Action, { className: "mt-1 self-start text-sm font-semibold text-secondary hover:underline" }) : null
+          ] }),
+          /* @__PURE__ */ s(
+            o.Close,
+            {
+              "aria-label": "Close",
+              className: "shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]",
+              children: /* @__PURE__ */ s(d, { className: "size-4" })
+            }
+          )
+        ]
+      },
+      e.id
+    );
+  });
+}
+function k({ timeout: t, limit: e, portalContainer: n }) {
+  const r = p(), l = n ?? r;
+  return /* @__PURE__ */ s(
+    o.Provider,
+    {
+      toastManager: i,
+      timeout: t,
+      limit: e,
+      children: /* @__PURE__ */ s(o.Portal, { container: l, children: /* @__PURE__ */ s(o.Viewport, { className: "fixed bottom-4 end-4 z-[100] flex w-[384px] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none", children: /* @__PURE__ */ s(b, {}) }) })
+    }
+  );
+}
+export {
+  k as Toaster,
+  I as toast
+};
+//# sourceMappingURL=toast.js.map

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

@@ -0,0 +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 {\n  CircleCheckIcon,\n  CircleInfoIcon,\n  CircleTimesIcon,\n  TimesIcon,\n  TriangleWarningIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\nimport { Spinner } from '../spinner';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `sonner`\n// (packages/ui-legacy/src/components/ui/sonner.tsx), which wrapped the Sonner\n// library. Rebuilt on the Base UI toast primitive (the ui-react convention), so\n// no Sonner dependency. The contract is preserved: drop a single `<Toaster />`\n// at the app root and call the imperative `toast(...)` / `toast.success(...)`\n// API from anywhere. No `--ui-toast-*` tier yet, so this design-pending v1 is a\n// neutral surface (bg-background + border-border + shadow) with the status\n// conveyed by a colored leading icon (`--ui-text-on-status-*`); per-status\n// surface tinting is design-pending. Auto-dismiss after `timeout` (default\n// 5000ms); `loading` toasts persist until updated or dismissed.\n\n// A module-level manager so `toast(...)` works outside React (like Sonner's\n// `toast`). `<Toaster />` subscribes this manager to its provider.\nconst toastManager = ToastPrimitive.createToastManager();\n\nexport type ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading';\n\nexport interface ToastOptions {\n  /** Secondary line under the title. */\n  description?: React.ReactNode;\n  /** Auto-dismiss delay in ms; `0` keeps the toast until dismissed. */\n  timeout?: number;\n  /** A single inline action button (e.g. Undo). */\n  action?: { label: React.ReactNode; onClick?: () => void };\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 { action, ...rest } = options;\n  return toastManager.add({\n    title,\n    type,\n    actionProps: action\n      ? { children: action.label, onClick: action.onClick }\n      : undefined,\n    ...rest,\n  });\n}\n\n/**\n * Imperative toast API. `toast(title, options)` shows a neutral toast;\n * `toast.success` / `info` / `warning` / `error` / `loading` set the variant.\n * `toast.dismiss(id?)` closes one (or all) and `toast.promise` ties a toast to a\n * promise's lifecycle.\n */\nconst toast = Object.assign(\n  (title: React.ReactNode, options?: ToastOptions) => add(title, undefined, options),\n  {\n    success: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'success', options),\n    info: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'info', options),\n    warning: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'warning', options),\n    error: (title: React.ReactNode, options?: ToastOptions) =>\n      add(title, 'error', 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\nconst ICON_BY_TYPE: Record<ToastType, React.ReactNode> = {\n  success: (\n    <CircleCheckIcon className=\"size-4 text-[var(--ui-text-on-status-success)]\" />\n  ),\n  info: (\n    <CircleInfoIcon className=\"size-4 text-[var(--ui-text-on-status-info)]\" />\n  ),\n  warning: (\n    <TriangleWarningIcon className=\"size-4 text-[var(--ui-text-on-status-warning)]\" />\n  ),\n  error: (\n    <CircleTimesIcon className=\"size-4 text-[var(--ui-text-on-status-danger)]\" />\n  ),\n  loading: <Spinner size=\"sm\" className=\"size-4\" />,\n};\n\nfunction ToastList() {\n  const { toasts } = ToastPrimitive.useToastManager();\n  return toasts.map((item) => {\n    const icon = ICON_BY_TYPE[item.type as ToastType];\n    return (\n      <ToastPrimitive.Root\n        key={item.id}\n        toast={item}\n        className={cn(\n          'relative flex w-full items-start gap-3 rounded border border-border bg-background p-4 shadow-md',\n          'transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n          'data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4'\n        )}\n      >\n        {icon ? <span className=\"mt-0.5 shrink-0\">{icon}</span> : null}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <ToastPrimitive.Title className=\"text-sm font-semibold leading-5 text-foreground\" />\n          <ToastPrimitive.Description className=\"text-sm leading-5 text-muted-foreground\" />\n          {item.actionProps ? (\n            <ToastPrimitive.Action className=\"mt-1 self-start text-sm font-semibold text-secondary hover:underline\" />\n          ) : null}\n        </div>\n        <ToastPrimitive.Close\n          aria-label=\"Close\"\n          className=\"shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]\"\n        >\n          <TimesIcon className=\"size-4\" />\n        </ToastPrimitive.Close>\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  /**\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-right\n * stack and renders every queued toast. Trigger toasts with the `toast` API.\n */\nfunction Toaster({ timeout, limit, portalContainer }: 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 className=\"fixed bottom-4 end-4 z-[100] flex w-[384px] max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none\">\n          <ToastList />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nexport { toast, Toaster };\n"],"names":["toastManager","ToastPrimitive","add","title","type","options","action","rest","toast","id","ICON_BY_TYPE","jsx","CircleCheckIcon","CircleInfoIcon","TriangleWarningIcon","CircleTimesIcon","Spinner","ToastList","toasts","item","icon","jsxs","cn","TimesIcon","Toaster","timeout","limit","portalContainer","ctxContainer","usePortalContainer","resolvedContainer"],"mappings":"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"}

package/dist/components/ui/toggle-group/toggle-group.js

@@ -0,0 +1,47 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as s from "react";
+import { Toggle as i } from "@base-ui/react/toggle";
+import { ToggleGroup as l } from "@base-ui/react/toggle-group";
+import { cn as a } from "../../../lib/utils.js";
+const n = a(
+  "inline-flex h-9 select-none items-center justify-center gap-2 rounded-md border border-transparent bg-transparent px-3 text-sm font-medium text-[var(--ui-text-on-surface-primary)] transition-colors outline-none",
+  "not-disabled:hover:bg-[var(--ui-background-surface-hover)]",
+  "focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
+  "data-pressed:bg-[var(--ui-background-surface-active)] data-pressed:text-[var(--ui-text-on-surface-primary)]",
+  "disabled:pointer-events-none disabled:opacity-50"
+), g = s.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ t(
+  i,
+  {
+    ref: o,
+    className: a(n, e),
+    ...r
+  }
+));
+g.displayName = "Toggle";
+const m = s.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ t(
+  l,
+  {
+    ref: o,
+    className: a(
+      "inline-flex items-center gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+      e
+    ),
+    ...r
+  }
+));
+m.displayName = "ToggleGroup";
+const c = s.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ t(
+  i,
+  {
+    ref: o,
+    className: a(n, e),
+    ...r
+  }
+));
+c.displayName = "ToggleGroupItem";
+export {
+  g as Toggle,
+  m as ToggleGroup,
+  c as ToggleGroupItem
+};
+//# sourceMappingURL=toggle-group.js.map