@dashforge/tw 1.1.0 → 1.2.0

package/src/components/RadioGroup/radioGroup.variants.ts

@@ -1,87 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<RadioGroup>` with slots.
- *
- * Slots:
- *   - `root`         — outer wrapper (label + option list + helper/error)
- *   - `label`        — group-level label (rendered above the option list)
- *   - `requiredMark` — red asterisk for required groups
- *   - `optionList`   — container for the radio options (flex direction
- *                      decided by the `layout` variant)
- *   - `option`       — wrapper for a single option (control + label)
- *   - `control`      — visible circle (Radix `RadioGroup.Item`)
- *   - `indicator`    — inner dot (Radix `RadioGroup.Indicator`)
- *   - `optionLabel`  — text label associated with the control
- *   - `helperText`   — descriptive line below the option list
- *   - `errorText`    — semantic counterpart of helperText for error mode
- *
- * Variants:
- *   - `size`   : sm / md / lg — drives control circle + label text size
- *   - `layout` : stacked (vertical, default) / row (horizontal)
- *   - `error`  : bool — swaps borders + helperText color to danger tones
- */
-export const radioGroupVariants = tv({
-  slots: {
-    root: 'flex flex-col gap-1.5',
-    label: 'block text-sm font-medium text-neutral-900',
-    requiredMark: 'text-danger-500 ml-0.5',
-    optionList: 'flex gap-3',
-    option: 'inline-flex items-center gap-2',
-    control: [
-      'inline-flex items-center justify-center shrink-0',
-      // bg-neutral-50 inverts — dark-mode aware via the dashforge preset.
-      'rounded-full border bg-neutral-50',
-      'border-neutral-300',
-      'transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500',
-      'data-[state=checked]:border-primary-500',
-      'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
-    ],
-    indicator: 'block rounded-full bg-primary-500',
-    optionLabel: 'select-none cursor-pointer text-neutral-900',
-    helperText: 'text-sm text-neutral-600',
-    errorText: 'text-sm text-danger-600',
-  },
-  variants: {
-    size: {
-      sm: {
-        control: 'h-4 w-4',
-        indicator: 'h-2 w-2',
-        optionLabel: 'text-sm',
-      },
-      md: {
-        control: 'h-5 w-5',
-        indicator: 'h-2.5 w-2.5',
-        optionLabel: 'text-base',
-      },
-      lg: {
-        control: 'h-6 w-6',
-        indicator: 'h-3 w-3',
-        optionLabel: 'text-lg',
-      },
-    },
-    layout: {
-      stacked: { optionList: 'flex-col' },
-      row: { optionList: 'flex-row flex-wrap' },
-    },
-    error: {
-      true: {
-        control: 'border-danger-500 focus-visible:ring-danger-500',
-      },
-    },
-    disabled: {
-      true: {
-        control: 'opacity-50 cursor-not-allowed',
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    layout: 'stacked',
-    error: false,
-    disabled: false,
-  },
-});
-
-export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;

package/src/components/Skeleton/Skeleton.test.tsx

@@ -1,127 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, cleanup } from '@testing-library/react';
-import { Skeleton } from './Skeleton.js';
-
-void React;
-afterEach(() => cleanup());
-
-describe('Skeleton — rendering', () => {
-  it('renders a span with aria-hidden', () => {
-    const { container } = render(<Skeleton />);
-    const el = container.querySelector('span');
-    expect(el).not.toBeNull();
-    expect(el?.getAttribute('aria-hidden')).toBe('true');
-    expect(el?.getAttribute('role')).toBe('presentation');
-  });
-
-  it('defaults to variant=text + animation=pulse', () => {
-    const { container } = render(<Skeleton />);
-    const cls = container.querySelector('span')!.className;
-    expect(cls).toContain('animate-pulse');
-    // text variant has a height of 1em
-    expect(cls).toContain('h-[1em]');
-  });
-});
-
-describe('Skeleton — variants', () => {
-  it.each(['text', 'rectangle', 'circle'] as const)(
-    'renders variant=%s without crashing',
-    (variant) => {
-      const { container } = render(<Skeleton variant={variant} />);
-      expect(container.querySelector('span')).not.toBeNull();
-    },
-  );
-
-  it('rectangle has rounded-md class', () => {
-    const { container } = render(<Skeleton variant="rectangle" />);
-    expect(container.querySelector('span')!.className).toContain('rounded-md');
-  });
-
-  it('circle has rounded-full class', () => {
-    const { container } = render(<Skeleton variant="circle" />);
-    expect(container.querySelector('span')!.className).toContain('rounded-full');
-  });
-});
-
-describe('Skeleton — animations', () => {
-  it('animation=pulse adds animate-pulse', () => {
-    const { container } = render(<Skeleton animation="pulse" />);
-    expect(container.querySelector('span')!.className).toContain('animate-pulse');
-  });
-
-  it('animation=none does NOT add animate-pulse', () => {
-    const { container } = render(<Skeleton animation="none" />);
-    expect(container.querySelector('span')!.className).not.toContain('animate-pulse');
-  });
-
-  it('animation=wave adds overflow-hidden + after gradient', () => {
-    const { container } = render(<Skeleton animation="wave" />);
-    const cls = container.querySelector('span')!.className;
-    expect(cls).toContain('overflow-hidden');
-    expect(cls).toContain('relative');
-  });
-
-  it('always carries motion-reduce safety regardless of animation', () => {
-    const { container } = render(<Skeleton animation="pulse" />);
-    expect(container.querySelector('span')!.className).toContain('motion-reduce:animate-none');
-  });
-});
-
-describe('Skeleton — dimensions', () => {
-  it('passes width as inline style', () => {
-    const { container } = render(<Skeleton width="200px" />);
-    expect((container.querySelector('span') as HTMLElement).style.width).toBe('200px');
-  });
-
-  it('passes height as inline style', () => {
-    const { container } = render(<Skeleton variant="rectangle" height="120px" />);
-    expect((container.querySelector('span') as HTMLElement).style.height).toBe('120px');
-  });
-
-  it('for circle, height defaults to width', () => {
-    const { container } = render(<Skeleton variant="circle" width="48px" />);
-    const el = container.querySelector('span') as HTMLElement;
-    expect(el.style.width).toBe('48px');
-    expect(el.style.height).toBe('48px');
-  });
-
-  it('for circle, explicit height wins over width-default', () => {
-    const { container } = render(<Skeleton variant="circle" width="48px" height="64px" />);
-    const el = container.querySelector('span') as HTMLElement;
-    expect(el.style.width).toBe('48px');
-    expect(el.style.height).toBe('64px');
-  });
-});
-
-describe('Skeleton — sx + slotProps', () => {
-  it('appends sx to root className', () => {
-    const { container } = render(<Skeleton sx="my-custom-sx" />);
-    expect(container.querySelector('span')!.className).toContain('my-custom-sx');
-  });
-
-  it('applies slotProps.root.className', () => {
-    const { container } = render(
-      <Skeleton slotProps={{ root: { className: 'slot-class' } }} />,
-    );
-    expect(container.querySelector('span')!.className).toContain('slot-class');
-  });
-
-  it('sx wins over variant default on conflict via tailwind-merge', () => {
-    // variant=text emits `bg-neutral-200`; sx forces `bg-red-500`.
-    const { container } = render(<Skeleton sx="bg-red-500" />);
-    const cls = container.querySelector('span')!.className;
-    expect(cls).toContain('bg-red-500');
-    expect(cls).not.toContain('bg-neutral-200');
-  });
-});
-
-describe('Skeleton — accessibility', () => {
-  it('does not appear in role-based queries (aria-hidden + role=presentation)', () => {
-    const { container } = render(<Skeleton />);
-    const el = container.querySelector('span')!;
-    expect(el.getAttribute('aria-hidden')).toBe('true');
-    expect(el.getAttribute('role')).toBe('presentation');
-  });
-});

package/src/components/Skeleton/Skeleton.tsx

@@ -1,49 +0,0 @@
-import type { CSSProperties } from 'react';
-import { cn } from '../../utils/cn.js';
-import { skeletonVariants } from './skeleton.variants.js';
-import type { SkeletonProps } from './skeleton.types.js';
-
-/**
- * Dashforge TW `<Skeleton>` — loading placeholder primitive.
- *
- * Renders as a non-interactive `<span aria-hidden="true">` so screen
- * readers skip it. The surrounding component is responsible for
- * announcing loading state via `aria-busy` or `aria-live` if needed.
- *
- * Variants:
- *   - `variant` — `text` (default, line shape) / `rectangle` / `circle`
- *   - `animation` — `pulse` (default) / `wave` / `none`
- *
- * Both animations are gated by `prefers-reduced-motion` (WCAG 2.3.3).
- *
- * @example
- * ```tsx
- * <Skeleton variant="text" width="200px" />
- * <Skeleton variant="rectangle" width="100%" height="120px" />
- * <Skeleton variant="circle" width="40px" />
- * ```
- */
-export function Skeleton(props: SkeletonProps) {
-  const { variant = 'text', animation = 'pulse', width, height, sx, slotProps } = props;
-  const v = skeletonVariants({ variant, animation });
-
-  // Width / height come through as inline style — Tailwind doesn't
-  // know about arbitrary user-supplied lengths. We default `circle`'s
-  // height to `width` so consumers don't have to repeat themselves.
-  const style: CSSProperties = {};
-  if (width != null) style.width = width;
-  if (height != null) {
-    style.height = height;
-  } else if (variant === 'circle' && width != null) {
-    style.height = width;
-  }
-
-  return (
-    <span
-      aria-hidden="true"
-      role="presentation"
-      className={cn(v.root(), sx, slotProps?.root?.className)}
-      style={style}
-    />
-  );
-}

package/src/components/Skeleton/skeleton.types.ts

@@ -1,59 +0,0 @@
-import type { SkeletonVariants } from './skeleton.variants.js';
-
-export interface SkeletonSlotProps {
-  /** Root element override. */
-  root?: { className?: string };
-}
-
-/**
- * Props for `<Skeleton>`.
- *
- * Visual loading placeholder shown while data / images / components
- * are being prepared. Three shapes (`variant`), three animations
- * (`animation`), and free-form `width` / `height` for arbitrary
- * dimensions.
- *
- * Rendered as a non-interactive `<span aria-hidden="true">` so screen
- * readers skip it entirely.
- *
- * Compose by nesting: e.g. avatar + two text lines for a card
- * placeholder.
- *
- * @example
- * ```tsx
- * <Skeleton variant="text"      width="200px" />
- * <Skeleton variant="rectangle" width="100%" height="120px" />
- * <Skeleton variant="circle"    width="40px" />
- *
- * // Compose to mimic a card shape
- * <div className="flex gap-3">
- *   <Skeleton variant="circle" width="48px" />
- *   <div className="flex flex-col gap-2 flex-1">
- *     <Skeleton variant="text" width="60%" />
- *     <Skeleton variant="text" width="40%" />
- *   </div>
- * </div>
- * ```
- */
-export interface SkeletonProps
-  extends Pick<SkeletonVariants, 'variant' | 'animation'> {
-  /**
-   * CSS width (e.g. `"200px"`, `"100%"`, `"60%"`).
-   *
-   * Defaults: `text` → `100%`, `rectangle` → `100%`, `circle` → `40px`.
-   */
-  width?: string;
-
-  /**
-   * CSS height (e.g. `"1em"`, `"120px"`).
-   *
-   * Defaults: `text` → `1em`, `rectangle` → `100px`, `circle` → matches `width`.
-   */
-  height?: string;
-
-  /** Root-level Tailwind override (wins via `tailwind-merge`). */
-  sx?: string;
-
-  /** Per-slot overrides. */
-  slotProps?: SkeletonSlotProps;
-}

package/src/components/Skeleton/skeleton.variants.ts

@@ -1,87 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * `<Skeleton>` variant recipe.
- *
- * Slots:
- *  - `root` — single element (atomic component)
- *
- * Variant axes:
- *  - `variant` (`text` | `rectangle` | `circle`) — shape / radius
- *  - `animation` (`pulse` | `wave` | `none`) — how the placeholder
- *    "breathes" while data loads. Always gated on
- *    `prefers-reduced-motion` (no exception — animations are
- *    purely cosmetic).
- *
- * Implementation notes:
- *
- *  - `pulse` uses Tailwind's built-in `animate-pulse` (opacity
- *    1.0 ↔ 0.5 over 2s, ease-in-out infinite).
- *  - `wave` overlays a moving gradient. Implemented with a
- *    `relative` container + an `::after` pseudo-element via a
- *    Tailwind arbitrary-value class. The gradient slides
- *    horizontally over the surface, mimicking the MUI Skeleton
- *    "wave" look.
- *  - Color uses neutral-200 (light) and neutral-800 (dark) for
- *    the base, picked up automatically by the dashforge preset's
- *    CSS-variable layer.
- *
- * Accessibility: the root has `aria-hidden="true"` (set on the JSX
- * side, not here). Screen readers skip the skeleton entirely;
- * the surrounding component is responsible for announcing
- * loading state via `aria-busy` or `aria-live` if needed.
- */
-export const skeletonVariants = tv({
-  slots: {
-    root: [
-      'block',
-      // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
-      'bg-neutral-200',
-      'motion-reduce:animate-none',
-    ],
-  },
-  variants: {
-    variant: {
-      text: {
-        root: 'rounded h-[1em] w-full',
-      },
-      rectangle: {
-        root: 'rounded-md w-full h-[100px]',
-      },
-      circle: {
-        root: 'rounded-full w-10 h-10',
-      },
-    },
-    animation: {
-      pulse: {
-        root: 'animate-pulse',
-      },
-      wave: {
-        root: [
-          'relative overflow-hidden',
-          // The wave is rendered via an arbitrary-value ::after
-          // pseudo-element with a moving linear gradient. Tailwind
-          // doesn't ship a `wave` keyframe; we use the built-in
-          // `animate-pulse` as a fallback if a consumer needs to
-          // override. The gradient stop direction works in both
-          // light and dark mode (white shimmer in light, lighter
-          // overlay in dark).
-          'after:absolute after:inset-0',
-          'after:bg-gradient-to-r after:from-transparent after:via-white/40 after:to-transparent',
-          'dark:after:via-white/10',
-          'after:animate-pulse',
-          'after:motion-reduce:animate-none',
-        ],
-      },
-      none: {
-        root: '',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'text',
-    animation: 'pulse',
-  },
-});
-
-export type SkeletonVariants = VariantProps<typeof skeletonVariants>;

package/src/components/Snackbar/Snackbar.perf.test.tsx

@@ -1,144 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Performance + re-render budget tests for `<SnackbarProvider>`.
- *
- * Guardrails:
- *
- *  1. Mount cost stays tiny — provider lives near app root.
- *  2. Enqueueing N snackbars in quick succession is O(N) total work,
- *     NOT O(N²) at the React level.
- *  3. Provider re-renders ONLY when the visible set changes — children
- *     subtree is untouched per enqueue.
- *  4. `api` object identity is stable across provider re-renders so
- *     consumers can put `enqueue` in `useEffect` deps safely.
- */
-import * as React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-  act,
-} from '@testing-library/react';
-import { SnackbarProvider, useSnackbar } from './Snackbar.js';
-
-void React;
-afterEach(() => cleanup());
-
-describe('<SnackbarProvider> performance', () => {
-  it('mounts in under 200ms with empty children (cold-start safe budget)', () => {
-    const t0 = performance.now();
-    render(
-      <SnackbarProvider>
-        <div />
-      </SnackbarProvider>
-    );
-    const t1 = performance.now();
-    // Generous bound for cold-start under workspace-wide test runs;
-    // warm path is sub-10ms.
-    expect(t1 - t0).toBeLessThan(200);
-  });
-
-  it('enqueues 50 snackbars (cap=50) under 200ms', () => {
-    function Adder() {
-      const { enqueue } = useSnackbar();
-      return (
-        <button
-          data-testid="a"
-          onClick={() => {
-            for (let i = 0; i < 50; i++) {
-              enqueue({ message: `msg-${i}`, autoHideMs: 0 });
-            }
-          }}
-        >
-          add
-        </button>
-      );
-    }
-    render(
-      <SnackbarProvider maxVisible={50}>
-        <Adder />
-      </SnackbarProvider>
-    );
-    const t0 = performance.now();
-    act(() => {
-      fireEvent.click(screen.getByTestId('a'));
-    });
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(200);
-  });
-});
-
-describe('<SnackbarProvider> re-render budget', () => {
-  it('children subtree does NOT re-render on enqueue', () => {
-    const childCount = { count: 0 };
-    const Child = () => {
-      childCount.count++;
-      return <div data-testid="child" />;
-    };
-    function Adder() {
-      const { enqueue } = useSnackbar();
-      return (
-        <button
-          data-testid="a"
-          onClick={() => enqueue({ message: 'hi', autoHideMs: 0 })}
-        >
-          add
-        </button>
-      );
-    }
-    render(
-      <SnackbarProvider>
-        <Child />
-        <Adder />
-      </SnackbarProvider>
-    );
-    const baseline = childCount.count;
-    act(() => {
-      fireEvent.click(screen.getByTestId('a'));
-      fireEvent.click(screen.getByTestId('a'));
-      fireEvent.click(screen.getByTestId('a'));
-    });
-    // The provider RE-renders on each enqueue (state change), which
-    // re-renders its direct children — Child is one of them, so it
-    // re-renders too. The contract is "no MORE than one re-render
-    // PER enqueue". Three enqueues ⇒ ≤ 3 extra child renders.
-    expect(childCount.count - baseline).toBeLessThanOrEqual(3);
-  });
-
-  it('useSnackbar() returns a STABLE api identity across re-renders', () => {
-    const captured: Array<unknown> = [];
-    function Capture() {
-      const api = useSnackbar();
-      captured.push(api);
-      return null;
-    }
-    const Outer = ({ x }: { x: number }) => (
-      <SnackbarProvider>
-        <div data-x={x} />
-        <Capture />
-      </SnackbarProvider>
-    );
-    const { rerender } = render(<Outer x={1} />);
-    rerender(<Outer x={2} />);
-    rerender(<Outer x={3} />);
-    expect(captured.length).toBeGreaterThanOrEqual(3);
-    expect(captured[0]).toBe(captured[1]);
-    expect(captured[1]).toBe(captured[2]);
-  });
-
-  it('renders at most 2 times on mount (provider wrapper)', () => {
-    let count = 0;
-    const Counted = (p: React.ComponentProps<typeof SnackbarProvider>) => {
-      count++;
-      return <SnackbarProvider {...p} />;
-    };
-    render(
-      <Counted>
-        <div />
-      </Counted>
-    );
-    expect(count).toBeLessThanOrEqual(2);
-  });
-});