# Theme Toggler

Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin.

## Installation

```bash
# CLI example
```

```bash
# Manual installation
```

## Usage

Use `variant` to change the clip-path shape of the view transition (`circle`, `square`, `triangle`, `diamond`, `rectangle`, `hexagon`, or `star`):

```javascript
// Usage example
```

Expand from the viewport center instead of the button with `fromCenter`:

```javascript
// Usage example
```

## Examples

The preview at the top of this page uses the default **circle** reveal. Below, each variant has its own isolated preview so you can test one shape at a time.

### Square

```javascript
// Preview code
```

### Diamond

```javascript
// Preview code
```

### Rectangle

```javascript
// Preview code
```

### Hexagon

```javascript
// Preview code
```

### Triangle

```javascript
// Preview code
```

### Star

```javascript
// Preview code
```

## Props

| Prop           | Type         | Default | Description                                                             |
|----------------|--------------|---------|-------------------------------------------------------------------------|
| `className`    | `string`     | —       | Additional classes for the button                                      |
| `duration`     | `number`     | `400`  | Duration of the theme transition animation in milliseconds               |
| `variant`      | `TransitionVariant` | `"circle"` | Shape used for the view-transition clip-path reveal                   |
| `fromCenter`   | `boolean`    | `false` | If true, the clip expands from the viewport center instead of the button |

Export `TransitionVariant` from the same module when you need typed props or menus.

## Credits

- Credit to [Nazam Kalsi](https://nazam-kalsi-portfolio.vercel.app/), [chishiyac](https://github.com/chishiyac), [dikshantgulekar20-oss](https://github.com/dikshantgulekar20-oss)