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

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

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Button } from '../Button';
+import { XStack } from '../XStack';
+import { Input } from './Input';
+
+const meta = {
+  component: Input,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/Input',
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const STATE_COLUMNS = [
+  { key: 'empty', label: 'Empty' },
+  { key: 'filled', label: 'Filled' },
+  { key: 'focus', label: 'Focus' },
+  { key: 'disabled', label: 'Disabled' },
+  { key: 'invalid', label: 'Invalid' },
+];
+
+const TYPE_ROWS = [
+  { description: 'General text input', key: 'text', label: 'Text' },
+  { description: 'Keyboard hint for email', key: 'email', label: 'Email' },
+  { description: 'Masked text entry', key: 'password', label: 'Password' },
+];
+
+function InputMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const isInvalid = column.key === 'invalid';
+  const input = (
+    <Input
+      aria-invalid={isInvalid || undefined}
+      aria-label={`${row.label} ${column.label}`}
+      defaultValue={
+        column.key === 'filled' || column.key === 'focus'
+          ? row.key === 'email'
+            ? 'hello@pickle.dev'
+            : 'Pickle UI'
+          : undefined
+      }
+      disabled={column.key === 'disabled'}
+      placeholder={isInvalid ? 'Check this value' : row.label}
+      type={row.key}
+    />
+  );
+
+  // The focus ring is styled on the wrapper via :has(:focus-visible), so the
+  // pseudo-state class goes on an ancestor to reach the inner <input>.
+  return column.key === 'focus' ? (
+    <div className="pseudo-focus-visible-all w-full">{input}</div>
+  ) : (
+    input
+  );
+}
+
+const SIZE_COLUMNS = [
+  { key: 'sm', label: 'Small' },
+  { key: 'md', label: 'Medium' },
+  { key: 'lg', label: 'Large' },
+];
+
+function InputSizeCell({ column }: ComponentMatrixCellProps) {
+  const size = column.key as 'lg' | 'md' | 'sm';
+
+  return (
+    <XStack className="w-full gap-2">
+      <Input
+        aria-label={`${column.label} email`}
+        placeholder="Email"
+        size={size}
+      />
+      <Button size={size} variant="outline">
+        Subscribe
+      </Button>
+    </XStack>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Input">
+      <Story.Section title="Types and states">
+        <Story.Matrix
+          Cell={InputMatrixCell}
+          cellClassName="justify-stretch"
+          cellWidth="16rem"
+          columns={STATE_COLUMNS}
+          rows={TYPE_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Sizes">
+        <Story.Matrix
+          Cell={InputSizeCell}
+          cellClassName="justify-stretch"
+          cellWidth="20rem"
+          columns={SIZE_COLUMNS}
+          rows={[
+            {
+              description: 'Matches the Button of the same size',
+              key: 'with-button',
+              label: 'With button',
+            },
+          ]}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Button } from '../Button';
+import { Input } from './Input';
+
+const heightClasses = (element: Element) =>
+  [...element.classList].filter((name) => /^(sm:)?h-/.test(name)).sort();
+
+describe('Input', () => {
+  it.each(['sm', 'md', 'lg'] as const)(
+    'matches the Button height at size %s',
+    (size) => {
+      const { container } = render(
+        <>
+          <Input aria-label="Email" size={size} />
+          <Button size={size}>Submit</Button>
+        </>,
+      );
+      const control = container.querySelector('[data-slot="input-control"]')!;
+      const unstyled = render(
+        <Input aria-label="Name" size={size} unstyled />,
+      ).getByRole('textbox', { name: 'Name' });
+      const button = screen.getByRole('button', { name: 'Submit' });
+
+      expect(heightClasses(control)).toEqual(heightClasses(button));
+      expect(heightClasses(unstyled)).toEqual(heightClasses(button));
+    },
+  );
+
+  it('styles the control wrapper with className and the input with classNames.input', () => {
+    const { container } = render(
+      <Input
+        aria-label="Email"
+        className="control-x"
+        classNames={{ input: 'input-x' }}
+      />,
+    );
+    expect(container.querySelector('[data-slot="input-control"]')).toHaveClass(
+      'control-x',
+    );
+    expect(screen.getByRole('textbox', { name: 'Email' })).toHaveClass(
+      'input-x',
+    );
+  });
+
+  it('exposes the resolved size on the control wrapper', () => {
+    const { container } = render(
+      <>
+        <Input aria-label="Default" />
+        <Input aria-label="Small" size="sm" />
+        <Input aria-label="Numeric" size={20} />
+      </>,
+    );
+
+    expect(
+      [...container.querySelectorAll('[data-slot="input-control"]')].map(
+        (control) => control.getAttribute('data-size'),
+      ),
+    ).toEqual(['md', 'sm', 'md']);
+  });
+});

package/src/components/form/Input.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import * as React from 'react';
+
+import { cn, type SlotClassNames } from '@/lib/utils';
+
+// Matches the `Button` height for the same size, so they line up side by side.
+const inputControlHeights = {
+  lg: 'h-9',
+  md: 'h-8',
+  sm: 'h-7',
+} as const;
+
+type InputProps = Omit<
+  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,
+  'size'
+> & {
+  /** Class overrides for the inner `input`; `className` styles the control wrapper. */
+  classNames?: SlotClassNames<'input'>;
+  nativeInput?: boolean;
+  size?: 'lg' | 'md' | 'sm' | number;
+  unstyled?: boolean;
+};
+
+function Input({
+  className,
+  classNames,
+  nativeInput = false,
+  size = 'md',
+  style,
+  unstyled = false,
+  ...props
+}: InputProps) {
+  const resolvedSize = typeof size === 'number' ? 'md' : size;
+  const inputClassName = cn(
+    unstyled
+      ? cn(
+          'w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-none outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72',
+          inputControlHeights[resolvedSize],
+          resolvedSize === 'sm' && 'px-[calc(--spacing(2.5)-1px)]',
+          resolvedSize === 'lg' && 'px-[calc(--spacing(3.5)-1px)]',
+        )
+      : cn(
+          'h-full min-h-0 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-none outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72',
+          resolvedSize === 'sm' && 'px-[calc(--spacing(2.5)-1px)]',
+          resolvedSize === 'lg' && 'px-[calc(--spacing(3.5)-1px)]',
+        ),
+    props.type === 'search' &&
+      '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none',
+    props.type === 'file' &&
+      'text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm',
+    classNames?.input,
+  );
+
+  return (
+    <span
+      className={
+        cn(
+          !unstyled &&
+            cn(
+              inputControlHeights[resolvedSize],
+              'border-input bg-background text-foreground ring-ring/24 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]',
+            ),
+          className,
+        ) || undefined
+      }
+      data-size={resolvedSize}
+      data-slot="input-control"
+    >
+      {nativeInput ? (
+        <input
+          className={inputClassName}
+          data-slot="input"
+          size={typeof size === 'number' ? size : undefined}
+          style={typeof style === 'function' ? undefined : style}
+          {...props}
+        />
+      ) : (
+        <InputPrimitive
+          className={inputClassName}
+          data-slot="input"
+          size={typeof size === 'number' ? size : undefined}
+          style={style}
+          {...props}
+        />
+      )}
+    </span>
+  );
+}
+
+export { Input, InputPrimitive };
+export type { InputProps };

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

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { IconEye, IconEyeOff, IconSearch } from '@tabler/icons-react';
+import * as React from 'react';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Button } from '../Button';
+import { InputGroup } from './InputGroup';
+
+const meta = {
+  component: InputGroup,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/InputGroup',
+} satisfies Meta<typeof InputGroup>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const STATE_COLUMNS = [
+  { key: 'default', label: 'Default' },
+  { key: 'disabled', label: 'Disabled' },
+  { key: 'invalid', label: 'Invalid' },
+];
+
+const PATTERN_ROWS = [
+  {
+    description: 'Leading icon addon',
+    key: 'search',
+    label: 'Search',
+  },
+  {
+    description: 'Trailing visibility toggle',
+    key: 'password',
+    label: 'Password',
+  },
+  {
+    description: 'Leading text addon',
+    key: 'currency',
+    label: 'Currency',
+  },
+  {
+    description: 'Trailing text addon',
+    key: 'domain',
+    label: 'Domain',
+  },
+];
+
+function InputGroupMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const inputProps = {
+    'aria-invalid': column.key === 'invalid' || undefined,
+    disabled: column.key === 'disabled',
+  };
+
+  if (row.key === 'search') {
+    return (
+      <InputGroup className="w-full max-w-64">
+        <InputGroup.Addon>
+          <IconSearch aria-hidden size={16} />
+        </InputGroup.Addon>
+        <InputGroup.Input
+          aria-label="Search"
+          placeholder="Search…"
+          type="search"
+          {...inputProps}
+        />
+      </InputGroup>
+    );
+  }
+
+  if (row.key === 'password') {
+    return (
+      <PasswordInputGroupCell
+        disabled={column.key === 'disabled'}
+        invalid={column.key === 'invalid'}
+      />
+    );
+  }
+
+  if (row.key === 'currency') {
+    return (
+      <InputGroup className="w-full max-w-64">
+        <InputGroup.Addon>$</InputGroup.Addon>
+        <InputGroup.Input
+          aria-label="Amount in USD"
+          defaultValue="1200"
+          {...inputProps}
+        />
+      </InputGroup>
+    );
+  }
+
+  if (row.key === 'domain') {
+    return (
+      <InputGroup className="w-full max-w-64">
+        <InputGroup.Input
+          aria-label="Pickle subdomain ending in .dev"
+          defaultValue="pickle"
+          {...inputProps}
+        />
+        <InputGroup.Addon align="inline-end">.dev</InputGroup.Addon>
+      </InputGroup>
+    );
+  }
+
+  return null;
+}
+
+function PasswordInputGroupCell({
+  disabled,
+  invalid,
+}: {
+  disabled?: boolean;
+  invalid?: boolean;
+}) {
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  return (
+    <InputGroup className="w-full max-w-64">
+      <InputGroup.Input
+        aria-invalid={invalid || undefined}
+        aria-label="Password with toggle visibility"
+        disabled={disabled}
+        placeholder="Enter your password"
+        type={showPassword ? 'text' : 'password'}
+      />
+      <InputGroup.Addon align="inline-end">
+        <Button
+          aria-label={showPassword ? 'Hide password' : 'Show password'}
+          disabled={disabled}
+          onClick={() => setShowPassword((visible) => !visible)}
+          size="icon-xs"
+          type="button"
+          variant="ghost"
+        >
+          {showPassword ? (
+            <IconEyeOff aria-hidden size={16} />
+          ) : (
+            <IconEye aria-hidden size={16} />
+          )}
+        </Button>
+      </InputGroup.Addon>
+    </InputGroup>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="InputGroup">
+      <Story.Section title="Patterns and states">
+        <Story.Matrix
+          Cell={InputGroupMatrixCell}
+          cellClassName="justify-stretch"
+          cellWidth="16rem"
+          columns={STATE_COLUMNS}
+          rows={PATTERN_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/form/InputGroup.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Button, type ButtonProps } from '../Button';
+import { Input, type InputProps } from './Input';
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
+  {
+    defaultVariants: {
+      align: 'inline-start',
+    },
+    variants: {
+      align: {
+        'block-end':
+          'order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]',
+        'block-start':
+          'order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]',
+        'inline-end':
+          'order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]',
+        'inline-start':
+          'order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]',
+      },
+    },
+  },
+);
+
+type InputGroupAddonProps = React.ComponentProps<'div'> &
+  VariantProps<typeof inputGroupAddonVariants>;
+
+type InputGroupButtonProps = ButtonProps &
+  VariantProps<typeof inputGroupAddonVariants>;
+
+type InputGroupInputProps = InputProps;
+
+type InputGroupProps = React.ComponentProps<'div'>;
+
+type InputGroupTextProps = React.ComponentProps<'span'>;
+
+function InputGroupAddon({
+  align = 'inline-start',
+  className,
+  ...props
+}: InputGroupAddonProps) {
+  return (
+    // react-doctor-disable-next-line react-doctor/no-static-element-interactions -- mousedown delegates focus to the grouped input without making the addon itself a separate control
+    <div
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      data-align={align}
+      data-slot="input-group-addon"
+      onMouseDown={(event) => {
+        const target = event.target as HTMLElement;
+        const isInteractive = target.closest(
+          "button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
+        );
+
+        if (isInteractive) {
+          return;
+        }
+
+        event.preventDefault();
+
+        const parent = event.currentTarget.parentElement;
+        const input = parent?.querySelector<
+          HTMLInputElement | HTMLTextAreaElement
+        >('input, textarea');
+
+        if (input && !parent?.querySelector('input:focus, textarea:focus')) {
+          input.focus();
+        }
+      }}
+      {...props}
+    />
+  );
+}
+
+function InputGroupButton({
+  align = 'inline-end',
+  className,
+  size = 'icon-xs',
+  variant = 'ghost',
+  ...props
+}: InputGroupButtonProps) {
+  return (
+    <InputGroupAddon align={align} className={className}>
+      <Button size={size} variant={variant} {...props} />
+    </InputGroupAddon>
+  );
+}
+
+function InputGroupInput({ className, ...props }: InputGroupInputProps) {
+  return <Input className={className} unstyled {...props} />;
+}
+
+function InputGroupRoot({ className, ...props }: InputGroupProps) {
+  return (
+    <div
+      className={cn(
+        // Divide adjacent inputs, like Group.Separator does between Inputs.
+        '[&>[data-slot=input-control]~[data-slot=input-control]>[data-slot=input]]:border-input [&>[data-slot=input-control]~[data-slot=input-control]>[data-slot=input]]:border-s',
+        'border-input bg-background text-foreground ring-ring/24 has-[input:focus-visible]:has-[input[aria-invalid]]:border-destructive/64 has-[input:focus-visible]:has-[input[aria-invalid]]:ring-destructive/16 has-[input[aria-invalid]]:border-destructive/36 has-[input:focus-visible]:border-ring dark:bg-input/32 dark:has-[input[aria-invalid]]:ring-destructive/24 relative inline-flex h-8 w-full min-w-0 items-center rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled]:not-has-[input:focus-visible]:not-has-[input[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:disabled]:opacity-64 has-[input:disabled,input:focus-visible,input[aria-invalid]]:shadow-none has-[input:focus-visible]:ring-[3px] sm:text-sm dark:not-has-[input:disabled]:not-has-[input:focus-visible]:not-has-[input[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 *:[[data-slot=input-control]]:contents *:[[data-slot=input-control]]:before:hidden has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=inline-start]:**:[input]:ps-2',
+        className,
+      )}
+      data-slot="input-group"
+      // react-doctor-disable-next-line react-doctor/prefer-tag-over-role -- role="group" is the correct ARIA pattern for composite input controls
+      role="group"
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: InputGroupTextProps) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground line-clamp-1 flex items-center gap-2 leading-none whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:-mx-0.5 in-[[data-slot=input-group]:has([data-slot=input-control])]:[&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const InputGroup = Object.assign(InputGroupRoot, {
+  Addon: InputGroupAddon,
+  Button: InputGroupButton,
+  Input: InputGroupInput,
+  Text: InputGroupText,
+});
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  inputGroupAddonVariants,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+};
+export type {
+  InputGroupAddonProps,
+  InputGroupButtonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+  InputGroupTextProps,
+};

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { RadioGroup, type RadioGroupItemProps } from './RadioGroup';
+
+const meta = {
+  component: RadioGroup,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/RadioGroup',
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type RadioSize = NonNullable<RadioGroupItemProps['size']>;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const SIZE_ROWS: {
+  key: RadioSize;
+  label: string;
+}[] = [
+  { key: 'md', label: 'Medium' },
+  { key: 'sm', label: 'Small' },
+];
+
+const STATE_COLUMNS = [
+  { key: 'unchecked', label: 'Unchecked' },
+  { key: 'checked', label: 'Checked' },
+  { key: 'disabled', label: 'Disabled' },
+];
+
+function RadioStateCell({ column, row }: ComponentMatrixCellProps) {
+  const value = column.key === 'checked' ? 'option' : undefined;
+
+  return (
+    <RadioGroup defaultValue={value}>
+      <RadioGroup.Item
+        disabled={column.key === 'disabled'}
+        label={column.label}
+        size={row.key as RadioSize}
+        value="option"
+      />
+    </RadioGroup>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="RadioGroup">
+      <Story.Section title="Sizes and states">
+        <Story.Matrix
+          Cell={RadioStateCell}
+          cellWidth="9rem"
+          columns={STATE_COLUMNS}
+          rows={SIZE_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Group">
+        <RadioGroup defaultValue="email">
+          <RadioGroup.Item label="Email" value="email" />
+          <RadioGroup.Item label="SMS" value="sms" />
+          <RadioGroup.Item disabled label="Push" value="push" />
+        </RadioGroup>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};