# Hotelier Widgets
![GitHub package.json version](https://img.shields.io/github/package-json/v/Bintang-Technology-Solusindo/hotelier-widgets)


A set of ready-to-use hotel booking widgets. Lightweight, responsive, Shadow DOM friendly, and supports dark mode via Tailwind-compatible classes.

## ✨ Features

- 📦 Booking form with date and guest inputs
- 🌙 Dark mode support
- ⚙️ One-line CDN integration
- 🧩 Works inside Shadow DOM

---

## 🚀 Quick Start (CDN)

### 1. Add the CDN Script

```html
<script src="https://cdn.jsdelivr.net/npm/hotelier-widgets@latest/dist/hotelier-widgets.js" type="module"></script>
```

### 2. Insert the Widget Element

```html
<div hotelier-widget="horizontal-compact" data-url="https://yourdomain.com"></div>
```

### 3. Special Cases

For floating action widget (appears as a floating button):
```html
<div hotelier-widget="floating-action" data-url="https://yourdomain.com"></div>
```

## 💡 Available Widgets

| Widget Name                | Description                                                  | Best For            |
| -------------------------- | ------------------------------------------------------------ | ------------------- |
| `horizontal-compact`       | Compact and responsive horizontal form                       | Desktop layouts     |
| `horizontal-minimalis`     | Minimalistic horizontal form with clean layout               | Modern websites     |
| `horizontal-rounded`       | Horizontal form with rounded input and button styles         | Elegant designs     |
| `horizontal-glassmorphism` | **NEW!** Modern glassmorphism effect with backdrop blur      | Premium websites    |
| `vertical-prominent`       | Vertical layout with large, bold input fields and buttons    | Sidebar placements  |
| `vertical-dark`            | Dark-themed vertical layout, ideal for dark backgrounds      | Dark mode sites     |
| `vertical-gradient`        | Stylish vertical layout with gradient button styling         | Creative designs    |
| `vertical-modern`          | **NEW!** Modern card design with enhanced UX features        | Modern applications |
| `compact-mobile`           | **NEW!** Mobile-optimized compact widget with touch-friendly | Mobile-first sites  |
| `floating-action`          | **NEW!** Floating action button with modal booking form      | Any website overlay |

## ✨ Enhanced Features (v2.0)

- 🎯 **Multiple new widget designs** with modern UI patterns
- 📱 **Mobile-first responsive** design for all widgets
- 🌙 **Automatic dark mode** synchronization
- ⚡ **Loading states** and better user feedback
- 🔄 **Enhanced form validation** with real-time checks
- 🎨 **Glassmorphism effects** for premium feel
- 🚀 **Floating action modal** for overlay booking
- 🎭 **Smooth animations** and micro-interactions

### 📚 Documentation

View full documentation at: 👉 [here](https://bintang-technology-solusindo.github.io/hotelier-widgets)