@dalexto/lexsys-registry 0.0.3 → 0.0.4

package/README.md

@@ -4,6 +4,7 @@
 **Type:** Package README
 **Source of truth for:** Package role, public exports, item structure, template sync
 **Verified against:** `packages/registry/src/`
+**Last reviewed:** 2026-05-30
 
 ---
 

package/dist/index.js

@@ -20,7 +20,6 @@ var getInstallLayer = (item) => {
 var accordionRegistryItem = {
   name: "accordion",
   canonicalName: "Accordion",
-  version: "0.0.1",
   type: "component",
   category: "data-display",
   aliases: ["collapse"],
@@ -56,7 +55,6 @@ var accordionRegistryItem = {
 var alertDialogRegistryItem = {
   name: "alert-dialog",
   canonicalName: "AlertDialog",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -93,7 +91,6 @@ var alertDialogRegistryItem = {
 var alertRegistryItem = {
   name: "alert",
   canonicalName: "Alert",
-  version: "0.0.1",
   type: "component",
   category: "feedback",
   aliases: ["notice", "message"],
@@ -124,7 +121,6 @@ var alertRegistryItem = {
 var avatarRegistryItem = {
   name: "avatar",
   canonicalName: "Avatar",
-  version: "0.0.1",
   type: "component",
   category: "data-display",
   aliases: [],
@@ -160,7 +156,6 @@ var avatarRegistryItem = {
 var badgeRegistryItem = {
   name: "badge",
   canonicalName: "Badge",
-  version: "0.0.1",
   type: "component",
   category: "data-display",
   aliases: ["tag", "label"],
@@ -191,7 +186,6 @@ var badgeRegistryItem = {
 var buttonRegistryItem = {
   name: "button",
   canonicalName: "Button",
-  version: "0.0.1",
   type: "component",
   category: "actions",
   aliases: ["btn"],
@@ -227,7 +221,6 @@ var buttonRegistryItem = {
 var cardRegistryItem = {
   name: "card",
   canonicalName: "Card",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: ["panel", "surface"],
@@ -258,7 +251,6 @@ var cardRegistryItem = {
 var checkboxRegistryItem = {
   name: "checkbox",
   canonicalName: "Checkbox",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: ["check"],
@@ -294,7 +286,6 @@ var checkboxRegistryItem = {
 var collapsibleRegistryItem = {
   name: "collapsible",
   canonicalName: "Collapsible",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: [],
@@ -331,7 +322,6 @@ var collapsibleRegistryItem = {
 var contextMenuRegistryItem = {
   name: "context-menu",
   canonicalName: "ContextMenu",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -368,7 +358,6 @@ var contextMenuRegistryItem = {
 var dialogRegistryItem = {
   name: "dialog",
   canonicalName: "Dialog",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -405,7 +394,6 @@ var dialogRegistryItem = {
 var drawerRegistryItem = {
   name: "drawer",
   canonicalName: "Drawer",
-  version: "0.0.2",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -442,7 +430,6 @@ var drawerRegistryItem = {
 var fieldRegistryItem = {
   name: "field",
   canonicalName: "Field",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -478,7 +465,6 @@ var fieldRegistryItem = {
 var fieldsetRegistryItem = {
   name: "fieldset",
   canonicalName: "Fieldset",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -514,7 +500,6 @@ var fieldsetRegistryItem = {
 var formRegistryItem = {
   name: "form",
   canonicalName: "Form",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -550,7 +535,6 @@ var formRegistryItem = {
 var inputRegistryItem = {
   name: "input",
   canonicalName: "Input",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: ["ipt"],
@@ -586,7 +570,6 @@ var inputRegistryItem = {
 var menuRegistryItem = {
   name: "menu",
   canonicalName: "Menu",
-  version: "0.0.2",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -623,7 +606,6 @@ var menuRegistryItem = {
 var menubarRegistryItem = {
   name: "menubar",
   canonicalName: "Menubar",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -659,7 +641,6 @@ var menubarRegistryItem = {
 var meterRegistryItem = {
   name: "meter",
   canonicalName: "Meter",
-  version: "0.0.1",
   type: "component",
   category: "data-display",
   aliases: [],
@@ -695,7 +676,6 @@ var meterRegistryItem = {
 var numberFieldRegistryItem = {
   name: "number-field",
   canonicalName: "NumberField",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -731,7 +711,6 @@ var numberFieldRegistryItem = {
 var navigationMenuRegistryItem = {
   name: "navigation-menu",
   canonicalName: "NavigationMenu",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -768,7 +747,6 @@ var navigationMenuRegistryItem = {
 var popoverRegistryItem = {
   name: "popover",
   canonicalName: "Popover",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -805,7 +783,6 @@ var popoverRegistryItem = {
 var previewCardRegistryItem = {
   name: "preview-card",
   canonicalName: "PreviewCard",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -841,7 +818,6 @@ var previewCardRegistryItem = {
 var progressRegistryItem = {
   name: "progress",
   canonicalName: "Progress",
-  version: "0.0.2",
   type: "component",
   category: "feedback",
   aliases: ["progress-bar"],
@@ -877,7 +853,6 @@ var progressRegistryItem = {
 var radioGroupRegistryItem = {
   name: "radio-group",
   canonicalName: "RadioGroup",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: ["radio"],
@@ -913,7 +888,6 @@ var radioGroupRegistryItem = {
 var selectRegistryItem = {
   name: "select",
   canonicalName: "Select",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -950,7 +924,6 @@ var selectRegistryItem = {
 var separatorRegistryItem = {
   name: "separator",
   canonicalName: "Separator",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: ["divider"],
@@ -986,7 +959,6 @@ var separatorRegistryItem = {
 var sliderRegistryItem = {
   name: "slider",
   canonicalName: "Slider",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: ["range"],
@@ -1022,7 +994,6 @@ var sliderRegistryItem = {
 var switchRegistryItem = {
   name: "switch",
   canonicalName: "Switch",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: ["toggle-switch"],
@@ -1054,11 +1025,40 @@ var switchRegistryItem = {
   target: "src/components/ui/Switch"
 };
 
+// src/items/table.ts
+var tableRegistryItem = {
+  name: "table",
+  canonicalName: "Table",
+  type: "component",
+  category: "data-display",
+  aliases: [],
+  files: [
+    "primitives/Table/Table.tsx",
+    "primitives/Table/Table.types.ts",
+    "primitives/Table/Table.variants.ts"
+  ],
+  remoteFiles: [
+    {
+      path: "primitives/Table/Table.tsx"
+    },
+    {
+      path: "primitives/Table/Table.types.ts"
+    },
+    {
+      path: "primitives/Table/Table.variants.ts"
+    }
+  ],
+  dependencies: ["class-variance-authority", "clsx", "tailwind-merge"],
+  registryDependencies: [],
+  utilities: ["cn"],
+  styles: ["theme"],
+  target: "src/components/ui/Table"
+};
+
 // src/items/tabs.ts
 var tabsRegistryItem = {
   name: "tabs",
   canonicalName: "Tabs",
-  version: "0.0.1",
   type: "component",
   category: "navigation",
   aliases: ["tab"],
@@ -1094,7 +1094,6 @@ var tabsRegistryItem = {
 var textareaRegistryItem = {
   name: "textarea",
   canonicalName: "Textarea",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1130,7 +1129,6 @@ var textareaRegistryItem = {
 var toastRegistryItem = {
   name: "toast",
   canonicalName: "Toast",
-  version: "0.0.1",
   type: "component",
   category: "feedback",
   aliases: [],
@@ -1167,7 +1165,6 @@ var toastRegistryItem = {
 var toggleGroupRegistryItem = {
   name: "toggle-group",
   canonicalName: "ToggleGroup",
-  version: "0.0.1",
   type: "component",
   category: "actions",
   aliases: [],
@@ -1203,7 +1200,6 @@ var toggleGroupRegistryItem = {
 var toggleRegistryItem = {
   name: "toggle",
   canonicalName: "Toggle",
-  version: "0.0.1",
   type: "component",
   category: "actions",
   aliases: ["toggle-button"],
@@ -1239,7 +1235,6 @@ var toggleRegistryItem = {
 var toolbarRegistryItem = {
   name: "toolbar",
   canonicalName: "Toolbar",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: [],
@@ -1275,7 +1270,6 @@ var toolbarRegistryItem = {
 var tooltipRegistryItem = {
   name: "tooltip",
   canonicalName: "Tooltip",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: ["hint"],
@@ -1311,7 +1305,6 @@ var tooltipRegistryItem = {
 var scrollAreaRegistryItem = {
   name: "scroll-area",
   canonicalName: "ScrollArea",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: ["scroll"],
@@ -1347,7 +1340,6 @@ var scrollAreaRegistryItem = {
 var dashboardShellRegistryItem = {
   name: "dashboard-shell",
   canonicalName: "DashboardShell",
-  version: "0.0.2",
   type: "block",
   category: "layout",
   aliases: ["dashboard-template"],
@@ -1367,7 +1359,6 @@ var dashboardShellRegistryItem = {
 var formFieldRegistryItem = {
   name: "form-field",
   canonicalName: "FormField",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: [],
@@ -1387,7 +1378,6 @@ var formFieldRegistryItem = {
 var settingsPanelRegistryItem = {
   name: "settings-panel",
   canonicalName: "SettingsPanel",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: ["settings-section"],
@@ -1407,7 +1397,6 @@ var settingsPanelRegistryItem = {
 var sidebarRegistryItem = {
   name: "sidebar",
   canonicalName: "Sidebar",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: [],
@@ -1427,7 +1416,6 @@ var sidebarRegistryItem = {
 var autocompleteRegistryItem = {
   name: "autocomplete",
   canonicalName: "Autocomplete",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1464,7 +1452,6 @@ var autocompleteRegistryItem = {
 var checkboxGroupRegistryItem = {
   name: "checkbox-group",
   canonicalName: "CheckboxGroup",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1500,7 +1487,6 @@ var checkboxGroupRegistryItem = {
 var comboboxRegistryItem = {
   name: "combobox",
   canonicalName: "Combobox",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1537,7 +1523,6 @@ var comboboxRegistryItem = {
 var authFormRegistryItem = {
   name: "auth-form",
   canonicalName: "AuthForm",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: ["login-form"],
@@ -1557,7 +1542,6 @@ var authFormRegistryItem = {
 var commandPaletteRegistryItem = {
   name: "command-palette",
   canonicalName: "CommandPalette",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: ["command-menu", "kbar"],
@@ -1577,7 +1561,6 @@ var commandPaletteRegistryItem = {
 var otpFieldRegistryItem = {
   name: "otp-field",
   canonicalName: "OtpField",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1613,7 +1596,6 @@ var otpFieldRegistryItem = {
 var emptyRegistryItem = {
   name: "empty",
   canonicalName: "Empty",
-  version: "0.0.3",
   type: "block",
   category: "layout",
   aliases: ["empty-state"],
@@ -1660,6 +1642,7 @@ var registryItems = [
   separatorRegistryItem,
   sliderRegistryItem,
   switchRegistryItem,
+  tableRegistryItem,
   tabsRegistryItem,
   textareaRegistryItem,
   toastRegistryItem,
@@ -1727,9 +1710,6 @@ var validateRegistryItem = (item) => {
   if (isEmpty(item.canonicalName)) {
     throw new Error(`Registry item "${item.name}" has invalid 'canonicalName'`);
   }
-  if (isEmpty(item.version)) {
-    throw new Error(`Registry item "${item.name}" has invalid 'version'`);
-  }
   if (!item.files || !item.files.length) {
     throw new Error(
       `Registry item "${item.name}" must define at least one file`
@@ -2182,4 +2162,4 @@ var registryManifest = {
   utilities: registryUtilities
 };
 
-export { accordionRegistryItem, alertDialogRegistryItem, alertRegistryItem, authFormRegistryItem, autocompleteRegistryItem, avatarRegistryItem, badgeRegistryItem, buttonRegistryItem, cardRegistryItem, checkboxGroupRegistryItem, checkboxRegistryItem, cnRegistryUtility, collapsibleRegistryItem, comboboxRegistryItem, commandPaletteRegistryItem, contextMenuRegistryItem, dashboardShellRegistryItem, dialogRegistryItem, drawerRegistryItem, emptyRegistryItem, fieldRegistryItem, fieldsetRegistryItem, formFieldRegistryItem, formRegistryItem, getInstallLayer, inputRegistryItem, menuRegistryItem, menubarRegistryItem, meterRegistryItem, navigationMenuRegistryItem, numberFieldRegistryItem, otpFieldRegistryItem, popoverRegistryItem, previewCardRegistryItem, progressRegistryItem, radioGroupRegistryItem, registryItems, registryManifest, registryStyles, registryUtilities, registryVersion, scrollAreaRegistryItem, selectRegistryItem, separatorRegistryItem, settingsPanelRegistryItem, sidebarRegistryItem, sliderRegistryItem, switchRegistryItem, tabsRegistryItem, textareaRegistryItem, themeRegistryStyle, toastRegistryItem, toggleGroupRegistryItem, toggleRegistryItem, toolbarRegistryItem, tooltipRegistryItem, validateRegistry, validateRegistryItem };
+export { accordionRegistryItem, alertDialogRegistryItem, alertRegistryItem, authFormRegistryItem, autocompleteRegistryItem, avatarRegistryItem, badgeRegistryItem, buttonRegistryItem, cardRegistryItem, checkboxGroupRegistryItem, checkboxRegistryItem, cnRegistryUtility, collapsibleRegistryItem, comboboxRegistryItem, commandPaletteRegistryItem, contextMenuRegistryItem, dashboardShellRegistryItem, dialogRegistryItem, drawerRegistryItem, emptyRegistryItem, fieldRegistryItem, fieldsetRegistryItem, formFieldRegistryItem, formRegistryItem, getInstallLayer, inputRegistryItem, menuRegistryItem, menubarRegistryItem, meterRegistryItem, navigationMenuRegistryItem, numberFieldRegistryItem, otpFieldRegistryItem, popoverRegistryItem, previewCardRegistryItem, progressRegistryItem, radioGroupRegistryItem, registryItems, registryManifest, registryStyles, registryUtilities, registryVersion, scrollAreaRegistryItem, selectRegistryItem, separatorRegistryItem, settingsPanelRegistryItem, sidebarRegistryItem, sliderRegistryItem, switchRegistryItem, tableRegistryItem, tabsRegistryItem, textareaRegistryItem, themeRegistryStyle, toastRegistryItem, toggleGroupRegistryItem, toggleRegistryItem, toolbarRegistryItem, tooltipRegistryItem, validateRegistry, validateRegistryItem };

package/dist/items/index.d.ts

@@ -47,4 +47,5 @@ export { authFormRegistryItem } from "./auth-form.js";
 export { commandPaletteRegistryItem } from "./command-palette.js";
 export { otpFieldRegistryItem } from "./otp-field.js";
 export { emptyRegistryItem } from "./empty.js";
+export { tableRegistryItem } from "./table.js";
 export declare const registryItems: RegistryItem[];

package/dist/items/table.d.ts

@@ -0,0 +1,7 @@
+/**
+ * table.ts
+ *
+ * Registry metadata for the Table component.
+ */
+import type { RegistryItem } from "../registry.types.js";
+export declare const tableRegistryItem: RegistryItem;

package/dist/registry.types.d.ts

@@ -26,7 +26,6 @@ export type RegistryItemCategory = "actions" | "forms" | "overlays" | "navigatio
 export interface RegistryItem {
     name: string;
     canonicalName: string;
-    version: string;
     type: RegistryItemType;
     category: RegistryItemCategory;
     aliases: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dalexto/lexsys-registry",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Install metadata and templates for the Lexsys registry-first UI framework",
   "type": "module",
   "license": "MIT",

package/templates/primitives/Table/Table.tsx

@@ -0,0 +1,121 @@
+/**
+ * Table.tsx
+ *
+ * Reference Table component implementation.
+ */
+
+import type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeadProps,
+  TableHeaderProps,
+  TableProps,
+  TableRowProps,
+} from "./Table.types"
+import {
+  tableBodyClassName,
+  tableCaptionClassName,
+  tableCellClassName,
+  tableFooterClassName,
+  tableHeadClassName,
+  tableHeaderClassName,
+  tableRowClassName,
+  tableVariants,
+  tableWrapperClassName,
+} from "./Table.variants"
+import { cn } from "@/lib/utils"
+
+const Table = ({ ref, variant, className, ...props }: TableProps) => {
+  return (
+    <div className={tableWrapperClassName}>
+      <table
+        ref={ref}
+        className={cn(tableVariants({ variant }), className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+Table.displayName = "Table"
+
+const TableHeader = ({ ref, className, ...props }: TableHeaderProps) => {
+  return (
+    <thead
+      ref={ref}
+      className={cn(tableHeaderClassName, className)}
+      {...props}
+    />
+  )
+}
+
+TableHeader.displayName = "TableHeader"
+
+const TableBody = ({ ref, className, ...props }: TableBodyProps) => {
+  return (
+    <tbody ref={ref} className={cn(tableBodyClassName, className)} {...props} />
+  )
+}
+
+TableBody.displayName = "TableBody"
+
+const TableFooter = ({ ref, className, ...props }: TableFooterProps) => {
+  return (
+    <tfoot
+      ref={ref}
+      className={cn(tableFooterClassName, className)}
+      {...props}
+    />
+  )
+}
+
+TableFooter.displayName = "TableFooter"
+
+const TableRow = ({ ref, className, ...props }: TableRowProps) => {
+  return (
+    <tr ref={ref} className={cn(tableRowClassName, className)} {...props} />
+  )
+}
+
+TableRow.displayName = "TableRow"
+
+const TableHead = ({ ref, className, ...props }: TableHeadProps) => {
+  return (
+    <th ref={ref} className={cn(tableHeadClassName, className)} {...props} />
+  )
+}
+
+TableHead.displayName = "TableHead"
+
+const TableCell = ({ ref, className, ...props }: TableCellProps) => {
+  return (
+    <td ref={ref} className={cn(tableCellClassName, className)} {...props} />
+  )
+}
+
+TableCell.displayName = "TableCell"
+
+const TableCaption = ({ ref, className, ...props }: TableCaptionProps) => {
+  return (
+    <caption
+      ref={ref}
+      className={cn(tableCaptionClassName, className)}
+      {...props}
+    />
+  )
+}
+
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/templates/primitives/Table/Table.types.ts

@@ -0,0 +1,68 @@
+import type { Ref } from "react"
+/**
+ * Table.types.ts
+ *
+ * Public and internal types for Table component.
+ */
+
+import type {
+  HTMLAttributes,
+  TableHTMLAttributes,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from "react"
+
+export type TableVariant = "default" | "striped" | "bordered"
+
+export interface TableProps extends Omit<
+  TableHTMLAttributes<HTMLTableElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableElement>
+  variant?: TableVariant
+  className?: string
+}
+
+export interface TableSectionProps extends Omit<
+  HTMLAttributes<HTMLTableSectionElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableSectionElement>
+  className?: string
+}
+
+export type TableHeaderProps = TableSectionProps
+export type TableBodyProps = TableSectionProps
+export type TableFooterProps = TableSectionProps
+
+export interface TableRowProps extends Omit<
+  HTMLAttributes<HTMLTableRowElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableRowElement>
+  className?: string
+}
+
+export interface TableHeadProps extends Omit<
+  ThHTMLAttributes<HTMLTableCellElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableCellElement>
+  className?: string
+}
+
+export interface TableCellProps extends Omit<
+  TdHTMLAttributes<HTMLTableCellElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableCellElement>
+  className?: string
+}
+
+export interface TableCaptionProps extends Omit<
+  HTMLAttributes<HTMLTableCaptionElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableCaptionElement>
+  className?: string
+}

package/templates/primitives/Table/Table.variants.ts

@@ -0,0 +1,51 @@
+/**
+ * Table.variants.ts
+ *
+ * Defines Table visual slots using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const tableVariants = cva(
+  [
+    "w-full caption-bottom border-collapse text-(length:--lex-table-cell-font-size)",
+    "text-(--lex-table-foreground)",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "",
+        striped:
+          "[&_tbody_tr:nth-child(even)]:bg-(--lex-table-row-striped-background)",
+        bordered:
+          "border border-(--lex-table-border-color) [&_th]:border [&_td]:border [&_th]:border-(--lex-table-border-color) [&_td]:border-(--lex-table-border-color)",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export const tableWrapperClassName = "relative w-full overflow-x-auto"
+
+export const tableCaptionClassName =
+  "mt-(--lex-table-cell-padding-y) text-(length:--lex-table-caption-font-size) leading-(--lex-table-caption-font-line-height) text-(--lex-table-caption-foreground)"
+
+export const tableHeaderClassName =
+  "[&_tr]:border-b [&_tr]:border-(--lex-table-border-color)"
+
+export const tableBodyClassName =
+  "[&_tr:last-child]:border-0 [&_tr]:border-b [&_tr]:border-(--lex-table-border-color)"
+
+export const tableFooterClassName =
+  "border-t border-(--lex-table-border-color) bg-(--lex-table-footer-background) font-medium [&_tr]:last:border-b-0"
+
+export const tableRowClassName =
+  "border-b border-(--lex-table-border-color) transition-colors hover:bg-(--lex-table-head-background)/50 data-[state=selected]:bg-(--lex-table-head-background)"
+
+export const tableHeadClassName =
+  "h-10 px-(--lex-table-cell-padding-x) py-(--lex-table-cell-padding-y) text-left align-middle font-(--lex-table-head-font-weight) text-(length:--lex-table-head-font-size) leading-(--lex-table-head-font-line-height) text-(--lex-table-head-foreground) [&:has([role=checkbox])]:pr-0"
+
+export const tableCellClassName =
+  "px-(--lex-table-cell-padding-x) py-(--lex-table-cell-padding-y) align-middle leading-(--lex-table-cell-font-line-height) [&:has([role=checkbox])]:pr-0"

package/templates/styles/tokens.css

@@ -1324,6 +1324,24 @@
   --lex-switch-focus-ring-offset: var(--lex-outline-offset-focus);
   --lex-switch-transition-duration: var(--lex-duration-control);
   --lex-switch-transition-easing: var(--lex-easing-control);
+  --lex-table-background: var(--lex-color-background-surface);
+  --lex-table-foreground: var(--lex-color-text-primary);
+  --lex-table-border-color: var(--lex-border-default);
+  --lex-table-caption-foreground: var(--lex-color-text-secondary);
+  --lex-table-caption-font-size: var(--lex-typography-body-sm-font-size);
+  --lex-table-caption-font-line-height: var(--lex-typography-body-sm-line-height);
+  --lex-table-head-background: var(--lex-color-background-subtle);
+  --lex-table-head-foreground: var(--lex-color-text-primary);
+  --lex-table-head-font-size: var(--lex-typography-body-sm-font-size);
+  --lex-table-head-font-weight: var(--lex-typography-body-sm-font-weight);
+  --lex-table-head-font-line-height: var(--lex-typography-body-sm-line-height);
+  --lex-table-cell-font-size: var(--lex-typography-body-sm-font-size);
+  --lex-table-cell-font-line-height: var(--lex-typography-body-sm-line-height);
+  --lex-table-cell-padding-x: var(--lex-space-surface-md);
+  --lex-table-cell-padding-y: var(--lex-space-surface-sm);
+  --lex-table-row-striped-background: var(--lex-color-background-subtle);
+  --lex-table-footer-background: var(--lex-color-background-subtle);
+  --lex-table-footer-foreground: var(--lex-color-text-secondary);
   --lex-tabs-gap: var(--lex-space-control-gap-lg);
   --lex-tabs-list-background: var(--lex-color-background-subtle);
   --lex-tabs-list-radius: var(--lex-radius-control);