npm package: @keltroth/galaxy
Description: A galaxy of Astro components
Author: Django Janny
Latest version: 0.0.58

# @keltroth/galaxy

A galaxy of reusable Astro components for building modern web applications.

[![npm version](https://img.shields.io/npm/v/@keltroth/galaxy.svg)](https://www.npmjs.com/package/@keltroth/galaxy)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## Features

- 🚀 **Astro-native**: Built specifically for Astro projects
- 🎨 **Themable**: Consistent theming system with variants, statuses, and sizes
- 📦 **Modular**: Import only the components you need
- 🔍 **TypeScript**: Fully typed component props for better developer experience
- 🎯 **Lightweight**: Minimal dependencies for optimal performance

## Installation

```bash
# npm
npm install @keltroth/galaxy

# yarn
yarn add @keltroth/galaxy

# pnpm
pnpm add @keltroth/galaxy
```

## Usage

Import components directly in your Astro files:

```astro
---
import { Button, Card, CardHeader, CardBody } from '@keltroth/galaxy';
---

<Card>
  <CardHeader>Hello Galaxy</CardHeader>
  <CardBody>
    <p>This is a card component from the Galaxy library.</p>
    <Button>Click me</Button>
  </CardBody>
</Card>
```

## Available Components

The library includes the following components:

- **Button**: Customizable button with various styles and sizes
- **ButtonGroup**: Container for grouping related buttons
- **Card**: Container component with optional header and body
- **CardHeader**: Header section for the Card component
- **CardBody**: Body section for the Card component
- **Cartouche**: Label/tag component for displaying metadata
- **Footer**: Page footer component
- **Header**: Page header component
- **Logo**: Component for displaying a logo
- **Menu**: Navigation menu component
- **Sidenav**: Side navigation component

## Component API

### Button

A versatile button component with multiple variants and states.

```astro
---
import { Button } from '@keltroth/galaxy';
---

<!-- Default button -->
<Button>Click me</Button>

<!-- Button with variant and status -->
<Button variant="outline" status="success">Success</Button>

<!-- Button with size -->
<Button size="lg">Large Button</Button>

<!-- Icon button -->
<Button icon>
  <svg><!-- Your icon SVG --></svg>
</Button>
```

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'plain' \| 'outline' \| 'invisible' | 'plain' | Visual style of the button |
| status | 'accent' \| 'success' \| 'neutral' \| 'error' | 'accent' | Status/color of the button |
| size | 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Size of the button |
| icon | boolean | false | Whether the button contains only an icon |

### Card

A container component for grouping related content.

```astro
---
import { Card, CardHeader, CardBody } from '@keltroth/galaxy';
---

<Card>
  <CardHeader>Card Title</CardHeader>
  <CardBody>
    <p>Card content goes here.</p>
  </CardBody>
</Card>
```

## Styling

Galaxy components use SCSS for styling with a consistent theming system. The components are designed to be customizable through CSS variables.

You can customize the appearance by overriding the CSS variables:

```css
:root {
  /* Button customization */
  --color-plain-accent-fill-normal: #3366ff;
  --color-plain-accent-content-normal: white;
  --color-plain-accent-stroke-normal: #3366ff;
  
  /* Size customization */
  --sizes-padding-inline-start-md: 1rem;
  --sizes-padding-inline-end-md: 1rem;
  --sizes-font-size-md: 1rem;
}
```

## Browser Support

Galaxy components support all modern browsers.

## License

MIT © [Django Janny](https://djangojanny.net)