npm package: @mornox/mornox-buttons
Description: Configurable, high-quality glassmorphism buttons for React. Built with Tailwind CSS.
Author: Mornox UI
Latest version: 1.2.8

# Mornox Buttons

The premium, high-performance glassmorphism button component for React.
Designed for modern interfaces that need that extra "pop" without the complexity.

[**View Live Demo**](https://mornox.github.io/mornox-buttons)

## Features

- **True Glassmorphism**: Multi-layered backdrop blur, reflection, and border handling.
- **Configurable Glow**: Control the color, blur radius, and opacity of the ambient light.
- **Physics-based Highlights**: Internal layers prevent extrusion bugs on rounded corners.
- **Interactive**: Hover states for glow intensity, internal shimmer, and scale.
- **Dark Mode Ready**: Automatically adapts surface opacity and colors for light/dark themes.

## Requirements

This component uses **Tailwind CSS** for its internal layout structure, but its advanced visual effects (glow, pulse, glass) differ:

- **Visuals**: Powered by direct CSS and injected styles. No external `tailwind.config.js` changes required for animations.
- **Colors**: Supports both Tailwind utility classes (e.g. `from-indigo-500`) AND standard CSS values (e.g. `#ff0000`, `linear-gradient(...)`).

## Installation

```bash
npm install @mornox/mornox-buttons
# or
yarn add @mornox/mornox-buttons
```

## Quick Start

```tsx
import { MornoxButton } from "@mornox/mornox-buttons";

function App() {
  return (
    <div className="p-10 flex gap-4 bg-gray-900">
      {/* Basic Usage */}
      <MornoxButton>Get Started</MornoxButton>

      {/* Customized */}
      <MornoxButton glowColor="from-emerald-400 to-cyan-500" glowBlur="blur-xl" cornerRadius="rounded-full">
        Success
      </MornoxButton>
    </div>
  );
}
```

## 📋 Props

| Prop                | Type                                              | Default                  | Description                                                                      |
| ------------------- | ------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------- |
| `variant`           | `'air' \| 'regular'`                              | `'air'`                  | Shorthand to set both Light and Dark variants.                                   |
| `lightVariant`      | `'air' \| 'regular'`                              | `'air'`                  | Specific visual style for Light Mode.                                            |
| `darkVariant`       | `'air' \| 'regular'`                              | `'air'`                  | Specific visual style for Dark Mode.                                             |
| `size`              | `'tiny' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | `'lg'`                   | Button size.                                                                     |
| `glowColor`         | `string`                                          | `'linear-gradient(...)'` | Tailwind classes OR CSS value (`#f00`, `linear-gradient(...)`).                  |
| `glowBlur`          | `string \| number`                                | `32`                     | Blur amount in pixels (number) or class (`blur-xl`).                             |
| `glowOpacity`       | `string \| number`                                | `0.4`                    | Opacity (0-1 number) or class (`opacity-40`).                                    |
| `hoverGlowBlur`     | `string \| number`                                | `48`                     | Blur amount when hovered (px) or class.                                          |
| `hoverGlowOpacity`  | `string \| number`                                | `0.6`                    | Opacity when hovered (0-1) or class.                                             |
| `cornerRadius`      | `number \| string`                                | `16`                     | Border radius in pixels (number) or CSS string (e.g. "12px").                    |
| `showPulse`         | `boolean`                                         | `true`                   | Enable/disable the breathing pulse animation.                                    |
| `pulseDuration`     | `string`                                          | `'4s'`                   | Duration of the pulse animation.                                                 |
| `borderIntensity`   | `'subtle' \| 'medium' \| 'ultra'`                 | `'medium'`               | Strength of the gradient border/reflection.                                      |
| `highlightOpacity`  | `number`                                          | `0.5`                    | Opacity of the top highlight reflection (0-1).                                   |
| `shimmerMode`       | `'none' \| 'hover' \| 'always'`                   | `'hover'`                | When to show the shimmer effect.                                                 |
| `shimmerDuration`   | `string`                                          | `'1.5s'`                 | Duration of the shimmer animation.                                               |
| `shimmerOpacity`    | `number`                                          | `0.3`                    | Opacity of the shimmer effect (0-1).                                             |
| `contrastThreshold` | `number`                                          | `190`                    | Luma threshold (0-255) for adaptive text. Below = white text, above = dark text. |
| `forceTheme`        | `'light' \| 'dark'`                               | `undefined`              | Force the button to render in a specific theme mode.                             |
| `className`         | `string`                                          | `''`                     | Additional CSS classes to apply to the button.                                   |

## Development

This project uses React and Tailwind CSS.

1. **Install dependencies**: `npm install`
2. **Run local server**: `npm run start`
3. **Build for production**: `npm run build`

## License

MIT © [Mornox](https://mornox.com)