@duro-app/ui 0.22.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.22.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.22.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/Alert/Alert.meta.ts

@@ -14,7 +14,10 @@ export const meta: ComponentMeta = {
     'Form field errors — use Field.Error',
   ],
   relatedTo: [
-    {component: 'Callout', relationship: 'Callout for larger block-level messages; Alert for compact inline'},
+    {
+      component: 'Callout',
+      relationship: 'Callout for larger block-level messages; Alert for compact inline',
+    },
   ],
   example: `<Stack gap="sm">
   <Alert variant="success">Settings saved successfully.</Alert>

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/Callout/Callout.meta.ts

@@ -14,7 +14,10 @@ export const meta: ComponentMeta = {
     'Toast notifications — use a toast system',
   ],
   relatedTo: [
-    {component: 'Alert', relationship: 'Alert for compact inline; Callout for block-level prominent'},
+    {
+      component: 'Alert',
+      relationship: 'Alert for compact inline; Callout for block-level prominent',
+    },
   ],
   example: `<Callout variant="warning">
   Your subscription expires in 3 days. Renew now to avoid service interruption.

package/src/components/Card/Card.meta.ts

@@ -14,7 +14,10 @@ export const meta: ComponentMeta = {
     'Simple spacing — use Stack or Inline',
   ],
   relatedTo: [
-    {component: 'Panel', relationship: 'Panel for structural Header/Body/Footer; Card for visual container'},
+    {
+      component: 'Panel',
+      relationship: 'Panel for structural Header/Body/Footer; Card for visual container',
+    },
   ],
   example: `<Card variant="elevated" size="md">
   <Stack gap="md">

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

@@ -22,7 +22,7 @@ export const styles = css.create({
     height: 18,
     borderWidth: 1,
     borderStyle: 'solid',
-    borderRadius: radii.sm,
+    borderRadius: radii.xs,
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/CheckboxGroup/CheckboxGroup.meta.ts

@@ -0,0 +1,25 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Checkbox group for multi-select from a list of options. Wraps the existing Checkbox component with shared state management.',
+  whenToUse: [
+    'Selecting multiple options from a small set',
+    'Permission or feature toggles where several can be active',
+  ],
+  whenNotToUse: [
+    'Single selection — use RadioGroup instead',
+    'Binary on/off — use a single Checkbox or Switch',
+    '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: 'Checkbox', relationship: 'CheckboxGroup.Item wraps Checkbox internally'},
+    {component: 'ToggleGroup', relationship: 'ToggleGroup for toolbar-style multi-select'},
+  ],
+  example: `<CheckboxGroup.Root defaultValue={['email']} onValueChange={(v) => console.log(v)}>
+  <CheckboxGroup.Item value="email">Email</CheckboxGroup.Item>
+  <CheckboxGroup.Item value="sms">SMS</CheckboxGroup.Item>
+  <CheckboxGroup.Item value="push">Push notification</CheckboxGroup.Item>
+</CheckboxGroup.Root>`,
+}

package/src/components/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -0,0 +1,88 @@
+import {useState} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {CheckboxGroup} from './CheckboxGroup'
+
+const meta: Meta = {
+  title: 'Components/CheckboxGroup',
+  argTypes: {
+    orientation: {control: 'select', options: ['horizontal', 'vertical']},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <CheckboxGroup.Root defaultValue={['email']}>
+      <CheckboxGroup.Item value="email">Email notifications</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="sms">SMS notifications</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="push">Push notifications</CheckboxGroup.Item>
+    </CheckboxGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes.length).toBe(3)
+    await expect(checkboxes[0]).toBeChecked()
+    await expect(checkboxes[1]).not.toBeChecked()
+    await expect(checkboxes[2]).not.toBeChecked()
+  },
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <CheckboxGroup.Root defaultValue={['react']} orientation="horizontal">
+      <CheckboxGroup.Item value="react">React</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="vue">Vue</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="angular">Angular</CheckboxGroup.Item>
+    </CheckboxGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('group')
+    await expect(group).toHaveAttribute('aria-orientation', 'horizontal')
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <CheckboxGroup.Root defaultValue={['a']} disabled>
+      <CheckboxGroup.Item value="a">Option A</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="b">Option B</CheckboxGroup.Item>
+    </CheckboxGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes[0]).toBeDisabled()
+    await expect(checkboxes[1]).toBeDisabled()
+  },
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState(['read'])
+    return (
+      <html.div>
+        <CheckboxGroup.Root value={value} onValueChange={setValue}>
+          <CheckboxGroup.Item value="read">Read</CheckboxGroup.Item>
+          <CheckboxGroup.Item value="write">Write</CheckboxGroup.Item>
+          <CheckboxGroup.Item value="execute">Execute</CheckboxGroup.Item>
+        </CheckboxGroup.Root>
+      </html.div>
+    )
+  },
+  play: async ({canvas, userEvent}) => {
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes[0]).toBeChecked()
+
+    await userEvent.click(checkboxes[1])
+    await expect(checkboxes[0]).toBeChecked()
+    await expect(checkboxes[1]).toBeChecked()
+
+    await userEvent.click(checkboxes[0])
+    await expect(checkboxes[0]).not.toBeChecked()
+    await expect(checkboxes[1]).toBeChecked()
+  },
+}

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,105 @@
+import {type ReactNode, createContext, useContext, useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {Checkbox} from '../Checkbox/Checkbox'
+import {styles} from './styles.css'
+
+// --- Context ---
+
+interface CheckboxGroupContextValue {
+  value: string[]
+  onToggle: (itemValue: string, checked: boolean) => void
+  disabled: boolean
+}
+
+const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null)
+
+function useCheckboxGroup() {
+  const ctx = useContext(CheckboxGroupContext)
+  if (!ctx) {
+    throw new Error('CheckboxGroup.Item must be used within CheckboxGroup.Root')
+  }
+  return ctx
+}
+
+// --- Root ---
+
+interface RootProps {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  orientation?: 'horizontal' | 'vertical'
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Root({
+  value: controlledValue,
+  defaultValue = [],
+  onValueChange,
+  orientation = 'vertical',
+  disabled = false,
+  children,
+}: RootProps) {
+  const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange)
+
+  const onToggle = useCallback(
+    (itemValue: string, checked: boolean) => {
+      if (disabled) return
+      const next = checked
+        ? [...value, itemValue]
+        : value.filter((v) => v !== itemValue)
+      setValue(next)
+    },
+    [disabled, value, setValue],
+  )
+
+  return (
+    <CheckboxGroupContext.Provider value={{value, onToggle, disabled}}>
+      <html.div
+        role="group"
+        aria-orientation={orientation}
+        style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
+      >
+        {children}
+      </html.div>
+    </CheckboxGroupContext.Provider>
+  )
+}
+
+// --- Item ---
+
+interface ItemProps {
+  value: string
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
+  const {value: groupValue, onToggle, disabled: groupDisabled} = useCheckboxGroup()
+  const isChecked = groupValue.includes(value)
+  const isDisabled = groupDisabled || itemDisabled
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onToggle(value, e.target.checked)
+    },
+    [value, onToggle],
+  )
+
+  return (
+    <Checkbox
+      value={value}
+      checked={isChecked}
+      disabled={isDisabled}
+      onChange={handleChange}
+    >
+      {children}
+    </Checkbox>
+  )
+}
+
+export const CheckboxGroup = {
+  Root,
+  Item,
+}

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

@@ -0,0 +1,13 @@
+import {css} from 'react-strict-dom'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+  },
+  rootHorizontal: {
+    flexDirection: 'row',
+  },
+})

package/src/components/EmptyState/EmptyState.meta.ts

@@ -8,10 +8,7 @@ export const meta: ComponentMeta = {
     'Search results with no matches',
     'First-time use before any data exists',
   ],
-  whenNotToUse: [
-    'Loading states — use Spinner',
-    'Error states — use Alert or Callout',
-  ],
+  whenNotToUse: ['Loading states — use Spinner', 'Error states — use Alert or Callout'],
   example: `<Card>
   <EmptyState
     icon={<Icon name="info-circle" size={48} />}

package/src/components/Icon/Icon.meta.ts

@@ -8,12 +8,12 @@ export const meta: ComponentMeta = {
     'Status indicators alongside text',
     'Navigation or action indicators',
   ],
-  whenNotToUse: [
-    'Decorative images — use img elements',
-    'Complex illustrations — use custom SVGs',
-  ],
+  whenNotToUse: ['Decorative images — use img elements', 'Complex illustrations — use custom SVGs'],
   relatedTo: [
-    {component: 'StatusIcon', relationship: 'StatusIcon wraps Icon with a colored background circle'},
+    {
+      component: 'StatusIcon',
+      relationship: 'StatusIcon wraps Icon with a colored background circle',
+    },
   ],
   example: `<Inline gap="sm" align="center">
   <Icon name="check-circle" size={20} />

package/src/components/InputGroup/InputGroup.meta.ts

@@ -18,7 +18,10 @@ export const meta: ComponentMeta = {
   },
   relatedTo: [
     {component: 'Input', relationship: 'InputGroup enhances Input with addons'},
-    {component: 'Field', relationship: 'Field provides label/error; InputGroup provides visual addons'},
+    {
+      component: 'Field',
+      relationship: 'Field provides label/error; InputGroup provides visual addons',
+    },
   ],
   example: `<InputGroup.Root>
   <InputGroup.Addon>$</InputGroup.Addon>

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}>