@duro-app/ui 0.18.0 → 0.19.0

package/package.json

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

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 />,
+}

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,310 @@
+import {
+  type ReactNode,
+  type RefObject,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useId,
+  useRef,
+} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+// --- Types ---
+
+export type DialogSize = 'sm' | 'md' | 'lg'
+
+// --- Context ---
+
+interface DialogContextValue {
+  open: boolean
+  closing: boolean
+  dismissable: boolean
+  requestOpen: () => void
+  requestClose: () => void
+  titleId: string
+  descriptionId: string
+  popupRef: RefObject<HTMLDivElement | null>
+}
+
+const DialogContext = createContext<DialogContextValue | null>(null)
+
+function useDialog() {
+  const ctx = useContext(DialogContext)
+  if (!ctx) throw new Error('Dialog compound components must be used within Dialog.Root')
+  return ctx
+}
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+  /** Controlled open state */
+  open?: boolean
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean
+  /** Called when dialog open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Whether clicking backdrop closes the dialog. Default: true */
+  dismissable?: boolean
+  /** Duration of the close animation in ms. Default: 140 */
+  closeAnimationDuration?: number
+}
+
+function Root({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  dismissable = true,
+  closeAnimationDuration = 140,
+}: RootProps) {
+  const isControlled = controlledOpen !== undefined
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const [closing, setClosing] = useState(false)
+  const closingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const popupRef = useRef<HTMLDivElement>(null)
+
+  const isOpen = isControlled ? controlledOpen : internalOpen
+
+  const titleId = useId()
+  const descriptionId = useId()
+
+  const requestOpen = useCallback(() => {
+    if (closingTimerRef.current) {
+      clearTimeout(closingTimerRef.current)
+      closingTimerRef.current = null
+    }
+    setClosing(false)
+    if (!isControlled) setInternalOpen(true)
+    onOpenChange?.(true)
+  }, [isControlled, onOpenChange])
+
+  const requestClose = useCallback(() => {
+    setClosing(true)
+    closingTimerRef.current = setTimeout(() => {
+      setClosing(false)
+      closingTimerRef.current = null
+      if (!isControlled) setInternalOpen(false)
+      onOpenChange?.(false)
+    }, closeAnimationDuration)
+  }, [isControlled, onOpenChange, closeAnimationDuration])
+
+  // If controlled open goes false externally, trigger close animation
+  useEffect(() => {
+    if (isControlled && !controlledOpen && !closing) {
+      // Already closed, nothing to animate
+    }
+  }, [isControlled, controlledOpen, closing])
+
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (closingTimerRef.current) clearTimeout(closingTimerRef.current)
+    }
+  }, [])
+
+  // Handle Escape key
+  useEffect(() => {
+    if (!isOpen && !closing) return
+    if (!dismissable) return
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        requestClose()
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [isOpen, closing, dismissable, requestClose])
+
+  // Lock body scroll when open
+  useEffect(() => {
+    if (isOpen || closing) {
+      const prev = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+      return () => {
+        document.body.style.overflow = prev
+      }
+    }
+  }, [isOpen, closing])
+
+  return (
+    <DialogContext.Provider
+      value={{
+        open: isOpen || closing,
+        closing,
+        dismissable,
+        requestOpen,
+        requestClose,
+        titleId,
+        descriptionId,
+        popupRef,
+      }}
+    >
+      {children}
+    </DialogContext.Provider>
+  )
+}
+
+// --- Trigger ---
+
+interface TriggerProps {
+  children: ReactNode
+}
+
+function Trigger({children}: TriggerProps) {
+  const {requestOpen} = useDialog()
+
+  return (
+    <html.div onClick={requestOpen} style={styles.inlineWrapper}>
+      {children}
+    </html.div>
+  )
+}
+
+// --- Portal (renders backdrop + viewport + popup) ---
+
+interface PortalProps {
+  children: ReactNode
+  size?: DialogSize
+}
+
+function Portal({children, size = 'md'}: PortalProps) {
+  const {open, closing, dismissable, requestClose, titleId, descriptionId, popupRef} = useDialog()
+
+  const handleBackdropClick = useCallback(() => {
+    if (dismissable) {
+      requestClose()
+    }
+  }, [dismissable, requestClose])
+
+  if (!open) return null
+
+  return (
+    <>
+      {/* Backdrop — click to dismiss */}
+      <html.div
+        style={[
+          styles.backdrop,
+          closing && styles.backdropClosing,
+          !closing && styles.backdropOpen,
+        ]}
+        aria-hidden
+        onClick={handleBackdropClick}
+      />
+
+      {/* Viewport (centering container, pointer-events: none) */}
+      <html.div style={styles.viewport}>
+        <html.div
+          ref={popupRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
+          style={[
+            styles.popup,
+            styles[size],
+            closing && styles.popupClosing,
+            !closing && styles.popupOpen,
+          ]}
+        >
+          {children}
+        </html.div>
+      </html.div>
+    </>
+  )
+}
+
+// --- Header ---
+
+function Header({children}: {children: ReactNode}) {
+  return <html.div style={styles.header}>{children}</html.div>
+}
+
+// --- Title ---
+
+function Title({children}: {children: ReactNode}) {
+  const {titleId} = useDialog()
+  return (
+    <html.h2 id={titleId} style={styles.title}>
+      {children}
+    </html.h2>
+  )
+}
+
+// --- Description ---
+
+function Description({children}: {children: ReactNode}) {
+  const {descriptionId} = useDialog()
+  return (
+    <html.p id={descriptionId} style={styles.description}>
+      {children}
+    </html.p>
+  )
+}
+
+// --- Body ---
+
+function Body({children}: {children: ReactNode}) {
+  return <html.div style={styles.body}>{children}</html.div>
+}
+
+// --- Footer ---
+
+function Footer({children}: {children: ReactNode}) {
+  return <html.div style={styles.footer}>{children}</html.div>
+}
+
+// --- Close ---
+
+interface CloseProps {
+  children?: ReactNode
+  'aria-label'?: string
+}
+
+function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
+  const {requestClose} = useDialog()
+
+  if (children) {
+    return (
+      <html.div onClick={requestClose} style={styles.inlineWrapper}>
+        {children}
+      </html.div>
+    )
+  }
+
+  return (
+    <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"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+      </svg>
+    </html.button>
+  )
+}
+
+// --- Export ---
+
+export const Dialog = {
+  Root,
+  Trigger,
+  Portal,
+  Header,
+  Title,
+  Description,
+  Body,
+  Footer,
+  Close,
+}