@duro-app/ui 0.14.1 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -38,7 +38,7 @@
     "react-strict-dom": "^0.0.55"
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.4.0"
+    "@duro-app/tokens": "^0.15.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

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

@@ -0,0 +1,272 @@
+import {useState} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn, userEvent, within} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {ActionBar} from './ActionBar'
+import {Button} from '../Button/Button'
+import {Checkbox} from '../Checkbox/Checkbox'
+import {Table} from '../Table/Table'
+
+interface ActionBarStoryArgs {
+  onClearSelection: () => void
+}
+
+const meta: Meta<ActionBarStoryArgs> = {
+  title: 'Components/ActionBar',
+}
+
+export default meta
+type Story = StoryObj<ActionBarStoryArgs>
+
+const storyStyles = css.create({
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 32,
+    padding: 24,
+  },
+  label: {
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.05em',
+    opacity: 0.6,
+    marginBottom: 8,
+  },
+})
+
+const users = [
+  {id: '1', name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin'},
+  {id: '2', name: 'Bob Smith', email: 'bob@example.com', role: 'User'},
+  {id: '3', name: 'Carol White', email: 'carol@example.com', role: 'User'},
+  {id: '4', name: 'Dan Brown', email: 'dan@example.com', role: 'Editor'},
+]
+
+function SelectableTable({
+  initialSelected = new Set<string>(),
+  onClearSelection,
+}: {
+  initialSelected?: Set<string>
+  onClearSelection?: () => void
+}) {
+  const [selected, setSelected] = useState<Set<string>>(initialSelected)
+
+  const toggle = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const toggleAll = () => {
+    if (selected.size === users.length) {
+      setSelected(new Set())
+    } else {
+      setSelected(new Set(users.map((u) => u.id)))
+    }
+  }
+
+  const clearSelection = () => {
+    setSelected(new Set())
+    onClearSelection?.()
+  }
+
+  return (
+    <>
+      <Table.Root columns={5}>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell aria-label="Select">
+              <Checkbox
+                checked={selected.size === users.length}
+                onChange={toggleAll}
+                aria-label="Select all rows"
+              />
+            </Table.HeaderCell>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Email</Table.HeaderCell>
+            <Table.HeaderCell>Role</Table.HeaderCell>
+            <Table.HeaderCell>Actions</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {users.map((u) => (
+            <Table.Row key={u.id}>
+              <Table.Cell>
+                <Checkbox
+                  checked={selected.has(u.id)}
+                  onChange={() => toggle(u.id)}
+                  aria-label={`Select ${u.name}`}
+                />
+              </Table.Cell>
+              <Table.Cell>{u.name}</Table.Cell>
+              <Table.Cell>{u.email}</Table.Cell>
+              <Table.Cell>{u.role}</Table.Cell>
+              <Table.Cell>
+                <Button variant="secondary" size="small">
+                  Edit
+                </Button>
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+      <ActionBar
+        selectedItemCount={selected.size}
+        onClearSelection={clearSelection}
+      >
+        <Button variant="secondary" size="small">
+          Export
+        </Button>
+        <Button variant="danger" size="small">
+          Delete
+        </Button>
+      </ActionBar>
+    </>
+  )
+}
+
+export const Default: Story = {
+  args: {
+    onClearSelection: fn(),
+  },
+  render: (args) => (
+    <SelectableTable
+      initialSelected={new Set(['2'])}
+      onClearSelection={args.onClearSelection as () => void}
+    />
+  ),
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement)
+    // The ActionBar is portalled to document.body, so query from there
+    const toolbar = document.querySelector('[role="toolbar"]')
+    await expect(toolbar).toBeInTheDocument()
+    await expect(toolbar).toHaveAccessibleName('1 selected')
+  },
+}
+
+export const MultipleSelected: Story = {
+  render: () => (
+    <SelectableTable initialSelected={new Set(['1', '3', '4'])} />
+  ),
+}
+
+export const Emphasized: Story = {
+  render: () => {
+    function Demo() {
+      const [selected, setSelected] = useState(new Set(['2', '3']))
+      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 (
+        <>
+          <Table.Root columns={3}>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell aria-label="Select">
+                  <Checkbox
+                    checked={selected.size === users.length}
+                    aria-label="Select all rows"
+                    onChange={() =>
+                      setSelected(
+                        selected.size === users.length
+                          ? new Set()
+                          : new Set(users.map((u) => u.id)),
+                      )
+                    }
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>Name</Table.HeaderCell>
+                <Table.HeaderCell>Email</Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {users.map((u) => (
+                <Table.Row key={u.id}>
+                  <Table.Cell>
+                    <Checkbox
+                      checked={selected.has(u.id)}
+                      onChange={() => toggle(u.id)}
+                      aria-label={`Select ${u.name}`}
+                    />
+                  </Table.Cell>
+                  <Table.Cell>{u.name}</Table.Cell>
+                  <Table.Cell>{u.email}</Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+          <ActionBar
+            selectedItemCount={selected.size}
+            isEmphasized
+            onClearSelection={() => setSelected(new Set())}
+          >
+            <Button variant="inverseSecondary" size="small">
+              Archive
+            </Button>
+            <Button variant="inverseSecondary" size="small">
+              Delete
+            </Button>
+          </ActionBar>
+        </>
+      )
+    }
+    return <Demo />
+  },
+}
+
+export const CustomLabel: Story = {
+  render: () => (
+    <>
+      <Table.Root columns={2}>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Traefik</Table.Cell>
+            <Table.Cell>Running</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+      <ActionBar
+        selectedItemCount={3}
+        selectedLabel={(count) => `${count} users to revoke`}
+        onClearSelection={() => {}}
+      >
+        <Button variant="danger" size="small">
+          Confirm revoke
+        </Button>
+      </ActionBar>
+    </>
+  ),
+}
+
+export const Hidden: Story = {
+  render: () => (
+    <SelectableTable initialSelected={new Set()} />
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={storyStyles.wrapper}>
+      <html.div>
+        <html.span style={storyStyles.label}>
+          Default — check boxes to see the ActionBar
+        </html.span>
+        <SelectableTable initialSelected={new Set(['1'])} />
+      </html.div>
+    </html.div>
+  ),
+}

package/src/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,80 @@
+import type {ReactNode} from 'react'
+import {createPortal} from 'react-dom'
+import {html} from 'react-strict-dom'
+import {useOverlayContainer} from '../ThemeProvider/ThemeProvider'
+import {styles} from './styles.css'
+
+export interface ActionBarProps {
+  /** Number of selected items, or 'all'. Hidden when 0. */
+  selectedItemCount: number | 'all'
+  /** Label for the selection count. Receives the count string. */
+  selectedLabel?: (count: string) => string
+  /** Whether to use emphasized (accent) styling. */
+  isEmphasized?: boolean
+  /** Called when the clear/close button is pressed. */
+  onClearSelection: () => void
+  /** Action buttons to display. */
+  children: ReactNode
+}
+
+function ActionBarInner({
+  selectedItemCount,
+  selectedLabel,
+  isEmphasized = false,
+  onClearSelection,
+  children,
+}: ActionBarProps) {
+  const container = useOverlayContainer()
+
+  if (selectedItemCount === 0) return null
+
+  const countStr = selectedItemCount === 'all' ? 'All' : `${selectedItemCount}`
+  const label = selectedLabel
+    ? selectedLabel(countStr)
+    : `${countStr} selected`
+
+  const bar = (
+    <html.div
+      role="toolbar"
+      aria-label={label}
+      style={[styles.overlay, isEmphasized && styles.overlayEmphasized]}
+    >
+      <html.span
+        style={[
+          styles.selectedCount,
+          isEmphasized && styles.selectedCountEmphasized,
+        ]}
+      >
+        {label}
+      </html.span>
+      <html.div
+        style={[
+          styles.separator,
+          isEmphasized && styles.separatorEmphasized,
+        ]}
+      />
+      <html.div style={styles.actions}>{children}</html.div>
+      <html.button
+        type="button"
+        aria-label="Clear selection"
+        onClick={onClearSelection}
+        style={[
+          styles.closeButton,
+          isEmphasized && styles.closeButtonEmphasized,
+        ]}
+      >
+        <svg width={10} height={10} viewBox="0 0 10 10" fill="none" aria-hidden="true">
+          <path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" />
+        </svg>
+      </html.button>
+    </html.div>
+  )
+
+  if (container) {
+    return createPortal(bar, container)
+  }
+
+  return bar
+}
+
+export const ActionBar = ActionBarInner

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

@@ -0,0 +1,106 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+
+export const styles = css.create({
+  overlay: {
+    position: 'fixed',
+    bottom: spacing.lg,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    backgroundColor: colors.bgCard,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.md,
+    boxShadow: shadows.lg,
+    zIndex: 50,
+    maxWidth: 'calc(100vw - 48px)',
+  },
+  overlayEmphasized: {
+    backgroundColor: colors.accent,
+    borderColor: colors.accent,
+  },
+  selectedCount: {
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    fontFamily: typography.fontFamily,
+    color: colors.text,
+    whiteSpace: 'nowrap',
+  },
+  selectedCountEmphasized: {
+    color: colors.accentContrast,
+  },
+  actions: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  closeButton: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 28,
+    height: 28,
+    padding: 0,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    borderRadius: radii.sm,
+    color: {
+      default: colors.textMuted,
+      ':hover': colors.text,
+    },
+    cursor: 'pointer',
+    transitionProperty: 'color, background-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+  },
+  closeButtonEmphasized: {
+    color: {
+      default: colors.accentContrast,
+      ':hover': colors.accentContrast,
+    },
+    opacity: {
+      default: 0.7,
+      ':hover': 1,
+    },
+  },
+  separator: {
+    width: 1,
+    alignSelf: 'stretch',
+    backgroundColor: colors.border,
+    marginTop: spacing.xs,
+    marginBottom: spacing.xs,
+  },
+  separatorEmphasized: {
+    backgroundColor: colors.accentContrast,
+    opacity: 0.3,
+  },
+})

package/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 
-export type ButtonVariant = 'primary' | 'secondary' | 'link' | 'danger'
+export type ButtonVariant = 'primary' | 'secondary' | 'inverseSecondary' | 'link' | 'danger'
 export type ButtonSize = 'default' | 'small'
 
 interface ButtonProps {

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

@@ -85,6 +85,17 @@ export const styles = css.create({
     paddingLeft: 0,
     paddingRight: 0,
   },
+  inverseSecondary: {
+    backgroundColor: {
+      default: 'rgba(0, 0, 0, 0.10)',
+      ':hover': 'rgba(0, 0, 0, 0.18)',
+    },
+    borderColor: {
+      default: 'rgba(0, 0, 0, 0.55)',
+      ':hover': 'rgba(0, 0, 0, 0.70)',
+    },
+    color: colors.accentContrast,
+  },
   danger: {
     backgroundColor: {
       default: colors.error,

package/src/components/Checkbox/Checkbox.tsx

@@ -8,6 +8,8 @@ interface CheckboxProps {
   checked?: boolean
   defaultChecked?: boolean
   disabled?: boolean
+  /** Accessible label when no visible label (children) is provided. */
+  'aria-label'?: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   children?: ReactNode
 }
@@ -18,6 +20,7 @@ export function Checkbox({
   checked: controlledChecked,
   defaultChecked = false,
   disabled = false,
+  'aria-label': ariaLabel,
   onChange,
   children,
 }: CheckboxProps) {
@@ -44,6 +47,7 @@ export function Checkbox({
         checked={isControlled ? controlledChecked : undefined}
         defaultChecked={!isControlled ? defaultChecked : undefined}
         disabled={disabled}
+        aria-label={!children ? ariaLabel : undefined}
         onChange={handleChange}
         style={styles.input}
       />

package/src/components/Select/Select.stories.tsx

@@ -12,7 +12,7 @@ type Story = StoryObj
 export const Default: Story = {
   render: () => (
     <Select.Root defaultValue="en">
-      <Select.Trigger>
+      <Select.Trigger aria-label="Language">
         <Select.Value />
         <Select.Icon />
       </Select.Trigger>
@@ -40,7 +40,7 @@ export const Default: Story = {
 export const OpenAndSelect: Story = {
   render: () => (
     <Select.Root defaultValue="en">
-      <Select.Trigger>
+      <Select.Trigger aria-label="Language">
         <Select.Value />
         <Select.Icon />
       </Select.Trigger>
@@ -75,7 +75,7 @@ export const OpenAndSelect: Story = {
 export const WithPlaceholder: Story = {
   render: () => (
     <Select.Root>
-      <Select.Trigger>
+      <Select.Trigger aria-label="Language">
         <Select.Value placeholder="Choose a language..." />
         <Select.Icon />
       </Select.Trigger>
@@ -119,7 +119,7 @@ export const WithPlaceholder: Story = {
 export const KeyboardNavigation: Story = {
   render: () => (
     <Select.Root>
-      <Select.Trigger>
+      <Select.Trigger aria-label="Language">
         <Select.Value placeholder="Select..." />
         <Select.Icon />
       </Select.Trigger>

package/src/components/Select/Select.tsx

@@ -28,7 +28,7 @@ function Root({name, defaultValue, value, onValueChange, initialLabels, children
 }
 
 // --- Trigger ---
-function Trigger({children}: {children: ReactNode}) {
+function Trigger({children, 'aria-label': ariaLabel}: {children: ReactNode; 'aria-label'?: string}) {
   const {open, toggle, listboxId, highlightedId, triggerRef} = useSelect()
   const localRef = useRef<HTMLButtonElement>(null)
 
@@ -43,6 +43,7 @@ function Trigger({children}: {children: ReactNode}) {
       type="button"
       role={'combobox' as 'listbox'}
       onClick={toggle}
+      aria-label={ariaLabel}
       aria-expanded={open}
       aria-haspopup="listbox"
       aria-controls={open ? listboxId : undefined}

package/src/components/Table/Table.tsx

@@ -125,7 +125,7 @@ const CellIndexContext = createContext<{index: number; total: number}>({
 
 // --- HeaderCell ---
 
-function HeaderCell({children}: {children: ReactNode}) {
+function HeaderCell({children, 'aria-label': ariaLabel}: {children?: ReactNode; 'aria-label'?: string}) {
   const {size, variant} = useTable()
   const {index, total} = useContext(CellIndexContext)
   const isLast = variant === 'bordered' && index === total - 1
@@ -133,6 +133,7 @@ function HeaderCell({children}: {children: ReactNode}) {
   return (
     <html.div
       role="columnheader"
+      aria-label={ariaLabel}
       style={[
         styles.headerCell,
         size === 'sm' ? styles.cellSm : styles.cellMd,

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,5 +1,6 @@
-import type {ReactNode} from 'react'
+import {type ReactNode, createContext, useContext, useRef} from 'react'
 import {css, html} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
 import {highContrastTheme, highContrastShadows} from '@duro-app/tokens/themes/high-contrast.css'
 
@@ -18,6 +19,7 @@ const themeMap: Partial<Record<ThemeName, readonly [typeof lightTheme, typeof li
 const styles = css.create({
   root: {
     display: 'contents',
+    color: colors.text,
   },
 })
 
@@ -25,9 +27,26 @@ const styles = css.create({
 // concrete VarGroup lacks the generic index signature. This is a known typing gap.
 type DivStyle = Parameters<typeof html.div>[0]['style']
 
+/** Context providing a portal target inside the themed tree. */
+const OverlayContainerContext = createContext<React.RefObject<HTMLDivElement | null> | null>(null)
+
+/** Returns the overlay container element for portals (inside the ThemeProvider). */
+export function useOverlayContainer(): HTMLElement {
+  const ref = useContext(OverlayContainerContext)
+  return ref?.current ?? (typeof document !== 'undefined' ? document.body : null!)
+}
+
 export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
+  const overlayRef = useRef<HTMLDivElement>(null)
   const overrides = themeMap[theme]
   const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
 
-  return <html.div style={themeStyles}>{children}</html.div>
+  return (
+    <html.div style={themeStyles}>
+      <OverlayContainerContext.Provider value={overlayRef}>
+        {children}
+        <html.div ref={overlayRef} />
+      </OverlayContainerContext.Provider>
+    </html.div>
+  )
 }

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -52,7 +52,7 @@ export function ToggleGroup({
   return (
     <ToggleGroupContext.Provider value={{value, toggle, disabled, orientation, size}}>
       <html.div
-        role="group"
+        role="toolbar"
         aria-orientation={orientation}
         style={[styles.root, orientation === 'vertical' && styles.vertical]}
       >

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -26,7 +26,7 @@ export const Default: Story = {
     <html.div style={centerStyles.center}>
       <Tooltip.Root content="This is a tooltip" delay={0}>
         <Tooltip.Trigger>
-          <html.span>Hover me</html.span>
+          <Badge>Hover me</Badge>
         </Tooltip.Trigger>
       </Tooltip.Root>
     </html.div>

package/src/index.ts

@@ -1,6 +1,7 @@
 import './strict.css'
 
 // Components
+export {ActionBar, type ActionBarProps} from './components/ActionBar/ActionBar'
 export {Alert, type AlertVariant} from './components/Alert/Alert'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
@@ -32,7 +33,7 @@ export {
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
 export {Tabs} from './components/Tabs/Tabs'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
-export {ThemeProvider, type ThemeName} from './components/ThemeProvider/ThemeProvider'
+export {ThemeProvider, useOverlayContainer, type ThemeName} from './components/ThemeProvider/ThemeProvider'
 export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'