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

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Switch, type SwitchProps } from './Switch';
+
+const meta = {
+  component: Switch,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/Switch',
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type StoryDefinition = StoryObj;
+
+const STATE_COLUMNS: {
+  key: string;
+  label: string;
+  props: Partial<SwitchProps>;
+}[] = [
+  { key: 'unchecked', label: 'Unchecked', props: {} },
+  { key: 'checked', label: 'Checked', props: { defaultChecked: true } },
+  {
+    key: 'focus',
+    label: 'Focus',
+    props: { className: 'pseudo-focus-visible', defaultChecked: true },
+  },
+  {
+    key: 'invalid',
+    label: 'Invalid',
+    props: { 'aria-invalid': true, defaultChecked: true },
+  },
+  { key: 'disabled', label: 'Disabled', props: { disabled: true } },
+];
+
+const STATE_PROPS = Object.fromEntries(
+  STATE_COLUMNS.map((state) => [state.key, state.props]),
+) as Record<string, Partial<SwitchProps>>;
+
+function SwitchStateCell({ column }: ComponentMatrixCellProps) {
+  return <Switch label={column.label} {...STATE_PROPS[column.key]} />;
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Switch">
+      <Story.Section title="States">
+        <Story.Matrix
+          Cell={SwitchStateCell}
+          cellWidth="9rem"
+          columns={STATE_COLUMNS}
+          rows={[{ key: 'switch', label: 'Switch' }]}
+        />
+      </Story.Section>
+
+      <Story.Section title="Label">
+        <Switch defaultChecked id="story-switch-label" label="Notifications" />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Switch } from './Switch';
+
+describe('Switch', () => {
+  it('renders a switch wired to its label', () => {
+    render(<Switch label="Notifications" />);
+    expect(
+      screen.getByRole('switch', { name: 'Notifications' }),
+    ).toBeInTheDocument();
+  });
+
+  it('applies classNames to the field, thumb, and label slots', () => {
+    const { container } = render(
+      <Switch
+        classNames={{ field: 'field-x', label: 'label-x', thumb: 'thumb-x' }}
+        label="Notifications"
+      />,
+    );
+    expect(container.querySelector('[data-slot="switch-field"]')).toHaveClass(
+      'field-x',
+    );
+    expect(container.querySelector('[data-slot="switch-thumb"]')).toHaveClass(
+      'thumb-x',
+    );
+    expect(screen.getByText('Notifications')).toHaveClass('label-x');
+  });
+});

package/src/components/form/Switch.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import * as React from 'react';
+
+import { cn, type SlotClassNames } from '@/lib/utils';
+
+type SwitchControlProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  classNames?: SlotClassNames<'thumb'>;
+};
+type SwitchLabelContent = Exclude<React.ReactNode, boolean | null | undefined>;
+type SwitchLabelProps = Omit<React.ComponentProps<'label'>, 'htmlFor'> & {
+  htmlFor: string;
+};
+type SwitchProps = Omit<SwitchControlProps, 'classNames'> & {
+  classNames?: SlotClassNames<'field' | 'label' | 'thumb'>;
+  label: SwitchLabelContent;
+};
+
+function SwitchControl({
+  className,
+  classNames,
+  ...props
+}: SwitchControlProps) {
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        'focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px transition-[background-color,box-shadow] duration-200 outline-none [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:cursor-not-allowed data-disabled:opacity-64',
+        className,
+      )}
+      data-slot="switch"
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'bg-background pointer-events-none block aspect-square h-full origin-left rounded-(--thumb-size) shadow-sm/5 ring-0 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]',
+          classNames?.thumb,
+        )}
+        data-slot="switch-thumb"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+function SwitchLabel({ className, htmlFor, ...props }: SwitchLabelProps) {
+  return (
+    <label
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      data-slot="switch-label"
+      htmlFor={htmlFor}
+      {...props}
+    />
+  );
+}
+
+function SwitchRoot({ classNames, id, label, ...props }: SwitchProps) {
+  const generatedId = React.useId();
+  const switchId = id ?? generatedId;
+
+  return (
+    <div
+      className={cn('flex items-center gap-2', classNames?.field)}
+      data-slot="switch-field"
+    >
+      <SwitchControl classNames={classNames} id={switchId} {...props} />
+      <SwitchLabel className={classNames?.label} htmlFor={switchId}>
+        {label}
+      </SwitchLabel>
+    </div>
+  );
+}
+
+const Switch = Object.assign(SwitchRoot, {
+  Label: SwitchLabel,
+});
+
+export { Switch, SwitchControl, SwitchLabel };
+export type { SwitchControlProps, SwitchLabelProps, SwitchProps };

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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Textarea, type TextareaProps } from './Textarea';
+
+const meta = {
+  component: Textarea,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/Textarea',
+} satisfies Meta<typeof Textarea>;
+
+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 SIZE_ROWS = [
+  { key: 'sm', label: 'Small' },
+  { key: 'md', label: 'Medium' },
+  { key: 'lg', label: 'Large' },
+];
+
+function TextareaMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const isInvalid = column.key === 'invalid';
+  const textarea = (
+    <Textarea
+      aria-invalid={isInvalid || undefined}
+      aria-label={`${row.label} ${column.label}`}
+      defaultValue={
+        column.key === 'filled' || column.key === 'focus'
+          ? 'Pickle UI grows this field with its content, line after line.'
+          : undefined
+      }
+      disabled={column.key === 'disabled'}
+      placeholder={isInvalid ? 'Tell us a bit more' : 'Write a message'}
+      size={row.key as NonNullable<TextareaProps['size']>}
+    />
+  );
+
+  // 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 <textarea>.
+  return column.key === 'focus' ? (
+    <div className="pseudo-focus-visible-all w-full">{textarea}</div>
+  ) : (
+    textarea
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Textarea">
+      <Story.Section title="Sizes and states">
+        <Story.Matrix
+          Cell={TextareaMatrixCell}
+          cellClassName="justify-stretch"
+          cellWidth="16rem"
+          columns={STATE_COLUMNS}
+          rows={SIZE_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Textarea } from './Textarea';
+
+describe('Textarea', () => {
+  it('styles the control wrapper with className and the textarea with classNames.textarea', () => {
+    const { container } = render(
+      <Textarea
+        aria-label="Message"
+        className="control-x"
+        classNames={{ textarea: 'textarea-x' }}
+      />,
+    );
+
+    expect(
+      container.querySelector('[data-slot="textarea-control"]'),
+    ).toHaveClass('control-x');
+    expect(screen.getByRole('textbox', { name: 'Message' })).toHaveClass(
+      'textarea-x',
+    );
+  });
+
+  it('forwards native textarea props', () => {
+    render(<Textarea aria-label="Bio" defaultValue="Hello" rows={6} />);
+
+    const textarea = screen.getByRole('textbox', { name: 'Bio' });
+    expect(textarea).toHaveValue('Hello');
+    expect(textarea).toHaveAttribute('rows', '6');
+  });
+});

package/src/components/form/Textarea.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import { cn, type SlotClassNames } from '@/lib/utils';
+
+type TextareaProps = React.ComponentProps<'textarea'> & {
+  /** Class overrides for the inner `textarea`; `className` styles the control wrapper. */
+  classNames?: SlotClassNames<'textarea'>;
+  size?: 'lg' | 'md' | 'sm';
+};
+
+/**
+ * Grows with its content (`field-sizing: content`) from three lines. Set
+ * `rows` or a height class on `classNames.textarea` to change the minimum.
+ * The control takes the width of its container, never the width of its text.
+ */
+function Textarea({
+  className,
+  classNames,
+  size = 'md',
+  ...props
+}: TextareaProps) {
+  return (
+    <span
+      className={cn(
+        '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 dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow [contain:inline-size] 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,
+      )}
+      data-size={size}
+      data-slot="textarea-control"
+    >
+      <textarea
+        className={cn(
+          'placeholder:text-muted-foreground/72 field-sizing-content min-h-17.5 w-full resize-none rounded-[inherit] px-[calc(--spacing(3)-1px)] py-2 outline-none',
+          size === 'sm' && 'min-h-16 px-[calc(--spacing(2.5)-1px)]',
+          size === 'lg' && 'min-h-18',
+          classNames?.textarea,
+        )}
+        data-slot="textarea"
+        {...props}
+      />
+    </span>
+  );
+}
+
+export { Textarea };
+export type { TextareaProps };

package/src/entries/alert-dialog.ts

@@ -0,0 +1,11 @@
+export { AlertDialog } from '../components/AlertDialog';
+export type {
+  AlertDialogCloseProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+} from '../components/AlertDialog';

package/src/entries/alert.ts

@@ -0,0 +1,8 @@
+export { Alert } from '../components/Alert';
+export type {
+  AlertActionProps,
+  AlertDescriptionProps,
+  AlertIconProps,
+  AlertProps,
+  AlertTitleProps,
+} from '../components/Alert';

package/src/entries/avatar.ts

@@ -0,0 +1,7 @@
+export { Avatar } from '../components/Avatar';
+export type {
+  AvatarFallbackProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  AvatarProps,
+} from '../components/Avatar';

package/src/entries/badge.ts

@@ -0,0 +1,2 @@
+export { Badge, badgeVariants } from '../components/Badge';
+export type { BadgeProps } from '../components/Badge';

package/src/entries/button.ts

@@ -0,0 +1,2 @@
+export { Button, buttonVariants } from '../components/Button';
+export type { ButtonProps } from '../components/Button';

package/src/entries/card.ts

@@ -0,0 +1,10 @@
+export { Card } from '../components/Card';
+export type {
+  CardActionProps,
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+} from '../components/Card';

package/src/entries/checkbox.ts

@@ -0,0 +1,5 @@
+export { Checkbox } from '../components/form/Checkbox';
+export type {
+  CheckboxLabelProps,
+  CheckboxProps,
+} from '../components/form/Checkbox';

package/src/entries/cn.ts

@@ -0,0 +1,2 @@
+export { cn } from '../lib/utils';
+export type { SlotClassNames } from '../lib/utils';

package/src/entries/color-picker.ts

@@ -0,0 +1,13 @@
+export { ColorPicker } from '../components/form/ColorPicker';
+export type {
+  ColorPickerAlphaSliderProps,
+  ColorPickerAreaProps,
+  ColorPickerContentProps,
+  ColorPickerEyeDropperProps,
+  ColorPickerFormatSelectProps,
+  ColorPickerHueSliderProps,
+  ColorPickerInputProps,
+  ColorPickerProps,
+  ColorPickerSwatchProps,
+  ColorPickerTriggerProps,
+} from '../components/form/ColorPicker';

package/src/entries/combobox.ts

@@ -0,0 +1,20 @@
+export { Combobox } from '../components/form/Combobox';
+export type {
+  ComboboxChipProps,
+  ComboboxChipsInputProps,
+  ComboboxChipsProps,
+  ComboboxClearProps,
+  ComboboxCollectionProps,
+  ComboboxContentProps,
+  ComboboxEmptyProps,
+  ComboboxGroupLabelProps,
+  ComboboxGroupProps,
+  ComboboxInputProps,
+  ComboboxItemProps,
+  ComboboxListProps,
+  ComboboxProps,
+  ComboboxSeparatorProps,
+  ComboboxStatusProps,
+  ComboboxTriggerProps,
+  ComboboxValueProps,
+} from '../components/form/Combobox';

package/src/entries/dialog.ts

@@ -0,0 +1,11 @@
+export { Dialog } from '../components/Dialog';
+export type {
+  DialogCloseProps,
+  DialogContentProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+} from '../components/Dialog';

package/src/entries/entries.test.ts

@@ -0,0 +1,65 @@
+import { readdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const entriesDir = dirname(fileURLToPath(import.meta.url));
+const repoRoot = join(entriesDir, '../..');
+const distEntriesDir = join(repoRoot, 'dist/entries');
+
+const entryNames = readdirSync(entriesDir)
+  .filter((file) => file.endsWith('.ts') && !file.endsWith('.test.ts'))
+  .map((file) => file.replace(/\.ts$/, ''))
+  .sort();
+
+function readDistEntryNames() {
+  try {
+    return readdirSync(distEntriesDir)
+      .filter((file) => file.endsWith('.js'))
+      .map((file) => file.replace(/\.js$/, ''))
+      .sort();
+  } catch {
+    return [];
+  }
+}
+
+describe('component entry points', () => {
+  it.each(entryNames)('imports %s without throwing', async (name) => {
+    const moduleUrl = pathToFileURL(join(entriesDir, `${name}.ts`)).href;
+    const module = await import(moduleUrl);
+
+    expect(Object.keys(module).length).toBeGreaterThan(0);
+  });
+
+  it('ships a compiled file for each entry after build', () => {
+    const distEntries = readDistEntryNames();
+
+    if (distEntries.length === 0) {
+      expect(
+        entryNames.length,
+        'run pnpm run build before checking dist entry points',
+      ).toBeGreaterThan(0);
+      return;
+    }
+
+    expect(distEntries).toEqual(entryNames);
+  });
+
+  it('imports compiled package subpaths after build', async () => {
+    const distEntries = readDistEntryNames();
+
+    if (distEntries.length === 0) {
+      expect(
+        entryNames.length,
+        'run pnpm run build before checking package subpath imports',
+      ).toBeGreaterThan(0);
+      return;
+    }
+
+    for (const name of distEntries) {
+      const module = await import(`@pickle-ui/react/${name}`);
+
+      expect(Object.keys(module).length).toBeGreaterThan(0);
+    }
+  });
+});

package/src/entries/flex.ts

@@ -0,0 +1,2 @@
+export { Flex } from '../components/Flex';
+export type { FlexProps } from '../components/Flex';

package/src/entries/form.ts

@@ -0,0 +1,16 @@
+export { Form } from '../components/form/Form';
+export type {
+  FormCheckboxProps,
+  FormComboboxProps,
+  FormDescriptionProps,
+  FormErrorProps,
+  FormFieldProps,
+  FormInputGroupProps,
+  FormInputProps,
+  FormLabelProps,
+  FormProps,
+  FormRadioGroupProps,
+  FormSelectProps,
+  FormSwitchProps,
+  FormTextareaProps,
+} from '../components/form/Form';

package/src/entries/grid.ts

@@ -0,0 +1,2 @@
+export { Grid } from '../components/Grid';
+export type { GridProps } from '../components/Grid';

package/src/entries/group.ts

@@ -0,0 +1,6 @@
+export { Group } from '../components/Group';
+export type {
+  GroupProps,
+  GroupSeparatorProps,
+  GroupTextProps,
+} from '../components/Group';

package/src/entries/input-group.ts

@@ -0,0 +1,8 @@
+export { InputGroup } from '../components/form/InputGroup';
+export type {
+  InputGroupAddonProps,
+  InputGroupButtonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+  InputGroupTextProps,
+} from '../components/form/InputGroup';

package/src/entries/input.ts

@@ -0,0 +1,2 @@
+export { Input } from '../components/form/Input';
+export type { InputProps } from '../components/form/Input';

package/src/entries/menu.ts

@@ -0,0 +1,17 @@
+export { Menu } from '../components/Menu';
+export type {
+  MenuCheckboxItemProps,
+  MenuContentProps,
+  MenuGroupLabelProps,
+  MenuGroupProps,
+  MenuItemProps,
+  MenuProps,
+  MenuRadioGroupProps,
+  MenuRadioItemProps,
+  MenuSeparatorProps,
+  MenuShortcutProps,
+  MenuSubContentProps,
+  MenuSubProps,
+  MenuSubTriggerProps,
+  MenuTriggerProps,
+} from '../components/Menu';

package/src/entries/popover.ts

@@ -0,0 +1,10 @@
+export { Popover } from '../components/Popover';
+export type {
+  PopoverAnchorProps,
+  PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverHeaderProps,
+  PopoverProps,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+} from '../components/Popover';

package/src/entries/progress.ts

@@ -0,0 +1,8 @@
+export { Progress } from '../components/Progress';
+export type {
+  ProgressIndicatorProps,
+  ProgressLabelProps,
+  ProgressProps,
+  ProgressTrackProps,
+  ProgressValueProps,
+} from '../components/Progress';

package/src/entries/radio-group.ts

@@ -0,0 +1,5 @@
+export { RadioGroup } from '../components/form/RadioGroup';
+export type {
+  RadioGroupItemProps,
+  RadioGroupProps,
+} from '../components/form/RadioGroup';

package/src/entries/scroll-area.ts

@@ -0,0 +1,10 @@
+export { ScrollArea } from '../components/ScrollArea';
+export type {
+  ScrollAreaContentProps,
+  ScrollAreaCornerProps,
+  ScrollAreaProps,
+  ScrollAreaRootProps,
+  ScrollAreaScrollbarProps,
+  ScrollAreaThumbProps,
+  ScrollAreaViewportProps,
+} from '../components/ScrollArea';

package/src/entries/select.ts

@@ -0,0 +1,12 @@
+export { Select } from '../components/form/Select';
+export type {
+  SelectContentProps,
+  SelectGroupLabelProps,
+  SelectGroupProps,
+  SelectItemProps,
+  SelectLabelProps,
+  SelectProps,
+  SelectSeparatorProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from '../components/form/Select';

package/src/entries/separator.ts

@@ -0,0 +1,2 @@
+export { Separator } from '../components/Separator';
+export type { SeparatorProps } from '../components/Separator';

package/src/entries/sidebar.ts

@@ -0,0 +1,13 @@
+export { Sidebar } from '../components/Sidebar';
+export type {
+  SidebarContentProps,
+  SidebarFooterProps,
+  SidebarGroupLabelProps,
+  SidebarGroupProps,
+  SidebarHeaderProps,
+  SidebarMenuItemProps,
+  SidebarMenuLinkProps,
+  SidebarMenuListProps,
+  SidebarMenuProps,
+  SidebarProps,
+} from '../components/Sidebar';

package/src/entries/slider.ts

@@ -0,0 +1,7 @@
+export { Slider } from '../components/form/Slider';
+export type {
+  SliderLabelProps,
+  SliderMarksProps,
+  SliderProps,
+  SliderValueProps,
+} from '../components/form/Slider';

package/src/entries/spinner.ts

@@ -0,0 +1,2 @@
+export { Spinner } from '../components/Spinner';
+export type { SpinnerProps } from '../components/Spinner';

package/src/entries/switch.ts

@@ -0,0 +1,2 @@
+export { Switch } from '../components/form/Switch';
+export type { SwitchLabelProps, SwitchProps } from '../components/form/Switch';