npm package: @nitesh6690/stellar-ui-core
Description: Headless, accessible UI primitives for React
Author: Stellar UI Team
Latest version: 0.1.0

# @stellar-ui/core

Headless, accessible UI primitives for React. Build your own design system with unstyled, accessible components.

## Installation

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

## Features

- 🎯 **Headless**: Complete control over styling
- ♿ **Accessible**: ARIA-compliant with keyboard navigation
- 🔧 **Composable**: Compound component pattern
- 📦 **Tree-shakeable**: Import only what you need
- 🎨 **Unstyled**: Bring your own styles
- ⚡ **Lightweight**: Minimal bundle size

## Components

### Dialog

```tsx
import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@stellar-ui/core';

function App() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <DialogTitle>Dialog Title</DialogTitle>
        <p>Dialog content goes here</p>
      </DialogContent>
    </Dialog>
  );
}
```

### Button

```tsx
import { Button } from '@stellar-ui/core';

function App() {
  return <Button onClick={() => alert('clicked')}>Click me</Button>;
}
```

### Popover

```tsx
import { Popover, PopoverTrigger, PopoverContent } from '@stellar-ui/core';

function App() {
  return (
    <Popover>
      <PopoverTrigger>Open Popover</PopoverTrigger>
      <PopoverContent side="top">
        <p>Popover content</p>
      </PopoverContent>
    </Popover>
  );
}
```

### Tooltip

```tsx
import { Tooltip } from '@stellar-ui/core';

function App() {
  return (
    <Tooltip content="This is a tooltip" side="top">
      <button>Hover me</button>
    </Tooltip>
  );
}
```

### Dropdown

```tsx
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@stellar-ui/core';

function App() {
  return (
    <Dropdown>
      <DropdownTrigger>Open Menu</DropdownTrigger>
      <DropdownContent>
        <DropdownItem onSelect={() => console.log('Edit')}>Edit</DropdownItem>
        <DropdownItem onSelect={() => console.log('Delete')}>Delete</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}
```

### Select

```tsx
import { Select, SelectTrigger, SelectContent, SelectItem } from '@stellar-ui/core';

function App() {
  return (
    <Select onValueChange={(value) => console.log(value)}>
      <SelectTrigger>Select an option</SelectTrigger>
      <SelectContent>
        <SelectItem value="option1">Option 1</SelectItem>
        <SelectItem value="option2">Option 2</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

## API Reference

### Dialog

- `Dialog`: Root component
- `DialogTrigger`: Button to open dialog
- `DialogContent`: Dialog content container
- `DialogTitle`: Accessible title
- `DialogDescription`: Description text
- `DialogClose`: Close button

### Popover

- `Popover`: Root component
- `PopoverTrigger`: Trigger element
- `PopoverContent`: Content container
  - Props: `side?: 'top' | 'right' | 'bottom' | 'left'`, `align?: 'start' | 'center' | 'end'`

### Tooltip

- `Tooltip`: Root component
  - Props: `content: React.ReactNode`, `side?: 'top' | 'right' | 'bottom' | 'left'`, `delay?: number`

## TypeScript

All components are fully typed with TypeScript.

## License

MIT