npm package: @mawtech/glass-ui
Description: Beautiful Apple-style glassmorphism React components
Author: MAW Tech Solutions
Latest version: 0.2.1

# @mawtech/glass-ui

Beautiful Apple-style glassmorphism React components.

[![npm](https://img.shields.io/npm/v/@mawtech/glass-ui)](https://www.npmjs.com/package/@mawtech/glass-ui)
[![license](https://img.shields.io/npm/l/@mawtech/glass-ui)](https://github.com/mawtechsolutions/react-glass-ui/blob/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)
[![Storybook](https://img.shields.io/badge/Storybook-Live%20Demo-FF4785?logo=storybook&logoColor=white)](https://glass-ui.mawtechsolutions.com)

<p align="center">
  <a href="https://glass-ui.mawtechsolutions.com">
    <img src="https://raw.githubusercontent.com/mawtechsolutions/react-glass-ui/main/assets/preview.svg" alt="GlassUI Preview" width="700" />
  </a>
</p>

<p align="center">
  <a href="https://glass-ui.mawtechsolutions.com"><strong>📚 View Live Documentation & Components →</strong></a>
</p>

## ✨ Features

- 🎨 **Beautiful Design** - Apple macOS/visionOS inspired glassmorphism
- 🌙 **Dark Mode First** - Optimized for dark interfaces
- ♿ **Accessible** - Full keyboard navigation and ARIA support
- 📦 **Tree-shakeable** - Only import what you use
- 🎭 **Framer Motion** - Smooth animations out of the box
- 🛠 **TypeScript** - Full type safety
- 📚 **Storybook** - Interactive component documentation

## 📦 Installation

```bash
npm install @mawtech/glass-ui
# or
yarn add @mawtech/glass-ui
# or
pnpm add @mawtech/glass-ui
```

## 🚀 Quick Start

### 1. Import Styles

Add the styles to your app's entry point:

```tsx
import '@mawtech/glass-ui/styles.css';
```

### 2. Use Components

```tsx
import { useState } from 'react';
import { GlassCard, GlassButton, GlassInput } from '@mawtech/glass-ui';

function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Submitted:', { email, password });
  };

  return (
    <div className="min-h-screen bg-glass-dark p-8">
      <GlassCard variant="glow" padding="lg">
        <h2 className="text-2xl font-bold text-white mb-4">Sign In</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <GlassInput 
            label="Email" 
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@example.com"
          />
          <GlassInput 
            label="Password" 
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="••••••••"
          />
          <GlassButton type="submit" variant="primary" fullWidth>
            Sign In
          </GlassButton>
        </form>
      </GlassCard>
    </div>
  );
}
```

## 📚 Components

### Core
- **GlassCard** - Container with glassmorphism effect
- **GlassButton** - Button with multiple variants
- **GlassInput** - Text input with icons and validation

### GlassButton

```tsx
// Regular button (default type="button")
<GlassButton onClick={() => console.log('clicked')}>
  Click me
</GlassButton>

// Form submit button - MUST specify type="submit"
<form onSubmit={handleSubmit}>
  <GlassButton type="submit">Submit Form</GlassButton>
</form>

// With loading state
<GlassButton loading>Processing...</GlassButton>

// With icons
<GlassButton leftIcon={<IconPlus />}>Add Item</GlassButton>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Button type. **Must be "submit" for form submission** |
| `variant` | `'primary' \| 'secondary' \| 'ghost' \| 'danger'` | `'primary'` | Visual style |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Button size |
| `loading` | `boolean` | `false` | Shows loading spinner, disables button |
| `disabled` | `boolean` | `false` | Disables the button |

### GlassInput

Works as both controlled and uncontrolled component:

```tsx
// Controlled (recommended for forms)
const [email, setEmail] = useState('');

<GlassInput
  label="Email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  placeholder="you@example.com"
  error={!email ? 'Email is required' : undefined}
/>

// Uncontrolled
<GlassInput
  label="Username"
  defaultValue="john_doe"
  name="username"
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | - | Label text above input |
| `error` | `string` | - | Error message (shows in red) |
| `helperText` | `string` | - | Helper text below input |
| `inputSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input size |
| `leftIcon` | `ReactNode` | - | Icon inside input (left) |
| `rightIcon` | `ReactNode` | - | Icon inside input (right) |

### Form
- **GlassTextarea** - Multi-line text input
- **GlassSelect** - Dropdown select
- **GlassCheckbox** - Checkbox with custom styling
- **GlassSwitch** - Toggle switch

### Layout
- **GlassModal** - Dialog/modal with backdrop blur
- **GlassNavbar** - Responsive navigation bar
- **GlassSidebar** - Collapsible sidebar

### Overlay
- **GlassDropdown** - Dropdown menu
- **GlassTooltip** - Tooltip on hover
- **GlassTabs** - Tab navigation

### Feedback
- **GlassToast** - Toast notifications
- **GlassProgress** - Linear and circular progress

### Display
- **GlassAvatar** - User avatar with status
- **GlassBadge** - Badge/chip component
- **GlassCommandPalette** - ⌘K command menu

## 🪝 Hooks

### useToast

```tsx
import { ToastProvider, useToast } from '@mawtech/glass-ui';

function App() {
  return (
    <ToastProvider position="top-right">
      <MyComponent />
    </ToastProvider>
  );
}

function MyComponent() {
  const { success, error } = useToast();

  return (
    <button onClick={() => success('Saved!', 'Your changes have been saved.')}>
      Save
    </button>
  );
}
```

### useModal

```tsx
import { useModal, GlassModal, GlassButton } from '@mawtech/glass-ui';

function MyComponent() {
  const { isOpen, open, close } = useModal();

  return (
    <>
      <GlassButton onClick={open}>Open Modal</GlassButton>
      <GlassModal 
        open={isOpen} 
        onOpenChange={close}
        title="Hello!"
      >
        Modal content
      </GlassModal>
    </>
  );
}
```

### useTheme

```tsx
import { useTheme } from '@mawtech/glass-ui';

function ThemeToggle() {
  const { isDark, toggle } = useTheme();

  return (
    <button onClick={toggle}>
      {isDark ? '☀️' : '🌙'}
    </button>
  );
}
```

## 🎨 Design Tokens

```css
/* Colors */
--glass-cyan: #00F0FF;
--glass-violet: #8B5CF6;
--glass-pink: #EC4899;
--glass-dark: #09090B;
--glass-card: #0F172A;

/* Glass Effect */
--glass-blur: 40px;
--glass-bg-opacity: 0.7;
--glass-border-opacity: 0.12;
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
--glass-glow: 0 0 40px rgba(0, 240, 255, 0.3);
--glass-radius: 20px;

/* Animation */
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 350ms;
```

## 🛠 With Tailwind CSS

If you're using Tailwind CSS, you can extend your config:

```js
// tailwind.config.js
module.exports = {
  content: [
    // ... your content
    './node_modules/@mawtech/glass-ui/**/*.{js,mjs}',
  ],
  theme: {
    extend: {
      colors: {
        glass: {
          cyan: '#00F0FF',
          violet: '#8B5CF6',
          pink: '#EC4899',
          dark: '#09090B',
          card: '#0F172A',
        },
      },
    },
  },
};
```

## 📖 Documentation

🔗 **[View Live Documentation & Interactive Examples →](https://glass-ui.mawtechsolutions.com)**

Explore all components with live previews, code examples, and customization options in our Storybook documentation.

## 🤝 Contributing

Contributions are welcome! Please read our [contributing guide](CONTRIBUTING.md) first.

## 📄 License

MIT © [MAW Tech Solutions](https://mawtechsolutions.com)

---

<p align="center">
  Built with 💜 by <a href="https://mawtechsolutions.com">MAW Tech Solutions</a>
</p>

<p align="center">
  Need custom components or enterprise support? <a href="mailto:hello@mawtechsolutions.com">Contact us</a>
</p>