Add closable prop to resourcebadge, document and fix table data-state selector (#85)

Co-authored-by: Claude <claude@users.noreply.github.com>

Author: Shrinks99

packages/demo/src/components/demo/table.tsx

@@ -11,6 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from "@eqtylab/equality";
+import { useState } from "react";
 
 interface TableDemoProps {
   variant?:
@@ -33,6 +34,9 @@ export const TableDemo = ({
   variant = "default",
   elevation,
 }: TableDemoProps) => {
+  const [selectedRow, setSelectedRow] = useState<number | null>(null);
+  const toggleRow = (row: number) =>
+    setSelectedRow((current) => (current === row ? null : row));
   if (variant === "column-sizing") {
     return (
       <TableContainer elevation={elevation} columns="3fr 3fr 100px 100px 60px">
@@ -451,11 +455,8 @@ export const TableDemo = ({
       <TableBody>
         <TableRow
           clickable={variant === "clickable"}
-          onClick={
-            variant === "clickable"
-              ? () => console.log("Clicked row 1")
-              : undefined
-          }
+          data-state={selectedRow === 0 ? "selected" : undefined}
+          onClick={variant === "clickable" ? () => toggleRow(0) : undefined}
         >
           <TableCell>Alice Cooper</TableCell>
           <TableCell>alice@example.com</TableCell>
@@ -469,11 +470,8 @@ export const TableDemo = ({
         </TableRow>
         <TableRow
           clickable={variant === "clickable"}
-          onClick={
-            variant === "clickable"
-              ? () => console.log("Clicked row 2")
-              : undefined
-          }
+          data-state={selectedRow === 1 ? "selected" : undefined}
+          onClick={variant === "clickable" ? () => toggleRow(1) : undefined}
         >
           <TableCell>Bob Smith</TableCell>
           <TableCell>bob@example.com</TableCell>
@@ -487,11 +485,8 @@ export const TableDemo = ({
         </TableRow>
         <TableRow
           clickable={variant === "clickable"}
-          onClick={
-            variant === "clickable"
-              ? () => console.log("Clicked row 3")
-              : undefined
-          }
+          data-state={selectedRow === 2 ? "selected" : undefined}
+          onClick={variant === "clickable" ? () => toggleRow(2) : undefined}
         >
           <TableCell>Charlie Brown</TableCell>
           <TableCell>charlie@example.com</TableCell>

packages/demo/src/content/components/resource-badge.mdx

@@ -130,9 +130,46 @@ Show only the text by setting `display` to `"text-only"`:
 <ResourceBadge type="document" display="text-only" />
 ```
 
+## Custom Content
+
+By default, Resource Badge displays the label associated with the `type`. You can pass `children` to override that label.
+
+This _may_ be used to display the name of a resource on the badge, though displaying names separately is generally preferred.
+
+<div className="flex items-center gap-3">
+  <ResourceBadge type="model">claude-opus-4-7</ResourceBadge>
+  <ResourceBadge type="dataset">Dataset Group</ResourceBadge>
+  <ResourceBadge type="credential">aws-prod-key</ResourceBadge>
+</div>
+
+### Usage
+
+```tsx
+<ResourceBadge type="model">claude-opus-4-7</ResourceBadge>
+```
+
+## Closable
+
+Set `closeable` and provide a `handleClosable` callback to render a close button on the badge. This is useful for representing active filters or selections that the user can dismiss.
+
+### Usage
+
+```tsx
+<ResourceBadge
+  type="dataset"
+  closeable
+  handleClosable={() => removeFilter("dataset")}
+>
+  customer-events-2026
+</ResourceBadge>
+```
+
 ## Props
 
-| Name      | Description                                                           | Type                                                                                                                                                                                                                                                                                                    | Default  | Required |
-| --------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
-| `type`    | The resource type that determines the badge variant, icon, and label. | `"agent"`, `"benchmark"`, `"benchmark-result"`, `"binary"`, `"certificate"`, `"code"`, `"compute"`, `"config"`, `"credential"`, `"database"`, `"dataset"`, `"document"`, `"guardrail"`, `"media"`, `"model"`, `"prompt"`, `"reasoning"`, `"skill"`, `"system-prompt"`, `"token"`, `"tool"`, `"unknown"` |          | ✅       |
-| `display` | Controls what elements are displayed: icon, text, or both.            | `"both"`, `"text-only"`, `"icon-only"`                                                                                                                                                                                                                                                                  | `"both"` | ❌       |
+| Name             | Description                                                           | Type                                                                                                                                                                                                                                                                                                    | Default  | Required |
+| ---------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
+| `type`           | The resource type that determines the badge variant, icon, and label. | `"agent"`, `"benchmark"`, `"benchmark-result"`, `"binary"`, `"certificate"`, `"code"`, `"compute"`, `"config"`, `"credential"`, `"database"`, `"dataset"`, `"document"`, `"guardrail"`, `"media"`, `"model"`, `"prompt"`, `"reasoning"`, `"skill"`, `"system-prompt"`, `"token"`, `"tool"`, `"unknown"` |          | ✅       |
+| `display`        | Controls what elements are displayed: icon, text, or both.            | `"both"`, `"text-only"`, `"icon-only"`                                                                                                                                                                                                                                                                  | `"both"` | ❌       |
+| `children`       | Custom content to display in place of the default type label.         | `ReactNode`                                                                                                                                                                                                                                                                                             |          | ❌       |
+| `closeable`      | When true, displays a close button on the badge.                      | `boolean`                                                                                                                                                                                                                                                                                               | `false`  | ❌       |
+| `handleClosable` | Callback called when the close button is clicked.                     | `() => void`                                                                                                                                                                                                                                                                                            |          | ❌       |

packages/demo/src/content/components/table.mdx

@@ -69,7 +69,9 @@ Basic usage:
 
 ### Clickable Rows
 
-Rows accept an `onClick` handler, which enables hover interactions.
+Rows accept an `onClick` handler, which enables hover interactions. Use `data-state="selected"` to mark a row as selected.
+
+Try clicking a row below to toggle its selected state!
 
 <TableDemo client:only="react" variant="clickable" />
 

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "license": "Apache-2.0",
   "keywords": [
     "component library",

packages/ui/src/components/resource-badge/resource-badge.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { Badge, type BadgeDisplayMode } from '@/components/badge/badge';
 import styles from '@/components/resource-badge/resource-badge.module.css';
 
@@ -33,14 +35,30 @@ export type ResourceDisplayMode = BadgeDisplayMode;
 interface ResourceBadgeProps {
   type: ResourceType;
   display?: ResourceDisplayMode;
+  closeable?: boolean;
+  handleClosable?: () => void;
+  children?: React.ReactNode;
 }
 
-const ResourceBadge = ({ type, display = 'both' }: ResourceBadgeProps) => {
+const ResourceBadge = ({
+  type,
+  display = 'both',
+  closeable,
+  handleClosable,
+  children,
+}: ResourceBadgeProps) => {
   const config = getTypeConfig(type);
 
   return (
-    <Badge icon={config.icon} display={display} className={config.className} variant={null}>
-      {config.label}
+    <Badge
+      icon={config.icon}
+      display={display}
+      className={config.className}
+      variant={null}
+      closeable={closeable}
+      handleClosable={handleClosable}
+    >
+      {children ?? config.label}
     </Badge>
   );
 };

packages/ui/src/components/table/table-components.module.css

@@ -53,15 +53,25 @@
   grid-column: 1 / -1;
 }
 
+.table-body .table-row:nth-child(even) {
+  background-color: var(--table-stripe-bg);
+}
+
 /* Clickable Variant */
 
-.table-row--clickable {
+.table-row--clickable:not([data-state='selected']) {
   --mix-color: var(--color-brand-primary);
   --hover-darken: 50%;
   --hover-lighten: 50%;
   @apply cursor-pointer;
   @apply hover:bg-mixed-light! dark:hover:bg-mixed-dark!;
-  @apply data-[state=selected]:bg-mixed-light dark:data-[state=selected]:bg-mixed-dark;
+}
+
+.table-body .table-row--clickable[data-state='selected'] {
+  background-color: light-dark(
+    color-mix(in oklch, var(--color-brand-primary), white 40%),
+    color-mix(in oklch, var(--color-brand-primary), black 40%)
+  );
 }
 
 .table-caption {
@@ -137,7 +147,3 @@
 .table--overlay.table-border {
   @apply border-border-overlay;
 }
-
-.table-body .table-row:nth-child(even) {
-  background-color: var(--table-stripe-bg);
-}