@duro-app/ui 0.21.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -52,7 +52,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.21.0"
+    "@duro-app/tokens": "^0.23.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/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/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/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/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/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/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

@@ -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>`,
+}