# nychthemeron

A CSS-reactive Vue component library built on PrimeVue (Unstyled), shipped with the nychthemeron theme as a default.

## About

nychthemeron provides a curated set of Vue 3 components powered by PrimeVue's unstyled components and the nychthemeron theme system. This approach gives you complete control over component styling while maintaining a consistent, polished design language out of the box.

### Features

- **CSS-Reactive**: Components respond to CSS changes without requiring JavaScript updates
- **PrimeVue Powered**: Built on the robust, accessible PrimeVue unstyled component library
- **Theme Included**: Ships with the nychthemeron theme, ready to use immediately
- **TypeScript**: Full type support for Vue 3 and TypeScript projects
- **Customizable**: Override or extend the default theme to match your design system

## Quick Start

### Installation

```bash
npm install @nychthemeron/library primevue vue@^3.5.0
```

### Basic Usage

Import the library components and styles:

```vue
<script setup lang="ts">
import { NychButton } from '@nychthemeron/library'
</script>

<template>
  <NychButton label="Click me" />
</template>

<style>
@import '@nychthemeron/library/style';
@import '@nychthemeron/library/theme';
</style>
```

## Components

- **NychButton** - Customizable button component

More components coming soon.

## Customization

### Using the Default Theme

The nychthemeron theme is included by default:

```css
@import '@nychthemeron/library/theme';
```

### Custom Styling

Override or extend component styles by importing only the base styles and providing your own CSS:

```css
@import '@nychthemeron/library/style';

/* Your custom theme */
:root {
  --primary-color: #your-color;
  /* More CSS variables */
}
```

## Project Structure

This is a monorepo containing:

- **`packages/library`** - The component library package
- **`packages/playground`** - Development environment and examples

## Development

### Setup

```bash
bun install
```

### Development Server

Start the playground to develop and test components:

```bash
bun dev
```

### Build

Build the library for production:

```bash
bun build
```

### Testing

Run unit tests:

```bash
bun test
```

### Linting and Formatting

```bash
bun lint       # Check and fix linting issues
bun format     # Format code with Prettier
bun type-check # Run TypeScript type checking
```

## Requirements

- **Node.js**: >=20.19.0 or >=22.12.0
- **Vue**: ^3.5.0
- **PrimeVue**: ^4.5.0

## Browser Support

Supports all modern browsers with CSS Grid and CSS Variables support.

## License

MIT