@proteos/ui 0.31.0

package/src/components/progress-bar/progress-bar.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useEffect, useState } from 'react'
+
+import { ProgressBar } from './progress-bar'
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  args: {
+    'aria-label': 'Loading',
+    size: 'sm',
+    isIndeterminate: true,
+  },
+  argTypes: {
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['sm', 'md'],
+    },
+    isIndeterminate: { control: { type: 'boolean' } },
+    value: { control: { type: 'number', min: 0, max: 100 } },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ProgressBar>
+
+export const Playground: Story = {
+  render: (args) => (
+    <div className="w-[280px]">
+      <ProgressBar {...args} />
+    </div>
+  ),
+}
+
+export const Indeterminate: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex flex-col gap-6 w-[280px]">
+      <ProgressBar isIndeterminate aria-label="Running action" />
+      <ProgressBar isIndeterminate size="md" aria-label="Uploading file" />
+    </div>
+  ),
+}
+
+export const Determinate: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const [value, setValue] = useState(0)
+    useEffect(() => {
+      const timer = setInterval(() => {
+        setValue((current) => (current >= 100 ? 0 : current + 5))
+      }, 300)
+      return () => clearInterval(timer)
+    }, [])
+    return (
+      <div className="flex flex-col gap-3 w-[280px]">
+        <ProgressBar value={value} aria-label="Upload progress" />
+        <p className="font-mono text-[11px] text-ink-4">{value}%</p>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="grid grid-cols-[80px_1fr] items-center gap-x-6 gap-y-4 w-[360px]">
+      <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">sm</div>
+      <ProgressBar value={60} size="sm" aria-label="Progress sm" />
+      <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">md</div>
+      <ProgressBar value={60} size="md" aria-label="Progress md" />
+    </div>
+  ),
+}

package/src/components/progress-bar/progress-bar.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { ProgressBar } from './progress-bar'
+
+describe('ProgressBar', () => {
+  it('renders with the progressbar role and accessible name', () => {
+    render(<ProgressBar value={40} aria-label="Upload progress" />)
+    expect(screen.getByRole('progressbar', { name: 'Upload progress' })).toBeInTheDocument()
+  })
+
+  it('reflects the supplied value in aria-valuenow when determinate', () => {
+    render(<ProgressBar value={73} aria-label="Sync" />)
+    const bar = screen.getByRole('progressbar', { name: 'Sync' })
+    expect(bar).toHaveAttribute('aria-valuenow', '73')
+  })
+
+  it('omits aria-valuenow when indeterminate', () => {
+    render(<ProgressBar isIndeterminate aria-label="Running action" />)
+    const bar = screen.getByRole('progressbar', { name: 'Running action' })
+    expect(bar).not.toHaveAttribute('aria-valuenow')
+  })
+
+  it('applies the indeterminate animation utility on the inner fill', () => {
+    const { container } = render(<ProgressBar isIndeterminate aria-label="Running" />)
+    const fill = container.querySelector('.animate-indeterminate-progress')
+    expect(fill).not.toBeNull()
+  })
+})

package/src/components/progress-bar/progress-bar.tsx

@@ -0,0 +1,57 @@
+import {
+  ProgressBar as AriaProgressBar,
+  type ProgressBarProps as AriaProgressBarProps,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   ProgressBar — wraps RAC's headless ProgressBar (state + ARIA only) and
+   adds the visual track + fill. Supports both determinate (`value`) and
+   indeterminate (`isIndeterminate`) modes.
+
+   The indeterminate fill rides the `animate-indeterminate-progress` utility
+   declared in styles.css — a 35%-wide segment that slides off the right edge
+   and re-enters from the left on a continuous loop.
+   ========================================================================= */
+
+export const progressBarStyles = tv({
+  slots: {
+    track: 'relative overflow-hidden rounded-pill bg-surface-2 w-full',
+    fill: 'h-full rounded-pill bg-accent',
+  },
+  variants: {
+    size: {
+      sm: { track: 'h-1' },
+      md: { track: 'h-2' },
+    },
+  },
+  defaultVariants: { size: 'sm' },
+})
+
+export type ProgressBarVariants = VariantProps<typeof progressBarStyles>
+export type ProgressBarProps = Omit<AriaProgressBarProps, 'children' | 'className'> &
+  ProgressBarVariants & {
+    className?: string
+  }
+
+export function ProgressBar({ size, className, ...props }: ProgressBarProps) {
+  const { track, fill } = progressBarStyles({ size })
+  return (
+    <AriaProgressBar {...props} className={cn('block', className)}>
+      {({ percentage, isIndeterminate }) => (
+        <div className={track()}>
+          {isIndeterminate ? (
+            <div className={cn(fill(), 'absolute w-[35%] animate-indeterminate-progress')} />
+          ) : (
+            <div
+              className={cn(fill(), 'transition-[width] duration-150')}
+              style={{ width: `${percentage ?? 0}%` }}
+            />
+          )}
+        </div>
+      )}
+    </AriaProgressBar>
+  )
+}

package/src/components/radio-group/index.ts

@@ -0,0 +1,2 @@
+export type { RadioGroupProps, RadioProps } from './radio-group'
+export { Radio, RadioGroup } from './radio-group'

package/src/components/radio-group/radio-group.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Radio, RadioGroup } from './radio-group'
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  tags: ['autodocs'],
+  args: {
+    label: 'Environment',
+  },
+  argTypes: {
+    orientation: {
+      control: { type: 'inline-radio' },
+      options: ['vertical', 'horizontal'],
+    },
+    isDisabled: { control: { type: 'boolean' } },
+    isInvalid: { control: { type: 'boolean' } },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof RadioGroup>
+
+export const Playground: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="staging">Staging</Radio>
+      <Radio value="production">Production</Radio>
+      <Radio value="sandbox">Sandbox</Radio>
+    </RadioGroup>
+  ),
+}
+
+export const Horizontal: Story = {
+  args: { orientation: 'horizontal' },
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="staging">Staging</Radio>
+      <Radio value="production">Production</Radio>
+      <Radio value="sandbox">Sandbox</Radio>
+    </RadioGroup>
+  ),
+}
+
+export const WithDescription: Story = {
+  args: { description: 'Where Proteos should run the compose.' },
+  render: (args) => (
+    <RadioGroup {...args} defaultValue="production">
+      <Radio value="staging">Staging</Radio>
+      <Radio value="production">Production</Radio>
+      <Radio value="sandbox">Sandbox</Radio>
+    </RadioGroup>
+  ),
+}
+
+export const Invalid: Story = {
+  args: { isInvalid: true, errorMessage: 'Pick an environment before composing.' },
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="staging">Staging</Radio>
+      <Radio value="production">Production</Radio>
+      <Radio value="sandbox">Sandbox</Radio>
+    </RadioGroup>
+  ),
+}
+
+export const Disabled: Story = {
+  args: { isDisabled: true, defaultValue: 'production' },
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="staging">Staging</Radio>
+      <Radio value="production">Production</Radio>
+      <Radio value="sandbox">Sandbox</Radio>
+    </RadioGroup>
+  ),
+}
+
+export const AllStates: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="grid gap-6 w-[360px]">
+      <RadioGroup label="Rest">
+        <Radio value="a">Staging</Radio>
+        <Radio value="b">Production</Radio>
+        <Radio value="c">Sandbox</Radio>
+      </RadioGroup>
+
+      <RadioGroup label="Selected" defaultValue="b">
+        <Radio value="a">Staging</Radio>
+        <Radio value="b">Production</Radio>
+        <Radio value="c">Sandbox</Radio>
+      </RadioGroup>
+
+      <RadioGroup label="Invalid" isInvalid errorMessage="Pick one before continuing.">
+        <Radio value="a">Staging</Radio>
+        <Radio value="b">Production</Radio>
+      </RadioGroup>
+
+      <RadioGroup label="Disabled" isDisabled defaultValue="b">
+        <Radio value="a">Staging</Radio>
+        <Radio value="b">Production</Radio>
+      </RadioGroup>
+    </div>
+  ),
+}

package/src/components/radio-group/radio-group.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Radio, RadioGroup } from './radio-group'
+
+describe('RadioGroup', () => {
+  it('renders a labelled group with radio options', () => {
+    render(
+      <RadioGroup label="Environment">
+        <Radio value="staging">Staging</Radio>
+        <Radio value="production">Production</Radio>
+        <Radio value="sandbox">Sandbox</Radio>
+      </RadioGroup>,
+    )
+    expect(screen.getByRole('radiogroup', { name: 'Environment' })).toBeInTheDocument()
+    expect(screen.getByRole('radio', { name: 'Staging' })).toBeInTheDocument()
+    expect(screen.getByRole('radio', { name: 'Production' })).toBeInTheDocument()
+  })
+
+  it('fires onChange with the selected value', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <RadioGroup label="Environment" onChange={onChange}>
+        <Radio value="staging">Staging</Radio>
+        <Radio value="production">Production</Radio>
+      </RadioGroup>,
+    )
+
+    await user.click(screen.getByRole('radio', { name: 'Production' }))
+    expect(onChange).toHaveBeenCalledWith('production')
+  })
+
+  it('reflects a controlled selected value', () => {
+    render(
+      <RadioGroup label="Environment" value="production">
+        <Radio value="staging">Staging</Radio>
+        <Radio value="production">Production</Radio>
+      </RadioGroup>,
+    )
+    expect(screen.getByRole('radio', { name: 'Production' })).toBeChecked()
+    expect(screen.getByRole('radio', { name: 'Staging' })).not.toBeChecked()
+  })
+
+  it('navigates between options with arrow keys', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <RadioGroup label="Environment" defaultValue="staging" onChange={onChange}>
+        <Radio value="staging">Staging</Radio>
+        <Radio value="production">Production</Radio>
+        <Radio value="sandbox">Sandbox</Radio>
+      </RadioGroup>,
+    )
+
+    await user.tab()
+    expect(screen.getByRole('radio', { name: 'Staging' })).toHaveFocus()
+    await user.keyboard('{ArrowDown}')
+    expect(onChange).toHaveBeenCalledWith('production')
+  })
+
+  it('shows description and error message slots', () => {
+    render(
+      <RadioGroup label="Env" description="Pick one." isInvalid errorMessage="Required">
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+      </RadioGroup>,
+    )
+    expect(screen.getByText('Pick one.')).toBeInTheDocument()
+    expect(screen.getByText('Required')).toBeInTheDocument()
+  })
+
+  it('does not fire onChange when the group is disabled', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <RadioGroup label="Env" isDisabled onChange={onChange}>
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+      </RadioGroup>,
+    )
+
+    await user.click(screen.getByRole('radio', { name: 'A' }))
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react'
+import {
+  Radio as AriaRadio,
+  RadioGroup as AriaRadioGroup,
+  type RadioGroupProps as AriaRadioGroupProps,
+  type RadioProps as AriaRadioProps,
+  FieldError,
+  Label,
+  Text,
+} from 'react-aria-components'
+import { cn } from '../../lib/cn'
+import { fieldErrorStyles, fieldHintStyles, fieldLabelStyles } from '../field/field'
+
+/* =========================================================================
+   RadioGroup — exclusive-choice field. Monolithic API to match Input/Select/
+   Combobox/DatePicker: label / description / errorMessage props on the group,
+   `<Radio>` children for each option.
+   ========================================================================= */
+
+export type RadioGroupProps = Omit<AriaRadioGroupProps, 'children'> & {
+  label?: ReactNode
+  description?: ReactNode
+  errorMessage?: ReactNode
+  /** `<Radio>` elements. Function-as-children is not supported at the group level. */
+  children: ReactNode
+}
+
+export function RadioGroup({
+  label,
+  description,
+  errorMessage,
+  orientation = 'vertical',
+  children,
+  className,
+  ...props
+}: RadioGroupProps) {
+  return (
+    <AriaRadioGroup
+      {...props}
+      orientation={orientation}
+      className={(renderProps) =>
+        cn('grid gap-2', typeof className === 'function' ? className(renderProps) : className)
+      }
+    >
+      {label ? <Label className={fieldLabelStyles}>{label}</Label> : null}
+      <div
+        className={cn(
+          orientation === 'horizontal'
+            ? 'flex flex-wrap items-center gap-x-4 gap-y-2'
+            : 'grid gap-3',
+        )}
+      >
+        {children}
+      </div>
+      {description ? (
+        <Text slot="description" className={fieldHintStyles}>
+          {description}
+        </Text>
+      ) : null}
+      {errorMessage ? <FieldError className={fieldErrorStyles}>{errorMessage}</FieldError> : null}
+    </AriaRadioGroup>
+  )
+}
+
+export type RadioProps = Omit<AriaRadioProps, 'children'> & {
+  children?: ReactNode
+}
+
+export function Radio({ children, className, ...props }: RadioProps) {
+  return (
+    <AriaRadio
+      {...props}
+      className={(renderProps) =>
+        cn(
+          'group inline-flex items-center gap-2.5 cursor-pointer',
+          'font-sans text-[14px] text-ink-2 select-none',
+          'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
+          typeof className === 'function' ? className(renderProps) : className,
+        )
+      }
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'relative inline-flex items-center justify-center shrink-0',
+          'size-[18px] rounded-full border bg-surface border-ink-4',
+          'transition-[border-color,box-shadow] duration-150',
+          'group-data-[hovered]:border-ink',
+          'group-data-[selected]:border-ink',
+          'group-data-[focus-visible]:shadow-[var(--shadow-focus)]',
+        )}
+      >
+        <span
+          className={cn(
+            'block size-[10px] rounded-full bg-accent',
+            'transition-opacity duration-150 opacity-0',
+            'group-data-[selected]:opacity-100',
+          )}
+        />
+      </span>
+      {children}
+    </AriaRadio>
+  )
+}

package/src/components/record-filter/attribute-picker.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { cn } from '../../lib/cn'
+import { Combobox, type ComboboxOption } from '../combobox/combobox'
+import type { FieldSize } from '../field/field'
+import type { FilterField } from './types'
+
+/* =========================================================================
+   AttributePicker — inline typeahead picker for filterable fields. Thin
+   wrapper over lib `Combobox` that maps `FilterField[]` into options and
+   surfaces the type tag in each row's description slot.
+
+   Rendered inline (no outer popover) so it can occupy the field cell of a
+   filter row directly. The Combobox's internal popover hosts the dropdown.
+   With `autoFocus + menuTrigger="focus"`, the menu opens immediately on
+   mount — the standard "click + Add → row appears with picker open"
+   experience.
+   ========================================================================= */
+
+export type AttributePickerProps = {
+  fields: ReadonlyArray<FilterField>
+  /** Currently picked field path. Empty string means "no field picked yet". */
+  value: string
+  onChange: (picked: FilterField) => void
+  autoFocus?: boolean
+  isDisabled?: boolean
+  /** Field size. Defaults to `sm` since this picker only ships inside the
+   *  filter row; `md` is exposed for future stand-alone uses. */
+  size?: FieldSize
+  /** Visual override for the field wrapper. */
+  className?: string
+}
+
+export function AttributePicker({
+  fields,
+  value,
+  onChange,
+  autoFocus = false,
+  isDisabled,
+  size = 'sm',
+  className,
+}: AttributePickerProps) {
+  const options: ComboboxOption<string>[] = fields.map((f) => ({
+    id: f.path,
+    label: f.label,
+    description: <FieldTypeTag>{f.type}</FieldTypeTag>,
+  }))
+
+  return (
+    <Combobox<string>
+      aria-label="Find attribute"
+      placeholder="Find attribute…"
+      options={options}
+      selectedKey={value === '' ? null : value}
+      onSelectionChange={(key) => {
+        if (key == null) return
+        const picked = fields.find((f) => f.path === String(key))
+        if (picked) onChange(picked)
+      }}
+      // Auto-open the dropdown on focus so a freshly-mounted picker shows
+      // its options without a second click.
+      menuTrigger="focus"
+      autoFocus={autoFocus}
+      size={size}
+      {...(isDisabled !== undefined ? { isDisabled } : {})}
+      className={cn('w-full', className)}
+    />
+  )
+}
+
+function FieldTypeTag({ children }: { children: ReactNode }) {
+  return (
+    <span className="font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4">{children}</span>
+  )
+}