@duro-app/ui 0.23.0 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.23.0",
+  "version": "0.25.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.25.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,32 @@
+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/CheckboxGroup/CheckboxGroup.meta.ts

@@ -13,7 +13,10 @@ export const meta: ComponentMeta = {
     'Many options (10+) — consider a filterable list or Select with multi-select',
   ],
   relatedTo: [
-    {component: 'RadioGroup', relationship: 'RadioGroup for single-select; CheckboxGroup for multi-select'},
+    {
+      component: 'RadioGroup',
+      relationship: 'RadioGroup for single-select; CheckboxGroup for multi-select',
+    },
     {component: 'Checkbox', relationship: 'CheckboxGroup.Item wraps Checkbox internally'},
     {component: 'ToggleGroup', relationship: 'ToggleGroup for toolbar-style multi-select'},
   ],

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -46,9 +46,7 @@ function Root({
   const onToggle = useCallback(
     (itemValue: string, checked: boolean) => {
       if (disabled) return
-      const next = checked
-        ? [...value, itemValue]
-        : value.filter((v) => v !== itemValue)
+      const next = checked ? [...value, itemValue] : value.filter((v) => v !== itemValue)
       setValue(next)
     },
     [disabled, value, setValue],
@@ -88,12 +86,7 @@ function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
   )
 
   return (
-    <Checkbox
-      value={value}
-      checked={isChecked}
-      disabled={isDisabled}
-      onChange={handleChange}
-    >
+    <Checkbox value={value} checked={isChecked} disabled={isDisabled} onChange={handleChange}>
       {children}
     </Checkbox>
   )

package/src/components/Combobox/Combobox.meta.ts

@@ -0,0 +1,35 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Searchable dropdown for selecting a value from a filterable list. Combines a text input with a popup listbox. Compound component — Root is required.',
+  whenToUse: [
+    'Large option lists where users benefit from typing to filter (e.g. country, city, user picker)',
+    'Autocomplete or typeahead scenarios',
+    'Table column filters with known categorical values',
+  ],
+  whenNotToUse: [
+    'Small lists (fewer than 7 options) — use Select instead',
+    'Free-form text entry — use Input',
+    'Multiple selections — use CheckboxGroup or ToggleGroup',
+  ],
+  anatomy: {
+    required: ['Root', 'Input', 'Popup', 'Item'],
+    optional: ['Empty'],
+  },
+  relatedTo: [
+    {component: 'Select', relationship: 'Select for short lists without search; Combobox for long filterable lists'},
+    {component: 'Input', relationship: 'Input for free-form text; Combobox for constrained selection'},
+    {component: 'Menu', relationship: 'Menu triggers actions; Combobox picks a value'},
+  ],
+  example: `<Combobox.Root name="country" defaultValue="us" initialLabels={{us: 'United States'}}>
+  <Combobox.Input placeholder="Search countries…" />
+  <Combobox.Popup>
+    <Combobox.Item value="us">United States</Combobox.Item>
+    <Combobox.Item value="gb">United Kingdom</Combobox.Item>
+    <Combobox.Item value="fr">France</Combobox.Item>
+    <Combobox.Item value="de">Germany</Combobox.Item>
+    <Combobox.Empty>No countries found</Combobox.Empty>
+  </Combobox.Popup>
+</Combobox.Root>`,
+}

package/src/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,119 @@
+import {useState} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {Combobox} from './Combobox'
+
+const meta: Meta = {
+  title: 'Components/Combobox',
+}
+
+export default meta
+type Story = StoryObj
+
+const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape', 'Honeydew']
+
+export const Default: Story = {
+  render: () => (
+    <Combobox.Root>
+      <Combobox.Input placeholder="Search fruit...">
+        <Combobox.Trigger />
+      </Combobox.Input>
+      <Combobox.Popup>
+        {fruits.map((fruit) => (
+          <Combobox.Item key={fruit} value={fruit.toLowerCase()}>
+            <Combobox.ItemText>{fruit}</Combobox.ItemText>
+          </Combobox.Item>
+        ))}
+        <Combobox.Empty>No fruits found</Combobox.Empty>
+      </Combobox.Popup>
+    </Combobox.Root>
+  ),
+  play: async ({canvas}) => {
+    const input = canvas.getByRole('combobox')
+    await expect(input).toBeInTheDocument()
+    await expect(input).toHaveAttribute('aria-expanded', 'false')
+  },
+}
+
+export const WithDefaultValue: Story = {
+  render: () => (
+    <Combobox.Root defaultValue="cherry" initialLabels={{cherry: 'Cherry'}}>
+      <Combobox.Input placeholder="Search fruit...">
+        <Combobox.Trigger />
+      </Combobox.Input>
+      <Combobox.Popup>
+        {fruits.map((fruit) => (
+          <Combobox.Item key={fruit} value={fruit.toLowerCase()}>
+            <Combobox.ItemText>{fruit}</Combobox.ItemText>
+          </Combobox.Item>
+        ))}
+        <Combobox.Empty>No fruits found</Combobox.Empty>
+      </Combobox.Popup>
+    </Combobox.Root>
+  ),
+  play: async ({canvas}) => {
+    const input = canvas.getByRole('combobox')
+    await expect(input).toHaveValue('Cherry')
+  },
+}
+
+function ControlledDemo() {
+  const [value, setValue] = useState<string | null>(null)
+
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+      <Combobox.Root value={value} onValueChange={setValue}>
+        <Combobox.Input placeholder="Pick a role...">
+          <Combobox.Trigger />
+        </Combobox.Input>
+        <Combobox.Popup>
+          <Combobox.Item value="admin"><Combobox.ItemText>Admin</Combobox.ItemText></Combobox.Item>
+          <Combobox.Item value="editor"><Combobox.ItemText>Editor</Combobox.ItemText></Combobox.Item>
+          <Combobox.Item value="viewer"><Combobox.ItemText>Viewer</Combobox.ItemText></Combobox.Item>
+          <Combobox.Item value="moderator"><Combobox.ItemText>Moderator</Combobox.ItemText></Combobox.Item>
+          <Combobox.Item value="analyst"><Combobox.ItemText>Analyst</Combobox.ItemText></Combobox.Item>
+          <Combobox.Empty>No roles found</Combobox.Empty>
+        </Combobox.Popup>
+      </Combobox.Root>
+      <span style={{fontSize: 14, color: '#888'}}>
+        Selected: {value ?? 'none'}
+      </span>
+    </div>
+  )
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Selected: none')).toBeInTheDocument()
+  },
+}
+
+export const ManyItems: Story = {
+  render: () => {
+    const countries = [
+      'Argentina', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada',
+      'Chile', 'China', 'Colombia', 'Denmark', 'Egypt', 'Finland',
+      'France', 'Germany', 'Greece', 'India', 'Indonesia', 'Ireland',
+      'Italy', 'Japan', 'Kenya', 'Mexico', 'Netherlands', 'New Zealand',
+      'Norway', 'Peru', 'Poland', 'Portugal', 'South Korea', 'Spain',
+      'Sweden', 'Switzerland', 'Thailand', 'Turkey', 'United Kingdom', 'United States',
+    ]
+
+    return (
+      <Combobox.Root>
+        <Combobox.Input placeholder="Search country...">
+          <Combobox.Trigger />
+        </Combobox.Input>
+        <Combobox.Popup>
+          {countries.map((country) => (
+            <Combobox.Item key={country} value={country.toLowerCase()}>
+              <Combobox.ItemText>{country}</Combobox.ItemText>
+            </Combobox.Item>
+          ))}
+          <Combobox.Empty>No countries found</Combobox.Empty>
+        </Combobox.Popup>
+      </Combobox.Root>
+    )
+  },
+}