@duro-app/ui 0.25.0 → 0.27.0

package/package.json

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

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -56,7 +56,6 @@ function Root({
     <CheckboxGroupContext.Provider value={{value, onToggle, disabled}}>
       <html.div
         role="group"
-        aria-orientation={orientation}
         style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
       >
         {children}

package/src/components/Combobox/Combobox.meta.ts

@@ -18,8 +18,14 @@ export const meta: ComponentMeta = {
     optional: ['Empty'],
   },
   relatedTo: [
-    {component: 'Select', relationship: 'Select for short lists without search; Combobox for long filterable lists'},
-    {component: 'Input', relationship: 'Input for free-form text; Combobox for constrained selection'},
+    {
+      component: 'Select',
+      relationship: 'Select for short lists without search; Combobox for long filterable lists',
+    },
+    {
+      component: 'Input',
+      relationship: 'Input for free-form text; Combobox for constrained selection',
+    },
     {component: 'Menu', relationship: 'Menu triggers actions; Combobox picks a value'},
   ],
   example: `<Combobox.Root name="country" defaultValue="us" initialLabels={{us: 'United States'}}>

package/src/components/Combobox/Combobox.stories.tsx

@@ -67,17 +67,25 @@ function ControlledDemo() {
           <Combobox.Trigger />
         </Combobox.Input>
         <Combobox.Popup>
-          <Combobox.Item value="admin"><Combobox.ItemText>Admin</Combobox.ItemText></Combobox.Item>
-          <Combobox.Item value="editor"><Combobox.ItemText>Editor</Combobox.ItemText></Combobox.Item>
-          <Combobox.Item value="viewer"><Combobox.ItemText>Viewer</Combobox.ItemText></Combobox.Item>
-          <Combobox.Item value="moderator"><Combobox.ItemText>Moderator</Combobox.ItemText></Combobox.Item>
-          <Combobox.Item value="analyst"><Combobox.ItemText>Analyst</Combobox.ItemText></Combobox.Item>
+          <Combobox.Item value="admin">
+            <Combobox.ItemText>Admin</Combobox.ItemText>
+          </Combobox.Item>
+          <Combobox.Item value="editor">
+            <Combobox.ItemText>Editor</Combobox.ItemText>
+          </Combobox.Item>
+          <Combobox.Item value="viewer">
+            <Combobox.ItemText>Viewer</Combobox.ItemText>
+          </Combobox.Item>
+          <Combobox.Item value="moderator">
+            <Combobox.ItemText>Moderator</Combobox.ItemText>
+          </Combobox.Item>
+          <Combobox.Item value="analyst">
+            <Combobox.ItemText>Analyst</Combobox.ItemText>
+          </Combobox.Item>
           <Combobox.Empty>No roles found</Combobox.Empty>
         </Combobox.Popup>
       </Combobox.Root>
-      <span style={{fontSize: 14, color: '#888'}}>
-        Selected: {value ?? 'none'}
-      </span>
+      <span style={{fontSize: 14, color: '#888'}}>Selected: {value ?? 'none'}</span>
     </div>
   )
 }
@@ -92,12 +100,42 @@ export const Controlled: Story = {
 export const ManyItems: Story = {
   render: () => {
     const countries = [
-      'Argentina', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada',
-      'Chile', 'China', 'Colombia', 'Denmark', 'Egypt', 'Finland',
-      'France', 'Germany', 'Greece', 'India', 'Indonesia', 'Ireland',
-      'Italy', 'Japan', 'Kenya', 'Mexico', 'Netherlands', 'New Zealand',
-      'Norway', 'Peru', 'Poland', 'Portugal', 'South Korea', 'Spain',
-      'Sweden', 'Switzerland', 'Thailand', 'Turkey', 'United Kingdom', 'United States',
+      'Argentina',
+      'Australia',
+      'Austria',
+      'Belgium',
+      'Brazil',
+      'Canada',
+      'Chile',
+      'China',
+      'Colombia',
+      'Denmark',
+      'Egypt',
+      'Finland',
+      'France',
+      'Germany',
+      'Greece',
+      'India',
+      'Indonesia',
+      'Ireland',
+      'Italy',
+      'Japan',
+      'Kenya',
+      'Mexico',
+      'Netherlands',
+      'New Zealand',
+      'Norway',
+      'Peru',
+      'Poland',
+      'Portugal',
+      'South Korea',
+      'Spain',
+      'Sweden',
+      'Switzerland',
+      'Thailand',
+      'Turkey',
+      'United Kingdom',
+      'United States',
     ]
 
     return (

package/src/components/Combobox/Combobox.tsx

@@ -47,16 +47,8 @@ function Root({
 
 // --- Input ---
 function Input({placeholder, children}: {placeholder?: string; children?: ReactNode}) {
-  const {
-    open,
-    openPopup,
-    close,
-    inputValue,
-    setInputValue,
-    listboxId,
-    highlightedId,
-    inputRef,
-  } = useCombobox()
+  const {open, openPopup, close, inputValue, setInputValue, listboxId, highlightedId, inputRef} =
+    useCombobox()
   const localRef = useRef<HTMLInputElement>(null)
   const [focused, setFocused] = useState(false)
 
@@ -143,11 +135,7 @@ function Popup({children}: {children: ReactNode}) {
   if (!open) return null
 
   return (
-    <html.div
-      id={listboxId}
-      role="listbox"
-      style={styles.popup}
-    >
+    <html.div id={listboxId} role="listbox" style={styles.popup}>
       {children}
     </html.div>
   )

package/src/components/Field/Field.stories.tsx

@@ -105,7 +105,9 @@ export const WithNecessityIcon: Story = {
       <Field.Root required>
         <Field.Label>Email</Field.Label>
         <Input placeholder="you@example.com" />
-        <Field.Description>Required field with no Form context — indicator needs Form.</Field.Description>
+        <Field.Description>
+          Required field with no Form context — indicator needs Form.
+        </Field.Description>
       </Field.Root>
     </html.div>
   ),

package/src/components/Field/Field.tsx

@@ -172,10 +172,7 @@ function Label({children}: LabelProps) {
   const indicator = ctx?.necessityIndicator
 
   return (
-    <html.label
-      for={ctx?.controlId}
-      style={[styles.label, isSide && styles.labelSide]}
-    >
+    <html.label for={ctx?.controlId} style={[styles.label, isSide && styles.labelSide]}>
       {children}
       {indicator === 'icon' && ctx?.required && (
         <html.span style={styles.necessityIcon} aria-hidden={true}>

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

@@ -31,7 +31,7 @@ export const styles = css.create({
   },
   error: {
     fontSize: typography.fontSizeXs,
-    color: colors.error,
+    color: colors.errorText,
   },
   fieldContent: {
     display: 'flex',

package/src/components/Form/Form.tsx

@@ -11,11 +11,7 @@ import {
 } from 'react-hook-form'
 import {effectTsResolver} from '@hookform/resolvers/effect-ts'
 import type {Schema} from 'effect'
-import {
-  FormContext,
-  type LabelPosition,
-  type NecessityIndicator,
-} from './FormContext'
+import {FormContext, type LabelPosition, type NecessityIndicator} from './FormContext'
 
 export interface FormProps<T extends FieldValues> {
   schema: Schema.Schema<T>

package/src/components/ScrollArea/ScrollArea.tsx

@@ -28,11 +28,15 @@ interface ViewportProps {
 }
 
 function Viewport({children, maxHeight}: ViewportProps) {
-  const {viewportRef} = useScrollArea()
+  const {viewportRef, viewportId} = useScrollArea()
 
   return (
     <html.div
       ref={viewportRef}
+      id={viewportId}
+      tabIndex={0}
+      role="region"
+      aria-label="Scrollable content"
       style={[styles.viewport, maxHeight != null && styles.viewportMaxHeight(maxHeight)]}
     >
       {children}
@@ -65,7 +69,16 @@ interface ScrollbarProps {
 }
 
 function Scrollbar({orientation = 'vertical', children}: ScrollbarProps) {
-  const {scrolling, scrollHeight, scrollWidth, clientHeight, clientWidth} = useScrollArea()
+  const {
+    viewportId,
+    scrolling,
+    scrollTop,
+    scrollLeft,
+    scrollHeight,
+    scrollWidth,
+    clientHeight,
+    clientWidth,
+  } = useScrollArea()
 
   // Hide scrollbar when content fits
   const hasOverflow =
@@ -73,11 +86,22 @@ function Scrollbar({orientation = 'vertical', children}: ScrollbarProps) {
 
   if (!hasOverflow) return null
 
+  const isVertical = orientation === 'vertical'
+  const maxScroll = isVertical ? scrollHeight - clientHeight : scrollWidth - clientWidth
+  const scrollOffset = isVertical ? scrollTop : scrollLeft
+  const valueNow = maxScroll > 0 ? Math.round((scrollOffset / maxScroll) * 100) : 0
+
   return (
     <html.div
+      role="scrollbar"
+      aria-controls={viewportId}
+      aria-orientation={orientation}
+      aria-valuenow={valueNow}
+      aria-valuemin={0}
+      aria-valuemax={100}
       style={[
         styles.scrollbar,
-        orientation === 'vertical' ? styles.scrollbarVertical : styles.scrollbarHorizontal,
+        isVertical ? styles.scrollbarVertical : styles.scrollbarHorizontal,
         scrolling ? styles.scrollbarVisible : styles.scrollbarHidden,
       ]}
     >

package/src/components/ScrollArea/ScrollAreaContext.ts

@@ -3,6 +3,7 @@ import {createContext, useContext} from 'react'
 export interface ScrollAreaContextValue {
   viewportRef: React.RefObject<HTMLDivElement | null>
   contentRef: React.RefObject<HTMLDivElement | null>
+  viewportId: string
   scrollTop: number
   scrollLeft: number
   scrollHeight: number

package/src/components/ScrollArea/useScrollAreaRoot.ts

@@ -1,7 +1,8 @@
-import {useState, useCallback, useRef, useEffect} from 'react'
+import {useState, useCallback, useRef, useEffect, useId} from 'react'
 import type {ScrollAreaContextValue} from './ScrollAreaContext'
 
 export function useScrollAreaRoot(): ScrollAreaContextValue {
+  const viewportId = useId()
   const viewportRef = useRef<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
   const [scrollTop, setScrollTop] = useState(0)
@@ -61,6 +62,7 @@ export function useScrollAreaRoot(): ScrollAreaContextValue {
   return {
     viewportRef,
     contentRef,
+    viewportId,
     scrollTop,
     scrollLeft,
     scrollHeight,

package/src/components/Table/Table.stories.tsx

@@ -9,7 +9,18 @@ import {Button} from '../Button/Button'
 import {ActionBar} from '../ActionBar/ActionBar'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
-import {flexRender, createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, type SortingState, type ColumnFiltersState, type PaginationState} from '@tanstack/react-table'
+import {
+  flexRender,
+  createColumnHelper,
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  type SortingState,
+  type ColumnFiltersState,
+  type PaginationState,
+} from '@tanstack/react-table'
 import {useDataTable} from './useDataTable'
 import {Combobox} from '../Combobox/Combobox'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
@@ -515,16 +526,60 @@ interface User {
 }
 
 const firstNames = [
-  'Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Hank',
-  'Iris', 'Jack', 'Karen', 'Leo', 'Mona', 'Nick', 'Olivia', 'Paul',
-  'Quinn', 'Rita', 'Sam', 'Tina', 'Uma', 'Vince', 'Wendy', 'Xander',
-  'Yara', 'Zach',
+  'Alice',
+  'Bob',
+  'Carol',
+  'Dave',
+  'Eve',
+  'Frank',
+  'Grace',
+  'Hank',
+  'Iris',
+  'Jack',
+  'Karen',
+  'Leo',
+  'Mona',
+  'Nick',
+  'Olivia',
+  'Paul',
+  'Quinn',
+  'Rita',
+  'Sam',
+  'Tina',
+  'Uma',
+  'Vince',
+  'Wendy',
+  'Xander',
+  'Yara',
+  'Zach',
 ]
 const lastNames = [
-  'Adams', 'Brown', 'Clark', 'Davis', 'Evans', 'Foster', 'Garcia',
-  'Hill', 'Ito', 'Jones', 'Kim', 'Lee', 'Moore', 'Nash', 'Owen',
-  'Patel', 'Quinn', 'Reed', 'Smith', 'Tran', 'Ueda', 'Voss', 'Wang',
-  'Xu', 'Yang', 'Zhang',
+  'Adams',
+  'Brown',
+  'Clark',
+  'Davis',
+  'Evans',
+  'Foster',
+  'Garcia',
+  'Hill',
+  'Ito',
+  'Jones',
+  'Kim',
+  'Lee',
+  'Moore',
+  'Nash',
+  'Owen',
+  'Patel',
+  'Quinn',
+  'Reed',
+  'Smith',
+  'Tran',
+  'Ueda',
+  'Voss',
+  'Wang',
+  'Xu',
+  'Yang',
+  'Zhang',
 ]
 const roles = ['Admin', 'Editor', 'Viewer', 'Moderator', 'Analyst']
 const statuses = ['Active', 'Inactive', 'Pending', 'Suspended']
@@ -729,7 +784,7 @@ function FullFeaturedDemo() {
     <html.div style={fullFeaturedStyles.wrapper}>
       <html.div style={fullFeaturedStyles.filterBar}>
         <Combobox.Root
-          value={table.getColumn('role')?.getFilterValue() as string ?? ''}
+          value={(table.getColumn('role')?.getFilterValue() as string) ?? ''}
           onValueChange={(v) => table.getColumn('role')?.setFilterValue(v || undefined)}
           onInputChange={(v) => table.getColumn('role')?.setFilterValue(v || undefined)}
         >
@@ -749,7 +804,7 @@ function FullFeaturedDemo() {
           </Combobox.Popup>
         </Combobox.Root>
         <Combobox.Root
-          value={table.getColumn('status')?.getFilterValue() as string ?? ''}
+          value={(table.getColumn('status')?.getFilterValue() as string) ?? ''}
           onValueChange={(v) => table.getColumn('status')?.setFilterValue(v || undefined)}
           onInputChange={(v) => table.getColumn('status')?.setFilterValue(v || undefined)}
         >

package/src/components/Tag/Tag.meta.ts

@@ -0,0 +1,22 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Interactive tag/chip with optional remove button. Works standalone or inside TagGroup for collection management. Visually similar to Badge but supports interaction.',
+  whenToUse: [
+    'Removable items in a list (emails, categories)',
+    'Inside TagGroup for editable tag collections',
+    'Interactive labels that can be dismissed',
+  ],
+  whenNotToUse: [
+    'Static status indicators — use Badge',
+    'Toggleable selection — use Toggle or ToggleGroup',
+  ],
+  relatedTo: [
+    {component: 'Badge', relationship: 'Static display variant'},
+    {component: 'TagGroup', relationship: 'Wrap in TagGroup.Root for collection management'},
+  ],
+  example: `<Tag removable onRemove={() => console.log('removed')}>
+  user@example.com
+</Tag>`,
+}

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,92 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Tag} from './Tag'
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'success', 'warning', 'error', 'info'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+    },
+    removable: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tag>
+
+export const Default: Story = {
+  args: {children: 'Tag'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Tag')).toBeInTheDocument()
+  },
+}
+
+export const Removable: Story = {
+  args: {children: 'user@example.com', removable: true, onRemove: fn()},
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('user@example.com')).toBeInTheDocument()
+    await expect(canvas.getByRole('button', {name: /remove/i})).toBeInTheDocument()
+  },
+}
+
+export const Disabled: Story = {
+  args: {children: 'Disabled', removable: true, disabled: true},
+}
+
+export const Small: Story = {
+  args: {children: 'Small', size: 'sm', removable: true, onRemove: fn()},
+}
+
+const layoutStyles = css.create({
+  row: {display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'},
+  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={layoutStyles.stack}>
+      <html.div style={layoutStyles.row}>
+        <Tag>Default</Tag>
+        <Tag variant="success">Success</Tag>
+        <Tag variant="warning">Warning</Tag>
+        <Tag variant="error">Error</Tag>
+        <Tag variant="info">Info</Tag>
+      </html.div>
+      <html.div style={layoutStyles.row}>
+        <Tag removable onRemove={() => {}}>
+          Default
+        </Tag>
+        <Tag variant="success" removable onRemove={() => {}}>
+          Success
+        </Tag>
+        <Tag variant="warning" removable onRemove={() => {}}>
+          Warning
+        </Tag>
+        <Tag variant="error" removable onRemove={() => {}}>
+          Error
+        </Tag>
+        <Tag variant="info" removable onRemove={() => {}}>
+          Info
+        </Tag>
+      </html.div>
+      <html.div style={layoutStyles.row}>
+        <Tag size="sm">Small</Tag>
+        <Tag size="sm" removable onRemove={() => {}}>
+          Removable Small
+        </Tag>
+      </html.div>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getAllByText('Default').length).toBe(2)
+  },
+}

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,141 @@
+import {type ReactNode, useCallback, useRef} from 'react'
+import {html} from 'react-strict-dom'
+import {useTagGroup} from '../TagGroup/TagGroupContext'
+import {styles} from './styles.css'
+
+export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
+export type TagSize = 'sm' | 'md'
+
+interface TagProps {
+  /** Value identifier — required when used inside TagGroup */
+  value?: string
+  variant?: TagVariant
+  size?: TagSize
+  /** Show remove button. Auto-derived from TagGroup context when inside one. */
+  removable?: boolean
+  /** Called when remove button is clicked. Auto-wired to TagGroup when inside one. */
+  onRemove?: () => void
+  disabled?: boolean
+  children: ReactNode
+}
+
+const sizeMap = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+} as const
+
+const removableSizeMap = {
+  sm: styles.removableSm,
+  md: styles.removableMd,
+} as const
+
+export function Tag({
+  value,
+  variant = 'default',
+  size = 'md',
+  removable: removableProp,
+  onRemove: onRemoveProp,
+  disabled: disabledProp = false,
+  children,
+}: TagProps) {
+  const group = useTagGroup()
+  const contentRef = useRef<HTMLElement>(null)
+
+  const isGrouped = group !== null
+  const disabled = disabledProp || (group?.disabled ?? false)
+  const removable = removableProp ?? (isGrouped ? group.editable : false)
+
+  const onRemove = useCallback(() => {
+    if (disabled) return
+    if (onRemoveProp) {
+      onRemoveProp()
+    } else if (isGrouped && value !== undefined) {
+      group.removeTag(value)
+    }
+  }, [disabled, onRemoveProp, isGrouped, value, group])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (disabled) return
+      if ((e.key === 'Backspace' || e.key === 'Delete') && removable) {
+        e.preventDefault()
+        onRemove()
+      }
+      // Arrow key navigation delegated to TagGroup via context
+      if (isGrouped && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+        e.preventDefault()
+        const idx = value !== undefined ? group.values.indexOf(value) : -1
+        if (e.key === 'ArrowLeft' && idx > 0) {
+          group.setFocusedIndex(idx - 1)
+        } else if (e.key === 'ArrowRight') {
+          if (idx < group.values.length - 1) {
+            group.setFocusedIndex(idx + 1)
+          } else {
+            // Move focus to input
+            group.inputRef.current?.focus()
+            group.setFocusedIndex(-1)
+          }
+        }
+      }
+    },
+    [disabled, removable, onRemove, isGrouped, value, group],
+  )
+
+  const removeLabel = contentRef.current?.textContent
+    ? `Remove ${contentRef.current.textContent}`
+    : 'Remove'
+
+  const tagContent = (
+    <>
+      <html.span ref={contentRef} {...(isGrouped ? {role: 'gridcell' as any} : {})}>
+        {children}
+      </html.span>
+      {removable && (
+        <html.span {...(isGrouped ? {role: 'gridcell' as any} : {})}>
+          <html.button
+            type="button"
+            aria-label={removeLabel}
+            disabled={disabled}
+            onClick={(e) => {
+              ;(e as any).stopPropagation?.()
+              onRemove()
+            }}
+            tabIndex={-1}
+            style={[styles.removeButton, disabled && styles.removeButtonDisabled]}
+          >
+            <svg
+              width={size === 'sm' ? 10 : 12}
+              height={size === 'sm' ? 10 : 12}
+              viewBox="0 0 12 12"
+              fill="none"
+            >
+              <path
+                d="M3 3l6 6M9 3l-6 6"
+                stroke="currentColor"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+              />
+            </svg>
+          </html.button>
+        </html.span>
+      )}
+    </>
+  )
+
+  return (
+    <html.span
+      {...(isGrouped ? {role: 'row' as any} : {})}
+      tabIndex={isGrouped ? 0 : undefined}
+      onKeyDown={isGrouped ? (handleKeyDown as any) : undefined}
+      style={[
+        styles.base,
+        sizeMap[size],
+        removable && removableSizeMap[size],
+        styles[variant],
+        disabled && styles.disabled,
+      ]}
+    >
+      {tagContent}
+    </html.span>
+  )
+}