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

package/src/components/Button.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { IconPlus } from '@tabler/icons-react';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Button, type ButtonProps } from './Button';
+
+const meta = {
+  component: Button,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Button',
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type ButtonVariant = NonNullable<ButtonProps['variant']>;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const STATE_COLUMNS: {
+  key: string;
+  label: string;
+  props: Partial<ButtonProps>;
+}[] = [
+  { key: 'default', label: 'Default', props: {} },
+  { key: 'hover', label: 'Hover', props: { className: 'pseudo-hover' } },
+  {
+    key: 'focus',
+    label: 'Focus',
+    props: { className: 'pseudo-focus-visible' },
+  },
+  { key: 'active', label: 'Active', props: { className: 'pseudo-active' } },
+  { key: 'disabled', label: 'Disabled', props: { disabled: true } },
+  { key: 'loading', label: 'Loading', props: { loading: true } },
+];
+
+const STATE_PROPS = Object.fromEntries(
+  STATE_COLUMNS.map((state) => [state.key, state.props]),
+) as Record<string, Partial<ButtonProps>>;
+
+const VARIANT_ROWS: {
+  key: ButtonVariant;
+  label: string;
+}[] = [
+  { key: 'default', label: 'Default' },
+  { key: 'secondary', label: 'Secondary' },
+  { key: 'destructive', label: 'Destructive' },
+  { key: 'destructive-outline', label: 'Destructive outline' },
+  { key: 'outline', label: 'Outline' },
+  { key: 'ghost', label: 'Ghost' },
+  { key: 'link', label: 'Link' },
+];
+
+const SIZE_COLUMNS = [
+  { description: 'h-6', key: 'xs', label: 'Extra small' },
+  { description: 'h-7', key: 'sm', label: 'Small' },
+  { description: 'h-8', key: 'md', label: 'Medium' },
+  { description: 'h-9', key: 'lg', label: 'Large' },
+  { description: 'h-10', key: 'xl', label: 'Extra large' },
+];
+
+const CONTENT_ROWS = [
+  { key: 'text', label: 'Text' },
+  { key: 'with-icon', label: 'Icon and text' },
+  {
+    description: 'Use size="icon" with aria-label',
+    key: 'icon',
+    label: 'Icon only',
+  },
+];
+
+type ButtonSize = NonNullable<ButtonProps['size']>;
+
+function ButtonContentCell({ column, row }: ComponentMatrixCellProps) {
+  const variant = column.key as ButtonVariant;
+
+  if (row.key === 'icon') {
+    return (
+      <Button aria-label="Add" size="icon" variant={variant}>
+        <IconPlus aria-hidden="true" stroke={2} />
+      </Button>
+    );
+  }
+
+  return (
+    <Button variant={variant}>
+      {row.key === 'with-icon' ? (
+        <IconPlus aria-hidden="true" stroke={2} />
+      ) : null}
+      Add
+    </Button>
+  );
+}
+
+function ButtonSizeCell({ column, row }: ComponentMatrixCellProps) {
+  const size = column.key as ButtonSize;
+
+  if (row.key === 'icon') {
+    return (
+      <Button aria-label="Add" size="icon">
+        <IconPlus aria-hidden="true" stroke={2} />
+      </Button>
+    );
+  }
+
+  return (
+    <Button size={size}>
+      {row.key === 'with-icon' ? (
+        <IconPlus aria-hidden="true" stroke={2} />
+      ) : null}
+      Add
+    </Button>
+  );
+}
+
+function ButtonStateCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Button variant={row.key as ButtonVariant} {...STATE_PROPS[column.key]}>
+      Button
+    </Button>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Button">
+      <Story.Section title="Variants and states">
+        <Story.Matrix
+          Cell={ButtonStateCell}
+          columns={STATE_COLUMNS}
+          rows={VARIANT_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Content patterns">
+        <Story.Matrix
+          Cell={ButtonContentCell}
+          columns={[
+            { key: 'default', label: 'Default' },
+            { key: 'outline', label: 'Outline' },
+            { key: 'ghost', label: 'Ghost' },
+          ]}
+          rows={CONTENT_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Sizes">
+        <Story.Matrix
+          Cell={ButtonSizeCell}
+          columns={SIZE_COLUMNS}
+          rows={CONTENT_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Render as a link">
+        <div className="flex flex-wrap items-center gap-3">
+          {/* react-doctor-disable-next-line react-doctor/anchor-has-content -- Button renders its children inside the anchor */}
+          <Button render={<a href="#docs" />} variant="outline">
+            Documentation
+          </Button>
+          {/* react-doctor-disable-next-line react-doctor/anchor-has-content -- Button renders its children inside the anchor */}
+          <Button render={<a href="#signup" />}>Create account</Button>
+          {/* react-doctor-disable-next-line react-doctor/anchor-has-content -- Button renders its children inside the anchor */}
+          <Button render={<a href="#settings" />} size="sm" variant="ghost">
+            Settings
+          </Button>
+        </div>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Button.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders its children and defaults to type="button"', () => {
+    render(<Button>Click me</Button>);
+    const button = screen.getByRole('button', { name: 'Click me' });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'button');
+  });
+
+  it.each([
+    ['xs', 'h-6'],
+    ['sm', 'h-7'],
+    ['md', 'h-8'],
+    ['lg', 'h-9'],
+    ['xl', 'h-10'],
+  ] as const)('keeps size %s at %s on every screen width', (size, height) => {
+    render(<Button size={size}>Save</Button>);
+    const classes = [...screen.getByRole('button').classList];
+
+    expect(classes).toContain(height);
+    expect(
+      classes.filter((name) => /^sm:(h|size|min-[hw])-/.test(name)),
+    ).toEqual([]);
+  });
+
+  it('exposes its variant and size as data attributes, defaults included', () => {
+    render(
+      <>
+        <Button>Default</Button>
+        <Button size="lg" variant="outline">
+          Outline
+        </Button>
+      </>,
+    );
+
+    const defaultButton = screen.getByRole('button', { name: 'Default' });
+    expect(defaultButton).toHaveAttribute('data-variant', 'default');
+    expect(defaultButton).toHaveAttribute('data-size', 'md');
+
+    const outlineButton = screen.getByRole('button', { name: 'Outline' });
+    expect(outlineButton).toHaveAttribute('data-variant', 'outline');
+    expect(outlineButton).toHaveAttribute('data-size', 'lg');
+  });
+
+  it('omits the data attributes when variant and size are null', () => {
+    render(
+      <Button size={null} variant={null}>
+        Unstyled
+      </Button>,
+    );
+
+    const button = screen.getByRole('button', { name: 'Unstyled' });
+    expect(button).not.toHaveAttribute('data-variant');
+    expect(button).not.toHaveAttribute('data-size');
+    expect(button).not.toHaveClass('h-8');
+  });
+
+  it('shows a loading indicator when loading', () => {
+    render(<Button loading>Save</Button>);
+
+    expect(screen.getByRole('button', { name: /Save/ })).toBeDisabled();
+    expect(screen.getByRole('status', { name: 'Loading' })).toBeInTheDocument();
+  });
+
+  it('renders button styles on the element passed to render', () => {
+    render(
+      <Button
+        // react-doctor-disable-next-line react-doctor/anchor-has-content -- Button renders its children inside the anchor
+        render={<a href="/docs" />}
+        variant="outline"
+      >
+        Documentation
+      </Button>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Documentation' });
+    expect(link).toHaveAttribute('data-slot', 'button');
+    expect(link).not.toHaveAttribute('type');
+    expect(link.className).toContain('border');
+  });
+
+  it('marks a rendered element as disabled without the disabled attribute', () => {
+    render(
+      <Button
+        disabled
+        // react-doctor-disable-next-line react-doctor/anchor-has-content -- Button renders its children inside the anchor
+        render={<a href="/docs" />}
+      >
+        Documentation
+      </Button>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Documentation' });
+    expect(link).toHaveAttribute('aria-disabled', 'true');
+    expect(link).not.toHaveAttribute('disabled');
+  });
+
+  it('applies classNames to the loading indicator slot', () => {
+    const { container } = render(
+      <Button classNames={{ loadingIndicator: 'spinner-x' }} loading>
+        Save
+      </Button>,
+    );
+    expect(
+      container.querySelector('[data-slot="button-loading-indicator"]'),
+    ).toHaveClass('spinner-x');
+  });
+});

package/src/components/Button.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn, type SlotClassNames } from '@/lib/utils';
+
+import { Spinner } from './Spinner';
+
+const buttonVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-loading:select-none data-loading:text-transparent sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg]:[shape-rendering:geometricPrecision]",
+  {
+    defaultVariants: {
+      size: 'md',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        icon: 'size-8',
+        'icon-lg': 'size-9',
+        'icon-sm': 'size-7',
+        'icon-xl': "size-10 [&_svg:not([class*='size-'])]:size-4.5",
+        'icon-xs':
+          "size-6 rounded-md before:rounded-[calc(var(--radius-md)-1px)] not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 px-[calc(--spacing(3.5)-1px)]',
+        md: 'h-8 px-[calc(--spacing(3)-1px)]',
+        sm: 'h-7 gap-1.5 px-[calc(--spacing(2.5)-1px)]',
+        xl: "h-10 px-[calc(--spacing(4)-1px)] text-lg sm:text-base [&_svg:not([class*='size-'])]:size-4.5",
+        xs: "h-6 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:text-xs [&_svg:not([class*='size-'])]:size-3.5",
+      },
+      variant: {
+        default:
+          'not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 data-pressed:bg-primary/90 *:data-[slot=button-loading-indicator]:text-primary-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none',
+        destructive:
+          'not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-destructive-foreground shadow-destructive/24 shadow-xs hover:bg-destructive/90 data-pressed:bg-destructive/90 *:data-[slot=button-loading-indicator]:text-destructive-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none',
+        'destructive-outline':
+          'border-input bg-popover not-dark:bg-clip-padding text-destructive-subtle-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:border-destructive/32 hover:bg-destructive/4 data-pressed:border-destructive/32 data-pressed:bg-destructive/4 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none',
+        ghost:
+          'border-transparent text-foreground hover:bg-accent data-pressed:bg-accent *:data-[slot=button-loading-indicator]:text-foreground',
+        link: 'border-transparent text-foreground underline-offset-4 hover:underline data-pressed:underline *:data-[slot=button-loading-indicator]:text-foreground',
+        outline:
+          'border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:data-pressed:bg-input/64 dark:hover:bg-input/64 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 *:data-[slot=button-loading-indicator]:text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80',
+      },
+    },
+  },
+);
+
+export interface ButtonProps
+  extends
+    useRender.ComponentProps<'button'>,
+    VariantProps<typeof buttonVariants> {
+  classNames?: SlotClassNames<'loadingIndicator'>;
+  loading?: boolean;
+}
+
+/**
+ * Icon-only buttons need an explicit `size="icon"` (or `icon-*`) and
+ * `aria-label`. Use `render` to render a semantic element such as an anchor
+ * while keeping button styling: `<Button render={<a href="/docs" />}>`.
+ */
+function Button({
+  children,
+  className,
+  classNames,
+  disabled,
+  loading = false,
+  ref,
+  render,
+  size = 'md',
+  type,
+  variant = 'default',
+  ...props
+}: ButtonProps) {
+  // A rendered element such as a link has no `disabled` or `type`: it only
+  // reports the state through `aria-disabled`.
+  const isNativeButton = render === undefined;
+  const isDisabled = Boolean(loading || disabled);
+  const defaultProps = {
+    'aria-disabled': (isNativeButton ? loading : isDisabled) || undefined,
+    children: (
+      <>
+        {children}
+        {loading ? (
+          <Spinner
+            className={cn(
+              'pointer-events-none absolute',
+              classNames?.loadingIndicator,
+            )}
+            data-slot="button-loading-indicator"
+          />
+        ) : null}
+      </>
+    ),
+    className: cn(buttonVariants({ className, size, variant })),
+    'data-loading': loading ? '' : undefined,
+    'data-size': size,
+    'data-slot': 'button',
+    'data-variant': variant,
+    disabled: isNativeButton ? isDisabled : undefined,
+    type: isNativeButton ? (type ?? 'button') : type,
+  };
+
+  return useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(defaultProps, props),
+    ref,
+    render,
+  });
+}
+
+export { Button, buttonVariants };

package/src/components/Card.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { IconArrowUpRight, IconDots } from '@tabler/icons-react';
+
+import { Story } from './_internal/Story';
+import { Button } from './Button';
+import { Card } from './Card';
+import { Text } from './Text';
+
+const meta = {
+  component: Card,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Card',
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Card">
+      <Story.Section title="Composition">
+        <div className="max-w-lg space-y-6">
+          <Card>
+            <Card.Header>
+              <Card.Title>Project activity</Card.Title>
+              <Card.Description>
+                Changes made in the last week.
+              </Card.Description>
+              <Card.Action>
+                <Button aria-label="More options" variant="ghost">
+                  <IconDots />
+                </Button>
+              </Card.Action>
+            </Card.Header>
+            <Card.Content className="space-y-2">
+              <Text variant="h1">1,284</Text>
+              <Text tone="muted">Events across 8 active projects</Text>
+            </Card.Content>
+            <Card.Footer>
+              <Button className="ml-auto" size="sm" variant="ghost">
+                View report <IconArrowUpRight />
+              </Button>
+            </Card.Footer>
+          </Card>
+
+          <Card className="justify-between">
+            <Card.Header>
+              <Card.Title>Simple card</Card.Title>
+              <Card.Description>
+                Slots can be omitted when the content needs less structure.
+              </Card.Description>
+            </Card.Header>
+            <Card.Footer>
+              <Button>Continue</Button>
+            </Card.Footer>
+          </Card>
+        </div>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Card.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Card } from './Card';
+
+describe('Card', () => {
+  it('exposes its semantic compound slots', () => {
+    render(
+      <Card>
+        <Card.Header>
+          <Card.Title>Account</Card.Title>
+          <Card.Description>Manage your profile.</Card.Description>
+        </Card.Header>
+        <Card.Content>Content</Card.Content>
+      </Card>,
+    );
+
+    expect(
+      screen.getByRole('heading', { name: 'Account' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Manage your profile.')).toBeInTheDocument();
+  });
+});

package/src/components/Card.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Text, type TextProps } from './Text';
+
+type CardActionProps = React.ComponentProps<'div'>;
+type CardContentProps = React.ComponentProps<'div'>;
+type CardDescriptionProps = Omit<TextProps, 'as' | 'tone' | 'variant'>;
+type CardFooterProps = React.ComponentProps<'div'>;
+type CardHeaderProps = React.ComponentProps<'div'>;
+type CardProps = React.ComponentProps<'div'>;
+type CardTitleProps = Omit<TextProps, 'as' | 'tone' | 'variant'>;
+
+function CardAction({ className, ...props }: CardActionProps) {
+  return (
+    <div
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end',
+        className,
+      )}
+      data-slot="card-action"
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: CardContentProps) {
+  return (
+    <div
+      className={cn(
+        'flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0',
+        className,
+      )}
+      data-slot="card-content"
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: CardDescriptionProps) {
+  return (
+    <Text
+      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="card-description"
+      tone="muted"
+      variant="body"
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: CardFooterProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-content])]:pt-4',
+        className,
+      )}
+      data-slot="card-footer"
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: CardHeaderProps) {
+  return (
+    <div
+      className={cn(
+        'grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-content])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]',
+        className,
+      )}
+      data-slot="card-header"
+      {...props}
+    />
+  );
+}
+
+function CardRoot({ className, ...props }: CardProps) {
+  return (
+    <div
+      className={cn(
+        'bg-card text-card-foreground relative flex flex-col rounded-2xl border shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]',
+        className,
+      )}
+      data-slot="card"
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: CardTitleProps) {
+  return (
+    <Text
+      className={cn('font-heading leading-none font-semibold', className)}
+      data-slot="card-title"
+      variant="h3"
+      {...props}
+    />
+  );
+}
+
+const Card = Object.assign(CardRoot, {
+  Action: CardAction,
+  Content: CardContent,
+  Description: CardDescription,
+  Footer: CardFooter,
+  Header: CardHeader,
+  Title: CardTitle,
+});
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};
+export type {
+  CardActionProps,
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+};