npm package: @jotaksantos/frostui-v4
Description: FrostUI v4 - Component library built upon Tailwind CSS v4 with 100% backward compatibility
Author: JotaKSantos
Latest version: 4.0.1

# @jotaksantos/frostui-v4

🚀 **FrostUI v4** - Component library built upon Tailwind CSS v4 with **100% backward compatibility**

## ✨ Key Features

- 🎯 **100% Backward Compatible** - Zero breaking changes from FrostUI v3
- ⚡ **Tailwind CSS v4** - Latest version with improved performance  
- 🔄 **Data Attributes** - Keep using your existing `data-fc-type` syntax
- 🆕 **Modern API** - Optional programmatic JavaScript API
- 📱 **All Components** - Modal, Offcanvas, Dropdown, Collapse, Tab, Accordion, Tooltip
- 🎨 **Theme Support** - Built-in dark/light theme switching

## 🚀 Quick Start

### Installation

```bash
npm install @jotaksantos/frostui-v4
```

### Basic Usage (100% Compatible with v3)

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="node_modules/@jotaksantos/frostui-v4/dist/styles.css">
</head>
<body>
    <!-- Your existing FrostUI v3 code works without changes! -->
    <button data-fc-target="my-modal" data-fc-type="modal">Show Modal</button>
    <button data-fc-target="my-dropdown" data-fc-type="dropdown">Show Dropdown</button>
    <button data-fc-target="my-collapse" data-fc-type="collapse">Toggle Collapse</button>
    
    <!-- Components are auto-initialized -->
    <script src="node_modules/@jotaksantos/frostui-v4/dist/frostui.umd.cjs"></script>
</body>
</html>
```

## 🔄 Migration from FrostUI v3

**Zero breaking changes!** Just update your imports:

### Before (v3):
```html
<script src="node_modules/@frostui/tailwindcss/dist/frostui.js"></script>
```

### After (v4):
```html
<script src="node_modules/@jotaksantos/frostui-v4/dist/frostui.umd.cjs"></script>
```

**That's it!** Your HTML code remains exactly the same.

## 🆕 New Features (Optional)

### Modern ES Modules
```js
import { Modal, Offcanvas, Dropdown, Collapse } from '@jotaksantos/frostui-v4'

const modal = new Modal('#my-modal')
modal.show()
```

### Programmatic API
```js
// Works alongside data attributes
const modal = new frost.Modal('#my-modal')
modal.show()
modal.hide()
modal.toggle()

const offcanvas = new frost.Offcanvas('#my-offcanvas')
offcanvas.show()
```

## 🎯 Components

All components support both data attributes (v3 compatible) and programmatic usage:

| Component | Data Attribute | Class |
|---|---|---|
| Modal | `data-fc-type="modal"` | `Modal` |
| Offcanvas | `data-fc-type="offcanvas"` | `Offcanvas` |
| Dropdown | `data-fc-type="dropdown"` | `Dropdown` |
| Collapse | `data-fc-type="collapse"` | `Collapse` |
| Tab | `data-fc-type="tab"` | `Tab` |
| Accordion | `data-fc-type="accordion"` | `Accordion` |
| Tooltip | `data-fc-type="tooltip"` | `Tooltip` |

## ⚙️ Tailwind CSS v4 Configuration

### Install Tailwind CSS v4

```bash
npm install tailwindcss@^4.1.13 @tailwindcss/vite@^4.1.13
```

### Add to your `tailwind.config.js`:

```js
import frostuiPlugin from "@jotaksantos/frostui-v4/plugin"

export default {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
    "./node_modules/@jotaksantos/frostui-v4/**/*.js",
  ],
  plugins: [
    frostuiPlugin({ colors: true }), // Enable FrostUI color palette
  ],
}
```

### Add to your CSS:

```css
@import "tailwindcss";
```

## 🎨 Examples

### Modal
```html
<button data-fc-target="example-modal" data-fc-type="modal">
    Show Modal
</button>

<div id="example-modal" class="fc-modal fixed inset-0 z-50 hidden">
    <div class="fc-modal-backdrop fixed inset-0 bg-gray-900 bg-opacity-50"></div>
    <div class="fc-modal-content relative z-10 mx-auto mt-20 max-w-md bg-white rounded-lg">
        <div class="p-6">
            <h3 class="text-lg font-semibold">Modal Title</h3>
            <p class="text-gray-600 mt-2">Modal content here...</p>
            <button data-fc-dismiss="modal" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded">
                Close
            </button>
        </div>
    </div>
</div>
```

### Dropdown
```html
<button data-fc-target="example-dropdown" data-fc-type="dropdown">
    Show Dropdown
</button>

<div id="example-dropdown" class="fc-dropdown bg-white border rounded-lg shadow-lg hidden">
    <a href="#" class="block px-4 py-2 hover:bg-gray-100">Action 1</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-100">Action 2</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-100">Action 3</a>
</div>
```

## 📦 What's Included

- `dist/frostui.umd.cjs` - UMD build for browser `<script>` tags
- `dist/frostui.js` - ES Module build for modern bundlers
- `dist/index.d.ts` - TypeScript definitions
- `plugin.js` - Tailwind CSS v4 plugin

## 🔗 Links

- [GitHub Repository](https://github.com/JotaKSantos/frostui-v4)
- [Migration Guide](https://github.com/JotaKSantos/frostui-v4/blob/main/packages/tailwindcss/COMPATIBILITY.md)
- [Examples](https://github.com/JotaKSantos/frostui-v4/tree/main/packages/tailwindcss/examples)

## 📝 License

MIT License - feel free to use in your projects!

## 🤝 Credits

Based on the original FrostUI library. Updated to Tailwind CSS v4 with full backward compatibility maintained.

---

**Need help migrating?** Check out our [detailed migration guide](https://github.com/JotaKSantos/frostui-v4/blob/main/packages/tailwindcss/COMPATIBILITY.md) with examples and step-by-step instructions!