@duro-app/ui 0.22.0 → 0.23.0

package/package.json

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

package/src/components/Alert/Alert.meta.ts

@@ -14,7 +14,10 @@ export const meta: ComponentMeta = {
     'Form field errors — use Field.Error',
   ],
   relatedTo: [
-    {component: 'Callout', relationship: 'Callout for larger block-level messages; Alert for compact inline'},
+    {
+      component: 'Callout',
+      relationship: 'Callout for larger block-level messages; Alert for compact inline',
+    },
   ],
   example: `<Stack gap="sm">
   <Alert variant="success">Settings saved successfully.</Alert>

package/src/components/Callout/Callout.meta.ts

@@ -14,7 +14,10 @@ export const meta: ComponentMeta = {
     'Toast notifications — use a toast system',
   ],
   relatedTo: [
-    {component: 'Alert', relationship: 'Alert for compact inline; Callout for block-level prominent'},
+    {
+      component: 'Alert',
+      relationship: 'Alert for compact inline; Callout for block-level prominent',
+    },
   ],
   example: `<Callout variant="warning">
   Your subscription expires in 3 days. Renew now to avoid service interruption.

package/src/components/Card/Card.meta.ts

@@ -14,7 +14,10 @@ export const meta: ComponentMeta = {
     'Simple spacing — use Stack or Inline',
   ],
   relatedTo: [
-    {component: 'Panel', relationship: 'Panel for structural Header/Body/Footer; Card for visual container'},
+    {
+      component: 'Panel',
+      relationship: 'Panel for structural Header/Body/Footer; Card for visual container',
+    },
   ],
   example: `<Card variant="elevated" size="md">
   <Stack gap="md">

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

@@ -22,7 +22,7 @@ export const styles = css.create({
     height: 18,
     borderWidth: 1,
     borderStyle: 'solid',
-    borderRadius: radii.sm,
+    borderRadius: radii.xs,
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/CheckboxGroup/CheckboxGroup.meta.ts

@@ -0,0 +1,25 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Checkbox group for multi-select from a list of options. Wraps the existing Checkbox component with shared state management.',
+  whenToUse: [
+    'Selecting multiple options from a small set',
+    'Permission or feature toggles where several can be active',
+  ],
+  whenNotToUse: [
+    'Single selection — use RadioGroup instead',
+    'Binary on/off — use a single Checkbox or Switch',
+    'Many options (10+) — consider a filterable list or Select with multi-select',
+  ],
+  relatedTo: [
+    {component: 'RadioGroup', relationship: 'RadioGroup for single-select; CheckboxGroup for multi-select'},
+    {component: 'Checkbox', relationship: 'CheckboxGroup.Item wraps Checkbox internally'},
+    {component: 'ToggleGroup', relationship: 'ToggleGroup for toolbar-style multi-select'},
+  ],
+  example: `<CheckboxGroup.Root defaultValue={['email']} onValueChange={(v) => console.log(v)}>
+  <CheckboxGroup.Item value="email">Email</CheckboxGroup.Item>
+  <CheckboxGroup.Item value="sms">SMS</CheckboxGroup.Item>
+  <CheckboxGroup.Item value="push">Push notification</CheckboxGroup.Item>
+</CheckboxGroup.Root>`,
+}

package/src/components/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -0,0 +1,88 @@
+import {useState} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {CheckboxGroup} from './CheckboxGroup'
+
+const meta: Meta = {
+  title: 'Components/CheckboxGroup',
+  argTypes: {
+    orientation: {control: 'select', options: ['horizontal', 'vertical']},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <CheckboxGroup.Root defaultValue={['email']}>
+      <CheckboxGroup.Item value="email">Email notifications</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="sms">SMS notifications</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="push">Push notifications</CheckboxGroup.Item>
+    </CheckboxGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes.length).toBe(3)
+    await expect(checkboxes[0]).toBeChecked()
+    await expect(checkboxes[1]).not.toBeChecked()
+    await expect(checkboxes[2]).not.toBeChecked()
+  },
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <CheckboxGroup.Root defaultValue={['react']} orientation="horizontal">
+      <CheckboxGroup.Item value="react">React</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="vue">Vue</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="angular">Angular</CheckboxGroup.Item>
+    </CheckboxGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('group')
+    await expect(group).toHaveAttribute('aria-orientation', 'horizontal')
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <CheckboxGroup.Root defaultValue={['a']} disabled>
+      <CheckboxGroup.Item value="a">Option A</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="b">Option B</CheckboxGroup.Item>
+    </CheckboxGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes[0]).toBeDisabled()
+    await expect(checkboxes[1]).toBeDisabled()
+  },
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState(['read'])
+    return (
+      <html.div>
+        <CheckboxGroup.Root value={value} onValueChange={setValue}>
+          <CheckboxGroup.Item value="read">Read</CheckboxGroup.Item>
+          <CheckboxGroup.Item value="write">Write</CheckboxGroup.Item>
+          <CheckboxGroup.Item value="execute">Execute</CheckboxGroup.Item>
+        </CheckboxGroup.Root>
+      </html.div>
+    )
+  },
+  play: async ({canvas, userEvent}) => {
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes[0]).toBeChecked()
+
+    await userEvent.click(checkboxes[1])
+    await expect(checkboxes[0]).toBeChecked()
+    await expect(checkboxes[1]).toBeChecked()
+
+    await userEvent.click(checkboxes[0])
+    await expect(checkboxes[0]).not.toBeChecked()
+    await expect(checkboxes[1]).toBeChecked()
+  },
+}

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,105 @@
+import {type ReactNode, createContext, useContext, useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {Checkbox} from '../Checkbox/Checkbox'
+import {styles} from './styles.css'
+
+// --- Context ---
+
+interface CheckboxGroupContextValue {
+  value: string[]
+  onToggle: (itemValue: string, checked: boolean) => void
+  disabled: boolean
+}
+
+const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null)
+
+function useCheckboxGroup() {
+  const ctx = useContext(CheckboxGroupContext)
+  if (!ctx) {
+    throw new Error('CheckboxGroup.Item must be used within CheckboxGroup.Root')
+  }
+  return ctx
+}
+
+// --- Root ---
+
+interface RootProps {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  orientation?: 'horizontal' | 'vertical'
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Root({
+  value: controlledValue,
+  defaultValue = [],
+  onValueChange,
+  orientation = 'vertical',
+  disabled = false,
+  children,
+}: RootProps) {
+  const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange)
+
+  const onToggle = useCallback(
+    (itemValue: string, checked: boolean) => {
+      if (disabled) return
+      const next = checked
+        ? [...value, itemValue]
+        : value.filter((v) => v !== itemValue)
+      setValue(next)
+    },
+    [disabled, value, setValue],
+  )
+
+  return (
+    <CheckboxGroupContext.Provider value={{value, onToggle, disabled}}>
+      <html.div
+        role="group"
+        aria-orientation={orientation}
+        style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
+      >
+        {children}
+      </html.div>
+    </CheckboxGroupContext.Provider>
+  )
+}
+
+// --- Item ---
+
+interface ItemProps {
+  value: string
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
+  const {value: groupValue, onToggle, disabled: groupDisabled} = useCheckboxGroup()
+  const isChecked = groupValue.includes(value)
+  const isDisabled = groupDisabled || itemDisabled
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onToggle(value, e.target.checked)
+    },
+    [value, onToggle],
+  )
+
+  return (
+    <Checkbox
+      value={value}
+      checked={isChecked}
+      disabled={isDisabled}
+      onChange={handleChange}
+    >
+      {children}
+    </Checkbox>
+  )
+}
+
+export const CheckboxGroup = {
+  Root,
+  Item,
+}

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

@@ -0,0 +1,13 @@
+import {css} from 'react-strict-dom'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+  },
+  rootHorizontal: {
+    flexDirection: 'row',
+  },
+})

package/src/components/EmptyState/EmptyState.meta.ts

@@ -8,10 +8,7 @@ export const meta: ComponentMeta = {
     'Search results with no matches',
     'First-time use before any data exists',
   ],
-  whenNotToUse: [
-    'Loading states — use Spinner',
-    'Error states — use Alert or Callout',
-  ],
+  whenNotToUse: ['Loading states — use Spinner', 'Error states — use Alert or Callout'],
   example: `<Card>
   <EmptyState
     icon={<Icon name="info-circle" size={48} />}

package/src/components/Icon/Icon.meta.ts

@@ -8,12 +8,12 @@ export const meta: ComponentMeta = {
     'Status indicators alongside text',
     'Navigation or action indicators',
   ],
-  whenNotToUse: [
-    'Decorative images — use img elements',
-    'Complex illustrations — use custom SVGs',
-  ],
+  whenNotToUse: ['Decorative images — use img elements', 'Complex illustrations — use custom SVGs'],
   relatedTo: [
-    {component: 'StatusIcon', relationship: 'StatusIcon wraps Icon with a colored background circle'},
+    {
+      component: 'StatusIcon',
+      relationship: 'StatusIcon wraps Icon with a colored background circle',
+    },
   ],
   example: `<Inline gap="sm" align="center">
   <Icon name="check-circle" size={20} />

package/src/components/InputGroup/InputGroup.meta.ts

@@ -18,7 +18,10 @@ export const meta: ComponentMeta = {
   },
   relatedTo: [
     {component: 'Input', relationship: 'InputGroup enhances Input with addons'},
-    {component: 'Field', relationship: 'Field provides label/error; InputGroup provides visual addons'},
+    {
+      component: 'Field',
+      relationship: 'Field provides label/error; InputGroup provides visual addons',
+    },
   ],
   example: `<InputGroup.Root>
   <InputGroup.Addon>$</InputGroup.Addon>

package/src/components/RadioGroup/RadioGroup.meta.ts

@@ -0,0 +1,25 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Radio button group for single-select from a list of options. Compound component with Root container and Item children.',
+  whenToUse: [
+    'Selecting exactly one option from a small set (2-5 items)',
+    'Options need to be visible at all times (not hidden in a dropdown)',
+  ],
+  whenNotToUse: [
+    'Many options (5+) — use Select for space efficiency',
+    'Multi-select — use CheckboxGroup instead',
+    'Binary on/off — use Switch',
+  ],
+  relatedTo: [
+    {component: 'CheckboxGroup', relationship: 'CheckboxGroup for multi-select; RadioGroup for single-select'},
+    {component: 'Select', relationship: 'Select for larger option sets or when space is limited'},
+    {component: 'ToggleGroup', relationship: 'ToggleGroup for toolbar-style selection'},
+  ],
+  example: `<RadioGroup.Root defaultValue="email" onValueChange={(v) => console.log(v)}>
+  <RadioGroup.Item value="email">Email</RadioGroup.Item>
+  <RadioGroup.Item value="sms">SMS</RadioGroup.Item>
+  <RadioGroup.Item value="push">Push notification</RadioGroup.Item>
+</RadioGroup.Root>`,
+}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,83 @@
+import {useState} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {RadioGroup} from './RadioGroup'
+
+const meta: Meta = {
+  title: 'Components/RadioGroup',
+  argTypes: {
+    orientation: {control: 'select', options: ['horizontal', 'vertical']},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup.Root defaultValue="apple">
+      <RadioGroup.Item value="apple">Apple</RadioGroup.Item>
+      <RadioGroup.Item value="banana">Banana</RadioGroup.Item>
+      <RadioGroup.Item value="cherry">Cherry</RadioGroup.Item>
+    </RadioGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const radios = canvas.getAllByRole('radio')
+    await expect(radios.length).toBe(3)
+    await expect(radios[0]).toBeChecked()
+    await expect(radios[1]).not.toBeChecked()
+  },
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup.Root defaultValue="sm" orientation="horizontal">
+      <RadioGroup.Item value="sm">Small</RadioGroup.Item>
+      <RadioGroup.Item value="md">Medium</RadioGroup.Item>
+      <RadioGroup.Item value="lg">Large</RadioGroup.Item>
+    </RadioGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('radiogroup')
+    await expect(group).toHaveAttribute('aria-orientation', 'horizontal')
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup.Root defaultValue="on" disabled>
+      <RadioGroup.Item value="on">On</RadioGroup.Item>
+      <RadioGroup.Item value="off">Off</RadioGroup.Item>
+    </RadioGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    const radios = canvas.getAllByRole('radio')
+    await expect(radios[0]).toBeDisabled()
+    await expect(radios[1]).toBeDisabled()
+  },
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('red')
+    return (
+      <html.div>
+        <RadioGroup.Root value={value} onValueChange={setValue}>
+          <RadioGroup.Item value="red">Red</RadioGroup.Item>
+          <RadioGroup.Item value="green">Green</RadioGroup.Item>
+          <RadioGroup.Item value="blue">Blue</RadioGroup.Item>
+        </RadioGroup.Root>
+      </html.div>
+    )
+  },
+  play: async ({canvas, userEvent}) => {
+    const radios = canvas.getAllByRole('radio')
+    await expect(radios[0]).toBeChecked()
+
+    await userEvent.click(radios[2])
+    await expect(radios[2]).toBeChecked()
+    await expect(radios[0]).not.toBeChecked()
+  },
+}

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,113 @@
+import {type ReactNode, createContext, useContext, useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {styles} from './styles.css'
+
+// --- Context ---
+
+interface RadioGroupContextValue {
+  value: string
+  onSelect: (value: string) => void
+  disabled: boolean
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
+
+function useRadioGroup() {
+  const ctx = useContext(RadioGroupContext)
+  if (!ctx) {
+    throw new Error('RadioGroup.Item must be used within RadioGroup.Root')
+  }
+  return ctx
+}
+
+// --- Root ---
+
+interface RootProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  orientation?: 'horizontal' | 'vertical'
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Root({
+  value: controlledValue,
+  defaultValue = '',
+  onValueChange,
+  orientation = 'vertical',
+  disabled = false,
+  children,
+}: RootProps) {
+  const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange)
+
+  const onSelect = useCallback(
+    (itemValue: string) => {
+      if (!disabled) {
+        setValue(itemValue)
+      }
+    },
+    [disabled, setValue],
+  )
+
+  return (
+    <RadioGroupContext.Provider value={{value, onSelect, disabled}}>
+      <html.div
+        role="radiogroup"
+        aria-orientation={orientation}
+        style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
+      >
+        {children}
+      </html.div>
+    </RadioGroupContext.Provider>
+  )
+}
+
+// --- Item ---
+
+interface ItemProps {
+  value: string
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
+  const {value: groupValue, onSelect, disabled: groupDisabled} = useRadioGroup()
+  const isChecked = groupValue === value
+  const isDisabled = groupDisabled || itemDisabled
+
+  const handleClick = () => {
+    if (!isDisabled) {
+      onSelect(value)
+    }
+  }
+
+  return (
+    <html.label
+      style={[styles.item, isDisabled && styles.itemDisabled]}
+      onClick={handleClick}
+    >
+      <html.input
+        type="radio"
+        value={value}
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={() => onSelect(value)}
+        style={styles.input}
+      />
+      <html.span
+        style={[styles.circle, isChecked ? styles.circleChecked : styles.circleUnchecked]}
+        aria-hidden
+      >
+        {isChecked && <html.span style={styles.dot} />}
+      </html.span>
+      {children && <html.span>{children}</html.span>}
+    </html.label>
+  )
+}
+
+export const RadioGroup = {
+  Root,
+  Item,
+}

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

@@ -0,0 +1,66 @@
+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: spacing.sm,
+  },
+  rootHorizontal: {
+    flexDirection: 'row',
+  },
+  item: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    cursor: 'pointer',
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    lineHeight: typography.lineHeight,
+  },
+  itemDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  circle: {
+    width: 18,
+    height: 18,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: radii.full,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    transitionProperty: 'background-color, border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  circleUnchecked: {
+    backgroundColor: colors.bg,
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+    },
+  },
+  circleChecked: {
+    backgroundColor: colors.bg,
+    borderColor: colors.accent,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: radii.full,
+    backgroundColor: colors.accent,
+  },
+  input: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    opacity: 0,
+    overflow: 'hidden',
+  },
+})

package/src/components/StatusIcon/StatusIcon.meta.ts

@@ -8,10 +8,7 @@ export const meta: ComponentMeta = {
     'List item status icons with colored backgrounds',
     'Feature or capability indicators',
   ],
-  whenNotToUse: [
-    'Inline icons without background — use Icon',
-    'Status text labels — use Badge',
-  ],
+  whenNotToUse: ['Inline icons without background — use Icon', 'Status text labels — use Badge'],
   relatedTo: [
     {component: 'Icon', relationship: 'StatusIcon wraps Icon with background; Icon is bare SVG'},
     {component: 'Badge', relationship: 'Badge for text status; StatusIcon for icon status'},