@accelint/design-toolkit 9.9.1 → 9.10.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["actionColumn: NonNullable<typeof columnsProp>[number]"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport Kebab from '@accelint/icons/kebab';\nimport Pin from '@accelint/icons/pin';\nimport { useListData } from '@react-stately/data';\nimport {\n  getCoreRowModel,\n  getSortedRowModel,\n  type Row,\n  type RowPinningState,\n  type RowSelectionState,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Icon } from '../icon';\nimport { Menu } from '../menu';\nimport { MenuItem } from '../menu/item';\nimport { MenuSeparator } from '../menu/separator';\nimport { MenuTrigger } from '../menu/trigger';\nimport { TableBody } from './body';\nimport { TableContext } from './context';\nimport { TableHeader } from './header';\nimport styles from './styles.module.css';\nimport type { Key } from '@react-types/shared';\nimport type { TableProps } from './types';\n\n// This width is for columns in the table that provide features:\n// - Row count\n// - Row actions kebab\n// - Row selection (checkbox)\n// These columns should not need to grow with table width\nconst META_COLUMN_WIDTH = 32;\n\ntype RowActionsMenuProps<T> = {\n  row: Row<T>;\n  rows: Row<T>[];\n  moveRowsDown: (row: Row<T>, rows: Row<T>[]) => void;\n  moveRowsUp: (row: Row<T>, rows: Row<T>[]) => void;\n};\n\nfunction RowActionsMenu<T>({\n  moveRowsDown,\n  moveRowsUp,\n  row,\n  rows,\n}: RowActionsMenuProps<T>) {\n  const { enableRowActions, persistRowKebabMenu } = useContext(TableContext);\n  const isPinned = !!row.getIsPinned();\n  const hideRowKebab = !persistRowKebabMenu;\n\n  return (\n    enableRowActions && (\n      <div className={clsx(hideRowKebab && styles.hideInRow)}>\n        <MenuTrigger>\n          <Button variant='icon' aria-label={`row ${row.index + 1} actions`}>\n            <Icon>\n              <Kebab />\n            </Icon>\n          </Button>\n          <Menu>\n            <MenuItem onAction={() => row.pin(isPinned ? false : 'top')}>\n              {isPinned ? 'Unpin' : 'Pin'}\n            </MenuItem>\n            <MenuSeparator />\n            <MenuItem\n              onAction={() => moveRowsUp(row, rows)}\n              isDisabled={isPinned || row.index === 0}\n            >\n              Move Up\n            </MenuItem>\n            <MenuItem\n              onAction={() => moveRowsDown(row, rows)}\n              isDisabled={isPinned || row.index === rows.length - 1}\n            >\n              Move Down\n            </MenuItem>\n          </Menu>\n        </MenuTrigger>\n      </div>\n    )\n  );\n}\n\n/**\n * Table - Configurable data table with sorting, selection, and row actions\n *\n * Supports data-driven mode with TanStack column definitions or static mode with subcomponents.\n *\n * @param props - {@link TableProps}\n * @param props.children - Custom children for static mode.\n * @param props.columns - Column definitions for data-driven mode.\n * @param props.data - Data array for data-driven mode.\n * @param props.showCheckbox - Whether to show selection checkboxes.\n * @param props.rowSelection - Initial row selection state.\n * @param props.kebabPosition - Position of row action menu.\n * @param props.persistRowKebabMenu - Keep row kebab menu visible.\n * @param props.persistHeaderKebabMenu - Keep header kebab menu visible.\n * @param props.persistNumerals - Keep row numerals visible.\n * @param props.enableSorting - Enable column sorting.\n * @param props.enableColumnReordering - Enable column reordering.\n * @param props.enableRowActions - Enable row action menu.\n * @param props.manualSorting - Use server-side sorting.\n * @param props.onSortChange - Callback when sort changes.\n * @param props.onColumnReorderChange - Callback when column order changes.\n * @param props.onRowSelectionChange - Callback when row selection changes.\n * @param props.fullWidth - Whether table uses full width.\n * @returns The rendered Table component.\n *\n * @example\n * ```tsx\n * <Table columns={columns} data={rows} enableSorting showCheckbox />\n * ```\n */\nexport function Table<T extends { id: Key }>({\n  children,\n  columns: columnsProp,\n  data: dataProp,\n  showCheckbox,\n  rowSelection: rowSelectionProp,\n  kebabPosition = 'right',\n  persistRowKebabMenu = true,\n  persistHeaderKebabMenu = true,\n  persistNumerals = false,\n  enableSorting = true,\n  enableColumnReordering = true,\n  enableRowActions = true,\n  manualSorting = false,\n  onSortChange,\n  onColumnReorderChange,\n  onRowSelectionChange,\n  fullWidth = false,\n  ...rest\n}: TableProps<T>) {\n  const {\n    items: data,\n    moveAfter,\n    moveBefore,\n  } = useListData({\n    initialItems: dataProp,\n  });\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>(\n    rowSelectionProp ?? {},\n  );\n  const [columnSelection, setColumnSelection] = useState<string | null>(null);\n  const [rowPinning, setRowPinning] = useState<RowPinningState>({\n    top: [],\n    bottom: [],\n  });\n\n  /**\n   * moveUpSelectedRows moves the selected rows up in the table.\n   * It finds the first selected row, determines its index,\n   * and moves it before the previous row if it exists.\n   */\n  const moveRowsUp = useCallback(\n    (row: Row<T>, rows: Row<T>[]) => {\n      const isSelected = rowSelection[row.id];\n      const rowsToMove = isSelected\n        ? rows.filter(({ id }) => rowSelection[id])\n        : [row];\n      const firstRowToMove = rowsToMove[0];\n\n      if (!firstRowToMove || firstRowToMove.index === 0) {\n        return;\n      }\n\n      const prevRowId = rows[firstRowToMove.index - 1]?.id;\n\n      if (!prevRowId) {\n        return;\n      }\n\n      moveBefore(\n        prevRowId,\n        rowsToMove.map(({ id }) => id),\n      );\n    },\n    [rowSelection, moveBefore],\n  );\n\n  /**\n   * moveDownRows moves the selected or active rows down in the table.\n   * It finds the last selected row, determines its index,\n   * and moves it after the next row if it exists.\n   */\n  const moveRowsDown = useCallback(\n    (row: Row<T>, rows: Row<T>[]) => {\n      const isSelected = rowSelection[row.id];\n      const rowsToMove = isSelected\n        ? rows.filter(({ id }) => rowSelection[id])\n        : [row];\n      const lastRowToMove = rowsToMove[rowsToMove.length - 1];\n\n      if (!lastRowToMove || lastRowToMove.index === rows.length - 1) {\n        return;\n      }\n\n      const nextRowId = rows[lastRowToMove.index + 1]?.id;\n\n      if (!nextRowId) {\n        return;\n      }\n\n      moveAfter(\n        nextRowId,\n        rowsToMove.map(({ id }) => id),\n      );\n    },\n    [rowSelection, moveAfter],\n  );\n\n  /**\n   * actionColumn defines the actions available in the kebab menu for each row.\n   * It includes options to move the row up or down in the table.\n   */\n  // biome-ignore lint/correctness/useExhaustiveDependencies: can of worms to fix ticket added\n  const actionColumn: NonNullable<typeof columnsProp>[number] = useMemo(\n    () => ({\n      id: 'kebab',\n      cell: ({ row }) => (\n        <RowActionsMenu\n          moveRowsUp={moveRowsUp}\n          moveRowsDown={moveRowsDown}\n          row={row}\n          rows={getRowModel().rows}\n        />\n      ),\n      size: META_COLUMN_WIDTH,\n    }),\n    [moveRowsUp, moveRowsDown],\n  );\n\n  /**\n   * columns defines the structure of the table.\n   * It includes the action column and optionally a checkbox column.\n   * The kebab menu position can be set to 'left' or 'right'.\n   * If showCheckbox is true, a checkbox column is added.\n   */\n  const columns = useMemo<NonNullable<typeof columnsProp>>(\n    () => [\n      {\n        id: 'numeral',\n        cell: ({ row }) =>\n          row.getIsPinned() ? (\n            <Icon size='small'>\n              <Pin />\n            </Icon>\n          ) : (\n            <span data-testid='numeral'>{row.index + 1}</span>\n          ),\n        size: META_COLUMN_WIDTH,\n      },\n      ...(showCheckbox\n        ? ([\n            {\n              id: 'selection',\n              header: ({ table }) => (\n                <Checkbox\n                  isSelected={table.getIsAllRowsSelected()}\n                  isIndeterminate={table.getIsSomeRowsSelected()}\n                  onChange={table.toggleAllRowsSelected}\n                />\n              ),\n              cell: ({ row }) => (\n                <Checkbox\n                  isSelected={row.getIsSelected()}\n                  isIndeterminate={row.getIsSomeSelected()}\n                  onChange={row.toggleSelected}\n                />\n              ),\n              size: META_COLUMN_WIDTH,\n            },\n          ] satisfies NonNullable<typeof columnsProp>)\n        : []),\n      ...(kebabPosition === 'left' ? [actionColumn] : []),\n      ...(columnsProp ?? []),\n      ...(kebabPosition === 'right' ? [actionColumn] : []),\n    ],\n    [showCheckbox, columnsProp, kebabPosition, actionColumn],\n  );\n\n  const handleSortChange = (\n    columnId: string,\n    sortDirection: 'asc' | 'desc' | null,\n  ) => {\n    onSortChange?.(columnId, sortDirection);\n  };\n\n  const handleColumnReordering = (index: number) => {\n    onColumnReorderChange?.(index);\n  };\n\n  const handleRowSelectionChange = useCallback(\n    (\n      updaterOrValue:\n        | RowSelectionState\n        | ((old: RowSelectionState) => RowSelectionState),\n    ) => {\n      setRowSelection(updaterOrValue);\n      onRowSelectionChange?.(updaterOrValue);\n    },\n    [onRowSelectionChange],\n  );\n\n  const {\n    getHeaderGroups,\n    getTopRows,\n    getCenterRows,\n    getBottomRows,\n    getRowModel,\n    setColumnOrder,\n  } = useReactTable<T>({\n    data,\n    columns,\n    enableSorting,\n    initialState: {\n      columnOrder: columns.map(({ id }) => id ?? ''),\n      rowSelection: rowSelectionProp ?? {},\n    },\n    state: {\n      rowSelection,\n      rowPinning,\n    },\n    getRowId: (row, index) => {\n      // Use the index as the row ID if no unique identifier is available\n      return row.id ? row.id.toString() : index.toString();\n    },\n    enableRowSelection: true,\n    enableRowPinning: true,\n    manualSorting: manualSorting,\n    onRowSelectionChange: handleRowSelectionChange,\n    onRowPinningChange: setRowPinning,\n    getCoreRowModel: getCoreRowModel<T>(),\n    getSortedRowModel: getSortedRowModel<T>(),\n  });\n\n  const moveColumnLeft = useCallback(\n    (oldIndex: number) => {\n      setColumnOrder((order) => {\n        const newColumnOrder = [...order];\n        const newIndex = oldIndex - 1;\n\n        if (newIndex < 0) {\n          return order;\n        }\n\n        [newColumnOrder[oldIndex], newColumnOrder[newIndex]] = [\n          newColumnOrder[newIndex] as string,\n          newColumnOrder[oldIndex] as string,\n        ];\n\n        return newColumnOrder;\n      });\n    },\n    [setColumnOrder],\n  );\n\n  const moveColumnRight = useCallback(\n    (oldIndex: number) => {\n      setColumnOrder((order) => {\n        const newColumnOrder = [...order];\n        const newIndex = oldIndex + 1;\n\n        if (newIndex >= order.length) {\n          return order;\n        }\n\n        [newColumnOrder[oldIndex], newColumnOrder[newIndex]] = [\n          newColumnOrder[newIndex] as string,\n          newColumnOrder[oldIndex] as string,\n        ];\n\n        return newColumnOrder;\n      });\n    },\n    [setColumnOrder],\n  );\n\n  const className = clsx(fullWidth && 'w-full table-fixed', rest.className);\n\n  if (children) {\n    return (\n      <table {...rest} className={className}>\n        {children}\n      </table>\n    );\n  }\n\n  return (\n    <TableContext.Provider\n      value={{\n        persistRowKebabMenu,\n        persistHeaderKebabMenu,\n        persistNumerals,\n        enableSorting,\n        enableColumnReordering,\n        enableRowActions,\n        columnSelection,\n        setColumnSelection,\n        moveColumnLeft,\n        moveColumnRight,\n        manualSorting,\n        handleSortChange,\n        handleColumnReordering,\n      }}\n    >\n      <table {...rest} className={className}>\n        <TableHeader\n          headerGroups={getHeaderGroups()}\n          columnSelection={columnSelection}\n        />\n        <TableBody\n          rows={[...getTopRows(), ...getCenterRows(), ...getBottomRows()]}\n        />\n      </table>\n    </TableContext.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["actionColumn: NonNullable<typeof columnsProp>[number]","Pin"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport Kebab from '@accelint/icons/kebab';\nimport Pin from '@accelint/icons/pin';\nimport { useListData } from '@react-stately/data';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type OnChangeFn,\n  type PaginationState,\n  type Row,\n  type RowPinningState,\n  type RowSelectionState,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Icon } from '../icon';\nimport { Menu } from '../menu';\nimport { MenuItem } from '../menu/item';\nimport { MenuSeparator } from '../menu/separator';\nimport { MenuTrigger } from '../menu/trigger';\nimport { TableBody } from './body';\nimport { TableContext } from './context';\nimport { TableHeader } from './header';\nimport styles from './styles.module.css';\nimport type { Key } from '@react-types/shared';\nimport type { TableProps } from './types';\n\n// This width is for columns in the table that provide features:\n// - Row count\n// - Row actions kebab\n// - Row selection (checkbox)\n// These columns should not need to grow with table width\nconst META_COLUMN_WIDTH = 32;\n\ntype RowActionsMenuProps<T> = {\n  row: Row<T>;\n  rows: Row<T>[];\n  moveRowsDown: (row: Row<T>, rows: Row<T>[]) => void;\n  moveRowsUp: (row: Row<T>, rows: Row<T>[]) => void;\n};\n\nfunction RowActionsMenu<T>({\n  moveRowsDown,\n  moveRowsUp,\n  row,\n  rows,\n}: RowActionsMenuProps<T>) {\n  const { enableRowActions, persistRowKebabMenu } = useContext(TableContext);\n  const isPinned = !!row.getIsPinned();\n  const hideRowKebab = !persistRowKebabMenu;\n\n  return (\n    enableRowActions && (\n      <div className={clsx(hideRowKebab && styles.hideInRow)}>\n        <MenuTrigger>\n          <Button variant='icon' aria-label={`row ${row.index + 1} actions`}>\n            <Icon>\n              <Kebab />\n            </Icon>\n          </Button>\n          <Menu>\n            <MenuItem onAction={() => row.pin(isPinned ? false : 'top')}>\n              {isPinned ? 'Unpin' : 'Pin'}\n            </MenuItem>\n            <MenuSeparator />\n            <MenuItem\n              onAction={() => moveRowsUp(row, rows)}\n              isDisabled={isPinned || row.index === 0}\n            >\n              Move Up\n            </MenuItem>\n            <MenuItem\n              onAction={() => moveRowsDown(row, rows)}\n              isDisabled={isPinned || row.index === rows.length - 1}\n            >\n              Move Down\n            </MenuItem>\n          </Menu>\n        </MenuTrigger>\n      </div>\n    )\n  );\n}\n\n/**\n * Table - Configurable data table with sorting, selection, and row actions\n *\n * Supports data-driven mode with TanStack column definitions or static mode with subcomponents.\n *\n * @param props - {@link TableProps}\n * @param props.children - Custom children for static mode.\n * @param props.columns - Column definitions for data-driven mode.\n * @param props.data - Data array for data-driven mode.\n * @param props.showCheckbox - Whether to show selection checkboxes.\n * @param props.rowSelection - Initial row selection state.\n * @param props.kebabPosition - Position of row action menu.\n * @param props.persistRowKebabMenu - Keep row kebab menu visible.\n * @param props.persistHeaderKebabMenu - Keep header kebab menu visible.\n * @param props.persistNumerals - Keep row numerals visible.\n * @param props.enableSorting - Enable column sorting.\n * @param props.enableColumnReordering - Enable column reordering.\n * @param props.enableRowActions - Enable row action menu.\n * @param props.manualSorting - Use server-side sorting.\n * @param props.onSortChange - Callback when sort changes.\n * @param props.onColumnReorderChange - Callback when column order changes.\n * @param props.onRowSelectionChange - Callback when row selection changes.\n * @param props.fullWidth - Whether table uses full width.\n * @returns The rendered Table component.\n *\n * @example\n * ```tsx\n * <Table columns={columns} data={rows} enableSorting showCheckbox />\n * ```\n */\nexport function Table<T extends { id: Key }>({\n  children,\n  columns: columnsProp,\n  data: dataProp,\n  showCheckbox,\n  rowSelection: rowSelectionProp,\n  kebabPosition = 'right',\n  persistRowKebabMenu = true,\n  persistHeaderKebabMenu = true,\n  persistNumerals = false,\n  enableSorting = true,\n  enableColumnReordering = true,\n  enableRowActions = true,\n  manualSorting = false,\n  onSortChange,\n  onColumnReorderChange,\n  onRowSelectionChange,\n  fullWidth = false,\n  pageSize,\n  page: pageProp,\n  defaultPage = 1,\n  onPageChange,\n  ...rest\n}: TableProps<T>) {\n  const {\n    items: data,\n    moveAfter,\n    moveBefore,\n  } = useListData({\n    initialItems: dataProp,\n  });\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>(\n    rowSelectionProp ?? {},\n  );\n  const [columnSelection, setColumnSelection] = useState<string | null>(null);\n  const [rowPinning, setRowPinning] = useState<RowPinningState>({\n    top: [],\n    bottom: [],\n  });\n\n  const [currentPage, setCurrentPage] = useControlledState(\n    pageProp,\n    defaultPage,\n    onPageChange,\n  );\n\n  const pagination = useMemo(\n    () =>\n      pageSize != null ? { pageIndex: currentPage - 1, pageSize } : undefined,\n    [currentPage, pageSize],\n  );\n\n  const handlePaginationChange = useCallback<OnChangeFn<PaginationState>>(\n    (updater) => {\n      if (pagination == null) {\n        return;\n      }\n      const next =\n        typeof updater === 'function' ? updater(pagination) : updater;\n      setCurrentPage(next.pageIndex + 1);\n    },\n    [pagination, setCurrentPage],\n  );\n\n  /**\n   * moveUpSelectedRows moves the selected rows up in the table.\n   * It finds the first selected row, determines its index,\n   * and moves it before the previous row if it exists.\n   */\n  const moveRowsUp = useCallback(\n    (row: Row<T>, rows: Row<T>[]) => {\n      const isSelected = rowSelection[row.id];\n      const rowsToMove = isSelected\n        ? rows.filter(({ id }) => rowSelection[id])\n        : [row];\n      const firstRowToMove = rowsToMove[0];\n\n      if (!firstRowToMove || firstRowToMove.index === 0) {\n        return;\n      }\n\n      const prevRowId = rows[firstRowToMove.index - 1]?.id;\n\n      if (!prevRowId) {\n        return;\n      }\n\n      moveBefore(\n        prevRowId,\n        rowsToMove.map(({ id }) => id),\n      );\n    },\n    [rowSelection, moveBefore],\n  );\n\n  /**\n   * moveDownRows moves the selected or active rows down in the table.\n   * It finds the last selected row, determines its index,\n   * and moves it after the next row if it exists.\n   */\n  const moveRowsDown = useCallback(\n    (row: Row<T>, rows: Row<T>[]) => {\n      const isSelected = rowSelection[row.id];\n      const rowsToMove = isSelected\n        ? rows.filter(({ id }) => rowSelection[id])\n        : [row];\n      const lastRowToMove = rowsToMove[rowsToMove.length - 1];\n\n      if (!lastRowToMove || lastRowToMove.index === rows.length - 1) {\n        return;\n      }\n\n      const nextRowId = rows[lastRowToMove.index + 1]?.id;\n\n      if (!nextRowId) {\n        return;\n      }\n\n      moveAfter(\n        nextRowId,\n        rowsToMove.map(({ id }) => id),\n      );\n    },\n    [rowSelection, moveAfter],\n  );\n\n  /**\n   * actionColumn defines the actions available in the kebab menu for each row.\n   * It includes options to move the row up or down in the table.\n   */\n  // biome-ignore lint/correctness/useExhaustiveDependencies: can of worms to fix ticket added\n  const actionColumn: NonNullable<typeof columnsProp>[number] = useMemo(\n    () => ({\n      id: 'kebab',\n      cell: ({ row }) => (\n        <RowActionsMenu\n          moveRowsUp={moveRowsUp}\n          moveRowsDown={moveRowsDown}\n          row={row}\n          rows={getRowModel().rows}\n        />\n      ),\n      size: META_COLUMN_WIDTH,\n    }),\n    [moveRowsUp, moveRowsDown],\n  );\n\n  /**\n   * columns defines the structure of the table.\n   * It includes the action column and optionally a checkbox column.\n   * The kebab menu position can be set to 'left' or 'right'.\n   * If showCheckbox is true, a checkbox column is added.\n   */\n  const columns = useMemo<NonNullable<typeof columnsProp>>(\n    () => [\n      {\n        id: 'numeral',\n        cell: ({ row }) =>\n          row.getIsPinned() ? (\n            <Icon size='small'>\n              <Pin />\n            </Icon>\n          ) : (\n            <span data-testid='numeral'>{row.index + 1}</span>\n          ),\n        size: META_COLUMN_WIDTH,\n      },\n      ...(showCheckbox\n        ? ([\n            {\n              id: 'selection',\n              header: ({ table }) => (\n                <Checkbox\n                  isSelected={table.getIsAllRowsSelected()}\n                  isIndeterminate={table.getIsSomeRowsSelected()}\n                  onChange={table.toggleAllRowsSelected}\n                />\n              ),\n              cell: ({ row }) => (\n                <Checkbox\n                  isSelected={row.getIsSelected()}\n                  isIndeterminate={row.getIsSomeSelected()}\n                  onChange={row.toggleSelected}\n                />\n              ),\n              size: META_COLUMN_WIDTH,\n            },\n          ] satisfies NonNullable<typeof columnsProp>)\n        : []),\n      ...(kebabPosition === 'left' ? [actionColumn] : []),\n      ...(columnsProp ?? []),\n      ...(kebabPosition === 'right' ? [actionColumn] : []),\n    ],\n    [showCheckbox, columnsProp, kebabPosition, actionColumn],\n  );\n\n  const handleSortChange = (\n    columnId: string,\n    sortDirection: 'asc' | 'desc' | null,\n  ) => {\n    onSortChange?.(columnId, sortDirection);\n  };\n\n  const handleColumnReordering = (index: number) => {\n    onColumnReorderChange?.(index);\n  };\n\n  const handleRowSelectionChange = useCallback(\n    (\n      updaterOrValue:\n        | RowSelectionState\n        | ((old: RowSelectionState) => RowSelectionState),\n    ) => {\n      setRowSelection(updaterOrValue);\n      onRowSelectionChange?.(updaterOrValue);\n    },\n    [onRowSelectionChange],\n  );\n\n  const {\n    getHeaderGroups,\n    getTopRows,\n    getCenterRows,\n    getBottomRows,\n    getRowModel,\n    setColumnOrder,\n  } = useReactTable<T>({\n    data,\n    columns,\n    enableSorting,\n    initialState: {\n      columnOrder: columns.map(({ id }) => id ?? ''),\n      rowSelection: rowSelectionProp ?? {},\n    },\n    state: {\n      rowSelection,\n      rowPinning,\n      ...(pagination != null && { pagination }),\n    },\n    getRowId: (row, index) => {\n      // Use the index as the row ID if no unique identifier is available\n      return row.id ? row.id.toString() : index.toString();\n    },\n    enableRowSelection: true,\n    enableRowPinning: true,\n    manualSorting: manualSorting,\n    onRowSelectionChange: handleRowSelectionChange,\n    onRowPinningChange: setRowPinning,\n    onPaginationChange: handlePaginationChange,\n    getCoreRowModel: getCoreRowModel<T>(),\n    getSortedRowModel: getSortedRowModel<T>(),\n    ...(pageSize != null && {\n      getPaginationRowModel: getPaginationRowModel<T>(),\n    }),\n  });\n\n  const moveColumnLeft = useCallback(\n    (oldIndex: number) => {\n      setColumnOrder((order) => {\n        const newColumnOrder = [...order];\n        const newIndex = oldIndex - 1;\n\n        if (newIndex < 0) {\n          return order;\n        }\n\n        [newColumnOrder[oldIndex], newColumnOrder[newIndex]] = [\n          newColumnOrder[newIndex] as string,\n          newColumnOrder[oldIndex] as string,\n        ];\n\n        return newColumnOrder;\n      });\n    },\n    [setColumnOrder],\n  );\n\n  const moveColumnRight = useCallback(\n    (oldIndex: number) => {\n      setColumnOrder((order) => {\n        const newColumnOrder = [...order];\n        const newIndex = oldIndex + 1;\n\n        if (newIndex >= order.length) {\n          return order;\n        }\n\n        [newColumnOrder[oldIndex], newColumnOrder[newIndex]] = [\n          newColumnOrder[newIndex] as string,\n          newColumnOrder[oldIndex] as string,\n        ];\n\n        return newColumnOrder;\n      });\n    },\n    [setColumnOrder],\n  );\n\n  const className = clsx(fullWidth && 'w-full table-fixed', rest.className);\n\n  if (children) {\n    return (\n      <table {...rest} className={className}>\n        {children}\n      </table>\n    );\n  }\n\n  return (\n    <TableContext.Provider\n      value={{\n        persistRowKebabMenu,\n        persistHeaderKebabMenu,\n        persistNumerals,\n        enableSorting,\n        enableColumnReordering,\n        enableRowActions,\n        columnSelection,\n        setColumnSelection,\n        moveColumnLeft,\n        moveColumnRight,\n        manualSorting,\n        handleSortChange,\n        handleColumnReordering,\n      }}\n    >\n      <table {...rest} className={className}>\n        <TableHeader\n          headerGroups={getHeaderGroups()}\n          columnSelection={columnSelection}\n        />\n        <TableBody\n          rows={[...getTopRows(), ...getCenterRows(), ...getBottomRows()]}\n        />\n      </table>\n    </TableContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAM,oBAAoB;AAS1B,SAAS,eAAkB,EACzB,cACA,YACA,KACA,QACyB;CACzB,MAAM,EAAE,kBAAkB,wBAAwB,WAAW,aAAa;CAC1E,MAAM,WAAW,CAAC,CAAC,IAAI,aAAa;AAGpC,QACE,oBACE,oBAAC;EAAI,WAAW,KAJC,CAAC,uBAImB,OAAO,UAAU;YACpD,qBAAC,0BACC,oBAAC;GAAO,SAAQ;GAAO,cAAY,OAAO,IAAI,QAAQ,EAAE;aACtD,oBAAC,kBACC,oBAAC,UAAQ,GACJ;IACA,EACT,qBAAC;GACC,oBAAC;IAAS,gBAAgB,IAAI,IAAI,WAAW,QAAQ,MAAM;cACxD,WAAW,UAAU;KACb;GACX,oBAAC,kBAAgB;GACjB,oBAAC;IACC,gBAAgB,WAAW,KAAK,KAAK;IACrC,YAAY,YAAY,IAAI,UAAU;cACvC;KAEU;GACX,oBAAC;IACC,gBAAgB,aAAa,KAAK,KAAK;IACvC,YAAY,YAAY,IAAI,UAAU,KAAK,SAAS;cACrD;KAEU;MACN,IACK;GACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCZ,SAAgB,MAA6B,EAC3C,UACA,SAAS,aACT,MAAM,UACN,cACA,cAAc,kBACd,gBAAgB,SAChB,sBAAsB,MACtB,yBAAyB,MACzB,kBAAkB,OAClB,gBAAgB,MAChB,yBAAyB,MACzB,mBAAmB,MACnB,gBAAgB,OAChB,cACA,uBACA,sBACA,YAAY,OACZ,UACA,MAAM,UACN,cAAc,GACd,cACA,GAAG,QACa;CAChB,MAAM,EACJ,OAAO,MACP,WACA,eACE,YAAY,EACd,cAAc,UACf,CAAC;CACF,MAAM,CAAC,cAAc,mBAAmB,SACtC,oBAAoB,EAAE,CACvB;CACD,MAAM,CAAC,iBAAiB,sBAAsB,SAAwB,KAAK;CAC3E,MAAM,CAAC,YAAY,iBAAiB,SAA0B;EAC5D,KAAK,EAAE;EACP,QAAQ,EAAE;EACX,CAAC;CAEF,MAAM,CAAC,aAAa,kBAAkB,mBACpC,UACA,aACA,aACD;CAED,MAAM,aAAa,cAEf,YAAY,OAAO;EAAE,WAAW,cAAc;EAAG;EAAU,GAAG,QAChE,CAAC,aAAa,SAAS,CACxB;CAED,MAAM,yBAAyB,aAC5B,YAAY;AACX,MAAI,cAAc,KAChB;AAIF,kBADE,OAAO,YAAY,aAAa,QAAQ,WAAW,GAAG,SACpC,YAAY,EAAE;IAEpC,CAAC,YAAY,eAAe,CAC7B;;;;;;CAOD,MAAM,aAAa,aAChB,KAAa,SAAmB;EAE/B,MAAM,aADa,aAAa,IAAI,MAEhC,KAAK,QAAQ,EAAE,SAAS,aAAa,IAAI,GACzC,CAAC,IAAI;EACT,MAAM,iBAAiB,WAAW;AAElC,MAAI,CAAC,kBAAkB,eAAe,UAAU,EAC9C;EAGF,MAAM,YAAY,KAAK,eAAe,QAAQ,IAAI;AAElD,MAAI,CAAC,UACH;AAGF,aACE,WACA,WAAW,KAAK,EAAE,SAAS,GAAG,CAC/B;IAEH,CAAC,cAAc,WAAW,CAC3B;;;;;;CAOD,MAAM,eAAe,aAClB,KAAa,SAAmB;EAE/B,MAAM,aADa,aAAa,IAAI,MAEhC,KAAK,QAAQ,EAAE,SAAS,aAAa,IAAI,GACzC,CAAC,IAAI;EACT,MAAM,gBAAgB,WAAW,WAAW,SAAS;AAErD,MAAI,CAAC,iBAAiB,cAAc,UAAU,KAAK,SAAS,EAC1D;EAGF,MAAM,YAAY,KAAK,cAAc,QAAQ,IAAI;AAEjD,MAAI,CAAC,UACH;AAGF,YACE,WACA,WAAW,KAAK,EAAE,SAAS,GAAG,CAC/B;IAEH,CAAC,cAAc,UAAU,CAC1B;;;;;CAOD,MAAMA,eAAwD,eACrD;EACL,IAAI;EACJ,OAAO,EAAE,UACP,oBAAC;GACa;GACE;GACT;GACL,MAAM,aAAa,CAAC;IACpB;EAEJ,MAAM;EACP,GACD,CAAC,YAAY,aAAa,CAC3B;;;;;;;CAQD,MAAM,UAAU,cACR;EACJ;GACE,IAAI;GACJ,OAAO,EAAE,UACP,IAAI,aAAa,GACf,oBAAC;IAAK,MAAK;cACT,oBAACC,YAAM;KACF,GAEP,oBAAC;IAAK,eAAY;cAAW,IAAI,QAAQ;KAAS;GAEtD,MAAM;GACP;EACD,GAAI,eACC,CACC;GACE,IAAI;GACJ,SAAS,EAAE,YACT,oBAAC;IACC,YAAY,MAAM,sBAAsB;IACxC,iBAAiB,MAAM,uBAAuB;IAC9C,UAAU,MAAM;KAChB;GAEJ,OAAO,EAAE,UACP,oBAAC;IACC,YAAY,IAAI,eAAe;IAC/B,iBAAiB,IAAI,mBAAmB;IACxC,UAAU,IAAI;KACd;GAEJ,MAAM;GACP,CACF,GACD,EAAE;EACN,GAAI,kBAAkB,SAAS,CAAC,aAAa,GAAG,EAAE;EAClD,GAAI,eAAe,EAAE;EACrB,GAAI,kBAAkB,UAAU,CAAC,aAAa,GAAG,EAAE;EACpD,EACD;EAAC;EAAc;EAAa;EAAe;EAAa,CACzD;CAED,MAAM,oBACJ,UACA,kBACG;AACH,iBAAe,UAAU,cAAc;;CAGzC,MAAM,0BAA0B,UAAkB;AAChD,0BAAwB,MAAM;;CAGhC,MAAM,2BAA2B,aAE7B,mBAGG;AACH,kBAAgB,eAAe;AAC/B,yBAAuB,eAAe;IAExC,CAAC,qBAAqB,CACvB;CAED,MAAM,EACJ,iBACA,YACA,eACA,eACA,aACA,mBACE,cAAiB;EACnB;EACA;EACA;EACA,cAAc;GACZ,aAAa,QAAQ,KAAK,EAAE,SAAS,MAAM,GAAG;GAC9C,cAAc,oBAAoB,EAAE;GACrC;EACD,OAAO;GACL;GACA;GACA,GAAI,cAAc,QAAQ,EAAE,YAAY;GACzC;EACD,WAAW,KAAK,UAAU;AAExB,UAAO,IAAI,KAAK,IAAI,GAAG,UAAU,GAAG,MAAM,UAAU;;EAEtD,oBAAoB;EACpB,kBAAkB;EACH;EACf,sBAAsB;EACtB,oBAAoB;EACpB,oBAAoB;EACpB,iBAAiB,iBAAoB;EACrC,mBAAmB,mBAAsB;EACzC,GAAI,YAAY,QAAQ,EACtB,uBAAuB,uBAA0B,EAClD;EACF,CAAC;CAEF,MAAM,iBAAiB,aACpB,aAAqB;AACpB,kBAAgB,UAAU;GACxB,MAAM,iBAAiB,CAAC,GAAG,MAAM;GACjC,MAAM,WAAW,WAAW;AAE5B,OAAI,WAAW,EACb,QAAO;AAGT,IAAC,eAAe,WAAW,eAAe,aAAa,CACrD,eAAe,WACf,eAAe,UAChB;AAED,UAAO;IACP;IAEJ,CAAC,eAAe,CACjB;CAED,MAAM,kBAAkB,aACrB,aAAqB;AACpB,kBAAgB,UAAU;GACxB,MAAM,iBAAiB,CAAC,GAAG,MAAM;GACjC,MAAM,WAAW,WAAW;AAE5B,OAAI,YAAY,MAAM,OACpB,QAAO;AAGT,IAAC,eAAe,WAAW,eAAe,aAAa,CACrD,eAAe,WACf,eAAe,UAChB;AAED,UAAO;IACP;IAEJ,CAAC,eAAe,CACjB;CAED,MAAM,YAAY,KAAK,aAAa,sBAAsB,KAAK,UAAU;AAEzE,KAAI,SACF,QACE,oBAAC;EAAM,GAAI;EAAiB;EACzB;GACK;AAIZ,QACE,oBAAC,aAAa;EACZ,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;YAED,qBAAC;GAAM,GAAI;GAAiB;cAC1B,oBAAC;IACC,cAAc,iBAAiB;IACd;KACjB,EACF,oBAAC,aACC,MAAM;IAAC,GAAG,YAAY;IAAE,GAAG,eAAe;IAAE,GAAG,eAAe;IAAC,GAC/D;IACI;GACc"}

package/dist/components/table/row.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableRowProps } from "./types.js";
-import * as react_jsx_runtime170 from "react/jsx-runtime";
+import * as react_jsx_runtime213 from "react/jsx-runtime";
 
 //#region src/components/table/row.d.ts
 
@@ -44,7 +44,7 @@ declare function TableRow<T>({
   className,
   row,
   ...rest
-}: TableRowProps<T>): react_jsx_runtime170.JSX.Element;
+}: TableRowProps<T>): react_jsx_runtime213.JSX.Element;
 //#endregion
 export { TableRow };
 //# sourceMappingURL=row.d.ts.map

package/dist/components/table/types.d.ts

@@ -123,6 +123,23 @@ type ExtendedTableProps<T extends {
    * @default false
    */
   fullWidth?: boolean;
+  /**
+   * Number of rows per page. Enables built-in pagination when set.
+   */
+  pageSize?: number;
+  /**
+   * Controlled current page (1-indexed).
+   */
+  page?: number;
+  /**
+   * Uncontrolled default page (1-indexed).
+   * @default 1
+   */
+  defaultPage?: number;
+  /**
+   * Callback when the page changes.
+   */
+  onPageChange?: (page: number) => void;
 };
 /**
  * Props for the Table component.

package/dist/components/tabs/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { TabProps as TabProps$1, TabsProps as TabsProps$1 } from "./types.js";
 import "client-only";
-import * as react41 from "react";
+import * as react52 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime171 from "react/jsx-runtime";
+import * as react_jsx_runtime226 from "react/jsx-runtime";
 
 //#region src/components/tabs/context.d.ts
 /** Context for sharing props across Tabs components */
-declare const TabsContext: react41.Context<ContextValue<TabsProps$1, HTMLDivElement>>;
+declare const TabsContext: react52.Context<ContextValue<TabsProps$1, HTMLDivElement>>;
 /**
  * Sets default props for all Tabs components within.
  *
@@ -42,12 +42,12 @@ declare const TabsContext: react41.Context<ContextValue<TabsProps$1, HTMLDivElem
 declare function TabsProvider({
   children,
   ...props
-}: ProviderProps<TabsProps$1>): react_jsx_runtime171.JSX.Element;
-declare const TabContext: react41.Context<ContextValue<TabProps$1, Element>>;
+}: ProviderProps<TabsProps$1>): react_jsx_runtime226.JSX.Element;
+declare const TabContext: react52.Context<ContextValue<TabProps$1, Element>>;
 declare function TabProvider({
   children,
   ...props
-}: ProviderProps<TabProps$1>): react_jsx_runtime171.JSX.Element;
+}: ProviderProps<TabProps$1>): react_jsx_runtime226.JSX.Element;
 //#endregion
 export { TabContext, TabProvider, TabsContext, TabsProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/tabs/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TabsProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime173 from "react/jsx-runtime";
+import * as react_jsx_runtime228 from "react/jsx-runtime";
 
 //#region src/components/tabs/index.d.ts
 
@@ -44,7 +44,7 @@ import * as react_jsx_runtime173 from "react/jsx-runtime";
 declare function Tabs({
   ref,
   ...props
-}: TabsProps): react_jsx_runtime173.JSX.Element;
+}: TabsProps): react_jsx_runtime228.JSX.Element;
 //#endregion
 export { Tabs };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/list.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { TabListProps } from "react-aria-components";
-import * as react_jsx_runtime174 from "react/jsx-runtime";
+import * as react_jsx_runtime225 from "react/jsx-runtime";
 
 //#region src/components/tabs/list.d.ts
 
@@ -40,7 +40,7 @@ declare function TabList<T extends object>({
   children,
   className,
   ...rest
-}: TabListProps<T>): react_jsx_runtime174.JSX.Element;
+}: TabListProps<T>): react_jsx_runtime225.JSX.Element;
 //#endregion
 export { TabList };
 //# sourceMappingURL=list.d.ts.map

package/dist/components/tabs/panel.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { TabPanelProps } from "react-aria-components";
-import * as react_jsx_runtime175 from "react/jsx-runtime";
+import * as react_jsx_runtime88 from "react/jsx-runtime";
 
 //#region src/components/tabs/panel.d.ts
 
@@ -41,7 +41,7 @@ declare function TabPanel({
   children,
   className,
   ...rest
-}: TabPanelProps): react_jsx_runtime175.JSX.Element;
+}: TabPanelProps): react_jsx_runtime88.JSX.Element;
 //#endregion
 export { TabPanel };
 //# sourceMappingURL=panel.d.ts.map

package/dist/components/tabs/tab.d.ts

@@ -12,7 +12,7 @@
 
 import { TabProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime176 from "react/jsx-runtime";
+import * as react_jsx_runtime229 from "react/jsx-runtime";
 
 //#region src/components/tabs/tab.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime176 from "react/jsx-runtime";
 declare function Tab({
   ref,
   ...props
-}: TabProps): react_jsx_runtime176.JSX.Element;
+}: TabProps): react_jsx_runtime229.JSX.Element;
 //#endregion
 export { Tab };
 //# sourceMappingURL=tab.d.ts.map

package/dist/components/text-area-field/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { TextAreaFieldProps } from "./types.js";
 import "client-only";
-import * as react47 from "react";
+import * as react54 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime192 from "react/jsx-runtime";
+import * as react_jsx_runtime230 from "react/jsx-runtime";
 
 //#region src/components/text-area-field/context.d.ts
 /** Context for sharing props across TextAreaField components */
-declare const TextAreaFieldContext: react47.Context<ContextValue<TextAreaFieldProps, HTMLDivElement>>;
+declare const TextAreaFieldContext: react54.Context<ContextValue<TextAreaFieldProps, HTMLDivElement>>;
 /**
  * Sets default props for all TextAreaField components within.
  *
@@ -42,7 +42,7 @@ declare const TextAreaFieldContext: react47.Context<ContextValue<TextAreaFieldPr
 declare function TextAreaFieldProvider({
   children,
   ...props
-}: ProviderProps<TextAreaFieldProps>): react_jsx_runtime192.JSX.Element;
+}: ProviderProps<TextAreaFieldProps>): react_jsx_runtime230.JSX.Element;
 //#endregion
 export { TextAreaFieldContext, TextAreaFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/text-area-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TextAreaFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime204 from "react/jsx-runtime";
+import * as react_jsx_runtime231 from "react/jsx-runtime";
 
 //#region src/components/text-area-field/index.d.ts
 
@@ -44,7 +44,7 @@ import * as react_jsx_runtime204 from "react/jsx-runtime";
 declare function TextAreaField({
   ref,
   ...props
-}: TextAreaFieldProps): react_jsx_runtime204.JSX.Element;
+}: TextAreaFieldProps): react_jsx_runtime231.JSX.Element;
 //#endregion
 export { TextAreaField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/text-field/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { TextFieldProps as TextFieldProps$1 } from "./types.js";
 import "client-only";
-import * as react18 from "react";
+import * as react56 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime66 from "react/jsx-runtime";
+import * as react_jsx_runtime237 from "react/jsx-runtime";
 
 //#region src/components/text-field/context.d.ts
 /** Context for sharing props across TextField components */
-declare const TextFieldContext: react18.Context<ContextValue<TextFieldProps$1, HTMLDivElement>>;
+declare const TextFieldContext: react56.Context<ContextValue<TextFieldProps$1, HTMLDivElement>>;
 /**
  * Sets default props for all TextField components within.
  *
@@ -42,7 +42,7 @@ declare const TextFieldContext: react18.Context<ContextValue<TextFieldProps$1, H
 declare function TextFieldProvider({
   children,
   ...props
-}: ProviderProps<TextFieldProps$1>): react_jsx_runtime66.JSX.Element;
+}: ProviderProps<TextFieldProps$1>): react_jsx_runtime237.JSX.Element;
 //#endregion
 export { TextFieldContext, TextFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/text-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TextFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime193 from "react/jsx-runtime";
+import * as react_jsx_runtime233 from "react/jsx-runtime";
 
 //#region src/components/text-field/index.d.ts
 
@@ -40,7 +40,7 @@ import * as react_jsx_runtime193 from "react/jsx-runtime";
 declare function TextField({
   ref,
   ...props
-}: TextFieldProps): react_jsx_runtime193.JSX.Element;
+}: TextFieldProps): react_jsx_runtime233.JSX.Element;
 //#endregion
 export { TextField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/time-field/index.d.ts

@@ -13,7 +13,7 @@
 import { TimeFieldProps as TimeFieldProps$1 } from "./types.js";
 import "client-only";
 import { TimeValue } from "react-aria-components";
-import * as react_jsx_runtime191 from "react/jsx-runtime";
+import * as react_jsx_runtime236 from "react/jsx-runtime";
 
 //#region src/components/time-field/index.d.ts
 
@@ -58,7 +58,7 @@ declare function TimeField<T extends TimeValue>({
   isRequired,
   isReadOnly,
   ...rest
-}: TimeFieldProps$1<T>): react_jsx_runtime191.JSX.Element;
+}: TimeFieldProps$1<T>): react_jsx_runtime236.JSX.Element;
 //#endregion
 export { TimeField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/context.d.ts

@@ -12,12 +12,12 @@
 
 import { TooltipTriggerProps } from "./types.js";
 import "client-only";
-import * as react48 from "react";
+import * as react55 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/tooltip/context.d.ts
 /** Context for sharing props across TooltipTrigger components */
-declare const TooltipContext: react48.Context<ContextValue<TooltipTriggerProps, HTMLDivElement>>;
+declare const TooltipContext: react55.Context<ContextValue<TooltipTriggerProps, HTMLDivElement>>;
 //#endregion
 export { TooltipContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/tooltip/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TooltipProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime194 from "react/jsx-runtime";
+import * as react_jsx_runtime238 from "react/jsx-runtime";
 
 //#region src/components/tooltip/index.d.ts
 
@@ -44,7 +44,7 @@ declare function Tooltip({
   offset,
   placement,
   ...props
-}: TooltipProps): react_jsx_runtime194.JSX.Element;
+}: TooltipProps): react_jsx_runtime238.JSX.Element;
 //#endregion
 export { Tooltip };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/styles.module.css

@@ -14,7 +14,42 @@
 
 @layer components.l1 {
   .tooltip {
+    --offset: var(--spacing-xxs);
+    --offset-neg: calc(var(--spacing-xxs) * -1);
+
     @apply fg-primary-bold rounded-small bg-surface-overlay px-s py-xs text-body-xs shadow-elevation-overlay flex items-center justify-center text-center wrap-break-word select-none;
     max-width: 160px;
+
+    @variant motion-safe {
+      transition:
+        transform var(--animation-duration-normal),
+        opacity var(--animation-duration-normal);
+
+      @variant placement-top {
+        --origin: translateY(var(--offset));
+      }
+
+      @variant placement-bottom {
+        --origin: translateY(var(--offset-neg));
+      }
+
+      @variant placement-left {
+        --origin: translateX(var(--offset));
+      }
+
+      @variant placement-right {
+        --origin: translateX(var(--offset-neg));
+      }
+
+      @variant entering {
+        transform: var(--origin);
+        opacity: 0;
+      }
+
+      @variant exiting {
+        transform: var(--origin);
+        opacity: 0;
+      }
+    }
   }
 }

package/dist/components/tooltip/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { TooltipTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime202 from "react/jsx-runtime";
+import * as react_jsx_runtime235 from "react/jsx-runtime";
 
 //#region src/components/tooltip/trigger.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime202 from "react/jsx-runtime";
 declare function TooltipTrigger({
   ref,
   ...props
-}: TooltipTriggerProps): react_jsx_runtime202.JSX.Element;
+}: TooltipTriggerProps): react_jsx_runtime235.JSX.Element;
 //#endregion
 export { TooltipTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/tree/context.d.ts

@@ -12,13 +12,13 @@
 
 import { TreeContextValue, TreeItemContextValue } from "./types.js";
 import "client-only";
-import * as react49 from "react";
+import * as react45 from "react";
 
 //#region src/components/tree/context.d.ts
 /** Context for sharing state across Tree components */
-declare const TreeContext: react49.Context<TreeContextValue>;
+declare const TreeContext: react45.Context<TreeContextValue>;
 /** Context for sharing state within a TreeItem */
-declare const TreeItemContext: react49.Context<TreeItemContextValue>;
+declare const TreeItemContext: react45.Context<TreeItemContextValue>;
 //#endregion
 export { TreeContext, TreeItemContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/tree/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TreeProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime196 from "react/jsx-runtime";
+import * as react_jsx_runtime192 from "react/jsx-runtime";
 
 //#region src/components/tree/index.d.ts
 
@@ -75,7 +75,7 @@ declare function Tree<T>({
   onVisibilityChange,
   onSelectionChange,
   ...rest
-}: TreeProps<T>): react_jsx_runtime196.JSX.Element;
+}: TreeProps<T>): react_jsx_runtime192.JSX.Element;
 //#endregion
 export { Tree };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tree/index.js

@@ -30,6 +30,21 @@ const defaultRenderDropIndicator = (target) => {
 	});
 };
 /**
+* Helper to collect node state keys from cache tree nodes.
+* Reduces cognitive complexity by extracting the iteration logic.
+*/
+function collectNodeKeys(nodes, acc) {
+	for (const node of nodes) {
+		if (node.isDisabled) acc.disabledKeys?.add(node.key);
+		if (node.isExpanded) acc.expandedKeys?.add(node.key);
+		if (node.isSelected) acc.selectedKeys?.add(node.key);
+		if (node.isVisible) acc.visibleKeys?.add(node.key);
+		if (node.isVisibleComputed) acc.visibilityComputedKeys.add(node.key);
+		if (node.isIndeterminate) acc.indeterminateKeys.add(node.key);
+	}
+	return acc;
+}
+/**
 * Tree - Hierarchical tree view with selection, visibility, and drag-and-drop
 *
 * Supports static or dynamic collections with keyboard navigation and accessibility.
@@ -92,23 +107,17 @@ function Tree({ children, className, disabledKeys: disabledKeysProp, dragAndDrop
 	});
 	const cache = useMemo(() => items ? new Cache([...items]) : null, [items]);
 	const nodes = useMemo(() => cache?.getAllNodes(), [cache]);
-	const { disabledKeys, expandedKeys, selectedKeys, visibleKeys, visibilityComputedKeys } = useMemo(() => {
+	const { disabledKeys, expandedKeys, selectedKeys, visibleKeys, visibilityComputedKeys, indeterminateKeys } = useMemo(() => {
 		const acc = {
 			disabledKeys: nodes ? /* @__PURE__ */ new Set() : disabledKeysProp,
 			expandedKeys: nodes ? /* @__PURE__ */ new Set() : expandedKeysProp,
 			selectedKeys: nodes ? /* @__PURE__ */ new Set() : selectedKeysProp,
 			visibleKeys: nodes ? /* @__PURE__ */ new Set() : visibleKeysProp,
-			visibilityComputedKeys: /* @__PURE__ */ new Set()
+			visibilityComputedKeys: /* @__PURE__ */ new Set(),
+			indeterminateKeys: /* @__PURE__ */ new Set()
 		};
 		if (!nodes) return acc;
-		return nodes.reduce((acc$1, { key, isDisabled, isExpanded, isSelected, isVisible, isVisibleComputed }) => {
-			if (isDisabled) acc$1.disabledKeys?.add(key);
-			if (isExpanded) acc$1.expandedKeys?.add(key);
-			if (isSelected) acc$1.selectedKeys?.add(key);
-			if (isVisible) acc$1.visibleKeys?.add(key);
-			if (isVisibleComputed) acc$1.visibilityComputedKeys.add(key);
-			return acc$1;
-		}, acc);
+		return collectNodeKeys(nodes, acc);
 	}, [
 		nodes,
 		disabledKeysProp,
@@ -129,6 +138,7 @@ function Tree({ children, className, disabledKeys: disabledKeysProp, dragAndDrop
 			variant,
 			visibleKeys,
 			visibilityComputedKeys,
+			indeterminateKeys,
 			isStatic: typeof children !== "function",
 			onVisibilityChange: onVisibilityChange ?? (() => void 0)
 		},

package/dist/components/tree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["acc","AriaTree","className"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport { Cache } from '@/hooks/use-tree/actions/cache';\nimport type { Key, Selection } from '@react-types/shared';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useMemo } from 'react';\nimport {\n  Tree as AriaTree,\n  composeRenderProps,\n  DropIndicator,\n  type DropTarget,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\nimport type { TreeProps } from './types';\n\nconst defaultRenderDropIndicator = (target: DropTarget) => {\n  const isBetweenItems =\n    target.type === 'item' &&\n    (target.dropPosition === 'before' || target.dropPosition === 'after');\n  return (\n    <DropIndicator\n      target={target}\n      className={\n        isBetweenItems ? styles.dropIndicatorBetween : styles.dropIndicator\n      }\n    />\n  );\n};\n\n/**\n * Tree - Hierarchical tree view with selection, visibility, and drag-and-drop\n *\n * Supports static or dynamic collections with keyboard navigation and accessibility.\n *\n * @param props - {@link TreeProps}\n * @param props.children - Tree items or render function for dynamic collections.\n * @param props.className - CSS class for the tree container.\n * @param props.disabledKeys - Set of disabled item keys.\n * @param props.dragAndDropConfig - Configuration for drag and drop behavior.\n * @param props.expandedKeys - Set of expanded item keys.\n * @param props.items - Data source for dynamic collections.\n * @param props.selectedKeys - Set of selected item keys.\n * @param props.showRuleLines - Whether to show connecting lines between items.\n * @param props.showVisibility - Whether to show visibility toggle buttons.\n * @param props.selectionMode - Selection mode for the tree.\n * @param props.variant - Visual density variant.\n * @param props.visibleKeys - Set of visible item keys.\n * @param props.onVisibilityChange - Callback when item visibility changes.\n * @param props.onSelectionChange - Callback when selection changes.\n * @returns The rendered Tree component.\n *\n * @example\n * // Dynamic collection\n * ```tsx\n * <Tree items={items} expandedKeys={expandedKeys}>\n *   {(node) => <TreeItem key={node.key}>{node.label}</TreeItem>}\n * </Tree>\n * ```\n *\n * @example\n * ```tsx\n * // Static collection\n * <Tree>\n *   <TreeItem id=\"one\" textValue=\"one\">\n *     <TreeItemContent>One</TreeItemContent>\n *     <TreeItem id=\"two\" textValue=\"two\">\n *       <TreeItemContent>Two</TreeItemContent>\n *     </TreeItem>\n *   </TreeItem>\n * </Tree>\n * ```\n */\nexport function Tree<T>({\n  children,\n  className,\n  disabledKeys: disabledKeysProp,\n  dragAndDropConfig,\n  expandedKeys: expandedKeysProp,\n  items,\n  selectedKeys: selectedKeysProp,\n  showRuleLines = true,\n  showVisibility = true,\n  selectionMode = 'multiple',\n  variant = 'cozy',\n  visibleKeys: visibleKeysProp,\n  onVisibilityChange,\n  onSelectionChange,\n  ...rest\n}: TreeProps<T>) {\n  /**\n   * A static collection is hard-coded. Dynamic is data-driven from an external source.\n   * https://react-spectrum.adobe.com/react-aria/Tree.html#content\n   *\n   * Controlled state should only be used on a static tree.\n   */\n  if (\n    items &&\n    (disabledKeysProp ||\n      expandedKeysProp ||\n      selectedKeysProp ||\n      visibleKeysProp)\n  ) {\n    throw new Error(\n      'Tree should only be controlled with state from either `items` or keys props, not both',\n    );\n  }\n\n  /**\n   * A static tree won't support the node iterator pattern.\n   */\n  if (!!items !== (typeof children === 'function')) {\n    throw new Error(\n      'Tree `items` and node iterator `children` must be used together',\n    );\n  }\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    renderDropIndicator: defaultRenderDropIndicator,\n    getAllowedDropOperations: () => ['move'],\n    getDropOperation: () => 'move',\n    ...dragAndDropConfig,\n  });\n  const cache = useMemo(() => (items ? new Cache([...items]) : null), [items]);\n  const nodes = useMemo(() => cache?.getAllNodes(), [cache]);\n  const {\n    disabledKeys,\n    expandedKeys,\n    selectedKeys,\n    visibleKeys,\n    visibilityComputedKeys,\n  } = useMemo(() => {\n    const acc = {\n      disabledKeys: nodes ? new Set<Key>() : disabledKeysProp,\n      expandedKeys: nodes ? new Set<Key>() : expandedKeysProp,\n      selectedKeys: nodes ? new Set<Key>() : selectedKeysProp,\n      visibleKeys: nodes ? new Set<Key>() : visibleKeysProp,\n      visibilityComputedKeys: new Set<Key>(),\n    };\n\n    if (!nodes) {\n      return acc;\n    }\n\n    return nodes.reduce(\n      (\n        acc,\n        {\n          key,\n          isDisabled,\n          isExpanded,\n          isSelected,\n          isVisible,\n          isVisibleComputed,\n        },\n      ) => {\n        if (isDisabled) {\n          acc.disabledKeys?.add(key);\n        }\n        if (isExpanded) {\n          acc.expandedKeys?.add(key);\n        }\n        if (isSelected) {\n          acc.selectedKeys?.add(key);\n        }\n        if (isVisible) {\n          acc.visibleKeys?.add(key);\n        }\n        if (isVisibleComputed) {\n          acc.visibilityComputedKeys.add(key);\n        }\n        return acc;\n      },\n      acc,\n    );\n  }, [\n    nodes,\n    disabledKeysProp,\n    expandedKeysProp,\n    selectedKeysProp,\n    visibleKeysProp,\n  ]);\n\n  const handleSelectionChange = selectedKeys\n    ? (selection: Selection) => {\n        if (selection !== 'all') {\n          onSelectionChange?.(selection);\n        }\n      }\n    : undefined;\n\n  return (\n    <TreeContext.Provider\n      value={{\n        disabledKeys,\n        expandedKeys,\n        selectedKeys,\n        showRuleLines,\n        showVisibility,\n        variant,\n        visibleKeys,\n        visibilityComputedKeys,\n        isStatic: typeof children !== 'function',\n        onVisibilityChange: onVisibilityChange ?? (() => undefined), // TODO: improve\n      }}\n    >\n      <AriaTree\n        {...rest}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tree, className),\n        )}\n        disabledKeys={disabledKeys}\n        dragAndDropHooks={dragAndDropHooks}\n        expandedKeys={expandedKeys}\n        items={items}\n        selectedKeys={selectedKeys}\n        onSelectionChange={handleSelectionChange}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,8BAA8B,WAAuB;AAIzD,QACE,oBAAC;EACS;EACR,WALF,OAAO,SAAS,WACf,OAAO,iBAAiB,YAAY,OAAO,iBAAiB,WAKxC,OAAO,uBAAuB,OAAO;GAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CN,SAAgB,KAAQ,EACtB,UACA,WACA,cAAc,kBACd,mBACA,cAAc,kBACd,OACA,cAAc,kBACd,gBAAgB,MAChB,iBAAiB,MACjB,gBAAgB,YAChB,UAAU,QACV,aAAa,iBACb,oBACA,mBACA,GAAG,QACY;;;;;;;AAOf,KACE,UACC,oBACC,oBACA,oBACA,iBAEF,OAAM,IAAI,MACR,wFACD;;;;AAMH,KAAI,CAAC,CAAC,WAAW,OAAO,aAAa,YACnC,OAAM,IAAI,MACR,kEACD;CAGH,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB;EACrB,gCAAgC,CAAC,OAAO;EACxC,wBAAwB;EACxB,GAAG;EACJ,CAAC;CACF,MAAM,QAAQ,cAAe,QAAQ,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,MAAO,CAAC,MAAM,CAAC;CAC5E,MAAM,QAAQ,cAAc,OAAO,aAAa,EAAE,CAAC,MAAM,CAAC;CAC1D,MAAM,EACJ,cACA,cACA,cACA,aACA,2BACE,cAAc;EAChB,MAAM,MAAM;GACV,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,aAAa,wBAAQ,IAAI,KAAU,GAAG;GACtC,wCAAwB,IAAI,KAAU;GACvC;AAED,MAAI,CAAC,MACH,QAAO;AAGT,SAAO,MAAM,QAET,OACA,EACE,KACA,YACA,YACA,YACA,WACA,wBAEC;AACH,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,UACF,OAAI,aAAa,IAAI,IAAI;AAE3B,OAAI,kBACF,OAAI,uBAAuB,IAAI,IAAI;AAErC,UAAOA;KAET,IACD;IACA;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB,gBACzB,cAAyB;AACxB,MAAI,cAAc,MAChB,qBAAoB,UAAU;KAGlC;AAEJ,QACE,oBAAC,YAAY;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,OAAO,aAAa;GAC9B,oBAAoB,6BAA6B;GAClD;YAED,oBAACC;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,MAAMC,YAAU,CAC7B;GACa;GACI;GACJ;GACP;GACO;GACd,mBAAmB;GACJ;GAEd;IACQ;GACU"}
+{"version":3,"file":"index.js","names":["AriaTree","className"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport { Cache, type CacheTreeNode } from '@/hooks/use-tree/actions/cache';\nimport type { Key, Selection } from '@react-types/shared';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useMemo } from 'react';\nimport {\n  Tree as AriaTree,\n  composeRenderProps,\n  DropIndicator,\n  type DropTarget,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\nimport type { TreeProps } from './types';\n\nconst defaultRenderDropIndicator = (target: DropTarget) => {\n  const isBetweenItems =\n    target.type === 'item' &&\n    (target.dropPosition === 'before' || target.dropPosition === 'after');\n  return (\n    <DropIndicator\n      target={target}\n      className={\n        isBetweenItems ? styles.dropIndicatorBetween : styles.dropIndicator\n      }\n    />\n  );\n};\n\n/**\n * Helper to collect node state keys from cache tree nodes.\n * Reduces cognitive complexity by extracting the iteration logic.\n */\nfunction collectNodeKeys<T>(\n  nodes: MapIterator<CacheTreeNode<T>>,\n  acc: {\n    disabledKeys?: Set<Key>;\n    expandedKeys?: Set<Key>;\n    selectedKeys?: Set<Key>;\n    visibleKeys?: Set<Key>;\n    visibilityComputedKeys: Set<Key>;\n    indeterminateKeys: Set<Key>;\n  },\n) {\n  for (const node of nodes) {\n    if (node.isDisabled) {\n      acc.disabledKeys?.add(node.key);\n    }\n    if (node.isExpanded) {\n      acc.expandedKeys?.add(node.key);\n    }\n    if (node.isSelected) {\n      acc.selectedKeys?.add(node.key);\n    }\n    if (node.isVisible) {\n      acc.visibleKeys?.add(node.key);\n    }\n    if (node.isVisibleComputed) {\n      acc.visibilityComputedKeys.add(node.key);\n    }\n    if (node.isIndeterminate) {\n      acc.indeterminateKeys.add(node.key);\n    }\n  }\n  return acc;\n}\n\n/**\n * Tree - Hierarchical tree view with selection, visibility, and drag-and-drop\n *\n * Supports static or dynamic collections with keyboard navigation and accessibility.\n *\n * @param props - {@link TreeProps}\n * @param props.children - Tree items or render function for dynamic collections.\n * @param props.className - CSS class for the tree container.\n * @param props.disabledKeys - Set of disabled item keys.\n * @param props.dragAndDropConfig - Configuration for drag and drop behavior.\n * @param props.expandedKeys - Set of expanded item keys.\n * @param props.items - Data source for dynamic collections.\n * @param props.selectedKeys - Set of selected item keys.\n * @param props.showRuleLines - Whether to show connecting lines between items.\n * @param props.showVisibility - Whether to show visibility toggle buttons.\n * @param props.selectionMode - Selection mode for the tree.\n * @param props.variant - Visual density variant.\n * @param props.visibleKeys - Set of visible item keys.\n * @param props.onVisibilityChange - Callback when item visibility changes.\n * @param props.onSelectionChange - Callback when selection changes.\n * @returns The rendered Tree component.\n *\n * @example\n * // Dynamic collection\n * ```tsx\n * <Tree items={items} expandedKeys={expandedKeys}>\n *   {(node) => <TreeItem key={node.key}>{node.label}</TreeItem>}\n * </Tree>\n * ```\n *\n * @example\n * ```tsx\n * // Static collection\n * <Tree>\n *   <TreeItem id=\"one\" textValue=\"one\">\n *     <TreeItemContent>One</TreeItemContent>\n *     <TreeItem id=\"two\" textValue=\"two\">\n *       <TreeItemContent>Two</TreeItemContent>\n *     </TreeItem>\n *   </TreeItem>\n * </Tree>\n * ```\n */\nexport function Tree<T>({\n  children,\n  className,\n  disabledKeys: disabledKeysProp,\n  dragAndDropConfig,\n  expandedKeys: expandedKeysProp,\n  items,\n  selectedKeys: selectedKeysProp,\n  showRuleLines = true,\n  showVisibility = true,\n  selectionMode = 'multiple',\n  variant = 'cozy',\n  visibleKeys: visibleKeysProp,\n  onVisibilityChange,\n  onSelectionChange,\n  ...rest\n}: TreeProps<T>) {\n  /**\n   * A static collection is hard-coded. Dynamic is data-driven from an external source.\n   * https://react-spectrum.adobe.com/react-aria/Tree.html#content\n   *\n   * Controlled state should only be used on a static tree.\n   */\n  if (\n    items &&\n    (disabledKeysProp ||\n      expandedKeysProp ||\n      selectedKeysProp ||\n      visibleKeysProp)\n  ) {\n    throw new Error(\n      'Tree should only be controlled with state from either `items` or keys props, not both',\n    );\n  }\n\n  /**\n   * A static tree won't support the node iterator pattern.\n   */\n  if (!!items !== (typeof children === 'function')) {\n    throw new Error(\n      'Tree `items` and node iterator `children` must be used together',\n    );\n  }\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    renderDropIndicator: defaultRenderDropIndicator,\n    getAllowedDropOperations: () => ['move'],\n    getDropOperation: () => 'move',\n    ...dragAndDropConfig,\n  });\n  const cache = useMemo(() => (items ? new Cache([...items]) : null), [items]);\n  const nodes = useMemo(() => cache?.getAllNodes(), [cache]);\n  const {\n    disabledKeys,\n    expandedKeys,\n    selectedKeys,\n    visibleKeys,\n    visibilityComputedKeys,\n    indeterminateKeys,\n  } = useMemo(() => {\n    const acc = {\n      disabledKeys: nodes ? new Set<Key>() : disabledKeysProp,\n      expandedKeys: nodes ? new Set<Key>() : expandedKeysProp,\n      selectedKeys: nodes ? new Set<Key>() : selectedKeysProp,\n      visibleKeys: nodes ? new Set<Key>() : visibleKeysProp,\n      visibilityComputedKeys: new Set<Key>(),\n      indeterminateKeys: new Set<Key>(),\n    };\n\n    if (!nodes) {\n      return acc;\n    }\n\n    return collectNodeKeys<T>(nodes, acc);\n  }, [\n    nodes,\n    disabledKeysProp,\n    expandedKeysProp,\n    selectedKeysProp,\n    visibleKeysProp,\n  ]);\n\n  const handleSelectionChange = selectedKeys\n    ? (selection: Selection) => {\n        if (selection !== 'all') {\n          onSelectionChange?.(selection);\n        }\n      }\n    : undefined;\n\n  return (\n    <TreeContext.Provider\n      value={{\n        disabledKeys,\n        expandedKeys,\n        selectedKeys,\n        showRuleLines,\n        showVisibility,\n        variant,\n        visibleKeys,\n        visibilityComputedKeys,\n        indeterminateKeys,\n        isStatic: typeof children !== 'function',\n        onVisibilityChange: onVisibilityChange ?? (() => undefined), // TODO: improve\n      }}\n    >\n      <AriaTree\n        {...rest}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tree, className),\n        )}\n        disabledKeys={disabledKeys}\n        dragAndDropHooks={dragAndDropHooks}\n        expandedKeys={expandedKeys}\n        items={items}\n        selectedKeys={selectedKeys}\n        onSelectionChange={handleSelectionChange}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,8BAA8B,WAAuB;AAIzD,QACE,oBAAC;EACS;EACR,WALF,OAAO,SAAS,WACf,OAAO,iBAAiB,YAAY,OAAO,iBAAiB,WAKxC,OAAO,uBAAuB,OAAO;GAExD;;;;;;AAQN,SAAS,gBACP,OACA,KAQA;AACA,MAAK,MAAM,QAAQ,OAAO;AACxB,MAAI,KAAK,WACP,KAAI,cAAc,IAAI,KAAK,IAAI;AAEjC,MAAI,KAAK,WACP,KAAI,cAAc,IAAI,KAAK,IAAI;AAEjC,MAAI,KAAK,WACP,KAAI,cAAc,IAAI,KAAK,IAAI;AAEjC,MAAI,KAAK,UACP,KAAI,aAAa,IAAI,KAAK,IAAI;AAEhC,MAAI,KAAK,kBACP,KAAI,uBAAuB,IAAI,KAAK,IAAI;AAE1C,MAAI,KAAK,gBACP,KAAI,kBAAkB,IAAI,KAAK,IAAI;;AAGvC,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CT,SAAgB,KAAQ,EACtB,UACA,WACA,cAAc,kBACd,mBACA,cAAc,kBACd,OACA,cAAc,kBACd,gBAAgB,MAChB,iBAAiB,MACjB,gBAAgB,YAChB,UAAU,QACV,aAAa,iBACb,oBACA,mBACA,GAAG,QACY;;;;;;;AAOf,KACE,UACC,oBACC,oBACA,oBACA,iBAEF,OAAM,IAAI,MACR,wFACD;;;;AAMH,KAAI,CAAC,CAAC,WAAW,OAAO,aAAa,YACnC,OAAM,IAAI,MACR,kEACD;CAGH,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB;EACrB,gCAAgC,CAAC,OAAO;EACxC,wBAAwB;EACxB,GAAG;EACJ,CAAC;CACF,MAAM,QAAQ,cAAe,QAAQ,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,MAAO,CAAC,MAAM,CAAC;CAC5E,MAAM,QAAQ,cAAc,OAAO,aAAa,EAAE,CAAC,MAAM,CAAC;CAC1D,MAAM,EACJ,cACA,cACA,cACA,aACA,wBACA,sBACE,cAAc;EAChB,MAAM,MAAM;GACV,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,aAAa,wBAAQ,IAAI,KAAU,GAAG;GACtC,wCAAwB,IAAI,KAAU;GACtC,mCAAmB,IAAI,KAAU;GAClC;AAED,MAAI,CAAC,MACH,QAAO;AAGT,SAAO,gBAAmB,OAAO,IAAI;IACpC;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB,gBACzB,cAAyB;AACxB,MAAI,cAAc,MAChB,qBAAoB,UAAU;KAGlC;AAEJ,QACE,oBAAC,YAAY;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,OAAO,aAAa;GAC9B,oBAAoB,6BAA6B;GAClD;YAED,oBAACA;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,MAAMC,YAAU,CAC7B;GACa;GACI;GACJ;GACP;GACO;GACd,mBAAmB;GACJ;GAEd;IACQ;GACU"}

package/dist/components/tree/item-actions.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime199 from "react/jsx-runtime";
+import * as react_jsx_runtime185 from "react/jsx-runtime";
 
 //#region src/components/tree/item-actions.d.ts
 
@@ -39,7 +39,7 @@ declare function TreeItemActions({
   className
 }: PropsWithChildren & {
   className?: string;
-}): react_jsx_runtime199.JSX.Element;
+}): react_jsx_runtime185.JSX.Element;
 //#endregion
 export { TreeItemActions };
 //# sourceMappingURL=item-actions.d.ts.map

package/dist/components/tree/item-content.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TreeItemContentProps } from "./types.js";
-import * as react_jsx_runtime198 from "react/jsx-runtime";
+import * as react_jsx_runtime186 from "react/jsx-runtime";
 
 //#region src/components/tree/item-content.d.ts
 
@@ -35,7 +35,7 @@ import * as react_jsx_runtime198 from "react/jsx-runtime";
  */
 declare function TreeItemContent({
   children
-}: TreeItemContentProps): react_jsx_runtime198.JSX.Element;
+}: TreeItemContentProps): react_jsx_runtime186.JSX.Element;
 //#endregion
 export { TreeItemContent };
 //# sourceMappingURL=item-content.d.ts.map