@duro-app/ui 0.32.0 → 0.34.0

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

@@ -3,8 +3,50 @@ 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.
+  //
+  // @deprecated Use Table.Root's sortChip/pagination slot props instead.
+  // This style backs the deprecated <Table.Container> wrapper.
+  container: {
+    containerType: 'inline-size',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+  },
+
+  // The same containment chrome, but applied by Root when responsive=true.
+  // Mirrors `container` so consumers don't need to wrap manually.
+  rootContainer: {
+    containerType: 'inline-size',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+  },
+
+  // Applied when Row receives an `onClick` handler. Cursor signals clickability;
+  // the :focus-visible outline meets WCAG 2.4.7 for keyboard navigation.
+  clickableRow: {
+    cursor: 'pointer',
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: 'solid',
+    outlineColor: colors.accent,
+    outlineOffset: -2,
+  },
+
+  // Root — the single grid container for the table itself
   root: {
     display: 'grid',
     borderWidth: 1,
@@ -17,9 +59,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 +105,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 +255,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 +289,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,

package/src/components/Table/tanstack-augmentation.ts

@@ -0,0 +1,28 @@
+// Side-effect-only module: registers `@duro-app/ui`'s additions to
+// TanStack's `ColumnMeta` so consumers can write
+//   meta: { stackLabel: 'X', isActions: true }
+// on column defs and have it type-check, regardless of whether they
+// import from Table/FromTanstack in that particular file.
+//
+// `index.ts` re-exports this module so the augmentation registers as
+// soon as any file in the consumer's TS program imports from
+// `@duro-app/ui`. Keeping the augmentation in a standalone file (instead
+// of co-located with `FromTanstack.tsx`) also keeps it from being
+// tree-shaken out of the published types.
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends unknown, TValue> {
+    /** Override the stack-mode label when columnDef.header is JSX (icon + text, etc). */
+    stackLabel?: string
+    /**
+     * Marks this column as the actions column. In stack mode the cells
+     * render as a full-width footer instead of a labelled key/value row.
+     */
+    isActions?: boolean
+  }
+}
+
+// Empty export so this file is treated as a module by TS and ts-up/vite.
+export {}

package/src/index.ts

@@ -46,6 +46,11 @@ export {
 export {Tag, type TagVariant, type TagSize} from './components/Tag/Tag'
 export {TagGroup} from './components/TagGroup/TagGroup'
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
+// Side-effect import registers our augmentation of TanStack's ColumnMeta
+// (stackLabel / isActions). Standalone module so the augmentation lands
+// whenever this package is in a consumer's TS program, even if FromTanstack
+// itself isn't imported.
+import './components/Table/tanstack-augmentation'
 // TanStack Table: consumers install @tanstack/react-table directly and use
 // Table.Pagination, Table.SortIndicator, Table.ColumnFilter for styled integration
 export {Tabs} from './components/Tabs/Tabs'