# Enciphered.Blazor.UIComponents

A **pure static SSR** Blazor component library styled with **Tailwind CSS v4** and **shadcn/ui** design tokens. All interactivity is powered by vanilla JavaScript — no SignalR, no WebAssembly, no `InteractiveServer` render mode required. Form validation and submission are handled entirely through **htmx**.

## Features

- **Zero Blazor interactivity** — components work with `AddRazorComponents()` alone
- **Tailwind CSS v4** with oklch color tokens (light + dark mode)
- **htmx form validation** — per-field blur validation and full form submission with a fluent `FormValidator` API
- **Strongly-typed model binding** — bind submitted form data to POCOs automatically
- **Sidebar layout** — collapsible, responsive, cookie-persisted
- **Card components** — composable header/content/footer/image/action slots
- **Dark mode** — toggle with localStorage persistence, FOUC-free
- **Date/Time pickers** — calendar and time picker popovers with hidden native inputs

## Quick Start

```bash
dotnet add package Enciphered.Blazor.UIComponents
```

> See the full [Getting Started guide](docs/getting-started.md) for setup instructions.

## Documentation

| Document | Description |
|---|---|
| [Getting Started](docs/getting-started.md) | Installation, prerequisites, and first-app setup |
| [Sidebar](docs/components/sidebar.md) | Collapsible sidebar layout system |
| [Card](docs/components/card.md) | Composable card components |
| [Button](docs/components/button.md) | Button with variants and sizes |
| [Form Inputs](docs/components/form-inputs.md) | TextInput, NumberInput, DateInput, TimeInput, DateTimeInput |
| [Form Validation](docs/forms/validation.md) | htmx-powered validation with FormValidator |
| [Form Submission](docs/forms/submission.md) | Handling form submit with model binding |
| [Theme Toggle](docs/components/theme-toggle.md) | Dark/light mode toggle |

## Architecture

All interactive behavior (popovers, sidebar collapse, calendar navigation, number input steppers, form resets) is implemented via three vanilla JS modules that use `data-*` attribute selectors and event delegation:

| Module | Purpose |
|---|---|
| `darkmode.js` | Theme toggle, localStorage persistence, SVG icon sync |
| `sidebar.js` | Expand/collapse, mobile responsiveness, cookie persistence |
| `forms.js` | Popover, calendar, time picker, number stepper, form reset |

These modules survive Blazor enhanced navigation via `MutationObserver` patterns.

## License

ISC