tembro 6.0.3 → 6.1.1

package/packages/cli/vendor/src/components/actions/action-menu.tsx

@@ -33,7 +33,11 @@ export type ActionMenuItem = {
 
 export type ActionMenuProps = {
   actions: ActionMenuItem[]
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
   label?: React.ReactNode
+  triggerLabel?: string
   trigger?: React.ReactElement
   align?: "start" | "center" | "end"
   side?: "top" | "right" | "bottom" | "left"
@@ -50,12 +54,19 @@ export type ActionMenuProps = {
   menuWidth?: number | string
   loadingLabel?: React.ReactNode
   persistIconSpace?: boolean
+  itemRoleDescription?: string
+  renderItem?: (action: ActionMenuItem, state: { loading: boolean; close: () => void }) => React.ReactNode
+  onActionError?: (error: unknown, action: ActionMenuItem) => void
 }
-
+
 function ActionMenu({
-  actions,
-  label,
-  trigger,
+  actions,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  label,
+  triggerLabel = "Open actions",
+  trigger,
   align = "end",
   side = "bottom",
   sideOffset = 4,
@@ -71,12 +82,21 @@ function ActionMenu({
   menuWidth,
   loadingLabel = "Working...",
   persistIconSpace = true,
+  itemRoleDescription,
+  renderItem,
+  onActionError,
 }: ActionMenuProps) {
   const visibleActions = actions.filter((action) => !action.hidden)
   const [loadingKey, setLoadingKey] = React.useState<string | null>(null)
-  const [open, setOpen] = React.useState(false)
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
+  const open = openProp ?? internalOpen
   const lastInvokedActionKeyRef = React.useRef<string | null>(null)
 
+  const setOpen = React.useCallback((nextOpen: boolean) => {
+    if (openProp === undefined) setInternalOpen(nextOpen)
+    onOpenChange?.(nextOpen)
+  }, [onOpenChange, openProp])
+
   const handleSelect = async (action: ActionMenuItem) => {
     if (action.disabled || action.loading || loadingKey) return
 
@@ -84,6 +104,9 @@ function ActionMenu({
       setLoadingKey(action.key)
       await action.onSelect?.()
       if (closeOnSelect && !action.keepOpen) setOpen(false)
+    } catch (error) {
+      onActionError?.(error, action)
+      if (!onActionError) throw error
     } finally {
       setLoadingKey(null)
     }
@@ -122,7 +145,7 @@ function ActionMenu({
       >
         {!trigger && <MoreHorizontalIcon />}
         {!trigger && showChevron && <span className="text-[10px] font-medium uppercase tracking-[0.18em]">Menu</span>}
-        <span className="sr-only">Open actions</span>
+        <span className="sr-only">{triggerLabel}</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align={align}
@@ -155,6 +178,7 @@ function ActionMenu({
                 disabled={action.disabled || isLoading}
                 variant={action.destructive ? "destructive" : "default"}
                 closeOnSelect={closeOnSelect && !action.keepOpen}
+                aria-roledescription={itemRoleDescription}
                 className={cn(
                   "min-h-11 items-start gap-3 rounded-[calc(var(--radius-md)+1px)] border border-transparent py-2.5 transition-[background-color,color,border-color,box-shadow] data-[highlighted]:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--primary),transparent_76%)] data-[disabled]:opacity-45",
                   itemClassName
@@ -173,19 +197,23 @@ function ActionMenu({
                 onMouseDown={stopInteractivePropagation}
                 onDoubleClick={stopInteractivePropagation}
               >
-                <span className={cn("mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground", !persistIconSpace && !isLoading && !action.icon && "hidden")}>
-                  {isLoading ? <Loader2Icon className="size-4 animate-spin" /> : action.icon}
-                </span>
-                <span className="min-w-0 flex-1">
-                  <span className="block truncate">{action.label}</span>
-                  {action.description ? (
-                    <DropdownMenuItemDescription className="mt-0.5 truncate">
-                      {isLoading ? loadingLabel : action.description}
-                    </DropdownMenuItemDescription>
-                  ) : null}
-                </span>
-                {action.shortcut && (
-                  <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
+                {renderItem?.(action, { loading: isLoading, close: () => setOpen(false) }) ?? (
+                  <>
+                    <span className={cn("mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground", !persistIconSpace && !isLoading && !action.icon && "hidden")}>
+                      {isLoading ? <Loader2Icon className="size-4 animate-spin" /> : action.icon}
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate">{action.label}</span>
+                      {action.description ? (
+                        <DropdownMenuItemDescription className="mt-0.5 truncate">
+                          {isLoading ? loadingLabel : action.description}
+                        </DropdownMenuItemDescription>
+                      ) : null}
+                    </span>
+                    {action.shortcut && (
+                      <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
+                    )}
+                  </>
                 )}
               </DropdownMenuItem>
             </React.Fragment>

package/packages/cli/vendor/src/components/actions/copy-button.tsx

@@ -97,8 +97,8 @@ function CopyButton({
       aria-live="polite"
       {...props}
     >
-      {showIcon && (copied ? <CheckIcon data-icon="inline-start" /> : <CopyIcon data-icon="inline-start" />)}
-      {children ?? (copied ? copiedLabel : copyLabel)}
+      {showIcon && (copied ? <CheckIcon data-icon="inline-start" className="size-3.5" /> : <CopyIcon data-icon="inline-start" className="size-3.5" />)}
+      {children ?? (copied ? copiedLabel : copyLabel)}
     </Button>
   )
 }

package/packages/cli/vendor/src/components/calendar/calendar-range-scheduler.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { CalendarDaysIcon } from "lucide-react"
+
+import { DateRangePicker, type DateRangePickerValue } from "@/components/calendar/date-range-picker"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type CalendarRangeSchedulerEvent = {
+  id: string
+  title: React.ReactNode
+  range: DateRangePickerValue
+  tone?: "default" | "info" | "success" | "warning" | "danger"
+  meta?: React.ReactNode
+}
+
+export type CalendarRangeSchedulerProps = Omit<React.ComponentProps<typeof Card>, "onSelect"> & {
+  value?: DateRangePickerValue
+  onValueChange?: (range: DateRangePickerValue) => void
+  events?: CalendarRangeSchedulerEvent[]
+  onEventSelect?: (event: CalendarRangeSchedulerEvent) => void
+  title?: React.ReactNode
+  action?: React.ReactNode
+}
+
+function CalendarRangeScheduler({
+  value,
+  onValueChange,
+  events = [],
+  onEventSelect,
+  title = "Schedule range",
+  action,
+  className,
+  ...props
+}: CalendarRangeSchedulerProps) {
+  return (
+    <Card data-slot="calendar-range-scheduler" className={cn("min-w-0", className)} {...props}>
+      <CardHeader className="flex-row items-center justify-between gap-3">
+        <CardTitle className="flex items-center gap-2"><CalendarDaysIcon className="size-4" />{title}</CardTitle>
+        {action}
+      </CardHeader>
+      <CardContent className="grid gap-4 lg:grid-cols-[320px_minmax(0,1fr)]">
+        <DateRangePicker value={value} onValueChange={onValueChange} />
+        <div className="grid content-start gap-2">
+          {events.length ? events.map((event) => (
+            <button
+              key={event.id}
+              type="button"
+              className="grid gap-1 rounded-lg border bg-background p-3 text-left transition hover:border-primary/45 hover:bg-muted/40"
+              onClick={() => onEventSelect?.(event)}
+            >
+              <span className="flex items-center justify-between gap-2">
+                <span className="font-medium">{event.title}</span>
+                <Badge label={event.tone ?? "scheduled"} status={event.tone === "danger" ? "danger" : event.tone === "warning" ? "warning" : event.tone === "success" ? "success" : "info"} variant="soft" />
+              </span>
+              <span className="text-xs text-muted-foreground">{event.range.from || "Start"} - {event.range.to || "End"}</span>
+              {event.meta ? <span className="text-xs text-muted-foreground">{event.meta}</span> : null}
+            </button>
+          )) : (
+            <div className="rounded-lg border border-dashed p-6 text-sm text-muted-foreground">No scheduled ranges.</div>
+          )}
+          <Button type="button" variant="outline" onClick={() => onValueChange?.({ from: "", to: "" })}>Clear range</Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export { CalendarRangeScheduler }

package/packages/cli/vendor/src/components/calendar/date-picker.tsx

@@ -86,11 +86,8 @@ function DatePicker({
             />
           }
         >
-          <CalendarIcon data-icon="inline-start" className={cn(hasValue && "text-primary")} />
-          <span className={cn("grid min-w-0 flex-1", triggerVariant === "default" && "gap-0.5")}>
-            {triggerVariant === "default" ? <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-              {labels?.selected ?? "Date"}
-            </span> : null}
+          <CalendarIcon data-icon="inline-start" className={cn("size-4", hasValue && "text-primary")} />
+          <span className="grid min-w-0 flex-1">
             <span className={cn("truncate text-sm", hasValue && "font-semibold text-foreground")}>
               {hasValue ? formatValue(String(value)) : placeholder ?? labels?.placeholder ?? "Select date"}
             </span>

package/packages/cli/vendor/src/components/calendar/date-range-picker.tsx

@@ -176,22 +176,15 @@ function DateRangePicker({
             />
           }
         >
-          <CalendarIcon data-icon="inline-start" className={cn(hasValue && "text-primary")} />
+          <CalendarIcon data-icon="inline-start" className={cn("size-4", hasValue && "text-primary")} />
           {hasValue ? (
-            <span className="grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2">
-              <span className="grid min-w-0 gap-0.5">
-                <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">{labels?.start ?? "Start"}</span>
-                <span className="truncate text-sm font-semibold text-foreground">{from ? formatValue(from) : "..."}</span>
-              </span>
+            <span className="flex min-w-0 flex-1 items-center gap-2">
+              <span className="min-w-0 truncate text-sm font-semibold text-foreground">{from ? formatValue(from) : "..."}</span>
               <span className="text-muted-foreground">-</span>
-              <span className="grid min-w-0 gap-0.5">
-                <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">{labels?.end ?? "End"}</span>
-                <span className="truncate text-sm font-semibold text-foreground">{to ? formatValue(to) : "..."}</span>
-              </span>
+              <span className="min-w-0 truncate text-sm font-semibold text-foreground">{to ? formatValue(to) : "..."}</span>
             </span>
           ) : (
-            <span className="grid min-w-0 flex-1 gap-0.5">
-              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">Range</span>
+            <span className="grid min-w-0 flex-1">
               <span className="truncate text-sm">{label}</span>
             </span>
           )}

package/packages/cli/vendor/src/components/calendar/date-time-picker.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+
+import { DatePicker, type DatePickerProps } from "@/components/calendar/date-picker"
+import { TimePicker } from "@/components/inputs/time-picker"
+import { cn } from "@/lib/utils"
+
+export type DateTimeValue = {
+  date?: string
+  time?: string
+}
+
+export type CalendarDateTimePickerProps = Omit<React.ComponentProps<"div">, "value" | "onChange"> & {
+  value?: DateTimeValue
+  onValueChange?: (value: DateTimeValue) => void
+  datePickerProps?: Omit<DatePickerProps, "value" | "onValueChange">
+  timeLabel?: React.ReactNode
+  disabled?: boolean
+}
+
+function CalendarDateTimePicker({
+  value,
+  onValueChange,
+  datePickerProps,
+  timeLabel = "Time",
+  disabled,
+  className,
+  ...props
+}: CalendarDateTimePickerProps) {
+  const current = value ?? {}
+
+  return (
+    <div data-slot="date-time-picker" className={cn("grid gap-3 sm:grid-cols-2", className)} {...props}>
+      <DatePicker
+        {...datePickerProps}
+        value={current.date}
+        disabled={disabled || datePickerProps?.disabled}
+        onValueChange={(date) => onValueChange?.({ ...current, date })}
+      />
+      <label className="grid gap-1.5 text-sm font-medium">
+        <span>{timeLabel}</span>
+        <TimePicker
+          value={current.time ?? ""}
+          onChange={(event) => onValueChange?.({ ...current, time: event.currentTarget.value })}
+          disabled={disabled}
+        />
+      </label>
+    </div>
+  )
+}
+
+export { CalendarDateTimePicker }

package/packages/cli/vendor/src/components/calendar/index.ts

@@ -1,4 +1,6 @@
 export * from "./date-utils"
-export * from "./calendar"
-export * from "./date-picker"
-export * from "./date-range-picker"
+export * from "./calendar"
+export * from "./date-picker"
+export * from "./date-range-picker"
+export * from "./date-time-picker"
+export * from "./calendar-range-scheduler"

package/packages/cli/vendor/src/components/charts/chart-card.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+
+import { BarChart, LineChart, DonutChart, type ChartDatum, type ChartSeries, type ChartState } from "@/components/charts/charts"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Select } from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+export type ChartCardType = "bar" | "line" | "donut"
+export type ChartCardFilter = {
+  label: string
+  value: string
+}
+
+export type ChartCardProps = Omit<React.ComponentProps<typeof Card>, "type"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  type?: ChartCardType
+  data?: ChartDatum[]
+  series?: ChartSeries[]
+  labels?: React.ReactNode[]
+  state?: ChartState
+  metric?: React.ReactNode
+  badge?: React.ReactNode
+  filters?: ChartCardFilter[]
+  filterValue?: string
+  onFilterChange?: (value: string) => void
+}
+
+function ChartCard({
+  title,
+  description,
+  type = "bar",
+  data = [],
+  series,
+  labels,
+  state,
+  metric,
+  badge,
+  filters,
+  filterValue,
+  onFilterChange,
+  className,
+  ...props
+}: ChartCardProps) {
+  return (
+    <Card data-slot="chart-card" className={cn("min-w-0", className)} {...props}>
+      <CardHeader className="flex-row items-start justify-between gap-3">
+        <div className="grid gap-1">
+          {title ? <CardTitle>{title}</CardTitle> : null}
+          {description ? <CardDescription>{description}</CardDescription> : null}
+          {metric ? <div className="text-2xl font-semibold tracking-tight">{metric}</div> : null}
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {badge ?? <Badge label={type} variant="secondary" />}
+          {filters?.length ? (
+            <Select
+              value={filterValue}
+              onValueChange={(value) => value && onFilterChange?.(value)}
+              options={filters}
+              triggerClassName="h-9 w-36"
+            />
+          ) : null}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {type === "line" ? (
+          <LineChart series={series} labels={labels} values={data.map((item) => item.value)} state={state} />
+        ) : type === "donut" ? (
+          <DonutChart data={data} state={state} />
+        ) : (
+          <BarChart data={data} series={series} state={state} />
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { ChartCard }

package/packages/cli/vendor/src/components/charts/index.ts

@@ -1,2 +1,3 @@
 export * from './charts'
 export * from './progress-circle'
+export * from './chart-card'

package/packages/cli/vendor/src/components/command/advanced-command-menu.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+import { SearchIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/ui/command"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+export type AdvancedCommandMenuItem = {
+  id: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  shortcut?: React.ReactNode
+  keywords?: string[]
+  onSelect?: () => void
+}
+
+export type AdvancedCommandMenuGroup = {
+  id: string
+  label: React.ReactNode
+  items: AdvancedCommandMenuItem[]
+}
+
+export type AdvancedCommandMenuProps = {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  groups: AdvancedCommandMenuGroup[]
+  title?: React.ReactNode
+  triggerLabel?: React.ReactNode
+  placeholder?: string
+}
+
+function AdvancedCommandMenu({
+  open,
+  onOpenChange,
+  groups,
+  title = "Command menu",
+  triggerLabel = "Command",
+  placeholder = "Search commands...",
+}: AdvancedCommandMenuProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const resolvedOpen = open ?? internalOpen
+  const setOpen = onOpenChange ?? setInternalOpen
+
+  return (
+    <>
+      <Button type="button" variant="outline" leftIcon={<SearchIcon className="size-4" />} onClick={() => setOpen(true)}>{triggerLabel}</Button>
+      <Dialog open={resolvedOpen} onOpenChange={setOpen}>
+        <DialogContent className="overflow-hidden p-0">
+          <DialogHeader className="border-b px-4 py-3">
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <Command>
+            <CommandInput placeholder={placeholder} />
+            <CommandList>
+              <CommandEmpty>No command found.</CommandEmpty>
+              {groups.map((group) => (
+                <CommandGroup key={group.id} heading={group.label}>
+                  {group.items.map((item) => (
+                    <CommandItem
+                      key={item.id}
+                      value={[item.id, item.label, item.description, ...(item.keywords ?? [])].filter(Boolean).join(" ")}
+                      onSelect={() => {
+                        item.onSelect?.()
+                        setOpen(false)
+                      }}
+                    >
+                      {item.icon}
+                      <span className="grid min-w-0 flex-1">
+                        <span className="truncate">{item.label}</span>
+                        {item.description ? <span className="truncate text-xs text-muted-foreground">{item.description}</span> : null}
+                      </span>
+                      {item.shortcut ? <CommandShortcut>{item.shortcut}</CommandShortcut> : null}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))}
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+export { AdvancedCommandMenu }

package/packages/cli/vendor/src/components/command/index.ts

@@ -1 +1,2 @@
-export * from "./command-palette"
+export * from "./command-palette"
+export * from "./advanced-command-menu"

package/packages/cli/vendor/src/components/data-table/data-grid.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+
+import { Input } from "@/components/ui/input"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+export type DataGridColumn<TRow extends Record<string, unknown>> = {
+  key: keyof TRow & string
+  header: React.ReactNode
+  editable?: boolean
+  width?: React.CSSProperties["width"]
+  render?: (value: TRow[keyof TRow], row: TRow, rowIndex: number) => React.ReactNode
+}
+
+export type DataGridProps<TRow extends Record<string, unknown>> = React.ComponentProps<"div"> & {
+  columns: DataGridColumn<TRow>[]
+  rows: TRow[]
+  onRowsChange?: (rows: TRow[]) => void
+}
+
+function DataGrid<TRow extends Record<string, unknown>>({ columns, rows, onRowsChange, className, ...props }: DataGridProps<TRow>) {
+  const updateCell = (rowIndex: number, key: keyof TRow & string, value: string) => {
+    onRowsChange?.(rows.map((row, index) => index === rowIndex ? { ...row, [key]: value } : row))
+  }
+
+  return (
+    <div data-slot="data-grid" className={cn("overflow-hidden rounded-lg border", className)} {...props}>
+      <Table>
+        <TableHeader>
+          <TableRow>{columns.map((column) => <TableHead key={column.key} style={{ width: column.width }}>{column.header}</TableHead>)}</TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((row, rowIndex) => (
+            <TableRow key={rowIndex}>
+              {columns.map((column) => {
+                const value = row[column.key]
+                return (
+                  <TableCell key={column.key}>
+                    {column.editable ? (
+                      <Input value={String(value ?? "")} onValueChange={(nextValue) => updateCell(rowIndex, column.key, nextValue)} />
+                    ) : column.render ? (
+                      column.render(value, row, rowIndex)
+                    ) : (
+                      String(value ?? "")
+                    )}
+                  </TableCell>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+export { DataGrid }

package/packages/cli/vendor/src/components/data-table/data-table.tsx

@@ -4,8 +4,9 @@ import * as React from "react"
 import {
   flexRender,
   getCoreRowModel,
-  getPaginationRowModel,
-  useReactTable,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
   type Cell,
   type ColumnDef,
   type Header,
@@ -288,40 +289,50 @@ function DataTable<TData, TValue = unknown>({
     ]
   }, [columns, features?.rowActions, rowActions])
 
-  const paginationConfig = pagination === false ? undefined : pagination
-  const controlledPagination = paginationConfig
-    ? {
-        pageIndex: paginationConfig.pageIndex,
-        pageSize: paginationConfig.pageSize,
-      }
-    : undefined
-  const manualPagination = Boolean(paginationConfig && paginationConfig.manual !== false)
-  const resolvedRowSelection = rowSelection ?? {}
-
-  // TanStack Table returns imperative helpers that React Compiler flags by design.
-  // eslint-disable-next-line react-hooks/incompatible-library
-  const table = useReactTable({
+  const paginationConfig = pagination === false ? undefined : pagination
+  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])
+  const [internalColumnVisibility, setInternalColumnVisibility] = React.useState<VisibilityState>({})
+  const [internalRowSelection, setInternalRowSelection] = React.useState<RowSelectionState>({})
+  const [internalExpanded, setInternalExpanded] = React.useState<ExpandedState>({})
+  const [internalColumnPinning, setInternalColumnPinning] = React.useState<ColumnPinningState>({})
+  const resolvedSorting = sorting ?? internalSorting
+  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility
+  const resolvedRowSelection = rowSelection ?? internalRowSelection
+  const resolvedExpanded = expanded ?? internalExpanded
+  const resolvedColumnPinning = columnPinning ?? internalColumnPinning
+  const controlledPagination = paginationConfig
+    ? {
+        pageIndex: paginationConfig.pageIndex,
+        pageSize: paginationConfig.pageSize,
+      }
+    : undefined
+  const manualPagination = Boolean(paginationConfig && paginationConfig.manual !== false)
+
+  // TanStack Table returns imperative helpers that React Compiler flags by design.
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const table = useReactTable({
     data,
     columns: resolvedColumns,
-    getRowId,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: paginationConfig && !manualPagination ? getPaginationRowModel() : undefined,
-    manualPagination,
-    pageCount: paginationConfig?.pageCount,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection: resolvedRowSelection,
-      pagination: controlledPagination,
-      expanded,
-      ...(columnPinning ? { columnPinning } : {}),
-    },
-    onSortingChange,
-    onColumnVisibilityChange,
-    onRowSelectionChange,
-    onExpandedChange,
-    onColumnPinningChange,
-    enableRowSelection,
+    getRowId,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: paginationConfig && !manualPagination ? getPaginationRowModel() : undefined,
+    manualPagination,
+    pageCount: paginationConfig?.pageCount,
+    state: {
+      sorting: resolvedSorting,
+      columnVisibility: resolvedColumnVisibility,
+      rowSelection: resolvedRowSelection,
+      pagination: controlledPagination,
+      expanded: resolvedExpanded,
+      columnPinning: resolvedColumnPinning,
+    },
+    onSortingChange: onSortingChange ?? setInternalSorting,
+    onColumnVisibilityChange: onColumnVisibilityChange ?? setInternalColumnVisibility,
+    onRowSelectionChange: onRowSelectionChange ?? setInternalRowSelection,
+    onExpandedChange: onExpandedChange ?? setInternalExpanded,
+    onColumnPinningChange: onColumnPinningChange ?? setInternalColumnPinning,
+    enableRowSelection,
     getRowCanExpand,
     getExpandedRowModel: getExpandedRowModel(),
   })

package/packages/cli/vendor/src/components/data-table/index.ts

@@ -1,5 +1,6 @@
-export * from './data-table'
-export * from './data-table-pagination'
+export * from './data-table'
+export * from './data-grid'
+export * from './data-table-pagination'
 export * from './data-table-toolbar'
 export * from './data-table-column-visibility-menu'
 export * from './data-table-select-column'