@proteos/ui 0.31.0

package/src/components/tag-input/tag-input.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { TagInput } from './tag-input'
+
+const meta: Meta<typeof TagInput> = {
+  title: 'Components/TagInput',
+  component: TagInput,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-[440px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TagInput>
+
+export const Empty: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([])
+    return (
+      <TagInput label="Tags" placeholder="Type, Enter to add" value={value} onChange={setValue} />
+    )
+  },
+}
+
+export const WithValues: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>(['priority', 'beta', 'enterprise'])
+    return (
+      <TagInput
+        label="Tags"
+        description="Press Enter or ',' to add. Backspace on empty input removes the last tag."
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const Numeric: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>(['100', '200', '500'])
+    return (
+      <TagInput label="Threshold values" inputType="number" value={value} onChange={setValue} />
+    )
+  },
+}
+
+export const Invalid: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([])
+    return (
+      <TagInput
+        label="Tags"
+        value={value}
+        onChange={setValue}
+        isInvalid
+        errorMessage="Add at least one tag."
+      />
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <TagInput label="Tags" value={['locked', 'frozen']} onChange={() => {}} isDisabled />
+  ),
+}

package/src/components/tag-input/tag-input.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { TagInput } from './tag-input'
+
+function Harness({
+  initial = [],
+  onChange,
+}: {
+  initial?: string[]
+  onChange?: (next: string[]) => void
+}) {
+  const [value, setValue] = useState<string[]>(initial)
+  return (
+    <TagInput
+      label="Tags"
+      placeholder="Type, Enter to add"
+      value={value}
+      onChange={(next) => {
+        setValue(next)
+        onChange?.(next)
+      }}
+    />
+  )
+}
+
+describe('TagInput', () => {
+  it('commits a tag on Enter', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} />)
+
+    const input = screen.getByPlaceholderText('Type, Enter to add')
+    await user.type(input, 'alpha{Enter}')
+
+    expect(onChange).toHaveBeenLastCalledWith(['alpha'])
+    expect(screen.getByText('alpha')).toBeInTheDocument()
+  })
+
+  it('commits on comma', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} />)
+
+    await user.type(screen.getByPlaceholderText('Type, Enter to add'), 'one,')
+    expect(onChange).toHaveBeenLastCalledWith(['one'])
+  })
+
+  it('removes the last tag on Backspace when input is empty', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness initial={['one', 'two']} onChange={onChange} />)
+
+    const input = screen.getByRole('textbox')
+    await user.click(input)
+    await user.keyboard('{Backspace}')
+
+    expect(onChange).toHaveBeenLastCalledWith(['one'])
+  })
+
+  it('removes a tag via the × button', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness initial={['alpha', 'beta']} onChange={onChange} />)
+
+    await user.click(screen.getByRole('button', { name: 'Remove alpha' }))
+    expect(onChange).toHaveBeenLastCalledWith(['beta'])
+  })
+
+  it('does not commit duplicate tags', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness initial={['alpha']} onChange={onChange} />)
+
+    await user.type(screen.getByRole('textbox'), 'alpha{Enter}')
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/src/components/tag-input/tag-input.tsx

@@ -0,0 +1,193 @@
+import { type KeyboardEvent, type ReactNode, useEffect, useId, useRef, useState } from 'react'
+import { cn } from '../../lib/cn'
+import {
+  type FieldAppearance,
+  fieldChipPadding,
+  fieldControlStyles,
+  fieldErrorStyles,
+  fieldHintStyles,
+  fieldLabelStyles,
+  fieldMinHeight,
+  type FieldSize,
+  fieldTextStyles,
+} from '../field/field'
+
+/* =========================================================================
+   TagInput — free-form list of strings rendered as removable chips.
+   Used for filter `in`/`not_in` value entry on non-enum types where the
+   set of valid values isn't known up front.
+
+   Behaviour:
+     - Type into the trailing input → Enter or `,` commits as a tag.
+     - Backspace on empty input → removes the last tag.
+     - Click × on a chip → removes it.
+
+   Controlled API only — `value: string[]` + `onChange`.
+   ========================================================================= */
+
+export type TagInputProps = {
+  label?: ReactNode
+  description?: ReactNode
+  errorMessage?: ReactNode
+  /** Placeholder shown in the trailing input when there are no tags. */
+  placeholder?: string
+  /** Underlying `<input>` type. Use `'number'` to constrain numeric tags. */
+  inputType?: 'text' | 'number'
+  value: string[]
+  onChange: (next: string[]) => void
+  isDisabled?: boolean
+  isInvalid?: boolean
+  /** Field size. Defaults to `md`. */
+  size?: FieldSize
+  /** Chrome variant. Defaults to `field`. `cell` flattens the box. */
+  appearance?: FieldAppearance
+  /** Focus the trailing input on mount. Used by the filter-row chain so
+   *  picking an operator with arity 'n' (and a non-enum field) lands focus
+   *  directly on the tag-entry input. */
+  autoFocus?: boolean
+  /** Visual override for the field wrapper. */
+  className?: string
+}
+
+export function TagInput({
+  label,
+  description,
+  errorMessage,
+  placeholder = 'Type, Enter to add',
+  inputType = 'text',
+  value,
+  onChange,
+  isDisabled = false,
+  isInvalid = false,
+  size = 'md',
+  appearance,
+  autoFocus = false,
+  className,
+}: TagInputProps) {
+  const styles = fieldControlStyles({ size, invalid: isInvalid, appearance })
+  const focusWithin =
+    appearance === 'cell'
+      ? 'focus-within:border-accent focus-within:shadow-none'
+      : 'focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]'
+  const minHeight = appearance === 'cell' ? 'min-h-[29px]' : fieldMinHeight[size]
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (autoFocus) inputRef.current?.focus()
+    // mount-only — autoFocus is a one-shot signal, not sustained.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  const inputId = useId()
+  const [draft, setDraft] = useState('')
+
+  const commit = () => {
+    const v = draft.trim()
+    if (!v) return
+    if (value.includes(v)) {
+      setDraft('')
+      return
+    }
+    onChange([...value, v])
+    setDraft('')
+  }
+
+  const remove = (idx: number) => {
+    onChange(value.filter((_, i) => i !== idx))
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault()
+      commit()
+      return
+    }
+    if (e.key === 'Backspace' && !draft && value.length > 0) {
+      e.preventDefault()
+      onChange(value.slice(0, -1))
+    }
+  }
+
+  return (
+    <div className={cn('grid grid-cols-1 gap-1.5', className)}>
+      {label ? (
+        <label htmlFor={inputId} className={fieldLabelStyles}>
+          {label}
+        </label>
+      ) : null}
+
+      <div
+        data-invalid={isInvalid || undefined}
+        data-disabled={isDisabled || undefined}
+        className={cn(
+          styles.box(),
+          'flex flex-wrap items-center gap-1',
+          minHeight,
+          fieldChipPadding[size],
+          focusWithin,
+        )}
+      >
+        {value.map((tag, idx) => (
+          // tags are kept unique on commit, so the value alone is a stable key
+          <span
+            key={tag}
+            className={cn(
+              'inline-flex items-center gap-1',
+              'px-1.5 py-0.5 rounded-sm bg-surface-3',
+              'font-mono text-[12px] text-ink-2',
+            )}
+          >
+            <span className="max-w-[10rem] truncate">{tag}</span>
+            <button
+              type="button"
+              aria-label={`Remove ${tag}`}
+              disabled={isDisabled}
+              onClick={() => remove(idx)}
+              className={cn(
+                'inline-flex items-center justify-center',
+                'size-3.5 rounded-full text-ink-3 hover:text-ink hover:bg-surface-2',
+                'cursor-pointer outline-none',
+                'focus-visible:shadow-[var(--shadow-focus)]',
+                'disabled:opacity-45 disabled:cursor-not-allowed',
+              )}
+            >
+              <svg aria-hidden viewBox="0 0 10 10" className="size-2" fill="none">
+                <path
+                  d="M2 2l6 6M8 2l-6 6"
+                  stroke="currentColor"
+                  strokeWidth="1.4"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </button>
+          </span>
+        ))}
+
+        <input
+          ref={inputRef}
+          id={inputId}
+          type={inputType}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={onKeyDown}
+          onBlur={commit}
+          disabled={isDisabled}
+          placeholder={value.length === 0 ? placeholder : ''}
+          className={cn(
+            'flex-1 min-w-[6rem] bg-transparent outline-none',
+            'font-sans text-ink placeholder:text-ink-4',
+            fieldTextStyles[size],
+            // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
+            // overall height so it matches Input/Select at the same size.
+            'px-1.5',
+            'disabled:cursor-not-allowed disabled:opacity-45',
+          )}
+        />
+      </div>
+
+      {description ? <p className={fieldHintStyles}>{description}</p> : null}
+      {errorMessage && appearance !== 'cell' ? (
+        <p className={fieldErrorStyles}>{errorMessage}</p>
+      ) : null}
+    </div>
+  )
+}

package/src/components/textarea/index.ts

@@ -0,0 +1,2 @@
+export type { TextareaProps } from './textarea'
+export { Textarea } from './textarea'

package/src/components/textarea/textarea.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Textarea } from './textarea'
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  args: {
+    label: 'Describe the system',
+    placeholder: 'A mid-size freight broker. Quotes, loads, carriers, lanes…',
+  },
+  argTypes: {
+    isDisabled: { control: { type: 'boolean' } },
+    isInvalid: { control: { type: 'boolean' } },
+    isReadOnly: { control: { type: 'boolean' } },
+    rows: { control: { type: 'number' } },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[440px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Textarea>
+
+export const Playground: Story = {}
+
+export const WithDescription: Story = {
+  args: {
+    description: 'Plain language. Proteos will infer entities, workflows and reports.',
+  },
+}
+
+export const Invalid: Story = {
+  args: {
+    isInvalid: true,
+    errorMessage: 'Required — tell us what to build.',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    defaultValue:
+      'A specialty lender. Applications, committee review, servicing, delinquency workflows.',
+    isDisabled: true,
+  },
+}
+
+export const Tall: Story = {
+  args: {
+    rows: 10,
+    description: 'Taller field for longer specs.',
+  },
+}
+
+export const AllStates: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="grid gap-5 w-[440px]">
+      <Textarea label="Rest" placeholder="Hairline border, paper fill" />
+      <Textarea
+        label="Filled"
+        defaultValue="A specialty lender. Applications, committee review, servicing, delinquency workflows."
+        description="Hover or focus to see the indigo shift."
+      />
+      <Textarea label="Invalid" isInvalid errorMessage="Required — tell us what to build." />
+      <Textarea label="Disabled" defaultValue="Can't touch this" isDisabled />
+    </div>
+  ),
+}

package/src/components/textarea/textarea.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+
+import { Textarea } from './textarea'
+
+describe('Textarea', () => {
+  it('renders a labelled textarea', () => {
+    render(<Textarea label="Describe the system" placeholder="A mid-size freight broker…" />)
+    expect(screen.getByLabelText('Describe the system')).toBeInTheDocument()
+  })
+
+  it('accepts multi-line user input', async () => {
+    const user = userEvent.setup()
+    render(<Textarea label="Describe the system" />)
+
+    const textarea = screen.getByLabelText('Describe the system')
+    await user.type(textarea, 'Line one{Enter}Line two')
+    expect(textarea).toHaveValue('Line one\nLine two')
+  })
+
+  it('shows its description slot', () => {
+    render(<Textarea label="System" description="Plain language is fine." />)
+    expect(screen.getByText('Plain language is fine.')).toBeInTheDocument()
+  })
+
+  it('renders the error message when invalid', () => {
+    render(<Textarea label="System" isInvalid errorMessage="Required — tell us what to build." />)
+    expect(screen.getByText('Required — tell us what to build.')).toBeInTheDocument()
+  })
+
+  it('forwards the rows prop', () => {
+    render(<Textarea label="System" rows={8} />)
+    expect(screen.getByLabelText('System')).toHaveAttribute('rows', '8')
+  })
+
+  it('forwards disabled state to the underlying textarea', () => {
+    render(<Textarea label="System" isDisabled />)
+    expect(screen.getByLabelText('System')).toBeDisabled()
+  })
+})

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+import {
+  TextArea as AriaTextArea,
+  type TextAreaProps as AriaTextAreaProps,
+  type TextFieldProps as AriaTextFieldProps,
+  FieldError,
+  Label,
+  Text,
+  TextField,
+} from 'react-aria-components'
+import { cn } from '../../lib/cn'
+import {
+  type FieldAppearance,
+  fieldControlStyles,
+  fieldErrorStyles,
+  type FieldSize,
+  fieldHintStyles,
+  fieldLabelStyles,
+} from '../field/field'
+
+export type TextareaProps = AriaTextFieldProps & {
+  label?: ReactNode
+  description?: ReactNode
+  errorMessage?: ReactNode
+  placeholder?: string
+  /** Visible rows. Height can still grow via vertical resize (consumer). */
+  rows?: number
+  /** Field size. Defaults to `md`. */
+  size?: FieldSize
+  /** Chrome variant. Defaults to `field`. `cell` flattens the box. */
+  appearance?: FieldAppearance
+  /** Extra props forwarded to the underlying <textarea>. */
+  textareaProps?: Omit<AriaTextAreaProps, 'className'>
+  /** Visual override for the textarea control only. */
+  textareaClassName?: string
+}
+
+export function Textarea({
+  label,
+  description,
+  errorMessage,
+  placeholder,
+  rows = 4,
+  size,
+  appearance,
+  textareaProps,
+  textareaClassName,
+  className,
+  ...props
+}: TextareaProps) {
+  const styles = fieldControlStyles({ size, appearance })
+  return (
+    <TextField
+      {...props}
+      className={(renderProps) =>
+        cn(
+          'grid grid-cols-1 gap-1.5',
+          typeof className === 'function' ? className(renderProps) : className,
+        )
+      }
+    >
+      {label ? <Label className={fieldLabelStyles}>{label}</Label> : null}
+      <AriaTextArea
+        {...textareaProps}
+        rows={rows}
+        placeholder={placeholder ?? ''}
+        className={cn(
+          // Same hairline chrome as Input, but allow vertical resize and set a
+          // sensible minimum height so short content doesn't collapse.
+          styles.box(),
+          styles.content(),
+          'min-h-[100px] resize-y',
+          textareaClassName,
+        )}
+      />
+      {description ? (
+        <Text slot="description" className={fieldHintStyles}>
+          {description}
+        </Text>
+      ) : null}
+      {errorMessage && appearance !== 'cell' ? (
+        <FieldError className={fieldErrorStyles}>{errorMessage}</FieldError>
+      ) : null}
+    </TextField>
+  )
+}

package/src/components/time-field/index.ts

@@ -0,0 +1,2 @@
+export type { TimeFieldProps } from './time-field'
+export { TimeField } from './time-field'

package/src/components/time-field/time-field.stories.tsx

@@ -0,0 +1,76 @@
+import { parseTime } from '@internationalized/date'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { TimeField } from './time-field'
+
+const meta: Meta<typeof TimeField> = {
+  title: 'Components/TimeField',
+  component: TimeField,
+  tags: ['autodocs'],
+  args: {
+    label: 'Opens at',
+  },
+  argTypes: {
+    isDisabled: { control: { type: 'boolean' } },
+    isInvalid: { control: { type: 'boolean' } },
+    isReadOnly: { control: { type: 'boolean' } },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[220px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TimeField>
+
+export const Playground: Story = {}
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: parseTime('09:30'),
+    description: 'Pre-filled with 9:30 AM.',
+  },
+}
+
+export const TwentyFourHour: Story = {
+  args: {
+    defaultValue: parseTime('14:30'),
+    hourCycle: 24,
+    description: '24-hour clock.',
+  },
+}
+
+export const SecondPrecision: Story = {
+  args: {
+    defaultValue: parseTime('14:30:05'),
+    granularity: 'second',
+  },
+}
+
+export const Invalid: Story = {
+  args: {
+    isInvalid: true,
+    errorMessage: 'Pick a time during business hours.',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: parseTime('09:30'),
+    isDisabled: true,
+  },
+}
+
+export const CellAppearance: Story = {
+  args: {
+    appearance: 'cell',
+    size: 'sm',
+    label: undefined,
+    'aria-label': 'Opens at',
+    defaultValue: parseTime('09:30'),
+  },
+}

package/src/components/time-field/time-field.test.tsx

@@ -0,0 +1,51 @@
+import { parseTime, type Time } from '@internationalized/date'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { TimeField } from './time-field'
+
+describe('TimeField', () => {
+  it('renders a labelled time input', () => {
+    render(<TimeField label="Opens at" />)
+    expect(screen.getByText('Opens at')).toBeInTheDocument()
+  })
+
+  it('renders hour and minute segments', () => {
+    render(<TimeField label="Opens at" defaultValue={parseTime('09:30')} />)
+    expect(screen.getByRole('spinbutton', { name: /hour/i })).toBeInTheDocument()
+    expect(screen.getByRole('spinbutton', { name: /minute/i })).toBeInTheDocument()
+  })
+
+  it('fires onChange when a segment is incremented', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<TimeField label="Opens at" defaultValue={parseTime('09:30')} onChange={onChange} />)
+
+    const hour = screen.getByRole('spinbutton', { name: /hour/i })
+    hour.focus()
+    await user.keyboard('{ArrowUp}')
+
+    expect(onChange).toHaveBeenCalled()
+    const called = onChange.mock.calls.at(-1)?.[0] as Time | null
+    expect(called?.hour).toBe(10)
+    expect(called?.minute).toBe(30)
+  })
+
+  it('renders the error message when invalid', () => {
+    render(<TimeField label="Opens at" isInvalid errorMessage="Out of hours." />)
+    expect(screen.getByText('Out of hours.')).toBeInTheDocument()
+  })
+
+  it('disables the control when isDisabled is set', () => {
+    render(<TimeField label="Opens at" isDisabled defaultValue={parseTime('09:30')} />)
+    for (const seg of screen.getAllByRole('spinbutton')) {
+      expect(seg).toHaveAttribute('aria-disabled', 'true')
+    }
+  })
+
+  it('shows the description slot', () => {
+    render(<TimeField label="Opens at" description="Local time." />)
+    expect(screen.getByText('Local time.')).toBeInTheDocument()
+  })
+})