@rimelight/ui 0.0.41 → 0.0.43

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

@@ -1,36 +1,117 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTableTheme = () =>
-  defineTheme({
-    slots: ["root", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "caption"],
-    base: {
-      root: "relative w-full overflow-auto rounded-lg border border-border shadow-sm",
-      table: "w-full text-sm text-left border-collapse",
-      thead: "bg-muted/50 border-b border-border",
-      tbody: "divide-y divide-border",
-      tfoot: "bg-muted/30 border-t border-border font-medium",
-      tr: "transition-colors hover:bg-muted/30",
-      th: "p-4 text-xs font-semibold uppercase text-muted-foreground",
-      td: "p-4 text-foreground align-middle",
-      caption: "p-4 text-xs text-muted-foreground text-center"
-    },
-    variants: {
-      striped: {
-        true: { tr: "odd:bg-background even:bg-muted/20 hover:bg-muted/35" }
+export const tableTheme = defineTheme("table", {
+  slots: [
+    "root",
+    "base",
+    "caption",
+    "thead",
+    "tbody",
+    "tfoot",
+    "tr",
+    "th",
+    "td",
+    "separator",
+    "empty",
+    "loading"
+  ],
+  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",
+    caption: "sr-only p-4 text-xs text-muted text-center",
+    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",
+    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",
+    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-border",
+    empty: "py-8 text-center text-sm text-muted",
+    loading: "py-8 text-center text-sm text-muted"
+  },
+  variants: {
+    pinned: {
+      true: {
+        th: "sticky bg-default/95 backdrop-blur z-10",
+        td: "sticky bg-default/95 backdrop-blur 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"
       },
-      bordered: {
-        true: {
-          root: "border-2 border-border",
-          tr: "border-b border-border",
-          th: "border-r border-border last:border-r-0",
-          td: "border-r border-border last:border-r-0"
-        }
+      header: {
+        thead: "sticky top-0 inset-x-0 bg-default/95 backdrop-blur z-10"
+      },
+      footer: {
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/95 backdrop-blur 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"
+      }
+    },
+    externalScroll: {
+      true: {
+        root: "overflow-visible"
       }
     },
-    defaultVariants: {
-      striped: false,
-      bordered: false
+    striped: {
+      true: {
+        tr: "odd:bg-default even:bg-muted/20 hover:bg-muted/35"
+      }
+    },
+    bordered: {
+      true: {
+        root: "border-2 border-default shadow-sm",
+        tr: "border-b border-default",
+        th: "border-r border-default last:border-r-0",
+        td: "border-r border-default last:border-r-0"
+      }
+    },
+    loadingAnimation: {
+      "carousel": {},
+      "carousel-inverse": {},
+      "swing": {},
+      "elastic": {}
+    },
+    loadingColor: {
+      primary: {},
+      secondary: {},
+      success: {},
+      info: {},
+      warning: {},
+      error: {},
+      neutral: {}
     }
-  })
-
-export default createTableTheme()
+  },
+  compoundVariants: [
+    { 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: true,
+      loadingAnimation: "carousel",
+      classNames: { thead: "motion-safe:after:animate-pulse" }
+    }
+  ],
+  defaultVariants: {
+    striped: false,
+    bordered: false,
+    loadingColor: "primary",
+    loadingAnimation: "carousel"
+  }
+})

package/src/components/table/table.ts

@@ -1,12 +1,145 @@
-export interface TableProps {
+export interface TableColumnMeta {
+  class?: {
+    td?: string | ((cell: any) => string)
+    th?: string | ((column: any) => string)
+  }
+  style?: {
+    td?: string | ((cell: any) => string)
+    th?: string | ((column: any) => string)
+  }
+  colspan?: {
+    td?: number | string | ((cell: any) => number | string)
+  }
+  rowspan?: {
+    td?: number | string | ((cell: any) => number | string)
+  }
+  [key: string]: any
+}
+
+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)
+  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
+}
+
+export interface TableRow<T = any> {
+  id: string
+  original: T
+  index: number
+  depth: number
+  getValue: (key: string) => any
+  getIsSelected: () => boolean
+  toggleSelected: (value?: boolean) => void
+  getIsExpanded: () => boolean
+  toggleExpanded: (value?: boolean) => void
+  getIsPinned: () => boolean | "top" | "bottom"
+  pin: (position: boolean | "top" | "bottom") => void
+  getIsGrouped: () => boolean
+  getCanExpand: () => boolean
+  subRows?: TableRow<T>[]
+  [key: string]: any
+}
+
+export interface TableMeta<T = any> {
+  class?: {
+    tr?: string | ((row: TableRow<T>) => string)
+  }
+  style?: {
+    tr?: string | ((row: TableRow<T>) => string)
+  }
+  [key: string]: any
+}
+
+export interface TableSortingItem {
+  id: string
+  desc: boolean
+}
+
+export interface TableColumnFilter {
+  id: string
+  value: any
+}
+
+export interface TableRowPinningState {
+  top?: string[]
+  bottom?: string[]
+}
+
+export interface TableColumnPinningState {
+  left?: string[]
+  right?: string[]
+}
+
+export interface TablePaginationState {
+  pageIndex: number
+  pageSize: number
+}
+
+export interface TableProps<T = any> {
   /**
-   * Column headers array.
+   * Data rows array.
+   */
+  data?: T[]
+  /**
+   * Columns definition array.
+   */
+  columns?: TableColumn<T>[]
+  /**
+   * Column headers array (legacy/backwards-compatible mode).
    */
   headers?: Array<string | { label: string; key: string; class?: string }>
   /**
-   * Data rows array.
+   * Data rows array (legacy/backwards-compatible mode).
    */
   rows?: Array<Record<string, any> | any[]>
+  /**
+   * Accessible description or title of the table.
+   */
+  caption?: string
+  /**
+   * Table meta properties (e.g., dynamic row classes).
+   */
+  meta?: TableMeta<T>
+  /**
+   * Sticky header or footer ('header', 'footer', or true for both).
+   */
+  sticky?: boolean | "header" | "footer"
+  /**
+   * Loading state.
+   */
+  loading?: boolean
+  /**
+   * Loading color variant.
+   */
+  loadingColor?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
+  /**
+   * Loading animation variant.
+   */
+  loadingAnimation?: "carousel" | "carousel-inverse" | "swing" | "elastic"
+  /**
+   * Empty state text message.
+   */
+  empty?: string
+  /**
+   * Virtualization state or options object.
+   */
+  virtualize?: boolean | Record<string, any>
   /**
    * Striped row style.
    */
@@ -20,15 +153,83 @@ export interface TableProps {
    */
   bordered?: boolean
   /**
-   * Accessible description or title of the table.
+   * Global search filter text.
    */
-  caption?: string
+  globalFilter?: string
+  /**
+   * Per-column filter criteria.
+   */
+  columnFilters?: TableColumnFilter[]
+  /**
+   * Column visibility toggles (e.g. { id: false }).
+   */
+  columnVisibility?: Record<string, boolean>
+  /**
+   * Column pinning state ({ left: string[], right: string[] }).
+   */
+  columnPinning?: TableColumnPinningState
+  /**
+   * Active column sorting list.
+   */
+  sorting?: TableSortingItem[]
+  /**
+   * Grouping column ids list.
+   */
+  grouping?: string[]
+  /**
+   * Row pinning state ({ top: string[], bottom: string[] }).
+   */
+  rowPinning?: TableRowPinningState
+  /**
+   * Selected row ids map.
+   */
+  rowSelection?: Record<string, boolean>
+  /**
+   * Expanded row ids map.
+   */
+  expanded?: Record<string, boolean>
+  /**
+   * Pagination state ({ pageIndex: number, pageSize: number }).
+   */
+  pagination?: TablePaginationState
+  /**
+   * Function to derive sub-rows for tree/hierarchical data.
+   */
+  getSubRows?: (row: T, index: number) => T[] | undefined
+  /**
+   * Custom function to derive unique row ID.
+   */
+  getRowId?: (row: T, index: number) => string
+  /**
+   * Row select callback.
+   */
+  onSelect?: (e: Event, row: TableRow<T>) => void
+  /**
+   * Row hover callback.
+   */
+  onHover?: (e: Event, row: TableRow<T> | null) => void
+  /**
+   * Row contextmenu callback.
+   */
+  onContextmenu?: (e: Event, row: TableRow<T>) => void
+  /**
+   * Enable integrated search toolbar input.
+   */
+  searchable?: boolean
+  /**
+   * Custom placeholder text for integrated search input.
+   */
+  searchPlaceholder?: string
+  /**
+   * Enable integrated column visibility dropdown toggle.
+   */
+  showColumnsToggle?: boolean
   /**
    * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Additional CSS classes to apply to the root element.
+   * Additional CSS classes to apply to root element.
    */
   class?: any
   [key: string]: unknown

package/src/components/table-of-contents/RLATableOfContents.astro

@@ -1,25 +1,20 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { TableOfContentsProps } from "./table-of-contents"
-import tableOfContentsTheme from "./table-of-contents.theme"
+import { tableOfContentsTheme } from "./table-of-contents.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const tableOfContents = scv(tableOfContentsTheme)
 
 const {
   headings,
-  tableOfContents: tableOfContentsConfig,
-  ui: uiProp,
-  class: className,
   collapsible = false,
   containerSelector = ".markdown-content",
+  tableOfContents: tableOfContentsConfig,
+  class: className,
   ...rest
 } = Astro.props as TableOfContentsProps
 
-const classes = resolveClasses(tableOfContents, {}, useUi("tableOfContents", uiProp), className);
+const classes = tableOfContentsTheme(Astro.props);
 
 if (tableOfContentsConfig === false) {
   // Render nothing
@@ -38,14 +33,14 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
 {tableOfContentsConfig !== false && filteredHeadings.length > 0 && (
   collapsible ? (
     <details class:list={[className]} data-rla-toc-collapsible data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
-      <summary class="flex items-center justify-between gap-3 px-4 h-10 text-sm font-medium text-foreground cursor-pointer select-none hover:bg-muted/40 transition-colors list-none">
+      <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">
           <RLAIcon name="list" class="size-4 text-primary shrink-0" />
           <span>On this page</span>
         </span>
-        <RLAIcon name="chevronDown" class="rla-toc-chevron size-4 text-muted-foreground shrink-0 transition-transform duration-200" />
+        <RLAIcon name="chevronDown" class="rla-toc-chevron size-4 text-muted shrink-0 transition-transform duration-200" />
       </summary>
-      <div class="px-4 pt-3 max-h-[40vh] overflow-y-auto border-t border-border/50 bg-background">
+      <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">
           {filteredHeadings.map(heading => (
             <li class:list={[heading.depth === 3 && "pl-4"]}>
@@ -53,7 +48,7 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
                 href={`#${heading.slug}`}
                 class:list={[
                   "toc-link block py-1.5 text-sm transition-colors hover:text-primary no-underline",
-                  heading.depth === 2 ? "text-foreground font-medium" : "text-muted-foreground"
+                  heading.depth === 2 ? "text-highlighted font-medium" : "text-muted"
                 ]}
                 data-rla-toc-link
               >

package/src/components/table-of-contents/table-of-contents.theme.ts

@@ -1,67 +1,64 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTableOfContentsTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "container",
-      "top",
-      "bottom",
-      "trigger",
-      "title",
-      "trailing",
-      "trailingIcon",
-      "content",
-      "list",
-      "listWithChildren",
-      "item",
-      "itemWithChildren",
-      "link",
-      "linkText",
-      "indicator",
-      "indicatorLine",
-      "indicatorActive"
-    ],
-    base: {
-      root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 xl:mx-0 overflow-y-auto overflow-x-hidden max-h-[calc(100vh-var(--ui-header-height))]",
-      container:
-        "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
-      top: "",
-      bottom: "hidden lg:flex lg:flex-col gap-6",
-      trigger:
-        "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
-      title: "truncate",
-      trailing: "ms-auto inline-flex gap-1.5 items-center",
-      trailingIcon:
-        "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
-      content:
-        "relative data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out overflow-hidden focus:outline-none",
-      list: "min-w-0",
-      listWithChildren: "ms-3",
-      item: "min-w-0",
-      itemWithChildren: "",
-      link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
-      linkText: "truncate",
-      indicator: "",
-      indicatorLine: "",
-      indicatorActive: ""
-    },
-    variants: {
-      interactive: {
-        true: {
-          root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
-        },
-        false: { root: "" }
+export const tableOfContentsTheme = defineTheme("table-of-contents", {
+  slots: [
+    "root",
+    "container",
+    "top",
+    "bottom",
+    "trigger",
+    "title",
+    "trailing",
+    "trailingIcon",
+    "content",
+    "list",
+    "listWithChildren",
+    "item",
+    "itemWithChildren",
+    "link",
+    "linkText",
+    "indicator",
+    "indicatorLine",
+    "indicatorActive"
+  ],
+  base: {
+    root: "sticky top-(--rl-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 xl:mx-0 overflow-y-auto overflow-x-hidden max-h-[calc(100vh-var(--rl-header-height))]",
+    container:
+      "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
+    top: "",
+    bottom: "hidden lg:flex lg:flex-col gap-6",
+    trigger:
+      "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
+    title: "truncate",
+    trailing: "ms-auto inline-flex gap-1.5 items-center",
+    trailingIcon:
+      "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
+    content:
+      "relative data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out overflow-hidden focus:outline-none",
+    list: "min-w-0",
+    listWithChildren: "ms-3",
+    item: "min-w-0",
+    itemWithChildren: "",
+    link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
+    linkText: "truncate",
+    indicator: "",
+    indicatorLine: "",
+    indicatorActive: ""
+  },
+  variants: {
+    interactive: {
+      true: {
+        root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
       },
-      overlay: {
-        true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
-        false: { root: "" }
-      }
+      false: { root: "" }
     },
-    defaultVariants: {
-      interactive: false,
-      overlay: false
+    overlay: {
+      true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
+      false: { root: "" }
     }
-  })
-
-export default createTableOfContentsTheme()
+  },
+  defaultVariants: {
+    interactive: false,
+    overlay: false
+  }
+})