twico-ui 1.43.0 → 1.44.0

package/dist/index.d.cts

@@ -2624,6 +2624,20 @@ interface DatatableBatchAction<T = any> {
   /** #322: hide the action entirely when the predicate returns true (e.g. `(_, rows) => rows.every(r => r.isGroup)`
    *  drops "Mark as new thread" when only group rows are selected). A static `true` always hides it. */
   hidden?: boolean | ((keys: Array<string | number>, rows: T[]) => boolean);
+  /** #479: why the action is disabled, shown as the button's tooltip — the batch mirror of the row-action
+   *  `disabledReason` (#399/#419). It may be a **predicate over the selection**, because that is where the
+   *  answer usually lives: a batch is refused for selection-dependent reasons ("that selection is 5.1 GB; the
+   *  limit is 4 GB", "at most 50 items per batch") that the label cannot carry and the user cannot infer from
+   *  a greyed-out button.
+   *
+   *  When a reason is present the button renders `aria-disabled` rather than native `disabled`, so it stays in
+   *  the tab order and the reason is reachable by hover AND keyboard; click and Enter/Space stay blocked. With
+   *  no reason the tooltip would only repeat the label, so the button stays natively disabled and out of the
+   *  tab order — the same rule as the row-action path. There is deliberately no `hiddenReason`: a hidden
+   *  action explains nothing. */
+  disabledReason?:
+    | React.ReactNode
+    | ((keys: Array<string | number>, rows: T[]) => React.ReactNode);
 }
 
 declare function Datatable<T = any>(props: DatatableProps<T>): React.JSX.Element;
@@ -2688,8 +2702,19 @@ interface CardGridSortOption {
 interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
   /** The rows: the full set in client mode, or the current page in `serverMode`. */
   rows?: Row[];
-  /** Render one card for a row. Required. */
-  renderCard: (row: Row, index: number) => React.ReactNode;
+  /**
+   * Render one card for a row. Required.
+   *
+   * #478: with `checkboxSelection`, the third argument carries that card's selection state so a
+   * consumer can put the control inside their own layout (set `selectionPlacement="none"` to drop the
+   * grid's overlay) without re-implementing any selection state. It is `undefined` when
+   * `checkboxSelection` is off.
+   */
+  renderCard: (
+    row: Row,
+    index: number,
+    selection?: { selected: boolean; toggle: () => void },
+  ) => React.ReactNode;
   /** Stable key per row: a field name or an accessor. @default "id" */
   rowKey?: string | ((row: Row) => React.Key);
   /** Min card width for the responsive auto-fill grid (Grid `minChildWidth`). @default "18rem" */
@@ -2752,6 +2777,86 @@ interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElem
   emptyState?: React.ReactNode;
   /** Optional heading above the grid. */
   label?: React.ReactNode;
+
+  /**
+   * #478: show a selection checkbox on each card and a selection toolbar when anything is picked —
+   * the same prop name, and the same behaviour, as `Datatable`. A card grid is what you reach for
+   * when the rows are visual (assets, previews, renders), where "pick several and do one thing to
+   * them" is most of the point.
+   * @default false
+   */
+  checkboxSelection?: boolean;
+  /**
+   * Actions shown in the selection toolbar, with the same shape as `DatatableBatchAction` — including
+   * `disabled` / `hidden` / `disabledReason` as predicates over the current selection (#479), and
+   * `ctx.anchorEl` so an action can anchor a popover to its own button.
+   */
+  batchActions?: CardGridBatchAction<Row>[];
+  /** Fired when the selection changes — `(keys, rows)`, matching `Datatable.onRowSelectionChange`. */
+  onRowSelectionChange?: (keys: Array<string | number>, rows: Row[]) => void;
+  /**
+   * Where the grid draws its checkbox over each card. `"none"` suppresses the overlay entirely for
+   * consumers who render the control themselves from `renderCard`'s third argument.
+   * @default "top-start"
+   */
+  selectionPlacement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "none";
+  /**
+   * Per-card `aria-label` for the checkbox. Worth setting: unlike a table row, a card's own content is
+   * not necessarily announced with the control, so the default `"Select item"` is the same for every
+   * card. @default (row, index) => "Select item"
+   */
+  selectionLabel?: (row: Row, index: number) => string;
+  /** Show the page-scoped "Select all on this page" control. @default true */
+  showSelectAll?: boolean;
+  /**
+   * Retain the row OBJECTS of off-page selections so `batchActions` and `onRowSelectionChange` receive
+   * them for a selection spanning several pages. `keys` is always the authoritative cross-page
+   * selection (as in `Datatable`); this exists because the grid only renders one page, which is the
+   * `Map<id, row>` consumers were otherwise hand-rolling.
+   *
+   * Opt-in because it holds references the host may expect to be released, and **bounded**: `true`
+   * retains up to 1000 rows, or pass a number for your own cap. Past the cap it stops retaining and
+   * those keys simply resolve to nothing in `rows`, so re-fetch by key.
+   * @default false
+   */
+  retainSelectedRows?: boolean | number;
+}
+
+/** Extra context handed to a CardGrid batch action's `onClick`. */
+interface CardGridBatchActionContext {
+  /** The toolbar button that was clicked — anchor a popover or panel to it. */
+  anchorEl: HTMLElement;
+}
+
+/** A batch action shown in CardGrid's selection toolbar. Mirrors `DatatableBatchAction`. */
+interface CardGridBatchAction<Row = any> {
+  /** Button label. */
+  label: string;
+  /** Leading icon node. */
+  icon?: React.ReactNode;
+  /** Handler: `(selectedKeys, selectedRows, clearSelection, ctx)`. */
+  onClick?: (
+    keys: Array<string | number>,
+    rows: Row[],
+    clearSelection: () => void,
+    ctx: CardGridBatchActionContext,
+  ) => void;
+  /** Render in danger color. */
+  danger?: boolean;
+  /** Disable the action — a static boolean, or a predicate over the current selection. */
+  disabled?: boolean | ((keys: Array<string | number>, rows: Row[]) => boolean);
+  /** Hide the action entirely — a static boolean, or a predicate over the current selection. */
+  hidden?: boolean | ((keys: Array<string | number>, rows: Row[]) => boolean);
+  /**
+   * Why the action is disabled, shown as the button's tooltip (#479). May be a predicate over the
+   * selection, because that is usually where the answer lives ("that selection is 5.1 GB; the limit is
+   * 4 GB"). With a reason present the button renders `aria-disabled` rather than native `disabled`, so
+   * it stays focusable and the reason is keyboard-reachable; without one it stays natively disabled and
+   * out of the tab order.
+   */
+  disabledReason?:
+    | React.ReactNode
+    | ((keys: Array<string | number>, rows: Row[]) => React.ReactNode);
 }
 
 declare function CardGrid<Row = any>(props: CardGridProps<Row>): React.JSX.Element;
@@ -4961,4 +5066,4 @@ declare function useFilePicker(options?: UseFilePickerOptions): {
   getInputProps: () => React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement | null> };
 };
 
-export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseLocalStorageOptions, type UseMediaQueryOptions, type UseWindowSizeOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridBatchAction, type CardGridBatchActionContext, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseLocalStorageOptions, type UseMediaQueryOptions, type UseWindowSizeOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };

package/dist/index.d.ts

@@ -2624,6 +2624,20 @@ interface DatatableBatchAction<T = any> {
   /** #322: hide the action entirely when the predicate returns true (e.g. `(_, rows) => rows.every(r => r.isGroup)`
    *  drops "Mark as new thread" when only group rows are selected). A static `true` always hides it. */
   hidden?: boolean | ((keys: Array<string | number>, rows: T[]) => boolean);
+  /** #479: why the action is disabled, shown as the button's tooltip — the batch mirror of the row-action
+   *  `disabledReason` (#399/#419). It may be a **predicate over the selection**, because that is where the
+   *  answer usually lives: a batch is refused for selection-dependent reasons ("that selection is 5.1 GB; the
+   *  limit is 4 GB", "at most 50 items per batch") that the label cannot carry and the user cannot infer from
+   *  a greyed-out button.
+   *
+   *  When a reason is present the button renders `aria-disabled` rather than native `disabled`, so it stays in
+   *  the tab order and the reason is reachable by hover AND keyboard; click and Enter/Space stay blocked. With
+   *  no reason the tooltip would only repeat the label, so the button stays natively disabled and out of the
+   *  tab order — the same rule as the row-action path. There is deliberately no `hiddenReason`: a hidden
+   *  action explains nothing. */
+  disabledReason?:
+    | React.ReactNode
+    | ((keys: Array<string | number>, rows: T[]) => React.ReactNode);
 }
 
 declare function Datatable<T = any>(props: DatatableProps<T>): React.JSX.Element;
@@ -2688,8 +2702,19 @@ interface CardGridSortOption {
 interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
   /** The rows: the full set in client mode, or the current page in `serverMode`. */
   rows?: Row[];
-  /** Render one card for a row. Required. */
-  renderCard: (row: Row, index: number) => React.ReactNode;
+  /**
+   * Render one card for a row. Required.
+   *
+   * #478: with `checkboxSelection`, the third argument carries that card's selection state so a
+   * consumer can put the control inside their own layout (set `selectionPlacement="none"` to drop the
+   * grid's overlay) without re-implementing any selection state. It is `undefined` when
+   * `checkboxSelection` is off.
+   */
+  renderCard: (
+    row: Row,
+    index: number,
+    selection?: { selected: boolean; toggle: () => void },
+  ) => React.ReactNode;
   /** Stable key per row: a field name or an accessor. @default "id" */
   rowKey?: string | ((row: Row) => React.Key);
   /** Min card width for the responsive auto-fill grid (Grid `minChildWidth`). @default "18rem" */
@@ -2752,6 +2777,86 @@ interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElem
   emptyState?: React.ReactNode;
   /** Optional heading above the grid. */
   label?: React.ReactNode;
+
+  /**
+   * #478: show a selection checkbox on each card and a selection toolbar when anything is picked —
+   * the same prop name, and the same behaviour, as `Datatable`. A card grid is what you reach for
+   * when the rows are visual (assets, previews, renders), where "pick several and do one thing to
+   * them" is most of the point.
+   * @default false
+   */
+  checkboxSelection?: boolean;
+  /**
+   * Actions shown in the selection toolbar, with the same shape as `DatatableBatchAction` — including
+   * `disabled` / `hidden` / `disabledReason` as predicates over the current selection (#479), and
+   * `ctx.anchorEl` so an action can anchor a popover to its own button.
+   */
+  batchActions?: CardGridBatchAction<Row>[];
+  /** Fired when the selection changes — `(keys, rows)`, matching `Datatable.onRowSelectionChange`. */
+  onRowSelectionChange?: (keys: Array<string | number>, rows: Row[]) => void;
+  /**
+   * Where the grid draws its checkbox over each card. `"none"` suppresses the overlay entirely for
+   * consumers who render the control themselves from `renderCard`'s third argument.
+   * @default "top-start"
+   */
+  selectionPlacement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "none";
+  /**
+   * Per-card `aria-label` for the checkbox. Worth setting: unlike a table row, a card's own content is
+   * not necessarily announced with the control, so the default `"Select item"` is the same for every
+   * card. @default (row, index) => "Select item"
+   */
+  selectionLabel?: (row: Row, index: number) => string;
+  /** Show the page-scoped "Select all on this page" control. @default true */
+  showSelectAll?: boolean;
+  /**
+   * Retain the row OBJECTS of off-page selections so `batchActions` and `onRowSelectionChange` receive
+   * them for a selection spanning several pages. `keys` is always the authoritative cross-page
+   * selection (as in `Datatable`); this exists because the grid only renders one page, which is the
+   * `Map<id, row>` consumers were otherwise hand-rolling.
+   *
+   * Opt-in because it holds references the host may expect to be released, and **bounded**: `true`
+   * retains up to 1000 rows, or pass a number for your own cap. Past the cap it stops retaining and
+   * those keys simply resolve to nothing in `rows`, so re-fetch by key.
+   * @default false
+   */
+  retainSelectedRows?: boolean | number;
+}
+
+/** Extra context handed to a CardGrid batch action's `onClick`. */
+interface CardGridBatchActionContext {
+  /** The toolbar button that was clicked — anchor a popover or panel to it. */
+  anchorEl: HTMLElement;
+}
+
+/** A batch action shown in CardGrid's selection toolbar. Mirrors `DatatableBatchAction`. */
+interface CardGridBatchAction<Row = any> {
+  /** Button label. */
+  label: string;
+  /** Leading icon node. */
+  icon?: React.ReactNode;
+  /** Handler: `(selectedKeys, selectedRows, clearSelection, ctx)`. */
+  onClick?: (
+    keys: Array<string | number>,
+    rows: Row[],
+    clearSelection: () => void,
+    ctx: CardGridBatchActionContext,
+  ) => void;
+  /** Render in danger color. */
+  danger?: boolean;
+  /** Disable the action — a static boolean, or a predicate over the current selection. */
+  disabled?: boolean | ((keys: Array<string | number>, rows: Row[]) => boolean);
+  /** Hide the action entirely — a static boolean, or a predicate over the current selection. */
+  hidden?: boolean | ((keys: Array<string | number>, rows: Row[]) => boolean);
+  /**
+   * Why the action is disabled, shown as the button's tooltip (#479). May be a predicate over the
+   * selection, because that is usually where the answer lives ("that selection is 5.1 GB; the limit is
+   * 4 GB"). With a reason present the button renders `aria-disabled` rather than native `disabled`, so
+   * it stays focusable and the reason is keyboard-reachable; without one it stays natively disabled and
+   * out of the tab order.
+   */
+  disabledReason?:
+    | React.ReactNode
+    | ((keys: Array<string | number>, rows: Row[]) => React.ReactNode);
 }
 
 declare function CardGrid<Row = any>(props: CardGridProps<Row>): React.JSX.Element;
@@ -4961,4 +5066,4 @@ declare function useFilePicker(options?: UseFilePickerOptions): {
   getInputProps: () => React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement | null> };
 };
 
-export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseLocalStorageOptions, type UseMediaQueryOptions, type UseWindowSizeOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridBatchAction, type CardGridBatchActionContext, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseLocalStorageOptions, type UseMediaQueryOptions, type UseWindowSizeOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };

package/dist/index.mjs

@@ -7227,8 +7227,8 @@ function Currency({
 }
 function useFallbackName(ref, hasOwnName) {
   const [needsFallback, setNeedsFallback] = React54__default.useState(false);
-  const useIso3 = typeof document !== "undefined" ? React54__default.useLayoutEffect : React54__default.useEffect;
-  useIso3(() => {
+  const useIso2 = typeof document !== "undefined" ? React54__default.useLayoutEffect : React54__default.useEffect;
+  useIso2(() => {
     if (hasOwnName) {
       setNeedsFallback(false);
       return;
@@ -7244,7 +7244,6 @@ function useFallbackName(ref, hasOwnName) {
   });
   return !hasOwnName && needsFallback;
 }
-typeof document !== "undefined" ? React54__default.useLayoutEffect : React54__default.useEffect;
 var SELECT_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -12873,14 +12872,20 @@ function Datatable({
             const isHidden = typeof a.hidden === "function" ? a.hidden(selKeys, selectedRows) : !!a.hidden;
             if (isHidden) return null;
             const isDisabled = typeof a.disabled === "function" ? a.disabled(selKeys, selectedRows) : !!a.disabled;
-            return /* @__PURE__ */ jsxs(
+            const reason = isDisabled && a.disabledReason != null ? typeof a.disabledReason === "function" ? a.disabledReason(selKeys, selectedRows) : a.disabledReason : null;
+            const soft = isDisabled && reason != null;
+            const btn = /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
                 className: "twc-dt__batch-btn",
                 "data-danger": a.danger || void 0,
-                disabled: isDisabled,
-                onClick: (e) => a.onClick?.(selKeys, selectedRows, clearSelection, { anchorEl: e.currentTarget }),
+                disabled: isDisabled && !soft,
+                "aria-disabled": soft || void 0,
+                onClick: (e) => {
+                  if (isDisabled) return;
+                  a.onClick?.(selKeys, selectedRows, clearSelection, { anchorEl: e.currentTarget });
+                },
                 children: [
                   a.icon,
                   a.label
@@ -12888,6 +12893,7 @@ function Datatable({
               },
               i
             );
+            return reason != null ? /* @__PURE__ */ jsx(Tooltip, { label: reason, placement: "top", children: btn }, i) : btn;
           })
         ] })
       ] }) : null,
@@ -14318,6 +14324,42 @@ var CARDGRID_CSS = `
 .twc-cardgrid__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
 .twc-cardgrid__count { font-size: var(--text-sm); color: var(--color-text-muted); }
 .twc-cardgrid__perpage { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
+
+/* #478: selection. The card's selected state is a RING, not a background tint: a card is usually a
+   full-bleed thumbnail, so a tint is invisible behind the image. The ring is drawn with box-shadow on
+   a wrapper so it never participates in layout (no reflow when a card becomes selected) and it reads
+   in both themes, --color-primary clearing 3:1 against both surfaces as a non-text indicator. */
+.twc-cardgrid__item { position: relative; border-radius: var(--radius-lg); transition: box-shadow var(--duration-fast) var(--ease-standard); }
+.twc-cardgrid__item[data-selected="true"] { box-shadow: 0 0 0 var(--border-medium) var(--color-primary); }
+/* The overlay is the GRID's checkbox, not the card's: renderCard owns the whole body, so a
+   consumer-rendered checkbox would compete with the card's own click target and have to be positioned
+   against a thumbnail whose size only the consumer knows. Placement is configurable, and a consumer who
+   wants it inline instead uses the third renderCard argument and sets selectionPlacement="none". */
+.twc-cardgrid__pick { position: absolute; z-index: 2; display: inline-flex; padding: var(--space-1);
+  background: color-mix(in srgb, var(--color-surface) 82%, transparent); border-radius: var(--radius-md);
+  backdrop-filter: blur(4px); }
+.twc-cardgrid__item[data-place="top-start"] .twc-cardgrid__pick { top: var(--space-2); inset-inline-start: var(--space-2); }
+.twc-cardgrid__item[data-place="top-end"] .twc-cardgrid__pick { top: var(--space-2); inset-inline-end: var(--space-2); }
+.twc-cardgrid__item[data-place="bottom-start"] .twc-cardgrid__pick { bottom: var(--space-2); inset-inline-start: var(--space-2); }
+.twc-cardgrid__item[data-place="bottom-end"] .twc-cardgrid__pick { bottom: var(--space-2); inset-inline-end: var(--space-2); }
+.twc-cardgrid__batch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3); border: var(--border-thin) solid var(--color-primary-border);
+  background: var(--color-primary-subtle); border-radius: var(--radius-md); }
+.twc-cardgrid__batch-count { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary-subtle-fg); }
+.twc-cardgrid__batch-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
+.twc-cardgrid__batch-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm);
+  padding-inline: var(--space-3); border: var(--border-thin) solid var(--color-border); background: var(--color-surface);
+  color: var(--color-text); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold);
+  border-radius: var(--radius-md); cursor: pointer; }
+.twc-cardgrid__batch-btn:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--color-primary-subtle-fg); color: var(--color-primary-subtle-fg); }
+.twc-cardgrid__batch-btn:disabled, .twc-cardgrid__batch-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.twc-cardgrid__batch-btn[data-danger="true"] { color: var(--color-danger-subtle-fg); }
+.twc-cardgrid__batch-btn svg { width: 15px; height: 15px; }
+.twc-cardgrid__batch-x { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
+  border: none; background: transparent; color: var(--color-primary-subtle-fg); cursor: pointer; border-radius: var(--radius-sm); }
+.twc-cardgrid__batch-x:hover { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
+.twc-cardgrid__batch-x svg { width: 15px; height: 15px; }
+.twc-cardgrid__selall { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
 `;
 function CardGrid({
   rows = [],
@@ -14354,6 +14396,16 @@ function CardGrid({
   sortMinWidth,
   // slots / states
   toolbar,
+  // #478: selection + batch actions, deliberately the SAME vocabulary as Datatable rather than a new
+  // one - a card grid is the surface where "pick several of these and do one thing to them" is close to
+  // the whole point, and it was the only Datatable affordance CardGrid lacked.
+  checkboxSelection = false,
+  batchActions = [],
+  onRowSelectionChange,
+  selectionPlacement = "top-start",
+  selectionLabel,
+  showSelectAll = true,
+  retainSelectedRows = false,
   emptyState = "No results.",
   label,
   id,
@@ -14430,6 +14482,62 @@ function CardGrid({
     return () => clearTimeout(t);
   }, [serverMode, queryKey]);
   const keyOf = typeof rowKey === "function" ? rowKey : (r2) => r2 && r2[rowKey];
+  const [selected, setSelected] = React54__default.useState(() => /* @__PURE__ */ new Set());
+  const retainCap = retainSelectedRows === true ? 1e3 : retainSelectedRows || 0;
+  const retainedRef = React54__default.useRef(/* @__PURE__ */ new Map());
+  const selKeys = React54__default.useMemo(() => [...selected], [selected]);
+  const selectedRows = React54__default.useMemo(() => {
+    const onPage = new Map(pageRows.map((r2, i) => [keyOf(r2, i), r2]));
+    return selKeys.map((k) => onPage.get(k) ?? retainedRef.current.get(k)).filter((r2) => r2 !== void 0);
+  }, [selKeys, pageRows]);
+  const clearSelection = React54__default.useCallback(() => {
+    retainedRef.current.clear();
+    setSelected(/* @__PURE__ */ new Set());
+  }, []);
+  const toggleKey = React54__default.useCallback((key, row) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+        retainedRef.current.delete(key);
+      } else {
+        next.add(key);
+        if (retainCap > 0 && row !== void 0 && retainedRef.current.size < retainCap) retainedRef.current.set(key, row);
+      }
+      return next;
+    });
+  }, [retainCap]);
+  const pageKeys = pageRows.map((r2, i) => keyOf(r2, i));
+  const pageSelectedCount = pageKeys.filter((k) => selected.has(k)).length;
+  const allPageSelected = pageKeys.length > 0 && pageSelectedCount === pageKeys.length;
+  const somePageSelected = pageSelectedCount > 0 && !allPageSelected;
+  const togglePage = () => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      pageRows.forEach((r2, i) => {
+        const k = keyOf(r2, i);
+        if (allPageSelected) {
+          next.delete(k);
+          retainedRef.current.delete(k);
+        } else {
+          next.add(k);
+          if (retainCap > 0 && retainedRef.current.size < retainCap) retainedRef.current.set(k, r2);
+        }
+      });
+      return next;
+    });
+  };
+  const onSelRef = React54__default.useRef(onRowSelectionChange);
+  onSelRef.current = onRowSelectionChange;
+  const prevSelSigRef = React54__default.useRef(null);
+  React54__default.useEffect(() => {
+    const cb = onSelRef.current;
+    if (!cb) return;
+    const sig = selKeys.join(",");
+    if (sig === prevSelSigRef.current) return;
+    prevSelSigRef.current = sig;
+    cb(selKeys, selectedRows);
+  }, [selKeys, selectedRows]);
   const from = total === 0 ? 0 : Math.min(shownPage * sizeVal + 1, total);
   const to = paginated ? Math.min((shownPage + 1) * sizeVal, total) : total;
   const rppOptions = Array.from(new Set([...pageSizeOptions || [], pageSize].filter((n) => n > 0))).sort((a, b) => a - b).map((n) => ({ value: String(n), label: String(n) }));
@@ -14482,6 +14590,64 @@ function CardGrid({
         )
       ] }) : null
     ] }) : null,
+    checkboxSelection && showSelectAll && pageRows.length > 0 && selected.size === 0 ? /* @__PURE__ */ jsxs("label", { className: "twc-cardgrid__selall", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: allPageSelected,
+          indeterminate: somePageSelected,
+          onChange: togglePage,
+          "aria-label": "Select all on this page"
+        }
+      ),
+      "Select all on this page"
+    ] }) : null,
+    checkboxSelection && selected.size > 0 ? /* @__PURE__ */ jsxs("div", { className: "twc-cardgrid__batch", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "twc-cardgrid__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }),
+      /* @__PURE__ */ jsxs("span", { className: "twc-cardgrid__batch-count", children: [
+        selected.size,
+        " selected"
+      ] }),
+      showSelectAll && pageRows.length > 0 ? /* @__PURE__ */ jsxs("label", { className: "twc-cardgrid__selall", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: allPageSelected,
+            indeterminate: somePageSelected,
+            onChange: togglePage,
+            "aria-label": "Select all on this page"
+          }
+        ),
+        "This page"
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { className: "twc-cardgrid__batch-actions", children: batchActions.map((a, i) => {
+        const isHidden = typeof a.hidden === "function" ? a.hidden(selKeys, selectedRows) : !!a.hidden;
+        if (isHidden) return null;
+        const isDisabled = typeof a.disabled === "function" ? a.disabled(selKeys, selectedRows) : !!a.disabled;
+        const reason = isDisabled && a.disabledReason != null ? typeof a.disabledReason === "function" ? a.disabledReason(selKeys, selectedRows) : a.disabledReason : null;
+        const soft = isDisabled && reason != null;
+        const btn = /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "twc-cardgrid__batch-btn",
+            "data-danger": a.danger || void 0,
+            disabled: isDisabled && !soft,
+            "aria-disabled": soft || void 0,
+            onClick: (e) => {
+              if (isDisabled) return;
+              a.onClick?.(selKeys, selectedRows, clearSelection, { anchorEl: e.currentTarget });
+            },
+            children: [
+              a.icon,
+              a.label
+            ]
+          },
+          i
+        );
+        return reason != null ? /* @__PURE__ */ jsx(Tooltip, { label: reason, placement: "top", children: btn }, i) : btn;
+      }) })
+    ] }) : null,
     /* @__PURE__ */ jsxs("div", { className: "twc-cardgrid__body", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: [
       loading ? /* @__PURE__ */ jsx("div", { className: "twc-cardgrid__overlay", children: /* @__PURE__ */ jsx("div", { className: "twc-cardgrid__spinner", role: "status", "aria-label": "Loading" }) }) : null,
       pageRows.length === 0 && !loading ? /* @__PURE__ */ jsx("div", { className: "twc-cardgrid__empty", children: emptyState }) : /* @__PURE__ */ jsx(
@@ -14493,7 +14659,31 @@ function CardGrid({
           gap,
           role: "list",
           "aria-labelledby": label ? `${fieldId}-label` : void 0,
-          children: pageRows.map((row, i) => /* @__PURE__ */ jsx("div", { role: "listitem", children: renderCard(row, i) }, keyOf(row, i) ?? i))
+          children: pageRows.map((row, i) => {
+            const k = keyOf(row, i);
+            const isSel = checkboxSelection && selected.has(k);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "listitem",
+                className: "twc-cardgrid__item",
+                "data-selected": isSel || void 0,
+                "data-place": checkboxSelection ? selectionPlacement : void 0,
+                children: [
+                  checkboxSelection && selectionPlacement !== "none" ? /* @__PURE__ */ jsx("span", { className: "twc-cardgrid__pick", children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: isSel,
+                      onChange: () => toggleKey(k, row),
+                      "aria-label": selectionLabel ? selectionLabel(row, i) : "Select item"
+                    }
+                  ) }) : null,
+                  renderCard(row, i, checkboxSelection ? { selected: isSel, toggle: () => toggleKey(k, row) } : void 0)
+                ]
+              },
+              k ?? i
+            );
+          })
         }
       )
     ] }),
@@ -19510,7 +19700,7 @@ function Tag({
     }, "aria-label": _removeLabel, type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
   ] });
 }
-var useIso2 = typeof document !== "undefined" ? React54__default.useLayoutEffect : React54__default.useEffect;
+var useIso = typeof document !== "undefined" ? React54__default.useLayoutEffect : React54__default.useEffect;
 var TEXTAREA_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -19609,7 +19799,7 @@ var Textarea = React54__default.forwardRef(function Textarea2({
     el.style.height = `${next}px`;
     el.style.overflowY = el.scrollHeight + vBorder > maxH ? "auto" : "hidden";
   };
-  useIso2(() => {
+  useIso(() => {
     if (autosize && innerRef.current) resize();
   }, [autosize, rest.value, minRows, maxRows, rows]);
   const handleInput = (e) => {