@acronis-platform/ui-react 4.0.0 → 4.1.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives, reconciled against the Table design in the\n// ui-react Figma (canvas 2948-2416; assembled example 4567-6801, part state\n// matrices TableHeaderCell 3427-207 / TableDataCell 4536-97 / TableDataRow\n// 4536-699 / TableSettings 3698-497 / TableActions 4536-414 / TableCheckbox\n// 3698-746). A `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell     -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row      -> --ui-table-global-row-{border-color,border-width,border-style},\n//                 --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • head     -> --ui-table-header-{label-color,gap}, --ui-table-header-cell-color-{idle,hover,active}\n//   • data     -> --ui-table-data-cell-color-{idle,hover,active}, --ui-table-data-value-color-{idle,disabled}\n//   • sort     -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • focus    -> --ui-focus-primary (the kit-wide 3px focus ring, radius/radius-4)\n// Per the design, the header/settings/actions cells tint on hover and press at\n// the *cell* level (not on an inner control), so the interaction tokens sit on\n// the `<th>`/`<td>` and the focus ring is drawn on the cell via `has-[…]`.\n//\n// The design's cell content (tags, status dots, links) stays consumer\n// composition — `--ui-table-global-cell-{tag,icon}-margin-y` and\n// --ui-table-data-gap describe that content's own insets, not a part contract,\n// so no wrapper part is invented for them here.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        // The design documents a keyboard-nav focus state on the row itself\n        // (a ring spanning the full row). Rows aren't focusable by default, so\n        // this only paints once a consumer makes them focusable (`tabIndex`).\n        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        // Per the design, a sortable header tints the whole cell on hover/press\n        // and draws the focus ring on the cell, not on the inner control.\n        sortable &&\n          'cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] transition-colors [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableSelectCellProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the select-all cell of the header row (`<th>`) instead of a row's\n   * selection cell (`<td>`).\n   */\n  header?: boolean;\n}\n\n/**\n * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column\n * holding a label-less `Checkbox`. Only the leading padding is applied, matching\n * the design (16px padding + a 16px box), so the checkbox sits flush against the\n * first data cell.\n */\nconst TableSelectCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableSelectCellProps\n>(({ className, header, ...props }, ref) => {\n  const Comp = header ? 'th' : 'td';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle transition-colors',\n        header\n          ? 'bg-[var(--ui-table-header-cell-color-idle)]'\n          : 'bg-[var(--ui-table-data-cell-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableSelectCell.displayName = 'TableSelectCell';\n\nexport interface TableActionsCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Suppress this row's actions because a selection is in play — the cell\n   * still reserves its 48px column (so the grid doesn't reflow) but renders no\n   * children and no hover/press tint. Per the design, that means any row is\n   * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from\n   * the data-table part) rather than re-deriving the threshold.\n   */\n  bulkSelectionActive?: boolean;\n}\n\n/**\n * The trailing row-actions cell (design part `TableActions`) — a fixed 48px\n * column, end-aligned, holding the consumer's overflow trigger (e.g. a\n * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself\n * carries the hover/press tint and the focus ring, per the design.\n */\nconst TableActionsCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableActionsCellProps\n>(({ className, bulkSelectionActive, children, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]',\n      !bulkSelectionActive &&\n        'rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  >\n    {bulkSelectionActive ? null : children}\n  </td>\n));\nTableActionsCell.displayName = 'TableActionsCell';\n\n/**\n * The trailing header cell holding the column-settings trigger (design part\n * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's\n * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what\n * the trigger opens (a column-visibility menu) is the consumer's choice —\n * `TableViewOptions` is the ready-made one.\n */\nconst TableSettingsCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTableSettingsCell.displayName = 'TableSettingsCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableSelectCell,\n  TableActionsCell,\n  TableSettingsCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","wrap","jsxs","TableCell","TableSelectCell","header","TableActionsCell","bulkSelectionActive","TableSettingsCell","TableCaption"],"mappings":"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"}
+{"version":3,"file":"table.js","names":[],"sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives, reconciled against the Table design in the\n// ui-react Figma (canvas 2948-2416; assembled example 4567-6801, part state\n// matrices TableHeaderCell 3427-207 / TableDataCell 4536-97 / TableDataRow\n// 4536-699 / TableSettings 3698-497 / TableActions 4536-414 / TableCheckbox\n// 3698-746). A `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell     -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row      -> --ui-table-global-row-{border-color,border-width,border-style},\n//                 --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • head     -> --ui-table-header-{label-color,gap}, --ui-table-header-cell-color-{idle,hover,active}\n//   • data     -> --ui-table-data-cell-color-{idle,hover,active}, --ui-table-data-value-color-{idle,disabled}\n//   • sort     -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • focus    -> --ui-focus-primary (the kit-wide 3px focus ring, radius/radius-4)\n// Per the design, the header/settings/actions cells tint on hover and press at\n// the *cell* level (not on an inner control), so the interaction tokens sit on\n// the `<th>`/`<td>` and the focus ring is drawn on the cell via `has-[…]`.\n//\n// The design's cell content (tags, status dots, links) stays consumer\n// composition — `--ui-table-global-cell-{tag,icon}-margin-y` and\n// --ui-table-data-gap describe that content's own insets, not a part contract,\n// so no wrapper part is invented for them here.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        // The design documents a keyboard-nav focus state on the row itself\n        // (a ring spanning the full row). Rows aren't focusable by default, so\n        // this only paints once a consumer makes them focusable (`tabIndex`).\n        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        // Per the design, a sortable header tints the whole cell on hover/press\n        // and draws the focus ring on the cell, not on the inner control.\n        sortable &&\n          'cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] transition-colors [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableSelectCellProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the select-all cell of the header row (`<th>`) instead of a row's\n   * selection cell (`<td>`).\n   */\n  header?: boolean;\n}\n\n/**\n * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column\n * holding a label-less `Checkbox`. Only the leading padding is applied, matching\n * the design (16px padding + a 16px box), so the checkbox sits flush against the\n * first data cell.\n */\nconst TableSelectCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableSelectCellProps\n>(({ className, header, ...props }, ref) => {\n  const Comp = header ? 'th' : 'td';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle transition-colors',\n        header\n          ? 'bg-[var(--ui-table-header-cell-color-idle)]'\n          : 'bg-[var(--ui-table-data-cell-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableSelectCell.displayName = 'TableSelectCell';\n\nexport interface TableActionsCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Suppress this row's actions because a selection is in play — the cell\n   * still reserves its 48px column (so the grid doesn't reflow) but renders no\n   * children and no hover/press tint. Per the design, that means any row is\n   * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from\n   * the data-table part) rather than re-deriving the threshold.\n   */\n  bulkSelectionActive?: boolean;\n}\n\n/**\n * The trailing row-actions cell (design part `TableActions`) — a fixed 48px\n * column, end-aligned, holding the consumer's overflow trigger (e.g. a\n * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself\n * carries the hover/press tint and the focus ring, per the design.\n */\nconst TableActionsCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableActionsCellProps\n>(({ className, bulkSelectionActive, children, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]',\n      !bulkSelectionActive &&\n        'rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  >\n    {bulkSelectionActive ? null : children}\n  </td>\n));\nTableActionsCell.displayName = 'TableActionsCell';\n\n/**\n * The trailing header cell holding the column-settings trigger (design part\n * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's\n * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what\n * the trigger opens (a column-visibility menu) is the consumer's choice —\n * `TableViewOptions` is the ready-made one.\n */\nconst TableSettingsCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTableSettingsCell.displayName = 'TableSettingsCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableSelectCell,\n  TableActionsCell,\n  TableSettingsCell,\n  TableCaption,\n};\n"],"mappings":"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"}

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

@@ -1,44 +1,27 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as o from "react";
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
 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
+//#region src/components/ui/tabs/tabs.tsx
+var i = r.Root, a = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.List, {
+	ref: a,
+	className: e("inline-flex items-stretch rounded-md", t),
+	...i
+}));
+a.displayName = "TabsList";
+var o = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Tab, {
+	ref: a,
+	className: e("-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", t),
+	...i
+}));
+o.displayName = "TabsTrigger";
+var s = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Panel, {
+	ref: a,
+	className: e("mt-2 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]", t),
+	...i
+}));
+s.displayName = "TabsContent";
+//#endregion
+export { i as Tabs, s as TabsContent, a as TabsList, o as TabsTrigger };
+
+//# sourceMappingURL=tabs.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"tabs.js","names":[],"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"],"mappings":";;;;;AAuBA,IAAM,IAAO,EAAc,MAErB,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAc,MAAf;CACO;CACL,WAAW,EAAG,wCAAwC,CAAS;CAC/D,GAAI;AACL,CAAA,CACF;AACD,EAAS,cAAc;AAEvB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAc,KAAf;CACO;CACL,WAAW,EACT,qZACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAc,OAAf;CACO;CACL,WAAW,EACT,uFACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc"}

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

@@ -1,47 +1,42 @@
-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
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ui/tag/tag.tsx
+var a = t("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"
+	}
+}), o = n.forwardRef(({ className: t, variant: n, size: o, icon: s, children: c, ...l }, u) => /* @__PURE__ */ i("span", {
+	ref: u,
+	className: e(a({
+		variant: n,
+		size: o
+	}), t),
+	...l,
+	children: [s, /* @__PURE__ */ r("span", {
+		className: "min-w-0 truncate",
+		children: c
+	})]
+}));
+o.displayName = "Tag";
+//#endregion
+export { o as Tag, a as tagVariants };
+
+//# sourceMappingURL=tag.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"tag.js","names":[],"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"],"mappings":";;;;;AAiBA,IAAM,IAAc,EAClB,ueACA;CACE,UAAU;EACR,SAAS;GACP,MAAM;GACN,SACE;GACF,SACE;GACF,UACE;GACF,QACE;GACF,SACE;GACF,IAAI;EACN;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF,GAUM,IAAM,EAAM,YACf,EAAE,cAAW,YAAS,SAAM,SAAM,aAAU,GAAG,KAAS,MACvD,kBAAC,QAAD;CACO;CACL,WAAW,EAAG,EAAY;EAAE;EAAS;CAAK,CAAC,GAAG,CAAS;CACvD,GAAI;CAHN,UAAA,CAKG,GACD,kBAAC,QAAD;EAAM,WAAU;EAAoB;CAAe,CAAA,CAC/C;AAEV,CAAA,CAAA;AACA,EAAI,cAAc"}