@acronis-platform/ui-react 5.3.0 → 5.4.0

package/dist/components/ui/table/table-view-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-view-options.js","names":[],"sources":["../../../../src/components/ui/table/table-view-options.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Checkbox } from '../checkbox';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\nexport interface TableColumnVisibility {\n  /** Stable column identifier. */\n  id: string;\n  /** Human-readable label shown in the menu. */\n  label: string;\n  /** Whether the column is currently hidden. */\n  hidden: boolean;\n}\n\nexport interface TableViewOptionsProps {\n  /** The toggleable columns and their current visibility. */\n  columns: TableColumnVisibility[];\n  /** Invoked with the column id whose visibility was toggled. */\n  onToggle: (id: string) => void;\n  /** Trigger label. Defaults to `View`. Ignored when `iconOnly`. */\n  triggerLabel?: React.ReactNode;\n  /**\n   * Render the trigger as a cog-only icon button instead of a labelled\n   * `Button` — the shape that fits the 48px `TableSettingsCell` column.\n   */\n  iconOnly?: boolean;\n  /** Accessible name of the `iconOnly` trigger. Override to localize. */\n  triggerAriaLabel?: string;\n}\n\n// TanStack-independent show/hide-columns dropdown extracted from\n// `DataTableViewOptions`'s UI. Driven by a plain `{ id, label, hidden }[]` +\n// `onToggle`, so it pairs with the `Table` primitives; `DataTableViewOptions`\n// can later become a thin TanStack adapter over this part.\n//\n// Each row shows a real `Checkbox` box beside the column name, per the design.\n// That box is presentation only (`aria-hidden`, not focusable, click-through):\n// the accessible control is the `menuitemcheckbox` row itself, which carries\n// `aria-checked` and the click handler.\nfunction TableViewOptions({\n  columns,\n  onToggle,\n  triggerLabel = 'View',\n  iconOnly = false,\n  triggerAriaLabel = 'Column settings',\n}: TableViewOptionsProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          iconOnly ? (\n            <ButtonIcon aria-label={triggerAriaLabel} />\n          ) : (\n            <Button variant=\"secondary\" className=\"h-8 shrink-0 gap-2\" />\n          )\n        }\n      >\n        <CogIcon />\n        {!iconOnly && triggerLabel}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n        <DropdownMenuGroup>\n          {columns.map((column) => (\n            <DropdownMenuItem\n              key={column.id}\n              role=\"menuitemcheckbox\"\n              aria-checked={!column.hidden}\n              closeOnClick={false}\n              onClick={() => onToggle(column.id)}\n              className=\"items-center\"\n            >\n              <Checkbox\n                checked={!column.hidden}\n                aria-hidden\n                tabIndex={-1}\n                className=\"pointer-events-none\"\n              />\n              {column.label}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\nTableViewOptions.displayName = 'TableViewOptions';\n\nexport { TableViewOptions };\n"],"mappings":";;;;;;;;AAgDA,SAAS,EAAiB,EACxB,YACA,aACA,kBAAe,QACf,cAAW,IACX,sBAAmB,qBACK;CACxB,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,QACE,IACE,kBAAC,GAAD,EAAY,cAAY,EAAmB,CAAA,IAE3C,kBAAC,GAAD;GAAQ,SAAQ;GAAY,WAAU;EAAsB,CAAA;EALlE,UAAA,CASE,kBAAC,GAAD,CAAU,CAAA,GACT,CAAC,KAAY,CACK;CACrB,CAAA,GAAA,kBAAC,GAAD;EAAqB,OAAM;EAAM,WAAU;EACzC,UAAA,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAEE,MAAK;GACL,gBAAc,CAAC,EAAO;GACtB,cAAc;GACd,eAAe,EAAS,EAAO,EAAE;GACjC,WAAU;GANZ,UAAA,CAQE,kBAAC,GAAD;IACE,SAAS,CAAC,EAAO;IACjB,eAAA;IACA,UAAU;IACV,WAAU;GACX,CAAA,GACA,EAAO,KACQ;EAdX,GAAA,EAAO,EAcI,CACnB,EACgB,CAAA;CACA,CAAA,CACT,EAAA,CAAA;AAElB;AACA,EAAiB,cAAc"}
+{"version":3,"file":"table-view-options.js","names":[],"sources":["../../../../src/components/ui/table/table-view-options.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Checkbox } from '../checkbox';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\nimport { InputSelectSearch } from '../input-select';\n\nexport interface TableColumnVisibility {\n  /** Stable column identifier. */\n  id: string;\n  /** Human-readable label shown in the menu. */\n  label: string;\n  /** Whether the column is currently hidden. */\n  hidden: boolean;\n  /** Optional section name used to group related columns in the dropdown. */\n  category?: string;\n}\n\nexport interface TableViewOptionsProps {\n  /** The toggleable columns and their current visibility. */\n  columns: TableColumnVisibility[];\n  /** Invoked with the column id whose visibility was toggled. */\n  onToggle: (id: string) => void;\n  /** Trigger label. Defaults to `View`. Ignored when `iconOnly`. */\n  triggerLabel?: React.ReactNode;\n  /**\n   * Render the trigger as a cog-only icon button instead of a labelled\n   * `Button` — the shape that fits the 48px `TableSettingsCell` column.\n   */\n  iconOnly?: boolean;\n  /** Accessible name of the `iconOnly` trigger. Override to localize. */\n  triggerAriaLabel?: string;\n  /** Placeholder and accessible name of the column filter. */\n  searchPlaceholder?: string;\n  /** Label of the action that reveals every column in a category. */\n  showAllLabel?: React.ReactNode;\n  /** Empty state shown when no column matches the search query. */\n  noResultsLabel?: React.ReactNode;\n}\n\ninterface ColumnGroup {\n  category?: string;\n  columns: TableColumnVisibility[];\n}\n\nfunction groupColumns(columns: TableColumnVisibility[]): ColumnGroup[] {\n  const groups = new Map<string | undefined, TableColumnVisibility[]>();\n\n  columns.forEach((column) => {\n    const group = groups.get(column.category);\n    if (group) {\n      group.push(column);\n    } else {\n      groups.set(column.category, [column]);\n    }\n  });\n\n  return Array.from(groups, ([category, groupedColumns]) => ({\n    category,\n    columns: groupedColumns,\n  }));\n}\n\n// TanStack-independent show/hide-columns dropdown extracted from\n// `DataTableViewOptions`'s UI. Driven by a plain `{ id, label, hidden }[]` +\n// `onToggle`, so it pairs with the `Table` primitives; `DataTableViewOptions`\n// can later become a thin TanStack adapter over this part.\n//\n// Each row shows a real `Checkbox` box beside the column name, per the design.\n// That box is presentation only (`aria-hidden`, not focusable, click-through):\n// the accessible control is the `menuitemcheckbox` row itself, which carries\n// `aria-checked` and the click handler.\n//\n// Although this is behaviorally a menu, its visual design is the multiple-value\n// InputSelect dropdown: a filter row, optional named sections with per-section\n// \"show all\" actions, and neutral regular-weight checkbox rows. Keep the Base UI\n// Menu semantics while reusing that generated token tier for presentation.\nfunction TableViewOptions({\n  columns,\n  onToggle,\n  triggerLabel = 'View',\n  iconOnly = false,\n  triggerAriaLabel = 'Column settings',\n  searchPlaceholder = 'Search columns',\n  showAllLabel = 'Show all',\n  noResultsLabel = 'No columns found.',\n}: TableViewOptionsProps) {\n  const [query, setQuery] = React.useState('');\n  const groupIdPrefix = React.useId();\n  const normalizedQuery = query.trim().toLocaleLowerCase();\n  const groups = React.useMemo(\n    () =>\n      groupColumns(columns)\n        .map((group) => ({\n          ...group,\n          visibleColumns: normalizedQuery\n            ? group.columns.filter((column) =>\n                column.label.toLocaleLowerCase().includes(normalizedQuery)\n              )\n            : group.columns,\n        }))\n        .filter((group) => group.visibleColumns.length > 0),\n    [columns, normalizedQuery]\n  );\n\n  return (\n    <DropdownMenu onOpenChange={(open) => !open && setQuery('')}>\n      <DropdownMenuTrigger\n        render={\n          iconOnly ? (\n            <ButtonIcon aria-label={triggerAriaLabel} />\n          ) : (\n            <Button variant=\"secondary\" className=\"h-8 shrink-0 gap-2\" />\n          )\n        }\n      >\n        <CogIcon />\n        {!iconOnly && triggerLabel}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align=\"end\"\n        className=\"max-h-[var(--available-height)] w-[300px] gap-0 rounded-[var(--ui-input-select-dropdown-container-border-radius)] border-[length:var(--ui-input-select-dropdown-container-border-width)] border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] px-[var(--ui-input-select-dropdown-container-padding-x)] py-[var(--ui-input-select-dropdown-container-padding-y)]\"\n      >\n        <div className=\"border-b border-[var(--ui-input-select-dropdown-section-container-border-color)]\">\n          <InputSelectSearch\n            aria-label={searchPlaceholder}\n            placeholder={searchPlaceholder}\n            value={query}\n            onChange={(event) => setQuery(event.currentTarget.value)}\n          />\n        </div>\n        {groups.length > 0 ? (\n          groups.map((group, groupIndex) => {\n            const groupLabelId = group.category\n              ? `${groupIdPrefix}-group-${groupIndex}`\n              : undefined;\n            const showAllLabelId = group.category\n              ? `${groupIdPrefix}-show-all-${groupIndex}`\n              : undefined;\n\n            return (\n              <DropdownMenuGroup\n                key={group.category ?? '__uncategorized'}\n                aria-labelledby={groupLabelId}\n                className={cn(\n                  'gap-[var(--ui-input-select-dropdown-section-list-gap)] overflow-visible px-0 py-[var(--ui-input-select-dropdown-section-container-padding-y)]',\n                  groupIndex === 0\n                    ? '[&:not(:first-child)]:border-t-0'\n                    : '[&:not(:first-child)]:border-t-[length:var(--ui-input-select-dropdown-section-container-border-width)] [&:not(:first-child)]:border-[var(--ui-input-select-dropdown-section-container-border-color)]'\n                )}\n              >\n                {group.category && (\n                  <div className=\"flex w-full items-center justify-between px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)]\">\n                    <span\n                      id={groupLabelId}\n                      className=\"text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]\"\n                    >\n                      {group.category}\n                    </span>\n                    <Button\n                      variant=\"ghost\"\n                      className=\"ms-auto h-6 shrink-0\"\n                      aria-labelledby={`${showAllLabelId} ${groupLabelId}`}\n                      onClick={() => {\n                        group.columns\n                          .filter((column) => column.hidden)\n                          .forEach((column) => onToggle(column.id));\n                      }}\n                    >\n                      <span id={showAllLabelId}>{showAllLabel}</span>\n                    </Button>\n                  </div>\n                )}\n                {group.visibleColumns.map((column) => (\n                  <DropdownMenuItem\n                    key={column.id}\n                    role=\"menuitemcheckbox\"\n                    aria-checked={!column.hidden}\n                    closeOnClick={false}\n                    onClick={() => onToggle(column.id)}\n                    className=\"min-h-[var(--ui-input-select-dropdown-item-global-container-height)] items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] font-normal text-[var(--ui-input-select-dropdown-item-global-label-color)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)] data-[highlighted]:active:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]\"\n                  >\n                    <Checkbox\n                      checked={!column.hidden}\n                      aria-hidden\n                      tabIndex={-1}\n                      className=\"pointer-events-none\"\n                    />\n                    {column.label}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            );\n          })\n        ) : (\n          <div className=\"px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]\">\n            {noResultsLabel}\n          </div>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\nTableViewOptions.displayName = 'TableViewOptions';\n\nexport { TableViewOptions };\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"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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"}
+{"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 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 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 (\n      <ArrowUpIcon\n        className={cn(\n          size,\n          'text-[var(--ui-table-header-sort-icon-color-active)]'\n        )}\n      />\n    );\n  }\n  if (direction === 'desc') {\n    return (\n      <ArrowDownIcon\n        className={cn(\n          size,\n          'text-[var(--ui-table-header-sort-icon-color-active)]'\n        )}\n      />\n    );\n  }\n  return (\n    <ArrowsDownUpIcon\n      className={cn(\n        size,\n        'text-[var(--ui-table-header-sort-icon-color-inactive)]'\n      )}\n    />\n  );\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 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 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 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/index.js

@@ -59,14 +59,14 @@ import { InputSearch as L } from "./components/ui/input-search/input-search.js";
 import { DataTableToolbar as Er } from "./components/ui/data-table/data-table-toolbar.js";
 import { InputDatePicker as Dr } from "./components/ui/input-date-picker/input-date-picker.js";
 import { DateRangePicker as Or } from "./components/ui/date-range-picker/date-range-picker.js";
-import { DescriptionList as kr, DescriptionListActions as Ar, DescriptionListItem as jr, DescriptionListLabel as Mr, DescriptionListValue as Nr, DescriptionListValueDescription as Pr } from "./components/ui/description-list/description-list.js";
-import { InputBox as Fr } from "./components/ui/input/input.js";
-import { InputText as R } from "./components/ui/input-text/input-text.js";
-import { Loading as Ir, loadingVariants as Lr } from "./components/ui/loading/loading.js";
-import { Dialog as Rr, DialogClose as zr } from "./components/ui/dialog/dialog.js";
-import { DialogFooterCarousel as Br } from "./components/ui/dialog-footer-carousel/dialog-footer-carousel.js";
-import { DialogWelcome as Vr } from "./components/ui/dialog-welcome/dialog-welcome.js";
-import { Empty as z, EmptyActions as Hr, EmptyDescription as Ur, EmptyHeader as Wr, EmptyIcon as Gr, EmptyLinks as Kr, EmptyTitle as qr } from "./components/ui/empty/empty.js";
+import { DescriptionList as R, DescriptionListActions as kr, DescriptionListItem as Ar, DescriptionListLabel as jr, DescriptionListValue as Mr, DescriptionListValueDescription as Nr } from "./components/ui/description-list/description-list.js";
+import { InputBox as Pr } from "./components/ui/input/input.js";
+import { InputText as z } from "./components/ui/input-text/input-text.js";
+import { Loading as Fr, loadingVariants as Ir } from "./components/ui/loading/loading.js";
+import { Dialog as Lr, DialogClose as Rr } from "./components/ui/dialog/dialog.js";
+import { DialogFooterCarousel as zr } from "./components/ui/dialog-footer-carousel/dialog-footer-carousel.js";
+import { DialogWelcome as Br } from "./components/ui/dialog-welcome/dialog-welcome.js";
+import { Empty as Vr, EmptyActions as Hr, EmptyDescription as Ur, EmptyHeader as Wr, EmptyIcon as Gr, EmptyLinks as Kr, EmptyTitle as qr } from "./components/ui/empty/empty.js";
 import { EmptyOverlay as Jr, emptyOverlayIconVariants as Yr } from "./components/ui/empty-overlay/empty-overlay.js";
 import { labelClassName as Xr } from "./components/ui/label/label.js";
 import { Separator as Zr } from "./components/ui/separator/separator.js";
@@ -101,27 +101,28 @@ import { SankeyChart as ca } from "./components/ui/sankey-chart/sankey-chart.js"
 import { ScatterChart as la } from "./components/ui/scatter-chart/scatter-chart.js";
 import { ScrollArea as ua, ScrollBar as da } from "./components/ui/scroll-area/scroll-area.js";
 import { Section as fa, SectionContent as pa, SectionHeader as ma, sectionVariants as ha, useSectionContext as ga } from "./components/ui/section/section.js";
-import { Sheet as H, SheetBody as U, SheetClose as W, SheetCloseButton as G, SheetContent as K, SheetDescription as q, SheetFooter as J, SheetHeader as Y, SheetOverlay as X, SheetPortal as Z, SheetTitle as Q, SheetTrigger as $, sheetVariants as _a } from "./components/ui/sheet/sheet.js";
-import { SheetDetails as va } from "./components/ui/sheet/sheet-details.js";
-import { Slider as ya } from "./components/ui/slider/slider.js";
-import { Stack as ba, stackVariants as xa } from "./components/ui/stack/stack.js";
-import { Stepper as Sa } from "./components/ui/stepper/stepper.js";
-import { StepperItem as Ca, stepperItemVariants as wa } from "./components/ui/stepper-item/stepper-item.js";
-import { ResizableHandle as Ta, ResizablePanel as Ea, ResizablePanelGroup as Da } from "./components/ui/resizable/resizable.js";
-import { SidebarPrimary as Oa, SidebarPrimaryCollapseTrigger as ka, SidebarPrimaryContent as Aa, SidebarPrimaryFooter as ja, SidebarPrimaryHeader as Ma, SidebarPrimaryMenu as Na, SidebarPrimaryMenuItem as Pa, SidebarPrimaryMenuItemExtras as Fa, SidebarPrimarySection as Ia, sidebarPrimaryMenuItemVariants as La } from "./components/ui/sidebar-primary/sidebar-primary.js";
-import { SidebarSecondary as Ra, SidebarSecondaryCollapseTrigger as za, SidebarSecondaryContent as Ba, SidebarSecondaryFooter as Va, SidebarSecondaryHeader as Ha, SidebarSecondaryMenu as Ua, SidebarSecondaryMenuItem as Wa, SidebarSecondaryMenuItemExtras as Ga, SidebarSecondarySection as Ka, SidebarSecondarySectionLabel as qa, sidebarSecondaryMenuItemVariants as Ja } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
-import { ButtonIconMenu as Ya } from "./components/ui/button-icon-menu/button-icon-menu.js";
-import { Tabs as Xa, TabsContent as Za, TabsList as Qa, TabsTrigger as $a } from "./components/ui/tabs/tabs.js";
-import { Toaster as eo, toast as to, toastVariants as no } from "./components/ui/toast/toast.js";
-import { Toggle as ro, ToggleGroup as io, ToggleGroupItem as ao } from "./components/ui/toggle-group/toggle-group.js";
-import { Toolbar as oo, ToolbarActionList as so, ToolbarActions as co } from "./components/ui/toolbar/toolbar.js";
-import { middleTruncate as lo } from "./components/ui/truncate-text/middle-truncate.js";
-import { measureTextWidth as uo } from "./components/ui/truncate-text/text-width.js";
-import { TruncateText as fo } from "./components/ui/truncate-text/truncate-text.js";
-import { Timeline as po, TimelineItem as mo } from "./components/ui/timeline/timeline.js";
-import { Timer as ho } from "./components/ui/timer/timer.js";
-import { TreeItem as go } from "./components/ui/tree-item/tree-item.js";
-import { Treemap as _o } from "./components/ui/treemap/treemap.js";
-import { WidgetPlaceholder as vo, WidgetPlaceholderAction as yo, WidgetPlaceholderContent as bo, WidgetPlaceholderFooter as xo, WidgetPlaceholderHeader as So, WidgetPlaceholderIcon as Co, WidgetPlaceholderImage as wo, WidgetPlaceholderText as To, WidgetPlaceholderTitle as Eo } from "./components/ui/widget-placeholder/widget-placeholder.js";
-import { Wizard as Do, WizardBody as Oo, WizardHeader as ko, WizardSubtitle as Ao } from "./components/ui/wizard/wizard.js";
-export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar, ct as AreaChart, ut as Avatar, dt as AvatarFallback, ft as AvatarGroup, pt as AvatarImage, ce as BREAKPOINT_2XL, le as BREAKPOINT_3XL, ue as BREAKPOINT_4XL, de as BREAKPOINT_LG, fe as BREAKPOINT_XL, V as Badge, ht as BarChart, _t as Breadcrumb, vt as BreadcrumbEllipsis, yt as BreadcrumbItem, bt as BreadcrumbLink, xt as BreadcrumbList, St as BreadcrumbPage, Ct as BreadcrumbSeparator, wt as Button, Et as ButtonGroup, Dt as ButtonGroupItem, e as ButtonIcon, qt as ButtonIconInput, Ya as ButtonIconMenu, At as ButtonMenu, Le as CHART_BRUSH_ARIA_LABEL, Re as CHART_BRUSH_HEIGHT, T as CHART_CATEGORICAL_TOKENS, E as CHART_DEFAULT_PALETTE, D as CHART_DIVERGING_TOKENS, ze as CHART_LABEL_FILL_CLASS, Be as CHART_LABEL_FILL_ON_SERIES_CLASS, Ve as CHART_LABEL_FONT_SIZE, He as CHART_LABEL_MARGIN, Ue as CHART_REFERENCE_LINE_STROKE, O as CHART_SEQUENTIAL_TOKENS, un as CHART_STATE_ILLUSTRATIONS, k as CHART_STATUS_TOKENS, Mt as Calendar, Nt as CalendarDayButton, Wt as CalendarHeader, Gt as CalendarItem, Kt as CalendarPanel, Xt as Card, Zt as CardContent, tn as CardFilter, Qt as CardFooter, $t as CardHeader, rn as CardSection, sn as CardWidget, on as CardWidgetCarousel, cn as CategoryBar, ke as ChartContainer, Ae as ChartLegend, je as ChartLegendContent, dn as ChartState, Me as ChartStyle, Ne as ChartTooltip, Pe as ChartTooltipContent, fn as ChartWidget, pn as Checkbox, mn as Chip, gn as Combobox, _n as ComboboxContent, vn as ComboboxEmpty, yn as ComboboxGroup, bn as ComboboxGroupLabel, xn as ComboboxInput, Sn as ComboboxItem, Cn as ComboboxList, wn as ComposedChart, En as ConfidenceCone, re as DEFAULT_TABLE_URL_PARAM_KEYS, rr as DataTable, cr as DataTableBulkActionsBar, lr as DataTableColumnHeader, ur as DataTableExpandTrigger, dr as DataTablePagination, Er as DataTableToolbar, nr as DataTableViewOptions, Or as DateRangePicker, kr as DescriptionList, Ar as DescriptionListActions, jr as DescriptionListItem, Mr as DescriptionListLabel, Nr as DescriptionListValue, Pr as DescriptionListValueDescription, H as Details, U as DetailsBody, W as DetailsClose, G as DetailsCloseButton, K as DetailsContent, q as DetailsDescription, J as DetailsFooter, Y as DetailsHeader, X as DetailsOverlay, Z as DetailsPortal, Q as DetailsTitle, $ as DetailsTrigger, Rr as Dialog, zr as DialogClose, Br as DialogFooterCarousel, Pt as DialogFooterDefault, Vr as DialogWelcome, Dn as DropdownMenu, On as DropdownMenuCheckboxItem, kn as DropdownMenuContent, An as DropdownMenuGroup, jn as DropdownMenuItem, Mn as DropdownMenuLabel, Nn as DropdownMenuPortal, Pn as DropdownMenuRadioGroup, Fn as DropdownMenuRadioItem, In as DropdownMenuSeparator, Ln as DropdownMenuShortcut, Rn as DropdownMenuSub, zn as DropdownMenuSubContent, Bn as DropdownMenuSubTrigger, Vn as DropdownMenuTrigger, z as Empty, Hr as EmptyActions, Ur as EmptyDescription, Wr as EmptyHeader, Gr as EmptyIcon, Kr as EmptyLinks, Jr as EmptyOverlay, qr as EmptyTitle, fi as FUNNEL_CHART_DEFAULT_PALETTE, Qr as Field, $r as FieldContent, ei as FieldControl, ti as FieldDescription, ni as FieldError, ri as FieldGroup, ii as FieldLabel, ai as FieldLegend, oi as FieldSeparator, si as FieldSet, ci as FieldTitle, di as FilterCards, fr as FilterChips, pr as FilterChipsList, mr as FilterChipsReset, xr as FilterSearch, Sr as FilterSearchActions, Cr as FilterSearchAppliedFilters, wr as FilterSearchFilters, li as FittedActions, yi as Form, pi as FunnelChart, gi as Grid, vi as Histogram, R as Input, Fr as InputBox, Dr as InputDatePicker, Ti as InputNumPicker, Ei as InputOTP, Di as InputPassword, L as InputSearch, A as InputSelect, j as InputSelectContent, Ft as InputSelectDescription, It as InputSelectError, Lt as InputSelectExpander, Rt as InputSelectField, zt as InputSelectGroup, M as InputSelectItem, Bt as InputSelectLabel, Vt as InputSelectSearch, N as InputSelectSection, P as InputSelectSectionLabel, Ht as InputSelectStatus, F as InputSelectTrigger, I as InputSelectValue, R as InputText, B as InputTextArea, Oi as LineChart, Ai as Link, Ir as Loading, Fi as Metric, Ii as NumberField, Li as NumberFieldDecrement, Ri as NumberFieldGroup, zi as NumberFieldIncrement, Bi as NumberFieldInput, Vi as PageContent, Ui as PageHeader, Wi as PageHeaderActions, Gi as PageHeaderDescription, Ki as PageHeaderDescriptionRow, qi as PageHeaderRow, Ji as PageHeaderTags, Yi as PageHeaderTitle, Xi as Pagination, Zi as PaginationContent, Qi as PaginationEllipsis, $i as PaginationItem, ea as PaginationLink, ta as PaginationNext, na as PaginationPrevious, ra as PieChart, hr as Popover, gr as PopoverBody, _r as PopoverContent, vr as PopoverFooter, yr as PopoverPortal, br as PopoverTrigger, he as PortalContainerProvider, aa as Progress, oa as ProgressCircle, pe as ROOT_FONT_SIZE_PX, bi as RadarChart, Si as RadialBarChart, Ci as Radio, wi as RadioGroup, Ta as ResizableHandle, Ea as ResizablePanel, Da as ResizablePanelGroup, ca as SankeyChart, la as ScatterChart, ua as ScrollArea, da as ScrollBar, L as Search, fa as Section, pa as SectionContent, ma as SectionHeader, A as Select, j as SelectContent, N as SelectGroup, P as SelectGroupLabel, M as SelectItem, F as SelectTrigger, I as SelectValue, Zr as Separator, H as Sheet, U as SheetBody, W as SheetClose, G as SheetCloseButton, K as SheetContent, q as SheetDescription, va as SheetDetails, J as SheetFooter, Y as SheetHeader, X as SheetOverlay, Z as SheetPortal, Q as SheetTitle, $ as SheetTrigger, Oa as SidebarPrimary, ka as SidebarPrimaryCollapseTrigger, Aa as SidebarPrimaryContent, ja as SidebarPrimaryFooter, Ma as SidebarPrimaryHeader, Na as SidebarPrimaryMenu, Pa as SidebarPrimaryMenuItem, Fa as SidebarPrimaryMenuItemExtras, Ia as SidebarPrimarySection, Ra as SidebarSecondary, za as SidebarSecondaryCollapseTrigger, Ba as SidebarSecondaryContent, Va as SidebarSecondaryFooter, Ha as SidebarSecondaryHeader, Ua as SidebarSecondaryMenu, Wa as SidebarSecondaryMenuItem, Ga as SidebarSecondaryMenuItemExtras, Ka as SidebarSecondarySection, qa as SidebarSecondarySectionLabel, Mi as Skeleton, ya as Slider, ba as Stack, Sa as Stepper, Ca as StepperItem, Yt as Switch, Hn as Table, Un as TableActionsCell, Wn as TableBody, Gn as TableCaption, Kn as TableCell, qn as TableFooter, Jn as TableHead, Yn as TableHeader, $n as TablePagination, Xn as TableRow, Zn as TableSelectCell, Qn as TableSettingsCell, er as TableViewOptions, Xa as Tabs, Za as TabsContent, Qa as TabsList, $a as TabsTrigger, V as Tag, B as Textarea, po as Timeline, mo as TimelineItem, ho as Timer, eo as Toaster, ro as Toggle, io as ToggleGroup, ao as ToggleGroupItem, oo as Toolbar, so as ToolbarActionList, co as ToolbarActions, d as Tooltip, f as TooltipContent, p as TooltipProvider, m as TooltipTrigger, go as TreeItem, _o as Treemap, Ni as TrendIndicator, fo as TruncateText, vo as WidgetPlaceholder, yo as WidgetPlaceholderAction, bo as WidgetPlaceholderContent, xo as WidgetPlaceholderFooter, So as WidgetPlaceholderHeader, Co as WidgetPlaceholderIcon, wo as WidgetPlaceholderImage, To as WidgetPlaceholderText, Eo as WidgetPlaceholderTitle, Do as Wizard, Oo as WizardBody, ko as WizardHeader, Ao as WizardSubtitle, u as alertVariants, lt as areaChartVariants, mt as avatarVariants, gt as barChartVariants, Ot as buttonGroupItemVariants, kt as buttonGroupVariants, Jt as buttonIconInputVariants, t as buttonIconVariants, jt as buttonMenuVariants, Tt as buttonVariants, nn as cardFilterVariants, an as cardSectionVariants, en as cardVariants, ln as categoryBarVariants, hn as chipVariants, ee as cn, Tn as composedChartVariants, ui as computeFittedVisibleCount, We as createTickFormatter, Ge as dropProjectionPayload, Yr as emptyOverlayIconVariants, Te as findDuplicateTones, Ke as formatCompactNumber, qe as formatPercent, mi as funnelChartPercent, hi as funnelChartVariants, C as getAppShellChatInitialLayout, ir as getCellStyle, ar as getColumnWidth, or as getPinnedStyle, me as getViewportWidth, _i as gridVariants, tr as isBulkSelectionActive, Xr as labelClassName, ki as lineChartVariants, ji as linkVariants, Ee as listPaletteChoices, De as listPaletteStops, Lr as loadingVariants, uo as measureTextWidth, lo as middleTruncate, ie as parseTableUrlState, ia as pieChartVariants, sa as progressCircleVariants, xi as radarChartVariants, sr as reorderColumn, Je as resolveAnimation, Ye as resolveAxisDomain, Xe as resolveBrushProps, Ze as resolveCartesianLabelPosition, Qe as resolveCategoryRange, Fe as resolveChartColors, $e as resolveChartReferenceValue, et as resolveLabelFillClass, tt as resolveReferenceLineProps, nt as resolveRotatedTickAnchor, Oe as resolveSeriesColor, rt as resolveXAxisHeight, it as resolveXAxisTitle, at as resolveYAxisTitle, ha as sectionVariants, ae as serializeTableUrlState, _a as sheetVariants, La as sidebarPrimaryMenuItemVariants, Ja as sidebarSecondaryMenuItemVariants, xa as stackVariants, wa as stepperItemVariants, Hi as tagVariants, Ie as toCssKey, ot as toLabelFormatter, st as toReferenceLineList, to as toast, no as toastVariants, Pi as trendIndicatorVariants, we as useAccordionContainerContext, w as useAppShellChatInitialLayout, Tr as useFilterSearchFilters, Ut as useInputSelectFilter, ne as useIntersectionObserver, ge as usePortalContainer, ga as useSectionContext, te as useSortState, oe as useTableUrlState, se as useWizard };
+import { SegmentControl as _a, SegmentControlItem as va, segmentControlVariants as ya } from "./components/ui/segment-control/segment-control.js";
+import { Sheet as H, SheetBody as U, SheetClose as W, SheetCloseButton as G, SheetContent as K, SheetDescription as q, SheetFooter as J, SheetHeader as Y, SheetOverlay as X, SheetPortal as Z, SheetTitle as Q, SheetTrigger as $, sheetVariants as ba } from "./components/ui/sheet/sheet.js";
+import { SheetDetails as xa } from "./components/ui/sheet/sheet-details.js";
+import { Slider as Sa } from "./components/ui/slider/slider.js";
+import { Stack as Ca, stackVariants as wa } from "./components/ui/stack/stack.js";
+import { Stepper as Ta } from "./components/ui/stepper/stepper.js";
+import { StepperItem as Ea, stepperItemVariants as Da } from "./components/ui/stepper-item/stepper-item.js";
+import { ResizableHandle as Oa, ResizablePanel as ka, ResizablePanelGroup as Aa } from "./components/ui/resizable/resizable.js";
+import { SidebarPrimary as ja, SidebarPrimaryCollapseTrigger as Ma, SidebarPrimaryContent as Na, SidebarPrimaryFooter as Pa, SidebarPrimaryHeader as Fa, SidebarPrimaryMenu as Ia, SidebarPrimaryMenuItem as La, SidebarPrimaryMenuItemExtras as Ra, SidebarPrimarySection as za, sidebarPrimaryMenuItemVariants as Ba } from "./components/ui/sidebar-primary/sidebar-primary.js";
+import { SidebarSecondary as Va, SidebarSecondaryCollapseTrigger as Ha, SidebarSecondaryContent as Ua, SidebarSecondaryFooter as Wa, SidebarSecondaryHeader as Ga, SidebarSecondaryMenu as Ka, SidebarSecondaryMenuItem as qa, SidebarSecondaryMenuItemExtras as Ja, SidebarSecondarySection as Ya, SidebarSecondarySectionLabel as Xa, sidebarSecondaryMenuItemVariants as Za } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
+import { ButtonIconMenu as Qa } from "./components/ui/button-icon-menu/button-icon-menu.js";
+import { Tabs as $a, TabsContent as eo, TabsList as to, TabsTrigger as no } from "./components/ui/tabs/tabs.js";
+import { Toaster as ro, toast as io, toastVariants as ao } from "./components/ui/toast/toast.js";
+import { Toggle as oo, ToggleGroup as so, ToggleGroupItem as co } from "./components/ui/toggle-group/toggle-group.js";
+import { Toolbar as lo, ToolbarActionList as uo, ToolbarActions as fo } from "./components/ui/toolbar/toolbar.js";
+import { middleTruncate as po } from "./components/ui/truncate-text/middle-truncate.js";
+import { measureTextWidth as mo } from "./components/ui/truncate-text/text-width.js";
+import { TruncateText as ho } from "./components/ui/truncate-text/truncate-text.js";
+import { Timeline as go, TimelineItem as _o } from "./components/ui/timeline/timeline.js";
+import { Timer as vo } from "./components/ui/timer/timer.js";
+import { TreeItem as yo } from "./components/ui/tree-item/tree-item.js";
+import { Treemap as bo } from "./components/ui/treemap/treemap.js";
+import { WidgetPlaceholder as xo, WidgetPlaceholderAction as So, WidgetPlaceholderContent as Co, WidgetPlaceholderFooter as wo, WidgetPlaceholderHeader as To, WidgetPlaceholderIcon as Eo, WidgetPlaceholderImage as Do, WidgetPlaceholderText as Oo, WidgetPlaceholderTitle as ko } from "./components/ui/widget-placeholder/widget-placeholder.js";
+import { Wizard as Ao, WizardBody as jo, WizardHeader as Mo, WizardSubtitle as No } from "./components/ui/wizard/wizard.js";
+export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar, ct as AreaChart, ut as Avatar, dt as AvatarFallback, ft as AvatarGroup, pt as AvatarImage, ce as BREAKPOINT_2XL, le as BREAKPOINT_3XL, ue as BREAKPOINT_4XL, de as BREAKPOINT_LG, fe as BREAKPOINT_XL, V as Badge, ht as BarChart, _t as Breadcrumb, vt as BreadcrumbEllipsis, yt as BreadcrumbItem, bt as BreadcrumbLink, xt as BreadcrumbList, St as BreadcrumbPage, Ct as BreadcrumbSeparator, wt as Button, Et as ButtonGroup, Dt as ButtonGroupItem, e as ButtonIcon, qt as ButtonIconInput, Qa as ButtonIconMenu, At as ButtonMenu, Le as CHART_BRUSH_ARIA_LABEL, Re as CHART_BRUSH_HEIGHT, T as CHART_CATEGORICAL_TOKENS, E as CHART_DEFAULT_PALETTE, D as CHART_DIVERGING_TOKENS, ze as CHART_LABEL_FILL_CLASS, Be as CHART_LABEL_FILL_ON_SERIES_CLASS, Ve as CHART_LABEL_FONT_SIZE, He as CHART_LABEL_MARGIN, Ue as CHART_REFERENCE_LINE_STROKE, O as CHART_SEQUENTIAL_TOKENS, un as CHART_STATE_ILLUSTRATIONS, k as CHART_STATUS_TOKENS, Mt as Calendar, Nt as CalendarDayButton, Wt as CalendarHeader, Gt as CalendarItem, Kt as CalendarPanel, Xt as Card, Zt as CardContent, tn as CardFilter, Qt as CardFooter, $t as CardHeader, rn as CardSection, sn as CardWidget, on as CardWidgetCarousel, cn as CategoryBar, ke as ChartContainer, Ae as ChartLegend, je as ChartLegendContent, dn as ChartState, Me as ChartStyle, Ne as ChartTooltip, Pe as ChartTooltipContent, fn as ChartWidget, pn as Checkbox, mn as Chip, gn as Combobox, _n as ComboboxContent, vn as ComboboxEmpty, yn as ComboboxGroup, bn as ComboboxGroupLabel, xn as ComboboxInput, Sn as ComboboxItem, Cn as ComboboxList, wn as ComposedChart, En as ConfidenceCone, re as DEFAULT_TABLE_URL_PARAM_KEYS, rr as DataTable, cr as DataTableBulkActionsBar, lr as DataTableColumnHeader, ur as DataTableExpandTrigger, dr as DataTablePagination, Er as DataTableToolbar, nr as DataTableViewOptions, Or as DateRangePicker, R as DescriptionList, kr as DescriptionListActions, Ar as DescriptionListItem, jr as DescriptionListLabel, Mr as DescriptionListValue, Nr as DescriptionListValueDescription, H as Details, U as DetailsBody, W as DetailsClose, G as DetailsCloseButton, K as DetailsContent, q as DetailsDescription, J as DetailsFooter, Y as DetailsHeader, X as DetailsOverlay, Z as DetailsPortal, Q as DetailsTitle, $ as DetailsTrigger, Lr as Dialog, Rr as DialogClose, zr as DialogFooterCarousel, Pt as DialogFooterDefault, Br as DialogWelcome, Dn as DropdownMenu, On as DropdownMenuCheckboxItem, kn as DropdownMenuContent, An as DropdownMenuGroup, jn as DropdownMenuItem, Mn as DropdownMenuLabel, Nn as DropdownMenuPortal, Pn as DropdownMenuRadioGroup, Fn as DropdownMenuRadioItem, In as DropdownMenuSeparator, Ln as DropdownMenuShortcut, Rn as DropdownMenuSub, zn as DropdownMenuSubContent, Bn as DropdownMenuSubTrigger, Vn as DropdownMenuTrigger, Vr as Empty, Hr as EmptyActions, Ur as EmptyDescription, Wr as EmptyHeader, Gr as EmptyIcon, Kr as EmptyLinks, Jr as EmptyOverlay, qr as EmptyTitle, fi as FUNNEL_CHART_DEFAULT_PALETTE, Qr as Field, $r as FieldContent, ei as FieldControl, ti as FieldDescription, ni as FieldError, ri as FieldGroup, ii as FieldLabel, ai as FieldLegend, oi as FieldSeparator, si as FieldSet, ci as FieldTitle, di as FilterCards, fr as FilterChips, pr as FilterChipsList, mr as FilterChipsReset, xr as FilterSearch, Sr as FilterSearchActions, Cr as FilterSearchAppliedFilters, wr as FilterSearchFilters, li as FittedActions, yi as Form, pi as FunnelChart, gi as Grid, vi as Histogram, z as Input, Pr as InputBox, Dr as InputDatePicker, Ti as InputNumPicker, Ei as InputOTP, Di as InputPassword, L as InputSearch, A as InputSelect, j as InputSelectContent, Ft as InputSelectDescription, It as InputSelectError, Lt as InputSelectExpander, Rt as InputSelectField, zt as InputSelectGroup, M as InputSelectItem, Bt as InputSelectLabel, Vt as InputSelectSearch, N as InputSelectSection, P as InputSelectSectionLabel, Ht as InputSelectStatus, F as InputSelectTrigger, I as InputSelectValue, z as InputText, B as InputTextArea, Oi as LineChart, Ai as Link, Fr as Loading, Fi as Metric, Ii as NumberField, Li as NumberFieldDecrement, Ri as NumberFieldGroup, zi as NumberFieldIncrement, Bi as NumberFieldInput, Vi as PageContent, Ui as PageHeader, Wi as PageHeaderActions, Gi as PageHeaderDescription, Ki as PageHeaderDescriptionRow, qi as PageHeaderRow, Ji as PageHeaderTags, Yi as PageHeaderTitle, Xi as Pagination, Zi as PaginationContent, Qi as PaginationEllipsis, $i as PaginationItem, ea as PaginationLink, ta as PaginationNext, na as PaginationPrevious, ra as PieChart, hr as Popover, gr as PopoverBody, _r as PopoverContent, vr as PopoverFooter, yr as PopoverPortal, br as PopoverTrigger, he as PortalContainerProvider, aa as Progress, oa as ProgressCircle, pe as ROOT_FONT_SIZE_PX, bi as RadarChart, Si as RadialBarChart, Ci as Radio, wi as RadioGroup, Oa as ResizableHandle, ka as ResizablePanel, Aa as ResizablePanelGroup, ca as SankeyChart, la as ScatterChart, ua as ScrollArea, da as ScrollBar, L as Search, fa as Section, pa as SectionContent, ma as SectionHeader, _a as SegmentControl, va as SegmentControlItem, A as Select, j as SelectContent, N as SelectGroup, P as SelectGroupLabel, M as SelectItem, F as SelectTrigger, I as SelectValue, Zr as Separator, H as Sheet, U as SheetBody, W as SheetClose, G as SheetCloseButton, K as SheetContent, q as SheetDescription, xa as SheetDetails, J as SheetFooter, Y as SheetHeader, X as SheetOverlay, Z as SheetPortal, Q as SheetTitle, $ as SheetTrigger, ja as SidebarPrimary, Ma as SidebarPrimaryCollapseTrigger, Na as SidebarPrimaryContent, Pa as SidebarPrimaryFooter, Fa as SidebarPrimaryHeader, Ia as SidebarPrimaryMenu, La as SidebarPrimaryMenuItem, Ra as SidebarPrimaryMenuItemExtras, za as SidebarPrimarySection, Va as SidebarSecondary, Ha as SidebarSecondaryCollapseTrigger, Ua as SidebarSecondaryContent, Wa as SidebarSecondaryFooter, Ga as SidebarSecondaryHeader, Ka as SidebarSecondaryMenu, qa as SidebarSecondaryMenuItem, Ja as SidebarSecondaryMenuItemExtras, Ya as SidebarSecondarySection, Xa as SidebarSecondarySectionLabel, Mi as Skeleton, Sa as Slider, Ca as Stack, Ta as Stepper, Ea as StepperItem, Yt as Switch, Hn as Table, Un as TableActionsCell, Wn as TableBody, Gn as TableCaption, Kn as TableCell, qn as TableFooter, Jn as TableHead, Yn as TableHeader, $n as TablePagination, Xn as TableRow, Zn as TableSelectCell, Qn as TableSettingsCell, er as TableViewOptions, $a as Tabs, eo as TabsContent, to as TabsList, no as TabsTrigger, V as Tag, B as Textarea, go as Timeline, _o as TimelineItem, vo as Timer, ro as Toaster, oo as Toggle, so as ToggleGroup, co as ToggleGroupItem, lo as Toolbar, uo as ToolbarActionList, fo as ToolbarActions, d as Tooltip, f as TooltipContent, p as TooltipProvider, m as TooltipTrigger, yo as TreeItem, bo as Treemap, Ni as TrendIndicator, ho as TruncateText, xo as WidgetPlaceholder, So as WidgetPlaceholderAction, Co as WidgetPlaceholderContent, wo as WidgetPlaceholderFooter, To as WidgetPlaceholderHeader, Eo as WidgetPlaceholderIcon, Do as WidgetPlaceholderImage, Oo as WidgetPlaceholderText, ko as WidgetPlaceholderTitle, Ao as Wizard, jo as WizardBody, Mo as WizardHeader, No as WizardSubtitle, u as alertVariants, lt as areaChartVariants, mt as avatarVariants, gt as barChartVariants, Ot as buttonGroupItemVariants, kt as buttonGroupVariants, Jt as buttonIconInputVariants, t as buttonIconVariants, jt as buttonMenuVariants, Tt as buttonVariants, nn as cardFilterVariants, an as cardSectionVariants, en as cardVariants, ln as categoryBarVariants, hn as chipVariants, ee as cn, Tn as composedChartVariants, ui as computeFittedVisibleCount, We as createTickFormatter, Ge as dropProjectionPayload, Yr as emptyOverlayIconVariants, Te as findDuplicateTones, Ke as formatCompactNumber, qe as formatPercent, mi as funnelChartPercent, hi as funnelChartVariants, C as getAppShellChatInitialLayout, ir as getCellStyle, ar as getColumnWidth, or as getPinnedStyle, me as getViewportWidth, _i as gridVariants, tr as isBulkSelectionActive, Xr as labelClassName, ki as lineChartVariants, ji as linkVariants, Ee as listPaletteChoices, De as listPaletteStops, Ir as loadingVariants, mo as measureTextWidth, po as middleTruncate, ie as parseTableUrlState, ia as pieChartVariants, sa as progressCircleVariants, xi as radarChartVariants, sr as reorderColumn, Je as resolveAnimation, Ye as resolveAxisDomain, Xe as resolveBrushProps, Ze as resolveCartesianLabelPosition, Qe as resolveCategoryRange, Fe as resolveChartColors, $e as resolveChartReferenceValue, et as resolveLabelFillClass, tt as resolveReferenceLineProps, nt as resolveRotatedTickAnchor, Oe as resolveSeriesColor, rt as resolveXAxisHeight, it as resolveXAxisTitle, at as resolveYAxisTitle, ha as sectionVariants, ya as segmentControlVariants, ae as serializeTableUrlState, ba as sheetVariants, Ba as sidebarPrimaryMenuItemVariants, Za as sidebarSecondaryMenuItemVariants, wa as stackVariants, Da as stepperItemVariants, Hi as tagVariants, Ie as toCssKey, ot as toLabelFormatter, st as toReferenceLineList, io as toast, ao as toastVariants, Pi as trendIndicatorVariants, we as useAccordionContainerContext, w as useAppShellChatInitialLayout, Tr as useFilterSearchFilters, Ut as useInputSelectFilter, ne as useIntersectionObserver, ge as usePortalContainer, ga as useSectionContext, te as useSortState, oe as useTableUrlState, se as useWizard };

package/dist/llms/data-table.md

@@ -47,7 +47,7 @@ optional row expansion, column resizing, and sticky (pinned) columns.
 | `DataTableColumnHeader`   | A sortable column header — single-click toggle (↑/↓/↕). Use in a column's `header`.                                                                                                                                                       |
 | `DataTableToolbar`        | Search box + per-column filters + applied-filter chips. Takes a `table` instance.                                                                                                                                                         |
 | `DataTablePagination`     | Selection count, rows-per-page, page controls. Takes a `table`.                                                                                                                                                                           |
-| `DataTableViewOptions`    | Column-visibility menu (a thin TanStack adapter over the `TableViewOptions` primitive). Pass `iconOnly` for the cog trigger that belongs in the trailing settings column.                                                                 |
+| `DataTableViewOptions`    | Searchable, categorized column-visibility menu (a thin TanStack adapter over `TableViewOptions`). Pass `iconOnly` for the cog trigger in the trailing settings column.                                                                    |
 | `DataTableExpandTrigger`  | A chevron toggle wired to a row's expansion state, placed inside a column's `cell` render function.                                                                                                                                       |
 | `DataTableBulkActionsBar` | A selection-aware bar above the grid: the consumer's bulk actions in a `<fieldset>` disabled until a selection is active, plus the selection summary and a Deselect control (or `loadedLabel` when nothing is selected). Takes a `table`. |
 | `isBulkSelectionActive`   | The single predicate for the bulk-selection threshold (one or more rows selected). Pass it to `TableActionsCell`'s `bulkSelectionActive` rather than re-deriving it.                                                                      |
@@ -96,10 +96,15 @@ from it too (see **Server-driven usage** below).
   `columnResizing`). Pass `onColumnSizingChange` to persist widths.
 - **Sticky (pinned) columns** — set `meta.pin: 'left' | 'right'` on a
   `ColumnDef`. DataTable drives TanStack's native column-pinning and renders the
-  column as `position: sticky` cells with an opaque row background.
+  column as `position: sticky` cells with an opaque row background. The built-in
+  trailing settings/actions column is pinned right by default.
 - **Wrapping columns** — set `meta.wrap: true` on a `ColumnDef` to let that
-  column's header and cell content wrap onto multiple lines instead of
-  truncating, mirroring the `Table` primitives' `wrap` prop.
+  column's header and cell content drop the fixed row height and wrap onto
+  multiple lines, mirroring the `Table` primitives' `wrap` prop.
+- **Visibility labels and categories** — set `meta.label` for the text shown in
+  the visibility dropdown and `meta.category` to group related columns under a
+  labelled section with a Show all action. Labels fall back to a string header,
+  then the column id.
 - **Expandable column** — put a `DataTableExpandTrigger` in a column's `cell`
   render function so the expand affordance sits in a real column instead of a
   whole-row click. It reads `row.getCanExpand()` / `getIsExpanded()` and calls
@@ -164,10 +169,15 @@ as `children` of the toolbar for per-column filtering.
 | `renderRowActions` | `(row: Row<TData>) => ReactNode` | — | no | Renders the content of a row's overflow-actions menu (e.g. Edit/Delete items), opened from the ellipsis trigger in the trailing action column. Omit to render that row without a trigger — the 48px column is still reserved. Suppressed (like the trigger itself) while a bulk selection is active, per `TableActionsCell`. |
 | `rowActionsLabel` | `string` | `'Row actions'` | no | Accessible name of a row's overflow-actions trigger. Override to localize. |
 | `columnSettingsLabel` | `string` | — | no | Accessible name of the action column's column-visibility trigger. Override to localize; falls through to the view-options part's own default ("Column settings") when omitted. |
+| `columnSearchPlaceholder` | `string` | `'Search columns'` | no | Placeholder and accessible name of the built-in column-visibility search field. Override to localize. |
+| `showAllColumnsLabel` | `ReactNode` | `'Show all'` | no | Visible label of each category action that reveals every hidden column in that category. Override to localize. |
+| `noColumnsFoundLabel` | `ReactNode` | `'No columns found.'` | no | Empty state shown when the column-visibility search has no matches. Override to localize. |
 | `headerHints` | `Partial<DataTableHeaderHints>` | `{ sort: { label: 'Sort column', action: 'Click' }, reorder: { label: 'Reorder column', action: 'Drag' }, resize: { label: 'Resize column', action: 'Drag border' } }` | no | Copy of the tooltip shown while a header cell is hovered/focused — one `{ label, action }` line per capability that column actually has (`sort` / `reorder` / `resize`). Merged over the defaults, so any subset can be overridden to localize; a column with no capability shows no tooltip at all. |
 | `bulkSelectionActive` | `boolean` | `false` | no | On the `TableActionsCell` part — suppress this row's actions because a *bulk* selection is in play. The cell still reserves its 48px column but renders no children and no hover/press tint. Pass `isBulkSelectionActive(table)` (exported alongside DataTable) rather than re-deriving the threshold: **one or more rows selected**, including exactly one. |
 | `meta.pin` | `'left' | 'right'` | — | no | Set on a `ColumnDef.meta` (not a DataTable prop) — pins the column to a table edge. DataTable drives TanStack's native column-pinning and renders the column as `position: sticky` cells with an opaque row background. |
-| `meta.wrap` | `boolean` | — | no | Set on a `ColumnDef.meta` (not a DataTable prop) — allows a column's header and cell content to wrap onto multiple lines instead of truncating, mirroring the `Table` primitives' `wrap` prop. |
+| `meta.wrap` | `boolean` | — | no | Set on a `ColumnDef.meta` (not a DataTable prop) — allows a column's header and cell content to wrap onto multiple lines and drop the fixed row height, mirroring the `Table` primitives' `wrap` prop. |
+| `meta.label` | `string` | — | no | Human-readable label shown for the column in the visibility dropdown. Falls back to a string header and then the column id. |
+| `meta.category` | `string` | — | no | Optional visibility-dropdown category. Columns with the same value are grouped under a labelled section with a per-category Show all action. |
 | `children` | `ReactNode` | — | no | On DataTableToolbar — filter fields rendered inside a `FilterSearchFilters` popover (wire each to a column via `useFilterSearchFilters()` keyed by column id). When provided, the toolbar renders the filter popover plus a `FilterSearchAppliedFilters` chip row below it. |
 | `filtersLabel` | `ReactNode` | `'Filters'` | no | On DataTableToolbar — label for the filters trigger button. |
 | `getFilterChipLabel` | `(key: string, value: unknown) => ReactNode` | — | no | On DataTableToolbar — formats an applied-filter chip's label (defaults to "<id>: <value>"). |
@@ -293,11 +303,27 @@ Scenario: Sort a column in a single click
 
 ```gherkin
 Scenario: Hide a column
-  Given the toolbar's view-options menu
+  Given the view-options menu opened from the trailing settings cog
   When the user unchecks the column
   Then that column is removed from the grid
 ```
 
+```gherkin
+Scenario: Search and group visible columns
+  Given columns with meta.label and meta.category values
+  When the user opens the trailing settings cog
+  Then the visibility menu uses the metadata labels and groups matching categories
+  When the user searches
+  Then only matching column labels remain in the internally scrolling popup
+```
+
+```gherkin
+Scenario: Reveal a category
+  Given a category with multiple hidden columns
+  When the user activates that category's Show all action
+  Then every hidden column in that category becomes visible
+```
+
 ```gherkin
 Scenario: Filter via the toolbar
   Given a DataTableToolbar with searchKey="email"
@@ -394,7 +420,7 @@ Scenario: Sticky (pinned) columns
 ```gherkin
 Scenario: Wrapping columns
   Given a column with meta.wrap = true
-  Then that column's header and cell content wrap onto multiple lines instead of truncating
+  Then that column's header and cell content drop the fixed row height and wrap onto multiple lines
 ```
 
 ```gherkin

package/dist/llms/segment-control.md

@@ -0,0 +1,161 @@
+# SegmentControl
+
+> A compact, single-choice control for switching between related views or filters. It has hug and fill layouts and may show a counter beside an item.
+
+**Status:** ready · **Category:** selection · **Since:** v5.4.0
+
+## Import
+
+```tsx
+import { SegmentControl, SegmentControlItem } from '@acronis-platform/ui-react'
+import { SquareDashedIcon } from '@acronis-platform/icons-react/stroke-mono'
+
+```
+
+## Quick example
+
+```tsx
+<SegmentControl variant="fill" defaultValue="active" aria-label="Status">
+  <SegmentControlItem value="active" hasCounter counter={{ variant: 'neutral', size: 'sm', icon: <SquareDashedIcon size={16} />, children: '7' }}>
+    Active
+  </SegmentControlItem>
+  <SegmentControlItem value="completed">Completed</SegmentControlItem>
+  <SegmentControlItem value="all">All</SegmentControlItem>
+</SegmentControl>
+```
+
+Use SegmentControl to switch among a small number of mutually exclusive views,
+filters, or modes when the current choice should remain visible.
+
+## When to use
+
+- Switch between two related views with `variant="hug"`.
+- Switch between three or more peer views across an available row with
+  `variant="fill"`.
+- Show a compact per-view count by enabling `hasCounter` and passing Tag props
+  through an item's `counter`.
+
+## When not to use
+
+- A multi-select formatting or filter control — use **ToggleGroup**.
+- A long list or form selection needing descriptions — use **RadioGroup** or
+  **Select**.
+- Navigation that also swaps page panels — use **Tabs**.
+
+## Example (React)
+
+```tsx
+import { SegmentControl, SegmentControlItem } from '@acronis-platform/ui-react';
+import { SquareDashedIcon } from '@acronis-platform/icons-react/stroke-mono';
+
+<SegmentControl variant="fill" defaultValue="active" aria-label="Status">
+  <SegmentControlItem
+    value="active"
+    hasCounter
+    counter={{
+      variant: 'neutral',
+      size: 'sm',
+      icon: <SquareDashedIcon size={16} />,
+      children: '7',
+    }}
+  >
+    Active
+  </SegmentControlItem>
+  <SegmentControlItem value="completed">Completed</SegmentControlItem>
+  <SegmentControlItem value="all">All</SegmentControlItem>
+</SegmentControl>;
+```
+
+Give the group a meaningful accessible name. Each item needs a unique `value`.
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `variant` | `'hug' | 'fill'` | `'hug'` | no | Layout mode. Use `hug` for one or two items; `fill` makes the control and its direct items share the available inline width for three or more. |
+| `has-scroll` | `boolean` | `false` | no | Puts the items on a horizontally scrollable track and pins a pair of paging chevrons to its inline end. Items keep their natural width so the track can overflow, which takes precedence over `fill`'s item stretching. |
+| `scroll-prev-label` | `string` | `'Previous'` | no | Accessible label for the previous-page chevron. |
+| `scroll-next-label` | `string` | `'Next'` | no | Accessible label for the next-page chevron. |
+| `value` | `string` | — | no | Controlled selected item value. Pair with value-change. |
+| `default-value` | `string` | — | no | Initially selected item value when uncontrolled. |
+| `disabled` | `boolean` | `false` | no | Disables every group item; items may also be disabled individually. |
+| `name` | `string` | — | no | Form field name submitted with the selected value. |
+| `required` | `boolean` | `false` | no | Requires a selected item before a containing form submits. |
+| `item.has-counter` | `boolean` | `false` | no | Enables the item's trailing Tag counter. |
+| `item.counter` | `{ variant, size, icon, children }` | — | no | Tag props used only when item.has-counter is true. |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `value-change` | `string` | Fired for an enabled selection change; React exposes `onValueChange(value, details)`. |
+
+## Content slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | SegmentControlItem children. Every item requires a unique value and label content; its Tag counter renders only when hasCounter is true. |
+
+## Behavior
+
+### Selection
+
+**Given** a SegmentControl with items
+**When** a user clicks an enabled item, presses `Space`, or navigates with an
+arrow key
+**Then** that item becomes the only selected item
+**And** the group emits `value-change` with its value.
+
+**Given** controlled `value`
+**When** a user selects another item
+**Then** the component emits `value-change`
+**And** the visual selection changes only when the consumer updates `value`.
+
+### Layout
+
+**Given** one or two items
+**When** `variant` is `hug` (the default)
+**Then** the control takes only the width its content needs.
+
+**Given** three or more items in an available row
+**When** `variant` is `fill`
+**Then** the control fills that row and direct items share its available width.
+
+### Counter and disabled items
+
+**Given** an item with `hasCounter` set to `true`
+**When** it renders
+**Then** its configured Tag follows the label within the item.
+
+**Given** `counter` configuration without `hasCounter`
+**When** the item renders
+**Then** no Tag is rendered.
+
+**Given** a disabled group or item
+**When** the user attempts to select it
+**Then** its value does not change and no value-change event is emitted.
+
+## Accessibility
+
+## Role and name
+
+- The root has `role="radiogroup"`; every item has `role="radio"` and exposes
+  `aria-checked`.
+- Supply an accessible name to the group through `aria-label` or
+  `aria-labelledby`. Item labels and counters form each item's accessible name.
+
+## Keyboard and focus
+
+- `Tab` and `Shift+Tab` enter and leave the radio group at its roving tab stop.
+- Arrow keys move selection and focus between enabled items, respecting writing
+  direction as provided by the underlying radio-group primitive.
+- `Space` selects the focused item. Disabled items cannot be selected.
+- Keyboard focus displays the 3px `--ui-focus-primary` ring; pointer focus does
+  not.
+
+## Contrast and disabled state
+
+- Idle, hover, and selected foreground/surface pairs resolve through the
+  SegmentControl token tier, preserving brand and light/dark overrides.
+- Disabled items are inert and visually muted. Do not use a disabled option as
+  the only way to communicate essential status.