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

package/src/components/Menu.tsx

@@ -0,0 +1,290 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import {
+  IconCheck,
+  IconChevronRight,
+  IconCircleFilled,
+} from '@tabler/icons-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Text, type TextProps } from './Text';
+
+type MenuCheckboxItemProps = React.ComponentProps<
+  typeof MenuPrimitive.CheckboxItem
+>;
+type MenuContentProps = Pick<
+  React.ComponentProps<typeof MenuPrimitive.Positioner>,
+  'align' | 'alignOffset' | 'side' | 'sideOffset'
+> &
+  React.ComponentProps<typeof MenuPrimitive.Popup>;
+type MenuGroupLabelProps = React.ComponentProps<
+  typeof MenuPrimitive.GroupLabel
+>;
+type MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>;
+type MenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> &
+  VariantProps<typeof menuItemVariants>;
+type MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>;
+type MenuRadioGroupProps = React.ComponentProps<
+  typeof MenuPrimitive.RadioGroup
+>;
+type MenuRadioItemProps = React.ComponentProps<typeof MenuPrimitive.RadioItem>;
+type MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>;
+type MenuShortcutProps = Omit<TextProps, 'as'>;
+type MenuSubContentProps = MenuContentProps;
+type MenuSubProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>;
+type MenuSubTriggerProps = React.ComponentProps<
+  typeof MenuPrimitive.SubmenuTrigger
+>;
+type MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>;
+
+const menuPopupClassName =
+  'border-border bg-popover text-popover-foreground 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 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-lg duration-100 outline-none';
+
+const menuItemBaseClassName =
+  "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+const menuItemVariants = cva(menuItemBaseClassName, {
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: "[&_svg:not([class*='text-'])]:text-muted-foreground",
+      destructive:
+        'text-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive dark:data-highlighted:bg-destructive/20 [&_svg]:text-destructive',
+    },
+  },
+});
+
+function MenuCheckboxItem({
+  children,
+  className,
+  ...props
+}: MenuCheckboxItemProps) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      className={cn(menuItemBaseClassName, 'pr-8', className)}
+      data-slot="menu-checkbox-item"
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+        data-slot="menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <IconCheck />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+function MenuContent({
+  align = 'start',
+  alignOffset = 0,
+  className,
+  side = 'bottom',
+  sideOffset = 4,
+  ...props
+}: MenuContentProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        className="z-50 outline-none"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          className={cn(menuPopupClassName, className)}
+          data-slot="menu-content"
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+function MenuGroup({ ...props }: MenuGroupProps) {
+  return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
+}
+
+function MenuGroupLabel({ className, ...props }: MenuGroupLabelProps) {
+  return (
+    <MenuPrimitive.GroupLabel
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      data-slot="menu-group-label"
+      {...props}
+    />
+  );
+}
+
+function MenuItem({ className, variant = 'default', ...props }: MenuItemProps) {
+  return (
+    <MenuPrimitive.Item
+      className={cn(menuItemVariants({ variant }), className)}
+      data-slot="menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+function MenuRadioGroup({ ...props }: MenuRadioGroupProps) {
+  return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
+}
+
+function MenuRadioItem({ children, className, ...props }: MenuRadioItemProps) {
+  return (
+    <MenuPrimitive.RadioItem
+      className={cn(menuItemBaseClassName, 'pr-8', className)}
+      data-slot="menu-radio-item"
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+        data-slot="menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <IconCircleFilled className="size-2" />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+function MenuRoot({ ...props }: MenuProps) {
+  return <MenuPrimitive.Root {...props} />;
+}
+
+function MenuSeparator({ className, ...props }: MenuSeparatorProps) {
+  return (
+    <MenuPrimitive.Separator
+      className={cn('bg-border/50 -mx-1 my-1 h-px', className)}
+      data-slot="menu-separator"
+      {...props}
+    />
+  );
+}
+
+function MenuShortcut({ className, ...props }: MenuShortcutProps) {
+  return (
+    <Text
+      as="span"
+      className={cn('ml-auto text-xs tracking-widest', className)}
+      data-slot="menu-shortcut"
+      tone="muted"
+      {...props}
+    />
+  );
+}
+
+function MenuSub({ ...props }: MenuSubProps) {
+  return <MenuPrimitive.SubmenuRoot {...props} />;
+}
+
+function MenuSubContent({
+  align = 'start',
+  alignOffset = -5,
+  className,
+  side = 'right',
+  sideOffset = 0,
+  ...props
+}: MenuSubContentProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        className="z-50 outline-none"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          className={cn(menuPopupClassName, className)}
+          data-slot="menu-sub-content"
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+function MenuSubTrigger({
+  children,
+  className,
+  ...props
+}: MenuSubTriggerProps) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      className={cn(
+        menuItemBaseClassName,
+        "data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      data-slot="menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <IconChevronRight className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function MenuTrigger({ ...props }: MenuTriggerProps) {
+  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
+}
+
+const Menu = Object.assign(MenuRoot, {
+  CheckboxItem: MenuCheckboxItem,
+  Content: MenuContent,
+  Group: MenuGroup,
+  GroupLabel: MenuGroupLabel,
+  Item: MenuItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  Separator: MenuSeparator,
+  Shortcut: MenuShortcut,
+  Sub: MenuSub,
+  SubContent: MenuSubContent,
+  SubTrigger: MenuSubTrigger,
+  Trigger: MenuTrigger,
+});
+
+export {
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+};
+export type {
+  MenuCheckboxItemProps,
+  MenuContentProps,
+  MenuGroupLabelProps,
+  MenuGroupProps,
+  MenuItemProps,
+  MenuProps,
+  MenuRadioGroupProps,
+  MenuRadioItemProps,
+  MenuSeparatorProps,
+  MenuShortcutProps,
+  MenuSubContentProps,
+  MenuSubProps,
+  MenuSubTriggerProps,
+  MenuTriggerProps,
+};

package/src/components/Popover.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Button, type ButtonProps } from './Button';
+import { Popover } from './Popover';
+
+const meta = {
+  component: Popover,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Popover',
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const ALIGN_ROWS = [
+  { key: 'start', label: 'Start align' },
+  { key: 'center', label: 'Center align' },
+  { key: 'end', label: 'End align' },
+];
+
+const TRIGGER_COLUMNS: {
+  key: NonNullable<ButtonProps['variant']>;
+  label: string;
+}[] = [
+  { key: 'default', label: 'Default trigger' },
+  { key: 'outline', label: 'Outline trigger' },
+  { key: 'ghost', label: 'Ghost trigger' },
+];
+
+function PopoverMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Popover>
+      <Popover.Trigger
+        render={
+          <Button variant={column.key as NonNullable<ButtonProps['variant']>} />
+        }
+      >
+        Open
+      </Popover.Trigger>
+      <Popover.Content align={row.key as 'center' | 'end' | 'start'}>
+        <Popover.Header>
+          <Popover.Title>{row.label}</Popover.Title>
+          <Popover.Description>
+            Contextual content keeps the same spacing, radius, and border
+            treatment across trigger styles.
+          </Popover.Description>
+        </Popover.Header>
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost">Cancel</Button>
+          <Button>Apply</Button>
+        </div>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Popover">
+      <Story.Section title="Alignment and trigger styles">
+        <Story.Matrix
+          Cell={PopoverMatrixCell}
+          columns={TRIGGER_COLUMNS}
+          rows={ALIGN_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Popover.tsx

@@ -0,0 +1,117 @@
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type PopoverAnchorProps = React.ComponentProps<'div'>;
+type PopoverContentProps = Pick<
+  React.ComponentProps<typeof PopoverPrimitive.Positioner>,
+  'align' | 'side' | 'sideOffset'
+> &
+  React.ComponentProps<typeof PopoverPrimitive.Popup>;
+type PopoverDescriptionProps = React.ComponentProps<'p'>;
+type PopoverHeaderProps = React.ComponentProps<'div'>;
+type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
+type PopoverTitleProps = React.ComponentProps<'h2'>;
+type PopoverTriggerProps = React.ComponentProps<
+  typeof PopoverPrimitive.Trigger
+>;
+
+function PopoverAnchor({ ...props }: PopoverAnchorProps) {
+  return <div data-slot="popover-anchor" {...props} />;
+}
+
+function PopoverContent({
+  align = 'center',
+  className,
+  side = 'bottom',
+  sideOffset = 4,
+  ...props
+}: PopoverContentProps) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <PopoverPrimitive.Popup
+          className={cn(
+            'border-border bg-popover text-popover-foreground 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 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md border p-4 text-sm shadow-lg duration-100 outline-none',
+            className,
+          )}
+          data-slot="popover-content"
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverDescription({ className, ...props }: PopoverDescriptionProps) {
+  return (
+    <p
+      className={cn('text-muted-foreground', className)}
+      data-slot="popover-description"
+      {...props}
+    />
+  );
+}
+
+function PopoverHeader({ className, ...props }: PopoverHeaderProps) {
+  return (
+    <div
+      className={cn('flex flex-col gap-1 text-sm', className)}
+      data-slot="popover-header"
+      {...props}
+    />
+  );
+}
+
+function PopoverRoot({ ...props }: PopoverProps) {
+  return <PopoverPrimitive.Root {...props} />;
+}
+
+function PopoverTitle({ children, className, ...props }: PopoverTitleProps) {
+  return (
+    <h2
+      className={cn('text-base font-medium', className)}
+      data-slot="popover-title"
+      {...props}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function PopoverTrigger(props: PopoverTriggerProps) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+const Popover = Object.assign(PopoverRoot, {
+  Anchor: PopoverAnchor,
+  Content: PopoverContent,
+  Description: PopoverDescription,
+  Header: PopoverHeader,
+  Title: PopoverTitle,
+  Trigger: PopoverTrigger,
+});
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+};
+export type {
+  PopoverAnchorProps,
+  PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverHeaderProps,
+  PopoverProps,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+};

package/src/components/Progress.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { useEffect, useState } from 'react';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Progress } from './Progress';
+import { Text } from './Text';
+import { XStack } from './XStack';
+import { YStack } from './YStack';
+
+const meta = {
+  args: {
+    value: 50,
+  },
+  component: Progress,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Progress',
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const VALUE_ROWS = [{ key: 'default', label: 'Default' }];
+
+const STATE_COLUMNS = [
+  { key: '25', label: '25%' },
+  { key: '50', label: '50%' },
+  { key: '75', label: '75%' },
+  { key: '100', label: 'Complete' },
+];
+
+function AnimatedProgress() {
+  const [value, setValue] = useState(20);
+
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setValue((current) => (current >= 100 ? 0 : Math.min(100, current + 10)));
+    }, 900);
+
+    return () => window.clearInterval(interval);
+  }, []);
+
+  return (
+    <Progress className="max-w-sm grid-cols-[1fr_auto]" value={value}>
+      <Progress.Label>Export data</Progress.Label>
+      <Progress.Value />
+      <Progress.Track className="col-span-2">
+        <Progress.Indicator />
+      </Progress.Track>
+    </Progress>
+  );
+}
+
+function ProgressValueCell({ column }: ComponentMatrixCellProps) {
+  return <Progress value={Number(column.key)} />;
+}
+
+export const All: StoryDefinition = {
+  args: {
+    value: 50,
+  },
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Progress">
+      <Story.Section title="Values">
+        <Story.Matrix
+          Cell={ProgressValueCell}
+          cellClassName="justify-stretch"
+          cellWidth="10rem"
+          columns={STATE_COLUMNS}
+          rows={VALUE_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Labeled progress">
+        <YStack gap={6}>
+          <Progress className="max-w-sm grid-cols-[1fr_auto]" value={72}>
+            <Progress.Label>Design capacity</Progress.Label>
+            <Progress.Value />
+            <Progress.Track className="col-span-2">
+              <Progress.Indicator />
+            </Progress.Track>
+          </Progress>
+        </YStack>
+      </Story.Section>
+
+      <Story.Section title="Animated">
+        <AnimatedProgress />
+      </Story.Section>
+
+      <Story.Section title="Custom indicator">
+        <Progress className="max-w-sm" value={63}>
+          <XStack className="mb-2" justify="between">
+            <Progress.Label>Engineering</Progress.Label>
+            <Text tone="muted" variant="small">
+              63%
+            </Text>
+          </XStack>
+          <Progress.Track>
+            <Progress.Indicator indicatorClassName="bg-chart-2" />
+          </Progress.Track>
+        </Progress>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Progress.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Progress } from './Progress';
+
+describe('Progress', () => {
+  it('renders a progressbar with the provided value', () => {
+    render(<Progress aria-label="Upload" value={45} />);
+
+    expect(screen.getByRole('progressbar', { name: 'Upload' })).toHaveAttribute(
+      'aria-valuenow',
+      '45',
+    );
+  });
+
+  it('renders labeled progress parts', () => {
+    render(
+      <Progress value={72}>
+        <Progress.Label>Design</Progress.Label>
+        <Progress.Track>
+          <Progress.Indicator />
+        </Progress.Track>
+      </Progress>,
+    );
+
+    expect(screen.getByText('Design')).toBeInTheDocument();
+  });
+});