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

package/src/components/form/Select.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import {
+  IconCheck,
+  IconChevronDown,
+  IconChevronUp,
+  IconSelector,
+} from '@tabler/icons-react';
+import * as React from 'react';
+
+import { cn, type SlotClassNames } from '@/lib/utils';
+
+type SelectContentProps = Pick<
+  React.ComponentProps<typeof SelectPrimitive.Positioner>,
+  'align' | 'side' | 'sideOffset'
+> &
+  React.ComponentProps<typeof SelectPrimitive.Popup> & {
+    position?: 'item-aligned' | 'popper';
+  };
+type SelectGroupLabelProps = React.ComponentProps<
+  typeof SelectPrimitive.GroupLabel
+>;
+type SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>;
+type SelectItemData = {
+  label: React.ReactNode;
+  value: unknown;
+};
+type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item> & {
+  classNames?: SlotClassNames<'indicator'>;
+};
+type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.Label>;
+type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
+type SelectSeparatorProps = React.ComponentProps<
+  typeof SelectPrimitive.Separator
+>;
+type SelectTriggerProps = React.ComponentProps<
+  typeof SelectPrimitive.Trigger
+> & {
+  classNames?: SlotClassNames<'icon'>;
+};
+
+type SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>;
+
+// Base UI needs root item metadata to display labels before the popup mounts.
+function deriveSelectItems(children: React.ReactNode): SelectItemData[] {
+  return React.Children.toArray(children).flatMap((child) => {
+    if (!React.isValidElement<{ children?: React.ReactNode }>(child)) {
+      return [];
+    }
+
+    if (child.type === SelectItem) {
+      const { children: label, value } = child.props as SelectItemProps;
+
+      return label == null ? [] : [{ label, value }];
+    }
+
+    return deriveSelectItems(child.props.children);
+  });
+}
+
+function SelectContent({
+  align = 'center',
+  children,
+  className,
+  position = 'popper',
+  side = 'bottom',
+  sideOffset = 4,
+  ...props
+}: SelectContentProps) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        align={align}
+        alignItemWithTrigger={position === 'item-aligned'}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <SelectPrimitive.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 relative z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-lg duration-100',
+            position === 'popper' &&
+              'min-w-(--anchor-width) data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            className,
+          )}
+          data-align-trigger={position === 'item-aligned'}
+          data-slot="select-content"
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List data-slot="select-list">
+            {children}
+          </SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectGroup({ className, ...props }: SelectGroupProps) {
+  return (
+    <SelectPrimitive.Group
+      className={cn('scroll-my-1 p-1', className)}
+      data-slot="select-group"
+      {...props}
+    />
+  );
+}
+
+function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps) {
+  return (
+    <SelectPrimitive.GroupLabel
+      className={cn('text-muted-foreground px-3 py-2.5 text-xs', className)}
+      data-slot="select-group-label"
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  children,
+  className,
+  classNames,
+  ...props
+}: SelectItemProps) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      data-slot="select-item"
+      // react-doctor-disable-next-line react-doctor/no-polymorphic-children -- maps string children to Base UI's keyboard typeahead label prop; display always uses children via ItemText
+      label={typeof children === 'string' ? children : undefined}
+      {...props}
+    >
+      <span
+        className={cn(
+          'pointer-events-none absolute right-2 flex size-4 items-center justify-center',
+          classNames?.indicator,
+        )}
+        data-slot="select-item-indicator"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <IconCheck className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectLabel({ className, ...props }: SelectLabelProps) {
+  return (
+    <SelectPrimitive.Label
+      className={cn(
+        'text-sm leading-none font-medium data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        className,
+      )}
+      data-slot="select-label"
+      {...props}
+    />
+  );
+}
+
+function SelectRoot({ children, items, ...props }: SelectProps) {
+  const derivedItems = React.useMemo(
+    () => deriveSelectItems(children),
+    [children],
+  );
+
+  return (
+    <SelectPrimitive.Root items={items ?? derivedItems} {...props}>
+      {children}
+    </SelectPrimitive.Root>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="select-scroll-down-button"
+      {...props}
+    >
+      <IconChevronDown />
+    </SelectPrimitive.ScrollDownArrow>
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="select-scroll-up-button"
+      {...props}
+    >
+      <IconChevronUp />
+    </SelectPrimitive.ScrollUpArrow>
+  );
+}
+
+function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn(
+        'bg-border/50 pointer-events-none -mx-1 my-1 h-px',
+        className,
+      )}
+      data-slot="select-separator"
+      {...props}
+    />
+  );
+}
+
+function SelectTrigger({
+  children,
+  className,
+  classNames,
+  ...props
+}: SelectTriggerProps) {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(
+        "border-input bg-background aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground focus-ring enabled:hover:border-ring/50 data-popup-open:border-ring/50 flex h-8 w-fit items-center justify-between gap-1.5 rounded-lg border px-2.5 text-sm whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="select-trigger"
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        className={cn('text-muted-foreground', classNames?.icon)}
+        data-slot="select-trigger-icon"
+      >
+        <IconSelector className="pointer-events-none size-4" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectValue({ ...props }: SelectValueProps) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+const Select = Object.assign(SelectRoot, {
+  Content: SelectContent,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel,
+  Item: SelectItem,
+  Label: SelectLabel,
+  Separator: SelectSeparator,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+});
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
+export type {
+  SelectContentProps,
+  SelectGroupLabelProps,
+  SelectGroupProps,
+  SelectItemProps,
+  SelectLabelProps,
+  SelectProps,
+  SelectSeparatorProps,
+  SelectTriggerProps,
+  SelectValueProps,
+};

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Slider } from './Slider';
+
+const meta = {
+  component: Slider,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/Slider',
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const MODE_ROWS = [
+  { key: 'single', label: 'Single value' },
+  { key: 'range', label: 'Range' },
+  { key: 'labeled', label: 'With label' },
+  { key: 'disabled', label: 'Disabled' },
+];
+
+const SCALE_COLUMNS = [
+  { key: 'default', label: 'Default scale' },
+  { key: 'stepped', label: 'Stepped marks' },
+  { key: 'wide', label: 'Wide range' },
+];
+
+function SliderAnatomy() {
+  return (
+    <div className="space-y-8">
+      <Slider
+        aria-label="anatomy"
+        className="max-w-lg [&_[data-slot=slider-control]]:rounded-md [&_[data-slot=slider-control]]:bg-sky-500/15 [&_[data-slot=slider-control]]:outline [&_[data-slot=slider-control]]:outline-sky-500/40 [&_[data-slot=slider-control]]:outline-dashed [&_[data-slot=slider-thumb]]:before:rounded-full [&_[data-slot=slider-thumb]]:before:bg-fuchsia-500/25 [&_[data-slot=slider-thumb]]:before:outline [&_[data-slot=slider-thumb]]:before:outline-fuchsia-500/50 [&_[data-slot=slider-thumb]]:before:outline-dashed"
+        defaultValue={[45]}
+      />
+      <dl className="grid gap-4 sm:grid-cols-2">
+        <div className="flex items-start gap-3">
+          <span className="mt-0.5 size-4 shrink-0 rounded-sm bg-sky-500/15 outline outline-sky-500/40 outline-dashed" />
+          <div>
+            <dt className="text-foreground text-sm font-medium">
+              Bar hit area
+            </dt>
+            <dd className="text-muted-foreground mt-1 text-xs">
+              The <code>Slider.Control</code> padding. The visible track stays
+              thin, but the grabbable region extends above and below it.
+            </dd>
+          </div>
+        </div>
+        <div className="flex items-start gap-3">
+          <span className="mt-0.5 size-4 shrink-0 rounded-full bg-fuchsia-500/25 outline outline-fuchsia-500/50 outline-dashed" />
+          <div>
+            <dt className="text-foreground text-sm font-medium">
+              Thumb hit area
+            </dt>
+            <dd className="text-muted-foreground mt-1 text-xs">
+              A <code>::before</code> pseudo-element inset around the thumb,
+              enlarging the grab target without changing its visual size.
+            </dd>
+          </div>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+function SliderMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  return <SliderPreview columnKey={column.key} rowKey={row.key} />;
+}
+
+function SliderPreview({
+  columnKey,
+  rowKey,
+}: {
+  columnKey: string;
+  rowKey: string;
+}) {
+  const isRange = rowKey === 'range';
+  const isStepped = columnKey === 'stepped';
+  const max = columnKey === 'wide' ? 500 : isStepped ? 12 : 100;
+  const value = isRange ? [max * 0.25, max * 0.75] : [max * 0.45];
+
+  return (
+    <div className="w-full min-w-48">
+      <Slider
+        aria-label={`${rowKey} ${columnKey}`}
+        defaultValue={value}
+        disabled={rowKey === 'disabled'}
+        max={max}
+        step={isStepped ? 1 : undefined}
+      >
+        {rowKey === 'labeled' ? (
+          <div className="mb-3 flex items-center justify-between">
+            <Slider.Label>Intensity</Slider.Label>
+            <Slider.Value />
+          </div>
+        ) : null}
+      </Slider>
+      {isStepped ? <Slider.Marks labelInterval={2} max={max} step={1} /> : null}
+    </div>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Slider">
+      <Story.Section title="Modes and scales">
+        <Story.Matrix
+          Cell={SliderMatrixCell}
+          cellClassName="justify-stretch"
+          columns={SCALE_COLUMNS}
+          rows={MODE_ROWS}
+        />
+      </Story.Section>
+      <Story.Section title="Anatomy">
+        <SliderAnatomy />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Slider } from './Slider';
+
+describe('Slider', () => {
+  it('applies classNames to the control, track, indicator, and thumb slots', () => {
+    const { container } = render(
+      <Slider
+        aria-label="Volume"
+        classNames={{
+          control: 'control-x',
+          indicator: 'indicator-x',
+          thumb: 'thumb-x',
+          track: 'track-x',
+        }}
+        defaultValue={40}
+      />,
+    );
+    expect(container.querySelector('[data-slot="slider-control"]')).toHaveClass(
+      'control-x',
+    );
+    expect(container.querySelector('[data-slot="slider-track"]')).toHaveClass(
+      'track-x',
+    );
+    expect(
+      container.querySelector('[data-slot="slider-indicator"]'),
+    ).toHaveClass('indicator-x');
+    expect(container.querySelector('[data-slot="slider-thumb"]')).toHaveClass(
+      'thumb-x',
+    );
+  });
+});

package/src/components/form/Slider.tsx

@@ -0,0 +1,200 @@
+import type { CSSProperties, Ref } from 'react';
+
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+
+import { cn, type SlotClassNames } from '@/lib/utils';
+
+type SliderLabelProps = SliderPrimitive.Label.Props & {
+  ref?: Ref<HTMLDivElement>;
+};
+
+type SliderMarksProps = {
+  className?: string;
+  labelInterval?: number;
+  max?: number;
+  min?: number;
+  step?: number;
+};
+
+type SliderProps = SliderPrimitive.Root.Props & {
+  classNames?: SlotClassNames<'control' | 'indicator' | 'thumb' | 'track'>;
+  getAriaLabel?: SliderPrimitive.Thumb.Props['getAriaLabel'];
+  getAriaValueText?: SliderPrimitive.Thumb.Props['getAriaValueText'];
+  /** Render the filled indicator. Set to `false` for sliders with a custom track (e.g. color pickers). Defaults to `true`. */
+  indicator?: boolean;
+  ref?: Ref<HTMLDivElement>;
+  trackStyle?: CSSProperties;
+};
+
+type SliderValueProps = SliderPrimitive.Value.Props & {
+  ref?: Ref<HTMLOutputElement>;
+};
+
+function SliderLabel({ className, ref, ...props }: SliderLabelProps) {
+  return (
+    <SliderPrimitive.Label
+      className={cn('text-sm font-medium', className)}
+      data-slot="slider-label"
+      ref={ref}
+      {...props}
+    />
+  );
+}
+
+function SliderMarks({
+  className,
+  labelInterval = 1,
+  max = 100,
+  min = 0,
+  step = 1,
+}: SliderMarksProps) {
+  const tickCount = Math.floor((max - min) / step) + 1;
+  const ticks = Array.from(
+    { length: tickCount },
+    (_, index) => min + index * step,
+  );
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'text-muted-foreground mt-3 flex w-full items-center justify-between gap-1 px-2.5 text-xs',
+        className,
+      )}
+      role="presentation"
+    >
+      {ticks.map((tick, index) => {
+        const showLabel = index % labelInterval === 0;
+
+        return (
+          <span
+            className="flex w-0 flex-col items-center justify-center gap-2"
+            key={tick}
+          >
+            <span
+              className={cn(
+                'bg-muted-foreground/70 h-1 w-px',
+                !showLabel && 'h-0.5',
+              )}
+            />
+            <span className={cn(!showLabel && 'opacity-0')}>{tick}</span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function SliderRoot({
+  'aria-describedby': ariaDescribedBy,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  className,
+  classNames,
+  defaultValue,
+  getAriaLabel,
+  getAriaValueText,
+  indicator = true,
+  max = 100,
+  min = 0,
+  ref,
+  trackStyle,
+  value,
+  ...props
+}: SliderProps) {
+  const resolved = value ?? defaultValue;
+  const thumbCount = Array.isArray(resolved) ? resolved.length : 1;
+  const getThumbAriaLabel =
+    getAriaLabel ??
+    (typeof ariaLabel === 'string'
+      ? (index: number) =>
+          thumbCount > 1
+            ? `${ariaLabel} ${index === 0 ? 'minimum' : index === thumbCount - 1 ? 'maximum' : index + 1}`
+            : ariaLabel
+      : undefined);
+
+  return (
+    <SliderPrimitive.Root
+      aria-labelledby={ariaLabelledBy}
+      className={cn('data-[orientation=horizontal]:w-full', className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      max={max}
+      min={min}
+      ref={ref}
+      thumbAlignment="edge"
+      value={value}
+      {...props}
+    >
+      {children}
+      <SliderPrimitive.Control
+        className={cn(
+          'flex touch-none items-center select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=horizontal]:py-3 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-center data-[orientation=vertical]:px-3',
+          classNames?.control,
+        )}
+        data-slot="slider-control"
+      >
+        <SliderPrimitive.Track
+          className={cn(
+            'bg-input relative grow rounded-full select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+            classNames?.track,
+          )}
+          data-slot="slider-track"
+          style={trackStyle}
+        >
+          {indicator ? (
+            <SliderPrimitive.Indicator
+              className={cn(
+                'bg-primary rounded-full select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+                classNames?.indicator,
+              )}
+              data-slot="slider-indicator"
+            />
+          ) : null}
+          {Array.from({ length: thumbCount }, (_, index) => (
+            <SliderPrimitive.Thumb
+              aria-describedby={ariaDescribedBy}
+              aria-label={getThumbAriaLabel ? undefined : ariaLabel}
+              aria-labelledby={ariaLabelledBy}
+              className={cn(
+                'border-primary bg-background ring-ring/50 relative block size-4.5 shrink-0 rounded-full border-2 shadow-sm transition-[color,box-shadow] outline-none select-none before:absolute before:-inset-2.5 before:content-[""] hover:ring-5 focus-visible:ring-5 data-disabled:pointer-events-none data-dragging:ring-5',
+                classNames?.thumb,
+              )}
+              data-slot="slider-thumb"
+              getAriaLabel={getThumbAriaLabel}
+              getAriaValueText={getAriaValueText}
+              index={index}
+              key={String(index)}
+            />
+          ))}
+        </SliderPrimitive.Track>
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}
+
+function SliderValue({ className, ref, ...props }: SliderValueProps) {
+  return (
+    <SliderPrimitive.Value
+      className={cn('text-foreground text-sm tabular-nums', className)}
+      data-slot="slider-value"
+      ref={ref}
+      {...props}
+    />
+  );
+}
+
+const Slider = Object.assign(SliderRoot, {
+  Label: SliderLabel,
+  Marks: SliderMarks,
+  Value: SliderValue,
+});
+
+export { Slider, SliderPrimitive };
+export type {
+  SliderLabelProps,
+  SliderMarksProps,
+  SliderProps,
+  SliderValueProps,
+};