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

package/src/components/YStack.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { Text } from './Text';
+import { YStack } from './YStack';
+
+const meta = {
+  component: YStack,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/YStack',
+} satisfies Meta<typeof YStack>;
+
+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="YStack">
+      <Story.Section title="Vertical spacing">
+        <YStack gap={3}>
+          <Item>Heading</Item>
+          <Item>Supporting content</Item>
+          <Item>Actions</Item>
+        </YStack>
+      </Story.Section>
+
+      <Story.Section title="Alignment">
+        <YStack
+          align="center"
+          className="border-border rounded-md border border-dashed p-4"
+          gap={3}
+        >
+          <Item>Narrow item</Item>
+          <Item>Another item</Item>
+        </YStack>
+      </Story.Section>
+
+      <Story.Section title="Distribution">
+        <YStack
+          className="border-border min-h-80 rounded-md border border-dashed p-4"
+          justify="between"
+        >
+          <Item>Top</Item>
+          <Item>Middle</Item>
+          <Item>Bottom</Item>
+        </YStack>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <YStack className="md:flex-row" gap={3}>
+          <Item>Vertical by default</Item>
+          <Item>Horizontal from md</Item>
+        </YStack>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/YStack.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { YStack } from './YStack';
+
+describe('YStack', () => {
+  it('renders a column stack with shared Flex props', () => {
+    render(
+      <YStack align="stretch" gap={3} justify="center">
+        Content
+      </YStack>,
+    );
+
+    expect(screen.getByText('Content')).toHaveClass(
+      'flex',
+      'flex-col',
+      'items-stretch',
+      'justify-center',
+      'gap-3',
+    );
+    expect(screen.getByText('Content')).toHaveAttribute('data-slot', 'y-stack');
+  });
+
+  it('merges consumer classes after the fixed direction', () => {
+    render(<YStack className="custom-class flex-row">Content</YStack>);
+
+    const element = screen.getByText('Content');
+    expect(element).toHaveClass('flex-row', 'custom-class');
+    expect(element).not.toHaveClass('flex-col');
+  });
+});

package/src/components/YStack.tsx

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

package/src/components/_internal/Story.tsx

@@ -0,0 +1,161 @@
+import { type ComponentType, Fragment, type ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Text } from '../Text';
+
+type ComponentMatrixCellProps = {
+  column: ComponentMatrixColumn;
+  row: ComponentMatrixRow;
+};
+
+type ComponentMatrixColumn = {
+  description?: string;
+  key: string;
+  label: string;
+};
+
+type ComponentMatrixProps = {
+  Cell: ComponentType<ComponentMatrixCellProps>;
+  cellClassName?: string;
+  cellWidth?: string;
+  className?: string;
+  columns: ComponentMatrixColumn[];
+  rows: ComponentMatrixRow[];
+};
+
+type ComponentMatrixRow = {
+  description?: string;
+  key: string;
+  label: string;
+};
+
+function Layout({
+  children,
+  className,
+  title,
+}: {
+  children: ReactNode;
+  className?: string;
+  title: string;
+}) {
+  return (
+    <div className="bg-background text-foreground min-h-screen font-sans">
+      <div className={cn('mx-auto px-8 py-12', className)}>
+        <header className="mb-12">
+          <Text as="h1" variant="h1">
+            {title}
+          </Text>
+        </header>
+        <div className="space-y-16">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+function Matrix({
+  Cell,
+  cellClassName,
+  cellWidth = 'minmax(12rem, 1fr)',
+  className,
+  columns,
+  rows,
+}: ComponentMatrixProps) {
+  const resolvedCellWidth =
+    cellWidth.includes('fr') || cellWidth.includes('minmax(')
+      ? cellWidth
+      : `minmax(${cellWidth}, 1fr)`;
+
+  return (
+    <div
+      className={cn(
+        'border-border bg-card/20 overflow-x-auto rounded-md border',
+        className,
+      )}
+    >
+      <div
+        className="grid min-w-max"
+        style={{
+          gridTemplateColumns: `12rem repeat(${columns.length}, ${resolvedCellWidth})`,
+        }}
+      >
+        <div className="border-border bg-muted/30 border-r border-b p-3" />
+        {columns.map((column, columnIndex) => (
+          <div
+            className={cn(
+              'border-border bg-muted/30 border-b p-3',
+              columnIndex < columns.length - 1 && 'border-r',
+            )}
+            key={column.key}
+          >
+            <div className="text-foreground text-sm font-medium">
+              {column.label}
+            </div>
+            {column.description ? (
+              <div className="text-muted-foreground mt-1 text-xs">
+                {column.description}
+              </div>
+            ) : null}
+          </div>
+        ))}
+
+        {rows.map((row, rowIndex) => (
+          <Fragment key={row.key}>
+            <div
+              className={cn(
+                'border-border bg-background/80 border-r p-3',
+                rowIndex < rows.length - 1 && 'border-b',
+              )}
+            >
+              <div className="text-foreground text-sm font-medium">
+                {row.label}
+              </div>
+              {row.description ? (
+                <div className="text-muted-foreground mt-1 max-w-40 text-xs">
+                  {row.description}
+                </div>
+              ) : null}
+            </div>
+            {columns.map((column, columnIndex) => (
+              <div
+                className={cn(
+                  'border-border bg-background/55 flex min-h-24 items-center justify-center p-4',
+                  rowIndex < rows.length - 1 && 'border-b',
+                  columnIndex < columns.length - 1 && 'border-r',
+                  cellClassName,
+                )}
+                key={`${row.key}-${column.key}`}
+              >
+                <Cell column={column} row={row} />
+              </div>
+            ))}
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Section({ children, title }: { children: ReactNode; title: string }) {
+  return (
+    <section>
+      <Text as="h2" className="mb-6" variant="h3">
+        {title}
+      </Text>
+      {children}
+    </section>
+  );
+}
+
+const Story = Object.assign(Layout, {
+  Layout,
+  Matrix,
+  Section,
+});
+
+export { Story };
+export type {
+  ComponentMatrixCellProps,
+  ComponentMatrixColumn,
+  ComponentMatrixRow,
+};

package/src/components/_internal/VisuallyHiddenInput.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import * as React from 'react';
+
+/* eslint-disable react-hooks/refs -- this component intentionally reads prevValueRef.current during render to track the previous value across renders; the ref holds derived bookkeeping state, not render-affecting data. */
+
+type InputValue = string | string[];
+
+interface VisuallyHiddenInputProps<T = InputValue> extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'onReset' | 'value'
+> {
+  bubbles?: boolean;
+  checked?: boolean;
+  control: HTMLElement | null;
+  value?: T;
+}
+
+function VisuallyHiddenInput<T = InputValue>(
+  props: VisuallyHiddenInputProps<T>,
+) {
+  const {
+    bubbles = true,
+    checked,
+    control,
+    style,
+    type = 'hidden',
+    value,
+    ...inputProps
+    // react-doctor-disable-next-line react-doctor/no-event-handler -- this hidden input intentionally mirrors value/checked into the native control and dispatches a native input/click event from an effect; the side effect is driven by prop changes, not a user event, so it cannot move into an event handler
+  } = props;
+
+  const isCheckInput = React.useMemo(
+    () => type === 'checkbox' || type === 'radio' || type === 'switch',
+    [type],
+  );
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const prevValueRef = React.useRef<{
+    previous: boolean | T | undefined;
+    value: boolean | T | undefined;
+  }>({
+    previous: isCheckInput ? checked : value,
+    value: isCheckInput ? checked : value,
+  });
+
+  const prevValue = React.useMemo(() => {
+    const currentValue = isCheckInput ? checked : value;
+    if (prevValueRef.current.value !== currentValue) {
+      prevValueRef.current.previous = prevValueRef.current.value;
+      prevValueRef.current.value = currentValue;
+    }
+    return prevValueRef.current.previous;
+  }, [isCheckInput, value, checked]);
+
+  const [controlSize, setControlSize] = React.useState<{
+    height?: number;
+    width?: number;
+  }>({});
+
+  // react-doctor-disable-next-line react-doctor/no-cascading-set-state -- this effect measures the control element and only calls setControlSize in mutually exclusive branches (or inside an async ResizeObserver callback), not as a synchronous render cascade
+  React.useLayoutEffect(() => {
+    if (!control) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset measured size synchronously when the control is removed so the hidden input does not retain a stale size
+      setControlSize({});
+      return;
+    }
+
+    setControlSize({
+      height: control.offsetHeight,
+      width: control.offsetWidth,
+    });
+
+    if (typeof window === 'undefined') return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (!Array.isArray(entries) || !entries.length) return;
+
+      const entry = entries[0];
+      if (!entry) return;
+
+      let width: number;
+      let height: number;
+
+      if ('borderBoxSize' in entry) {
+        const borderSizeEntry = entry.borderBoxSize;
+        const borderSize = Array.isArray(borderSizeEntry)
+          ? borderSizeEntry[0]
+          : borderSizeEntry;
+        width = borderSize.inlineSize;
+        height = borderSize.blockSize;
+      } else {
+        width = control.offsetWidth;
+        height = control.offsetHeight;
+      }
+
+      setControlSize({ height, width });
+    });
+
+    resizeObserver.observe(control, { box: 'border-box' });
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [control]);
+
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    const inputProto = window.HTMLInputElement.prototype;
+    const propertyKey = isCheckInput ? 'checked' : 'value';
+    const eventType = isCheckInput ? 'click' : 'input';
+    const currentValue = isCheckInput ? checked : value;
+
+    const serializedCurrentValue = isCheckInput
+      ? checked
+      : typeof value === 'object' && value !== null
+        ? JSON.stringify(value)
+        : value;
+
+    const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey);
+
+    const setter = descriptor?.set;
+
+    if (prevValue !== currentValue && setter) {
+      const event = new Event(eventType, { bubbles });
+      setter.call(input, serializedCurrentValue);
+      input.dispatchEvent(event);
+    }
+  }, [prevValue, value, checked, bubbles, isCheckInput]);
+
+  const composedStyle = React.useMemo<React.CSSProperties>(() => {
+    return {
+      ...style,
+      ...(controlSize.width !== undefined && controlSize.height !== undefined
+        ? controlSize
+        : {}),
+      border: 0,
+      clip: 'rect(0 0 0 0)',
+      clipPath: 'inset(50%)',
+      height: '1px',
+      margin: '-1px',
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      whiteSpace: 'nowrap',
+      width: '1px',
+    };
+  }, [style, controlSize]);
+
+  return (
+    <input
+      type={type}
+      {...inputProps}
+      aria-hidden={isCheckInput}
+      defaultChecked={isCheckInput ? checked : undefined}
+      ref={inputRef}
+      style={composedStyle}
+      tabIndex={-1}
+    />
+  );
+}
+
+export { VisuallyHiddenInput };

package/src/components/_internal/dialog-styles.ts

@@ -0,0 +1,57 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+import { textVariants } from '../Text';
+
+/** Shared look for `Dialog` and `AlertDialog`; not part of the public API. */
+
+const dialogBackdropClassName =
+  'fixed inset-0 z-50 bg-black/32 backdrop-blur-sm duration-200 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0';
+
+const dialogViewportClassName =
+  'fixed inset-0 z-50 flex flex-col items-center overflow-y-auto p-4 sm:p-6';
+
+const dialogPopupVariants = cva(
+  'bg-popover text-popover-foreground relative my-auto flex w-full min-w-0 flex-col gap-4 rounded-2xl border p-6 shadow-lg/5 duration-200 outline-none 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%)] 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 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]',
+  {
+    defaultVariants: {
+      size: 'md',
+    },
+    variants: {
+      size: {
+        lg: 'max-w-2xl',
+        md: 'max-w-lg',
+        sm: 'max-w-sm',
+      },
+    },
+  },
+);
+
+const dialogHeaderClassName = 'flex flex-col gap-1.5 text-center sm:text-start';
+
+const dialogFooterClassName =
+  'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end';
+
+const dialogTitleClassName = cn(
+  textVariants({ variant: 'h4' }),
+  'font-heading leading-snug font-semibold',
+);
+
+const dialogDescriptionClassName = textVariants({
+  tone: 'muted',
+  variant: 'body',
+});
+
+type DialogSize = NonNullable<VariantProps<typeof dialogPopupVariants>['size']>;
+
+export {
+  dialogBackdropClassName,
+  dialogDescriptionClassName,
+  dialogFooterClassName,
+  dialogHeaderClassName,
+  dialogPopupVariants,
+  dialogTitleClassName,
+  dialogViewportClassName,
+};
+export type { DialogSize };

package/src/components/_internal/layout.ts

@@ -0,0 +1,103 @@
+import { cn } from '@/lib/utils';
+
+const alignClasses = {
+  baseline: 'items-baseline',
+  center: 'items-center',
+  end: 'items-end',
+  start: 'items-start',
+  stretch: 'items-stretch',
+} as const;
+
+const gapClasses = {
+  0: 'gap-0',
+  0.5: 'gap-0.5',
+  1: 'gap-1',
+  1.5: 'gap-1.5',
+  2: 'gap-2',
+  2.5: 'gap-2.5',
+  3: 'gap-3',
+  3.5: 'gap-3.5',
+  4: 'gap-4',
+  5: 'gap-5',
+  6: 'gap-6',
+  8: 'gap-8',
+  10: 'gap-10',
+  12: 'gap-12',
+  16: 'gap-16',
+} as const;
+
+const gapXClasses = {
+  0: 'gap-x-0',
+  0.5: 'gap-x-0.5',
+  1: 'gap-x-1',
+  1.5: 'gap-x-1.5',
+  2: 'gap-x-2',
+  2.5: 'gap-x-2.5',
+  3: 'gap-x-3',
+  3.5: 'gap-x-3.5',
+  4: 'gap-x-4',
+  5: 'gap-x-5',
+  6: 'gap-x-6',
+  8: 'gap-x-8',
+  10: 'gap-x-10',
+  12: 'gap-x-12',
+  16: 'gap-x-16',
+} as const;
+
+const gapYClasses = {
+  0: 'gap-y-0',
+  0.5: 'gap-y-0.5',
+  1: 'gap-y-1',
+  1.5: 'gap-y-1.5',
+  2: 'gap-y-2',
+  2.5: 'gap-y-2.5',
+  3: 'gap-y-3',
+  3.5: 'gap-y-3.5',
+  4: 'gap-y-4',
+  5: 'gap-y-5',
+  6: 'gap-y-6',
+  8: 'gap-y-8',
+  10: 'gap-y-10',
+  12: 'gap-y-12',
+  16: 'gap-y-16',
+} as const;
+
+const justifyClasses = {
+  around: 'justify-around',
+  between: 'justify-between',
+  center: 'justify-center',
+  end: 'justify-end',
+  evenly: 'justify-evenly',
+  start: 'justify-start',
+} as const;
+
+type LayoutAlign = keyof typeof alignClasses;
+type LayoutGap = keyof typeof gapClasses;
+type LayoutJustify = keyof typeof justifyClasses;
+
+type LayoutStyleProps = {
+  align?: LayoutAlign;
+  gap?: LayoutGap;
+  gapX?: LayoutGap;
+  gapY?: LayoutGap;
+  justify?: LayoutJustify;
+};
+
+function getLayoutClasses({
+  align,
+  gap,
+  gapX,
+  gapY,
+  justify,
+}: LayoutStyleProps) {
+  return cn(
+    align === undefined ? undefined : alignClasses[align],
+    gap === undefined ? undefined : gapClasses[gap],
+    gapX === undefined ? undefined : gapXClasses[gapX],
+    gapY === undefined ? undefined : gapYClasses[gapY],
+    justify === undefined ? undefined : justifyClasses[justify],
+  );
+}
+
+export { getLayoutClasses };
+export type { LayoutStyleProps };

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Checkbox, type CheckboxProps } from './Checkbox';
+
+const meta = {
+  component: Checkbox,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/Checkbox',
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type CheckboxSize = NonNullable<CheckboxProps['size']>;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const STATE_COLUMNS: {
+  key: string;
+  label: string;
+  props: Partial<CheckboxProps>;
+}[] = [
+  { key: 'unchecked', label: 'Unchecked', props: {} },
+  { key: 'checked', label: 'Checked', props: { defaultChecked: true } },
+  { key: 'indeterminate', label: 'Mixed', props: { indeterminate: 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 SIZE_ROWS: {
+  key: CheckboxSize;
+  label: string;
+}[] = [
+  { key: 'md', label: 'Medium' },
+  { key: 'sm', label: 'Small' },
+];
+
+const STATE_PROPS = Object.fromEntries(
+  STATE_COLUMNS.map((state) => [state.key, state.props]),
+) as Record<string, Partial<CheckboxProps>>;
+
+function CheckboxStateCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Checkbox
+      aria-label={`${row.label} ${column.label}`}
+      size={row.key as CheckboxSize}
+      {...STATE_PROPS[column.key]}
+    />
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Checkbox">
+      <Story.Section title="Sizes and states">
+        <Story.Matrix
+          Cell={CheckboxStateCell}
+          cellWidth="8rem"
+          columns={STATE_COLUMNS}
+          rows={SIZE_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Label">
+        <Checkbox id="story-checkbox-label" label="Accept terms" />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};