@duro-app/ui 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -52,7 +52,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.21.0"
+    "@duro-app/tokens": "^0.22.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

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

@@ -13,6 +13,16 @@ interface ActionBarStoryArgs {
 
 const meta: Meta<ActionBarStoryArgs> = {
   title: 'Components/ActionBar',
+  argTypes: {
+    selectedItemCount: {
+      control: 'number',
+      description: 'Number of selected items displayed in the action bar',
+    },
+    isEmphasized: {
+      control: 'boolean',
+      description: 'Whether the action bar uses the emphasized (inverse) style',
+    },
+  },
 }
 
 export default meta

package/src/components/DetailPanel/DetailPanel.meta.ts

@@ -18,7 +18,10 @@ export const meta: ComponentMeta = {
     optional: ['Title', 'Footer', 'Close'],
   },
   relatedTo: [
-    {component: 'Drawer', relationship: 'Drawer is modal with backdrop; DetailPanel is non-modal and in-flow'},
+    {
+      component: 'Drawer',
+      relationship: 'Drawer is modal with backdrop; DetailPanel is non-modal and in-flow',
+    },
     {component: 'Panel', relationship: 'DetailPanel uses Panel structure internally'},
     {component: 'Table', relationship: 'Common pattern: Table + DetailPanel for master-detail'},
   ],

package/src/components/DetailPanel/DetailPanel.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {useState} from 'react'
 import {css, html} from 'react-strict-dom'
 import {DetailPanel} from './DetailPanel'
+import {Panel} from '../Panel/Panel'
 import {Button} from '../Button/Button'
 import {Text} from '../Text/Text'
 import {Heading} from '../Heading/Heading'
@@ -56,9 +57,8 @@ function DefaultDemo() {
           </DetailPanel.Header>
           <DetailPanel.Body>
             <Text>
-              This is a non-modal detail panel. The content behind it
-              remains interactive — you can still click, scroll, and
-              interact with the main area.
+              This is a non-modal detail panel. The content behind it remains interactive — you can
+              still click, scroll, and interact with the main area.
             </Text>
           </DetailPanel.Body>
           <DetailPanel.Footer>
@@ -137,9 +137,15 @@ function TableSelectionDemo() {
           <Heading level={3}>Users</Heading>
           <html.div>
             <html.div style={tableStyles.headerRow}>
-              <html.span style={tableStyles.cellText}><Text variant="label">Name</Text></html.span>
-              <html.span style={tableStyles.cellText}><Text variant="label">Role</Text></html.span>
-              <html.span style={tableStyles.cellText}><Text variant="label">Status</Text></html.span>
+              <html.span style={tableStyles.cellText}>
+                <Text variant="label">Name</Text>
+              </html.span>
+              <html.span style={tableStyles.cellText}>
+                <Text variant="label">Role</Text>
+              </html.span>
+              <html.span style={tableStyles.cellText}>
+                <Text variant="label">Status</Text>
+              </html.span>
             </html.div>
             {users.map((user) => (
               <html.div
@@ -147,9 +153,15 @@ function TableSelectionDemo() {
                 style={[tableStyles.row, selectedId === user.id && tableStyles.rowSelected]}
                 onClick={() => setSelectedId(selectedId === user.id ? null : user.id)}
               >
-                <html.span style={tableStyles.cellText}><Text>{user.name}</Text></html.span>
-                <html.span style={tableStyles.cellText}><Text>{user.role}</Text></html.span>
-                <html.span style={tableStyles.cellText}><Text>{user.status}</Text></html.span>
+                <html.span style={tableStyles.cellText}>
+                  <Text>{user.name}</Text>
+                </html.span>
+                <html.span style={tableStyles.cellText}>
+                  <Text>{user.role}</Text>
+                </html.span>
+                <html.span style={tableStyles.cellText}>
+                  <Text>{user.status}</Text>
+                </html.span>
               </html.div>
             ))}
           </html.div>
@@ -170,22 +182,37 @@ function TableSelectionDemo() {
           <DetailPanel.Body>
             {selectedUser && (
               <Stack gap="md">
-                <Stack gap="xs">
-                  <Text variant="label">Email</Text>
-                  <Text variant="bodySm">{selectedUser.email}</Text>
-                </Stack>
-                <Stack gap="xs">
-                  <Text variant="label">Role</Text>
-                  <Text variant="bodySm">{selectedUser.role}</Text>
-                </Stack>
-                <Stack gap="xs">
-                  <Text variant="label">Status</Text>
-                  <Inline gap="sm">
-                    <Badge variant={selectedUser.status === 'Active' ? 'success' : 'default'}>
-                      {selectedUser.status}
-                    </Badge>
-                  </Inline>
-                </Stack>
+                <Panel.Root>
+                  <Panel.Header>
+                    <Text variant="label">Contact</Text>
+                  </Panel.Header>
+                  <Panel.Body>
+                    <Stack gap="xs">
+                      <Text variant="caption">Email</Text>
+                      <Text variant="bodySm">{selectedUser.email}</Text>
+                    </Stack>
+                  </Panel.Body>
+                </Panel.Root>
+
+                <Panel.Root>
+                  <Panel.Header>
+                    <Text variant="label">Role &amp; Status</Text>
+                  </Panel.Header>
+                  <Panel.Body>
+                    <Stack gap="sm">
+                      <Inline gap="sm" align="center">
+                        <Text variant="caption">Role</Text>
+                        <Text variant="bodySm">{selectedUser.role}</Text>
+                      </Inline>
+                      <Inline gap="sm" align="center">
+                        <Text variant="caption">Status</Text>
+                        <Badge variant={selectedUser.status === 'Active' ? 'success' : 'default'}>
+                          {selectedUser.status}
+                        </Badge>
+                      </Inline>
+                    </Stack>
+                  </Panel.Body>
+                </Panel.Root>
               </Stack>
             )}
           </DetailPanel.Body>
@@ -225,8 +252,8 @@ function MediumSizeDemo() {
           </DetailPanel.Header>
           <DetailPanel.Body>
             <Text>
-              This panel is 480px wide, providing more room for complex
-              content like forms or detailed information.
+              This panel is 480px wide, providing more room for complex content like forms or
+              detailed information.
             </Text>
           </DetailPanel.Body>
         </DetailPanel.Content>

package/src/components/DetailPanel/DetailPanel.tsx

@@ -194,12 +194,7 @@ function Content({children, size = 'sm', label}: ContentProps) {
   if (!present) return null
 
   return (
-    <html.div
-      style={[
-        styles.wrapper,
-        closing ? wrapperCloseMap[size] : wrapperOpenMap[size],
-      ]}
-    >
+    <html.div style={[styles.wrapper, closing ? wrapperCloseMap[size] : wrapperOpenMap[size]]}>
       <html.div
         ref={panelRef}
         role="complementary"
@@ -250,11 +245,7 @@ interface BodyProps {
 }
 
 function Body({children, padded = true}: BodyProps) {
-  return (
-    <html.div style={[styles.body, padded && styles.bodyPadded]}>
-      {children}
-    </html.div>
-  )
+  return <html.div style={[styles.body, padded && styles.bodyPadded]}>{children}</html.div>
 }
 
 // --- Footer ---
@@ -282,11 +273,7 @@ function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
   }
 
   return (
-    <html.button
-      onClick={requestClose}
-      aria-label={ariaLabel}
-      style={styles.closeButton}
-    >
+    <html.button onClick={requestClose} aria-label={ariaLabel} style={styles.closeButton}>
       <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
         <path
           d="M4 4l8 8M12 4l-8 8"

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

@@ -137,6 +137,11 @@ export const styles = css.create({
   body: {
     flex: 1,
     overflowY: 'auto',
+    // Minimal inset prevents child borders from touching panel structural borders
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
   },
   bodyPadded: {
     paddingTop: spacing.lg,

package/src/components/Dialog/Dialog.meta.ts

@@ -20,8 +20,14 @@ export const meta: ComponentMeta = {
     optional: ['Trigger', 'Header', 'Title', 'Description', 'Body', 'Footer', 'Close'],
   },
   relatedTo: [
-    {component: 'Drawer', relationship: 'Drawer slides from an edge; Dialog is centered with scale animation'},
-    {component: 'DetailPanel', relationship: 'DetailPanel is non-modal and in-flow; Dialog is modal with backdrop'},
+    {
+      component: 'Drawer',
+      relationship: 'Drawer slides from an edge; Dialog is centered with scale animation',
+    },
+    {
+      component: 'DetailPanel',
+      relationship: 'DetailPanel is non-modal and in-flow; Dialog is modal with backdrop',
+    },
   ],
   example: `<Dialog.Root open={open} onOpenChange={setOpen}>
   <Dialog.Trigger>

package/src/components/Drawer/Drawer.meta.ts

@@ -21,7 +21,10 @@ export const meta: ComponentMeta = {
   },
   relatedTo: [
     {component: 'Dialog', relationship: 'Dialog is centered modal; Drawer slides from an edge'},
-    {component: 'DetailPanel', relationship: 'DetailPanel is non-modal and in-flow; Drawer is modal with backdrop'},
+    {
+      component: 'DetailPanel',
+      relationship: 'DetailPanel is non-modal and in-flow; Drawer is modal with backdrop',
+    },
   ],
   example: `<Drawer.Root anchor="right" open={open} onOpenChange={setOpen}>
   <Drawer.Trigger>

package/src/components/Field/Field.stories.tsx

@@ -6,6 +6,12 @@ import {Input} from '../Input/Input'
 
 const meta: Meta = {
   title: 'Components/Field',
+  argTypes: {
+    invalid: {
+      control: 'boolean',
+      description: 'Whether the field is in an invalid/error state',
+    },
+  },
 }
 
 export default meta

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

@@ -0,0 +1,39 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Vertical list of interactive items. Ideal for narrow spaces (detail panels, sidebars) where Table would truncate. Supports selection, descriptions, and action slots.',
+  whenToUse: [
+    'Displaying items in a narrow container (< 480px)',
+    'Detail panels, drawers, and sidebars',
+    'Lists needing selection (single or multiple) with compact layout',
+  ],
+  whenNotToUse: [
+    'Tabular data with many columns — use Table',
+    'Navigation menus — use SideNav or Menu',
+    'Simple text lists without interaction — use Stack with Text',
+  ],
+  anatomy: {
+    required: ['Root', 'Item', 'Content', 'Text'],
+    optional: ['Description', 'Actions', 'Empty'],
+  },
+  relatedTo: [
+    {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'},
+  ],
+  example: `<List.Root selectionMode="multiple" aria-label="Certificates">
+  <List.Item selected onClick={toggle}>
+    <Checkbox checked />
+    <List.Content>
+      <List.Text>web-server-prod-2024.pem</List.Text>
+      <List.Description>Issued: Jan 15, 2024 · Expires: Jan 15, 2025</List.Description>
+    </List.Content>
+    <List.Actions>
+      <Badge variant="success">Active</Badge>
+      <Button variant="danger" size="small">Revoke</Button>
+    </List.Actions>
+  </List.Item>
+  <List.Empty>No certificates found.</List.Empty>
+</List.Root>`,
+}

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

@@ -0,0 +1,200 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {useState} from 'react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {List} from './List'
+import {Badge} from '../Badge/Badge'
+import {Button} from '../Button/Button'
+import {Checkbox} from '../Checkbox/Checkbox'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+const meta: Meta = {
+  title: 'Components/List',
+  argTypes: {
+    selectionMode: {
+      control: 'select',
+      options: ['none', 'single', 'multiple'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+// --- Default ---
+
+export const Default: Story = {
+  render: () => (
+    <List.Root aria-label="Services">
+      <List.Item>
+        <List.Content>
+          <List.Text>Traefik</List.Text>
+          <List.Description>Reverse proxy · Port 443</List.Description>
+        </List.Content>
+        <List.Actions>
+          <Badge variant="success" size="sm">Running</Badge>
+        </List.Actions>
+      </List.Item>
+      <List.Item>
+        <List.Content>
+          <List.Text>Nginx</List.Text>
+          <List.Description>Web server · Port 80</List.Description>
+        </List.Content>
+        <List.Actions>
+          <Badge variant="success" size="sm">Running</Badge>
+        </List.Actions>
+      </List.Item>
+      <List.Item>
+        <List.Content>
+          <List.Text>Pi-hole</List.Text>
+          <List.Description>DNS filter · Port 53</List.Description>
+        </List.Content>
+        <List.Actions>
+          <Badge variant="default" size="sm">Stopped</Badge>
+        </List.Actions>
+      </List.Item>
+    </List.Root>
+  ),
+  play: async ({canvas}) => {
+    const list = canvas.getByRole('list')
+    await expect(list).toBeInTheDocument()
+    await expect(canvas.getAllByRole('listitem').length).toBe(3)
+  },
+}
+
+// --- With Selection ---
+
+const narrowContainer = css.create({
+  box: {
+    maxWidth: 360,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+})
+
+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},
+  ]
+
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+
+  const toggle = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  return (
+    <html.div style={narrowContainer.box}>
+      <List.Root selectionMode="multiple" aria-label="Certificates">
+        {certs.map((cert) => (
+          <List.Item
+            key={cert.id}
+            selected={selected.has(cert.id)}
+            onClick={() => cert.status === 'active' && toggle(cert.id)}
+            disabled={cert.status !== 'active'}
+          >
+            {cert.status === 'active' && (
+              <Checkbox
+                checked={selected.has(cert.id)}
+                onChange={() => toggle(cert.id)}
+                aria-label={cert.serial}
+              />
+            )}
+            <List.Content>
+              <List.Text>{cert.serial}</List.Text>
+              <List.Description>
+                Issued: {cert.issued} · Expires: {cert.expires}
+              </List.Description>
+            </List.Content>
+            <List.Actions>
+              <Badge
+                variant={cert.status === 'active' ? 'success' : 'default'}
+                size="sm"
+              >
+                {cert.status}
+              </Badge>
+              {cert.status === 'active' && (
+                <Button variant="danger" size="small">
+                  Revoke
+                </Button>
+              )}
+            </List.Actions>
+          </List.Item>
+        ))}
+      </List.Root>
+    </html.div>
+  )
+}
+
+export const WithSelection: Story = {
+  render: () => <SelectionDemo />,
+  play: async ({canvas}) => {
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes.length).toBe(2)
+  },
+}
+
+// --- Empty State ---
+
+export const EmptyState: Story = {
+  render: () => (
+    <html.div style={narrowContainer.box}>
+      <List.Root aria-label="Empty list">
+        <List.Empty>No items found.</List.Empty>
+      </List.Root>
+    </html.div>
+  ),
+}
+
+// --- In Detail Panel context (360px) ---
+
+function DetailPanelDemo() {
+  const users = [
+    {id: '1', name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'Active'},
+    {id: '2', name: 'Bob Smith', email: 'bob@example.com', role: 'Editor', status: 'Active'},
+    {id: '3', name: 'Carol Davis', email: 'carol@example.com', role: 'Viewer', status: 'Inactive'},
+  ]
+
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  return (
+    <html.div style={narrowContainer.box}>
+      <List.Root selectionMode="single" aria-label="Users">
+        {users.map((user) => (
+          <List.Item
+            key={user.id}
+            selected={selectedId === user.id}
+            onClick={() => setSelectedId(selectedId === user.id ? null : user.id)}
+          >
+            <List.Content>
+              <List.Text>{user.name}</List.Text>
+              <List.Description>{user.email} · {user.role}</List.Description>
+            </List.Content>
+            <List.Actions>
+              <Badge
+                variant={user.status === 'Active' ? 'success' : 'default'}
+                size="sm"
+              >
+                {user.status}
+              </Badge>
+            </List.Actions>
+          </List.Item>
+        ))}
+      </List.Root>
+    </html.div>
+  )
+}
+
+export const SingleSelection: Story = {
+  render: () => <DetailPanelDemo />,
+}

package/src/components/List/List.tsx

@@ -0,0 +1,118 @@
+import {type ReactNode, createContext, useContext} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+// --- Types ---
+
+export type ListSelectionMode = 'none' | 'single' | 'multiple'
+
+// --- Context ---
+
+interface ListContextValue {
+  selectionMode: ListSelectionMode
+}
+
+const ListContext = createContext<ListContextValue>({selectionMode: 'none'})
+
+function useList() {
+  return useContext(ListContext)
+}
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+  /** Selection mode: 'none' (default), 'single', or 'multiple' */
+  selectionMode?: ListSelectionMode
+  /** Accessible label for the list */
+  'aria-label'?: string
+}
+
+function Root({children, selectionMode = 'none', 'aria-label': ariaLabel}: RootProps) {
+  return (
+    <ListContext.Provider value={{selectionMode}}>
+      <html.div role="list" aria-label={ariaLabel} style={styles.root}>
+        {children}
+      </html.div>
+    </ListContext.Provider>
+  )
+}
+
+// --- Item ---
+
+interface ItemProps {
+  children: ReactNode
+  /** Whether this item is selected */
+  selected?: boolean
+  /** Whether this item is disabled */
+  disabled?: boolean
+  /** Click handler for the item */
+  onClick?: () => void
+}
+
+function Item({children, selected, disabled, onClick}: ItemProps) {
+  const {selectionMode} = useList()
+  const isSelectable = selectionMode !== 'none'
+
+  return (
+    <html.div
+      role="listitem"
+      aria-selected={isSelectable ? selected : undefined}
+      aria-disabled={disabled || undefined}
+      onClick={disabled ? undefined : onClick}
+      style={[
+        styles.item,
+        selected && styles.itemSelected,
+        disabled && styles.itemDisabled,
+      ]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- Content: wraps primary text + description ---
+
+function Content({children}: {children: ReactNode}) {
+  return <html.div style={styles.content}>{children}</html.div>
+}
+
+// --- Text: primary label ---
+
+function ItemText({children}: {children: ReactNode}) {
+  return <html.p style={styles.text}>{children}</html.p>
+}
+
+// --- Description: secondary text ---
+
+function Description({children}: {children: ReactNode}) {
+  return <html.p style={styles.description}>{children}</html.p>
+}
+
+// --- Actions: slot for buttons, badges, etc. ---
+
+function Actions({children}: {children: ReactNode}) {
+  return <html.div style={styles.actions}>{children}</html.div>
+}
+
+// --- Empty: placeholder when list has no items ---
+
+function Empty({children}: {children: ReactNode}) {
+  return (
+    <html.div role="listitem" style={styles.empty}>
+      {children}
+    </html.div>
+  )
+}
+
+// --- Export ---
+
+export const List = {
+  Root,
+  Item,
+  Content,
+  Text: ItemText,
+  Description,
+  Actions,
+  Empty,
+}