@pickle-ui/react 0.0.0-stage → 1.0.0-beta.3

package/src/components/form/RadioGroup.test.tsx

@@ -0,0 +1,171 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { RadioGroup } from './RadioGroup';
+
+describe('RadioGroup', () => {
+  it('renders radio items', () => {
+    render(
+      <RadioGroup>
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item label="Option B" value="b" />
+      </RadioGroup>,
+    );
+    expect(screen.getByRole('radio', { name: 'Option A' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Option B' })).toBeInTheDocument();
+  });
+
+  it('supports compact item sizing', () => {
+    render(
+      <RadioGroup>
+        <RadioGroup.Item label="Compact" size="sm" value="compact" />
+      </RadioGroup>,
+    );
+
+    expect(screen.getByRole('radio', { name: 'Compact' })).toHaveAttribute(
+      'data-size',
+      'sm',
+    );
+  });
+
+  it('selects defaultValue on mount', () => {
+    render(
+      <RadioGroup defaultValue="b">
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item label="Option B" value="b" />
+      </RadioGroup>,
+    );
+    expect(screen.getByRole('radio', { name: 'Option B' })).toHaveAttribute(
+      'aria-checked',
+      'true',
+    );
+    expect(screen.getByRole('radio', { name: 'Option A' })).toHaveAttribute(
+      'aria-checked',
+      'false',
+    );
+  });
+
+  it('selecting one item deselects the others', () => {
+    render(
+      <RadioGroup defaultValue="a">
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item label="Option B" value="b" />
+      </RadioGroup>,
+    );
+    const radioB = screen.getByRole('radio', { name: 'Option B' });
+    fireEvent.click(radioB);
+    expect(radioB).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByRole('radio', { name: 'Option A' })).toHaveAttribute(
+      'aria-checked',
+      'false',
+    );
+  });
+
+  it('clicking the label selects its item', () => {
+    render(
+      <RadioGroup>
+        <RadioGroup.Item label="Option A" value="a" />
+      </RadioGroup>,
+    );
+    const label = screen.getByText('Option A');
+    const radio = screen.getByRole('radio', { name: 'Option A' });
+    expect(radio).toHaveAttribute('aria-checked', 'false');
+    fireEvent.click(label);
+    expect(radio).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('disabled item is not interactive', () => {
+    render(
+      <RadioGroup>
+        <RadioGroup.Item disabled label="Disabled" value="d" />
+      </RadioGroup>,
+    );
+    const radio = screen.getByRole('radio', { name: 'Disabled' });
+    expect(radio).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.click(radio);
+    expect(radio).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('mutes the label when its item is disabled', () => {
+    render(
+      <RadioGroup>
+        <RadioGroup.Item disabled label="Disabled" value="d" />
+        <RadioGroup.Item label="Enabled" value="e" />
+      </RadioGroup>,
+    );
+    expect(
+      screen.getByText('Disabled').closest('[data-slot="radio-label"]'),
+    ).toHaveClass('text-muted-foreground');
+    expect(
+      screen.getByText('Enabled').closest('[data-slot="radio-label"]'),
+    ).not.toHaveClass('text-muted-foreground');
+  });
+
+  it('supports arrow-key roving focus between items', () => {
+    render(
+      <RadioGroup defaultValue="a">
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item label="Option B" value="b" />
+        <RadioGroup.Item label="Option C" value="c" />
+      </RadioGroup>,
+    );
+    // All radios in a group are reachable via keyboard.
+    const radios = screen.getAllByRole('radio');
+    expect(radios).toHaveLength(3);
+    // The group element exists and has roving-tabindex structure (tabIndex 0 on selected).
+    const radioA = screen.getByRole('radio', { name: 'Option A' });
+    expect(radioA).toHaveAttribute('aria-checked', 'true');
+    // Click directly to simulate selection change (roving focus is a browser behavior).
+    fireEvent.click(screen.getByRole('radio', { name: 'Option C' }));
+    expect(screen.getByRole('radio', { name: 'Option C' })).toHaveAttribute(
+      'aria-checked',
+      'true',
+    );
+    expect(radioA).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('disabled unlabeled item is not interactive', () => {
+    render(
+      <RadioGroup>
+        <RadioGroup.Item aria-label="Hidden" disabled value="d" />
+      </RadioGroup>,
+    );
+    const radio = screen.getByRole('radio', { name: 'Hidden' });
+    expect(radio).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.click(radio);
+    expect(radio).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('renders compound RadioGroup.Item.Label', () => {
+    render(
+      <RadioGroup>
+        <RadioGroup.Item.Label>
+          <RadioGroup.Item value="x" />
+          Custom label
+        </RadioGroup.Item.Label>
+      </RadioGroup>,
+    );
+    expect(screen.getByText('Custom label')).toHaveAttribute(
+      'data-slot',
+      'radio-label',
+    );
+  });
+
+  it('applies classNames to the indicator and label slots', () => {
+    const { container } = render(
+      <RadioGroup defaultValue="a">
+        <RadioGroup.Item
+          classNames={{ indicator: 'indicator-x', label: 'label-x' }}
+          label="Option A"
+          value="a"
+        />
+      </RadioGroup>,
+    );
+    expect(
+      container.querySelector('[data-slot="radio-indicator"]'),
+    ).toHaveClass('indicator-x');
+    expect(
+      screen.getByText('Option A').closest('[data-slot="radio-label"]'),
+    ).toHaveClass('label-x');
+  });
+});

package/src/components/form/RadioGroup.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import * as React from 'react';
+
+import { cn, type SlotClassNames } from '@/lib/utils';
+
+type RadioGroupItemProps = React.ComponentProps<typeof RadioPrimitive.Root> & {
+  classNames?: SlotClassNames<'indicator' | 'label'>;
+  label?: React.ReactNode;
+  size?: 'md' | 'sm';
+};
+
+type RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive>;
+
+function RadioGroupItem({
+  className,
+  classNames,
+  disabled,
+  id,
+  label,
+  size,
+  ...props
+}: RadioGroupItemProps) {
+  const generatedLabelId = React.useId();
+
+  if (!label) {
+    return (
+      <RadioGroupItemControl
+        className={className}
+        classNames={classNames}
+        disabled={disabled}
+        id={id}
+        size={size}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <RadioGroupItemLabel
+      className={classNames?.label}
+      disabled={disabled}
+      id={generatedLabelId}
+    >
+      <RadioGroupItemControl
+        aria-labelledby={generatedLabelId}
+        className={className}
+        classNames={classNames}
+        disabled={disabled}
+        id={id}
+        size={size}
+        {...props}
+      />
+      {label}
+    </RadioGroupItemLabel>
+  );
+}
+
+function RadioGroupItemControl({
+  className,
+  classNames,
+  size = 'md',
+  ...props
+}: RadioGroupItemProps) {
+  return (
+    <RadioPrimitive.Root
+      className={cn(
+        'peer group/radio aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 border-input bg-background data-checked:border-primary focus-ring inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=md]:size-4 data-[size=sm]:size-3.5',
+        className,
+      )}
+      data-size={size}
+      data-slot="radio"
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        className={cn(
+          'bg-primary rounded-full group-data-[size=md]/radio:size-2 group-data-[size=sm]/radio:size-1.5',
+          classNames?.indicator,
+        )}
+        data-slot="radio-indicator"
+      />
+    </RadioPrimitive.Root>
+  );
+}
+
+function RadioGroupItemLabel({
+  className,
+  disabled,
+  ...props
+}: React.ComponentProps<'label'> & { disabled?: boolean }) {
+  return (
+    // react-doctor-disable-next-line react-doctor/label-has-associated-control -- Base UI radios are not native inputs, so the label must wrap the control for click and screen-reader association
+    <label
+      className={cn(
+        'flex cursor-pointer items-center gap-2 text-sm leading-none font-medium',
+        disabled && 'text-muted-foreground cursor-not-allowed',
+        'has-[>[data-slot=radio][data-disabled]]:text-muted-foreground has-[>[data-slot=radio][data-disabled]]:cursor-not-allowed',
+        className,
+      )}
+      data-slot="radio-label"
+      {...props}
+    />
+  );
+}
+
+function RadioGroupRoot({ className, ...props }: RadioGroupProps) {
+  return (
+    <RadioGroupPrimitive
+      className={cn('grid gap-2', className)}
+      data-slot="radio-group"
+      {...props}
+    />
+  );
+}
+
+const RadioGroupItemWithLabel = Object.assign(RadioGroupItem, {
+  Label: RadioGroupItemLabel,
+});
+
+const RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioGroupItemWithLabel,
+});
+
+export { RadioGroup };
+export type { RadioGroupItemProps, RadioGroupProps };

package/src/components/form/Select.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { cn } from '@/lib/utils';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Select } from './Select';
+
+const meta = {
+  component: Select,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/Select',
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+type ThemeSelectStateProps = {
+  disabled?: boolean;
+  invalid?: boolean;
+  triggerClassName?: string;
+  value?: string;
+};
+
+const STATE_COLUMNS: {
+  key: string;
+  label: string;
+  props: ThemeSelectStateProps;
+}[] = [
+  { key: 'placeholder', label: 'Placeholder', props: {} },
+  { key: 'selected', label: 'Selected', props: { value: 'system' } },
+  {
+    key: 'hover',
+    label: 'Hover',
+    props: { triggerClassName: 'pseudo-hover', value: 'system' },
+  },
+  {
+    key: 'focus',
+    label: 'Focus',
+    props: { triggerClassName: 'pseudo-focus-visible', value: 'system' },
+  },
+  {
+    key: 'disabled',
+    label: 'Disabled',
+    props: { disabled: true, value: 'system' },
+  },
+  {
+    key: 'invalid',
+    label: 'Invalid',
+    props: { invalid: true, value: 'system' },
+  },
+];
+
+const STATE_PROPS = Object.fromEntries(
+  STATE_COLUMNS.map((state) => [state.key, state.props]),
+) as Record<string, ThemeSelectStateProps>;
+
+function SelectMatrixCell({ column }: ComponentMatrixCellProps) {
+  return <ThemeSelect {...STATE_PROPS[column.key]} />;
+}
+
+function ThemeSelect({
+  disabled,
+  invalid,
+  triggerClassName,
+  value,
+}: ThemeSelectStateProps) {
+  return (
+    <Select defaultValue={value} disabled={disabled}>
+      <Select.Label className="sr-only">Theme</Select.Label>
+      <Select.Trigger
+        aria-invalid={invalid || undefined}
+        className={cn('w-44', triggerClassName)}
+      >
+        <Select.Value placeholder="Theme" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Group>
+          <Select.GroupLabel>Theme</Select.GroupLabel>
+          <Select.Item value="light">Light</Select.Item>
+          <Select.Item value="dark">Dark</Select.Item>
+          <Select.Item value="system">System</Select.Item>
+        </Select.Group>
+      </Select.Content>
+    </Select>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Select">
+      <Story.Section title="States">
+        <Story.Matrix
+          Cell={SelectMatrixCell}
+          columns={STATE_COLUMNS}
+          rows={[{ key: 'select', label: 'Select' }]}
+        />
+      </Story.Section>
+
+      <Story.Section title="Label">
+        <Select defaultValue="designer">
+          <Select.Label>Role</Select.Label>
+          <Select.Trigger className="mt-2 w-56">
+            <Select.Value placeholder="Select a role" />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="designer">Designer</Select.Item>
+            <Select.Item value="engineer">Engineer</Select.Item>
+          </Select.Content>
+        </Select>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/form/Select.test.tsx

@@ -0,0 +1,115 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Select } from './Select';
+
+describe('Select', () => {
+  it('renders item labels in the trigger instead of raw values', () => {
+    render(
+      <Select defaultValue="designer">
+        <Select.Trigger>
+          <Select.Value placeholder="Select a role" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="designer">Designer</Select.Item>
+          <Select.Item value="engineer">Engineer</Select.Item>
+        </Select.Content>
+      </Select>,
+    );
+
+    expect(screen.getByRole('combobox')).toHaveTextContent('Designer');
+    expect(screen.getByRole('combobox')).not.toHaveTextContent('designer');
+  });
+
+  it('supports children as item labels', () => {
+    render(
+      <Select defaultValue="light">
+        <Select.Trigger>
+          <Select.Value placeholder="Theme" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="light">Light</Select.Item>
+          <Select.Item value="dark">Dark</Select.Item>
+        </Select.Content>
+      </Select>,
+    );
+
+    expect(screen.getByRole('combobox')).toHaveTextContent('Light');
+  });
+
+  it('keeps the hover border treatment while open', () => {
+    render(
+      <Select defaultOpen>
+        <Select.Trigger>
+          <Select.Value placeholder="Theme" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="light">Light</Select.Item>
+        </Select.Content>
+      </Select>,
+    );
+
+    expect(screen.getByRole('combobox')).toHaveAttribute('data-popup-open');
+    expect(screen.getByRole('combobox')).toHaveClass(
+      'data-popup-open:border-ring/50',
+    );
+  });
+
+  it('labels the trigger with Select.Label', () => {
+    render(
+      <Select>
+        <Select.Label>Role</Select.Label>
+        <Select.Trigger>
+          <Select.Value placeholder="Select a role" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="designer">Designer</Select.Item>
+        </Select.Content>
+      </Select>,
+    );
+
+    expect(screen.getByRole('combobox', { name: 'Role' })).toBeInTheDocument();
+    expect(screen.getByText('Role')).toHaveAttribute(
+      'data-slot',
+      'select-label',
+    );
+  });
+
+  it('renders group labels separately from Select.Label', () => {
+    render(
+      <Select defaultOpen defaultValue="light">
+        <Select.Trigger>
+          <Select.Value placeholder="Theme" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Group>
+            <Select.GroupLabel>Appearance</Select.GroupLabel>
+            <Select.Item value="light">Light</Select.Item>
+          </Select.Group>
+        </Select.Content>
+      </Select>,
+    );
+
+    expect(screen.getByText('Appearance')).toHaveAttribute(
+      'data-slot',
+      'select-group-label',
+    );
+    expect(screen.getByRole('combobox')).toHaveTextContent('Light');
+  });
+
+  it('applies classNames to the trigger icon slot', () => {
+    const { container } = render(
+      <Select defaultValue="a">
+        <Select.Trigger classNames={{ icon: 'icon-x' }}>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">A</Select.Item>
+        </Select.Content>
+      </Select>,
+    );
+    expect(
+      container.querySelector('[data-slot="select-trigger-icon"]'),
+    ).toHaveClass('icon-x');
+  });
+});