@usefragments/ui 1.0.2 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/ui",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -155,13 +155,9 @@
     "remark-gfm": ">=4.0.0",
     "shiki": ">=1.0.0"
   },
-  "scarfSettings": {
-    "defaultOptIn": true
-  },
   "dependencies": {
-    "@base-ui/react": "^1.5.0",
-    "@phosphor-icons/react": "^2.1.10",
-    "@scarf/scarf": "^1.4.0"
+    "@base-ui/react": "1.6.0",
+    "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^8",
@@ -194,7 +190,7 @@
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@usefragments/core": "1.0.0"
+    "@usefragments/core": "1.2.0"
   },
   "files": [
     "src",

package/src/assets/fragments-wordmark.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+// Baked from the brand lockup artwork (star + wordmark), trimmed to content and
+// stored as a monochrome alpha mask so it can be filled with currentColor. That
+// keeps the lockup themeable — it renders in the current text color, matching
+// the light and dark brand versions from a single asset.
+const WORDMARK_MASK =
+  "data:image/png;base64,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";
+
+/** Aspect ratio (width / height) of the trimmed lockup. */
+const WORDMARK_ASPECT = 4.000;
+
+export interface FragmentsWordmarkProps {
+  /** Rendered height in px; width follows the lockup aspect ratio. */
+  height?: number;
+  /** Optional className */
+  className?: string;
+}
+
+/**
+ * The Fragments logo lockup — star + wordmark as one image. Use this anywhere
+ * the brand is shown with its name, instead of the icon beside a text label.
+ * Themeable: the artwork is a CSS mask filled with currentColor.
+ */
+export function FragmentsWordmark({ height = 20, className }: FragmentsWordmarkProps) {
+  return (
+    <span
+      role="img"
+      aria-label="Fragments"
+      className={className}
+      style={{
+        display: "inline-block",
+        height,
+        width: height * WORDMARK_ASPECT,
+        backgroundColor: "currentColor",
+        maskImage: `url("${WORDMARK_MASK}")`,
+        WebkitMaskImage: `url("${WORDMARK_MASK}")`,
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskSize: "contain",
+        WebkitMaskSize: "contain",
+        maskPosition: "left center",
+        WebkitMaskPosition: "left center",
+      }}
+    />
+  );
+}

package/src/components/Accordion/index.tsx

@@ -184,7 +184,7 @@ function AccordionItem({
   className,
   ...htmlProps
 }: AccordionItemProps) {
-  const { openItems } = useAccordionContext();
+  const { openItems, toggle } = useAccordionContext();
   const isOpen = openItems.includes(value);
   const baseId = React.useId();
   const triggerId = `accordion-trigger-${baseId}`;
@@ -201,7 +201,17 @@ function AccordionItem({
 
   return (
     <AccordionItemContext.Provider value={{ value, isOpen, disabled, triggerId, contentId }}>
-      <BaseCollapsible.Root open={isOpen} disabled={disabled}>
+      <BaseCollapsible.Root
+        open={isOpen}
+        disabled={disabled}
+        onOpenChange={(nextOpen, eventDetails) => {
+          // Trigger presses stay in AccordionTrigger so its public onClick can cancel them.
+          // Base owns the browser-only beforematch event used by hiddenUntilFound panels.
+          if (eventDetails.event.type === "beforematch" && nextOpen !== isOpen) {
+            toggle(value);
+          }
+        }}
+      >
         <div
           {...htmlProps}
           className={classes}
@@ -285,7 +295,7 @@ function AccordionContent({
       data-state={isOpen ? "open" : "closed"}
       role="region"
       aria-labelledby={triggerId}
-      keepMounted={keepMounted}
+      keepMounted={keepMounted || hiddenUntilFound}
       hiddenUntilFound={hiddenUntilFound}
     >
       <div className={styles.contentInner}>{children}</div>

package/src/components/Alert/Alert.module.scss

@@ -3,7 +3,9 @@
 
 .alert {
   display: flex;
-  align-items: flex-start;
+  // Single-line alerts (icon + one line, no title) read best vertically
+  // centered. Multi-line alerts top-align instead — see `:has(.title)` below.
+  align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
   padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
@@ -12,6 +14,12 @@
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
+// With a title (title + description), the block is multi-line: top-align so
+// the icon and close sit with the first line rather than the block's centre.
+.alert:has(.title) {
+  align-items: flex-start;
+}
+
 // Severity variants
 .info {
   background: var(--fui-color-info-bg, $fui-color-info-bg);
@@ -47,10 +55,15 @@
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
   flex-shrink: 0;
-  margin-top: var(--fui-space-px, $fui-space-px);
   color: var(--fui-text-inverse, $fui-text-inverse);
 }
 
+// Only nudge the icon down to meet the first text line when the alert is
+// multi-line; centered single-line alerts need no offset.
+.alert:has(.title) .icon {
+  margin-top: var(--fui-space-px, $fui-space-px);
+}
+
 .info .icon {
   background-color: var(--fui-color-info-text, $fui-color-info-text);
 }

package/src/components/AppShell/AppShell.module.scss

@@ -72,7 +72,10 @@
   grid-area: header;
   position: sticky;
   top: 0;
-  height: var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
+  height: var(
+    --appshell-header-height,
+    var(--fui-appshell-header-height, $fui-appshell-header-height)
+  );
   z-index: var(--fui-header-z-index, $fui-header-z-index);
   background-color: inherit;
 
@@ -88,9 +91,22 @@
 .sidebar {
   grid-area: sidebar;
   position: sticky;
-  top: var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
-  height: calc(100vh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)));
-  height: calc(100dvh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)));
+  top: var(
+    --appshell-header-height,
+    var(--fui-appshell-header-height, $fui-appshell-header-height)
+  );
+  height: calc(
+    100vh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      )
+  );
+  height: calc(
+    100dvh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      )
+  );
   z-index: 30;
   overflow: hidden;
   background-color: inherit;
@@ -171,9 +187,8 @@
   border: 1px solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
   background-color: var(--fui-app-main-bg, var(--fui-main-bg, #{$fui-main-bg}));
-  box-shadow:
-    inset 0 1px 0
-      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
+  box-shadow: inset 0 1px 0
+    color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
   overflow: hidden auto;
 
   @include below-md {
@@ -185,6 +200,25 @@
   }
 }
 
+// Canonical spacing scale (shared with Card/Box/Stack/Grid): sm=2 md=3 lg=4.
+// Keep these compound rules after `.mainFloating`: the explicit padding prop
+// owns the content inset even when the floating surface supplies its default.
+.main.paddingNone {
+  padding: 0;
+}
+
+.main.paddingSm {
+  padding: var(--fui-space-2, $fui-space-2);
+}
+
+.main.paddingMd {
+  padding: var(--fui-space-3, $fui-space-3);
+}
+
+.main.paddingLg {
+  padding: var(--fui-space-4, $fui-space-4);
+}
+
 // ============================================
 // Aside (Right Panel)
 // ============================================
@@ -192,9 +226,22 @@
 .aside {
   grid-area: aside;
   position: sticky;
-  top: var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
-  height: calc(100vh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)));
-  height: calc(100dvh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)));
+  top: var(
+    --appshell-header-height,
+    var(--fui-appshell-header-height, $fui-appshell-header-height)
+  );
+  height: calc(
+    100vh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      )
+  );
+  height: calc(
+    100dvh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      )
+  );
   width: var(--aside-width, 280px);
   min-height: 0; // Allow shrinking in grid
   z-index: 30;
@@ -216,16 +263,27 @@
   // Override the explicit width so the aside fills its grid cell
   // and the margin creates visible inset space from the viewport edge.
   width: auto;
-  height: calc(100vh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)) - var(--fui-space-1, $fui-space-1) * 2);
-  height: calc(100dvh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)) - var(--fui-space-1, $fui-space-1) * 2);
+  height: calc(
+    100vh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      ) - var(--fui-space-1, $fui-space-1) *
+      2
+  );
+  height: calc(
+    100dvh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      ) - var(--fui-space-1, $fui-space-1) *
+      2
+  );
   margin: var(--fui-space-1, $fui-space-1) var(--fui-space-1, $fui-space-1)
     var(--fui-space-1, $fui-space-1) 0;
   border: 1px solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
   background-color: var(--fui-panel-bg, inherit);
-  box-shadow:
-    inset 0 1px 0
-      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
+  box-shadow: inset 0 1px 0
+    color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
   overflow: hidden;
 
   @include below-md {

package/src/components/AppShell/index.tsx

@@ -448,7 +448,7 @@ function AppShellMain({
 
   const classes = [
     styles.main,
-    padding !== "none" && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
+    styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
     resolvedVariant === "floating" && styles.mainFloating,
     className,
   ]

package/src/components/Button/Button.module.scss

@@ -29,6 +29,14 @@
   white-space: nowrap;
   user-select: none;
 
+  // A composed link — `Button asChild` cloning an <a>, or an anchor rendered
+  // as a child — must wear the button's own foreground, never the global
+  // naked-link accent color (which would collide, e.g. accent-on-accent).
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
   &:hover:not(:disabled):not([data-disabled]) {
     border-color: var(--_button-border-hover);
     background: var(--_button-bg-hover);
@@ -173,22 +181,17 @@
 }
 
 .danger {
-  --_button-bg: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 82%, white 18%) 0%,
-    var(--fui-color-danger, #{$fui-color-danger}) 52%,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 86%, black 14%) 100%
-  );
-  --_button-bg-hover: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 76%, white 24%) 0%,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 94%, black 6%) 52%,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 78%, black 22%) 100%
+  // Flat danger fill — no gradient. Hover/active darken the solid colour.
+  --_button-bg: var(--fui-color-danger, #{$fui-color-danger});
+  --_button-bg-hover: color-mix(
+    in srgb,
+    var(--fui-color-danger, #{$fui-color-danger}) 88%,
+    black 12%
   );
-  --_button-bg-active: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 72%, black 28%) 0%,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 82%, black 18%) 100%
+  --_button-bg-active: color-mix(
+    in srgb,
+    var(--fui-color-danger, #{$fui-color-danger}) 80%,
+    black 20%
   );
   --_button-border: color-mix(
     in srgb,
@@ -213,11 +216,7 @@
   --_button-border: var(--fui-button-neutral-border);
   --_button-border-hover: var(--fui-button-neutral-border-hover);
   --_button-color: var(--fui-button-neutral-color, var(--fui-text-primary, #{$fui-text-primary}));
-  --_button-shadow: inset 0 1px 0
-    light-dark(
-      color-mix(in srgb, white 72%, transparent),
-      color-mix(in srgb, white 5%, transparent)
-    );
+  --_button-shadow: var(--fui-button-outlined-shadow, #{$fui-button-outlined-shadow});
   --_button-shadow-hover: var(--fui-button-neutral-shadow);
   --_button-shadow-active: var(--fui-button-neutral-shadow-active);
 }

package/src/components/Card/Card.module.scss

@@ -129,15 +129,15 @@
   margin-bottom: var(--fui-space-2, $fui-space-2);
 }
 
-// Full-bleed panel-header bar: fixed 40px rail with horizontal padding and a
-// hairline bottom divider. No trailing margin — it sits flush above the
+// Full-bleed panel-header region with a 40px minimum height, canonical inset,
+// and a hairline bottom divider. No trailing margin — it sits flush above the
 // panel body, which manages its own padding. Use inside `variant="panel"`.
 .headerDivided {
   display: flex;
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
   min-height: 2.857rem; // 40px
-  padding: 0 var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-space-2, $fui-space-2);
   margin-bottom: 0;
   border-bottom: 1px solid var(--fui-border, $fui-border);
 }

package/src/components/Card/index.tsx

@@ -34,9 +34,9 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, "chil
 
 export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Renders the header as a divided bar: fixed height, horizontal padding,
-   * hairline bottom border, no trailing margin. Used with `variant="panel"`
-   * for dashboard-style panel headers. */
+  /** Renders the header as a divided region with a minimum height, canonical
+   * inset, hairline bottom border, and no trailing margin. Used with
+   * `variant="panel"` for dashboard-style panel headers. */
   divided?: boolean;
 }
 

package/src/components/CodeBlock/CodeBlock.module.scss

@@ -2,7 +2,8 @@
 @use "../../tokens/mixins" as *;
 
 // Local component tokens (code blocks always dark — no light variant).
-// $fui-code-bg stays global (shared with Markdown's <pre> styling).
+// Background and selection stay global so apps can theme CodeBlock and
+// Markdown consistently without replacing either component.
 $fui-code-text: #e2e2e5 !default;
 $fui-code-text-muted: #8a8a9a !default;
 $fui-code-border: rgba(255, 255, 255, 0.06) !default;
@@ -11,12 +12,6 @@ $fui-code-tab-text-active: #e2e2e5 !default;
 $fui-code-copy-bg: rgba(255, 255, 255, 0.06) !default;
 $fui-code-copy-bg-hover: rgba(255, 255, 255, 0.12) !default;
 $fui-code-highlight-bg: rgba(255, 255, 255, 0.06) !default;
-// Selection tint derived from the primary action blue instead of semantic state colors.
-$fui-code-selection-bg: color-mix(
-  in srgb,
-  var(--fui-button-primary-base, #0a84ff) 30%,
-  transparent
-) !default;
 $fui-code-scrollbar-track: transparent !default;
 $fui-code-scrollbar-thumb: rgba(255, 255, 255, 0.1) !default;
 $fui-code-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2) !default;

package/src/components/Combobox/Combobox.module.scss

@@ -197,7 +197,7 @@
   border-color: var(--fui-form-group-border, $fui-border);
 
   // Item height derived from text-base font + vertical padding
-  --_item-h: calc(
+  --_combobox-item-h: calc(
     var(--fui-font-size-sm, #{$fui-font-size-sm}) *
       var(--fui-line-height-normal, #{$fui-line-height-normal}) +
       var(--fui-space-2, #{$fui-space-2}) * 2
@@ -207,7 +207,8 @@
   // Show N items + half-peek scroll hint (default 4.5 items)
   // !important needed to override Base UI's inline max-height: 100%
   max-height: calc(
-    var(--_item-h) * var(--fui-select-max-items, 4.5) + var(--fui-space-1, #{$fui-space-1}) * 2
+    var(--_combobox-item-h) * var(--fui-select-max-items, 4.5) +
+      var(--fui-space-1, #{$fui-space-1}) * 2
   ) !important;
   overflow-y: auto !important;
 

package/src/components/DataTable/DataTable.contract.json

@@ -3,14 +3,7 @@
   "name": "DataTable",
   "description": "Data table with sorting, selection, and column management. Powered by TanStack Table.",
   "category": "display",
-  "tags": [
-    "table",
-    "data",
-    "grid",
-    "list",
-    "sorting",
-    "tanstack"
-  ],
+  "tags": ["table", "data", "grid", "list", "sorting", "tanstack"],
   "status": "stable",
   "sourcePath": "src/components/DataTable/index.tsx",
   "exportName": "DataTable",
@@ -26,6 +19,7 @@
     "rowSelection: object",
     "onRowSelectionChange: function",
     "onRowClick: function",
+    "getRowProps: function",
     "getSubRows: function",
     "expanded: union",
     "onExpandedChange: function",
@@ -97,6 +91,11 @@
       "description": "Handler for row clicks/keyboard activation. Called as (row, event)",
       "required": false
     },
+    "getRowProps": {
+      "type": "function",
+      "description": "Returns row-level HTML, ARIA, data, class, and event props for each rendered data row",
+      "required": false
+    },
     "getSubRows": {
       "type": "function",
       "description": "Extract sub-rows for expandable tree tables",
@@ -123,10 +122,7 @@
       "description": "Table density",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md"
-      ]
+      "values": ["sm", "md"]
     },
     "caption": {
       "type": "string",
@@ -181,13 +177,15 @@
       "Use consistent alignment (numbers right, text left)",
       "Provide meaningful empty states",
       "Consider mobile responsiveness",
-      "Use showCheckbox for bulk selection workflows"
+      "Use showCheckbox for bulk selection workflows",
+      "Use getRowProps to provide an accessible name and intentional semantics for clickable rows"
     ],
     "accessibility": [
       "Proper table semantics with headers",
       "Sortable columns are keyboard accessible",
       "Row selection checkboxes include aria-labels",
-      "Expand/collapse buttons have aria-expanded state"
+      "Expand/collapse buttons have aria-expanded state",
+      "Clickable rows expose an accessible action label through getRowProps"
     ]
   },
   "examples": [
@@ -224,7 +222,7 @@
     {
       "name": "Clickable Rows",
       "description": "Rows respond to click and keyboard activation",
-      "code": "<DataTable\n  columns={endpointColumns}\n  data={sampleEndpoints}\n  onRowClick={(row) => alert(`${row.method} ${row.path}`)}\n  size=\"sm\"\n  aria-label=\"API endpoints\"\n/>"
+      "code": "<DataTable\n  columns={endpointColumns}\n  data={sampleEndpoints}\n  getRowProps={(row) => ({\n    role: 'button',\n    'aria-label': `Open ${row.method} ${row.path}`,\n  })}\n  onRowClick={(row) => alert(`${row.method} ${row.path}`)}\n  size=\"sm\"\n  aria-label=\"API endpoints\"\n/>"
     },
     {
       "name": "Striped",
@@ -273,22 +271,17 @@
       "showCheckbox: boolean - add checkbox column",
       "getSubRows: (row) => T[] - enable expandable rows",
       "onRowClick: (row, event) => void - row activation handler with event access",
+      "getRowProps: (row) => HTMLAttributes<HTMLTableRowElement> - row-level ARIA, role, data, class, and event props",
       "size: sm|md - table density",
       "striped: boolean - alternating row backgrounds",
       "bordered: boolean - bordered container",
       "wrapperClassName / wrapperProps - style and configure the outer wrapper div"
     ],
-    "a11yRules": [
-      "A11Y_TABLE_HEADERS",
-      "A11Y_TABLE_SORT"
-    ]
+    "a11yRules": ["A11Y_TABLE_HEADERS", "A11Y_TABLE_SORT"]
   },
   "ai": {
     "compositionPattern": "simple",
-    "subComponents": [
-      "Root",
-      "Columns"
-    ],
+    "subComponents": ["Root", "Columns"],
     "commonPatterns": [
       "<DataTable columns={createColumns([{key:\"name\",header:\"Name\"},{key:\"status\",header:\"Status\"}])} data={[{name:\"Item 1\",status:\"Active\"}]} />"
     ]

package/src/components/DataTable/index.tsx

@@ -82,6 +82,8 @@ export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableEl
   onRowSelectionChange?: OnChangeFn<RowSelectionState>;
   /** Row click handler */
   onRowClick?: (row: T, event: DataTableRowClickEvent) => void;
+  /** Props applied to each rendered data row. Use this for row-level ARIA labels, roles, and data attributes. */
+  getRowProps?: (row: T) => React.HTMLAttributes<HTMLTableRowElement>;
   /** Extract sub-rows from a row for expandable tree tables */
   getSubRows?: (row: T) => T[] | undefined;
   /** Controlled expanded state */
@@ -143,7 +145,11 @@ function isInteractiveTarget(target: EventTarget | null, currentTarget: HTMLTabl
     'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
   );
 
-  return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
+  return Boolean(
+    interactiveElement &&
+    interactiveElement !== currentTarget &&
+    currentTarget.contains(interactiveElement)
+  );
 }
 
 function DataTableRoot<T>({
@@ -158,6 +164,7 @@ function DataTableRoot<T>({
   rowSelection: controlledRowSelection,
   onRowSelectionChange,
   onRowClick,
+  getRowProps,
   getSubRows,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -411,13 +418,25 @@ function DataTableRoot<T>({
               const isSelected = selectable ? row.getIsSelected() : false;
               const depth: number = row.depth ?? 0;
               const canExpand = hasSubRows && row.getCanExpand();
+              const resolvedRowProps = getRowProps?.(row.original) ?? {};
+              const {
+                className: rowClassName,
+                onClick: rowOnClick,
+                onKeyDown: rowOnKeyDown,
+                tabIndex: rowTabIndex,
+                ...rowHtmlProps
+              } = resolvedRowProps;
               const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
+                rowOnClick?.(event);
+                if (event.defaultPrevented) return;
                 if (!onRowClick) return;
                 if (isInteractiveTarget(event.target, event.currentTarget)) return;
                 onRowClick(row.original, event);
               };
 
               const handleRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {
+                rowOnKeyDown?.(event);
+                if (event.defaultPrevented) return;
                 if (!onRowClick) return;
                 if (isInteractiveTarget(event.target, event.currentTarget)) return;
                 if (event.key === "Enter" || event.key === " ") {
@@ -428,18 +447,20 @@ function DataTableRoot<T>({
 
               return (
                 <tr
+                  {...rowHtmlProps}
                   key={row.id}
                   className={[
                     styles.row,
                     isClickable && styles.clickable,
                     isSelected && styles.selected,
                     depth > 0 && styles.subRow,
+                    rowClassName,
                   ]
                     .filter(Boolean)
                     .join(" ")}
-                  onClick={isClickable ? handleRowClick : undefined}
-                  onKeyDown={isClickable ? handleRowKeyDown : undefined}
-                  tabIndex={isClickable ? 0 : undefined}
+                  onClick={isClickable || rowOnClick ? handleRowClick : undefined}
+                  onKeyDown={isClickable || rowOnKeyDown ? handleRowKeyDown : undefined}
+                  tabIndex={rowTabIndex ?? (isClickable ? 0 : undefined)}
                   data-selected={isSelected || undefined}
                   data-depth={depth > 0 ? depth : undefined}
                 >