Astro-Component/README.md

@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

pnpm add @wrnexus/astro
# or
npm i @wrnexus/astro

Theme Use

@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));
}