# @wrnexus/astro

Form + field components for **Astro** with Tailwind utilities and Zod-ready validation hooks.

- ✅ `<Form />` — submit handling + client validation plumbing
- ✅ `<Field />` — text/email/password/number/textarea/select/date/time/file/checkbox/radio/switch
- ✅ `<MultiSelect />` — searchable, checkbox-driven multi select dropdown
- ✅ `<Button />` helpers
- 🎯 Works with your Tailwind tokens (e.g., `bg-primary`, `text-foreground`, `border-border`)
- 🧪 Zod integration: pass `schemaName` to `<Form />` and expose a schema as `window[schemaName]`

---

## Installation

```bash
pnpm add @wrnexus/astro
# or
npm i @wrnexus/astro
```
Install All Required packages

```bash
npm install tailwind-merge clsx class-variance-authority  @tailwindcss/forms zod --save-dev
```

Theme Use

```bash
@import "@wrnexus/astro/style.css";

@import "tailwindcss";

@theme {
    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));
    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
    --color-tertiary: hsl(var(--tertiary));
    --color-tertiary-foreground: hsl(var(--tertiary-foreground));
    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));
    --color-info: hsl(var(--info));
    --color-info-foreground: hsl(var(--info-foreground));
    --color-success: hsl(var(--success));
    --color-success-foreground: hsl(var(--success-foreground));
    --color-warning: hsl(var(--warning));
    --color-warning-foreground: hsl(var(--warning-foreground));
    --color-danger: hsl(var(--danger));
    --color-danger-foreground: hsl(var(--danger-foreground));
    --color-neutral: hsl(var(--neutral));
    --color-neutral-foreground: hsl(var(--neutral-foreground));
}
```