@duro-app/ui 0.18.0 → 0.20.0

package/src/components/Stack/Stack.meta.ts

@@ -1,8 +1,7 @@
 import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
-  description:
-    'Vertical flex layout. Stacks children top-to-bottom with consistent gap.',
+  description: 'Vertical flex layout. Stacks children top-to-bottom with consistent gap.',
   whenToUse: [
     'Vertically stacking form fields, cards, or sections',
     'Any column-direction layout with uniform spacing',

package/src/components/Switch/Switch.meta.ts

@@ -12,7 +12,10 @@ export const meta: ComponentMeta = {
     'Selecting between multiple options — use Select or ToggleGroup',
   ],
   relatedTo: [
-    {component: 'Checkbox', relationship: 'Checkbox for selection/opt-in; Switch for on/off settings'},
+    {
+      component: 'Checkbox',
+      relationship: 'Checkbox for selection/opt-in; Switch for on/off settings',
+    },
     {component: 'Toggle', relationship: 'Toggle for toolbar pressed state; Switch for settings'},
   ],
   example: `<Switch

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

@@ -1,8 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
+import {useState} from 'react'
 import {Table} from './Table'
 import {Badge} from '../Badge/Badge'
+import {Checkbox} from '../Checkbox/Checkbox'
+import {Button} from '../Button/Button'
+import {ActionBar} from '../ActionBar/ActionBar'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
 const meta: Meta = {
@@ -186,6 +190,109 @@ export const Compact: Story = {
   },
 }
 
+// --- WithCheckboxes: demonstrates parent/child cascading selection ---
+
+interface ServiceData {
+  id: string
+  name: string
+  status: string
+  port: string
+  uptime: string
+}
+
+function CheckboxTableDemo() {
+  const items: ServiceData[] = [
+    {id: 's1', name: 'Traefik', status: 'Running', port: '443', uptime: '14d 3h'},
+    {id: 's2', name: 'Pi-hole', status: 'Running', port: '80', uptime: '14d 3h'},
+    {id: 's3', name: 'Portainer', status: 'Stopped', port: '9000', uptime: '\u2014'},
+    {id: 's4', name: 'Grafana', status: 'Running', port: '3000', uptime: '7d 12h'},
+  ]
+
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+
+  const allSelected = items.length > 0 && items.every((i) => selected.has(i.id))
+  const someSelected = items.some((i) => selected.has(i.id))
+
+  const toggleAll = () => {
+    if (allSelected) {
+      setSelected(new Set())
+    } else {
+      setSelected(new Set(items.map((i) => i.id)))
+    }
+  }
+
+  const toggleOne = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  return (
+    <>
+      <Table.Root columns={5}>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell aria-label="Select all">
+              <Checkbox
+                checked={allSelected}
+                onChange={toggleAll}
+                aria-label="Select all services"
+              />
+            </Table.HeaderCell>
+            <Table.HeaderCell>Service</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+            <Table.HeaderCell>Port</Table.HeaderCell>
+            <Table.HeaderCell>Uptime</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {items.map((s) => (
+            <Table.Row key={s.id}>
+              <Table.Cell>
+                <Checkbox
+                  checked={selected.has(s.id)}
+                  onChange={() => toggleOne(s.id)}
+                  aria-label={s.name}
+                />
+              </Table.Cell>
+              <Table.Cell>{s.name}</Table.Cell>
+              <Table.Cell>
+                <Badge variant={statusVariant(s.status)} size="sm">
+                  {s.status}
+                </Badge>
+              </Table.Cell>
+              <Table.Cell>{s.port}</Table.Cell>
+              <Table.Cell>{s.uptime}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+
+      <ActionBar
+        selectedItemCount={selected.size}
+        onClearSelection={() => setSelected(new Set())}
+      >
+        <Button variant="danger" size="small">
+          Delete
+        </Button>
+      </ActionBar>
+    </>
+  )
+}
+
+export const WithCheckboxes: Story = {
+  render: () => <CheckboxTableDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes.length).toBe(5) // 1 select-all + 4 rows
+    await expect(canvas.getByLabelText('Select all services')).toBeInTheDocument()
+  },
+}
+
 const storyStyles = css.create({
   stack: {display: 'flex', flexDirection: 'column', gap: 24},
   label: {color: colors.textMuted, fontSize: '0.875rem', fontWeight: 600},

package/src/components/Table/Table.tsx

@@ -94,7 +94,6 @@ function Row({children}: {children: ReactNode}) {
   const rowIndex = useContext(RowIndexContext)
   const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
   const childArray = Children.toArray(children)
-  const isLastRow = false // handled by CSS or parent
 
   return (
     <html.div

package/src/components/Textarea/Textarea.meta.ts

@@ -3,12 +3,8 @@ import type {ComponentMeta} from '../component-meta'
 export const meta: ComponentMeta = {
   description:
     'Multi-line text input with automatic Field/Form integration. Same Field binding behavior as Input.',
-  whenToUse: [
-    'Multi-line text entry (comments, messages, descriptions)',
-  ],
-  whenNotToUse: [
-    'Single-line input — use Input',
-  ],
+  whenToUse: ['Multi-line text entry (comments, messages, descriptions)'],
+  whenNotToUse: ['Single-line input — use Input'],
   relatedTo: [
     {component: 'Input', relationship: 'Single-line variant'},
     {component: 'Field', relationship: 'Wrap in Field.Root for label + error'},

package/src/index.ts

@@ -11,6 +11,9 @@ export {Button, type ButtonVariant, type ButtonSize} from './components/Button/B
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
+export {Dialog, type DialogSize} from './components/Dialog/Dialog'
+export {DetailPanel, type DetailPanelSize} from './components/DetailPanel/DetailPanel'
+export {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Drawer'
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {Field} from './components/Field/Field'
@@ -24,6 +27,7 @@ export {
   type LinkButtonSize,
 } from './components/LinkButton/LinkButton'
 export {Menu} from './components/Menu/Menu'
+export {Panel} from './components/Panel/Panel'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'