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

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

@@ -0,0 +1,107 @@
+import { render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  it('renders unchecked by default', () => {
+    render(<Checkbox aria-label="Accept" />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Accept' });
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('renders the control as a native button for sibling labels', () => {
+    render(<Checkbox aria-label="Accept" />);
+    expect(screen.getByRole('checkbox', { name: 'Accept' }).tagName).toBe(
+      'BUTTON',
+    );
+  });
+
+  it('toggles on click', () => {
+    render(<Checkbox aria-label="Accept" />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Accept' });
+    expect(checkbox).not.toBeChecked();
+    fireEvent.click(checkbox);
+    expect(checkbox).toBeChecked();
+    fireEvent.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('does not render the check indicator when unchecked', () => {
+    render(<Checkbox aria-label="Accept" />);
+    expect(
+      screen
+        .getByRole('checkbox', { name: 'Accept' })
+        .querySelector('[data-slot="checkbox-indicator"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('clicking the label toggles the checkbox', () => {
+    render(<Checkbox label="Accept terms" />);
+    const label = screen.getByText('Accept terms');
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+    fireEvent.click(label);
+    expect(checkbox).toBeChecked();
+  });
+
+  it('renders as indeterminate', () => {
+    render(<Checkbox aria-label="Partial" indeterminate />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Partial' });
+    // Base UI renders the checkbox root as a span with role="checkbox";
+    // aria-checked="mixed" signals indeterminate state.
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  it('is disabled and blocks interaction', () => {
+    render(<Checkbox aria-label="Accept" disabled />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Accept' });
+    expect(checkbox).toBeDisabled();
+    fireEvent.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('merges custom className', () => {
+    render(<Checkbox aria-label="Accept" className="my-class" />);
+    const root = screen
+      .getByRole('checkbox', { name: 'Accept' })
+      .closest('[data-slot="checkbox"]');
+    expect(root).toHaveClass('my-class');
+  });
+
+  it('renders Checkbox.Label as a standalone label element', () => {
+    render(
+      <>
+        <Checkbox aria-label="Composed" id="cb-compose" />
+        <Checkbox.Label htmlFor="cb-compose">Composed label</Checkbox.Label>
+      </>,
+    );
+    expect(screen.getByText('Composed label')).toHaveAttribute(
+      'data-slot',
+      'checkbox-label',
+    );
+  });
+
+  it('applies classNames to the field, indicator, and label slots', () => {
+    const { container } = render(
+      <Checkbox
+        classNames={{
+          field: 'field-x',
+          indicator: 'indicator-x',
+          label: 'label-x',
+        }}
+        defaultChecked
+        label="Accept"
+      />,
+    );
+    expect(container.querySelector('[data-slot="checkbox-field"]')).toHaveClass(
+      'field-x',
+    );
+    expect(
+      container.querySelector('[data-slot="checkbox-indicator"]'),
+    ).toHaveClass('indicator-x');
+    expect(screen.getByText('Accept')).toHaveClass('label-x');
+  });
+});

package/src/components/form/Checkbox.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { IconCheck, IconMinus } from '@tabler/icons-react';
+import * as React from 'react';
+
+import { cn, type SlotClassNames } from '@/lib/utils';
+
+type CheckboxLabelProps = Omit<React.ComponentProps<'label'>, 'htmlFor'> & {
+  htmlFor: string;
+};
+
+type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & {
+  classNames?: SlotClassNames<'field' | 'indicator' | 'label'>;
+  label?: React.ReactNode;
+  size?: 'md' | 'sm';
+};
+
+function CheckboxControl({
+  className,
+  classNames,
+  nativeButton = true,
+  // react-doctor-disable-next-line react-doctor/control-has-associated-label -- consumers provide aria-label/aria-labelledby, or CheckboxRoot wires this button to the sibling label by id
+  render = <button type="button" />,
+  size = 'md',
+  ...props
+}: Omit<CheckboxProps, 'label'>) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        'group/checkbox border-input bg-background aria-invalid:border-destructive/36 focus-visible:ring-ring focus-visible:ring-offset-background dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 ring-ring focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[.25rem] border shadow-xs/5 transition-shadow outline-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:cursor-not-allowed data-disabled:opacity-64 data-[size=md]:size-4.5 data-[size=sm]:size-3.5 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none',
+        className,
+      )}
+      data-size={size}
+      data-slot="checkbox"
+      nativeButton={nativeButton}
+      render={render}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className={cn(
+          'text-primary-foreground data-indeterminate:text-foreground data-checked:bg-primary absolute -inset-px flex items-center justify-center rounded-[.25rem] data-unchecked:hidden',
+          classNames?.indicator,
+        )}
+        data-slot="checkbox-indicator"
+      >
+        <IconCheck className="group-data-[size=md]/checkbox:size-3 group-data-[size=sm]/checkbox:size-2.5 data-indeterminate:hidden [[data-indeterminate]_&]:hidden" />
+        <IconMinus className="hidden group-data-[size=md]/checkbox:size-3 group-data-[size=sm]/checkbox:size-2.5 [[data-indeterminate]_&]:block" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+function CheckboxLabel({ className, htmlFor, ...props }: CheckboxLabelProps) {
+  return (
+    <label
+      className={cn(
+        'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      data-slot="checkbox-label"
+      htmlFor={htmlFor}
+      {...props}
+    />
+  );
+}
+
+function CheckboxRoot({ classNames, id, label, ...props }: CheckboxProps) {
+  const generatedId = React.useId();
+
+  if (!label) {
+    return <CheckboxControl classNames={classNames} id={id} {...props} />;
+  }
+
+  const checkboxId = id ?? generatedId;
+
+  return (
+    <div
+      className={cn('flex items-center gap-2', classNames?.field)}
+      data-slot="checkbox-field"
+    >
+      <CheckboxControl classNames={classNames} id={checkboxId} {...props} />
+      <CheckboxLabel className={classNames?.label} htmlFor={checkboxId}>
+        {label}
+      </CheckboxLabel>
+    </div>
+  );
+}
+
+const Checkbox = Object.assign(CheckboxRoot, {
+  Label: CheckboxLabel,
+});
+
+export { Checkbox };
+export type { CheckboxLabelProps, CheckboxProps };

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

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { useState } from 'react';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { ColorPicker } from './ColorPicker';
+
+const meta = {
+  component: ColorPicker,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/ColorPicker',
+} satisfies Meta<typeof ColorPicker>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const FORMAT_COLUMNS = [
+  { key: 'hex', label: 'HEX' },
+  { key: 'rgb', label: 'RGB' },
+  { key: 'hsl', label: 'HSL' },
+  { key: 'hsb', label: 'HSB' },
+];
+
+const MODE_ROWS = [
+  { key: 'popover', label: 'Popover' },
+  { key: 'inline', label: 'Inline' },
+  { key: 'disabled', label: 'Disabled' },
+];
+
+type ColorFormat = 'hex' | 'hsb' | 'hsl' | 'rgb';
+
+function ColorPickerMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  return <PickerPreview format={column.key} mode={row.key} />;
+}
+
+function formatColor(hex: string, format: ColorFormat) {
+  const [r, g, b] =
+    hex
+      .replace('#', '')
+      .match(/.{2}/g)
+      ?.map((channel) => Number.parseInt(channel, 16)) ?? [];
+
+  if (r === undefined || g === undefined || b === undefined) {
+    return hex;
+  }
+
+  if (format === 'rgb') {
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  const max = Math.max(r, g, b) / 255;
+  const min = Math.min(r, g, b) / 255;
+  const diff = max - min;
+  const lightness = (max + min) / 2;
+  const saturation =
+    diff === 0
+      ? 0
+      : diff / (format === 'hsl' ? 1 - Math.abs(2 * lightness - 1) : max);
+  const hue =
+    diff === 0
+      ? 0
+      : max === r / 255
+        ? ((g / 255 - b / 255) / diff) % 6
+        : max === g / 255
+          ? (b / 255 - r / 255) / diff + 2
+          : (r / 255 - g / 255) / diff + 4;
+  const degrees = Math.round((hue < 0 ? hue + 6 : hue) * 60);
+
+  if (format === 'hsl') {
+    return `hsl(${degrees}, ${Math.round(saturation * 100)}%, ${Math.round(lightness * 100)}%)`;
+  }
+
+  if (format === 'hsb') {
+    return `hsb(${degrees}, ${Math.round(saturation * 100)}%, ${Math.round(max * 100)}%)`;
+  }
+
+  return hex;
+}
+
+function PickerControls() {
+  return (
+    <>
+      <ColorPicker.Area />
+      <div className="flex items-center gap-2">
+        <ColorPicker.EyeDropper />
+        <div className="w-full">
+          <ColorPicker.HueSlider />
+          <ColorPicker.AlphaSlider />
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <ColorPicker.FormatSelect />
+        <ColorPicker.Input />
+      </div>
+    </>
+  );
+}
+
+function PickerPreview({ format, mode }: { format: string; mode: string }) {
+  const initialColor = mode === 'disabled' ? '#94a3b8' : '#3b82f6';
+  const colorFormat = format as ColorFormat;
+  const [color, setColor] = useState(() =>
+    formatColor(initialColor, colorFormat),
+  );
+
+  if (mode === 'inline') {
+    return (
+      <div className="flex flex-col gap-3">
+        <ColorPicker
+          defaultFormat={colorFormat}
+          defaultValue={initialColor}
+          inline
+          onValueChange={setColor}
+        >
+          <ColorPicker.Content className="border-border rounded-md border">
+            <PickerControls />
+          </ColorPicker.Content>
+        </ColorPicker>
+      </div>
+    );
+  }
+
+  return (
+    <ColorPicker
+      defaultFormat={colorFormat}
+      defaultValue={initialColor}
+      disabled={mode === 'disabled'}
+      onValueChange={setColor}
+    >
+      <ColorPicker.Trigger
+        className="w-52 justify-start gap-2"
+        variant="outline"
+      >
+        <ColorPicker.Swatch className="size-5" />
+        <span className="font-mono">{color}</span>
+      </ColorPicker.Trigger>
+      <ColorPicker.Content>
+        <PickerControls />
+      </ColorPicker.Content>
+    </ColorPicker>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-7xl" title="ColorPicker">
+      <Story.Section title="Presentation and formats">
+        <Story.Matrix
+          Cell={ColorPickerMatrixCell}
+          cellClassName="min-h-32"
+          cellWidth="minmax(14rem, 1fr)"
+          columns={FORMAT_COLUMNS}
+          rows={MODE_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,45 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ColorPicker } from './ColorPicker';
+
+describe('ColorPicker', () => {
+  it('renders the trigger as a styled button that opens the content', async () => {
+    render(
+      <ColorPicker defaultValue="#ff0000">
+        <ColorPicker.Trigger variant="outline">
+          <ColorPicker.Swatch />
+          Pick a color
+        </ColorPicker.Trigger>
+        <ColorPicker.Content>
+          <ColorPicker.Area />
+        </ColorPicker.Content>
+      </ColorPicker>,
+    );
+
+    const trigger = screen.getByRole('button', { name: /Pick a color/ });
+    expect(trigger).toHaveAttribute('data-slot', 'color-picker-trigger');
+    expect(
+      screen.getByRole('img', { name: /Current color/ }),
+    ).toBeInTheDocument();
+
+    fireEvent.click(trigger);
+
+    expect(
+      await screen.findByText((_, element) =>
+        Boolean(element?.matches('[data-slot="color-picker-area"]')),
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders inline parts on the element passed to render', () => {
+    render(
+      <ColorPicker defaultValue="#00ff00" inline>
+        <ColorPicker.Swatch render={<span />} />
+      </ColorPicker>,
+    );
+
+    const swatch = screen.getByRole('img', { name: /Current color/ });
+    expect(swatch.tagName).toBe('SPAN');
+  });
+});

package/src/components/form/ColorPicker.tsx

@@ -0,0 +1,55 @@
+import type { ComponentProps } from 'react';
+
+import {
+  ColorPickerAlphaSlider,
+  ColorPickerArea,
+  ColorPickerContent,
+  ColorPickerEyeDropper,
+  ColorPickerFormatSelect,
+  ColorPickerHueSlider,
+  ColorPickerInput,
+  type ColorPickerProps,
+  ColorPicker as ColorPickerRoot,
+  ColorPickerSwatch,
+  ColorPickerTrigger,
+} from './ColorPickerPrimitive';
+
+type ColorPickerAlphaSliderProps = ComponentProps<
+  typeof ColorPickerAlphaSlider
+>;
+type ColorPickerAreaProps = ComponentProps<typeof ColorPickerArea>;
+type ColorPickerContentProps = ComponentProps<typeof ColorPickerContent>;
+type ColorPickerEyeDropperProps = ComponentProps<typeof ColorPickerEyeDropper>;
+type ColorPickerFormatSelectProps = ComponentProps<
+  typeof ColorPickerFormatSelect
+>;
+type ColorPickerHueSliderProps = ComponentProps<typeof ColorPickerHueSlider>;
+type ColorPickerInputProps = ComponentProps<typeof ColorPickerInput>;
+type ColorPickerSwatchProps = ComponentProps<typeof ColorPickerSwatch>;
+type ColorPickerTriggerProps = ComponentProps<typeof ColorPickerTrigger>;
+
+const ColorPicker = Object.assign(ColorPickerRoot, {
+  AlphaSlider: ColorPickerAlphaSlider,
+  Area: ColorPickerArea,
+  Content: ColorPickerContent,
+  EyeDropper: ColorPickerEyeDropper,
+  FormatSelect: ColorPickerFormatSelect,
+  HueSlider: ColorPickerHueSlider,
+  Input: ColorPickerInput,
+  Swatch: ColorPickerSwatch,
+  Trigger: ColorPickerTrigger,
+});
+
+export { ColorPicker };
+export type {
+  ColorPickerAlphaSliderProps,
+  ColorPickerAreaProps,
+  ColorPickerContentProps,
+  ColorPickerEyeDropperProps,
+  ColorPickerFormatSelectProps,
+  ColorPickerHueSliderProps,
+  ColorPickerInputProps,
+  ColorPickerProps,
+  ColorPickerSwatchProps,
+  ColorPickerTriggerProps,
+};

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

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ColorPicker } from './ColorPickerPrimitive';
+
+describe('ColorPicker hook stability', () => {
+  it('does not change hook count when the dir prop is added or removed', () => {
+    const { rerender } = render(<ColorPicker dir="ltr" />);
+    // Re-rendering the same instance without `dir` must not throw
+    // "Rendered more/fewer hooks than during the previous render".
+    expect(() => rerender(<ColorPicker />)).not.toThrow();
+    expect(() => rerender(<ColorPicker dir="rtl" />)).not.toThrow();
+  });
+});