@cube-dev/ui-kit 0.200.1 → 0.202.0

package/dist/components/data/TableBase/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["Key","Styles","ReactNode","CubeItemProps","CubeTableSortDirection","CubeTableRowSize","CubeTableAlign","CubeTableRowSection","selectionRowKey","section","rowKey","CubeTableCellRange","fromRowKey","toRowKey","fromColumnKey","toColumnKey","CubeTableTreeRowState","level","parentKey","hasChildren","isExpanded","CubeTableRowExpandInfo","row","T","expanded","CubeTableLayoutProps","isAutoHeight","CubeTableTreeProps","getRowChildren","treeColumnKey","expandedKeys","defaultExpandedKeys","onExpand","keys","info","CubeTableSort","columnKey","direction","CubeTableCellContext","rowIndex","columnIndex","isSelected","isRowFocused","isDropTarget","tree","CubeTableRowContext","isFocused","CubeTableHeaderContext","sort","isSortable","isResizing","width","CubeTableColumnGroupHeader","key","title","CubeTableColumnHeader","icon","rightIcon","prefix","suffix","description","descriptionPlacement","tooltip","actions","autoHideActions","menu","menuTriggerProps","Record","menuProps","onMenuAction","action","theme","render","ctx","align","styles","CubeTableColumnTheme","CubeTableColumnColor","hue","saturation","fill","fillBand","text","CubeTableColumnColorScope","CubeTableColumn","header","isRowHeader","flex","minWidth","maxWidth","isResizable","isReorderable","pin","isHidden","getValue","format","value","compare","a","b","rowA","rowB","cellStyles","cellProps","color","colorScope","disallowSortRemoval","isSearchable","isCopyable","autoHeight","meta","CubeResolvedColumn","Omit","index","ariaColIndex","pinOffset","isPinEdge","isStructural","CubeTableColumnLayout","columns","pinnedStartWidth","pinnedEndWidth","totalWidth","isOverflowing","CubeTableLoadingIndicator","CubeTableSelectionMode","CubeTableSelectAllMode"],"sources":["../../../../src/components/data/TableBase/types.ts"],"sourcesContent":["import type { Key } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemProps } from '../../content/Item';\n\nexport type CubeTableSortDirection = 'asc' | 'desc';\n/**\n * Named row heights: 28px, 32px and 40px.\n *\n * A subset of the kit's size scale, and the same three steps `size` would give —\n * but `rowSize` moves only the ROWS. `size` also drives the header, so reaching\n * for a denser body through it drags the header down too.\n */\nexport type CubeTableRowSize = 'small' | 'medium' | 'large';\nexport type CubeTableAlign = 'start' | 'center' | 'end';\nexport type CubeTableRowSection = 'body' | 'pinnedTop' | 'pinnedBottom';\n\n/**\n * `asc | desc` rather than React Aria's `ascending | descending`: we do not use\n * `useTableState`, so there is no `SortDescriptor` interop to preserve, and\n * every consumer and server query parameter already speaks `asc|desc`.\n * `aria-sort` is a one-line map in the header cell.\n */\n/**\n * A rectangular block of cells, stored as two opposite corners.\n *\n * Corners rather than a set of keys so the selection survives a re-sort or a\n * page change the way a keyed row selection does: \"the block between these two\n * cells\" is re-resolved against the current order every render.\n */\n/**\n * The key a cell range identifies a row by.\n *\n * Not the consumer's row key: a pinned total is commonly the SAME record at the\n * top and the bottom (`id: 'total'`), and one flat key space collapsed the two\n * into whichever `indexOf` found first — so a range aimed at the footer total\n * resolved against the header one. The section is part of the identity here,\n * and only here; `ctx.rowKey` stays the consumer's own.\n */\nexport function selectionRowKey(\n  section: CubeTableRowSection,\n  rowKey: Key,\n): Key {\n  return section === 'body' ? rowKey : `${section}:${rowKey}`;\n}\n\nexport interface CubeTableCellRange {\n  fromRowKey: Key;\n  toRowKey: Key;\n  fromColumnKey: string;\n  toColumnKey: string;\n}\n\nexport interface CubeTableTreeRowState {\n  /** Zero-based depth in the hierarchy. */\n  level: number;\n  parentKey: Key | null;\n  hasChildren: boolean;\n  isExpanded: boolean;\n}\n\nexport interface CubeTableRowExpandInfo<T = any> {\n  row: T;\n  rowKey: Key;\n  level: number;\n  parentKey: Key | null;\n  expanded: boolean;\n}\n\n/** Shared root sizing contract used by both table adapters. */\nexport interface CubeTableLayoutProps {\n  /**\n   * Shrink-wraps the frame to its rendered rows instead of filling the\n   * available flex pane. This mode disables virtualization because there is no\n   * bounded vertical viewport to virtualize against.\n   *\n   * @default false\n   */\n  isAutoHeight?: boolean;\n}\n\n/** Shared opt-in hierarchy contract used by both table adapters. */\nexport interface CubeTableTreeProps<T = any> {\n  /**\n   * Returns a row's already-loaded children. Supplying this enables tree mode\n   * and makes `data` the top-level row collection.\n   */\n  getRowChildren?: (row: T) => readonly T[] | undefined;\n  /** Column that owns the indentation and disclosure control. */\n  treeColumnKey?: string;\n  /** Controlled expanded row keys. */\n  expandedKeys?: Key[];\n  /** Initially expanded row keys. */\n  defaultExpandedKeys?: Key[];\n  /** Called after a user expands or collapses a row. */\n  onExpand?: (keys: Key[], info: CubeTableRowExpandInfo<T>) => void;\n}\n\nexport interface CubeTableSort {\n  /** `key` of the sorted column. */\n  columnKey: string;\n  direction: CubeTableSortDirection;\n}\n\n/* ── render contexts ─────────────────────────────────────────────────────── */\n\nexport interface CubeTableCellContext<T = any> {\n  row: T;\n  rowKey: Key;\n  rowIndex: number;\n  columnKey: string;\n  columnIndex: number;\n  section: CubeTableRowSection;\n  /** Whether the ROW is selected, matching `isRowFocused` below. */\n  isSelected: boolean;\n  /**\n   * Not yet wired — always absent.\n   *\n   * Optional rather than `boolean`, because there is nowhere honest to compute\n   * them from where this context is built. Focus lives in the DOM, and drop\n   * state comes out of `useDropIndicator`, a hook that can only run inside the\n   * row component — so populating either means moving the `render` / `cellStyles`\n   * call sites into `TableRow`. Declaring them required and passing `false`\n   * would just be a documented lie.\n   */\n  isRowFocused?: boolean;\n  isDropTarget?: boolean;\n  /** Present only when `getRowChildren` enables tree mode. */\n  tree?: CubeTableTreeRowState;\n}\n\nexport interface CubeTableRowContext<T = any> {\n  row: T;\n  rowKey: Key;\n  rowIndex: number;\n  section: CubeTableRowSection;\n  isSelected: boolean;\n  /** Not yet wired — always absent. See `CubeTableCellContext` for why. */\n  isFocused?: boolean;\n  isDropTarget?: boolean;\n  /** Present only when `getRowChildren` enables tree mode. */\n  tree?: CubeTableTreeRowState;\n}\n\nexport interface CubeTableHeaderContext {\n  columnKey: string;\n  columnIndex: number;\n  sort: CubeTableSortDirection | null;\n  isSortable: boolean;\n  isResizing: boolean;\n  width: number | null;\n}\n\n/** Presentational path entry used to build multi-row column headers. */\nexport interface CubeTableColumnGroupHeader {\n  key: string;\n  title?: ReactNode;\n}\n\n/* ── column ──────────────────────────────────────────────────────────────── */\n\n/**\n * Rich header content. Every slot except `menu` maps 1:1 onto the `Item`\n * rendered inside the header `<th>`, so a header gets icon / description /\n * tooltip / suffix / actions for free; `menu` is mounted into that `Item`'s\n * `actions` slot behind a `⋮` trigger.\n */\nexport interface CubeTableColumnHeader {\n  icon?: CubeItemProps['icon'];\n  rightIcon?: CubeItemProps['rightIcon'];\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  description?: ReactNode;\n  descriptionPlacement?: CubeItemProps['descriptionPlacement'];\n  /** `true` = auto tooltip when the label is truncated. */\n  tooltip?: CubeItemProps['tooltip'];\n  actions?: ReactNode;\n  /** Hide `actions` until hover/focus. @default true */\n  autoHideActions?: boolean;\n  /**\n   * A column menu, opened from a `⋮` trigger in the header's actions slot and —\n   * unless the table says otherwise — by right-click or Shift+F10.\n   *\n   * `Menu.Item` children. Opaque: the table mounts the node and reports the\n   * pressed key back through `onColumnMenuAction`, so what a \"pin\" or a \"drill\n   * down\" means stays in the consuming app. The exception is the reserved sort\n   * keys (`sort-asc`, `sort-desc`, `clear-sort`), which the table labels,\n   * disables when redundant, and applies itself before telling the consumer.\n   *\n   * An empty menu renders no trigger at all, rather than one that opens nothing.\n   * Ignored when `header.render` takes the cell over.\n   */\n  menu?: ReactNode;\n  /** Props for the `⋮` trigger. Merged over the table's `columnMenuTriggerProps`. */\n  menuTriggerProps?: Record<string, any>;\n  /** Props for the `Menu`. Merged over the table's `columnMenuProps`. */\n  menuProps?: Record<string, any>;\n  /** Called before the table-level `onColumnMenuAction`. */\n  onMenuAction?: (action: string) => void;\n  theme?: CubeItemProps['theme'];\n  /**\n   * Full takeover of the header cell's content. Overrides `title` and every\n   * slot — including `actions` and `menu`, which are simply not rendered. A\n   * takeover that wants a menu owns the trigger too.\n   */\n  render?: (ctx: CubeTableHeaderContext) => ReactNode;\n  /** Overrides `column.align` for the header only. */\n  align?: CubeTableAlign;\n  styles?: Styles;\n}\n\n/* ── column colour ───────────────────────────────────────────────────────── */\n\n/**\n * A palette theme a column can borrow its tint from.\n *\n * Resolved through the same runtime generator as a custom colour, seeded from the\n * theme's own hue and saturation in `palette-config` — so it tracks a re-seeded\n * palette, and it gets the banding step the palette itself does not define.\n *\n * `special` is absent deliberately: it is a standalone `mode: 'fixed'` theme with\n * no tinted-surface ramp to borrow.\n */\nexport type CubeTableColumnTheme =\n  'primary' | 'purple' | 'success' | 'danger' | 'warning' | 'note';\n\n/**\n * How a column is tinted.\n *\n * Every form but the last is *derived*: only a hue and a saturation are kept, and\n * the tone ramp plus an `AA`/`AAA` text floor are re-solved per colour scheme. So\n * a column stays readable in light, dark and high contrast without the caller\n * checking — which is the part hand-picked hex pairs get wrong.\n */\nexport type CubeTableColumnColor =\n  /** A palette theme name. */\n  | CubeTableColumnTheme\n  /** Any colour Glaze parses — hex, `rgb()`, `hsl()`, `okhsl()`, `oklch()`. */\n  | (string & {})\n  /** The seed said directly. `saturation` is 0–100. */\n  | { hue: number; saturation?: number }\n  /**\n   * Full manual control, as tasty colour strings (`'#note-surface'`, `'#purple.10'`).\n   *\n   * Nothing is derived and nothing is contrast-checked — this is the escape\n   * hatch, and readability in every scheme becomes the caller's problem.\n   * `fillBand` defaults to `fill`, which turns banding off for the column.\n   */\n  | { fill: string; fillBand?: string; text?: string };\n\n/**\n * Which parts of a column `color` reaches.\n *\n * @default ['header','body','totals']\n */\nexport type CubeTableColumnColorScope = 'header' | 'body' | 'totals';\n\nexport interface CubeTableColumn<T = any> {\n  /**\n   * Column id. Also the default data path — dot notation is supported\n   * (`'owner.name'`). Anything beyond a path needs `getValue`.\n   */\n  key: string;\n  /** Header label. Shorthand for `header` with no extra slots. */\n  title?: ReactNode;\n  header?: CubeTableColumnHeader;\n  /**\n   * Renders `<th scope=\"row\">` instead of `<td>`, names the row for screen\n   * readers, and hosts the `rowLink` anchor. Defaults to the first\n   * non-structural column when a row link is present.\n   */\n  isRowHeader?: boolean;\n\n  /* sizing */\n  /** Fixed width in px. Mutually exclusive with `flex`. */\n  width?: number;\n  /** Weight for the leftover space. @default 1 when `width` is unset */\n  flex?: number;\n  /** @default 150 */\n  minWidth?: number;\n  maxWidth?: number;\n  /** Inherits the table's `isResizable`. */\n  isResizable?: boolean;\n  /**\n   * Inherits the table's `isColumnReorderable`; `false` pins this column in\n   * place while the others still move around it.\n   */\n  isReorderable?: boolean;\n  /** Stick to the start/end edge during horizontal scroll. */\n  pin?: 'start' | 'end';\n  /** Hide without losing width or order state. */\n  isHidden?: boolean;\n\n  /* value pipeline */\n  /** @default (row) => get(row, key) */\n  getValue?: (row: T, rowIndex: number) => unknown;\n  /** Raw value → display text. Feeds client sort, client search and TSV copy. */\n  format?: (value: any, row: T, rowIndex: number) => string;\n  /** Client-side comparator over raw `getValue` results. */\n  compare?: (a: any, b: any, rowA: T, rowB: T) => number;\n\n  /* rendering */\n  /** A returned string is wrapped in a truncating `TextItem`. */\n  render?: (\n    value: any,\n    row: T,\n    rowIndex: number,\n    ctx: CubeTableCellContext<T>,\n  ) => ReactNode;\n  /**\n   * Tasty styles for this column's body cells: tokens (`#surface-text-soft-2`),\n   * units, presets, recipes and state maps all work, and a state key asks about\n   * the cell itself (`@own(pinned=bottom)`). They win over the table's own cell\n   * paint, its column tint and the table-level `cellStyles`.\n   *\n   * The function form runs per cell, so it can vary with `ctx` (the row, its\n   * section, its selection). Cells whose styles are equal share one class, so a\n   * function returning a few distinct objects costs a few classes, not one per\n   * cell.\n   */\n  cellStyles?: Styles | ((ctx: CubeTableCellContext<T>) => Styles | undefined);\n  cellProps?: (ctx: CubeTableCellContext<T>) => Record<string, any> | undefined;\n\n  /**\n   * Tints the column — header, cells and pinned totals — with an adaptive fill\n   * and a text colour solved to stay readable on it in every scheme.\n   *\n   * Row banding survives: the tint carries its own band one tone step away, so\n   * the stripe still reads down the column instead of being painted over.\n   */\n  color?: CubeTableColumnColor;\n  /** Narrows what `color` reaches. @default ['header','body','totals'] */\n  colorScope?: readonly CubeTableColumnColorScope[];\n\n  /* behaviour */\n  align?: CubeTableAlign;\n  /**\n   * Opt IN, per column — a table is not sortable until at least one column says\n   * so, and `sortMode` then defaults to `'client'`.\n   *\n   * (This read `@default true` for a long time, which was never what the code\n   * did: `TableView` requires `isSortable === true` before a header becomes a\n   * control at all.)\n   *\n   * @default false\n   */\n  isSortable?: boolean;\n  /** Two-state cycling (asc ↔ desc), never back to unsorted. @default false */\n  disallowSortRemoval?: boolean;\n  /** Include in the built-in client search. @default true */\n  isSearchable?: boolean;\n  /** Include in TSV copy. @default true */\n  isCopyable?: boolean;\n  /** Wrap text and let the row grow to fit. */\n  autoHeight?: boolean;\n\n  /** Consumer-owned bag. Never reaches the DOM. */\n  meta?: Record<string, unknown>;\n}\n\n/* ── resolved layout (internal, but exported for adapters) ───────────────── */\n\nexport interface CubeResolvedColumn<T = any>\n  // `width`, `minWidth`, `maxWidth`, `flex` and `align` are all resolved here,\n  // so they narrow from optional to definite and must be replaced, not extended.\n  extends Omit<\n    CubeTableColumn<T>,\n    'width' | 'minWidth' | 'maxWidth' | 'flex' | 'align'\n  > {\n  /** Position among the visible leaf columns, 0-based. */\n  index: number;\n  /** `aria-colindex`, 1-based and document-absolute. */\n  ariaColIndex: number;\n  /** Resolved pixel width, or `null` while the container is unmeasured. */\n  width: number | null;\n  minWidth: number;\n  maxWidth: number | null;\n  flex: number | null;\n  align: CubeTableAlign;\n  /** Cumulative sticky offset in px for a pinned column. */\n  pinOffset: number | null;\n  /** `true` for the last pinned-start / first pinned-end column. */\n  isPinEdge: boolean;\n  /** Structural columns (selection, drag handle, row menu) never enter sorting,\n   *  search, copy, or the value pipeline. */\n  isStructural: boolean;\n}\n\nexport interface CubeTableColumnLayout<T = any> {\n  columns: CubeResolvedColumn<T>[];\n  pinnedStartWidth: number;\n  pinnedEndWidth: number;\n  /** Sum of resolved widths, or `null` while unmeasured. */\n  totalWidth: number | null;\n  /** `true` when the columns cannot fit and the table scrolls horizontally. */\n  isOverflowing: boolean;\n}\n\n/**\n * How a refresh over an existing result is presented.\n *\n * - `overlay` — keep the previous rows visible, dimmed, behind a spinner. A\n *   server page or a re-sort never blanks the table.\n * - `skeleton` — discard the previous rows and show placeholders.\n * - `none` — no visuals beyond `aria-busy`; the page owns the indicator.\n */\nexport type CubeTableLoadingIndicator = 'overlay' | 'skeleton' | 'none';\n\nexport type CubeTableSelectionMode = 'none' | 'single' | 'multiple';\n\n/**\n * What the header checkbox acts on.\n *\n * - `page` — the rows on the current page.\n * - `filtered` — every row passing the current search/filter, across pages.\n * - `all` — emits the `'all'` sentinel, meaning \"everything, including rows the\n *   client has not loaded\". The consumer decides what that means for its query.\n */\nexport type CubeTableSelectAllMode = 'page' | 'filtered' | 'all';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgBQ,gBACdC,SACAC,QACK;CACL,OAAOD,YAAY,SAASC,SAAS,GAAGD,QAAO,GAAIC;AACrD"}
+{"version":3,"file":"types.js","names":["Key","Styles","ReactNode","CubeItemProps","CubeTableSortDirection","CubeTableRowSize","CubeTableAlign","CubeTableRowSection","selectionRowKey","section","rowKey","CubeTableCellRange","fromRowKey","toRowKey","fromColumnKey","toColumnKey","CubeTableTreeRowState","level","parentKey","hasChildren","isExpanded","CubeTableRowExpandInfo","row","T","expanded","CubeTableLayoutProps","isAutoHeight","CubeTableTreeProps","getRowChildren","treeColumnKey","expandedKeys","defaultExpandedKeys","onExpand","keys","info","CubeTableSort","columnKey","direction","CubeTableCellContext","rowIndex","columnIndex","isSelected","isRowFocused","isDropTarget","tree","CubeTableRowContext","isFocused","CubeTableHeaderContext","sort","isSortable","isResizing","width","CubeTableColumnGroupHeader","key","title","CubeTableColumnHeader","icon","rightIcon","prefix","suffix","description","descriptionPlacement","tooltip","actions","autoHideActions","menu","menuTriggerProps","Record","menuProps","onMenuAction","action","theme","render","ctx","align","styles","CubeTableColumnTheme","CubeTableColumnColor","hue","saturation","fill","fillBand","text","CubeTableColumnColorScope","CubeTableColumn","header","isRowHeader","flex","minWidth","maxWidth","isResizable","isReorderable","pin","isHidden","getValue","format","value","compare","a","b","rowA","rowB","cellStyles","cellProps","color","colorScope","disallowSortRemoval","isSearchable","isCopyable","autoHeight","meta","CubeResolvedColumn","Omit","index","ariaColIndex","pinOffset","isPinEdge","isStructural","CubeTableColumnLayout","columns","pinnedStartWidth","pinnedEndWidth","totalWidth","isOverflowing","CubeTableLoadingIndicator","CubeTableSelectionMode","CubeTableSelectAllMode"],"sources":["../../../../src/components/data/TableBase/types.ts"],"sourcesContent":["import type { Key } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemProps } from '../../content/Item';\n\nexport type CubeTableSortDirection = 'asc' | 'desc';\n/**\n * Named row heights: 28px, 32px and 40px.\n *\n * A subset of the kit's size scale, and the same three steps `size` would give —\n * but `rowSize` moves only the ROWS. `size` also drives the header, so reaching\n * for a denser body through it drags the header down too.\n */\nexport type CubeTableRowSize = 'small' | 'medium' | 'large';\nexport type CubeTableAlign = 'start' | 'center' | 'end';\nexport type CubeTableRowSection = 'body' | 'pinnedTop' | 'pinnedBottom';\n\n/**\n * `asc | desc` rather than React Aria's `ascending | descending`: we do not use\n * `useTableState`, so there is no `SortDescriptor` interop to preserve, and\n * every consumer and server query parameter already speaks `asc|desc`.\n * `aria-sort` is a one-line map in the header cell.\n */\n/**\n * A rectangular block of cells, stored as two opposite corners.\n *\n * Corners rather than a set of keys so the selection survives a re-sort or a\n * page change the way a keyed row selection does: \"the block between these two\n * cells\" is re-resolved against the current order every render.\n */\n/**\n * The key a cell range identifies a row by.\n *\n * Not the consumer's row key: a pinned total is commonly the SAME record at the\n * top and the bottom (`id: 'total'`), and one flat key space collapsed the two\n * into whichever `indexOf` found first — so a range aimed at the footer total\n * resolved against the header one. The section is part of the identity here,\n * and only here; `ctx.rowKey` stays the consumer's own.\n */\nexport function selectionRowKey(\n  section: CubeTableRowSection,\n  rowKey: Key,\n): Key {\n  return section === 'body' ? rowKey : `${section}:${rowKey}`;\n}\n\nexport interface CubeTableCellRange {\n  fromRowKey: Key;\n  toRowKey: Key;\n  fromColumnKey: string;\n  toColumnKey: string;\n}\n\nexport interface CubeTableTreeRowState {\n  /** Zero-based depth in the hierarchy. */\n  level: number;\n  parentKey: Key | null;\n  hasChildren: boolean;\n  isExpanded: boolean;\n}\n\nexport interface CubeTableRowExpandInfo<T = any> {\n  row: T;\n  rowKey: Key;\n  level: number;\n  parentKey: Key | null;\n  expanded: boolean;\n}\n\n/** Shared root sizing contract used by both table adapters. */\nexport interface CubeTableLayoutProps {\n  /**\n   * Shrink-wraps the frame to its rendered rows instead of filling the\n   * available flex pane. This mode disables virtualization because there is no\n   * bounded vertical viewport to virtualize against.\n   *\n   * @default false\n   */\n  isAutoHeight?: boolean;\n}\n\n/** Shared opt-in hierarchy contract used by both table adapters. */\nexport interface CubeTableTreeProps<T = any> {\n  /**\n   * Returns a row's already-loaded children. Supplying this enables tree mode\n   * and makes `data` the top-level row collection.\n   */\n  getRowChildren?: (row: T) => readonly T[] | undefined;\n  /** Column that owns the indentation and disclosure control. */\n  treeColumnKey?: string;\n  /** Controlled expanded row keys. */\n  expandedKeys?: Key[];\n  /** Initially expanded row keys. */\n  defaultExpandedKeys?: Key[];\n  /** Called after a user expands or collapses a row. */\n  onExpand?: (keys: Key[], info: CubeTableRowExpandInfo<T>) => void;\n}\n\nexport interface CubeTableSort {\n  /** `key` of the sorted column. */\n  columnKey: string;\n  direction: CubeTableSortDirection;\n}\n\n/* ── render contexts ─────────────────────────────────────────────────────── */\n\nexport interface CubeTableCellContext<T = any> {\n  row: T;\n  rowKey: Key;\n  rowIndex: number;\n  columnKey: string;\n  columnIndex: number;\n  section: CubeTableRowSection;\n  /** Whether the ROW is selected, matching `isRowFocused` below. */\n  isSelected: boolean;\n  /**\n   * Not yet wired — always absent.\n   *\n   * Optional rather than `boolean`, because there is nowhere honest to compute\n   * them from where this context is built. Focus lives in the DOM, and drop\n   * state comes out of `useDropIndicator`, a hook that can only run inside the\n   * row component — so populating either means moving the `render` / `cellStyles`\n   * call sites into `TableRow`. Declaring them required and passing `false`\n   * would just be a documented lie.\n   */\n  isRowFocused?: boolean;\n  isDropTarget?: boolean;\n  /** Present only when `getRowChildren` enables tree mode. */\n  tree?: CubeTableTreeRowState;\n}\n\nexport interface CubeTableRowContext<T = any> {\n  row: T;\n  rowKey: Key;\n  rowIndex: number;\n  section: CubeTableRowSection;\n  isSelected: boolean;\n  /** Not yet wired — always absent. See `CubeTableCellContext` for why. */\n  isFocused?: boolean;\n  isDropTarget?: boolean;\n  /** Present only when `getRowChildren` enables tree mode. */\n  tree?: CubeTableTreeRowState;\n}\n\nexport interface CubeTableHeaderContext {\n  columnKey: string;\n  columnIndex: number;\n  sort: CubeTableSortDirection | null;\n  isSortable: boolean;\n  isResizing: boolean;\n  width: number | null;\n}\n\n/** Presentational path entry used to build multi-row column headers. */\nexport interface CubeTableColumnGroupHeader {\n  key: string;\n  title?: ReactNode;\n}\n\n/* ── column ──────────────────────────────────────────────────────────────── */\n\n/**\n * Rich header content. Every slot except `menu` maps 1:1 onto the `Item`\n * rendered inside the header `<th>`, so a header gets icon / description /\n * tooltip / suffix / actions for free; `menu` is mounted into that `Item`'s\n * `actions` slot behind a `⋮` trigger.\n */\nexport interface CubeTableColumnHeader {\n  icon?: CubeItemProps['icon'];\n  rightIcon?: CubeItemProps['rightIcon'];\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  description?: ReactNode;\n  descriptionPlacement?: CubeItemProps['descriptionPlacement'];\n  /** `true` = auto tooltip when the label is truncated. */\n  tooltip?: CubeItemProps['tooltip'];\n  actions?: ReactNode;\n  /** Hide `actions` until hover/focus. @default true */\n  autoHideActions?: boolean;\n  /**\n   * A column menu, opened from a `⋮` trigger in the header's actions slot and —\n   * unless the table says otherwise — by right-click or Shift+F10.\n   *\n   * `Menu.Item` children. Opaque: the table mounts the node and reports the\n   * pressed key back through `onColumnMenuAction`, so what a \"pin\" or a \"drill\n   * down\" means stays in the consuming app. The exception is the reserved sort\n   * keys (`sort-asc`, `sort-desc`, `clear-sort`), which the table labels,\n   * disables when redundant, and applies itself before telling the consumer.\n   *\n   * An empty menu renders no trigger at all, rather than one that opens nothing.\n   * Ignored when `header.render` takes the cell over.\n   */\n  menu?: ReactNode;\n  /** Props for the `⋮` trigger. Merged over the table's `columnMenuTriggerProps`. */\n  menuTriggerProps?: Record<string, any>;\n  /** Props for the `Menu`. Merged over the table's `columnMenuProps`. */\n  menuProps?: Record<string, any>;\n  /** Called before the table-level `onColumnMenuAction`. */\n  onMenuAction?: (action: string) => void;\n  theme?: CubeItemProps['theme'];\n  /**\n   * Full takeover of the header cell's content. Overrides `title` and every\n   * slot — including `actions` and `menu`, which are simply not rendered. A\n   * takeover that wants a menu owns the trigger too.\n   */\n  render?: (ctx: CubeTableHeaderContext) => ReactNode;\n  /** Overrides `column.align` for the header only. */\n  align?: CubeTableAlign;\n  styles?: Styles;\n}\n\n/* ── column colour ───────────────────────────────────────────────────────── */\n\n/**\n * A palette theme a column can borrow its tint from.\n *\n * Resolved through the same runtime generator as a custom colour, seeded from the\n * theme's own hue and saturation in `palette-config` — so it tracks a re-seeded\n * palette, and it gets the banding step the palette itself does not define.\n *\n * `special` is absent deliberately: it is a standalone `mode: 'fixed'` theme with\n * no tinted-surface ramp to borrow.\n */\nexport type CubeTableColumnTheme =\n  'primary' | 'purple' | 'success' | 'danger' | 'warning' | 'note';\n\n/**\n * How a column is tinted.\n *\n * Every form but the last is *derived*: only a hue and a saturation are kept, and\n * the tone ramp plus an `AA`/`AAA` text floor are re-solved per colour scheme. So\n * a column stays readable in light, dark and high contrast without the caller\n * checking — which is the part hand-picked hex pairs get wrong.\n */\nexport type CubeTableColumnColor =\n  /** A palette theme name. */\n  | CubeTableColumnTheme\n  /** Any colour Glaze parses — hex, `rgb()`, `hsl()`, `okhsl()`, `oklch()`. */\n  | (string & {})\n  /** The seed said directly. `saturation` is 0–100. */\n  | { hue: number; saturation?: number }\n  /**\n   * Full manual control, as tasty colour strings (`'#note-surface'`, `'#purple.10'`).\n   *\n   * Nothing is derived and nothing is contrast-checked — this is the escape\n   * hatch, and readability in every scheme becomes the caller's problem.\n   * `fillBand` defaults to `fill`, which turns banding off for the column.\n   */\n  | { fill: string; fillBand?: string; text?: string };\n\n/**\n * Which parts of a column `color` reaches.\n *\n * @default ['header','body','totals']\n */\nexport type CubeTableColumnColorScope = 'header' | 'body' | 'totals';\n\nexport interface CubeTableColumn<T = any> {\n  /**\n   * Column id. Also the default data path — dot notation is supported\n   * (`'owner.name'`). Anything beyond a path needs `getValue`.\n   */\n  key: string;\n  /** Header label. Shorthand for `header` with no extra slots. */\n  title?: ReactNode;\n  header?: CubeTableColumnHeader;\n  /**\n   * Renders `<th scope=\"row\">` instead of `<td>`, names the row for screen\n   * readers, and hosts the `rowLink` anchor. Defaults to the first\n   * visible non-structural column when a row link is present. Set `false` to\n   * exclude a column from that implicit default.\n   */\n  isRowHeader?: boolean;\n\n  /* sizing */\n  /** Fixed width in px. Mutually exclusive with `flex`. */\n  width?: number;\n  /** Weight for the leftover space. @default 1 when `width` is unset */\n  flex?: number;\n  /** @default 150 */\n  minWidth?: number;\n  maxWidth?: number;\n  /** Inherits the table's `isResizable`. */\n  isResizable?: boolean;\n  /**\n   * Inherits the table's `isColumnReorderable`; `false` pins this column in\n   * place while the others still move around it.\n   */\n  isReorderable?: boolean;\n  /** Stick to the start/end edge during horizontal scroll. */\n  pin?: 'start' | 'end';\n  /** Hide without losing width or order state. */\n  isHidden?: boolean;\n\n  /* value pipeline */\n  /** @default (row) => get(row, key) */\n  getValue?: (row: T, rowIndex: number) => unknown;\n  /** Raw value → display text. Feeds client sort, client search and TSV copy. */\n  format?: (value: any, row: T, rowIndex: number) => string;\n  /** Client-side comparator over raw `getValue` results. */\n  compare?: (a: any, b: any, rowA: T, rowB: T) => number;\n\n  /* rendering */\n  /** A returned string is wrapped in a truncating `TextItem`. */\n  render?: (\n    value: any,\n    row: T,\n    rowIndex: number,\n    ctx: CubeTableCellContext<T>,\n  ) => ReactNode;\n  /**\n   * Tasty styles for this column's body cells: tokens (`#surface-text-soft-2`),\n   * units, presets, recipes and state maps all work, and a state key asks about\n   * the cell itself (`@own(pinned=bottom)`). They win over the table's own cell\n   * paint, its column tint and the table-level `cellStyles`.\n   *\n   * The function form runs per cell, so it can vary with `ctx` (the row, its\n   * section, its selection). Cells whose styles are equal share one class, so a\n   * function returning a few distinct objects costs a few classes, not one per\n   * cell.\n   */\n  cellStyles?: Styles | ((ctx: CubeTableCellContext<T>) => Styles | undefined);\n  cellProps?: (ctx: CubeTableCellContext<T>) => Record<string, any> | undefined;\n\n  /**\n   * Tints the column — header, cells and pinned totals — with an adaptive fill\n   * and a text colour solved to stay readable on it in every scheme.\n   *\n   * Row banding survives: the tint carries its own band one tone step away, so\n   * the stripe still reads down the column instead of being painted over.\n   */\n  color?: CubeTableColumnColor;\n  /** Narrows what `color` reaches. @default ['header','body','totals'] */\n  colorScope?: readonly CubeTableColumnColorScope[];\n\n  /* behaviour */\n  align?: CubeTableAlign;\n  /**\n   * Opt IN, per column — a table is not sortable until at least one column says\n   * so, and `sortMode` then defaults to `'client'`.\n   *\n   * (This read `@default true` for a long time, which was never what the code\n   * did: `TableView` requires `isSortable === true` before a header becomes a\n   * control at all.)\n   *\n   * @default false\n   */\n  isSortable?: boolean;\n  /** Two-state cycling (asc ↔ desc), never back to unsorted. @default false */\n  disallowSortRemoval?: boolean;\n  /** Include in the built-in client search. @default true */\n  isSearchable?: boolean;\n  /** Include in TSV copy. @default true */\n  isCopyable?: boolean;\n  /** Wrap text and let the row grow to fit. */\n  autoHeight?: boolean;\n\n  /** Consumer-owned bag. Never reaches the DOM. */\n  meta?: Record<string, unknown>;\n}\n\n/* ── resolved layout (internal, but exported for adapters) ───────────────── */\n\nexport interface CubeResolvedColumn<T = any>\n  // `width`, `minWidth`, `maxWidth`, `flex` and `align` are all resolved here,\n  // so they narrow from optional to definite and must be replaced, not extended.\n  extends Omit<\n    CubeTableColumn<T>,\n    'width' | 'minWidth' | 'maxWidth' | 'flex' | 'align'\n  > {\n  /** Position among the visible leaf columns, 0-based. */\n  index: number;\n  /** `aria-colindex`, 1-based and document-absolute. */\n  ariaColIndex: number;\n  /** Resolved pixel width, or `null` while the container is unmeasured. */\n  width: number | null;\n  minWidth: number;\n  maxWidth: number | null;\n  flex: number | null;\n  align: CubeTableAlign;\n  /** Cumulative sticky offset in px for a pinned column. */\n  pinOffset: number | null;\n  /** `true` for the last pinned-start / first pinned-end column. */\n  isPinEdge: boolean;\n  /** Structural columns (selection, drag handle, row menu) never enter sorting,\n   *  search, copy, or the value pipeline. */\n  isStructural: boolean;\n}\n\nexport interface CubeTableColumnLayout<T = any> {\n  columns: CubeResolvedColumn<T>[];\n  pinnedStartWidth: number;\n  pinnedEndWidth: number;\n  /** Sum of resolved widths, or `null` while unmeasured. */\n  totalWidth: number | null;\n  /** `true` when the columns cannot fit and the table scrolls horizontally. */\n  isOverflowing: boolean;\n}\n\n/**\n * How a refresh over an existing result is presented.\n *\n * - `overlay` — keep the previous rows visible, dimmed, behind a spinner. A\n *   server page or a re-sort never blanks the table.\n * - `skeleton` — discard the previous rows and show placeholders.\n * - `none` — no visuals beyond `aria-busy`; the page owns the indicator.\n */\nexport type CubeTableLoadingIndicator = 'overlay' | 'skeleton' | 'none';\n\nexport type CubeTableSelectionMode = 'none' | 'single' | 'multiple';\n\n/**\n * What the header checkbox acts on.\n *\n * - `page` — the rows on the current page.\n * - `filtered` — every row passing the current search/filter, across pages.\n * - `all` — emits the `'all'` sentinel, meaning \"everything, including rows the\n *   client has not loaded\". The consumer decides what that means for its query.\n */\nexport type CubeTableSelectAllMode = 'page' | 'filtered' | 'all';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgBQ,gBACdC,SACAC,QACK;CACL,OAAOD,YAAY,SAASC,SAAS,GAAGD,QAAO,GAAIC;AACrD"}

package/dist/components/data/TableBase/use-column-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/data/TableBase/use-column-order.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";

package/dist/components/data/TableBase/use-column-window.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES } from "@tenphi/tasty";

package/dist/components/data/TableBase/use-container-width.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useState } from "react";
 //#region src/components/data/TableBase/use-container-width.ts

package/dist/components/data/TableBase/use-row-move-animation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useRef } from "react";
 /** Matches `DisplayTransition`'s check, which is the kit's existing precedent. */

package/dist/components/data/TableBase/use-scrollability.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useState } from "react";
 //#region src/components/data/TableBase/use-scrollability.ts

package/dist/components/data/TableBase/use-table-columns.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 /**
 * Every column's current width, so a resize can change exactly one of them.

package/dist/components/data/TableBase/use-table-search.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
 import { getColumnText } from "./use-table-columns.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/TableBase/use-table-selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { RowCollection } from "./RowCollection.js";
 import { useCallback, useMemo, useRef } from "react";

package/dist/components/data/TableBase/use-table-sort.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/TableBase/use-table-sorts.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { sortRows } from "./use-table-sort.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/TableBase/use-table-storage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useCallback, useRef, useState } from "react";
 //#region src/components/data/TableBase/use-table-storage.ts
 /**

package/dist/components/data/TableBase/use-table-tooltip-refresh.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { refreshAutoTooltipsWithin } from "../../content/use-auto-tooltip.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

package/dist/components/data/TableBase/use-table-tree-state.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { c } from "react/compiler-runtime";

package/dist/components/fields/Checkbox/Checkbox.d.ts

@@ -2,11 +2,12 @@
 import { FieldBaseProps, ToggleSelectionProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CubeTooltipProviderProps } from "../../overlays/Tooltip/TooltipProvider.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { CheckboxGroup as _CheckboxGroup, CubeCheckboxGroupProps } from "./CheckboxGroup.js";
-import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { AriaCheckboxProps, useCheckbox } from "react-aria";
 //#region src/components/fields/Checkbox/Checkbox.d.ts
-export interface CubeCheckboxProps extends BaseProps, ContainerStyleProps, Omit<AriaCheckboxProps, 'form' | 'name'>, ToggleSelectionProps, FieldBaseProps<boolean | null | undefined> {
+export interface CubeCheckboxProps extends BaseProps, FieldLayoutStyleProps, Omit<AriaCheckboxProps, 'form' | 'name'>, ToggleSelectionProps, FieldBaseProps<boolean | null | undefined> {
   inputStyles?: Styles;
   isIndeterminate?: boolean;
   value?: string;

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { getDisabledElementProps, getInertInputProps } from "../../../utils/react/disabledProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { useAutoTooltip } from "../../content/use-auto-tooltip.js";
@@ -11,10 +11,11 @@ import { getValidationMods, resolveValidationProps } from "../../form/validation
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from "../../form/Label.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { HiddenInput } from "../../HiddenInput.js";
 import { CheckboxGroupContext } from "./context.js";
 import { CheckboxGroup as _CheckboxGroup } from "./CheckboxGroup.js";
-import { CONTAINER_STYLES, Element, filterBaseProps, tasty } from "@tenphi/tasty";
+import { Element, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useContext, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useCheckbox, useCheckboxGroupItem, useHover } from "react-aria";
@@ -49,17 +50,19 @@ const CheckboxElement = tasty({ styles: {
 		"invalid & checked": "#danger",
 		"valid & !checked": "#surface",
 		"valid & checked": "#success",
+		readonly: "#surface-2",
 		disabled: "#dark.12"
 	},
 	color: {
 		"": "#clear",
-		"checked | indeterminate": "#white"
+		"checked | indeterminate": "#white",
+		"readonly & !disabled & (checked | indeterminate)": "#dark-02"
 	},
 	border: {
 		"": "#dark.30",
 		invalid: "#danger",
 		valid: "#success",
-		"disabled | ((indeterminate | checked) & !invalid & !valid)": "#clear"
+		"disabled | ((indeterminate | checked) & !invalid & !valid & !readonly)": "#clear"
 	},
 	width: "(2x - 2bw)",
 	height: "(2x - 2bw)",
@@ -83,16 +86,15 @@ function Checkbox(allProps, ref) {
 		unsafe__isDisabled: !!groupState
 	});
 	let { qa, isIndeterminate = false, isDisabled = false, insideForm, children, label, isInvalid, isValid, labelProps, labelRef, labelStyles, labelPosition, inputStyles, isHidden, tooltip } = props;
-	let styles = extractStyles(props, CONTAINER_STYLES);
+	const { styles, field } = splitFieldLayout(props, groupState ? { hasChrome: false } : void 0);
 	labelStyles = useMemo(() => ({
 		...!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES,
 		...labelStyles
 	}), [groupState, labelStyles]);
 	let { isFocused, focusProps } = useFocus$1(true);
-	let { hoverProps, isHovered } = useHover({ isDisabled });
 	let inputRef = useRef(null);
 	let domRef = useFocusableRef(ref, inputRef);
-	let { renderWithTooltip } = useAutoTooltip({
+	let { renderWithTooltip, isTooltipActive } = useAutoTooltip({
 		tooltip,
 		children: null
 	});
@@ -102,12 +104,18 @@ function Checkbox(allProps, ref) {
 		form: void 0,
 		children: children ?? label
 	};
-	let { inputProps } = groupState ? useCheckboxGroupItem({
+	let { inputProps, isDisabled: isInputDisabled, isReadOnly } = groupState ? useCheckboxGroupItem({
 		...ariaProps,
 		value: props.value || "",
 		isRequired: originalProps.isRequired,
 		isInvalid: resolveValidationProps(originalProps).isInvalid
 	}, groupState, inputRef) : useCheckbox(ariaProps, toggleState, inputRef);
+	let { hoverProps, isHovered } = useHover({ isDisabled: isDisabled || isReadOnly });
+	if (getDisabledElementProps({
+		isDisabled: isInputDisabled,
+		keepEvents: isTooltipActive,
+		as: "input"
+	}).isInert) inputProps = getInertInputProps(inputProps, { excludeFromTabOrder: props.excludeFromTabOrder });
 	let markIcon = isIndeterminate ? /* @__PURE__ */ jsx(Icon, {
 		size: 12,
 		stroke: 3,
@@ -135,6 +143,7 @@ function Checkbox(allProps, ref) {
 			isValid
 		}),
 		disabled: isDisabled,
+		readonly: isReadOnly,
 		hovered: isHovered,
 		focused: isFocused,
 		"side-label": labelPosition === "side",
@@ -157,7 +166,8 @@ function Checkbox(allProps, ref) {
 		"data-input-type": "checkbox",
 		...props.autoFocus ? { "data-autofocus": "" } : void 0,
 		...mergeTooltipFocusProps(mergeProps$1(inputProps, focusProps), tooltipFocusProps),
-		ref: inputRef
+		ref: inputRef,
+		mods: { disabled: isInputDisabled }
 	}), /* @__PURE__ */ jsx(CheckboxElement, {
 		"data-element": "Input",
 		mods,
@@ -186,6 +196,7 @@ function Checkbox(allProps, ref) {
 		}, "top");
 		return wrapWithField(checkboxField, {
 			...props,
+			...field,
 			tooltip: void 0,
 			labelProps: {
 				...props.labelProps,

package/dist/components/fields/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useFocusableRef","IconCheck","IconMinus","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Element","filterBaseProps","Styles","tasty","forwardRef","ReactElement","RefObject","useContext","useMemo","useRef","AriaCheckboxProps","useCheckbox","useCheckboxGroupItem","useHover","useToggleState","Icon","FieldBaseProps","ToggleSelectionProps","mergeProps","mergeRefs","useFocus","castNullableIsSelected","WithNullableSelected","extractStyles","useAutoTooltip","getValidationMods","INLINE_LABEL_STYLES","LABEL_STYLES","resolveValidationProps","useFieldProps","wrapWithField","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","TooltipFocusProps","CheckboxGroup","CheckboxGroupContext","FocusableRef","CubeTooltipProviderProps","CubeCheckboxProps","Omit","inputStyles","isIndeterminate","value","tooltip","CheckboxWrapperElement","as","qa","styles","position","display","placeItems","placeContent","gap","flow","preset","cursor","width","color","CheckboxElement","radius","fill","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","Checkbox","allProps","ref","groupState","originalProps","props","defaultValidationTrigger","valuePropsMapper","onChange","isSelected","unsafe__isDisabled","isDisabled","insideForm","children","label","isInvalid","isValid","labelProps","labelRef","labelStyles","labelPosition","isHidden","isFocused","focusProps","hoverProps","isHovered","inputRef","domRef","renderWithTooltip","toggleState","ariaProps","form","undefined","inputProps","isRequired","markIcon","key","console","warn","mods","checked","indeterminate","hovered","wrapperProps","className","style","qaVal","wrapperRefWith","tooltipRef","HTMLElement","renderCheckbox","tooltipFocusProps","autoFocus","checkboxField","tooltipTriggerProps","pointerProps","for","id","_Checkbox","cubeInputType","__Checkbox","Object","assign","Group","displayName","useFocus","mergeProps","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n  TooltipFocusProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeCheckboxProps\n  extends\n    BaseProps,\n    ContainerStyleProps,\n    Omit<AriaCheckboxProps, 'form' | 'name'>,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n  /**\n   * The checkbox's own tooltip, shown on hover over the box and its inline\n   * label — also while the checkbox is disabled — and on keyboard focus. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelRef,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    tooltip,\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus(true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Triggered by the wrapper rather than the input, so a disabled checkbox —\n  // whose input ignores the pointer — still shows it.\n  let { renderWithTooltip } = useAutoTooltip({ tooltip, children: null });\n\n  const toggleState = useToggleState(props);\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a checkbox with no visible label; a\n  // field `label` is one, named through its `<label for>`. Writing it into\n  // `aria-label` instead used to drop the inline text from the name and\n  // replace the caller's own `aria-label`.\n  let ariaProps = { ...props, form: undefined, children: children ?? label };\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...ariaProps,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(ariaProps, toggleState, inputRef);\n\n  // Decorative: the input already announces checked, unchecked and mixed.\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      // The raw props: `castNullableIsSelected` turns `null` into `false`.\n      if (allProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  // The wrapper's props, the same in both branches. React Aria puts `id`,\n  // `aria-*` and `data-*` on the input, so they stay off the `<label>`: the\n  // grouped one used to copy them, and `#id`, `for` and `aria-labelledby`\n  // resolved to it. A caller's own `mods` stay, under the state ones.\n  const wrapperProps = {\n    className: props.className,\n    style: props.style,\n    qaVal: props.qaVal,\n    styles,\n    isHidden,\n    mods: { ...props.mods, ...mods },\n  };\n\n  // The wrapper is the checkbox's element in both branches, so the field's ref\n  // reaches it with or without the field chrome; a tooltip's ref shares it.\n  const wrapperRefWith = (tooltipRef?: RefObject<HTMLElement>) =>\n    tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef;\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  const renderCheckbox = (tooltipFocusProps?: TooltipFocusProps) => (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        // For a dialog kept mounted while closed, as on `Button`.\n        {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n        {...mergeTooltipFocusProps(\n          mergeProps(inputProps, focusProps),\n          tooltipFocusProps,\n        )}\n        ref={inputRef}\n      />\n      <CheckboxElement data-element=\"Input\" mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  if (!groupState) {\n    const checkboxField = renderWithTooltip(\n      (tooltipTriggerProps, tooltipRef) => {\n        const { pointerProps, focusProps: tooltipFocusProps } =\n          splitTooltipTriggerProps(tooltipTriggerProps);\n\n        return (\n          // `styles` is forwarded here as well as in the in-group branch\n          // below — it used to be extracted from props and then dropped on\n          // this path, so `<Checkbox styles={{ … }}>` outside a group was a\n          // silent no-op.\n          <CheckboxWrapperElement\n            {...wrapperProps}\n            {...mergeProps(hoverProps, pointerProps)}\n            ref={wrapperRefWith(tooltipRef)}\n          >\n            {renderCheckbox(tooltipFocusProps)}\n            {children ? (\n              // Same element and preset as the in-group branch. This path used\n              // to force children through `<Text nowrap>`: `white-space:\n              // nowrap` inherits, so a label longer than a few words — or any\n              // custom node with two lines in it — could not wrap at all, and\n              // the label also missed the preset a grouped one picks up.\n              <Element\n                styles={INLINE_LABEL_STYLES}\n                mods={{\n                  ...getValidationMods({ isInvalid, isValid }),\n                  disabled: isDisabled,\n                }}\n              >\n                {children}\n              </Element>\n            ) : null}\n          </CheckboxWrapperElement>\n        );\n      },\n      'top',\n    );\n\n    // `tooltip` is the checkbox's own here, not a legacy label badge.\n    // `renderWithTooltip` is typed for any node; here it returns an element.\n    // The field label names the input through `for`, which `useFieldProps`\n    // leaves unset for a caller's own `id` and inside the legacy `<Field>`, as\n    // `Switch` does.\n    return wrapWithField(checkboxField as ReactElement, {\n      ...props,\n      tooltip: undefined,\n      labelProps: { ...props.labelProps, for: props.id },\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        {...wrapperProps}\n        {...mergeProps(hoverProps, pointerProps)}\n        ref={wrapperRefWith(tooltipRef)}\n      >\n        {renderCheckbox(tooltipFocusProps)}\n        {(label ?? children) ? (\n          <Element\n            // Before `labelProps`, so a `ref` passed there still wins.\n            ref={labelRef}\n            styles={labelStyles}\n            mods={{\n              ...getValidationMods({ isInvalid, isValid }),\n              disabled: isDisabled,\n            }}\n            {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n          >\n            {label ?? children}\n          </Element>\n        ) : null}\n      </CheckboxWrapperElement>\n    );\n  }, 'top');\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useFocusableRef","IconCheck","IconMinus","BaseProps","Element","filterBaseProps","Styles","tasty","forwardRef","ReactElement","RefObject","useContext","useMemo","useRef","AriaCheckboxProps","useCheckbox","useCheckboxGroupItem","useHover","useToggleState","Icon","FieldBaseProps","ToggleSelectionProps","mergeProps","mergeRefs","getDisabledElementProps","getInertInputProps","useFocus","castNullableIsSelected","WithNullableSelected","useAutoTooltip","getValidationMods","INLINE_LABEL_STYLES","LABEL_STYLES","resolveValidationProps","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","TooltipFocusProps","CheckboxGroup","CheckboxGroupContext","FocusableRef","CubeTooltipProviderProps","CubeCheckboxProps","Omit","inputStyles","isIndeterminate","value","tooltip","CheckboxWrapperElement","as","qa","styles","position","display","placeItems","placeContent","gap","flow","preset","cursor","width","color","CheckboxElement","radius","fill","readonly","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","Checkbox","allProps","ref","groupState","originalProps","props","defaultValidationTrigger","valuePropsMapper","onChange","isSelected","unsafe__isDisabled","isDisabled","insideForm","children","label","isInvalid","isValid","labelProps","labelRef","labelStyles","labelPosition","isHidden","field","hasChrome","undefined","isFocused","focusProps","inputRef","domRef","renderWithTooltip","isTooltipActive","toggleState","ariaProps","form","inputProps","isInputDisabled","isReadOnly","isRequired","hoverProps","isHovered","keepEvents","isInert","excludeFromTabOrder","markIcon","key","console","warn","mods","checked","indeterminate","hovered","wrapperProps","className","style","qaVal","wrapperRefWith","tooltipRef","HTMLElement","renderCheckbox","tooltipFocusProps","autoFocus","checkboxField","tooltipTriggerProps","pointerProps","for","id","_Checkbox","cubeInputType","__Checkbox","Object","assign","Group","displayName","useFocus","mergeProps","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport {\n  getDisabledElementProps,\n  getInertInputProps,\n} from '../../../utils/react/disabledProps';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n  TooltipFocusProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeCheckboxProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    Omit<AriaCheckboxProps, 'form' | 'name'>,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n  /**\n   * The checkbox's own tooltip, shown on hover over the box and its inline\n   * label — also while the checkbox is disabled — and on keyboard focus. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      readonly: '#surface-2',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n      'readonly & !disabled & (checked | indeterminate)': '#dark-02',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid & !readonly)':\n        '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelRef,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    tooltip,\n  } = props;\n\n  // A grouped checkbox is an option of its group's field and never wraps.\n  const { styles, field } = splitFieldLayout(\n    props,\n    groupState ? { hasChrome: false } : undefined,\n  );\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus(true);\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let { renderWithTooltip, isTooltipActive } = useAutoTooltip({\n    tooltip,\n    children: null,\n  });\n\n  const toggleState = useToggleState(props);\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a checkbox with no visible label; a\n  // field `label` is one, named through its `<label for>`. Writing it into\n  // `aria-label` instead used to drop the inline text from the name and\n  // replace the caller's own `aria-label`.\n  let ariaProps = { ...props, form: undefined, children: children ?? label };\n  // `isReadOnly` is React Aria's: the checkbox's own or its group's.\n  let {\n    inputProps,\n    isDisabled: isInputDisabled,\n    isReadOnly,\n  } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...ariaProps,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(ariaProps, toggleState, inputRef);\n\n  // A read-only checkbox takes no hover state: a press would change nothing.\n  let { hoverProps, isHovered } = useHover({\n    isDisabled: isDisabled || isReadOnly,\n  });\n\n  // A disabled checkbox with a tooltip to show keeps its focus, as a disabled\n  // `Button` or `Radio` does: the tooltip is usually the reason it is disabled,\n  // and focus is how the keyboard opens it. It is `aria-disabled` and inert\n  // instead. React Aria's own result covers a disabled group too.\n  if (\n    getDisabledElementProps({\n      isDisabled: isInputDisabled,\n      keepEvents: isTooltipActive,\n      as: 'input',\n    }).isInert\n  ) {\n    inputProps = getInertInputProps(inputProps, {\n      excludeFromTabOrder: props.excludeFromTabOrder,\n    });\n  }\n\n  // Decorative: the input already announces checked, unchecked and mixed.\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      // The raw props: `castNullableIsSelected` turns `null` into `false`.\n      if (allProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    readonly: isReadOnly,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  // The wrapper's props, the same in both branches. React Aria puts `id`,\n  // `aria-*` and `data-*` on the input, so they stay off the `<label>`: the\n  // grouped one used to copy them, and `#id`, `for` and `aria-labelledby`\n  // resolved to it. A caller's own `mods` stay, under the state ones.\n  const wrapperProps = {\n    className: props.className,\n    style: props.style,\n    qaVal: props.qaVal,\n    styles,\n    isHidden,\n    mods: { ...props.mods, ...mods },\n  };\n\n  // The wrapper is the checkbox's element in both branches, so the field's ref\n  // reaches it with or without the field chrome; a tooltip's ref shares it.\n  const wrapperRefWith = (tooltipRef?: RefObject<HTMLElement>) =>\n    tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef;\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  const renderCheckbox = (tooltipFocusProps?: TooltipFocusProps) => (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        // For a dialog kept mounted while closed, as on `Button`.\n        {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n        {...mergeTooltipFocusProps(\n          mergeProps(inputProps, focusProps),\n          tooltipFocusProps,\n        )}\n        ref={inputRef}\n        // Not left to the native `disabled`, which an inert input drops.\n        mods={{ disabled: isInputDisabled }}\n      />\n      <CheckboxElement data-element=\"Input\" mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  if (!groupState) {\n    const checkboxField = renderWithTooltip(\n      (tooltipTriggerProps, tooltipRef) => {\n        const { pointerProps, focusProps: tooltipFocusProps } =\n          splitTooltipTriggerProps(tooltipTriggerProps);\n\n        return (\n          // `styles` is forwarded here as well as in the in-group branch\n          // below — it used to be extracted from props and then dropped on\n          // this path, so `<Checkbox styles={{ … }}>` outside a group was a\n          // silent no-op.\n          <CheckboxWrapperElement\n            {...wrapperProps}\n            {...mergeProps(hoverProps, pointerProps)}\n            ref={wrapperRefWith(tooltipRef)}\n          >\n            {renderCheckbox(tooltipFocusProps)}\n            {children ? (\n              // Same element and preset as the in-group branch. This path used\n              // to force children through `<Text nowrap>`: `white-space:\n              // nowrap` inherits, so a label longer than a few words — or any\n              // custom node with two lines in it — could not wrap at all, and\n              // the label also missed the preset a grouped one picks up.\n              <Element\n                styles={INLINE_LABEL_STYLES}\n                mods={{\n                  ...getValidationMods({ isInvalid, isValid }),\n                  disabled: isDisabled,\n                }}\n              >\n                {children}\n              </Element>\n            ) : null}\n          </CheckboxWrapperElement>\n        );\n      },\n      'top',\n    );\n\n    // `tooltip` is the checkbox's own here, not a legacy label badge.\n    // `renderWithTooltip` is typed for any node; here it returns an element.\n    // The field label names the input through `for`, which `useFieldProps`\n    // leaves unset for a caller's own `id` and inside the legacy `<Field>`, as\n    // `Switch` does.\n    return wrapWithField(checkboxField as ReactElement, {\n      ...props,\n      ...field,\n      tooltip: undefined,\n      labelProps: { ...props.labelProps, for: props.id },\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        {...wrapperProps}\n        {...mergeProps(hoverProps, pointerProps)}\n        ref={wrapperRefWith(tooltipRef)}\n      >\n        {renderCheckbox(tooltipFocusProps)}\n        {(label ?? children) ? (\n          <Element\n            // Before `labelProps`, so a `ref` passed there still wins.\n            ref={labelRef}\n            styles={labelStyles}\n            mods={{\n              ...getValidationMods({ isInvalid, isValid }),\n              disabled: isDisabled,\n            }}\n            {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n          >\n            {label ?? children}\n          </Element>\n        ) : null}\n      </CheckboxWrapperElement>\n    );\n  }, 'top');\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.d.ts

@@ -1,10 +1,11 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
-import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { AriaCheckboxGroupProps } from "react-aria";
 //#region src/components/fields/Checkbox/CheckboxGroup.d.ts
-export interface CubeCheckboxGroupProps extends BaseProps, Omit<AriaCheckboxGroupProps, 'errorMessage' | 'form' | 'name'>, FieldBaseProps<readonly string[] | null | undefined>, ContainerStyleProps {
+export interface CubeCheckboxGroupProps extends BaseProps, Omit<AriaCheckboxGroupProps, 'errorMessage' | 'form' | 'name'>, FieldBaseProps<readonly string[] | null | undefined>, FieldLayoutStyleProps {
   orientation?: 'vertical' | 'horizontal';
   inputStyles?: Styles;
 }

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,13 +1,14 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { Provider } from "../../../provider.js";
 import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
 import { FormScopeMask } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { CheckboxGroupContext } from "./context.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useCheckboxGroup } from "react-aria";
@@ -31,7 +32,7 @@ const CheckGroupElement = tasty({
 	}
 });
 function CheckboxGroup(rawProps, ref) {
-	const $ = c(29);
+	const $ = c(21);
 	let t0;
 	if ($[0] !== rawProps) {
 		t0 = castNullableArrayValue(rawProps);
@@ -48,10 +49,10 @@ function CheckboxGroup(rawProps, ref) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const props = useFieldProps(rawProps, t1);
-	const { id, isDisabled, isRequired, necessityIndicator, label, extra, isInvalid, isValid, children, orientation: t2, message, description, labelStyles, labelProps: baseLabelProps, labelSuffix, inputStyles, form, ...otherProps } = props;
+	const { id, isDisabled, isReadOnly, isInvalid, isValid, children, orientation: t2, labelProps: baseLabelProps, inputStyles } = props;
 	const orientation = t2 === void 0 ? "vertical" : t2;
 	const domRef = useObjectRef(ref);
-	const styles = extractStyles(otherProps, CONTAINER_STYLES, inputStyles);
+	const { styles, field } = splitFieldLayout(props, { defaultStyles: inputStyles });
 	const state = useCheckboxGroupState(props);
 	let t3;
 	if ($[3] !== props) {
@@ -93,47 +94,40 @@ function CheckboxGroup(rawProps, ref) {
 		$[13] = t7;
 	} else t7 = $[13];
 	let t8;
-	if ($[14] !== t6 || $[15] !== t7) {
-		t8 = /* @__PURE__ */ jsx(FormScopeMask, {
-			value: t6,
+	if ($[14] !== isDisabled || $[15] !== isReadOnly || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Provider, {
+			isDisabled,
+			isReadOnly,
 			children: t7
 		});
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t8;
-	} else t8 = $[16];
+		$[14] = isDisabled;
+		$[15] = isReadOnly;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
 	let t9;
-	if ($[17] !== domRef || $[18] !== groupProps || $[19] !== id || $[20] !== styles || $[21] !== t5 || $[22] !== t8) {
-		t9 = /* @__PURE__ */ jsx(CheckGroupElement, {
-			ref: domRef,
-			...groupProps,
-			id,
-			styles,
-			mods: t5,
+	if ($[18] !== t6 || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(FormScopeMask, {
+			value: t6,
 			children: t8
 		});
-		$[17] = domRef;
-		$[18] = groupProps;
-		$[19] = id;
-		$[20] = styles;
-		$[21] = t5;
-		$[22] = t8;
-		$[23] = t9;
-	} else t9 = $[23];
-	const radioGroup = t9;
-	let t10;
-	if ($[24] !== baseLabelProps || $[25] !== labelProps || $[26] !== props || $[27] !== radioGroup) {
-		t10 = wrapWithField(radioGroup, {
-			...props,
-			labelProps: mergeProps$1(baseLabelProps, labelProps)
-		});
-		$[24] = baseLabelProps;
-		$[25] = labelProps;
-		$[26] = props;
-		$[27] = radioGroup;
-		$[28] = t10;
-	} else t10 = $[28];
-	return t10;
+		$[18] = t6;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	const radioGroup = /* @__PURE__ */ jsx(CheckGroupElement, {
+		ref: domRef,
+		...groupProps,
+		id,
+		styles,
+		mods: t5,
+		children: t9
+	});
+	return wrapWithField(radioGroup, {
+		...props,
+		...field,
+		labelProps: mergeProps$1(baseLabelProps, labelProps)
+	});
 }
 /**
 * Checkbox groups allow users to select any number of options from a list.