49 lines
1.7 KiB
Markdown
49 lines
1.7 KiB
Markdown
# @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 />`, `<Icon />` 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
|
|
```
|
|
|
|
Theme Use
|
|
|
|
```bash
|
|
@import "@wrnexus/astro/theme.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));
|
|
}
|
|
``` |