Full Code of JoseRFelix/react-toggle-dark-mode for AI

Repository: JoseRFelix/react-toggle-dark-mode
Branch: master
Commit: a3cc623a837a
Files: 18
Total size: 25.0 KB

Directory structure:
gitextract_1hconnob/

├── .changeset/
│   ├── README.md
│   └── config.json
├── .github/
│   └── workflows/
│       └── main.yml
├── .gitignore
├── .husky/
│   └── pre-commit
├── CHANGELOG.md
├── LICENSE
├── README.md
├── example/
│   ├── .npmignore
│   ├── index.html
│   ├── index.tsx
│   ├── package.json
│   └── tsconfig.json
├── package.json
├── pnpm-workspace.yaml
├── src/
│   └── index.tsx
├── test/
│   └── index.test.tsx
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .changeset/README.md
================================================
# Changesets

Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)

We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)


================================================
FILE: .changeset/config.json
================================================
{
  "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "fixed": [],
  "linked": [],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
  "ignore": ["example"]
}


================================================
FILE: .github/workflows/main.yml
================================================
name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Begin CI...
        uses: actions/checkout@v4

      - name: Setup pnpm
        uses: pnpm/action-setup@v4

      - name: Use Node 20
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
          cache: pnpm

      - name: Setup Bun
        uses: oven-sh/setup-bun@v2

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
        env:
          CI: true

      - name: Lint
        run: pnpm lint
        env:
          CI: true

      - name: Test
        run: pnpm test
        env:
          CI: true

      - name: Build
        run: pnpm build
        env:
          CI: true

  react-compatibility:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        react-version: [16.14.0, 17.0.2, 18.3.1, 19.0.0]

    steps:
      - name: Begin compatibility checks...
        uses: actions/checkout@v4

      - name: Setup pnpm
        uses: pnpm/action-setup@v4

      - name: Use Node 20
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
          cache: pnpm

      - name: Setup Bun
        uses: oven-sh/setup-bun@v2

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
        env:
          CI: true

      - name: Test React ${{ matrix.react-version }} compatibility
        run: pnpm add -Dw react@${{ matrix.react-version }} react-dom@${{ matrix.react-version }} --ignore-scripts

      - name: Run tests
        run: pnpm test
        env:
          CI: true

      - name: Build with matrix React version
        run: pnpm build
        env:
          CI: true


================================================
FILE: .gitignore
================================================
*.log
.DS_Store
node_modules
.pnpm-store
.cache
dist
.parcel-cache

================================================
FILE: .husky/pre-commit
================================================
pnpm lint


================================================
FILE: CHANGELOG.md
================================================
# react-toggle-dark-mode

## 2.0.0

### Major Changes

- Modernize build setup and harden DarkModeSwitch for React 16–19

  ### Changed
  - Migrated project tooling from Yarn to pnpm.
  - Updated root scripts and package metadata for pnpm-based workflows.
  - Switched CI to modern GitHub Actions (`checkout@v4`, `setup-node@v4`, Node 20) and pnpm caching.
  - Added a React compatibility CI matrix for React 16, 17, 18, and 19.
  - Replaced `react-spring` import usage with `@react-spring/web`.
  - Updated dependencies/devDependencies across root and example app (React 19, newer TypeScript/tooling).
  - Modernized example app bootstrapping to `createRoot` and module script loading.
  - Updated README install instructions to show pnpm usage.
  - Added `.pnpm-store` to `.gitignore`.

  ### Improved
  - Refactored `DarkModeSwitch` animation property merging to avoid mutating defaults.
  - Improved prop typing (button-oriented props) and event handling in `DarkModeSwitch`.
  - Improved accessibility defaults (`role="switch"`, `aria-checked`, default label behavior).
  - Strengthened test suite with coverage for:
    - animation-property merge behavior
    - non-mutation of defaults
    - accessibility attributes
    - unique mask IDs across multiple component instances

  ### Removed
  - Removed legacy Yarn lockfiles (`yarn.lock`, `example/yarn.lock`).


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2020 Jose Felix

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: README.md
================================================
<div align="center">
  <h1>React Toggle Dark Mode</h1>
</div>
<p>
  <a href="https://www.npmjs.com/package/react-toggle-dark-mode" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/react-toggle-dark-mode.svg">
  </a>
  <img src="https://img.shields.io/badge/node-%3E%3D20-blue.svg" />
  <a href="#" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a> 
  <a href="http://makeapullrequest.com" target="_blank">
    <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
  </a>
  <img alt="Bundle size" src="https://badgen.net/bundlephobia/minzip/react-toggle-dark-mode" /> 
</p>

> 🌃 Animated dark mode toggle as seen in blogs!

Supports React 16.14+ through 19.

![Interactive sun and moon transition](./docs/demo.gif)

## Prerequisites

- node >=20

## Installation

```shell
npm i react-toggle-dark-mode
```

or with pnpm:

```shell
pnpm add react-toggle-dark-mode
```

## Usage

```jsx
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { DarkModeSwitch } from 'react-toggle-dark-mode';

const App = () => {
  const [isDarkMode, setDarkMode] = React.useState(false);

  const toggleDarkMode = (checked: boolean) => {
    setDarkMode(checked);
  };

  return (
    <DarkModeSwitch
      style={{ marginBottom: '2rem' }}
      checked={isDarkMode}
      onChange={toggleDarkMode}
      size={120}
    />
  );
};

const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Unable to find root element');
}

createRoot(rootElement).render(<App />);
```

## API

### DarkModeSwitch

#### Props

| Name                | Type                                               | Default Value                   | Description                                                                                  |
| ------------------- | -------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- |
| onChange            | \(checked: boolean\) => void                       |                                 | Event that triggers when icon is clicked.                                                    |
| checked             | boolean                                            | false                           | Current icon state.                                                                          |
| style               | React.CSSProperties                                |                                 | CSS properties object applied to the button wrapper.                                         |
| size                | number \| string                                   | 24                              | SVG size.                                                                                    |
| animationProperties | Partial animation properties object                | defaultProperties \(see below\) | Override only the fields you want; missing fields are merged with defaults.                 |
| moonColor           | string                                             | white                           | Color of the moon.                                                                           |
| sunColor            | string                                             | black                           | Color of the sun.                                                                            |
| aria-label          | string                                             | Toggle dark mode                | Accessible label for the control. Ignored when `aria-labelledby` is provided.               |
| aria-labelledby     | string                                             |                                 | Links the control to an external label element.                                              |
| onClick             | \(event: React.MouseEvent<HTMLButtonElement>\)=>void |                                 | Optional button click handler. Call `event.preventDefault()` to prevent toggling on click. |

All valid button attributes (except `children`) are forwarded to the underlying button element.

### Default Animation Properties

```javascript
const defaultProperties = {
  dark: {
    circle: {
      r: 9,
    },
    mask: {
      cx: '50%',
      cy: '23%',
    },
    svg: {
      transform: 'rotate(40deg)',
    },
    lines: {
      opacity: 0,
    },
  },
  light: {
    circle: {
      r: 5,
    },
    mask: {
      cx: '100%',
      cy: '0%',
    },
    svg: {
      transform: 'rotate(90deg)',
    },
    lines: {
      opacity: 1,
    },
  },
  springConfig: { mass: 4, tension: 250, friction: 35 },
};
```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://jfelix.info"><img src="https://avatars1.githubusercontent.com/u/21092519?s=460&u=55be9996a2652c79880c62ad50d06e17639456e8&v=4" width="100px;" alt=""/><br /><sub><b>Jose Felix</b></sub></a><br /><a href="https://github.com/JoseRFelix/react-toggle-dark-mode/commits?author=JoseRFelix" title="Code">💻</a> <a href="https://github.com/JoseRFelix/react-toggle-dark-mode/commits?author=JoseRFelix" title="Documentation">📖</a> <a href="https://github.com/JoseRFelix/react-toggle-dark-mode/commits?author=JoseRFelix" title="Tests">⚠️</a></td>    
  </tr>  
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://allcontributors.org) specification.
Contributions of any kind are welcome!

## Show your support

Give a ⭐️ if this project helped you!


================================================
FILE: example/.npmignore
================================================
node_modules
.cache
dist

================================================
FILE: example/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Playground</title>
  </head>

  <body style="margin: 0 ;">
    <div id="root"></div>
    <script type="module" src="./index.tsx"></script>
  </body>
</html>


================================================
FILE: example/index.tsx
================================================
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { DarkModeSwitch } from '../src';

function arrayN(size: number) {
  return new Array(size).fill(undefined);
}

const App = () => {
  const [isDarkMode, setDarkMode] = React.useState(false);
  const [toggleAmount, setToggleAmount] = React.useState(0);

  const toggleDarkMode = (checked: boolean) => {
    setDarkMode(checked);
  };

  const addToggle = () => {
    setToggleAmount((prevValue) => prevValue + 1);
  };

  return (
    <div
      style={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        background: isDarkMode ? '#1b242c' : 'white',
        transition: '0.2s background',
      }}
    >
      <DarkModeSwitch
        style={{ marginBottom: '2rem' }}
        checked={isDarkMode}
        onChange={toggleDarkMode}
        size={120}
      />
      <DarkModeSwitch
        style={{ marginBottom: '2rem' }}
        checked={isDarkMode}
        onChange={toggleDarkMode}
        size={80}
      />
      <DarkModeSwitch
        style={{ marginBottom: '2rem' }}
        checked={isDarkMode}
        onChange={toggleDarkMode}
        moonColor="red"
        size={30}
      />
      {arrayN(toggleAmount).map((_, index) => (
        <DarkModeSwitch
          key={index}
          style={{ marginBottom: '2rem' }}
          checked={isDarkMode}
          onChange={toggleDarkMode}
          size={Math.floor(Math.random() * 20) + 20}
        />
      ))}
      <button onClick={addToggle}>Add toggle</button>
    </div>
  );
};

const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Unable to find root element');
}

createRoot(rootElement).render(<App />);


================================================
FILE: example/package.json
================================================
{
  "name": "example",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "19.0.0",
    "react-dom": "19.0.0"
  },
  "devDependencies": {
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "parcel": "^2.16.4",
    "typescript": "^3.4.5"
  }
}


================================================
FILE: example/tsconfig.json
================================================
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": false,
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "removeComments": true,
    "strictNullChecks": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "lib": ["es2015", "es2016", "dom"],
    "baseUrl": ".",
    "types": ["node"]
  }
}


================================================
FILE: package.json
================================================
{
  "packageManager": "pnpm@10.28.2",
  "version": "2.0.0",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "private": false,
  "files": [
    "dist",
    "src"
  ],
  "engines": {
    "node": ">=20"
  },
  "scripts": {
    "start": "tsdx watch",
    "build": "tsdx build",
    "test": "tsdx test",
    "lint": "tsdx lint",
    "prepare": "husky && tsdx build"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "prettier": {
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "name": "react-toggle-dark-mode",
  "description": "Animated dark mode toggle as seen in blogs!",
  "author": "Jose R. Felix (https://jfelix.info)",
  "module": "dist/react-toggle-dark-mode.esm.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/JoseRFelix/react-toggle-dark-mode"
  },
  "bugs": {
    "url": "https://github.com/JoseRFelix/react-toggle-dark-mode/issues"
  },
  "homepage": "https://github.com/JoseRFelix/react-toggle-dark-mode#readme",
  "devDependencies": {
    "@types/jest": "^24.9.1",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "bunchee": "^6.9.4",
    "husky": "^9.1.7",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "tsdx": "^2.0.0",
    "tslib": "^2.8.1",
    "typescript": "^5.9.3",
    "vitest": "^4.0.18",
    "@changesets/cli": "^2.29.8"
  },
  "dependencies": {
    "@react-spring/web": "^10.0.3"
  }
}


================================================
FILE: pnpm-workspace.yaml
================================================
packages:
  - .
  - example


================================================
FILE: src/index.tsx
================================================
import * as React from 'react';
import { useSpring, animated } from '@react-spring/web';

export const defaultProperties = {
  dark: {
    circle: {
      r: 9,
    },
    mask: {
      cx: '50%',
      cy: '23%',
    },
    svg: {
      transform: 'rotate(40deg)',
    },
    lines: {
      opacity: 0,
    },
  },
  light: {
    circle: {
      r: 5,
    },
    mask: {
      cx: '100%',
      cy: '0%',
    },
    svg: {
      transform: 'rotate(90deg)',
    },
    lines: {
      opacity: 1,
    },
  },
  springConfig: { mass: 4, tension: 250, friction: 35 },
};

let REACT_TOGGLE_DARK_MODE_GLOBAL_ID = 0;
type AnimationProperties = typeof defaultProperties;
type ThemeProperties = AnimationProperties['dark'];
type PartialThemeProperties = {
  circle?: Partial<ThemeProperties['circle']>;
  mask?: Partial<ThemeProperties['mask']>;
  svg?: Partial<ThemeProperties['svg']>;
  lines?: Partial<ThemeProperties['lines']>;
};
type DarkModeSwitchAnimationProperties = {
  dark?: PartialThemeProperties;
  light?: PartialThemeProperties;
  springConfig?: Partial<AnimationProperties['springConfig']>;
};

const mergeThemeProperties = (
  theme: ThemeProperties,
  customTheme?: PartialThemeProperties
): ThemeProperties => ({
  circle: { ...theme.circle, ...customTheme?.circle },
  mask: { ...theme.mask, ...customTheme?.mask },
  svg: { ...theme.svg, ...customTheme?.svg },
  lines: { ...theme.lines, ...customTheme?.lines },
});

const resolveAnimationProperties = (
  animationProperties?: DarkModeSwitchAnimationProperties
): AnimationProperties => {
  if (!animationProperties || animationProperties === defaultProperties) {
    return defaultProperties;
  }

  return {
    dark: mergeThemeProperties(
      defaultProperties.dark,
      animationProperties.dark
    ),
    light: mergeThemeProperties(
      defaultProperties.light,
      animationProperties.light
    ),
    springConfig: {
      ...defaultProperties.springConfig,
      ...animationProperties.springConfig,
    },
  };
};

type ButtonProps = Omit<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  'onChange' | 'children'
>;
export interface Props extends ButtonProps {
  onChange: (checked: boolean) => void;
  checked: boolean;
  style?: React.CSSProperties;
  size?: number | string;
  animationProperties?: DarkModeSwitchAnimationProperties;
  moonColor?: string;
  sunColor?: string;
}

export const DarkModeSwitch: React.FC<Props> = ({
  onChange,
  checked = false,
  size = 24,
  animationProperties,
  moonColor = 'white',
  sunColor = 'black',
  style,
  onClick: onClickProp,
  role,
  tabIndex,
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  ...rest
}) => {
  const [id] = React.useState(() => {
    REACT_TOGGLE_DARK_MODE_GLOBAL_ID += 1;
    return REACT_TOGGLE_DARK_MODE_GLOBAL_ID;
  });

  const properties = React.useMemo(
    () => resolveAnimationProperties(animationProperties),
    [animationProperties]
  );

  const { circle, svg, lines, mask } = properties[checked ? 'dark' : 'light'];
  const { springConfig } = properties;

  const svgContainerProps = useSpring({
    ...svg,
    config: springConfig,
  });
  const centerCircleProps = useSpring({
    ...circle,
    config: springConfig,
  });
  const maskedCircleProps = useSpring({
    ...mask,
    config: springConfig,
  });
  const linesProps = useSpring({
    ...lines,
    config: springConfig,
  });

  const toggle = React.useCallback(
    () => onChange(!checked),
    [checked, onChange]
  );
  const onClick = React.useCallback(
    (event: React.MouseEvent<HTMLButtonElement>) => {
      event.stopPropagation();
      onClickProp?.(event);

      if (!event.defaultPrevented) {
        toggle();
      }
    },
    [onClickProp, toggle]
  );

  const uniqueMaskId = `circle-mask-${id}`;

  return (
    <button
      type="button"
      role={role ?? 'switch'}
      aria-checked={checked}
      aria-label={ariaLabelledBy ? undefined : ariaLabel ?? 'Toggle dark mode'}
      aria-labelledby={ariaLabelledBy}
      tabIndex={tabIndex ?? 0}
      onClick={onClick}
      style={{
        cursor: 'pointer',
        padding: 0,
        border: 0,
        background: 'transparent',
        lineHeight: 0,
        ...style,
      }}
      {...rest}
    >
      <animated.svg
        xmlns="http://www.w3.org/2000/svg"
        width={size}
        height={size}
        viewBox="0 0 24 24"
        color={checked ? moonColor : sunColor}
        fill="none"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        stroke="currentColor"
        style={svgContainerProps}
      >
        <mask id={uniqueMaskId}>
          <rect x="0" y="0" width="100%" height="100%" fill="white" />
          <animated.circle
            // @ts-ignore
            style={maskedCircleProps}
            r="9"
            fill="black"
          />
        </mask>

        <animated.circle
          cx="12"
          cy="12"
          fill={checked ? moonColor : sunColor}
          style={centerCircleProps}
          mask={`url(#${uniqueMaskId})`}
        />
        <animated.g stroke="currentColor" style={linesProps}>
          <line x1="12" y1="1" x2="12" y2="3" />
          <line x1="12" y1="21" x2="12" y2="23" />
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
          <line x1="1" y1="12" x2="3" y2="12" />
          <line x1="21" y1="12" x2="23" y2="12" />
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
        </animated.g>
      </animated.svg>
    </button>
  );
};


================================================
FILE: test/index.test.tsx
================================================
import * as React from 'react';
import { useSpring } from '@react-spring/web';
import { renderToStaticMarkup } from 'react-dom/server';
import { describe, expect, it, vi } from 'vitest';
import { DarkModeSwitch, defaultProperties } from '../src';

vi.mock('@react-spring/web', async () => {
  const actual =
    await vi.importActual<typeof import('@react-spring/web')>('@react-spring/web');
  return {
    ...actual,
    useSpring: vi.fn((props: unknown) => props),
  };
});

describe('DarkModeSwitch', () => {
  it('renders without crashing', () => {
    // Keep this test React-version-agnostic for the CI matrix (16/17/18/19):
    // server rendering avoids client API differences like render/createRoot.
    const html = renderToStaticMarkup(
      <DarkModeSwitch onChange={() => {}} checked={false} />
    );

    expect(html).toContain('<svg');
  });

  it('does not mutate default animation properties when overridden', () => {
    const originalDarkTransform = defaultProperties.dark.svg.transform;
    const originalLightRadius = defaultProperties.light.circle.r;
    const originalTension = defaultProperties.springConfig.tension;

    renderToStaticMarkup(
      <DarkModeSwitch
        onChange={() => {}}
        checked={false}
        animationProperties={{
          dark: { svg: { transform: 'rotate(0deg)' } },
          springConfig: { tension: 1 },
        }}
      />
    );

    expect(defaultProperties.dark.svg.transform).toBe(originalDarkTransform);
    expect(defaultProperties.light.circle.r).toBe(originalLightRadius);
    expect(defaultProperties.springConfig.tension).toBe(originalTension);
  });

  it('merges custom animation properties with defaults', () => {
    const springMock = vi.mocked(useSpring);
    springMock.mockClear();

    renderToStaticMarkup(
      <DarkModeSwitch
        onChange={() => {}}
        checked={true}
        animationProperties={{
          dark: {
            svg: { transform: 'rotate(0deg)' },
            mask: { cx: '42%' },
          },
          springConfig: { tension: 1 },
        }}
      />
    );

    const [svgProps, circleProps, maskProps, linesProps] = springMock.mock.calls.map(
      ([props]) => props as any
    );
    const expectedConfig = {
      ...defaultProperties.springConfig,
      tension: 1,
    };

    expect(springMock).toHaveBeenCalledTimes(4);
    expect(svgProps.transform).toBe('rotate(0deg)');
    expect(svgProps.config).toEqual(expectedConfig);
    expect(circleProps.r).toBe(defaultProperties.dark.circle.r);
    expect(circleProps.config).toEqual(expectedConfig);
    expect(maskProps.cx).toBe('42%');
    expect(maskProps.cy).toBe(defaultProperties.dark.mask.cy);
    expect(linesProps.opacity).toBe(defaultProperties.dark.lines.opacity);
    expect(linesProps.config).toEqual(expectedConfig);
  });

  it('renders switch accessibility attributes by default', () => {
    const html = renderToStaticMarkup(
      <DarkModeSwitch onChange={() => {}} checked={true} />
    );

    expect(html).toContain('role="switch"');
    expect(html).toContain('aria-checked="true"');
    expect(html).toContain('aria-label="Toggle dark mode"');
    expect(html).toContain('tabindex="0"');
  });

  it('supports aria-labelledby without requiring an aria-label', () => {
    const html = renderToStaticMarkup(
      <DarkModeSwitch
        onChange={() => {}}
        checked={false}
        aria-labelledby="dark-mode-switch-label"
      />
    );

    expect(html).toContain('aria-labelledby="dark-mode-switch-label"');
    expect(html).not.toContain('aria-label="Toggle dark mode"');
  });

  it('generates unique mask ids across multiple instances', () => {
    const html = renderToStaticMarkup(
      <>
        <DarkModeSwitch onChange={() => {}} checked={false} />
        <DarkModeSwitch onChange={() => {}} checked={true} />
      </>
    );

    const ids = html.match(/circle-mask-\d+/g) || [];
    const uniqueIds = Array.from(new Set(ids));

    expect(uniqueIds.length).toBe(2);
  });
});


================================================
FILE: tsconfig.json
================================================
{
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "importHelpers": true,
    "declaration": true,
    "sourceMap": true,
    "rootDir": "./src",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "*": ["src/*", "node_modules/*"]
    },
    "jsx": "react",
    "esModuleInterop": true
  }
}