@duro-app/ui 0.32.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -53,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.32.0"
+    "@duro-app/tokens": "^0.33.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Table/SortChip.tsx

@@ -0,0 +1,52 @@
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {Menu} from '../Menu/Menu'
+
+export interface SortValue {
+  readonly id: string
+  readonly desc: boolean
+}
+
+export interface SortChipProps {
+  readonly options: ReadonlyArray<{readonly id: string; readonly label: string}>
+  readonly value: SortValue | null
+  readonly onChange: (next: SortValue | null) => void
+  /** Visible label preceding the sort field, e.g. "Sort by". */
+  readonly label?: string
+}
+
+/**
+ * Sort selector for stack-mode Tables. Hidden in default/compact via
+ * `@container` query — see styles.sortChip. Consumers render this inside
+ * a `Table.Container` so the same query target reaches it.
+ *
+ * The chip is a simple controlled wrapper around `Menu`. It does NOT
+ * couple to @tanstack/react-table — the consumer wires `value` and
+ * `onChange` from whatever sort state they manage.
+ */
+export function SortChip({options, value, onChange, label = 'Sort by'}: SortChipProps) {
+  const current = value ? options.find((o) => o.id === value.id) : null
+  const triggerLabel = current ? `${label}: ${current.label} ${value!.desc ? '↓' : '↑'}` : label
+
+  return (
+    <html.div style={styles.sortChip}>
+      <Menu.Root>
+        <Menu.Trigger>{triggerLabel}</Menu.Trigger>
+        <Menu.Popup>
+          {options.map((opt) => {
+            const isCurrent = value?.id === opt.id
+            const nextDesc = isCurrent ? !value!.desc : false
+            return (
+              <Menu.Item key={opt.id} onClick={() => onChange({id: opt.id, desc: nextDesc})}>
+                {opt.label}
+                {isCurrent ? ` ${value!.desc ? '↓' : '↑'}` : ''}
+              </Menu.Item>
+            )
+          })}
+          {value !== null && <Menu.Item onClick={() => onChange(null)}>Clear sort</Menu.Item>}
+        </Menu.Popup>
+      </Menu.Root>
+    </html.div>
+  )
+}
+SortChip.displayName = 'SortChip'

package/src/components/Table/Table.stories.tsx

@@ -878,3 +878,93 @@ export const FullFeatured: Story = {
     await expect(canvas.getByText('Previous')).toBeInTheDocument()
   },
 }
+
+// Demonstrates the three responsive modes. Resize the canvas (or wrap in
+// a narrower container) to see Compact (~720px) and Stack (~440px).
+const responsiveStyles = css.create({
+  resizable: {
+    resize: 'horizontal',
+    overflow: 'auto',
+    minWidth: '320px',
+    maxWidth: '100%',
+    width: '900px',
+    padding: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: colors.border,
+  },
+})
+
+export const Responsive: Story = {
+  name: 'Responsive (Container Queries)',
+  render: () => {
+    const grants = [
+      {principal: 'daddy', role: 'Admin', resource: 'all', expires: 'Never', granted_by: 'system'},
+      {
+        principal: 'alice',
+        role: 'Editor',
+        resource: 'documents/foo.md',
+        expires: '2026-12-31',
+        granted_by: 'daddy',
+      },
+      {principal: 'bob', role: 'Viewer', resource: 'all', expires: 'Never', granted_by: 'daddy'},
+    ]
+    const [sort, setSort] = useState<{id: string; desc: boolean} | null>(null)
+    const sortable = [
+      {id: 'principal', label: 'Principal'},
+      {id: 'role', label: 'Role'},
+      {id: 'expires', label: 'Expires'},
+    ]
+    return (
+      <html.div style={responsiveStyles.resizable}>
+        <Table.Container>
+          <Table.SortChip options={sortable} value={sort} onChange={setSort} />
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell label="Principal">Principal</Table.HeaderCell>
+                <Table.HeaderCell label="Role">Role</Table.HeaderCell>
+                <Table.HeaderCell label="Resource">Resource</Table.HeaderCell>
+                <Table.HeaderCell label="Expires">Expires</Table.HeaderCell>
+                <Table.HeaderCell label="Granted by">Granted by</Table.HeaderCell>
+                <Table.HeaderCell label="Actions" isActions>
+                  Actions
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {grants.map((g) => (
+                <Table.Row key={g.principal}>
+                  <Table.Cell>{g.principal}</Table.Cell>
+                  <Table.Cell>{g.role}</Table.Cell>
+                  <Table.Cell>{g.resource}</Table.Cell>
+                  <Table.Cell>{g.expires}</Table.Cell>
+                  <Table.Cell>{g.granted_by}</Table.Cell>
+                  <Table.Cell isActions>
+                    <Button size="small" variant="secondary">
+                      Revoke
+                    </Button>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </Table.Container>
+      </html.div>
+    )
+  },
+  play: async ({canvas}) => {
+    // At default canvas width (900px) we're in compact, headers nowrap,
+    // sort chip hidden. Just sanity-check the table renders the expected
+    // shape — visual regression is covered by Storybook + Chromatic.
+    const headers = canvas.getAllByRole('columnheader')
+    await expect(headers.length).toBe(6)
+    const cells = canvas.getAllByRole('cell')
+    // 3 rows × 6 columns = 18 cells
+    await expect(cells.length).toBe(18)
+    // Each non-actions body cell carries its label as a hidden span — we
+    // can't visually assert display:none in jsdom, but the text node
+    // exists in the DOM tree.
+    await expect(canvas.getAllByText('Principal').length).toBeGreaterThanOrEqual(2)
+  },
+}

package/src/components/Table/Table.tsx

@@ -12,6 +12,7 @@ import {styles} from './styles.css'
 import {Pagination} from './Pagination'
 import {SortIndicator} from './SortIndicator'
 import {ColumnFilter} from './ColumnFilter'
+import {SortChip} from './SortChip'
 
 // --- Types ---
 
@@ -23,6 +24,10 @@ export type TableSize = 'sm' | 'md'
 interface TableContextValue {
   variant: TableVariant
   size: TableSize
+  responsive: boolean
+  /** Header labels indexed by column position. Populated synchronously by
+   *  extractColumnMeta() during Root render so SSR HTML carries them. */
+  labels: ReadonlyArray<string>
   /** Mutable ref: header Row writes inferred template, Root reads it */
   inferredTemplateRef: MutableRefObject<string | null>
 }
@@ -39,33 +44,50 @@ function useTable() {
 
 const HeaderContext = createContext(false)
 
-// --- Template context: set after first render pass ---
+// --- Container — owns the @container query target ---
+//
+// Wraps SortChip + Root + Pagination so they all participate in the same
+// container query. Setting `containerType: inline-size` on Root would not
+// reach siblings that consumers render above the table.
 
-const TemplateContext = createContext<string | null>(null)
-
-// --- Root ---
+function Container({children}: {children: ReactNode}) {
+  return <html.div style={styles.container}>{children}</html.div>
+}
 
-interface RootProps {
-  children: ReactNode
-  variant?: TableVariant
-  size?: TableSize
+// --- Synchronous tree walk: widths + labels in document order ---
+//
+// Mirrors the pattern that was previously called extractTemplate(). Walks
+// the JSX tree, finds HeaderCell elements, captures their `width` and
+// `label` props (or extractText(children) fallback). Runs on every Root
+// render — cheap (small N, no DOM) — but worth memoising on `children`
+// reference if profiling flags it.
+
+function extractText(node: ReactNode): string {
+  let out = ''
+  Children.forEach(node, (child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      out += String(child)
+    } else if (isValidElement(child)) {
+      const props = child.props as {children?: ReactNode}
+      if (props.children) out += extractText(props.children)
+    }
+  })
+  return out
 }
 
-/**
- * Scans the React tree for HeaderCell elements to extract width props.
- * Returns a grid-template-columns string.
- */
-function extractTemplate(children: ReactNode): string {
+function extractColumnMeta(children: ReactNode): {template: string; labels: string[]} {
   const widths: string[] = []
+  const labels: string[] = []
 
   function walk(node: ReactNode) {
     Children.forEach(node, (child) => {
       if (!isValidElement(child)) return
       const props = child.props as Record<string, any>
-      // Check if this looks like a HeaderCell (has width prop or is inside Header)
       const displayName = (child.type as any)?.name || (child.type as any)?.displayName || ''
       if (displayName === 'HeaderCell' || child.type === HeaderCell) {
         widths.push(props.width || '1fr')
+        const label = props.label ?? extractText(props.children).trim()
+        labels.push(label)
       } else if (props.children) {
         walk(props.children)
       }
@@ -73,23 +95,35 @@ function extractTemplate(children: ReactNode): string {
   }
 
   walk(children)
-  return widths.length > 0 ? widths.join(' ') : ''
+  return {template: widths.join(' '), labels}
 }
 
-function Root({children, variant = 'default', size = 'md'}: RootProps) {
-  const inferredTemplateRef = useRef<string | null>(null)
+// --- Root ---
 
-  // Extract template from HeaderCell children synchronously
-  const template = extractTemplate(children)
+interface RootProps {
+  children: ReactNode
+  variant?: TableVariant
+  size?: TableSize
+  /** Opt out of responsive container-query behavior. Default true. */
+  responsive?: boolean
+}
+
+function Root({children, variant = 'default', size = 'md', responsive = true}: RootProps) {
+  const inferredTemplateRef = useRef<string | null>(null)
+  const {template, labels} = extractColumnMeta(children)
   if (template) {
     inferredTemplateRef.current = template
   }
 
   return (
-    <TableContext.Provider value={{variant, size, inferredTemplateRef}}>
+    <TableContext.Provider value={{variant, size, responsive, labels, inferredTemplateRef}}>
       <html.div
         role="table"
-        style={[styles.root, template ? styles.gridColumns(template) : undefined]}
+        style={[
+          styles.root,
+          template ? styles.gridColumns(template) : undefined,
+          responsive && styles.rootResponsive,
+        ]}
       >
         {children}
       </html.div>
@@ -136,6 +170,11 @@ function Body({children}: {children: ReactNode}) {
 const RowIndexContext = createContext<number>(-1)
 
 // --- Row ---
+//
+// Always provides CellIndexContext, regardless of variant. Previously this
+// was only set up for `variant === 'bordered'`, which meant non-bordered
+// tables had every cell reading {index: 0} from the default — fine until
+// we needed to look up labels by column index.
 
 function Row({children}: {children: ReactNode}) {
   const {variant} = useTable()
@@ -153,13 +192,11 @@ function Row({children}: {children: ReactNode}) {
         !isHeader && variant === 'striped' && isEvenRow && styles.stripedEven,
       ]}
     >
-      {variant === 'bordered'
-        ? childArray.map((child, index) => (
-            <CellIndexContext.Provider key={index} value={{index, total: childArray.length}}>
-              {child}
-            </CellIndexContext.Provider>
-          ))
-        : children}
+      {childArray.map((child, index) => (
+        <CellIndexContext.Provider key={index} value={{index, total: childArray.length}}>
+          {child}
+        </CellIndexContext.Provider>
+      ))}
     </html.div>
   )
 }
@@ -171,11 +208,19 @@ const CellIndexContext = createContext<{index: number; total: number}>({index: 0
 function HeaderCell({
   children,
   width: _width,
+  label: _label,
+  isActions: _isActions,
   'aria-label': ariaLabel,
 }: {
   children?: ReactNode
   /** Column width: CSS value like '40px', '2fr', 'max-content'. Defaults to '1fr'. */
   width?: string
+  /** Stack-mode label string. Required when responsive=true; falls back to
+   *  text-content of children with a dev-only console.warn. */
+  label?: string
+  /** Marks this column as the actions column — its body cells render as a
+   *  full-width footer in stack mode. */
+  isActions?: boolean
   'aria-label'?: string
 }) {
   const {size, variant} = useTable()
@@ -197,13 +242,19 @@ function HeaderCell({
     </html.div>
   )
 }
+HeaderCell.displayName = 'HeaderCell'
 
 // --- Cell ---
+//
+// Renders the column-header label as a real <html.span>, hidden via
+// container query in non-stack modes. The span is omitted entirely when
+// isActions=true — actions footers don't show a label.
 
-function Cell({children}: {children: ReactNode}) {
-  const {size, variant} = useTable()
+function Cell({children, isActions}: {children: ReactNode; isActions?: boolean}) {
+  const {size, variant, labels, responsive} = useTable()
   const {index, total} = useContext(CellIndexContext)
   const isLast = variant === 'bordered' && index === total - 1
+  const label = labels[index] ?? ''
 
   return (
     <html.div
@@ -213,8 +264,12 @@ function Cell({children}: {children: ReactNode}) {
         size === 'sm' ? styles.cellSm : styles.cellMd,
         variant === 'bordered' && styles.borderedCell,
         isLast && styles.borderedCellLast,
+        isActions && styles.cellActions,
       ]}
     >
+      {responsive && !isActions && label !== '' ? (
+        <html.span style={styles.cellLabel}>{label}</html.span>
+      ) : null}
       {children}
     </html.div>
   )
@@ -223,6 +278,7 @@ function Cell({children}: {children: ReactNode}) {
 // --- Export ---
 
 export const Table = {
+  Container,
   Root,
   Header,
   Body,
@@ -232,4 +288,5 @@ export const Table = {
   Pagination,
   SortIndicator,
   ColumnFilter,
+  SortChip,
 }

package/src/components/Table/styles.css.ts

@@ -3,8 +3,25 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 
+// Container-query thresholds. Picked for typical 5-7 column admin tables —
+// see Table.stories.tsx "Responsive" for the visual reasoning. Defined
+// once here so it's clear they're a design-system constant, not a magic
+// number sprinkled across files.
+const COMPACT_BP = '720px'
+const STACK_BP = '440px'
+
 export const styles = css.create({
-  // Root — the single grid container for the entire table
+  // Outer wrapper that hosts the @container query. Wraps SortChip + Root
+  // + Pagination so all three react to the same width. Root itself does
+  // NOT carry containerType — keeping a single query target per Table.
+  container: {
+    containerType: 'inline-size',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+  },
+
+  // Root — the single grid container for the table itself
   root: {
     display: 'grid',
     borderWidth: 1,
@@ -17,9 +34,40 @@ export const styles = css.create({
     color: colors.text,
   },
 
-  // Header group
+  // Stack-mode override: the Root's grid collapses to a single column so
+  // each Row spans full width and stacks vertically. Applied AFTER the
+  // dynamic gridColumns(template) so this rule wins inside the @container.
+  rootResponsive: {
+    gridTemplateColumns: {
+      default: null,
+      [`@container (max-width: ${STACK_BP})`]: '1fr',
+    },
+    // The card-list look needs the outer border to disappear in stack
+    // mode — each row paints its own border.
+    borderWidth: {
+      default: 1,
+      [`@container (max-width: ${STACK_BP})`]: 0,
+    },
+    backgroundColor: {
+      default: colors.bgCard,
+      [`@container (max-width: ${STACK_BP})`]: 'transparent',
+    },
+    overflow: {
+      default: 'hidden',
+      [`@container (max-width: ${STACK_BP})`]: 'visible',
+    },
+    rowGap: {
+      default: 0,
+      [`@container (max-width: ${STACK_BP})`]: spacing.sm,
+    },
+  },
+
+  // Header group — hidden entirely in stack mode
   header: {
-    display: 'grid',
+    display: {
+      default: 'grid',
+      [`@container (max-width: ${STACK_BP})`]: 'none',
+    },
     gridColumn: '1 / -1',
     gridTemplateColumns: 'subgrid',
     backgroundColor: colors.bgCard,
@@ -32,43 +80,148 @@ export const styles = css.create({
     gridTemplateColumns: 'subgrid',
   },
 
-  // Row — spans all columns, uses subgrid to share parent tracks
+  // Row — spans all columns. In stack mode its template flips to 1fr so
+  // children stack as grid items in a single column (we keep grid context
+  // so cells with `gridColumn` overrides still compute).
   row: {
     display: 'grid',
     gridColumn: '1 / -1',
-    gridTemplateColumns: 'subgrid',
-    borderBottomWidth: 1,
+    gridTemplateColumns: {
+      default: 'subgrid',
+      [`@container (max-width: ${STACK_BP})`]: '1fr',
+    },
+    borderBottomWidth: {
+      default: 1,
+      [`@container (max-width: ${STACK_BP})`]: 0,
+    },
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
   bodyRow: {
     backgroundColor: {
       default: 'transparent',
+      [`@container (max-width: ${STACK_BP})`]: colors.bgCard,
       ':hover': colors.bgCardHover,
     },
     transitionProperty: 'background-color',
     transitionDuration: '150ms',
     transitionTimingFunction: 'ease',
+    // Stack-mode card chrome
+    padding: {
+      default: 0,
+      [`@container (max-width: ${STACK_BP})`]: spacing.sm,
+    },
+    borderRadius: {
+      default: 0,
+      [`@container (max-width: ${STACK_BP})`]: radii.sm,
+    },
+    borderWidth: {
+      default: 0,
+      [`@container (max-width: ${STACK_BP})`]: 1,
+    },
+    borderStyle: 'solid',
+    borderColor: colors.border,
   },
 
-  // Header cell
+  // Header cell — keeps headers on a single line in compact mode
   headerCell: {
     fontWeight: typography.fontWeightSemibold,
     color: colors.textMuted,
     textAlign: 'start',
+    whiteSpace: {
+      default: 'normal',
+      [`@container (max-width: ${COMPACT_BP})`]: 'nowrap',
+    },
   },
 
-  // Body cell
+  // Body cell. In compact mode: nowrap + truncate. In stack mode:
+  // becomes a 2-column grid for label / value.
   cell: {
     color: colors.text,
-    display: 'flex',
+    display: {
+      default: 'flex',
+      [`@container (max-width: ${STACK_BP})`]: 'grid',
+    },
     alignItems: 'center',
+    minWidth: {
+      default: 'auto',
+      [`@container (max-width: ${COMPACT_BP})`]: 0,
+    },
+    overflow: {
+      default: 'visible',
+      [`@container (max-width: ${COMPACT_BP})`]: 'hidden',
+    },
+    textOverflow: {
+      default: 'clip',
+      [`@container (max-width: ${COMPACT_BP})`]: 'ellipsis',
+    },
+    whiteSpace: {
+      default: 'normal',
+      [`@container (max-width: ${COMPACT_BP})`]: 'nowrap',
+      [`@container (max-width: ${STACK_BP})`]: 'normal',
+    },
+    gridTemplateColumns: {
+      default: null,
+      [`@container (max-width: ${STACK_BP})`]: '1fr 2fr',
+    },
+    gap: {
+      default: 0,
+      [`@container (max-width: ${STACK_BP})`]: spacing.sm,
+    },
+  },
+
+  // Label rendered as a real <span> inside each cell. Display:none in
+  // default/compact, shown only in stack — matches StyleX guidance to
+  // prefer real elements over ::before/::after for non-shadow-DOM cases.
+  cellLabel: {
+    display: {
+      default: 'none',
+      [`@container (max-width: ${STACK_BP})`]: 'block',
+    },
+    color: colors.textMuted,
+    fontWeight: typography.fontWeightMedium,
+    fontSize: typography.fontSizeXs,
+  },
+
+  // Actions cell. In default/compact behaves like any cell. In stack
+  // mode: full-width footer of the card, right-aligned, with a top
+  // separator. Label span is suppressed in JSX (Cell does not render it
+  // when isActions=true).
+  cellActions: {
+    gridTemplateColumns: {
+      default: null,
+      [`@container (max-width: ${STACK_BP})`]: '1fr',
+    },
+    justifyContent: {
+      default: null,
+      [`@container (max-width: ${STACK_BP})`]: 'flex-end',
+    },
+    marginTop: {
+      default: 0,
+      [`@container (max-width: ${STACK_BP})`]: spacing.sm,
+    },
+    paddingTop: {
+      default: null,
+      [`@container (max-width: ${STACK_BP})`]: spacing.sm,
+    },
+    borderTopWidth: {
+      default: 0,
+      [`@container (max-width: ${STACK_BP})`]: 1,
+    },
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
   },
 
   // Size: sm
   cellSm: {
-    paddingTop: spacing.xs,
-    paddingBottom: spacing.xs,
+    paddingTop: {
+      default: spacing.xs,
+      [`@container (max-width: ${COMPACT_BP})`]: spacing.xs,
+    },
+    paddingBottom: {
+      default: spacing.xs,
+      [`@container (max-width: ${COMPACT_BP})`]: spacing.xs,
+    },
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
     fontSize: typography.fontSizeXs,
@@ -77,22 +230,33 @@ export const styles = css.create({
   cellMd: {
     paddingTop: spacing.sm,
     paddingBottom: spacing.sm,
-    paddingLeft: spacing.md,
-    paddingRight: spacing.md,
+    paddingLeft: {
+      default: spacing.md,
+      [`@container (max-width: ${COMPACT_BP})`]: spacing.sm,
+    },
+    paddingRight: {
+      default: spacing.md,
+      [`@container (max-width: ${COMPACT_BP})`]: spacing.sm,
+    },
     fontSize: typography.fontSizeSm,
   },
 
-  // Variant: striped (even body rows)
+  // Variant: striped (even body rows). Suppressed in stack — cards have
+  // their own surface and zebra-striping reads as a bug there.
   stripedEven: {
     backgroundColor: {
       default: colors.bgCardHover,
+      [`@container (max-width: ${STACK_BP})`]: colors.bgCard,
       ':hover': colors.bgCardHover,
     },
   },
 
-  // Variant: bordered (cells get side borders)
+  // Variant: bordered (cells get side borders). Suppressed in stack.
   borderedCell: {
-    borderRightWidth: 1,
+    borderRightWidth: {
+      default: 1,
+      [`@container (max-width: ${STACK_BP})`]: 0,
+    },
     borderRightStyle: 'solid',
     borderRightColor: colors.border,
   },
@@ -100,6 +264,15 @@ export const styles = css.create({
     borderRightWidth: 0,
   },
 
+  // SortChip — visible only in stack mode
+  sortChip: {
+    display: {
+      default: 'none',
+      [`@container (max-width: ${STACK_BP})`]: 'inline-flex',
+    },
+    alignSelf: 'flex-start',
+  },
+
   // Dynamic: grid columns applied on Root
   gridColumns: (template: string) => ({
     gridTemplateColumns: template,