@duro-app/ui 0.12.2 → 0.14.1

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,50 @@
+import {html} from 'react-strict-dom'
+import {useFieldContext} from '../Field/FieldContext'
+import {styles} from './styles.css'
+
+export type TextareaVariant = 'default' | 'error'
+
+interface TextareaProps {
+  variant?: TextareaVariant
+  name?: string
+  placeholder?: string
+  required?: boolean
+  rows?: number
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+export function Textarea({
+  variant = 'default',
+  name,
+  placeholder,
+  required,
+  rows = 3,
+  value,
+  defaultValue,
+  disabled,
+  onChange,
+}: TextareaProps) {
+  const ctx = useFieldContext()
+
+  return (
+    <html.textarea
+      id={ctx?.controlId}
+      name={name}
+      placeholder={placeholder}
+      required={required}
+      rows={rows}
+      value={value}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      aria-describedby={
+        ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
+      }
+      aria-invalid={ctx?.invalid || variant === 'error' || undefined}
+      onChange={onChange}
+      style={[styles.base, styles[variant]]}
+    />
+  )
+}

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

@@ -0,0 +1,56 @@
+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({
+  base: {
+    boxSizing: 'border-box',
+    width: '100%',
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    backgroundColor: colors.bg,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: radii.sm,
+    resize: 'vertical' as const,
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-visible': 1,
+    },
+  },
+  default: {
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+      ':focus': colors.accent,
+    },
+  },
+  error: {
+    borderColor: {
+      default: colors.error,
+      ':focus': colors.error,
+    },
+  },
+})

package/src/components/ThemeProvider/ThemeProvider.stories.tsx

@@ -0,0 +1,163 @@
+import type React from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {ThemeProvider, type ThemeName} from './ThemeProvider'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {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'
+
+const meta: Meta<typeof ThemeProvider> = {
+  title: 'Theme/ThemeProvider',
+  component: ThemeProvider,
+}
+
+export default meta
+type Story = StoryObj<typeof ThemeProvider>
+
+const sampleStyles = css.create({
+  container: {
+    padding: 24,
+    backgroundColor: colors.bg,
+    color: colors.text,
+    borderRadius: radii.md,
+    fontFamily: typography.fontFamily,
+  },
+  card: {
+    padding: 16,
+    backgroundColor: colors.bgCard,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.md,
+    boxShadow: shadows.md,
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: typography.fontSizeLg,
+    fontWeight: typography.fontWeightSemibold,
+    marginBottom: 8,
+  },
+  muted: {
+    color: colors.textMuted,
+    fontSize: typography.fontSizeSm,
+  },
+  accent: {
+    color: colors.accent,
+    fontWeight: typography.fontWeightMedium,
+  },
+  row: {
+    display: 'flex',
+    gap: 16,
+    flexWrap: 'wrap',
+  },
+  swatch: {
+    width: 48,
+    height: 48,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+  },
+  errorSwatch: {backgroundColor: colors.error},
+  successSwatch: {backgroundColor: colors.success},
+  warningSwatch: {backgroundColor: colors.warning},
+  accentSwatch: {backgroundColor: colors.accent},
+})
+
+function SampleContent() {
+  return (
+    <html.div style={sampleStyles.container}>
+      <html.div style={sampleStyles.card}>
+        <html.div style={sampleStyles.title}>Sample Card</html.div>
+        <html.span style={sampleStyles.muted}>This is a muted description.</html.span>
+      </html.div>
+      <html.div style={sampleStyles.card}>
+        <html.span style={sampleStyles.accent}>Accent colored text</html.span>
+      </html.div>
+      <html.div style={sampleStyles.row}>
+        <html.div style={[sampleStyles.swatch, sampleStyles.errorSwatch]} />
+        <html.div style={[sampleStyles.swatch, sampleStyles.successSwatch]} />
+        <html.div style={[sampleStyles.swatch, sampleStyles.warningSwatch]} />
+        <html.div style={[sampleStyles.swatch, sampleStyles.accentSwatch]} />
+      </html.div>
+    </html.div>
+  )
+}
+
+export const Dark: Story = {
+  args: {theme: 'dark'},
+  render: (args: {theme?: ThemeName; children?: React.ReactNode}) => (
+    <ThemeProvider {...args}>
+      <SampleContent />
+    </ThemeProvider>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Sample Card')).toBeInTheDocument()
+    await expect(canvas.getByText('Accent colored text')).toBeInTheDocument()
+  },
+}
+
+export const Light: Story = {
+  args: {theme: 'light'},
+  render: (args: {theme?: ThemeName; children?: React.ReactNode}) => (
+    <ThemeProvider {...args}>
+      <SampleContent />
+    </ThemeProvider>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Sample Card')).toBeInTheDocument()
+  },
+}
+
+export const HighContrast: Story = {
+  args: {theme: 'high-contrast'},
+  render: (args: {theme?: ThemeName; children?: React.ReactNode}) => (
+    <ThemeProvider {...args}>
+      <SampleContent />
+    </ThemeProvider>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Sample Card')).toBeInTheDocument()
+  },
+}
+
+const sideBySideStyles = css.create({
+  wrapper: {
+    display: 'flex',
+    gap: 24,
+    flexWrap: 'wrap',
+  },
+  column: {
+    flex: 1,
+    minWidth: 280,
+  },
+  label: {
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+    marginBottom: 8,
+    color: '#888',
+  },
+})
+
+export const AllThemes: Story = {
+  render: () => (
+    <html.div style={sideBySideStyles.wrapper}>
+      {(['dark', 'light', 'high-contrast'] as const).map((theme) => (
+        <html.div key={theme} style={sideBySideStyles.column}>
+          <html.div style={sideBySideStyles.label}>{theme}</html.div>
+          <ThemeProvider theme={theme}>
+            <SampleContent />
+          </ThemeProvider>
+        </html.div>
+      ))}
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // All three theme labels rendered
+    await expect(canvas.getByText('dark')).toBeInTheDocument()
+    await expect(canvas.getByText('light')).toBeInTheDocument()
+    await expect(canvas.getByText('high-contrast')).toBeInTheDocument()
+  },
+}

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,33 @@
+import type {ReactNode} from 'react'
+import {css, html} from 'react-strict-dom'
+import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
+import {highContrastTheme, highContrastShadows} from '@duro-app/tokens/themes/high-contrast.css'
+
+export type ThemeName = 'dark' | 'light' | 'high-contrast'
+
+interface ThemeProviderProps {
+  theme?: ThemeName
+  children: ReactNode
+}
+
+const themeMap: Partial<Record<ThemeName, readonly [typeof lightTheme, typeof lightShadows]>> = {
+  light: [lightTheme, lightShadows],
+  'high-contrast': [highContrastTheme, highContrastShadows],
+}
+
+const styles = css.create({
+  root: {
+    display: 'contents',
+  },
+})
+
+// react-strict-dom's style prop rejects Theme<VarGroup<{named keys}>> because the
+// concrete VarGroup lacks the generic index signature. This is a known typing gap.
+type DivStyle = Parameters<typeof html.div>[0]['style']
+
+export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
+  const overrides = themeMap[theme]
+  const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
+
+  return <html.div style={themeStyles}>{children}</html.div>
+}

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,84 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Toggle} from './Toggle'
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  args: {
+    onPressedChange: fn(),
+  },
+  argTypes: {
+    pressed: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+    defaultPressed: {control: 'boolean'},
+    size: {control: 'select', options: ['default', 'small']},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Toggle>
+
+export const Default: Story = {
+  args: {children: 'Bold'},
+  play: async ({canvas, userEvent, args}) => {
+    const toggle = canvas.getByRole('button')
+    await expect(toggle).toBeInTheDocument()
+    await expect(toggle).toHaveAttribute('aria-pressed', 'false')
+
+    await userEvent.click(toggle)
+    await expect(args.onPressedChange).toHaveBeenCalledWith(true)
+  },
+}
+
+export const Pressed: Story = {
+  args: {defaultPressed: true, children: 'Bold'},
+  play: async ({canvas}) => {
+    const toggle = canvas.getByRole('button')
+    await expect(toggle).toHaveAttribute('aria-pressed', 'true')
+  },
+}
+
+export const Disabled: Story = {
+  args: {disabled: true, children: 'Bold'},
+  play: async ({canvas, userEvent, args}) => {
+    const toggle = canvas.getByRole('button')
+    await expect(toggle).toBeDisabled()
+
+    await userEvent.click(toggle)
+    await expect(args.onPressedChange).not.toHaveBeenCalled()
+  },
+}
+
+export const Small: Story = {
+  args: {size: 'small', children: 'B'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('button')).toBeInTheDocument()
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', gap: 8},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Toggle>Off</Toggle>
+      <Toggle defaultPressed>On</Toggle>
+      <Toggle disabled>Disabled</Toggle>
+      <Toggle disabled defaultPressed>
+        Disabled On
+      </Toggle>
+      <Toggle size="small">Sm</Toggle>
+      <Toggle size="small" defaultPressed>
+        Sm On
+      </Toggle>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons.length).toBe(6)
+  },
+}

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,85 @@
+import {type ReactNode, useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {useToggleGroup} from '../ToggleGroup/ToggleGroupContext'
+import {styles} from './styles.css'
+
+export type ToggleSize = 'default' | 'small'
+
+interface ToggleProps {
+  /** Controlled pressed state (standalone usage). */
+  pressed?: boolean
+  /** Initial pressed state (uncontrolled, standalone usage). */
+  defaultPressed?: boolean
+  /** Callback fired when the pressed state changes (standalone usage). */
+  onPressedChange?: (pressed: boolean) => void
+  /** Unique value when used inside a ToggleGroup. */
+  value?: string
+  /** Prevents user interaction. */
+  disabled?: boolean
+  /** Size variant (overridden by ToggleGroup when grouped). */
+  size?: ToggleSize
+  'aria-label'?: string
+  children: ReactNode
+}
+
+const sizeMap = {
+  default: styles.sizeDefault,
+  small: styles.sizeSmall,
+} as const
+
+export function Toggle({
+  pressed: controlledPressed,
+  defaultPressed = false,
+  onPressedChange,
+  value,
+  disabled: disabledProp = false,
+  size: sizeProp = 'default',
+  'aria-label': ariaLabel,
+  children,
+}: ToggleProps) {
+  const group = useToggleGroup()
+
+  // When inside a ToggleGroup, derive pressed state from group context
+  const groupPressed = group && value !== undefined ? group.value.includes(value) : undefined
+  const isGrouped = group !== null
+  const disabled = disabledProp || (group?.disabled ?? false)
+  const size = group?.size ?? sizeProp
+
+  const [standalonePressed, setStandalonePressed] = useControllableValue(
+    controlledPressed,
+    defaultPressed,
+    onPressedChange,
+  )
+
+  const pressed = groupPressed ?? standalonePressed
+
+  const handleClick = useCallback(() => {
+    if (disabled) return
+    if (isGrouped && value !== undefined) {
+      group.toggle(value)
+    } else {
+      setStandalonePressed(!pressed)
+    }
+  }, [disabled, isGrouped, value, group, pressed, setStandalonePressed])
+
+  return (
+    <html.button
+      type="button"
+      aria-pressed={pressed}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={handleClick}
+      data-pressed={pressed ? '' : undefined}
+      style={[
+        styles.base,
+        sizeMap[size],
+        pressed ? styles.pressed : styles.unpressed,
+        isGrouped && styles.grouped,
+        disabled && styles.disabled,
+      ]}
+    >
+      {children}
+    </html.button>
+  )
+}

package/src/components/Toggle/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({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    cursor: 'pointer',
+    fontFamily: typography.fontFamily,
+    fontWeight: typography.fontWeightMedium,
+    transitionProperty: 'background-color, border-color, color, opacity',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    outlineWidth: {default: 0, ':focus-visible': 2},
+    outlineStyle: 'solid',
+    outlineColor: colors.accent,
+    outlineOffset: 2,
+  },
+  sizeDefault: {
+    padding: `${spacing.sm} ${spacing.md}`,
+    fontSize: typography.fontSizeSm,
+    borderRadius: radii.sm,
+    gap: spacing.sm,
+  },
+  sizeSmall: {
+    padding: `${spacing.xs} ${spacing.sm}`,
+    fontSize: typography.fontSizeXs,
+    borderRadius: radii.sm,
+    gap: spacing.xs,
+  },
+  unpressed: {
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+    },
+    color: colors.textMuted,
+  },
+  pressed: {
+    backgroundColor: {
+      default: colors.accent,
+      ':hover': colors.accentHover,
+    },
+    borderColor: colors.accent,
+    color: colors.accentContrast,
+  },
+  grouped: {
+    borderWidth: 0,
+    borderRadius: 0,
+    borderRightWidth: 1,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.border,
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+})

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,159 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {ToggleGroup} from './ToggleGroup'
+import {Toggle} from '../Toggle/Toggle'
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: 'Components/ToggleGroup',
+  component: ToggleGroup,
+  args: {
+    onValueChange: fn(),
+  },
+  argTypes: {
+    multiple: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+    orientation: {control: 'select', options: ['horizontal', 'vertical']},
+    size: {control: 'select', options: ['default', 'small']},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ToggleGroup>
+
+export const Single: Story = {
+  args: {defaultValue: ['center']},
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <Toggle value="left" aria-label="Align left">
+        Left
+      </Toggle>
+      <Toggle value="center" aria-label="Align center">
+        Center
+      </Toggle>
+      <Toggle value="right" aria-label="Align right">
+        Right
+      </Toggle>
+    </ToggleGroup>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons.length).toBe(3)
+
+    // Center should be pressed by default
+    await expect(buttons[1]).toHaveAttribute('aria-pressed', 'true')
+
+    // Click left — should deselect center
+    await userEvent.click(buttons[0])
+    await expect(buttons[0]).toHaveAttribute('aria-pressed', 'true')
+    await expect(buttons[1]).toHaveAttribute('aria-pressed', 'false')
+  },
+}
+
+export const Multiple: Story = {
+  args: {multiple: true, defaultValue: ['bold']},
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <Toggle value="bold" aria-label="Bold">
+        B
+      </Toggle>
+      <Toggle value="italic" aria-label="Italic">
+        I
+      </Toggle>
+      <Toggle value="underline" aria-label="Underline">
+        U
+      </Toggle>
+    </ToggleGroup>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons[0]).toHaveAttribute('aria-pressed', 'true')
+
+    // Click italic — both bold and italic should be pressed
+    await userEvent.click(buttons[1])
+    await expect(buttons[0]).toHaveAttribute('aria-pressed', 'true')
+    await expect(buttons[1]).toHaveAttribute('aria-pressed', 'true')
+  },
+}
+
+export const Disabled: Story = {
+  args: {disabled: true, defaultValue: ['center']},
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <Toggle value="left">Left</Toggle>
+      <Toggle value="center">Center</Toggle>
+      <Toggle value="right">Right</Toggle>
+    </ToggleGroup>
+  ),
+  play: async ({canvas, userEvent, args}) => {
+    const buttons = canvas.getAllByRole('button')
+    await expect(buttons[0]).toBeDisabled()
+    await expect(buttons[1]).toBeDisabled()
+
+    await userEvent.click(buttons[0])
+    await expect(args.onValueChange).not.toHaveBeenCalled()
+  },
+}
+
+export const Small: Story = {
+  args: {size: 'small', defaultValue: ['b']},
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <Toggle value="b">B</Toggle>
+      <Toggle value="i">I</Toggle>
+      <Toggle value="u">U</Toggle>
+    </ToggleGroup>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getAllByRole('button').length).toBe(3)
+  },
+}
+
+export const Vertical: Story = {
+  args: {orientation: 'vertical', defaultValue: ['top']},
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <Toggle value="top">Top</Toggle>
+      <Toggle value="middle">Middle</Toggle>
+      <Toggle value="bottom">Bottom</Toggle>
+    </ToggleGroup>
+  ),
+  play: async ({canvas}) => {
+    const group = canvas.getByRole('group')
+    await expect(group).toHaveAttribute('aria-orientation', 'vertical')
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <ToggleGroup defaultValue={['center']}>
+        <Toggle value="left">Left</Toggle>
+        <Toggle value="center">Center</Toggle>
+        <Toggle value="right">Right</Toggle>
+      </ToggleGroup>
+      <ToggleGroup multiple defaultValue={['bold', 'italic']}>
+        <Toggle value="bold">B</Toggle>
+        <Toggle value="italic">I</Toggle>
+        <Toggle value="underline">U</Toggle>
+      </ToggleGroup>
+      <ToggleGroup size="small" defaultValue={['a']}>
+        <Toggle value="a">A</Toggle>
+        <Toggle value="b">B</Toggle>
+        <Toggle value="c">C</Toggle>
+      </ToggleGroup>
+      <ToggleGroup disabled defaultValue={['x']}>
+        <Toggle value="x">X</Toggle>
+        <Toggle value="y">Y</Toggle>
+      </ToggleGroup>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const groups = canvas.getAllByRole('group')
+    await expect(groups.length).toBe(4)
+  },
+}