npm package: @strato-css/preset-advanced
Description: Advanced preset for Strato CSS with animations, transforms, and backdrop filters
Latest version: 1.1.0

# @strato-css/preset-advanced

Advanced preset for Strato CSS framework. This preset provides animation utilities, transform utilities, backdrop filters, and table utilities.

## Installation

```bash
pnpm add @strato-css/preset-advanced
```

## Usage

```typescript
import { defineConfig } from '@strato-css/core';
import presetAdvanced from '@strato-css/preset-advanced';

export default defineConfig({
  presets: [
    presetAdvanced()
  ]
});
```

## Features

### Animation Utilities

#### Keyframe Animations
- `animate-spin` - Rotate 360deg
- `animate-ping` - Scale and fade out
- `animate-pulse` - Fade in and out
- `animate-bounce` - Bounce up and down

#### Animation Utilities
- `animate-none` - No animation
- Custom animation durations
- Custom animation delays
- Custom animation timing functions

### Transform Utilities

#### Scale Transforms
- `scale-0` to `scale-150` - Scale from 0% to 150%
- `scale-x-0` to `scale-x-150` - Scale X axis
- `scale-y-0` to `scale-y-150` - Scale Y axis

#### Rotate Transforms
- `rotate-0` to `rotate-180` - Rotate in 45deg increments
- `rotate-270`, `rotate-360` - Additional rotations
- Negative rotations: `-rotate-45`, `-rotate-90`, etc.

#### Translate Transforms
- `translate-x-0` to `translate-x-full` - X translation
- `translate-y-0` to `translate-y-full` - Y translation
- Negative translations available

#### Skew Transforms
- `skew-x-0` to `skew-x-12` - Skew X axis
- `skew-y-0` to `skew-y-12` - Skew Y axis
- Negative skews available

#### Transform Origin
- `origin-center`, `origin-top`, `origin-right`, etc.
- `origin-top-left`, `origin-top-right`, etc.

### Backdrop Filter Utilities

#### Blur
- `backdrop-blur-none`, `backdrop-blur-sm`, `backdrop-blur`, `backdrop-blur-md`, `backdrop-blur-lg`, `backdrop-blur-xl`, `backdrop-blur-2xl`, `backdrop-blur-3xl`

#### Brightness
- `backdrop-brightness-0` to `backdrop-brightness-150` - In 25 unit increments
- `backdrop-brightness-50`, `backdrop-brightness-75`, etc.

#### Contrast
- `backdrop-contrast-0` to `backdrop-contrast-200` - In 50 unit increments
- Negative contrast: `backdrop-contrast-50`

#### Grayscale
- `backdrop-grayscale-0` to `backdrop-grayscale` - Grayscale filter

#### Hue Rotate
- `backdrop-hue-rotate-0` to `backdrop-hue-rotate-180` - In 15deg increments

#### Invert
- `backdrop-invert-0` to `backdrop-invert` - Invert filter

#### Saturate
- `backdrop-saturate-0` to `backdrop-saturate-200` - In 50 unit increments

#### Sepia
- `backdrop-sepia-0` to `backdrop-sepia` - Sepia filter

### Table Utilities

#### Table Layout
- `table-auto` - Automatic table layout
- `table-fixed` - Fixed table layout

#### Border Collapse
- `border-collapse` - Collapse borders
- `border-separate` - Separate borders

#### Caption Side
- `caption-top` - Caption on top
- `caption-bottom` - Caption on bottom

#### Table Cell Alignment
- `table-cell` - Display as table cell
- `table-row` - Display as table row
- `table-header-group` - Display as table header
- `table-row-group` - Display as table row group
- `table-footer-group` - Display as table footer
- `table-column-group` - Display as table column group
- `table-column` - Display as table column

## Examples

### Animations

```html
<div class="animate-spin">
  Loading...
</div>

<div class="animate-pulse">
  Loading...
</div>
```

### Transforms

```html
<div class="scale-150 rotate-45">
  Scaled and rotated
</div>

<div class="hover:scale-110 transition">
  Scale on hover
</div>
```

### Backdrop Filters

```html
<div class="backdrop-blur-md bg-white/30">
  Frosted glass effect
</div>

<div class="backdrop-brightness-110">
  Brighter backdrop
</div>
```

### Tables

```html
<table class="table-auto border-collapse">
  <thead class="table-header-group">
    <tr class="table-row">
      <th class="table-cell">Header</th>
    </tr>
  </thead>
  <tbody class="table-row-group">
    <tr class="table-row">
      <td class="table-cell">Cell</td>
    </tr>
  </tbody>
</table>
```

## Development

### Testing

```bash
# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

### Build

```bash
# Build the package
pnpm build

# Build in watch mode
pnpm dev
```

### Type Checking

```bash
# Run TypeScript type checking
pnpm typecheck
```

## License

MIT