npm package: @henderito/trace-ui
Description: A premium React component library with built-in dark mode and CSS variable theming.
Author: Luminous UI Team
Latest version: 0.0.3

# Trace UI

A React component library with a distinct "sketchy" hand-drawn aesthetic, built for developers who want to add personality to their applications.

## Features

- **Hand-drawn Aesthetic**: Components feature sketchy borders, messy underlines, and wobble effects.
- **Comprehensive Library**: Includes inputs, data display, feedback, navigation, and layout components.
- **Theming Support**: Built-in support for Light and Dark modes.
- **Accessible**: Built with accessibility in mind (ARIA attributes, keyboard navigation).
- **TypeScript**: Written in TypeScript for type safety and great developer experience.

## Installation

```bash
npm install @henderito/trace-ui
# or
yarn add @henderito/trace-ui
```

*Note: This library currently requires a local setup or linking as it is in MVP stage.*

## Getting Started

1. **Wrap your application with `ThemeProvider`**:

```tsx
import { ThemeProvider } from '@henderito/trace-ui';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}
```

2. **Import Global Styles**:

Make sure to import the CSS in your main entry file (e.g., `main.tsx` or `App.tsx`):

```tsx
import '@henderito/trace-ui/dist/style.css'; 
// or relative path if local: './styles/index.css'
```

3. **Use Components**:

```tsx
import { Button, Card, CardBody } from '@henderito/trace-ui';

function MyComponent() {
  return (
    <Card>
      <CardBody>
        <Button variant="primary">Click Me</Button>
      </CardBody>
    </Card>
  );
}
```

## Theming

Trace UI uses CSS variables for easy customization. You can override these in your global CSS.

**Key Tokens:**

| Token | Description | Default |
|-------|-------------|---------|
| `--trace-color-primary` | Main brand color | `#3b82f6` (Blue) |
| `--trace-color-surface` | Component background | `#ffffff` |
| `--trace-color-background` | App background | `#f8fafc` |
| `--trace-color-text` | Main text color | `#1e293b` |
| `--trace-font-sans` | Font Family | `'Architects Daughter', cursive` |
| `--trace-radius-md` | Standard radius | `255px 15px 225px 15px / 15px 225px 15px 255px` (Sketchy) |

## Components

### Core
- **Button**: Interactive buttons with wobble hover effects.
- **Input**: Text fields with focused rough borders.
- **Dropdown**: Select menus.
- **Checkbox / Switch / Radio**: Selection controls.
- **Modal**: Pop-up dialogs.

### Navigation
- **Tabs**: Switch content views.
- **Breadcrumb**: Path navigation.
- **Pagination**: Page number navigation.
- **Stepper**: Progress through steps.
- **Drawer**: Slide-out panels.

### Feedback
- **Alert**: Contextual info messages.
- **Toast**: Temporary notifications.
- **Progress**: Loading bars with texture.
- **Spinner / Skeleton**: Loading states.

### Data Display
- **Card**: Boxed content containers.
- **Table**: tabular data display.
- **Avatar**: User profile images.
- **Accordion**: Collapsible content.
- **Tooltip**: Hover info bubbles.
- **Badge**: Status indicators.

### Layout
- **Container**: Centered content wrapper.
- **Stack**: Flexbox layout utility.
- **Grid**: CSS Grid layout utility.
- **Divider**: Sketchy separator lines.

## Contributing

1. Fork the repo.
2. Create your feature branch (`git checkout -b feature/amazing-feature`).
3. Commit your changes (`git commit -m 'Add some amazing feature'`).
4. Push to the branch (`git push origin feature/amazing-feature`).
5. Open a Pull Request.

## License

MIT