npm package: @nitesh6690/stellar-ui
Description: Beautifully styled React components built on Stellar UI primitives
Author: Stellar UI Team
Latest version: 0.1.1

# @stellar-ui/ui

Pre-styled, production-ready UI components built on top of the headless `@stellar-ui/core` primitives.

## Installation

```bash
npm install @stellar-ui/ui @stellar-ui/core react react-dom
```

## Usage

### Styled Dialog

Import the styled Dialog components and the CSS:

```tsx
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogBody,
  DialogFooter,
  DialogClose,
} from '@stellar-ui/ui';
import '@stellar-ui/ui/dialog.css';

function App() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <DialogClose />
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>
            This is the dialog description.
          </DialogDescription>
        </DialogHeader>
        <DialogBody>
          <p>Your dialog content goes here.</p>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger className="variant-secondary">Cancel</DialogTrigger>
          <DialogTrigger>Confirm</DialogTrigger>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

## Components

### Dialog (Root)
Re-export of the headless Dialog component from `@stellar-ui/core`.

**Props:**
- `open?: boolean` - Controlled open state
- `defaultOpen?: boolean` - Default open state
- `onOpenChange?: (open: boolean) => void` - Callback when open state changes
- `modal?: boolean` - Whether the dialog is modal (default: true)

### DialogTrigger
Styled button that toggles the dialog.

**CSS Variants:**
- Default (primary blue)
- `variant-secondary` - Gray background
- `variant-outline` - Outlined with transparent background
- `variant-destructive` - Red background for dangerous actions

### DialogContent
Pre-styled dialog content container with overlay.

**Features:**
- Centered modal positioning
- Smooth animations
- Responsive design
- Auto-includes DialogOverlay

### DialogHeader
Container for dialog title and description with proper spacing.

### DialogTitle
Styled h2 heading for the dialog title.

### DialogDescription
Styled description text below the title.

### DialogBody
Container for the main dialog content.

### DialogFooter
Action buttons container with responsive layout.

**Behavior:**
- Stacks vertically on mobile
- Horizontal with right alignment on desktop

### DialogClose
Close button (×) positioned in top-right corner.

**Props:**
- `children?` - Custom content (default: "×")

## Styling

The components come with beautiful default styles, but you can customize them by:

1. **Using CSS classes:**
```tsx
<DialogTrigger className="variant-destructive">
  Delete
</DialogTrigger>
```

2. **Overriding CSS:**
```css
.stellar-dialog-content {
  max-width: 600px;
  background: linear-gradient(to bottom, white, #f0f0f0);
}
```

3. **Using inline styles:**
```tsx
<DialogContent style={{ maxWidth: '800px' }}>
  ...
</DialogContent>
```

## Features

✨ **Pre-styled** - Beautiful default styles out of the box  
📱 **Responsive** - Mobile-friendly layouts  
🎬 **Animated** - Smooth entrance/exit animations  
🌙 **Dark Mode** - Automatic dark mode support  
♿ **Accessible** - Full keyboard and screen reader support  
🎨 **Customizable** - Easy to override with CSS  
🔧 **Composable** - Mix and match components as needed  

## CSS Variables

You can customize the theme using CSS variables:

```css
:root {
  --stellar-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
  --stellar-dialog-content-bg: white;
  --stellar-dialog-border-radius: 0.5rem;
  /* Add more as needed */
}
```

## Examples

See the [docs app](../../apps/docs) for complete examples including:
- Basic dialogs
- Controlled dialogs
- Forms in dialogs
- Confirmation dialogs
- Custom styled dialogs