@exxatdesignux/ui 0.2.14 → 0.2.15

package/CHANGELOG.md

@@ -15,6 +15,14 @@ After the user bumps `@exxatdesignux/ui`, do this in order:
 
 ---
 
+## [0.2.15] - 2026-05-13
+
+### Fixed
+
+- **Globals**: `button` / `[role="button"]` **`cursor: pointer`** is applied **outside** `@layer base` (after utilities) so it wins over Tailwind preflight; filter bar and native controls show a hand cursor consistently.
+- **Primitives**: **`DropdownMenuTrigger`**, **`PopoverTrigger`**, and **`TooltipTrigger`** merge **`cursor-pointer`** into **`className`**; **`SelectTrigger`** includes **`cursor-pointer`** (with **`disabled:cursor-not-allowed`**).
+- **Starter / app parity**: `sync-template` brings **`DataTable`** filter bar **`cursor-pointer`** and list-hub table/list/board affordance updates into **`template/`**.
+
 ## [0.2.14] - 2026-05-14
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exxatdesignux/ui",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "Exxat shared design system (components, hooks, tokens). Monorepo setup: clone repo then pnpm bootstrap at workspace root — see github.com/ExxatDesign/Exxat-DS-Workspace README.",
   "type": "module",
   "engines": {

package/src/components/ui/dropdown-menu.tsx

@@ -21,12 +21,14 @@ function DropdownMenuPortal({
 }
 
 function DropdownMenuTrigger({
+  className,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
   return (
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
       suppressHydrationWarning
+      className={cn("cursor-pointer", className)}
       {...props}
     />
   )

package/src/components/ui/popover.tsx

@@ -8,8 +8,8 @@ function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root
   return <PopoverPrimitive.Root {...props} />
 }
 
-function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger {...props} />
+function PopoverTrigger({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger className={cn("cursor-pointer", className)} {...props} />
 }
 
 function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {

package/src/components/ui/select.tsx

@@ -43,7 +43,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pe-2 ps-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/15 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pe-2 ps-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/15 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/src/components/ui/tooltip.tsx

@@ -25,10 +25,16 @@ function Tooltip({
 }
 
 function TooltipTrigger({
+  className,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return (
-    <TooltipPrimitive.Trigger data-slot="tooltip-trigger" suppressHydrationWarning {...props} />
+    <TooltipPrimitive.Trigger
+      data-slot="tooltip-trigger"
+      suppressHydrationWarning
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
   )
 }
 

package/src/globals.css

@@ -1792,3 +1792,9 @@ html:is([data-contrast="high"], [data-contrast="windows"]) {
     background-color: var(--banner-prism-bg);
   }
 }
+
+/* After all @layer rules: win over Tailwind preflight / layer merge so real controls show a pointer. */
+button:not(:disabled):not([disabled]),
+[role="button"]:not([aria-disabled="true"]):not([data-disabled]) {
+  cursor: pointer;
+}

package/template/app/globals.css

@@ -1808,3 +1808,8 @@ html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mar
   }
 }
 
+/* After all @layer rules: win over Tailwind preflight / layer merge so real controls show a pointer. */
+button:not(:disabled):not([disabled]),
+[role="button"]:not([aria-disabled="true"]):not([data-disabled]) {
+  cursor: pointer;
+}

package/template/components/compliance-board-view.tsx

@@ -79,10 +79,16 @@ function useComplianceBoardModel(rows: ComplianceItem[], groupByColumnKey: strin
   }, [rows, groupByColumnKey])
 }
 
-function ComplianceBoardCard({ row }: { row: ComplianceItem }) {
+function ComplianceBoardCard({
+  row,
+  onRowActivate,
+}: {
+  row: ComplianceItem
+  onRowActivate?: (row: ComplianceItem) => void
+}) {
   const ownerInitials = initialsFromDisplayName(row.owner)
   return (
-    <ListPageBoardCard className="w-full">
+    <ListPageBoardCard className="w-full" onClick={onRowActivate ? () => onRowActivate(row) : undefined}>
       <ListPageBoardCardHeader>
         <ListPageBoardCardTitleRow
           title={row.title}
@@ -114,9 +120,11 @@ export const COMPLIANCE_BOARD_GROUP_OPTIONS = [
 export function ComplianceBoardView({
   rows,
   groupByColumnKey,
+  onRowActivate,
 }: {
   rows: ComplianceItem[]
   groupByColumnKey: string
+  onRowActivate?: (row: ComplianceItem) => void
 }) {
   const key = groupByColumnKey === "category" ? "category" : "status"
   const { columns, badgeMap } = useComplianceBoardModel(rows, key)
@@ -128,7 +136,7 @@ export function ComplianceBoardView({
       getRowKey={r => r.id}
       columnCountBadgeClassName={badgeMap}
       emptyColumnLabel="No items"
-      renderCard={row => <ComplianceBoardCard row={row} />}
+      renderCard={row => <ComplianceBoardCard row={row} onRowActivate={onRowActivate} />}
     />
   )
 }

package/template/components/compliance-list-view.tsx

@@ -10,12 +10,19 @@ import {
 } from "@/lib/list-status-badges"
 import type { ComplianceItem } from "@/lib/mock/compliance"
 
-function ComplianceListRow({ row }: { row: ComplianceItem }) {
+function ComplianceListRow({
+  row,
+  onRowActivate,
+}: {
+  row: ComplianceItem
+  onRowActivate?: (row: ComplianceItem) => void
+}) {
   return (
     <li>
       <ListPageBoardCard
         layout="row"
         rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
+        onClick={onRowActivate ? () => onRowActivate(row) : undefined}
         rowEnd={
           <div className="flex shrink-0 items-center gap-2">
             <ListHubStatusBadge
@@ -40,7 +47,13 @@ function ComplianceListRow({ row }: { row: ComplianceItem }) {
   )
 }
 
-export function ComplianceListView({ rows }: { rows: ComplianceItem[] }) {
+export function ComplianceListView({
+  rows,
+  onRowActivate,
+}: {
+  rows: ComplianceItem[]
+  onRowActivate?: (row: ComplianceItem) => void
+}) {
   if (rows.length === 0) {
     return (
       <div className="px-4 py-16 text-center lg:px-6">
@@ -52,7 +65,7 @@ export function ComplianceListView({ rows }: { rows: ComplianceItem[] }) {
   return (
     <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
       {rows.map(row => (
-        <ComplianceListRow key={row.id} row={row} />
+        <ComplianceListRow key={row.id} row={row} onRowActivate={onRowActivate} />
       ))}
     </ul>
   )

package/template/components/compliance-table.tsx

@@ -509,7 +509,10 @@ export const ComplianceTable = React.forwardRef<
     return (
       <div className="flex min-h-0 flex-1 flex-col">
         {sharedToolbar}
-        <ComplianceListView rows={tableState.rows as ComplianceItem[]} />
+        <ComplianceListView
+          rows={tableState.rows as ComplianceItem[]}
+          onRowActivate={row => tableState.toggleRow(row.id)}
+        />
       </div>
     )
   }
@@ -521,6 +524,7 @@ export const ComplianceTable = React.forwardRef<
         <ComplianceBoardView
           rows={tableState.rows as ComplianceItem[]}
           groupByColumnKey={complianceBoardGroupKey}
+          onRowActivate={row => tableState.toggleRow(row.id)}
         />
       </div>
     )

package/template/components/data-table/index.tsx

@@ -214,7 +214,7 @@ function FilterPillBase<TData>({
       <PopoverAnchor asChild>
       <div
         className={cn(
-          "inline-flex items-center rounded border text-xs transition-colors",
+          "inline-flex cursor-pointer items-center rounded border text-xs transition-colors",
           isActive ? "border-brand/45 bg-brand/10" : "border-input bg-background"
         )}
       >
@@ -222,7 +222,7 @@ function FilterPillBase<TData>({
           <button
             type="button"
             className={cn(
-              "inline-flex items-center gap-1 h-6 pl-2 pr-1.5 rounded-l transition-colors",
+              "inline-flex cursor-pointer items-center gap-1 h-6 pl-2 pr-1.5 rounded-l transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
               isActive ? "hover:bg-brand/15" : "hover:bg-interactive-hover",
             )}
@@ -240,7 +240,7 @@ function FilterPillBase<TData>({
           aria-label={`Remove ${col.label} filter`}
           onClick={() => onRemove(filter.id)}
           className={cn(
-            "inline-flex items-center justify-center h-6 w-5 rounded-r transition-colors",
+            "inline-flex cursor-pointer items-center justify-center h-6 w-5 rounded-r transition-colors",
             "text-muted-foreground hover:text-destructive",
             isActive ? "hover:bg-brand/15" : "hover:bg-interactive-hover",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
@@ -496,7 +496,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button type="button"
-                className="inline-flex items-center gap-1 h-6 px-2 rounded text-xs text-muted-foreground hover:text-interactive-hover-foreground border border-dashed border-input/70 hover:border-input hover:bg-interactive-hover-subtle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="inline-flex cursor-pointer items-center gap-1 h-6 px-2 rounded text-xs text-muted-foreground hover:text-interactive-hover-foreground border border-dashed border-input/70 hover:border-input hover:bg-interactive-hover-subtle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <i className="fa-light fa-plus text-xs" aria-hidden="true" />
                 Add filter
@@ -518,7 +518,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
             <button
               type="button"
               onClick={() => setActiveFilters([])}
-              className="text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors px-1"
+              className="cursor-pointer text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors px-1"
             >
               Clear all
             </button>
@@ -556,7 +556,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                   type="button"
                   aria-label="Clear search"
                   onClick={() => setSearch("")}
-                  className="absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex cursor-pointer size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 >
                   <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
                 </button>
@@ -568,7 +568,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                 <TooltipTrigger asChild>
                   <button type="button" aria-label="Search"
                     onClick={() => { setSearchOpen(true); setTimeout(() => searchRef.current?.focus(), 10) }}
-                    className="inline-flex shrink-0 items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    className="inline-flex shrink-0 cursor-pointer items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   >
                     <i className="fa-light fa-magnifying-glass text-[13px]" aria-hidden="true" />
                   </button>
@@ -596,7 +596,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                       aria-label={filterBarVisible ? "Hide filters" : "Show filters"}
                       onClick={() => setFilterBarVisible(v => !v)}
                       className={cn(
-                        "inline-flex shrink-0 items-center gap-1 size-8 justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        "inline-flex shrink-0 cursor-pointer items-center gap-1 size-8 justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                         filterBarVisible
                           ? "bg-accent text-accent-foreground hover:bg-accent/90"
                           : "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover",
@@ -610,7 +610,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                       <DropdownMenuTrigger asChild>
                         <button type="button" aria-label="Add filter"
                           onClick={() => setFilterBarVisible(true)}
-                          className="inline-flex shrink-0 items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                          className="inline-flex shrink-0 cursor-pointer items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                         >
                           <i className="fa-light fa-filter text-[13px]" aria-hidden="true" />
                         </button>
@@ -1325,19 +1325,33 @@ function DataTableInner<TData extends Record<string, unknown>>({
                   const rowId = getRowId(row, rowIndex, getRowIdProp)
                   const isSelected = selected.has(rowId)
                   const isHovered  = hoveredRow === rowId
+                  const rowClickable = Boolean(onRowClick) || selectable
+                  function handleRowClick(e: React.MouseEvent<HTMLTableRowElement>) {
+                    if (!rowClickable) return
+                    const el = e.target as HTMLElement | null
+                    if (!el) return
+                    if (el.closest("button, a, input, textarea, select, label, [role='checkbox']")) return
+                    if (onRowClick) {
+                      onRowClick(row)
+                      return
+                    }
+                    if (selectable) {
+                      toggleRow(rowId)
+                    }
+                  }
                   return (
                     <tr
                       key={String(rowId)}
                       data-state={isSelected ? "selected" : undefined}
                       onMouseEnter={() => setHoveredRow(rowId)}
                       onMouseLeave={() => setHoveredRow(null)}
-                      onClick={onRowClick ? () => onRowClick(row) : undefined}
+                      onClick={rowClickable ? handleRowClick : undefined}
                       data-new={Boolean((row as Record<string, unknown>).isNew) || undefined}
                       className={cn(
                         "group/row transition-colors",
                         "hover:bg-dt-row-hover",
                         isSelected && "bg-dt-row-selected text-dt-row-selected-fg",
-                        onRowClick && "cursor-pointer",
+                        rowClickable && "cursor-pointer",
                         Boolean((row as Record<string, unknown>).isNew) && "bg-dt-new-row-bg border-l-2 border-l-dt-new-row-border"
                       )}
                     >

package/template/components/question-bank-board-view.tsx

@@ -124,13 +124,18 @@ function useQuestionBankBoardModel(rows: QuestionBankItem[], groupByColumnKey: s
 function QuestionBankBoardCard({
   row,
   onToggleFavorite,
+  onRowActivate,
 }: {
   row: QuestionBankItem
   onToggleFavorite: (row: QuestionBankItem) => void
+  onRowActivate?: (row: QuestionBankItem) => void
 }) {
   const initials = initialsFromDisplayName(row.author)
   return (
-    <ListPageBoardCard className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "w-full")}>
+    <ListPageBoardCard
+      className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "w-full")}
+      onClick={onRowActivate ? () => onRowActivate(row) : undefined}
+    >
       <ListPageBoardCardHeader>
         <ListPageBoardCardTitleRow
           title={(
@@ -171,10 +176,12 @@ export function QuestionBankBoardView({
   rows,
   groupByColumnKey,
   onToggleFavorite,
+  onRowActivate,
 }: {
   rows: QuestionBankItem[]
   groupByColumnKey: string
   onToggleFavorite: (row: QuestionBankItem) => void
+  onRowActivate?: (row: QuestionBankItem) => void
 }) {
   const allowed = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(o => o.key === groupByColumnKey)
   const key = allowed ? groupByColumnKey : "topic"
@@ -187,7 +194,9 @@ export function QuestionBankBoardView({
       getRowKey={r => r.id}
       columnCountBadgeClassName={badgeMap}
       emptyColumnLabel="No questions"
-      renderCard={row => <QuestionBankBoardCard row={row} onToggleFavorite={onToggleFavorite} />}
+      renderCard={row => (
+        <QuestionBankBoardCard row={row} onToggleFavorite={onToggleFavorite} onRowActivate={onRowActivate} />
+      )}
     />
   )
 }

package/template/components/question-bank-list-view.tsx

@@ -11,9 +11,11 @@ import {
 function QuestionBankListRow({
   row,
   onToggleFavorite,
+  onRowActivate,
 }: {
   row: QuestionBankItem
   onToggleFavorite: (row: QuestionBankItem) => void
+  onRowActivate?: (row: QuestionBankItem) => void
 }) {
   return (
     <li>
@@ -21,6 +23,7 @@ function QuestionBankListRow({
         className={QUESTION_BANK_FAVORITE_HOVER_GROUP}
         layout="row"
         rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
+        onClick={onRowActivate ? () => onRowActivate(row) : undefined}
         rowEnd={(
           <div className="flex shrink-0 items-center gap-1">
             <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
@@ -44,9 +47,12 @@ function QuestionBankListRow({
 export function QuestionBankListView({
   rows,
   onToggleFavorite,
+  onRowActivate,
 }: {
   rows: QuestionBankItem[]
   onToggleFavorite: (row: QuestionBankItem) => void
+  /** When set (e.g. table selection), clicking a row toggles the same selection as the grid. */
+  onRowActivate?: (row: QuestionBankItem) => void
 }) {
   if (rows.length === 0) {
     return (
@@ -59,7 +65,12 @@ export function QuestionBankListView({
   return (
     <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
       {rows.map(row => (
-        <QuestionBankListRow key={row.id} row={row} onToggleFavorite={onToggleFavorite} />
+        <QuestionBankListRow
+          key={row.id}
+          row={row}
+          onToggleFavorite={onToggleFavorite}
+          onRowActivate={onRowActivate}
+        />
       ))}
     </ul>
   )

package/template/components/question-bank-table.tsx

@@ -898,7 +898,11 @@ export const QuestionBankTable = React.forwardRef<
     return (
       <div className="flex min-h-0 flex-1 flex-col">
         {sharedToolbar}
-        <QuestionBankListView rows={tableState.rows as QuestionBankItem[]} onToggleFavorite={toggleFavorite} />
+        <QuestionBankListView
+          rows={tableState.rows as QuestionBankItem[]}
+          onToggleFavorite={toggleFavorite}
+          onRowActivate={row => tableState.toggleRow(row.id)}
+        />
       </div>
     )
   }
@@ -911,6 +915,7 @@ export const QuestionBankTable = React.forwardRef<
           rows={tableState.rows as QuestionBankItem[]}
           groupByColumnKey={questionBankBoardGroupKey}
           onToggleFavorite={toggleFavorite}
+          onRowActivate={row => tableState.toggleRow(row.id)}
         />
       </div>
     )

package/template/components/team-board-view.tsx

@@ -61,9 +61,15 @@ function useTeamBoardModel(members: TeamMember[], groupByColumnKey: string) {
   }, [members, groupByColumnKey])
 }
 
-function TeamBoardCard({ member }: { member: TeamMember }) {
+function TeamBoardCard({
+  member,
+  onRowActivate,
+}: {
+  member: TeamMember
+  onRowActivate?: (member: TeamMember) => void
+}) {
   return (
-    <ListPageBoardCard className="w-full">
+    <ListPageBoardCard className="w-full" onClick={onRowActivate ? () => onRowActivate(member) : undefined}>
       <ListPageBoardCardHeader>
         <ListPageBoardCardTitleRow
           title={member.name}
@@ -94,9 +100,11 @@ export const TEAM_BOARD_GROUP_OPTIONS = [
 export function TeamBoardView({
   members,
   groupByColumnKey,
+  onRowActivate,
 }: {
   members: TeamMember[]
   groupByColumnKey: string
+  onRowActivate?: (member: TeamMember) => void
 }) {
   const key = groupByColumnKey === "role" ? "role" : "status"
   const { columns, badgeMap } = useTeamBoardModel(members, key)
@@ -108,7 +116,7 @@ export function TeamBoardView({
       getRowKey={m => m.id}
       columnCountBadgeClassName={badgeMap}
       emptyColumnLabel="No members"
-      renderCard={member => <TeamBoardCard member={member} />}
+      renderCard={member => <TeamBoardCard member={member} onRowActivate={onRowActivate} />}
     />
   )
 }

package/template/components/team-list-view.tsx

@@ -14,12 +14,19 @@ import {
 } from "@/lib/list-status-badges"
 import type { TeamMember } from "@/lib/mock/team"
 
-function TeamListRow({ member }: { member: TeamMember }) {
+function TeamListRow({
+  member,
+  onRowActivate,
+}: {
+  member: TeamMember
+  onRowActivate?: (member: TeamMember) => void
+}) {
   return (
     <li>
       <ListPageBoardCard
         layout="row"
         rowContainerClassName="flex flex-row items-center gap-3"
+        onClick={onRowActivate ? () => onRowActivate(member) : undefined}
         leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
         rowEnd={
           <div className="flex shrink-0 items-center gap-2">
@@ -43,7 +50,13 @@ function TeamListRow({ member }: { member: TeamMember }) {
   )
 }
 
-export function TeamListView({ members }: { members: TeamMember[] }) {
+export function TeamListView({
+  members,
+  onRowActivate,
+}: {
+  members: TeamMember[]
+  onRowActivate?: (member: TeamMember) => void
+}) {
   if (members.length === 0) {
     return (
       <div className="px-4 py-16 text-center lg:px-6">
@@ -55,7 +68,7 @@ export function TeamListView({ members }: { members: TeamMember[] }) {
   return (
     <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
       {members.map(m => (
-        <TeamListRow key={m.id} member={m} />
+        <TeamListRow key={m.id} member={m} onRowActivate={onRowActivate} />
       ))}
     </ul>
   )

package/template/components/team-table.tsx

@@ -586,7 +586,7 @@ export const TeamTable = React.forwardRef<
     return (
       <div className="flex min-h-0 flex-1 flex-col">
         {sharedToolbar}
-        <TeamListView members={tableState.rows} />
+        <TeamListView members={tableState.rows} onRowActivate={m => tableState.toggleRow(m.id)} />
       </div>
     )
   }
@@ -595,7 +595,11 @@ export const TeamTable = React.forwardRef<
     return (
       <div className="flex min-h-0 flex-1 flex-col">
         {sharedToolbar}
-        <TeamBoardView members={tableState.rows} groupByColumnKey={teamBoardGroupKey} />
+        <TeamBoardView
+          members={tableState.rows}
+          groupByColumnKey={teamBoardGroupKey}
+          onRowActivate={m => tableState.toggleRow(m.id)}
+        />
       </div>
     )
   }