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

package/src/components/Toast.tsx

@@ -0,0 +1,270 @@
+'use client';
+
+import { Toast as ToastPrimitive } from '@base-ui/react/toast';
+import {
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconCircleCheck,
+  IconInfoCircle,
+  IconX,
+} from '@tabler/icons-react';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { buttonVariants } from './Button';
+import { Spinner } from './Spinner';
+import { Text } from './Text';
+
+type SwipeDirection = 'down' | 'left' | 'right' | 'up';
+
+type ToastActionProps = React.ComponentProps<typeof ToastPrimitive.Action>;
+type ToastCloseProps = React.ComponentProps<typeof ToastPrimitive.Close>;
+type ToastDescriptionProps = React.ComponentProps<
+  typeof ToastPrimitive.Description
+>;
+type ToastObject = ToastPrimitive.Root.ToastObject;
+type ToastPosition =
+  | 'bottom-center'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-center'
+  | 'top-left'
+  | 'top-right';
+type ToastProviderProps = React.ComponentProps<
+  typeof ToastPrimitive.Provider
+> & {
+  /**
+   * Accessible name of each toast's close button.
+   * @default 'Close'
+   */
+  closeLabel?: string;
+  /**
+   * Where the toast stack is anchored in the window.
+   * @default 'bottom-right'
+   */
+  position?: ToastPosition;
+};
+type ToastTitleProps = React.ComponentProps<typeof ToastPrimitive.Title>;
+
+/**
+ * Global toast manager, usable outside React (`Toast.manager.add({ … })`).
+ * `Toast.Provider` subscribes to it, so mount a single provider per app.
+ */
+const toastManager = ToastPrimitive.createToastManager();
+
+const swipeDirections: Record<ToastPosition, SwipeDirection[]> = {
+  'bottom-center': ['down'],
+  'bottom-left': ['down', 'left'],
+  'bottom-right': ['down', 'right'],
+  'top-center': ['up'],
+  'top-left': ['up', 'left'],
+  'top-right': ['up', 'right'],
+};
+
+const toastViewportVariants = cva(
+  'fixed z-50 flex w-[calc(100%-var(--spacing)*8)] max-w-90 outline-none',
+  {
+    defaultVariants: {
+      position: 'bottom-right',
+    },
+    variants: {
+      position: {
+        'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 [--toast-dir:-1]',
+        'bottom-left': 'bottom-4 left-4 [--toast-dir:-1]',
+        'bottom-right': 'right-4 bottom-4 [--toast-dir:-1]',
+        'top-center': 'top-4 left-1/2 -translate-x-1/2 [--toast-dir:1]',
+        'top-left': 'top-4 left-4 [--toast-dir:1]',
+        'top-right': 'top-4 right-4 [--toast-dir:1]',
+      },
+    },
+  },
+);
+
+const toastIcons: Record<string, React.ReactNode> = {
+  error: <IconAlertCircle className="text-destructive" />,
+  info: <IconInfoCircle className="text-info" />,
+  loading: <Spinner aria-hidden className="text-muted-foreground" />,
+  success: <IconCircleCheck className="text-success" />,
+  warning: <IconAlertTriangle className="text-warning" />,
+};
+
+function ToastAction({ className, ...props }: ToastActionProps) {
+  return (
+    <ToastPrimitive.Action
+      className={cn(
+        buttonVariants({ size: 'xs', variant: 'outline' }),
+        className,
+      )}
+      data-slot="toast-action"
+      {...props}
+    />
+  );
+}
+
+function ToastClose({
+  'aria-label': ariaLabel = 'Close',
+  children,
+  className,
+  ...props
+}: ToastCloseProps) {
+  return (
+    <ToastPrimitive.Close
+      aria-label={ariaLabel}
+      className={cn(
+        buttonVariants({ size: 'icon-xs', variant: 'ghost' }),
+        'text-muted-foreground hover:text-foreground -me-1',
+        className,
+      )}
+      data-slot="toast-close"
+      {...props}
+    >
+      {children ?? <IconX />}
+    </ToastPrimitive.Close>
+  );
+}
+
+function ToastDescription({ className, ...props }: ToastDescriptionProps) {
+  return (
+    <ToastPrimitive.Description
+      className={cn('text-sm leading-5', className)}
+      data-slot="toast-description"
+      render={<Text tone="muted" variant="body" />}
+      {...props}
+    />
+  );
+}
+
+function ToastList({
+  closeLabel,
+  position,
+}: {
+  closeLabel: string;
+  position: ToastPosition;
+}) {
+  const { toasts } = ToastPrimitive.useToastManager();
+
+  return toasts.map((toast) => (
+    <ToastRoot
+      closeLabel={closeLabel}
+      key={toast.id}
+      swipeDirection={swipeDirections[position]}
+      toast={toast}
+    />
+  ));
+}
+
+/**
+ * Mount once near the root of the app. Renders `children` plus the portalled
+ * viewport that stacks toasts added through `Toast.manager` or
+ * `Toast.useToast()`. A toast's `type` (`success`, `error`, `warning`,
+ * `info`, `loading`) picks its icon.
+ */
+function ToastProvider({
+  children,
+  closeLabel = 'Close',
+  position = 'bottom-right',
+  toastManager: manager = toastManager,
+  ...props
+}: ToastProviderProps) {
+  return (
+    <ToastPrimitive.Provider toastManager={manager} {...props}>
+      {children}
+      <ToastPrimitive.Portal>
+        <ToastPrimitive.Viewport
+          className={toastViewportVariants({ position })}
+          data-position={position}
+          data-slot="toast-viewport"
+        >
+          <ToastList closeLabel={closeLabel} position={position} />
+        </ToastPrimitive.Viewport>
+      </ToastPrimitive.Portal>
+    </ToastPrimitive.Provider>
+  );
+}
+
+/** A single toast; `Toast.Provider` renders one per queued toast. */
+function ToastRoot({
+  closeLabel,
+  swipeDirection,
+  toast,
+}: {
+  closeLabel: string;
+  swipeDirection: SwipeDirection[];
+  toast: ToastObject;
+}) {
+  const icon = toast.type ? toastIcons[toast.type] : undefined;
+
+  return (
+    <ToastPrimitive.Root
+      className={cn(
+        // Stack geometry, driven by Base UI's --toast-* variables and the
+        // viewport's --toast-dir (-1 stacks upwards, 1 stacks downwards).
+        '[--toast-expanded-y:calc(var(--toast-dir)*(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--toast-shrink:calc(1-var(--toast-scale))] [--toast-stack-height:var(--toast-frontmost-height,var(--toast-height))]',
+        'absolute inset-x-0 z-[calc(1000-var(--toast-index))] h-(--toast-stack-height) w-full select-none in-[[data-position^=bottom]]:bottom-0 in-[[data-position^=bottom]]:origin-bottom in-[[data-position^=top]]:top-0 in-[[data-position^=top]]:origin-top data-expanded:h-(--toast-height)',
+        'translate-x-(--toast-swipe-movement-x) translate-y-[calc(var(--toast-swipe-movement-y)+var(--toast-dir)*(var(--toast-index)*var(--toast-peek)+var(--toast-shrink)*var(--toast-stack-height)))] scale-(--toast-scale) data-expanded:translate-y-(--toast-expanded-y) data-expanded:scale-100',
+        'transition-[translate,scale,opacity,height] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:translate-y-[calc(var(--toast-dir)*-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:translate-y-[calc(var(--toast-dir)*-150%)]',
+        'data-ending-style:data-[swipe-direction=down]:translate-y-[calc(var(--toast-swipe-movement-y)+150%)] data-ending-style:data-[swipe-direction=left]:translate-x-[calc(var(--toast-swipe-movement-x)-150%)] data-ending-style:data-[swipe-direction=left]:translate-y-(--toast-expanded-y) data-ending-style:data-[swipe-direction=right]:translate-x-[calc(var(--toast-swipe-movement-x)+150%)] data-ending-style:data-[swipe-direction=right]:translate-y-(--toast-expanded-y) data-ending-style:data-[swipe-direction=up]:translate-y-[calc(var(--toast-swipe-movement-y)-150%)]',
+        // Keeps the stack expanded while the pointer crosses the gap.
+        "after:absolute after:inset-x-0 after:h-[calc(var(--toast-gap)+1px)] after:content-[''] in-[[data-position^=bottom]]:after:top-full in-[[data-position^=top]]:after:bottom-full",
+        'bg-popover text-popover-foreground rounded-xl border bg-clip-padding text-sm shadow-lg/5',
+      )}
+      data-slot="toast"
+      swipeDirection={swipeDirection}
+      toast={toast}
+    >
+      <ToastPrimitive.Content className="flex items-start gap-2.5 overflow-hidden px-3.5 py-3 transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100">
+        {icon ? (
+          <div
+            aria-hidden
+            className="flex h-5 shrink-0 items-center [&_svg]:size-4"
+            data-slot="toast-icon"
+          >
+            {icon}
+          </div>
+        ) : null}
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <ToastAction />
+          <ToastClose aria-label={closeLabel} />
+        </div>
+      </ToastPrimitive.Content>
+    </ToastPrimitive.Root>
+  );
+}
+
+function ToastTitle({ className, ...props }: ToastTitleProps) {
+  return (
+    <ToastPrimitive.Title
+      className={cn('text-sm leading-5 font-medium', className)}
+      data-slot="toast-title"
+      render={<Text as="h2" variant="body" />}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Returns the toast manager of the nearest `Toast.Provider`: `add`, `close`,
+ * `update`, `promise` and the current `toasts`.
+ */
+function useToast() {
+  return ToastPrimitive.useToastManager();
+}
+
+/**
+ * Toasts are added imperatively, so `Toast` groups the provider and the two
+ * ways to reach its manager rather than rendering a toast itself.
+ */
+const Toast = {
+  manager: toastManager,
+  Provider: ToastProvider,
+  useToast,
+};
+
+export { Toast };
+export type { ToastProviderProps };

package/src/components/Tooltip.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { IconCopy, IconEdit, IconTrash } from '@tabler/icons-react';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Button } from './Button';
+import { Text } from './Text';
+import { Tooltip, type TooltipContentProps } from './Tooltip';
+
+const meta = {
+  component: Tooltip,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Tooltip',
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const SIDE_COLUMNS: {
+  key: NonNullable<TooltipContentProps['side']>;
+  label: string;
+}[] = [
+  { key: 'top', label: 'Top' },
+  { key: 'right', label: 'Right' },
+  { key: 'bottom', label: 'Bottom' },
+  { key: 'left', label: 'Left' },
+];
+
+const TRIGGER_ROWS = [
+  { key: 'text', label: 'Text trigger' },
+  { key: 'icon', label: 'Icon-only trigger' },
+];
+
+function TooltipMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const side = column.key as NonNullable<TooltipContentProps['side']>;
+
+  return (
+    <Tooltip>
+      {row.key === 'icon' ? (
+        <Tooltip.Trigger
+          render={
+            <Button aria-label="Copy link" size="icon" variant="outline" />
+          }
+        >
+          <IconCopy />
+        </Tooltip.Trigger>
+      ) : (
+        <Tooltip.Trigger render={<Button variant="outline" />}>
+          Hover me
+        </Tooltip.Trigger>
+      )}
+      <Tooltip.Content side={side}>
+        {row.key === 'icon' ? 'Copy link' : `Shown on the ${column.label}`}
+      </Tooltip.Content>
+    </Tooltip>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Tooltip">
+      <Story.Section title="Sides and triggers">
+        <Story.Matrix
+          Cell={TooltipMatrixCell}
+          columns={SIDE_COLUMNS}
+          rows={TRIGGER_ROWS}
+        />
+      </Story.Section>
+      <Story.Section title="Shared delay with Provider">
+        <Text className="mb-4" tone="muted">
+          Once one tooltip is open, moving to a neighbour opens it instantly.
+        </Text>
+        <Tooltip.Provider delay={300}>
+          <div className="flex gap-2">
+            <Tooltip>
+              <Tooltip.Trigger
+                render={
+                  <Button aria-label="Edit" size="icon" variant="outline" />
+                }
+              >
+                <IconEdit />
+              </Tooltip.Trigger>
+              <Tooltip.Content>Edit</Tooltip.Content>
+            </Tooltip>
+            <Tooltip>
+              <Tooltip.Trigger
+                render={
+                  <Button
+                    aria-label="Duplicate"
+                    size="icon"
+                    variant="outline"
+                  />
+                }
+              >
+                <IconCopy />
+              </Tooltip.Trigger>
+              <Tooltip.Content>Duplicate</Tooltip.Content>
+            </Tooltip>
+            <Tooltip>
+              <Tooltip.Trigger
+                render={
+                  <Button aria-label="Delete" size="icon" variant="outline" />
+                }
+              >
+                <IconTrash />
+              </Tooltip.Trigger>
+              <Tooltip.Content>Delete</Tooltip.Content>
+            </Tooltip>
+          </div>
+        </Tooltip.Provider>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Tooltip.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Tooltip } from './Tooltip';
+
+describe('Tooltip', () => {
+  it('renders the content when open', () => {
+    render(
+      <Tooltip.Provider>
+        <Tooltip defaultOpen>
+          <Tooltip.Trigger>Save</Tooltip.Trigger>
+          <Tooltip.Content>Save changes</Tooltip.Content>
+        </Tooltip>
+      </Tooltip.Provider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute(
+      'data-slot',
+      'tooltip-trigger',
+    );
+    expect(screen.getByText('Save changes')).toHaveAttribute(
+      'data-slot',
+      'tooltip-content',
+    );
+  });
+
+  it('does not render the content while closed', () => {
+    render(
+      <Tooltip>
+        <Tooltip.Trigger>Save</Tooltip.Trigger>
+        <Tooltip.Content>Save changes</Tooltip.Content>
+      </Tooltip>,
+    );
+
+    expect(screen.queryByText('Save changes')).not.toBeInTheDocument();
+  });
+
+  it('places the content on the requested side', () => {
+    render(
+      <Tooltip open>
+        <Tooltip.Trigger>Save</Tooltip.Trigger>
+        <Tooltip.Content side="bottom">Save changes</Tooltip.Content>
+      </Tooltip>,
+    );
+
+    expect(screen.getByText('Save changes')).toHaveAttribute(
+      'data-side',
+      'bottom',
+    );
+  });
+});

package/src/components/Tooltip.tsx

@@ -0,0 +1,80 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type TooltipContentProps = Pick<
+  React.ComponentProps<typeof TooltipPrimitive.Positioner>,
+  'align' | 'alignOffset' | 'side' | 'sideOffset'
+> &
+  React.ComponentProps<typeof TooltipPrimitive.Popup>;
+type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;
+type TooltipProviderProps = React.ComponentProps<
+  typeof TooltipPrimitive.Provider
+>;
+type TooltipTriggerProps = React.ComponentProps<
+  typeof TooltipPrimitive.Trigger
+>;
+
+function TooltipContent({
+  align = 'center',
+  alignOffset = 0,
+  children,
+  className,
+  side = 'top',
+  sideOffset = 6,
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        className="z-50"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <TooltipPrimitive.Popup
+          className={cn(
+            'bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-2 py-1 text-xs text-balance duration-100',
+            className,
+          )}
+          data-slot="tooltip-content"
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow
+            className="bg-foreground size-2 rotate-45 rounded-[1px] data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1 data-[side=top]:-bottom-1"
+            data-slot="tooltip-arrow"
+          />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+function TooltipProvider({ ...props }: TooltipProviderProps) {
+  return <TooltipPrimitive.Provider {...props} />;
+}
+
+function TooltipRoot({ ...props }: TooltipProps) {
+  return <TooltipPrimitive.Root {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipTriggerProps) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+const Tooltip = Object.assign(TooltipRoot, {
+  Content: TooltipContent,
+  Provider: TooltipProvider,
+  Trigger: TooltipTrigger,
+});
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export type {
+  TooltipContentProps,
+  TooltipProps,
+  TooltipProviderProps,
+  TooltipTriggerProps,
+};

package/src/components/XStack.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { Text } from './Text';
+import { XStack } from './XStack';
+
+const meta = {
+  component: XStack,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/XStack',
+} satisfies Meta<typeof XStack>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+function Item({ children }: { children: string }) {
+  return (
+    <Text className="bg-muted rounded-md border px-4 py-3">{children}</Text>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="XStack">
+      <Story.Section title="Horizontal spacing">
+        <XStack align="center" gap={3}>
+          <Item>Avatar</Item>
+          <Item>Profile details</Item>
+          <Item>Status</Item>
+        </XStack>
+      </Story.Section>
+
+      <Story.Section title="Distribution">
+        <XStack
+          align="center"
+          className="border-border rounded-md border border-dashed p-4"
+          justify="between"
+        >
+          <Item>Leading action</Item>
+          <Item>Trailing action</Item>
+        </XStack>
+      </Story.Section>
+
+      <Story.Section title="Wrapping">
+        <XStack gap={2} wrap="wrap">
+          {['Design', 'Engineering', 'Product', 'Research', 'Support'].map(
+            (label) => (
+              <Item key={label}>{label}</Item>
+            ),
+          )}
+        </XStack>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <XStack className="max-sm:flex-col" gap={3}>
+          <Item>Horizontal by default</Item>
+          <Item>Vertical below sm</Item>
+        </XStack>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/XStack.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { XStack } from './XStack';
+
+describe('XStack', () => {
+  it('renders a row stack with shared Flex props', () => {
+    render(
+      <XStack align="center" gap={2} justify="between">
+        Content
+      </XStack>,
+    );
+
+    expect(screen.getByText('Content')).toHaveClass(
+      'flex',
+      'flex-row',
+      'items-center',
+      'justify-between',
+      'gap-2',
+    );
+    expect(screen.getByText('Content')).toHaveAttribute('data-slot', 'x-stack');
+  });
+
+  it('supports polymorphism, native props, and responsive overrides', () => {
+    render(
+      <XStack aria-label="actions" as="nav" className="max-md:flex-col" />,
+    );
+
+    const element = screen.getByLabelText('actions');
+    expect(element.tagName.toLowerCase()).toBe('nav');
+    expect(element).toHaveClass('max-md:flex-col');
+  });
+});

package/src/components/XStack.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils';
+
+import { Flex, type FlexProps } from './Flex';
+
+type XStackProps = Omit<FlexProps, 'direction'>;
+
+function XStack({ className, ref, ...props }: XStackProps) {
+  return (
+    <Flex
+      className={cn('flex-row', className)}
+      data-slot="x-stack"
+      ref={ref}
+      {...props}
+    />
+  );
+}
+
+export { XStack };
+export type { XStackProps };