@duro-app/ui 0.17.1 → 0.19.0

package/package.json

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

package/src/components/ActionBar/ActionBar.tsx

@@ -1,7 +1,6 @@
-import type {ReactNode} from 'react'
-import {createPortal} from 'react-dom'
+import {useEffect, useCallback, type ReactNode} from 'react'
 import {html} from 'react-strict-dom'
-import {useOverlayContainer} from '../ThemeProvider/ThemeProvider'
+import {useActionBarStack} from './ActionBarProvider'
 import {styles} from './styles.css'
 
 export interface ActionBarProps {
@@ -19,7 +18,7 @@ export interface ActionBarProps {
   children: ReactNode
 }
 
-function ActionBarInner({
+function ActionBarContent({
   selectedItemCount,
   selectedLabel,
   isEmphasized = false,
@@ -27,14 +26,10 @@ function ActionBarInner({
   dismissible = true,
   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 = (
+  return (
     <html.div
       role="toolbar"
       aria-label={label}
@@ -64,12 +59,33 @@ function ActionBarInner({
       )}
     </html.div>
   )
+}
+
+function ActionBarInner(props: ActionBarProps) {
+  const {selectedItemCount} = props
+  const stack = useActionBarStack()
+  const isActive = selectedItemCount !== 0
+
+  const renderBar = useCallback(() => <ActionBarContent {...props} />, [props])
+
+  useEffect(() => {
+    if (!stack.managed) return
+    if (isActive) {
+      stack.register(renderBar)
+    } else {
+      stack.unregister()
+    }
+    return () => stack.unregister()
+  }, [stack, isActive, renderBar])
 
-  if (container) {
-    return createPortal(bar, container)
+  // If no provider, fall back to standalone rendering
+  if (!stack.managed) {
+    if (!isActive) return null
+    return <ActionBarContent {...props} />
   }
 
-  return bar
+  // Managed by provider — rendering happens there
+  return null
 }
 
 export const ActionBar = ActionBarInner

package/src/components/ActionBar/ActionBarProvider.tsx

@@ -0,0 +1,100 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react'
+
+interface ActionBarEntry {
+  id: string
+  render: () => ReactNode
+}
+
+interface ActionBarStore {
+  subscribe: (cb: () => void) => () => void
+  getSnapshot: () => readonly ActionBarEntry[]
+  push: (id: string, render: () => ReactNode) => void
+  update: (id: string, render: () => ReactNode) => void
+  remove: (id: string) => void
+}
+
+function createActionBarStore(): ActionBarStore {
+  let entries: ActionBarEntry[] = []
+  const listeners = new Set<() => void>()
+
+  const notify = () => listeners.forEach((l) => l())
+
+  return {
+    subscribe: (cb) => {
+      listeners.add(cb)
+      return () => listeners.delete(cb)
+    },
+    getSnapshot: () => entries,
+    push: (id, render) => {
+      entries = [...entries, {id, render}]
+      notify()
+    },
+    update: (id, render) => {
+      entries = entries.map((e) => (e.id === id ? {id, render} : e))
+      notify()
+    },
+    remove: (id) => {
+      entries = entries.filter((e) => e.id !== id)
+      notify()
+    },
+  }
+}
+
+const ActionBarContext = createContext<ActionBarStore | null>(null)
+
+export function ActionBarProvider({children}: {children: ReactNode}) {
+  const storeRef = useRef<ActionBarStore>(null)
+  if (storeRef.current === null) {
+    storeRef.current = createActionBarStore()
+  }
+  const store = storeRef.current
+
+  const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const topEntry = entries.length > 0 ? entries[entries.length - 1] : null
+
+  return (
+    <ActionBarContext.Provider value={store}>
+      {children}
+      {topEntry?.render()}
+    </ActionBarContext.Provider>
+  )
+}
+
+export function useActionBarStack() {
+  const store = useContext(ActionBarContext)
+  const id = useId()
+
+  const register = useCallback(
+    (render: () => ReactNode) => {
+      if (!store) return
+      const entries = store.getSnapshot()
+      if (entries.some((e) => e.id === id)) {
+        store.update(id, render)
+      } else {
+        store.push(id, render)
+      }
+    },
+    [store, id],
+  )
+
+  const unregister = useCallback(() => {
+    store?.remove(id)
+  }, [store, id])
+
+  const isTop = useMemo(() => {
+    if (!store) return false
+    const entries = store.getSnapshot()
+    return entries.length > 0 && entries[entries.length - 1].id === id
+  }, [store, id])
+
+  return {id, register, unregister, managed: store !== null, isTop}
+}

package/src/components/Checkbox/Checkbox.meta.ts

@@ -12,7 +12,10 @@ export const meta: ComponentMeta = {
     'Selecting one of several options — use Select or ToggleGroup',
   ],
   relatedTo: [
-    {component: 'Switch', relationship: 'Switch for on/off settings; Checkbox for opt-in/selection'},
+    {
+      component: 'Switch',
+      relationship: 'Switch for on/off settings; Checkbox for opt-in/selection',
+    },
     {component: 'Toggle', relationship: 'Toggle for toolbar actions; Checkbox for form input'},
   ],
   example: `<Checkbox name="terms" onChange={(e) => console.log(e.target.checked)}>

package/src/components/Cluster/Cluster.meta.ts

@@ -1,17 +1,13 @@
 import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
-  description:
-    'Horizontal flex layout that WRAPS to the next line when items overflow.',
+  description: 'Horizontal flex layout that WRAPS to the next line when items overflow.',
   whenToUse: [
     'Tags, badges, or chips that should wrap when they exceed the container width',
     'Any set of inline elements with unknown/dynamic count',
     'Filter pills, keyword lists, avatar groups',
   ],
-  whenNotToUse: [
-    'Items that must stay on one line — use Inline',
-    'Vertical stacking — use Stack',
-  ],
+  whenNotToUse: ['Items that must stay on one line — use Inline', 'Vertical stacking — use Stack'],
   relatedTo: [
     {component: 'Inline', relationship: 'Same but does NOT wrap (nowrap)'},
     {component: 'Stack', relationship: 'Vertical equivalent'},

package/src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,325 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, within, userEvent} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {useState} from 'react'
+import {Dialog} from './Dialog'
+import {Button} from '../Button/Button'
+import {Text} from '../Text/Text'
+import {Inline} from '../Inline/Inline'
+import {Stack} from '../Stack/Stack'
+import {Input} from '../Input/Input'
+import {Field} from '../Field/Field'
+import {Heading} from '../Heading/Heading'
+
+const meta: Meta = {
+  title: 'Components/Dialog',
+}
+
+export default meta
+type Story = StoryObj
+
+// --- Default ---
+
+export const Default: Story = {
+  render: () => (
+    <Dialog.Root>
+      <Dialog.Trigger>
+        <Button>Open dialog</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Header>
+          <Dialog.Title>Confirm action</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Body>
+          <Text>Are you sure you want to proceed? This action cannot be undone.</Text>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close>
+            <Button variant="secondary">Cancel</Button>
+          </Dialog.Close>
+          <Button variant="primary">Confirm</Button>
+        </Dialog.Footer>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ),
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement)
+    const trigger = canvas.getByText('Open dialog')
+    await expect(trigger).toBeInTheDocument()
+
+    // Dialog should not be visible initially
+    expect(canvasElement.ownerDocument.querySelector('[role="dialog"]')).toBeNull()
+  },
+}
+
+// --- WithDescription ---
+
+export const WithDescription: Story = {
+  render: () => (
+    <Dialog.Root>
+      <Dialog.Trigger>
+        <Button variant="danger">Delete account</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Delete account</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Description>
+          This will permanently delete your account and all associated data.
+        </Dialog.Description>
+        <Dialog.Body>
+          <Text>Please type "DELETE" to confirm.</Text>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close>
+            <Button variant="secondary">Cancel</Button>
+          </Dialog.Close>
+          <Button variant="danger">Delete</Button>
+        </Dialog.Footer>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ),
+}
+
+// --- Sizes ---
+
+function SizeDemo() {
+  const [size, setSize] = useState<'sm' | 'md' | 'lg' | null>(null)
+
+  return (
+    <Inline gap="sm">
+      {(['sm', 'md', 'lg'] as const).map((s) => (
+        <Dialog.Root key={s} open={size === s} onOpenChange={(open) => setSize(open ? s : null)}>
+          <Dialog.Trigger>
+            <Button variant="secondary">{s.toUpperCase()}</Button>
+          </Dialog.Trigger>
+          <Dialog.Portal size={s}>
+            <Dialog.Header>
+              <Dialog.Title>Size: {s}</Dialog.Title>
+              <Dialog.Close />
+            </Dialog.Header>
+            <Dialog.Body>
+              <Text>
+                This dialog uses the <html.strong>{s}</html.strong> size preset.
+              </Text>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.Close>
+                <Button variant="secondary">Close</Button>
+              </Dialog.Close>
+            </Dialog.Footer>
+          </Dialog.Portal>
+        </Dialog.Root>
+      ))}
+    </Inline>
+  )
+}
+
+export const Sizes: Story = {
+  render: () => <SizeDemo />,
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement)
+    await expect(canvas.getByText('SM')).toBeInTheDocument()
+    await expect(canvas.getByText('MD')).toBeInTheDocument()
+    await expect(canvas.getByText('LG')).toBeInTheDocument()
+  },
+}
+
+// --- Controlled ---
+
+function ControlledDemo() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Stack gap="md">
+      <Inline gap="sm">
+        <Button onClick={() => setOpen(true)}>Open</Button>
+        <Text variant="caption">Status: {open ? 'Open' : 'Closed'}</Text>
+      </Inline>
+      <Dialog.Root open={open} onOpenChange={setOpen}>
+        <Dialog.Portal>
+          <Dialog.Header>
+            <Dialog.Title>Controlled dialog</Dialog.Title>
+            <Dialog.Close />
+          </Dialog.Header>
+          <Dialog.Body>
+            <Text>This dialog is controlled via the open prop.</Text>
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button variant="secondary" onClick={() => setOpen(false)}>
+              Close programmatically
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </Stack>
+  )
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledDemo />,
+}
+
+// --- WithForm ---
+
+function FormDialogDemo() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger>
+        <Button>Edit profile</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal size="md">
+        <Dialog.Header>
+          <Dialog.Title>Edit profile</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Description>
+          Update your display name and email address.
+        </Dialog.Description>
+        <Dialog.Body>
+          <Stack gap="md">
+            <Field.Root>
+              <Field.Label>Display name</Field.Label>
+              <Input placeholder="Enter your name" />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label>Email</Field.Label>
+              <Input type="email" placeholder="you@example.com" />
+            </Field.Root>
+          </Stack>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close>
+            <Button variant="secondary">Cancel</Button>
+          </Dialog.Close>
+          <Button onClick={() => setOpen(false)}>Save changes</Button>
+        </Dialog.Footer>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+export const WithForm: Story = {
+  render: () => <FormDialogDemo />,
+}
+
+// --- Danger confirmation ---
+
+function DangerDialogDemo() {
+  const [open, setOpen] = useState(false)
+  const [confirmed, setConfirmed] = useState(false)
+
+  return (
+    <Stack gap="md">
+      <Dialog.Root open={open} onOpenChange={setOpen}>
+        <Dialog.Trigger>
+          <Button variant="danger">Revoke certificate</Button>
+        </Dialog.Trigger>
+        <Dialog.Portal size="sm">
+          <Dialog.Header>
+            <Dialog.Title>Revoke certificate</Dialog.Title>
+            <Dialog.Close />
+          </Dialog.Header>
+          <Dialog.Description>
+            This will immediately invalidate the certificate. Connected devices will lose access.
+          </Dialog.Description>
+          <Dialog.Body>
+            <Text variant="bodySm">Certificate: web-server-prod-2024.pem</Text>
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Dialog.Close>
+              <Button variant="secondary">Cancel</Button>
+            </Dialog.Close>
+            <Button
+              variant="danger"
+              onClick={() => {
+                setConfirmed(true)
+                setOpen(false)
+              }}
+            >
+              Revoke
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Portal>
+      </Dialog.Root>
+      {confirmed && <Text variant="bodySm">Certificate revoked.</Text>}
+    </Stack>
+  )
+}
+
+export const DangerConfirmation: Story = {
+  render: () => <DangerDialogDemo />,
+}
+
+// --- Non-dismissable (modal) ---
+
+export const NonDismissable: Story = {
+  render: () => (
+    <Dialog.Root dismissable={false}>
+      <Dialog.Trigger>
+        <Button>Open non-dismissable</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Terms of service</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Stack gap="md">
+            <Text>
+              You must accept the terms of service to continue. This dialog cannot be
+              dismissed by clicking outside or pressing Escape.
+            </Text>
+            <Text variant="bodySm" color="muted">
+              Try clicking the backdrop or pressing Escape — the dialog stays open.
+            </Text>
+          </Stack>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Close>
+            <Button variant="secondary">Decline</Button>
+          </Dialog.Close>
+          <Dialog.Close>
+            <Button>Accept</Button>
+          </Dialog.Close>
+        </Dialog.Footer>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ),
+}
+
+// --- Backdrop dismiss ---
+
+function BackdropDismissDemo() {
+  const [lastAction, setLastAction] = useState('')
+
+  return (
+    <Stack gap="md">
+      <Dialog.Root onOpenChange={(open) => !open && setLastAction('Dismissed')}>
+        <Dialog.Trigger>
+          <Button variant="secondary">Open dialog</Button>
+        </Dialog.Trigger>
+        <Dialog.Portal size="sm">
+          <Dialog.Header>
+            <Dialog.Title>Click outside to close</Dialog.Title>
+            <Dialog.Close />
+          </Dialog.Header>
+          <Dialog.Body>
+            <Text>
+              Click the dark backdrop behind this dialog to dismiss it.
+              You can also press Escape or use the close button.
+            </Text>
+          </Dialog.Body>
+        </Dialog.Portal>
+      </Dialog.Root>
+      {lastAction && <Text variant="bodySm">Last action: {lastAction}</Text>}
+    </Stack>
+  )
+}
+
+export const BackdropDismiss: Story = {
+  render: () => <BackdropDismissDemo />,
+}