@duro-app/ui 0.23.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -34,6 +34,7 @@
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.0.0",
+    "@tanstack/react-table": ">=8.0.0",
     "effect": "^3.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -52,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.23.0"
+    "@duro-app/tokens": "^0.24.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -85,7 +85,7 @@ function SelectableTable({
 
   return (
     <>
-      <Table.Root columns={5}>
+      <Table.Root>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell aria-label="Select">
@@ -172,7 +172,7 @@ export const Emphasized: Story = {
       }
       return (
         <>
-          <Table.Root columns={3}>
+          <Table.Root>
             <Table.Header>
               <Table.Row>
                 <Table.HeaderCell aria-label="Select">
@@ -230,7 +230,7 @@ export const Emphasized: Story = {
 export const CustomLabel: Story = {
   render: () => (
     <>
-      <Table.Root columns={2}>
+      <Table.Root>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Name</Table.HeaderCell>

package/src/components/ButtonGroup/ButtonGroup.meta.ts

@@ -0,0 +1,24 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Groups related buttons together with consistent spacing and layout. Supports horizontal and vertical orientation with alignment control.',
+  whenToUse: [
+    'Dialog footers with Save/Cancel actions',
+    'Toolbar-style groupings of related actions',
+    'Form submission areas with multiple actions',
+  ],
+  whenNotToUse: [
+    'Single button — just use Button directly',
+    'Wrapping tags or badges — use Cluster instead',
+    'Navigation items — use Inline or SideNav',
+  ],
+  relatedTo: [
+    {component: 'Inline', relationship: 'Inline is a general-purpose horizontal layout; ButtonGroup adds role="group" and disabled support'},
+    {component: 'ActionBar', relationship: 'ActionBar is a floating bulk-selection toolbar; ButtonGroup is a static grouping'},
+  ],
+  example: `<ButtonGroup align="end" gap="sm">
+  <Button variant="secondary">Cancel</Button>
+  <Button variant="primary">Save</Button>
+</ButtonGroup>`,
+}

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,103 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {ButtonGroup} from './ButtonGroup'
+import {Button} from '../Button/Button'
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  argTypes: {
+    orientation: {control: 'select', options: ['horizontal', 'vertical']},
+    align: {control: 'select', options: ['start', 'end', 'center']},
+    gap: {control: 'select', options: ['xs', 'sm', 'md']},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ButtonGroup>
+
+export const Default: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button variant="primary">Save</Button>
+      <Button variant="secondary">Cancel</Button>
+      <Button variant="danger">Delete</Button>
+    </ButtonGroup>
+  ),
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('group')
+    await expect(group).toBeInTheDocument()
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons.length).toBe(3)
+  },
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <ButtonGroup orientation="vertical">
+      <Button variant="primary">Save</Button>
+      <Button variant="secondary">Cancel</Button>
+      <Button variant="danger">Delete</Button>
+    </ButtonGroup>
+  ),
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('group')
+    await expect(group).toBeInTheDocument()
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons.length).toBe(3)
+  },
+}
+
+export const EndAligned: Story = {
+  render: () => (
+    <ButtonGroup align="end">
+      <Button variant="secondary">Cancel</Button>
+      <Button variant="primary">Save</Button>
+    </ButtonGroup>
+  ),
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('group')
+    await expect(group).toBeInTheDocument()
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons.length).toBe(2)
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <ButtonGroup disabled>
+      <Button variant="primary">Save</Button>
+      <Button variant="secondary">Cancel</Button>
+      <Button variant="danger">Delete</Button>
+    </ButtonGroup>
+  ),
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('group')
+    await expect(group).toBeInTheDocument()
+    await expect(group).toHaveStyle({opacity: '0.5', pointerEvents: 'none'})
+  },
+}
+
+export const WithGaps: Story = {
+  render: () => (
+    <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
+      <ButtonGroup gap="xs">
+        <Button variant="primary">XS Gap</Button>
+        <Button variant="secondary">XS Gap</Button>
+      </ButtonGroup>
+      <ButtonGroup gap="sm">
+        <Button variant="primary">SM Gap</Button>
+        <Button variant="secondary">SM Gap</Button>
+      </ButtonGroup>
+      <ButtonGroup gap="md">
+        <Button variant="primary">MD Gap</Button>
+        <Button variant="secondary">MD Gap</Button>
+      </ButtonGroup>
+    </div>
+  ),
+  play: async ({canvas}) => {
+    const groups = canvas.getAllByRole('group')
+    await expect(groups.length).toBe(3)
+  },
+}

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,59 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export interface ButtonGroupProps {
+  children: ReactNode
+  /** Layout direction. Default: 'horizontal' */
+  orientation?: 'horizontal' | 'vertical'
+  /** Alignment within container. Default: 'start' */
+  align?: 'start' | 'end' | 'center'
+  /** Disable all buttons in group */
+  disabled?: boolean
+  /** Gap between buttons. Default: 'sm' */
+  gap?: 'xs' | 'sm' | 'md'
+}
+
+const gapMap = {
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+} as const
+
+const horizontalAlignMap = {
+  start: styles.alignStart,
+  center: styles.alignCenter,
+  end: styles.alignEnd,
+} as const
+
+const verticalAlignMap = {
+  start: styles.verticalAlignStart,
+  center: styles.verticalAlignCenter,
+  end: styles.verticalAlignEnd,
+} as const
+
+export function ButtonGroup({
+  children,
+  orientation = 'horizontal',
+  align = 'start',
+  disabled = false,
+  gap = 'sm',
+}: ButtonGroupProps) {
+  const isVertical = orientation === 'vertical'
+  const alignStyle = isVertical ? verticalAlignMap[align] : horizontalAlignMap[align]
+
+  return (
+    <html.div
+      role="group"
+      style={[
+        styles.base,
+        isVertical ? styles.vertical : styles.horizontal,
+        gapMap[gap],
+        alignStyle,
+        disabled && styles.disabled,
+      ]}
+    >
+      {children}
+    </html.div>
+  )
+}

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

@@ -0,0 +1,28 @@
+import {css} from 'react-strict-dom'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  base: {
+    display: 'flex',
+  },
+  horizontal: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  vertical: {
+    flexDirection: 'column',
+  },
+  alignStart: {justifyContent: 'flex-start'},
+  alignCenter: {justifyContent: 'center'},
+  alignEnd: {justifyContent: 'flex-end'},
+  verticalAlignStart: {alignItems: 'flex-start'},
+  verticalAlignCenter: {alignItems: 'center'},
+  verticalAlignEnd: {alignItems: 'flex-end'},
+  gapXs: {gap: spacing.xs},
+  gapSm: {gap: spacing.sm},
+  gapMd: {gap: spacing.md},
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+})

package/src/components/List/List.meta.ts

@@ -18,9 +18,15 @@ export const meta: ComponentMeta = {
     optional: ['Description', 'Actions', 'Empty'],
   },
   relatedTo: [
-    {component: 'Table', relationship: 'Table for wide multi-column data; List for narrow compact items'},
+    {
+      component: 'Table',
+      relationship: 'Table for wide multi-column data; List for narrow compact items',
+    },
     {component: 'DetailPanel', relationship: 'List fits naturally inside DetailPanel.Body'},
-    {component: 'Menu', relationship: 'Menu for action menus; List for data display with selection'},
+    {
+      component: 'Menu',
+      relationship: 'Menu for action menus; List for data display with selection',
+    },
   ],
   example: `<List.Root selectionMode="multiple" aria-label="Certificates">
   <List.Item selected onClick={toggle}>

package/src/components/List/List.stories.tsx

@@ -32,7 +32,9 @@ export const Default: Story = {
           <List.Description>Reverse proxy · Port 443</List.Description>
         </List.Content>
         <List.Actions>
-          <Badge variant="success" size="sm">Running</Badge>
+          <Badge variant="success" size="sm">
+            Running
+          </Badge>
         </List.Actions>
       </List.Item>
       <List.Item>
@@ -41,7 +43,9 @@ export const Default: Story = {
           <List.Description>Web server · Port 80</List.Description>
         </List.Content>
         <List.Actions>
-          <Badge variant="success" size="sm">Running</Badge>
+          <Badge variant="success" size="sm">
+            Running
+          </Badge>
         </List.Actions>
       </List.Item>
       <List.Item>
@@ -50,7 +54,9 @@ export const Default: Story = {
           <List.Description>DNS filter · Port 53</List.Description>
         </List.Content>
         <List.Actions>
-          <Badge variant="default" size="sm">Stopped</Badge>
+          <Badge variant="default" size="sm">
+            Stopped
+          </Badge>
         </List.Actions>
       </List.Item>
     </List.Root>
@@ -77,9 +83,27 @@ const narrowContainer = css.create({
 
 function SelectionDemo() {
   const certs = [
-    {id: 'c1', serial: 'aa:bb:cc:dd:01', issued: 'Mar 21, 2026', expires: 'Jun 19, 2026', status: 'active' as const},
-    {id: 'c2', serial: 'aa:bb:cc:dd:02', issued: 'Mar 21, 2026', expires: 'Jun 19, 2026', status: 'active' as const},
-    {id: 'c3', serial: 'ee:ff:00:11:03', issued: 'Jan 10, 2025', expires: 'Jan 10, 2026', status: 'expired' as const},
+    {
+      id: 'c1',
+      serial: 'aa:bb:cc:dd:01',
+      issued: 'Mar 21, 2026',
+      expires: 'Jun 19, 2026',
+      status: 'active' as const,
+    },
+    {
+      id: 'c2',
+      serial: 'aa:bb:cc:dd:02',
+      issued: 'Mar 21, 2026',
+      expires: 'Jun 19, 2026',
+      status: 'active' as const,
+    },
+    {
+      id: 'c3',
+      serial: 'ee:ff:00:11:03',
+      issued: 'Jan 10, 2025',
+      expires: 'Jan 10, 2026',
+      status: 'expired' as const,
+    },
   ]
 
   const [selected, setSelected] = useState<Set<string>>(new Set())
@@ -117,10 +141,7 @@ function SelectionDemo() {
               </List.Description>
             </List.Content>
             <List.Actions>
-              <Badge
-                variant={cert.status === 'active' ? 'success' : 'default'}
-                size="sm"
-              >
+              <Badge variant={cert.status === 'active' ? 'success' : 'default'} size="sm">
                 {cert.status}
               </Badge>
               {cert.status === 'active' && (
@@ -178,13 +199,12 @@ function DetailPanelDemo() {
           >
             <List.Content>
               <List.Text>{user.name}</List.Text>
-              <List.Description>{user.email} · {user.role}</List.Description>
+              <List.Description>
+                {user.email} · {user.role}
+              </List.Description>
             </List.Content>
             <List.Actions>
-              <Badge
-                variant={user.status === 'Active' ? 'success' : 'default'}
-                size="sm"
-              >
+              <Badge variant={user.status === 'Active' ? 'success' : 'default'} size="sm">
                 {user.status}
               </Badge>
             </List.Actions>

package/src/components/List/List.tsx

@@ -60,11 +60,7 @@ function Item({children, selected, disabled, onClick}: ItemProps) {
       aria-selected={isSelectable ? selected : undefined}
       aria-disabled={disabled || undefined}
       onClick={disabled ? undefined : onClick}
-      style={[
-        styles.item,
-        selected && styles.itemSelected,
-        disabled && styles.itemDisabled,
-      ]}
+      style={[styles.item, selected && styles.itemSelected, disabled && styles.itemDisabled]}
     >
       {children}
     </html.div>

package/src/components/Table/ColumnFilter.tsx

@@ -0,0 +1,46 @@
+import type {Column} from '@tanstack/react-table'
+import {html} from 'react-strict-dom'
+import {css} from 'react-strict-dom'
+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'
+
+const styles = css.create({
+  input: {
+    width: '100%',
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    marginTop: spacing.xs,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.xs,
+    backgroundColor: colors.bg,
+    color: colors.text,
+    fontSize: typography.fontSizeXs,
+    outline: 'none',
+  },
+})
+
+interface ColumnFilterProps<TData> {
+  column: Column<TData, unknown>
+  placeholder?: string
+}
+
+export function ColumnFilter<TData>({column, placeholder}: ColumnFilterProps<TData>) {
+  if (!column.getCanFilter()) return null
+
+  const filterValue = (column.getFilterValue() as string) ?? ''
+
+  return (
+    <html.input
+      style={styles.input}
+      type="text"
+      value={filterValue}
+      onChange={(e: any) => column.setFilterValue(e.target.value || undefined)}
+      placeholder={placeholder ?? `Filter...`}
+    />
+  )
+}

package/src/components/Table/Pagination.tsx

@@ -0,0 +1,82 @@
+import type {Table} from '@tanstack/react-table'
+import {html} from 'react-strict-dom'
+import {css} from 'react-strict-dom'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+const styles = css.create({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+    paddingTop: spacing.md,
+    paddingBottom: spacing.sm,
+  },
+  button: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: 6,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    color: colors.text,
+    fontSize: typography.fontSizeSm,
+    cursor: 'pointer',
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+  },
+  buttonDisabled: {
+    opacity: 0.4,
+    cursor: 'not-allowed',
+    backgroundColor: 'transparent',
+  },
+  pageInfo: {
+    fontSize: typography.fontSizeSm,
+    color: colors.textMuted,
+  },
+})
+
+interface PaginationProps<TData> {
+  table: Table<TData>
+}
+
+export function Pagination<TData>({table}: PaginationProps<TData>) {
+  const {pageIndex, pageSize} = table.getState().pagination
+  const pageCount = table.getPageCount()
+  const totalRows = table.getFilteredRowModel().rows.length
+
+  if (totalRows <= pageSize) return null
+
+  return (
+    <html.div style={styles.root}>
+      <html.button
+        style={[styles.button, !table.getCanPreviousPage() && styles.buttonDisabled]}
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        Previous
+      </html.button>
+      <html.span style={styles.pageInfo}>
+        {pageIndex + 1} / {pageCount}
+      </html.span>
+      <html.button
+        style={[styles.button, !table.getCanNextPage() && styles.buttonDisabled]}
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        Next
+      </html.button>
+    </html.div>
+  )
+}

package/src/components/Table/SortIndicator.tsx

@@ -0,0 +1,56 @@
+import type {Column} from '@tanstack/react-table'
+import {html} from 'react-strict-dom'
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+const styles = css.create({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    marginLeft: 4,
+    fontSize: 10,
+    userSelect: 'none',
+    // Hidden by default, shown on hover or when active
+    opacity: 0,
+    transitionProperty: 'opacity',
+    transitionDuration: '120ms',
+  },
+  active: {
+    opacity: 1,
+    color: colors.accent,
+  },
+  inactive: {
+    color: colors.textMuted,
+  },
+})
+
+interface SortIndicatorProps<TData> {
+  column: Column<TData, unknown>
+}
+
+/**
+ * Sort direction chevron for table column headers.
+ *
+ * - Shows \u25B2 (asc), \u25BC (desc), or \u21C5 (unsorted)
+ * - Hidden by default, visible on header hover or when actively sorted
+ * - Clicking the header cell should call column.getToggleSortingHandler()
+ *
+ * The parent HeaderCell applies a :hover rule that sets child opacity to 1.
+ */
+export function SortIndicator<TData>({column}: SortIndicatorProps<TData>) {
+  if (!column.getCanSort()) return null
+
+  const sorted = column.getIsSorted()
+
+  return (
+    <html.span
+      style={[
+        styles.root,
+        sorted ? styles.active : styles.inactive,
+      ]}
+      data-sort-indicator=""
+    >
+      {sorted === 'asc' ? '\u25B2' : sorted === 'desc' ? '\u25BC' : '\u21C5'}
+    </html.span>
+  )
+}