@duro-app/ui 0.12.2 → 0.14.0

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

@@ -0,0 +1,97 @@
+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({
+  root: {
+    position: 'relative',
+    display: 'inline-flex',
+  },
+  trigger: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    backgroundColor: colors.bgCard,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.accent,
+    },
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+  },
+  value: {
+    color: colors.text,
+  },
+  placeholder: {
+    color: colors.textMuted,
+  },
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    color: colors.textMuted,
+  },
+  backdrop: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 49,
+  },
+  popup: {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    marginTop: spacing.xs,
+    backgroundColor: colors.bgCard,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    boxShadow: shadows.md,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    minWidth: 120,
+    zIndex: 50,
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontSize: typography.fontSizeSm,
+    fontFamily: typography.fontFamily,
+    color: colors.text,
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+  },
+  itemSelected: {
+    color: colors.accent,
+    fontWeight: typography.fontWeightMedium,
+  },
+  itemHighlighted: {
+    backgroundColor: colors.bgCardHover,
+  },
+  hidden: {
+    display: 'none',
+  },
+})

package/src/components/Select/useSelectRoot.ts

@@ -0,0 +1,178 @@
+import {useState, useCallback, useMemo, useRef, useId, useEffect} from 'react'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import type {SelectContextValue} from './SelectContext'
+
+interface UseSelectRootOptions {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  initialLabels?: Record<string, string>
+}
+
+export function useSelectRoot({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  initialLabels,
+}: UseSelectRootOptions) {
+  const [value, setValue] = useControllableValue<string | null>(
+    controlledValue,
+    defaultValue ?? null,
+    onValueChange,
+  )
+  const [open, setOpen] = useState(false)
+  const [labels, setLabels] = useState<Record<string, string>>(initialLabels ?? {})
+  const [highlightedId, setHighlightedId] = useState<string | null>(null)
+  const listboxId = useId()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const itemsRef = useRef(new Map<string, {value: string; element: HTMLElement}>())
+  const orderRef = useRef<string[]>([])
+
+  const close = useCallback(() => {
+    setOpen(false)
+    setHighlightedId(null)
+    triggerRef.current?.focus()
+  }, [])
+
+  const toggle = useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) {
+        const items = itemsRef.current
+        const order = orderRef.current
+        let found: string | null = null
+        for (const id of order) {
+          const item = items.get(id)
+          if (item && item.value === value) {
+            found = id
+            break
+          }
+        }
+        setHighlightedId(found ?? (order.length > 0 ? order[0] : null))
+      } else {
+        setHighlightedId(null)
+      }
+      return !prev
+    })
+  }, [value])
+
+  const registerLabel = useCallback((v: string, label: string) => {
+    setLabels((prev) => {
+      if (prev[v] === label) return prev
+      return {...prev, [v]: label}
+    })
+  }, [])
+
+  const registerItem = useCallback((id: string, itemValue: string, element: HTMLElement) => {
+    itemsRef.current.set(id, {value: itemValue, element})
+    const map = itemsRef.current
+    const ids = [...map.keys()]
+    ids.sort((a, b) => {
+      const elA = map.get(a)?.element
+      const elB = map.get(b)?.element
+      if (!elA || !elB) return 0
+      return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    })
+    orderRef.current = ids
+    return () => {
+      itemsRef.current.delete(id)
+      orderRef.current = orderRef.current.filter((i) => i !== id)
+    }
+  }, [])
+
+  // Native keydown for full KeyboardEvent access (preventDefault)
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root || !open) return
+
+    function handleKeyDown(e: KeyboardEvent) {
+      const order = orderRef.current
+      const items = itemsRef.current
+      if (order.length === 0) return
+
+      switch (e.key) {
+        case 'ArrowDown': {
+          e.preventDefault()
+          setHighlightedId((prev) => {
+            const idx = prev ? order.indexOf(prev) : -1
+            return order[(idx + 1) % order.length]
+          })
+          break
+        }
+        case 'ArrowUp': {
+          e.preventDefault()
+          setHighlightedId((prev) => {
+            const idx = prev ? order.indexOf(prev) : 0
+            return order[(idx - 1 + order.length) % order.length]
+          })
+          break
+        }
+        case 'Home': {
+          e.preventDefault()
+          setHighlightedId(order[0])
+          break
+        }
+        case 'End': {
+          e.preventDefault()
+          setHighlightedId(order[order.length - 1])
+          break
+        }
+        case 'Enter':
+        case ' ': {
+          e.preventDefault()
+          setHighlightedId((prev) => {
+            if (prev) {
+              const item = items.get(prev)
+              if (item) {
+                setValue(item.value)
+                close()
+              }
+            }
+            return prev
+          })
+          break
+        }
+        case 'Escape':
+        case 'Tab': {
+          close()
+          break
+        }
+      }
+    }
+
+    root.addEventListener('keydown', handleKeyDown)
+    return () => root.removeEventListener('keydown', handleKeyDown)
+  }, [open, close, setValue])
+
+  const ctx: SelectContextValue = useMemo(
+    () => ({
+      open,
+      toggle,
+      close,
+      value,
+      setValue,
+      labels,
+      registerLabel,
+      listboxId,
+      highlightedId,
+      setHighlightedId,
+      registerItem,
+      triggerRef,
+    }),
+    [
+      open,
+      toggle,
+      close,
+      value,
+      setValue,
+      labels,
+      registerLabel,
+      listboxId,
+      highlightedId,
+      setHighlightedId,
+      registerItem,
+    ],
+  )
+
+  return {ctx, rootRef}
+}

package/src/components/SideNav/SideNav.stories.tsx

@@ -0,0 +1,77 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {SideNav} from './SideNav'
+
+const meta: Meta<typeof SideNav.Root> = {
+  title: 'Components/SideNav',
+  component: SideNav.Root,
+  args: {
+    onValueChange: fn(),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SideNav.Root>
+
+export const Default: Story = {
+  render: (args) => (
+    <SideNav.Root {...args} defaultValue="dashboard">
+      <SideNav.Group label="Overview" defaultExpanded>
+        <SideNav.Item value="dashboard">Dashboard</SideNav.Item>
+        <SideNav.Item value="analytics">Analytics</SideNav.Item>
+      </SideNav.Group>
+      <SideNav.Group label="Settings">
+        <SideNav.Item value="profile">Profile</SideNav.Item>
+        <SideNav.Item value="security">Security</SideNav.Item>
+        <SideNav.Item value="notifications">Notifications</SideNav.Item>
+      </SideNav.Group>
+    </SideNav.Root>
+  ),
+  play: async ({canvas}) => {
+    const nav = canvas.getByRole('navigation')
+    await expect(nav).toBeInTheDocument()
+
+    const activeItem = canvas.getByText('Dashboard')
+    await expect(activeItem).toHaveAttribute('aria-current', 'page')
+  },
+}
+
+export const Collapsed: Story = {
+  render: (args) => (
+    <SideNav.Root {...args}>
+      <SideNav.Group label="Section A">
+        <SideNav.Item value="a1">Item A1</SideNav.Item>
+        <SideNav.Item value="a2">Item A2</SideNav.Item>
+      </SideNav.Group>
+      <SideNav.Group label="Section B">
+        <SideNav.Item value="b1">Item B1</SideNav.Item>
+      </SideNav.Group>
+    </SideNav.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByText('Section A')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    await expect(canvas.getByText('Item A1')).toBeInTheDocument()
+  },
+}
+
+export const Interactive: Story = {
+  render: (args) => (
+    <SideNav.Root {...args}>
+      <SideNav.Group label="Pages" defaultExpanded>
+        <SideNav.Item value="home">Home</SideNav.Item>
+        <SideNav.Item value="about">About</SideNav.Item>
+        <SideNav.Item value="contact">Contact</SideNav.Item>
+      </SideNav.Group>
+    </SideNav.Root>
+  ),
+  play: async ({canvas, userEvent, args}) => {
+    const aboutItem = canvas.getByText('About')
+    await userEvent.click(aboutItem)
+    await expect(args.onValueChange).toHaveBeenCalledWith('about')
+    await expect(aboutItem).toHaveAttribute('aria-current', 'page')
+  },
+}

package/src/components/SideNav/SideNav.tsx

@@ -0,0 +1,172 @@
+import {type ReactNode, useState, useCallback, useRef, useEffect} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {SideNavContext, useSideNav} from './SideNavContext'
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+}
+
+function Root({children, value: controlledValue, defaultValue, onValueChange}: RootProps) {
+  const [activeValue, onSelect] = useControllableValue<string | null>(
+    controlledValue,
+    defaultValue ?? null,
+    onValueChange
+      ? (v) => {
+          if (v !== null) onValueChange(v)
+        }
+      : undefined,
+  )
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set())
+  const orderRef = useRef<string[]>([])
+
+  const toggleGroup = useCallback((group: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev)
+      if (next.has(group)) {
+        next.delete(group)
+      } else {
+        next.add(group)
+      }
+      return next
+    })
+  }, [])
+
+  const registerItem = useCallback((value: string) => {
+    if (!orderRef.current.includes(value)) {
+      orderRef.current.push(value)
+    }
+    return () => {
+      orderRef.current = orderRef.current.filter((v) => v !== value)
+    }
+  }, [])
+
+  // Auto-expand group containing active value
+  useEffect(() => {
+    if (activeValue) {
+      setExpandedGroups((prev) => {
+        // We don't know which group it belongs to here — Group handles this
+        return prev
+      })
+    }
+  }, [activeValue])
+
+  return (
+    <SideNavContext.Provider
+      value={{activeValue, onSelect, expandedGroups, toggleGroup, registerItem, orderRef}}
+    >
+      <html.nav role="navigation" style={styles.root}>
+        {children}
+      </html.nav>
+    </SideNavContext.Provider>
+  )
+}
+
+// --- Group ---
+
+interface GroupProps {
+  children: ReactNode
+  label: string
+  groupKey?: string
+  defaultExpanded?: boolean
+}
+
+function Group({children, label, groupKey, defaultExpanded}: GroupProps) {
+  const key = groupKey ?? label
+  const {expandedGroups, toggleGroup, activeValue} = useSideNav()
+  const isExpanded = expandedGroups.has(key)
+  const groupRef = useRef<HTMLDivElement>(null)
+
+  // Auto-expand if this group contains the active item
+  useEffect(() => {
+    if (!activeValue || expandedGroups.has(key)) return
+    const el = groupRef.current
+    if (!el) return
+    const activeBtn = el.querySelector(`[data-nav-value="${activeValue}"]`)
+    if (activeBtn) {
+      toggleGroup(key)
+    }
+  }, [activeValue, key, expandedGroups, toggleGroup])
+
+  // Expand on first render if defaultExpanded
+  useEffect(() => {
+    if (defaultExpanded && !expandedGroups.has(key)) {
+      toggleGroup(key)
+    }
+    // Only run on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const hasActiveChild = (() => {
+    if (!activeValue || !groupRef.current) return false
+    return !!groupRef.current.querySelector(`[data-nav-value="${activeValue}"]`)
+  })()
+
+  return (
+    <html.div ref={groupRef} style={styles.group}>
+      <html.button
+        type="button"
+        onClick={() => toggleGroup(key)}
+        style={[styles.groupTrigger, hasActiveChild && styles.groupTriggerActive]}
+        aria-expanded={isExpanded}
+      >
+        <html.span style={[styles.chevron, isExpanded && styles.chevronOpen]}>
+          <svg
+            width={10}
+            height={10}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+        </html.span>
+        {label}
+      </html.button>
+      {isExpanded && children}
+    </html.div>
+  )
+}
+
+// --- Item ---
+
+interface ItemProps {
+  value: string
+  children: ReactNode
+}
+
+function Item({value, children}: ItemProps) {
+  const {activeValue, onSelect, registerItem} = useSideNav()
+  const isActive = activeValue === value
+
+  useEffect(() => {
+    return registerItem(value)
+  }, [value, registerItem])
+
+  return (
+    <html.button
+      type="button"
+      data-nav-value={value}
+      onClick={() => onSelect(value)}
+      style={[styles.item, isActive && styles.itemActive]}
+      aria-current={isActive ? 'page' : undefined}
+    >
+      {children}
+    </html.button>
+  )
+}
+
+export const SideNav = {
+  Root,
+  Group,
+  Item,
+}

package/src/components/SideNav/SideNavContext.ts

@@ -0,0 +1,18 @@
+import {createContext, useContext} from 'react'
+
+export interface SideNavContextValue {
+  activeValue: string | null
+  onSelect: (value: string) => void
+  expandedGroups: Set<string>
+  toggleGroup: (group: string) => void
+  registerItem: (value: string) => () => void
+  orderRef: React.RefObject<string[]>
+}
+
+export const SideNavContext = createContext<SideNavContextValue | null>(null)
+
+export function useSideNav() {
+  const ctx = useContext(SideNavContext)
+  if (!ctx) throw new Error('SideNav compound components must be used within SideNav.Root')
+  return ctx
+}

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

@@ -0,0 +1,95 @@
+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'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 0,
+  },
+  group: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  groupTrigger: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeXs,
+    fontWeight: typography.fontWeightSemibold,
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.05em',
+    color: {
+      default: colors.textMuted,
+      ':hover': colors.text,
+    },
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    cursor: 'pointer',
+    transitionProperty: 'color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  groupTriggerActive: {
+    color: colors.text,
+  },
+  chevron: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    transitionProperty: 'transform',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  chevronOpen: {
+    transform: 'rotate(90deg)',
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: '6px',
+    paddingBottom: '6px',
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightNormal,
+    color: {
+      default: colors.textMuted,
+      ':hover': colors.text,
+    },
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    borderWidth: 0,
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    transitionProperty: 'color, background-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    textAlign: 'left' as const,
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+  },
+  itemActive: {
+    color: colors.accent,
+    fontWeight: typography.fontWeightMedium,
+  },
+})

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,59 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Spinner} from './Spinner'
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Spinner>
+
+export const Default: Story = {
+  play: async ({canvas}) => {
+    const status = canvas.getByRole('status')
+    await expect(status).toBeInTheDocument()
+    await expect(status).toHaveTextContent('Loading')
+  },
+}
+
+export const Small: Story = {
+  args: {size: 'sm'},
+}
+
+export const Large: Story = {
+  args: {size: 'lg'},
+}
+
+export const CustomLabel: Story = {
+  args: {label: 'Saving...'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('status')).toHaveTextContent('Saving...')
+  },
+}
+
+const rowStyles = css.create({
+  row: {display: 'flex', gap: 24, alignItems: 'center'},
+})
+
+export const AllSizes: Story = {
+  render: () => (
+    <html.div style={rowStyles.row}>
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const spinners = canvas.getAllByRole('status')
+    await expect(spinners.length).toBe(3)
+  },
+}