@rimelight/ui 0.0.46 → 0.0.48

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

@@ -13,7 +13,11 @@ export const tableTheme = defineTheme("table", {
     "td",
     "separator",
     "empty",
-    "loading"
+    "loading",
+    "trGroup",
+    "tdGroup",
+    "trExpanded",
+    "tdExpanded"
   ],
   base: {
     root: "relative w-full overflow-auto rounded-lg border border-default shadow-sm outline-primary/25 focus-visible:outline-3",
@@ -22,38 +26,42 @@ export const tableTheme = defineTheme("table", {
     thead:
       "relative bg-muted/50 border-b border-default text-xs uppercase font-semibold text-muted",
     tbody:
-      "isolate divide-y divide-border/60 [&>tr]:data-[selectable=true]:hover:bg-muted/30 [&>tr]:data-[selectable=true]:cursor-pointer",
+      "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 hover:bg-muted/30",
+    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",
     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"
+    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",
+    trExpanded: "bg-muted/20 border-b border-default",
+    tdExpanded: "p-4"
   },
   variants: {
     pinned: {
       true: {
-        th: "sticky bg-default/95 backdrop-blur z-10",
-        td: "sticky bg-default/95 backdrop-blur z-10"
+        th: "sticky bg-default z-10",
+        td: "sticky bg-default z-10"
       }
     },
     sticky: {
       true: {
-        thead: "sticky top-0 inset-x-0 bg-default/95 backdrop-blur z-10",
-        tfoot: "sticky bottom-0 inset-x-0 bg-default/95 backdrop-blur z-10"
+        thead: "sticky top-0 inset-x-0 bg-default z-10",
+        tfoot: "sticky bottom-0 inset-x-0 bg-default z-10"
       },
       header: {
-        thead: "sticky top-0 inset-x-0 bg-default/95 backdrop-blur z-10"
+        thead: "sticky top-0 inset-x-0 bg-default z-10"
       },
       footer: {
-        tfoot: "sticky bottom-0 inset-x-0 bg-default/95 backdrop-blur z-10"
+        tfoot: "sticky bottom-0 inset-x-0 bg-default z-10"
       }
     },
     loading: {
       true: {
         thead:
-          "after:absolute after:bottom-0 after:start-0 after:z-10 after:h-0.5 after:w-full motion-reduce:after:animate-pulse"
+          "after:absolute after:bottom-0 after:start-0 after:z-10 after:h-0.5 after:w-full motion-reduce:after:w-full motion-reduce:after:animate-pulse"
       }
     },
     externalScroll: {
@@ -63,7 +71,13 @@ export const tableTheme = defineTheme("table", {
     },
     striped: {
       true: {
-        tr: "odd:bg-default even:bg-muted/20 hover:bg-muted/35"
+        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"
+      }
+    },
+    hoverable: {
+      true: {
+        tr: "hover:bg-muted/30 cursor-pointer"
       }
     },
     bordered: {
@@ -91,21 +105,38 @@ export const tableTheme = defineTheme("table", {
     }
   },
   compoundVariants: [
+    // Loading color variants
     { loading: true, loadingColor: "primary", classNames: { thead: "after:bg-primary" } },
     { loading: true, loadingColor: "secondary", classNames: { thead: "after:bg-secondary" } },
     { loading: true, loadingColor: "success", classNames: { thead: "after:bg-success" } },
     { loading: true, loadingColor: "info", classNames: { thead: "after:bg-info" } },
     { loading: true, loadingColor: "warning", classNames: { thead: "after:bg-warning" } },
     { 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,
-      loadingColor: "neutral",
-      classNames: { thead: "after:bg-muted" }
+      loadingAnimation: "carousel",
+      classNames: { thead: "motion-safe:after:animate-[carousel_2s_linear_infinite]" }
     },
+    // carousel-inverse: right-to-left sweep
     {
       loading: true,
-      loadingAnimation: "carousel",
-      classNames: { thead: "motion-safe:after:animate-pulse" }
+      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",
+      classNames: { thead: "motion-safe:after:animate-[elastic_2s_ease-in-out_infinite]" }
     }
   ],
   defaultVariants: {

package/src/components/table/table.ts

@@ -1,17 +1,17 @@
 export interface TableColumnMeta {
   class?: {
-    td?: string | ((cell: any) => string)
-    th?: string | ((column: any) => string)
+    td?: string | ((row: TableRow) => string)
+    th?: string | ((column: TableColumn) => string)
   }
   style?: {
-    td?: string | ((cell: any) => string)
-    th?: string | ((column: any) => string)
+    td?: string | ((row: TableRow) => string)
+    th?: string | ((column: TableColumn) => string)
   }
   colspan?: {
-    td?: number | string | ((cell: any) => number | string)
+    td?: number | string | ((row: TableRow) => number | string)
   }
   rowspan?: {
-    td?: number | string | ((cell: any) => number | string)
+    td?: number | string | ((row: TableRow) => number | string)
   }
   [key: string]: any
 }
@@ -20,21 +20,18 @@ export interface TableColumn<T = any> {
   id?: string
   accessorKey?: keyof T | string
   header?: string | ((props: { column: TableColumn<T>; table: any }) => any)
-  cell?:
-    | string
-    | ((props: {
-        row: TableRow<T>
-        getValue: () => any
-        renderValue: () => any
-        column: TableColumn<T>
-        table: any
-      }) => any)
+  cell?: (props: {
+    row: TableRow<T>
+    getValue: () => any
+    renderValue: () => any
+    column: TableColumn<T>
+    table: any
+  }) => any
   footer?: string | ((props: { column: TableColumn<T>; table: any }) => any)
   meta?: TableColumnMeta
   enableSorting?: boolean
   enableHiding?: boolean
   size?: number | string
-  aggregationFn?: string | ((rows: any[], id: string) => any)
   [key: string]: any
 }
 
@@ -48,6 +45,8 @@ export interface TableRow<T = any> {
   toggleSelected: (value?: boolean) => void
   getIsExpanded: () => boolean
   toggleExpanded: (value?: boolean) => void
+  getToggleExpandedHandler?: () => (e?: Event) => void
+  getToggleSelectedHandler?: () => (e?: Event) => void
   getIsPinned: () => boolean | "top" | "bottom"
   pin: (position: boolean | "top" | "bottom") => void
   getIsGrouped: () => boolean
@@ -56,6 +55,13 @@ export interface TableRow<T = any> {
   [key: string]: any
 }
 
+export interface TableGroup<T = any> {
+  id: string
+  columnId: string
+  value: any
+  rows: TableRow<T>[]
+}
+
 export interface TableMeta<T = any> {
   class?: {
     tr?: string | ((row: TableRow<T>) => string)
@@ -71,11 +77,15 @@ export interface TableSortingItem {
   desc: boolean
 }
 
+export type SortingState = TableSortingItem[]
+
 export interface TableColumnFilter {
   id: string
   value: any
 }
 
+export type ColumnFiltersState = TableColumnFilter[]
+
 export interface TableRowPinningState {
   top?: string[]
   bottom?: string[]
@@ -91,145 +101,173 @@ export interface TablePaginationState {
   pageSize: number
 }
 
+/**
+ * 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>[]
+  getSortedRows(): TableRow<T>[]
+  getSelectedRows(): TableRow<T>[]
+  getAllColumns(): TableColumn<T>[]
+  getColumn(id: string): TableColumn<T> | undefined
+  setGlobalFilter(value: string): void
+  setColumnFilter(id: string, value: any): void
+  setColumnVisibility(id: string, visible: boolean): void
+  setColumnPinning(pinning: TableColumnPinningState): void
+  setRowPinning(pinning: TableRowPinningState): void
+  setSorting(state: SortingState): void
+  setPagination(state: TablePaginationState): void
+  getState(): {
+    sorting: SortingState
+    globalFilter: string
+    columnFilters: ColumnFiltersState
+    columnVisibility: Record<string, boolean>
+    columnPinning: TableColumnPinningState
+    rowSelection: Record<string, boolean>
+    expanded: Record<string, boolean>
+    rowPinning: TableRowPinningState
+    pagination: TablePaginationState
+  }
+}
+
 export interface TableProps<T = any> {
   /**
-   * Data rows array.
+   * Data rows. Auto-infers columns from the first row's keys when `columns` is omitted.
    */
   data?: T[]
   /**
-   * Columns definition array.
+   * Column definitions.
    */
   columns?: TableColumn<T>[]
   /**
-   * Column headers array (legacy/backwards-compatible mode).
-   */
-  headers?: Array<string | { label: string; key: string; class?: string }>
-  /**
-   * Data rows array (legacy/backwards-compatible mode).
-   */
-  rows?: Array<Record<string, any> | any[]>
-  /**
-   * Accessible description or title of the table.
+   * Accessible table caption (visually hidden).
    */
   caption?: string
   /**
-   * Table meta properties (e.g., dynamic row classes).
+   * Table-level metadata, e.g. a per-row `class.tr` function.
    */
   meta?: TableMeta<T>
   /**
-   * Sticky header or footer ('header', 'footer', or true for both).
+   * Stick the header, footer, or both when the table scrolls.
    */
   sticky?: boolean | "header" | "footer"
   /**
-   * Loading state.
+   * Show a loading progress bar.
    */
   loading?: boolean
   /**
-   * Loading color variant.
+   * Color of the loading bar. @default 'primary'
    */
   loadingColor?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
   /**
-   * Loading animation variant.
+   * Animation of the loading bar. @default 'carousel'
    */
   loadingAnimation?: "carousel" | "carousel-inverse" | "swing" | "elastic"
   /**
-   * Empty state text message.
+   * Empty-state text. @default 'No data available'
    */
   empty?: string
   /**
-   * Virtualization state or options object.
-   */
-  virtualize?: boolean | Record<string, any>
-  /**
-   * Striped row style.
+   * Alternate row background colors.
    */
   striped?: boolean
   /**
-   * Hoverable rows state.
+   * Show borders on every cell.
    */
-  hoverable?: boolean
+  bordered?: boolean
   /**
-   * Bordered cells.
+   * Highlight row on hover.
    */
-  bordered?: boolean
+  hoverable?: boolean
   /**
-   * Global search filter text.
+   * Global text filter across all columns.
    */
   globalFilter?: string
   /**
-   * Per-column filter criteria.
+   * Per-column filter state.
    */
-  columnFilters?: TableColumnFilter[]
+  columnFilters?: ColumnFiltersState
   /**
-   * Column visibility toggles (e.g. { id: false }).
+   * Column visibility map — `{ [columnId]: boolean }`.
    */
   columnVisibility?: Record<string, boolean>
   /**
-   * Column pinning state ({ left: string[], right: string[] }).
+   * Sticky column pinning — `{ left?: string[], right?: string[] }`.
    */
   columnPinning?: TableColumnPinningState
   /**
-   * Active column sorting list.
+   * Active sort state.
    */
-  sorting?: TableSortingItem[]
+  sorting?: SortingState
   /**
-   * Grouping column ids list.
+   * Column IDs to group rows by (first entry is used).
    */
   grouping?: string[]
   /**
-   * Row pinning state ({ top: string[], bottom: string[] }).
+   * Row pinning — `{ top?: string[], bottom?: string[] }`.
    */
   rowPinning?: TableRowPinningState
   /**
-   * Selected row ids map.
+   * Row selection map — `{ [rowId]: boolean }`.
    */
   rowSelection?: Record<string, boolean>
   /**
-   * Expanded row ids map.
+   * Expanded rows map — `{ [rowId]: boolean }`.
    */
   expanded?: Record<string, boolean>
   /**
-   * Pagination state ({ pageIndex: number, pageSize: number }).
+   * Pagination state.
    */
   pagination?: TablePaginationState
   /**
-   * Function to derive sub-rows for tree/hierarchical data.
+   * Extract sub-rows for tree/hierarchical data.
    */
   getSubRows?: (row: T, index: number) => T[] | undefined
   /**
-   * Custom function to derive unique row ID.
+   * Custom row ID extractor. Defaults to `row.id ?? String(index)`.
    */
   getRowId?: (row: T, index: number) => string
   /**
-   * Row select callback.
+   * Called when a data row is clicked (skips clicks on interactive elements).
    */
   onSelect?: (e: Event, row: TableRow<T>) => void
   /**
-   * Row hover callback.
+   * Called when the pointer enters or leaves a row (`null` on leave).
    */
   onHover?: (e: Event, row: TableRow<T> | null) => void
   /**
-   * Row contextmenu callback.
+   * Called on row right-click.
    */
   onContextmenu?: (e: Event, row: TableRow<T>) => void
-  /**
-   * Enable integrated search toolbar input.
+  // 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
+  /**
+   * Render a built-in search input in the toolbar.
    */
   searchable?: boolean
   /**
-   * Custom placeholder text for integrated search input.
+   * Placeholder for the built-in search input. @default 'Filter table...'
    */
   searchPlaceholder?: string
   /**
-   * Enable integrated column visibility dropdown toggle.
+   * Render a column-visibility dropdown in the toolbar.
    */
   showColumnsToggle?: boolean
   /**
-   * Slot-specific CSS class overrides.
+   * Per-slot class overrides.
    */
-  ui?: any
+  ui?: Partial<Record<string, string>>
   /**
-   * Additional CSS classes to apply to root element.
+   * Additional classes on the root element.
    */
   class?: any
   [key: string]: unknown

package/src/components/table-of-contents/RLSTableOfContents.tsx

@@ -0,0 +1,196 @@
+import {
+  createMemo,
+  createSignal,
+  For,
+  onCleanup,
+  onMount,
+  splitProps,
+  type Component
+} from "solid-js"
+import type { TableOfContentsProps, TableOfContentsHeading } from "./table-of-contents"
+import { tableOfContentsTheme } from "./table-of-contents.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSTableOfContentsProps extends TableOfContentsProps {}
+
+const RLSTableOfContents: Component<RLSTableOfContentsProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "headings",
+    "collapsible",
+    "containerSelector",
+    "tableOfContents",
+    "as",
+    "ui",
+    "class"
+  ])
+
+  const [activeId, setActiveId] = createSignal("")
+  const [open, setOpen] = createSignal(false)
+  let rootRef: HTMLDivElement | undefined
+  let detailsRef: HTMLDetailsElement | undefined
+
+  const collapsible = () => props.collapsible === true
+  const containerSelector = () => props.containerSelector ?? ".markdown-content"
+
+  const minLevel = createMemo(() =>
+    props.tableOfContents ? (props.tableOfContents.minHeadingLevel ?? 2) : 2
+  )
+  const maxLevel = createMemo(() =>
+    props.tableOfContents ? (props.tableOfContents.maxHeadingLevel ?? 3) : 3
+  )
+
+  const filteredHeadings = createMemo(() =>
+    props.tableOfContents !== false
+      ? props.headings.filter((h) => h.depth >= minLevel() && h.depth <= maxLevel())
+      : []
+  )
+
+  const headingSelector = createMemo(() =>
+    Array.from(
+      { length: maxLevel() - minLevel() + 1 },
+      (_, i) => `:scope > h${minLevel() + i}`
+    ).join(", ")
+  )
+
+  const resolvedClasses = createMemo(() =>
+    tableOfContentsTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  onMount(() => {
+    if (collapsible() || !rootRef) return
+    const update = () => {
+      const root = rootRef
+      if (!root) return
+      const links = root.querySelectorAll(".toc-link")
+      if (links.length === 0) return
+      const threshold = window.innerHeight * 0.5
+      let active: string | undefined
+      links.forEach((link) => {
+        const href = link.getAttribute("href")
+        if (!href || href.charAt(0) !== "#") return
+        const id = href.substring(1)
+        const heading = document.getElementById(id)
+        if (heading && heading.getBoundingClientRect().top <= threshold) {
+          active = id
+        }
+      })
+      setActiveId(active ?? "")
+    }
+    update()
+    window.addEventListener("scroll", update, { passive: true })
+    onCleanup(() => window.removeEventListener("scroll", update))
+  })
+
+  const depthClass = (depth: number) => {
+    if (depth === 2) return "pl-xs"
+    if (depth === 3) return "pl-6"
+    return "pl-9"
+  }
+
+  if (props.tableOfContents === false || filteredHeadings().length === 0) {
+    return null
+  }
+
+  if (collapsible()) {
+    return (
+      <details
+        ref={(el) => (detailsRef = el)}
+        class={props.class}
+        data-rla-toc-collapsible
+        data-container-selector={containerSelector()}
+        data-heading-selector={headingSelector()}
+        onToggle={(e) => setOpen((e.currentTarget as HTMLDetailsElement).open)}
+        {...rest}
+      >
+        <summary class="flex items-center justify-between gap-3 px-4 h-10 text-sm font-medium text-highlighted cursor-pointer select-none hover:bg-muted/40 transition-colors list-none">
+          <span class="flex items-center gap-2">
+            <RLSIcon name="i-rl-list" class="size-4 text-primary shrink-0" aria-hidden="true" />
+            <span>On this page</span>
+          </span>
+          <RLSIcon
+            name="i-rl-chevronDown"
+            class={`rla-toc-chevron size-4 text-muted shrink-0 transition-transform duration-200 ${
+              open() ? "rotate-180" : ""
+            }`}
+            aria-hidden="true"
+          />
+        </summary>
+        <div class="px-4 pt-3 max-h-[40vh] overflow-y-auto border-t border-default/50 bg-default">
+          <ul class="flex flex-col gap-0.5 pb-8">
+            <For each={filteredHeadings()}>
+              {(heading) => (
+                <li class={heading.depth === 3 ? "pl-4" : undefined}>
+                  <a
+                    href={`#${heading.slug}`}
+                    class={`toc-link block py-1.5 text-sm transition-colors hover:text-primary no-underline ${
+                      heading.depth === 2 ? "text-highlighted font-medium" : "text-muted"
+                    }`}
+                    data-rla-toc-link
+                    onClick={() => {
+                      if (detailsRef) detailsRef.open = false
+                      setOpen(false)
+                    }}
+                  >
+                    {heading.text}
+                  </a>
+                </li>
+              )}
+            </For>
+          </ul>
+        </div>
+      </details>
+    )
+  }
+
+  return (
+    <>
+      <style>{`
+  .toc-active {
+    color: var(--rl-primary-500);
+    font-weight: 600;
+  }
+`}</style>
+      <div
+        ref={(el) => (rootRef = el)}
+        class={resolvedClasses().root}
+        data-slot="root"
+        data-container-selector={containerSelector()}
+        data-heading-selector={headingSelector()}
+        {...rest}
+      >
+        <div class={resolvedClasses().container} data-slot="container">
+          <h4 class={resolvedClasses().title} data-slot="title">
+            On this page
+          </h4>
+          <ul class={`${resolvedClasses().list} mt-2xl flex flex-col gap-xs`} data-slot="list">
+            <For each={filteredHeadings()}>
+              {(heading: TableOfContentsHeading) => (
+                <li
+                  class={`${resolvedClasses().item} ${depthClass(heading.depth)}`}
+                  data-slot="item"
+                >
+                  <a
+                    href={`#${heading.slug}`}
+                    class={`toc-link ${resolvedClasses().link} ${
+                      activeId() === heading.slug ? "toc-active" : ""
+                    }`}
+                    data-slot="link"
+                  >
+                    <span class={resolvedClasses().linkText} data-slot="link-text">
+                      {heading.text}
+                    </span>
+                  </a>
+                </li>
+              )}
+            </For>
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default RLSTableOfContents