@regardio/react 1.2.0 → 1.3.0

package/README.md

@@ -6,11 +6,11 @@ Components that have carried real Regardio work, gathered here so other projects
 
 ## Pre-release notice
 
-This package is currently at v0.x. The components run in production across Regardio's own projects, but the API may still move between minor versions. A few habits that help:
+This package is work-in-progress. The components run in production across Regardio's own projects, but the API may still move between minor versions. A few habits that help:
 
 - Pin to exact versions in `package.json`
 - Read the changelog before upgrading
-- Expect the occasional breaking change until v1.0
+- Expect the occasional breaking change as we move along.
 
 ## What it's for
 
@@ -31,7 +31,6 @@ pnpm add @regardio/react
 
 - `react` >= 19.0.0
 - `react-dom` >= 19.0.0
-- `react-router` >= 7.0.0 (for routing components)
 - `tailwindcss` >= 4.0.0 (for styling)
 
 ## Usage
@@ -39,8 +38,8 @@ pnpm add @regardio/react
 Import components, hooks, and utilities directly from their paths so tree-shaking does its work:
 
 ```tsx
-import { Box } from '@regardio/react/box';
-import { Link } from '@regardio/react/link';
+import { Button } from '@regardio/react/button';
+import { Heading } from '@regardio/react/heading';
 import { useNonce } from '@regardio/react/hooks/use-nonce';
 ```
 
@@ -60,46 +59,48 @@ import '@regardio/react/tailwind.css';
 |-----------|-------------|
 | `BackgroundSlideshow` | Animated background image carousel with crossfade transitions |
 | `BlurryGradient` | SVG-based decorative gradient backgrounds |
-| `Box` | Flexible container with variant-based styling |
+| `Button` | Button component with variant-based styling |
 | `Carousel` | Embla-powered carousel with navigation controls |
+| `Checkbox` | Checkbox input component |
+| `CheckboxGroup` | Group of checkbox inputs |
 | `Countdown` | Dynamic countdown timer display |
-| `GenericError` | React Router error boundary with i18n support |
+| `Field` | Form field wrapper component |
+| `Fieldset` | Fieldset component for form grouping |
+| `Form` | Form component with validation support |
+| `Grid` | Grid layout component |
 | `Heading` | Semantic headings (h1–h6) with consistent styling |
 | `Highlight` | Text highlighting with customisable styles |
 | `IconButton` | Button shaped for icon-only content |
 | `If` | Conditional rendering utility component |
 | `Iframe` | Responsive iframe with sensible defaults |
-| `Item` | Grid item with theme colours and link support |
-| `LeafletMap` | Leaflet map integration |
-| `Link` | React Router link with external URL detection |
+| `Input` | Text input component |
 | `List` | Compound list component with Root and Item |
-| `MaptilerMap` | MapTiler SDK integration |
 | `MarkdownContainer` | MDX/Markdown renderer with typography processing |
 | `PasswordInput` | Password field with visibility toggle |
 | `Picture` | Responsive images with srcset generation |
 | `ProtectedEmail` | Email obfuscation for spam protection |
+| `Radio` | Radio input component |
+| `RadioGroup` | Group of radio inputs |
+| `Slider` | Slider input component |
+| `Switch` | Toggle switch component |
 | `Text` | Typography component with variants |
+| `Toggle` | Toggle button component |
 
 ### Hooks
 
 | Hook | Description |
 |------|-------------|
-| `useCurrentRouteData` | Access current route loader data |
 | `useFocusSearch` | Focus management for search inputs |
-| `useMatchesData` | Access matched route data |
 | `useMediaQuery` | Reactive media query matching |
 | `useMobile` | Mobile device detection |
 | `useNonce` | CSP nonce access for inline styles |
 | `useOrientation` | Device orientation detection |
-| `useUser` | User context from Supabase auth |
 
 ### Utilities
 
 | Utility | Description |
 |---------|-------------|
 | `author` | Author and contributor data formatting |
-| `isRouteActive` | Route matching helpers |
-| `locale` | Locale detection and formatting |
 | `text` | Typography processing (quotes, special characters) |
 
 > **Note:** For Tailwind utilities like `cn`, `tv`, and `twMerge`, reach for `@regardio/tailwind/utils`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "description": "Regardio React UI components",
   "keywords": [
@@ -67,10 +67,6 @@
       "import": "./dist/form/index.mjs",
       "types": "./dist/form/index.d.mts"
     },
-    "./generic-error": {
-      "import": "./dist/generic-error/index.mjs",
-      "types": "./dist/generic-error/index.d.mts"
-    },
     "./grid": {
       "import": "./dist/grid/index.mjs",
       "types": "./dist/grid/index.d.mts"
@@ -83,18 +79,10 @@
       "import": "./dist/highlight/index.mjs",
       "types": "./dist/highlight/index.d.mts"
     },
-    "./hooks/use-current-route-data": {
-      "import": "./dist/hooks/use-current-route-data.mjs",
-      "types": "./dist/hooks/use-current-route-data.d.mts"
-    },
     "./hooks/use-focus-search": {
       "import": "./dist/hooks/use-focus-search.mjs",
       "types": "./dist/hooks/use-focus-search.d.mts"
     },
-    "./hooks/use-matches-data": {
-      "import": "./dist/hooks/use-matches-data.mjs",
-      "types": "./dist/hooks/use-matches-data.d.mts"
-    },
     "./hooks/use-media-query": {
       "import": "./dist/hooks/use-media-query.mjs",
       "types": "./dist/hooks/use-media-query.d.mts"
@@ -111,10 +99,6 @@
       "import": "./dist/hooks/use-orientation.mjs",
       "types": "./dist/hooks/use-orientation.d.mts"
     },
-    "./hooks/use-user": {
-      "import": "./dist/hooks/use-user.mjs",
-      "types": "./dist/hooks/use-user.d.mts"
-    },
     "./icon-button": {
       "import": "./dist/icon-button/index.mjs",
       "types": "./dist/icon-button/index.d.mts"
@@ -131,10 +115,6 @@
       "import": "./dist/input/index.mjs",
       "types": "./dist/input/index.d.mts"
     },
-    "./link": {
-      "import": "./dist/link/index.mjs",
-      "types": "./dist/link/index.d.mts"
-    },
     "./list": {
       "import": "./dist/list/index.mjs",
       "types": "./dist/list/index.d.mts"
@@ -198,12 +178,11 @@
   "dependencies": {
     "@base-ui/react": "1.4.1",
     "@mdx-js/react": "3.1.1",
-    "@supabase/supabase-js": "2.105.3",
     "embla-carousel": "8.6.0",
     "embla-carousel-react": "8.6.0",
-    "markdown-to-jsx": "9.7.16",
-    "@regardio/js": "1.2.0",
-    "@regardio/tailwind": "1.2.0"
+    "markdown-to-jsx": "9.8.0",
+    "@regardio/js": "1.2.2",
+    "@regardio/tailwind": "1.2.2"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.3.6",
@@ -211,32 +190,32 @@
     "@storybook/addon-vitest": "10.3.6",
     "@storybook/react": "10.3.6",
     "@storybook/react-vite": "10.3.6",
-    "@tailwindcss/vite": "4.2.4",
+    "@tailwindcss/vite": "4.3.0",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/leaflet": "1.9.21",
-    "@types/node": "25.6.2",
+    "@types/node": "25.7.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser-playwright": "4.1.5",
-    "@vitest/coverage-v8": "4.1.5",
-    "@vitest/ui": "4.1.5",
+    "@vitest/browser-playwright": "4.1.6",
+    "@vitest/coverage-v8": "4.1.6",
+    "@vitest/ui": "4.1.6",
     "jsdom": "29.1.1",
-    "playwright": "1.59.1",
+    "playwright": "1.60.0",
     "storybook": "10.3.6",
-    "tailwindcss": "4.2.4",
+    "tailwindcss": "4.3.0",
     "tsdown": "0.22.0",
     "typescript": "6.0.3",
-    "vite": "8.0.11",
-    "vitest": "4.1.5",
-    "@regardio/dev": "2.6.0"
+    "vite": "8.0.12",
+    "vitest": "4.1.6",
+    "@regardio/dev": "2.7.0"
   },
   "peerDependencies": {
     "react": ">=19",
-    "react-dom": ">=19",
-    "react-router": ">=7"
+    "react-dom": ">=19"
   },
   "scripts": {
     "build": "tsdown",
@@ -250,7 +229,7 @@
     "lint:biome": "biome check .",
     "lint:md": "markdownlint-cli2 --config ../../.markdownlint-cli2.jsonc",
     "lint:pkg": "sort-package-json --check",
-    "report": "vitest run --coverage",
+    "report": "vitest run --coverage --project unit",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o storybook-static",
     "test": "run-p test:*",

package/src/background-slideshow/background-slideshow.test.tsx

@@ -0,0 +1,146 @@
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { BackgroundSlideshow, type ImageData } from './background-slideshow';
+
+afterEach(() => {
+  cleanup();
+});
+
+const makeImage = (id: string): ImageData => ({
+  at: { en: `Alt for ${id}` },
+  fn: `${id}.jpg`,
+  hu: 0,
+  id,
+  po: false,
+});
+
+describe('BackgroundSlideshow', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders an empty div when no images are provided', () => {
+    const { container } = render(
+      <BackgroundSlideshow
+        baseUrl="https://cdn.example.com/{id}/{fn}"
+        images={[]}
+        locale="en"
+      />,
+    );
+    expect(container.firstChild).toBeEmptyDOMElement();
+  });
+
+  it('renders the first image immediately', () => {
+    const images = [makeImage('img-1'), makeImage('img-2')];
+    const { container } = render(
+      <BackgroundSlideshow
+        baseUrl="https://cdn.example.com/{id}/{fn}"
+        images={images}
+        locale="en"
+      />,
+    );
+    const imgs = container.querySelectorAll('img');
+    expect(imgs[0]).toHaveAttribute('alt', 'Alt for img-1');
+  });
+
+  it('does not start a slideshow with a single image', () => {
+    const images = [makeImage('img-1')];
+    const { container } = render(
+      <BackgroundSlideshow
+        baseUrl="https://cdn.example.com/{id}/{fn}"
+        images={images}
+        locale="en"
+      />,
+    );
+    act(() => {
+      vi.advanceTimersByTime(20_000);
+    });
+    expect(container.querySelectorAll('img')).toHaveLength(1);
+  });
+
+  it('starts the slideshow after the interval when slideshow=true', () => {
+    const images = [makeImage('img-1'), makeImage('img-2')];
+    const { container } = render(
+      <BackgroundSlideshow
+        baseUrl="https://cdn.example.com/{id}/{fn}"
+        images={images}
+        locale="en"
+        slideshow
+        slideshowInterval={1000}
+        transitionDuration={500}
+      />,
+    );
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+    expect(container.querySelectorAll('img').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('does not start slideshow when slideshow=false', () => {
+    const images = [makeImage('img-1'), makeImage('img-2')];
+    const { container } = render(
+      <BackgroundSlideshow
+        baseUrl="https://cdn.example.com/{id}/{fn}"
+        images={images}
+        locale="en"
+        slideshow={false}
+      />,
+    );
+    act(() => {
+      vi.advanceTimersByTime(20_000);
+    });
+    expect(container.querySelectorAll('img')).toHaveLength(1);
+  });
+
+  it('applies a filter function', () => {
+    const images = [makeImage('img-1'), makeImage('img-2'), makeImage('img-3')];
+    const { container } = render(
+      <BackgroundSlideshow
+        baseUrl="https://cdn.example.com/{id}/{fn}"
+        filter={(img) => img.id === 'img-2'}
+        images={images}
+        locale="en"
+        slideshow={false}
+      />,
+    );
+    expect(container.querySelector('img')).toHaveAttribute('alt', 'Alt for img-2');
+  });
+
+  it('falls back to all images when filter excludes everything', () => {
+    const images = [makeImage('img-1'), makeImage('img-2')];
+    const { container } = render(
+      <BackgroundSlideshow
+        baseUrl="https://cdn.example.com/{id}/{fn}"
+        filter={() => false}
+        images={images}
+        locale="en"
+        slideshow={false}
+      />,
+    );
+    expect(container.querySelectorAll('img')[0]).toHaveAttribute('alt', 'Alt for img-1');
+  });
+
+  it('clears timers on unmount', () => {
+    const clearTimeoutSpy = vi.spyOn(window, 'clearTimeout');
+    const images = [makeImage('img-1'), makeImage('img-2')];
+    const { unmount } = render(
+      <BackgroundSlideshow
+        baseUrl="https://cdn.example.com/{id}/{fn}"
+        images={images}
+        locale="en"
+        slideshow
+        slideshowInterval={1000}
+        transitionDuration={500}
+      />,
+    );
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+    unmount();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+  });
+});

package/src/carousel/carousel.test.tsx

@@ -0,0 +1,86 @@
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { CarouselRoot, useCarousel } from './carousel-root';
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    value: vi.fn().mockImplementation((query: string) => ({
+      addEventListener: vi.fn(),
+      addListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+      matches: false,
+      media: query,
+      onchange: null,
+      removeEventListener: vi.fn(),
+      removeListener: vi.fn(),
+    })),
+    writable: true,
+  });
+
+  globalThis.IntersectionObserver = vi.fn().mockImplementation(function MockIntersectionObserver() {
+    return { disconnect: vi.fn(), observe: vi.fn(), unobserve: vi.fn() };
+  }) as unknown as typeof IntersectionObserver;
+
+  globalThis.ResizeObserver = vi.fn().mockImplementation(function MockResizeObserver() {
+    return { disconnect: vi.fn(), observe: vi.fn(), unobserve: vi.fn() };
+  }) as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('CarouselRoot', () => {
+  it('renders children', () => {
+    const { getByTestId } = render(
+      <CarouselRoot>
+        <div data-testid="child">slide</div>
+      </CarouselRoot>,
+    );
+    expect(getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('renders as a section with carousel role description', () => {
+    const { getByRole } = render(<CarouselRoot>content</CarouselRoot>);
+    const section = getByRole('region', { name: 'Carousel' });
+    expect(section).toBeInTheDocument();
+    expect(section).toHaveAttribute('aria-roledescription', 'carousel');
+  });
+
+  it('applies className', () => {
+    const { getByRole } = render(<CarouselRoot className="custom-carousel">content</CarouselRoot>);
+    expect(getByRole('region')).toHaveClass('custom-carousel');
+  });
+
+  it('handles ArrowLeft keydown', () => {
+    const { getByRole } = render(<CarouselRoot>content</CarouselRoot>);
+    fireEvent.keyDown(getByRole('region'), { key: 'ArrowLeft' });
+  });
+
+  it('handles ArrowRight keydown', () => {
+    const { getByRole } = render(<CarouselRoot>content</CarouselRoot>);
+    fireEvent.keyDown(getByRole('region'), { key: 'ArrowRight' });
+  });
+
+  it('calls setApi when provided', () => {
+    const setApi = (api: unknown) => api;
+    render(<CarouselRoot setApi={setApi}>content</CarouselRoot>);
+  });
+
+  it('renders with vertical orientation', () => {
+    const { getByRole } = render(<CarouselRoot orientation="vertical">content</CarouselRoot>);
+    expect(getByRole('region')).toBeInTheDocument();
+  });
+});
+
+describe('useCarousel', () => {
+  it('throws when used outside CarouselRoot', () => {
+    const ThrowingComponent = () => {
+      useCarousel();
+      return null;
+    };
+    expect(() => render(<ThrowingComponent />)).toThrow(
+      'useCarousel must be used within a <Carousel.Root />',
+    );
+  });
+});

package/src/countdown/countdown.test.tsx

@@ -0,0 +1,46 @@
+import { act, cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Countdown } from './countdown';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('Countdown', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders initial mounted state showing padded zero', () => {
+    render(<Countdown />);
+    const span = document.querySelector('span');
+    expect(span?.textContent).toBe('00');
+  });
+
+  it('shows padded value after one tick', () => {
+    render(<Countdown />);
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    expect(screen.getByText('01')).toBeInTheDocument();
+  });
+
+  it('shows unpadded value once counter reaches 10', () => {
+    render(<Countdown />);
+    act(() => {
+      vi.advanceTimersByTime(10_000);
+    });
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('clears the interval on unmount', () => {
+    const clearIntervalSpy = vi.spyOn(globalThis, 'clearInterval');
+    const { unmount } = render(<Countdown />);
+    unmount();
+    expect(clearIntervalSpy).toHaveBeenCalled();
+  });
+});

package/src/grid/grid.test.tsx

@@ -0,0 +1,94 @@
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { GridItem } from './grid-item';
+import { GridRoot, useGrid } from './grid-root';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('GridRoot', () => {
+  it('renders children', () => {
+    const { getByTestId } = render(
+      <GridRoot>
+        <div data-testid="child">content</div>
+      </GridRoot>,
+    );
+    expect(getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('applies className', () => {
+    const { getByTestId } = render(
+      <GridRoot
+        className="custom-grid"
+        data-testid="grid"
+      >
+        content
+      </GridRoot>,
+    );
+    expect(getByTestId('grid')).toHaveClass('custom-grid');
+  });
+
+  it('applies flow variant', () => {
+    const { getByTestId } = render(
+      <GridRoot
+        data-testid="grid"
+        flow="row"
+      >
+        content
+      </GridRoot>,
+    );
+    expect(getByTestId('grid')).toHaveClass('grid-auto-flow-row');
+  });
+
+  it('applies align variant', () => {
+    const { getByTestId } = render(
+      <GridRoot
+        align="center"
+        data-testid="grid"
+      >
+        content
+      </GridRoot>,
+    );
+    expect(getByTestId('grid')).toHaveClass('content-center');
+  });
+});
+
+describe('useGrid', () => {
+  it('throws when used outside GridRoot', () => {
+    const ThrowingComponent = () => {
+      useGrid();
+      return null;
+    };
+    expect(() => render(<ThrowingComponent />)).toThrow(
+      'useGrid must be used within a <Grid.Root />',
+    );
+  });
+});
+
+describe('GridItem', () => {
+  it('renders children inside GridRoot', () => {
+    const { getByTestId } = render(
+      <GridRoot>
+        <GridItem>
+          <span data-testid="item-content">item</span>
+        </GridItem>
+      </GridRoot>,
+    );
+    expect(getByTestId('item-content')).toBeInTheDocument();
+  });
+
+  it('applies span class', () => {
+    const { getByTestId } = render(
+      <GridRoot>
+        <GridItem
+          data-testid="item"
+          span={6}
+        >
+          item
+        </GridItem>
+      </GridRoot>,
+    );
+    expect(getByTestId('item')).toHaveClass('col-span-6');
+  });
+});