@rimelight/ui 0.0.50 → 0.0.52

package/src/components/table/table.theme.ts

@@ -17,32 +17,42 @@ export const tableTheme = defineTheme("table", {
     "trGroup",
     "tdGroup",
     "trExpanded",
-    "tdExpanded"
+    "tdExpanded",
+    "toolbar",
+    "resizer",
+    "dragHandle"
   ],
   base: {
-    root: "relative w-full overflow-auto rounded-lg border border-default shadow-sm outline-primary/25 focus-visible:outline-3",
-    base: "min-w-full overflow-clip border-collapse text-sm text-left",
+    root: "relative block w-full overflow-hidden rounded-lg border border-default shadow-sm outline-primary/25 focus-visible:outline-3",
+    base: "min-w-full w-full border-separate border-spacing-0 text-sm text-left",
     caption: "sr-only p-4 text-xs text-muted text-center",
+    toolbar:
+      "flex items-center gap-3 px-3.5 py-3 border-b border-default bg-muted/20 overflow-x-auto",
     thead:
       "relative bg-muted/50 border-b border-default text-xs uppercase font-semibold text-muted",
     tbody:
       "divide-y divide-default/60 [&>tr]:data-[selectable=true]:hover:bg-muted/30 [&>tr]:data-[selectable=true]:cursor-pointer",
     tfoot: "relative bg-muted/30 border-t border-default font-medium text-xs text-muted",
-    tr: "transition-colors data-[selected=true]:bg-primary/10 data-[expanded=true]:bg-muted/40",
-    th: "px-4 py-3.5 text-xs font-semibold text-muted text-left uppercase tracking-wider [&:has([role=checkbox])]:pe-0",
-    td: "p-4 text-sm text-highlighted align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+    tr: "relative transition-colors data-[selected=true]:bg-primary/10 data-[expanded=true]:bg-muted/40 data-[drop-position=top]:after:absolute data-[drop-position=top]:after:inset-x-0 data-[drop-position=top]:after:top-0 data-[drop-position=top]:after:h-0.5 data-[drop-position=top]:after:bg-primary data-[drop-position=top]:after:z-30 data-[drop-position=bottom]:after:absolute data-[drop-position=bottom]:after:inset-x-0 data-[drop-position=bottom]:after:bottom-0 data-[drop-position=bottom]:after:h-0.5 data-[drop-position=bottom]:after:bg-primary data-[drop-position=bottom]:after:z-30",
+    th: "relative group/th px-4 py-3.5 text-xs font-semibold text-muted text-left uppercase tracking-wider border-b border-default [&:has([role=checkbox])]:pe-0 data-[drop-position=left]:after:absolute data-[drop-position=left]:after:inset-y-0 data-[drop-position=left]:after:start-0 data-[drop-position=left]:after:w-0.5 data-[drop-position=left]:after:bg-primary data-[drop-position=left]:after:z-30 data-[drop-position=right]:after:absolute data-[drop-position=right]:after:inset-y-0 data-[drop-position=right]:after:end-0 data-[drop-position=right]:after:w-0.5 data-[drop-position=right]:after:bg-primary data-[drop-position=right]:after:z-30",
+    td: "p-4 text-sm text-highlighted align-middle whitespace-nowrap border-b border-default/40 [&:has([role=checkbox])]:pe-0",
     separator: "absolute z-10 start-0 w-full h-px bg-neutral-200",
     empty: "py-8 text-center text-sm text-muted",
     loading: "py-8 text-center text-sm text-muted",
     trGroup: "bg-muted/40",
-    tdGroup: "px-4 py-2 text-xs font-bold uppercase tracking-wider text-highlighted",
+    tdGroup:
+      "px-4 py-2 text-xs font-bold uppercase tracking-wider text-highlighted border-b border-default",
     trExpanded: "bg-muted/20 border-b border-default",
-    tdExpanded: "p-4"
+    tdExpanded: "p-4 border-b border-default",
+    resizer:
+      "absolute top-0 end-0 h-full w-1.5 cursor-col-resize select-none touch-none hover:bg-primary/50 transition-colors opacity-0 group-hover/th:opacity-60",
+    dragHandle:
+      "inline-flex items-center justify-center cursor-grab active:cursor-grabbing text-muted/50 hover:text-highlighted touch-none select-none p-1 rounded hover:bg-muted/40 transition-colors"
   },
   variants: {
     pinned: {
       true: {
-        th: "sticky bg-default z-10",
+        th: "sticky bg-muted z-10",
         td: "sticky bg-default z-10"
       }
     },
@@ -72,7 +82,7 @@ export const tableTheme = defineTheme("table", {
     striped: {
       true: {
         tbody:
-          "[&>tr:not([data-slot=tr-group]):not([data-slot=tr-expanded])]:odd:bg-default [&>tr:not([data-slot=tr-group]):not([data-slot=tr-expanded])]:even:bg-muted/20"
+          "[&>tr:nth-child(even):not([data-slot=tr-group]):not([data-slot=tr-expanded])]:bg-muted/25 [&>tr:nth-child(even):not([data-slot=tr-group]):not([data-slot=tr-expanded])>td]:bg-muted/25"
       }
     },
     hoverable: {
@@ -114,25 +124,21 @@ export const tableTheme = defineTheme("table", {
     { loading: true, loadingColor: "error", classNames: { thead: "after:bg-destructive" } },
     { loading: true, loadingColor: "neutral", classNames: { thead: "after:bg-muted" } },
     // Loading animation variants
-    // carousel: left-to-right sweep  (keyframe: @keyframes carousel { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} })
     {
       loading: true,
       loadingAnimation: "carousel",
       classNames: { thead: "motion-safe:after:animate-[carousel_2s_linear_infinite]" }
     },
-    // carousel-inverse: right-to-left sweep
     {
       loading: true,
       loadingAnimation: "carousel-inverse",
       classNames: { thead: "motion-safe:after:animate-[carousel-inverse_2s_linear_infinite]" }
     },
-    // swing: pendulum back-and-forth
     {
       loading: true,
       loadingAnimation: "swing",
       classNames: { thead: "motion-safe:after:animate-[swing_2s_ease-in-out_infinite]" }
     },
-    // elastic: springy bounce
     {
       loading: true,
       loadingAnimation: "elastic",

package/src/components/table/table.ts

@@ -16,14 +16,48 @@ export interface TableColumnMeta {
   [key: string]: any
 }
 
+export type TableAggregationFn<T = any> =
+  | "count"
+  | "sum"
+  | "min"
+  | "max"
+  | "extent"
+  | "mean"
+  | "median"
+  | "unique"
+  | "uniqueCount"
+  | ((values: any[], rows: TableRow<T>[]) => any)
+
+import type { DropdownMenuItem } from "../dropdown-menu/dropdown-menu"
+
 export interface TableColumn<T = any> {
   id?: string
   accessorKey?: keyof T | string
+  accessorFn?: (row: T) => any
   header?: string | ((props: { column: TableColumn<T>; table: any }) => any)
   cell?: (props: {
     row: TableRow<T>
     getValue: () => any
     renderValue: () => any
+    isEditing?: () => boolean
+    setEditing?: (editing: boolean) => void
+    column: TableColumn<T>
+    table: any
+  }) => any
+  actions?:
+    | ((row: TableRow<T>) => DropdownMenuItem[] | DropdownMenuItem[][])
+    | DropdownMenuItem[]
+    | DropdownMenuItem[][]
+  items?:
+    | ((row: TableRow<T>) => DropdownMenuItem[] | DropdownMenuItem[][])
+    | DropdownMenuItem[]
+    | DropdownMenuItem[][]
+  aggregatedCell?: (props: {
+    row: TableRow<T>
+    getValue: () => any
+    renderValue: () => any
+    isEditing?: () => boolean
+    setEditing?: (editing: boolean) => void
     column: TableColumn<T>
     table: any
   }) => any
@@ -31,7 +65,11 @@ export interface TableColumn<T = any> {
   meta?: TableColumnMeta
   enableSorting?: boolean
   enableHiding?: boolean
+  enablePinning?: boolean
+  aggregationFn?: TableAggregationFn<T>
   size?: number | string
+  minSize?: number | string
+  maxSize?: number | string
   [key: string]: any
 }
 
@@ -40,13 +78,16 @@ export interface TableRow<T = any> {
   original: T
   index: number
   depth: number
+  groupingColumnId?: string
+  groupingValue?: any
   getValue: (key: string) => any
   getIsSelected: () => boolean
+  getIsSomeSelected: () => boolean
   toggleSelected: (value?: boolean) => void
   getIsExpanded: () => boolean
   toggleExpanded: (value?: boolean) => void
-  getToggleExpandedHandler?: () => (e?: Event) => void
-  getToggleSelectedHandler?: () => (e?: Event) => void
+  getToggleExpandedHandler: () => (e?: Event) => void
+  getToggleSelectedHandler: () => (e?: Event) => void
   getIsPinned: () => boolean | "top" | "bottom"
   pin: (position: boolean | "top" | "bottom") => void
   getIsGrouped: () => boolean
@@ -59,6 +100,7 @@ export interface TableGroup<T = any> {
   id: string
   columnId: string
   value: any
+  depth?: number
   rows: TableRow<T>[]
 }
 
@@ -96,21 +138,47 @@ export interface TableColumnPinningState {
   right?: string[]
 }
 
+export type TableColumnSizingState = Record<string, number>
+export type TableColumnOrderState = string[]
+export type TableEditingCellState = { rowId: string; columnId: string } | null
+
+export interface TableExportOptions {
+  filename?: string
+  selectedOnly?: boolean
+  columns?: string[]
+}
+
 export interface TablePaginationState {
   pageIndex: number
   pageSize: number
 }
 
+export interface TableVirtualizeOptions {
+  estimateSize?: number | ((index: number) => number)
+  overscan?: number
+  scrollMargin?: number
+  getScrollElement?: () => HTMLElement | null
+}
+
 /**
  * Imperative API exposed by RLATable (on the custom element) and RLSTable (via ref callback).
  */
 export interface TableApi<T = any> {
   tableRef: HTMLTableElement | null
   getFilteredRows(): TableRow<T>[]
+  getFlatRows(): TableRow<T>[]
   getSortedRows(): TableRow<T>[]
   getSelectedRows(): TableRow<T>[]
+  getFilteredSelectedRowModel(): { rows: TableRow<T>[]; flatRows: TableRow<T>[] }
+  getFilteredRowModel(): { rows: TableRow<T>[]; flatRows: TableRow<T>[] }
   getAllColumns(): TableColumn<T>[]
   getColumn(id: string): TableColumn<T> | undefined
+  getIsAllRowsSelected(): boolean
+  getIsSomeRowsSelected(): boolean
+  toggleAllRowsSelected(selected?: boolean): void
+  getIsAllPageRowsSelected(): boolean
+  getIsSomePageRowsSelected(): boolean
+  toggleAllPageRowsSelected(selected?: boolean): void
   setGlobalFilter(value: string): void
   setColumnFilter(id: string, value: any): void
   setColumnVisibility(id: string, visible: boolean): void
@@ -118,16 +186,35 @@ export interface TableApi<T = any> {
   setRowPinning(pinning: TableRowPinningState): void
   setSorting(state: SortingState): void
   setPagination(state: TablePaginationState): void
+  setPageIndex(pageIndex: number): void
+  setPageSize(pageSize: number): void
+  // Resizing & Ordering
+  setColumnSizing(id: string, size: number): void
+  resetColumnSizing(): void
+  setColumnOrder(order: TableColumnOrderState): void
+  resetColumnOrder(): void
+  // Exporting
+  exportToCsv(options?: TableExportOptions): string
+  exportToJson(options?: TableExportOptions): string
+  // Faceted statistics
+  getFacetedUniqueValues(columnId: string): Map<any, number>
+  getFacetedMinMaxValues(columnId: string): [number, number] | undefined
+  // Inline editing support
+  setEditingCell(cell: TableEditingCellState): void
+  getEditingCell(): TableEditingCellState
   getState(): {
     sorting: SortingState
     globalFilter: string
     columnFilters: ColumnFiltersState
     columnVisibility: Record<string, boolean>
     columnPinning: TableColumnPinningState
+    columnSizing: TableColumnSizingState
+    columnOrder: TableColumnOrderState
     rowSelection: Record<string, boolean>
     expanded: Record<string, boolean>
     rowPinning: TableRowPinningState
     pagination: TablePaginationState
+    editingCell: TableEditingCellState
   }
 }
 
@@ -135,140 +222,221 @@ export interface TableProps<T = any> {
   /**
    * Data rows. Auto-infers columns from the first row's keys when `columns` is omitted.
    */
-  data?: T[]
+  data?: T[] | undefined
   /**
    * Column definitions.
    */
-  columns?: TableColumn<T>[]
+  columns?: TableColumn<T>[] | undefined
   /**
-   * Accessible table caption (visually hidden).
+   * Accessible table caption (visually hidden or styled).
    */
-  caption?: string
+  caption?: string | undefined
   /**
    * Table-level metadata, e.g. a per-row `class.tr` function.
    */
-  meta?: TableMeta<T>
+  meta?: TableMeta<T> | undefined
   /**
    * Stick the header, footer, or both when the table scrolls.
    */
-  sticky?: boolean | "header" | "footer"
+  sticky?: boolean | "header" | "footer" | undefined
+  /**
+   * Enable virtualization for large datasets.
+   */
+  virtualize?: boolean | TableVirtualizeOptions | undefined
   /**
    * Show a loading progress bar.
    */
-  loading?: boolean
+  loading?: boolean | undefined
   /**
    * Color of the loading bar. @default 'primary'
    */
-  loadingColor?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
+  loadingColor?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "info"
+    | "warning"
+    | "error"
+    | "neutral"
+    | undefined
   /**
    * Animation of the loading bar. @default 'carousel'
    */
-  loadingAnimation?: "carousel" | "carousel-inverse" | "swing" | "elastic"
+  loadingAnimation?: "carousel" | "carousel-inverse" | "swing" | "elastic" | undefined
   /**
    * Empty-state text. @default 'No data available'
    */
-  empty?: string
+  empty?: string | undefined
   /**
    * Alternate row background colors.
    */
-  striped?: boolean
+  striped?: boolean | undefined
   /**
    * Show borders on every cell.
    */
-  bordered?: boolean
+  bordered?: boolean | undefined
   /**
    * Highlight row on hover.
    */
-  hoverable?: boolean
+  hoverable?: boolean | undefined
   /**
    * Global text filter across all columns.
    */
-  globalFilter?: string
+  globalFilter?: string | undefined
   /**
    * Per-column filter state.
    */
-  columnFilters?: ColumnFiltersState
+  columnFilters?: ColumnFiltersState | undefined
   /**
    * Column visibility map — `{ [columnId]: boolean }`.
    */
-  columnVisibility?: Record<string, boolean>
+  columnVisibility?: Record<string, boolean> | undefined
   /**
    * Sticky column pinning — `{ left?: string[], right?: string[] }`.
    */
-  columnPinning?: TableColumnPinningState
+  columnPinning?: TableColumnPinningState | undefined
   /**
    * Active sort state.
    */
-  sorting?: SortingState
+  sorting?: SortingState | undefined
   /**
    * Column IDs to group rows by (first entry is used).
    */
-  grouping?: string[]
+  grouping?: string[] | undefined
   /**
    * Row pinning — `{ top?: string[], bottom?: string[] }`.
    */
-  rowPinning?: TableRowPinningState
+  rowPinning?: TableRowPinningState | undefined
   /**
    * Row selection map — `{ [rowId]: boolean }`.
    */
-  rowSelection?: Record<string, boolean>
+  rowSelection?: Record<string, boolean> | undefined
   /**
    * Expanded rows map — `{ [rowId]: boolean }`.
    */
-  expanded?: Record<string, boolean>
+  expanded?: Record<string, boolean> | undefined
   /**
    * Pagination state.
    */
-  pagination?: TablePaginationState
+  pagination?: TablePaginationState | undefined
   /**
    * Extract sub-rows for tree/hierarchical data.
    */
-  getSubRows?: (row: T, index: number) => T[] | undefined
+  getSubRows?: ((row: T, index: number) => T[] | undefined) | undefined
+  /**
+   * Custom predicate to determine whether a row can be expanded. Defaults to checking if subRows
+   * exist.
+   */
+  getRowCanExpand?: ((row: TableRow<T>) => boolean) | undefined
   /**
    * Custom row ID extractor. Defaults to `row.id ?? String(index)`.
    */
-  getRowId?: (row: T, index: number) => string
+  getRowId?: ((row: T, index: number) => string) | undefined
   /**
    * Called when a data row is clicked (skips clicks on interactive elements).
    */
-  onSelect?: (e: Event, row: TableRow<T>) => void
+  onSelect?: ((e: Event, row: TableRow<T>) => void) | undefined
   /**
    * Called when the pointer enters or leaves a row (`null` on leave).
    */
-  onHover?: (e: Event, row: TableRow<T> | null) => void
+  onHover?: ((e: Event, row: TableRow<T> | null) => void) | undefined
   /**
    * Called on row right-click.
    */
-  onContextmenu?: (e: Event, row: TableRow<T>) => void
+  onContextmenu?: ((e: Event, row: TableRow<T>) => void) | undefined
   // Controlled-mode callbacks — provide these to take ownership of state externally
-  onSortingChange?: (state: SortingState) => void
-  onColumnFiltersChange?: (state: ColumnFiltersState) => void
-  onGlobalFilterChange?: (value: string) => void
-  onColumnVisibilityChange?: (state: Record<string, boolean>) => void
-  onColumnPinningChange?: (state: TableColumnPinningState) => void
-  onRowSelectionChange?: (state: Record<string, boolean>) => void
-  onExpandedChange?: (state: Record<string, boolean>) => void
-  onRowPinningChange?: (state: TableRowPinningState) => void
-  onPaginationChange?: (state: TablePaginationState) => void
+  onSortingChange?: ((state: SortingState) => void) | undefined
+  onColumnFiltersChange?: ((state: ColumnFiltersState) => void) | undefined
+  onGlobalFilterChange?: ((value: string) => void) | undefined
+  onColumnVisibilityChange?: ((state: Record<string, boolean>) => void) | undefined
+  onColumnPinningChange?: ((state: TableColumnPinningState) => void) | undefined
+  onRowSelectionChange?: ((state: Record<string, boolean>) => void) | undefined
+  onExpandedChange?: ((state: Record<string, boolean>) => void) | undefined
+  onRowPinningChange?: ((state: TableRowPinningState) => void) | undefined
+  onPaginationChange?: ((state: TablePaginationState) => void) | undefined
+  /**
+   * Enable interactive drag resizing for columns.
+   */
+  enableColumnResizing?: boolean | undefined
+  /**
+   * Column resize mode: "onChange" updates dynamically during drag, "onEnd" updates when mouse is
+   * released. @default 'onChange'
+   */
+  columnResizeMode?: "onChange" | "onEnd" | undefined
+  /**
+   * Controlled column sizing state — `{ [columnId]: widthInPixels }`.
+   */
+  columnSizing?: TableColumnSizingState | undefined
+  onColumnSizingChange?: ((state: TableColumnSizingState) => void) | undefined
+  /**
+   * Enable drag-and-drop column reordering.
+   */
+  enableColumnReordering?: boolean | undefined
+  /**
+   * Controlled column order state — `[columnId1, columnId2, ...]`.
+   */
+  columnOrder?: TableColumnOrderState | undefined
+  onColumnOrderChange?: ((state: TableColumnOrderState) => void) | undefined
+  /**
+   * Enable drag-and-drop row reordering.
+   */
+  enableRowReordering?: boolean | undefined
+  /**
+   * Called when a row is reordered via drag-and-drop.
+   */
+  onRowReorder?: ((newOrder: T[], fromIndex: number, toIndex: number) => void) | undefined
+  /**
+   * Active cell being edited — `{ rowId: string, columnId: string } | null`.
+   */
+  editingCell?: TableEditingCellState | undefined
+  onEditingCellChange?: ((cell: TableEditingCellState) => void) | undefined
   /**
    * Render a built-in search input in the toolbar.
    */
-  searchable?: boolean
+  searchable?: boolean | undefined
   /**
    * Placeholder for the built-in search input. @default 'Filter table...'
    */
-  searchPlaceholder?: string
+  searchPlaceholder?: string | undefined
   /**
    * Render a column-visibility dropdown in the toolbar.
    */
-  showColumnsToggle?: boolean
+  showColumnsToggle?: boolean | undefined
+  /**
+   * Render an export dropdown (CSV, JSON) in the toolbar. @default false
+   */
+  exportable?: boolean | undefined
+  /**
+   * Default filename prefix for exported files. @default 'export'
+   */
+  exportFilename?: string | undefined
+  /**
+   * Row actions dropdown definition. Generates an Actions column automatically.
+   */
+  actions?:
+    | ((row: TableRow<T>) => DropdownMenuItem[] | DropdownMenuItem[][])
+    | DropdownMenuItem[]
+    | DropdownMenuItem[][]
+    | undefined
+  /**
+   * Alias for actions.
+   */
+  rowActions?:
+    | ((row: TableRow<T>) => DropdownMenuItem[] | DropdownMenuItem[][])
+    | DropdownMenuItem[]
+    | DropdownMenuItem[][]
+    | undefined
   /**
    * Per-slot class overrides.
    */
-  ui?: Partial<Record<string, string>>
+  ui?: Partial<Record<string, string>> | undefined
   /**
    * Additional classes on the root element.
    */
   class?: any
+  /**
+   * Solid slot overrides dictionary (e.g. { "name-cell": ({ row }) => ... })
+   */
+  slots?: Record<string, (props: any) => any> | undefined
   [key: string]: unknown
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Rimelight Entertainment
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.