# WRNexusJS documentation 0.5.13

Status: Private Developer Preview. This site documents 31 release-aligned packages.

# WrNexus

> WrNexus is an SSR-first, **Bun-native** full-stack web framework. UI is written in
> `.wrn` files (its own component language — NOT React/JSX/Vue). Routing is file-based.
> This document teaches an AI how to write correct WrNexus code. It is private and
> post-dates model training data, so rely on THIS document, not prior web-framework
> assumptions.

## Golden rules

- **Pages, components, and layouts are `.wrn` files.** Do NOT write `.tsx`/`.jsx`/React
  for UI. Do NOT use `useState`, hooks, JSX, or a client bundler.
- **Routing is file-based** under `app/`. The filename is the route. No router config.
- **Interactivity** lives in `state` + `{expr}` + `@event` inside `.wrn`. Components render
  on the server and hydrate automatically — you never write client-side JS islands.
- **Runtime is Bun only** (uses `Bun.serve`, `bun:sqlite`, `Bun.password`, …). Node is not supported.
- To add files, prefer the CLI: `wrnexus generate page <Name>` / `component <name>` / `api <path>` / `schema <name>`.

## Project layout

```
app/
  pages/       *.wrn  → routes: index.wrn = "/", about.wrn = "/about", blog/[slug].wrn = "/blog/:slug"
  components/  *.wrn  → reusable UI, mounted in a page/component via <div data-component="name" ...props>
  layouts/     *.wrn  → named layouts; a page opts in with  layout = "name"
  api/         *.ts   → HTTP handlers: export const GET/POST/PUT/PATCH/DELETE = async (ctx) => Response
  middleware/  *.ts   → export default async (ctx, next) => next()
  realtime/    *.ts   → export default defineRoom({ ... }) from "@wrnexus/core"  (ws://host/realtime/<name>)
  schemas/     *.ts   → validation schemas (the `v` builder), used by forms + parseBody
  locales/     *.json → i18n messages per language
  db/          schema.ts, queries/*.sql, migrations/*.sql
  styles/      global.css  → Tailwind (default) or plain CSS
wrnexus.config.ts    → app config (AppConfig from "@wrnexus/styles")
public/              → static assets served at /
```

## `.wrn` page

```wrn
page Home {
  layout = "public"          // optional: a component in app/layouts/<name>.wrn ("none" to skip)

  state count = 0            // optional: seeds client-reactive state (omit for pure SSR)

  seo {
    title = "Home"
    description = "..."
    canonical = "/"
  }

  view {
    <h1>Hello</h1>
    <p>Count is {count}, doubled is {count * 2}.</p>
    <button @click="count++">Increment</button>
    <div data-component="counter" start="5" label="Clicks"></div>
  }

  style {
    h1 { color: var(--wire-color-text); }
  }
}
```

## `.wrn` component

```wrn
component Counter {
  props {                    // props come from mount attributes; each is coerced to the
    start = 0                // TYPE of its default (so start="5" arrives as the number 5)
    label = "Count"
  }
  state count = start        // state may reference props
  view {
    <button @click="count++">{label}: {count}</button>
  }
}
```

Mount it from any page/component: `<div data-component="counter" start="0" label="Clicks"></div>`.
Components render on the server with their props, then hydrate — no per-component JS.

## The `view { }` block (plain HTML + a few directives)

- `{expr}` — interpolate a JS expression. Reactive if it references `state`: `{count}`, `{count * 2}`, `{user.name}`.
- `@event="expr"` — bind a DOM event; the expression runs in the reactive scope: `@click="count++"`, `@input="name = event.target.value"`.
- `<div data-component="name" prop="v">` — mount a component (attrs become string props, coerced).
- `<slot></slot>` / `<slot name="x"></slot>` — component/layout slots; fill with `<div data-slot="x">…</div>`.
- **Server loop (DB/list/table):** `{#each <list> as <item>[, <i>]} …rows… {:empty} …fallback… {/each}` — iterates SSR data on the server and renders markup per item. `{item.field}` interpolates (HTML-escaped, XSS-safe). `<list>` is a JS expression, usually an `ssr` data binding (see "Data-driven tables" below). This is how you render a database table in `.wrn`.
- **Server conditional:** `{#if <expr>} … {:else if <expr>} … {:else} … {/if}` — renders the first truthy branch on the server. `<expr>` can reference `ssr` data, or the `item`/`index` of an enclosing `{#each}`. Works at page level and inside loops (e.g. `{#if r.active}<span>●</span>{:else}<span>○</span>{/if}` per row). For client-side show/hide based on reactive `state`, use `data-show="expr"` instead.
- i18n: `{t:home.title}` in text, `t:placeholder="form.name"` on attributes — resolved per request from `app/locales/`.
- Theme: any element with `data-wire-theme-toggle` toggles light/dark; `data-wire-theme-set="dark"` sets it.
- Void/self-closing tags are fine: `<br />`, `<img src="..." />`.
- Only `{` and `}` are special (interpolation). Don't use a bare `}` in view text.

## Data-driven tables / lists (server-rendered `.wrn`)

Use an `ssr` data binding to fetch rows on the server, then `{#each}` to render them.
This renders on the **server** (SSR-first) and is HTML-escaped by default.

```wrn
page Admin {
  layout = "dashboard"

  // Fetch on the server. The api handler at /api/contacts returns { contacts: [...] };
  // this block's `return contacts` exposes that array (via `$data`) as the binding `rows`.
  ssr {
    api rows GET /api/contacts { return contacts }
  }

  view {
    <table>
      <tbody>
        {#each rows as r, i}
          <tr>
            <td>#{i}</td>
            <td>{r.name}</td>
            <td><a href="mailto:{r.email}">{r.email}</a></td>
          </tr>
        {:empty}
          <tr><td colspan="3">No submissions yet.</td></tr>
        {/each}
      </tbody>
    </table>
  }
}
```

The matching API returns the array under a key the `ssr` block reads:

```ts
// app/api/contacts.ts  → GET /api/contacts
import { getDb } from "@wrnexus/db";
export const GET = async () => {
  const contacts = await getDb().all("SELECT id, name, email FROM contacts ORDER BY id DESC");
  return Response.json({ contacts });   // ssr block does `return contacts`
};
```

**Prefer this `.wrn` + `{#each}` approach for DB-backed tables and lists.** (`.ts`/`.tsx`
pages returning an HTML string are also supported for fully-custom programmatic rendering,
but a `.wrn` page with `ssr` data + `{#each}` is the idiomatic, SSR-first way.)

## API routes (`app/api/*.ts`)

```ts
// app/api/users/list.ts  → GET /api/users/list
import { getDb } from "@wrnexus/db";

export const GET = async (ctx) => {
  return Response.json({ users: await ListUsers(getDb()) });
};

export const POST = async (ctx) => {
  const body = await ctx.req.json();
  return Response.json({ ok: true, body }, { status: 201 });
};
```

`ctx` (the `Context` from `@wrnexus/core`) has:
`req: Request`, `url: URL`, `params: Record<string,string>` (dynamic route params, e.g. `/users/[id]` → `ctx.params.id`),
`lang: string`, `t(key, params?)` (i18n), `cookies` (get/set), `session` (get/set). Auth: `getUser(ctx)` after `sessionAuth`/`logIn`.

When an SSO forward-auth verifier needs the URL that originally reached the gateway, use
`@wrnexus/helpers` instead of constructing it from untrusted headers:

```ts
import { redirectToLogin } from "@wrnexus/helpers";

return redirectToLogin(ctx, "/login", {
  allowedHosts: ["admin.localhost:3000", "reports.localhost:3000"],
});
```

The package also exports `getOriginalRequestUrl`, `getOriginalRequestOrigin`,
`getOriginalRequestPath`, and `getOriginalRequestMethod`. Always pass `allowedHosts` when
using forwarded gateway URLs; the helper rejects untrusted redirect destinations.

## Middleware & realtime

```ts
// app/middleware/logger.ts
export default async function logger(ctx, next) {
  console.log(ctx.req.method, ctx.url.pathname);
  return next();               // return a Response WITHOUT calling next() to short-circuit
}
```

```ts
// app/realtime/chat.ts  → ws://host/realtime/chat
import { defineRoom } from "@wrnexus/core";
export default defineRoom({
  onConnect(client) { client.send({ type: "system", text: "connected" }); },
  onMessage(client, msg) { client.room.broadcast({ type: "message", data: msg }); },
});
```
Client side: a page opts in with `data-room="chat"` (handled by the realtime runtime).

## Config (`wrnexus.config.ts`)

```ts
import type { AppConfig } from "@wrnexus/styles";
const config: AppConfig = {
  seo: { title: "App", titleTemplate: "%s | App", description: "..." },
  styles: { entry: "app/styles/global.css", process: async ({ entryPath, mode }) => /* Tailwind */ "" },
  fonts: { sans: '"Inter", system-ui, sans-serif', google: [{ family: "Inter", weights: [400, 600] }] },
  theme: { default: "dark", themes: { light: { "color-primary": "#2563eb" } } },
  i18n: { default: "en", locales: ["en", "es"] },
  db: { driver: "sqlite", url: "file:./dev.db" },
  security: { cors: { enabled: true, origin: ["http://localhost:5173"] } },
  // profiles: { production: { db: { driver: "postgres", url: process.env.DATABASE_URL } } },
};
export default config;
```

## Database (`@wrnexus/db`)

```ts
// app/db/schema.ts
import { v, table } from "@wrnexus/db";
export const users = table("users", {
  id: v.id(),
  name: v.string(),
  email: v.string().unique(),
  createdAt: v.timestamp(),
});
```
- Queries: write `app/db/queries/*.sql` with `-- name: ListUsers :many` blocks; `wrnexus db generate` emits typed functions.
- Access at runtime: `import { getDb } from "@wrnexus/db"; const rows = await ListUsers(getDb());`
- Migrations in `app/db/migrations/`; run `wrnexus db migrate` (dev auto-migrates sqlite).

## Validation (`@wrnexus/validation`)

```ts
// app/schemas/login.ts
import { v } from "@wrnexus/validation";
export default v.object({
  email: v.string().email(),
  password: v.string().min(8),
});
```
In an API route: `import s from "../schemas/login"; import { parseBody } from "@wrnexus/validation"; const r = await parseBody(s, ctx.req);` → `r.ok ? r.value : r.response`.
In a form: `<form data-schema="login" action="/api/login" method="post">` + `<span data-error="email"></span>` (client + server validation wired automatically).

## AI / LLM (`@wrnexus/ai`)

```ts
// app/api/ai.ts
import { createAI } from "@wrnexus/ai";
const ai = createAI();                     // reads ANTHROPIC_API_KEY; default model claude-opus-4-8
export const POST = async (ctx) => {
  const { prompt } = await ctx.req.json();
  return ai.streamResponse(prompt);        // or: return Response.json({ text: await ai.generate(prompt) })
};
```

## CLI

```
wrnexus dev .                 # dev server + HMR
wrnexus build .               # production build → dist/server.js
bun dist/server.js            # run the production server (or npm start)
wrnexus create <name>         # scaffold a new app
wrnexus update --latest       # deps + syntax/config migrations + verification
wrnexus generate page <Name>  # scaffold a page   (aliases: g p)
wrnexus generate component <name> | api <path> | schema <name>
wrnexus db migrate | rollback | status | new [--from-models] | generate | seed
wrnexus eject <component>     # copy a Wire UI component's .wrn into app/components to customize
```

## When asked to "create a page/component/feature"

1. Create the `.wrn` file under `app/pages/` (or `app/components/`) with a `page`/`component` block — or run `wrnexus generate page <Name>`.
2. Put markup in `view { }`, interactive bits in `state` + `{expr}` + `@event`, reusable UI as components mounted via `data-component`.
3. For data, add an `app/api/*.ts` route and `getDb()`; for forms, add an `app/schemas/*.ts` and `data-schema`.
4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wire-*)`), or `style { }`.
5. Never emit React/JSX, a manual router, or client-side island JS — the framework handles hydration.

# Canonical documentation locations

- Framework and package documentation: https://wrnexusjs.dev/
- Interactive UI component showcase and examples: https://component.wrnexusjs.dev/
- Comprehensive AI reference: https://wrnexusjs.dev/llms-full.txt

# Installed package index

## @wrnexus/ai

- @wrnexus/ai 0.5.13
- Documentation: https://wrnexusjs.dev/packages/ai
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/auth

- @wrnexus/auth 0.5.13
- Documentation: https://wrnexusjs.dev/packages/auth
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/authz

- @wrnexus/authz 0.5.13
- Documentation: https://wrnexusjs.dev/packages/authz
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/captcha

- @wrnexus/captcha 0.5.13
- Documentation: https://wrnexusjs.dev/packages/captcha
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/cli

- @wrnexus/cli 0.5.13
- Documentation: https://wrnexusjs.dev/packages/cli
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/compiler

- @wrnexus/compiler 0.5.13
- Documentation: https://wrnexusjs.dev/packages/compiler
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/core

- @wrnexus/core 0.5.13
- Documentation: https://wrnexusjs.dev/packages/core
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/csr

- @wrnexus/csr 0.5.13
- Documentation: https://wrnexusjs.dev/packages/csr
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/db

- @wrnexus/db 0.5.13
- Documentation: https://wrnexusjs.dev/packages/db
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/dev-server

- @wrnexus/dev-server 0.5.13
- Documentation: https://wrnexusjs.dev/packages/dev-server
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/dev-toolbar

- @wrnexus/dev-toolbar 0.5.13
- Documentation: https://wrnexusjs.dev/packages/dev-toolbar
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/encryption

- @wrnexus/encryption 0.5.13
- Documentation: https://wrnexusjs.dev/packages/encryption
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/helpers

- @wrnexus/helpers 0.5.13
- Documentation: https://wrnexusjs.dev/packages/helpers
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/i18n

- @wrnexus/i18n 0.5.13
- Documentation: https://wrnexusjs.dev/packages/i18n
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/jwt

- @wrnexus/jwt 0.5.13
- Documentation: https://wrnexusjs.dev/packages/jwt
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/mobile

- @wrnexus/mobile 0.5.13
- Documentation: https://wrnexusjs.dev/packages/mobile
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/native

- @wrnexus/native 0.5.13
- Documentation: https://wrnexusjs.dev/packages/native
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/oauth

- @wrnexus/oauth 0.5.13
- Documentation: https://wrnexusjs.dev/packages/oauth
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/plugin

- @wrnexus/plugin 0.5.13
- Documentation: https://wrnexusjs.dev/packages/plugin
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/pubsub

- @wrnexus/pubsub 0.5.13
- Documentation: https://wrnexusjs.dev/packages/pubsub
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/queue

- @wrnexus/queue 0.5.13
- Documentation: https://wrnexusjs.dev/packages/queue
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/reactive

- @wrnexus/reactive 0.5.13
- Documentation: https://wrnexusjs.dev/packages/reactive
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/router

- @wrnexus/router 0.5.13
- Documentation: https://wrnexusjs.dev/packages/router
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/ssr

- @wrnexus/ssr 0.5.13
- Documentation: https://wrnexusjs.dev/packages/ssr
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/styles

- @wrnexus/styles 0.5.13
- Documentation: https://wrnexusjs.dev/packages/styles
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/syntax

- @wrnexus/syntax 0.5.13
- Documentation: https://wrnexusjs.dev/packages/syntax
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/test

- @wrnexus/test 0.5.13
- Documentation: https://wrnexusjs.dev/packages/test
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/tracking

- @wrnexus/tracking 0.5.13
- Documentation: https://wrnexusjs.dev/packages/tracking
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/ui

- @wrnexus/ui 0.5.13
- Documentation: https://wrnexusjs.dev/packages/ui
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/uploader

- @wrnexus/uploader 0.5.13
- Documentation: https://wrnexusjs.dev/packages/uploader
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/validation

- @wrnexus/validation 0.5.13
- Documentation: https://wrnexusjs.dev/packages/validation
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

# UI component catalog

The installed @wrnexus/ui 0.5.13 release contains 108 documented components. The contracts below include every mount name, purpose, prop type, required/default status, slot, and event. Interactive examples live only on the dedicated component showcase.

### Accordion
Showcase: https://component.wrnexusjs.dev/
Mount: <Accordion /> (legacy: data-component="Accordion")
Category: base
Purpose: Theme-aware, responsive accordion component.
Props: size: string = "default", color: string = "primary", variant: string = "default", class: string = "", id: string = "accordion", items: string = [], defaultOpen: string = [], multiple: boolean = false, alwaysOpen: boolean = false, disabled: boolean = false, indicator: string = "plus", indicatorPosition: string = "start", showIndicator: boolean = true, bordered: boolean = false, separated: boolean = false, flush: boolean = false, contentItalic: boolean = false
Slots: none
Events: change, open, close

### AdvancedDatePicker
Showcase: https://component.wrnexusjs.dev/
Mount: <AdvancedDatePicker /> (legacy: data-component="AdvancedDatePicker")
Category: integrations
Purpose: Theme-aware, responsive advanced date picker component.
Props: size: string = "default", color: string = "primary", title: string = "Advanced Date Picker", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: input, change, open, close, clear

### AdvancedRangeSlider
Showcase: https://component.wrnexusjs.dev/
Mount: <AdvancedRangeSlider /> (legacy: data-component="AdvancedRangeSlider")
Category: integrations
Purpose: Theme-aware, responsive advanced range slider component.
Props: size: string = "default", color: string = "primary", title: string = "Advanced Range Slider", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: input, change, start, end

### AdvancedSelect
Showcase: https://component.wrnexusjs.dev/
Mount: <AdvancedSelect /> (legacy: data-component="AdvancedSelect")
Category: advanced-forms
Purpose: Theme-aware, responsive advanced select component.
Props: size: string = "default", color: string = "primary", label: string = "Advanced Select", name: string = "", value: string = "", values: string = [], options: string = [], groups: string = [], placeholder: string = "Select an option", placeholderIcon: string = "", searchPlaceholder: string = "Search options…", multiple: boolean = false, searchable: boolean = true, defaultOpen: boolean = false, clearable: boolean = true, allowEmpty: boolean = true, tags: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading options…", emptyLabel: string = "No options found", selectedOptionsLabel: string = "Selected options", clearLabel: string = "Clear selection", createLabel: string = "Create", loadMoreLabel: string = "Load more", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, maxSelections: number = 0, showCounter: boolean = false, counterTemplate: string = "{selected} selected", optionTemplate: string = "default", selectedTemplate: string = "default", closeOnSelect: boolean = true, scrollToSelected: boolean = true, fixed: boolean = false, placement: string = "bottom", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, class: string = ""
Slots: none
Events: search, select, change, clear, open, close, load, error

### Alert
Showcase: https://component.wrnexusjs.dev/
Mount: <Alert /> (legacy: data-component="Alert")
Category: base
Purpose: Theme-aware, responsive alert component.
Props: size: string = "default", color: string = "info", variant: string = "soft", class: string = "", radius: string = "md", shadow: string = "sm", title: string = "Alert", description: string = "", items: string = [], actions: string = [], showIcon: boolean = false, icon: string = "", dismissible: boolean = false, dismissLabel: string = "Dismiss alert", role: string = "alert", live: string = "polite", linkLabel: string = "", linkHref: string = "", actionLabel: string = "", actionHref: string = "", compact: boolean = false
Slots: none
Events: dismiss, action

### AnnouncementBar
Showcase: https://component.wrnexusjs.dev/
Mount: <AnnouncementBar /> (legacy: data-component="AnnouncementBar")
Category: blocks
Purpose: Accessible public announcement, emergency, maintenance, or status bar.
Props: badge: string = "", badgeIcon: string = "", message: string = "Announcement", description: string = "", icon: string = "icon-[lucide--megaphone]", actionLabel: string = "", actionHref: string = "", actionIcon: string = "", dismissible: boolean = false, dismissLabel: string = "Dismiss announcement", sticky: boolean = false, compact: boolean = false, size: string = "default", color: string = "primary", variant: string = "soft", role: string = "status", live: string = "polite", class: string = ""
Slots: none
Events: none

### AuthForm
Showcase: https://component.wrnexusjs.dev/
Mount: <AuthForm /> (legacy: data-component="AuthForm")
Category: forms
Purpose: Reusable authentication form for sign-in, registration, recovery, reset, and MFA.
Props: size: string = "default", color: string = "primary", mode: string = "sign-in", action: string = "/api/auth/login", method: string = "post", title: string = "Sign in", description: string = "", returnTo: string = "", schema: string = "", showRemember: boolean = true, showName: boolean = true, submitLabel: string = "Continue", class: string = ""
Slots: default
Events: submit, change, input, focus, blur

### AuthSplitLayout
Showcase: https://component.wrnexusjs.dev/
Mount: <AuthSplitLayout /> (legacy: data-component="AuthSplitLayout")
Category: layout
Purpose: Responsive 50/50 authentication layout with content and form regions.
Props: size: string = "default", color: string = "primary", eyebrow: string = "Secure identity", title: string = "Welcome back", description: string = "", brand: string = "Police Management System", features: string = [], class: string = ""
Slots: aside-extra, form
Events: none

### Avatar
Showcase: https://component.wrnexusjs.dev/
Mount: <Avatar /> (legacy: data-component="Avatar")
Category: base
Purpose: Theme-aware, responsive avatar component.
Props: src: string = "", alt: string = "", initials: string = "", size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "circle", status: string = "", statusLabel: string = "", statusPosition: string = "bottom", badge: string = "", badgeIcon: string = "", badgeLabel: string = "", tooltip: string = "", name: string = "", description: string = "", loading: string = "lazy", class: string = ""
Slots: none
Events: load, error, click

### AvatarGroup
Showcase: https://component.wrnexusjs.dev/
Mount: <AvatarGroup /> (legacy: data-component="AvatarGroup")
Category: base
Purpose: Theme-aware, responsive avatar group component.
Props: items: string = [], size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "circle", layout: string = "stack", maxVisible: number = 4, columns: number = 3, borderColor: string = "", showTooltips: boolean = true, overflowLabel: string = "Show remaining members", class: string = ""
Slots: none
Events: overflow

### BackToTop
Showcase: https://component.wrnexusjs.dev/
Mount: <BackToTop /> (legacy: data-component="BackToTop")
Category: navigation
Purpose: Accessible scroll-to-top control with visibility threshold.
Props: threshold: number = 500, label: string = "Back to top", ariaLabel: string = "Scroll back to top", icon: string = "icon-[lucide--arrow-up]", position: string = "right", offset: string = "md", behavior: string = "smooth", showProgress: boolean = false, size: string = "default", color: string = "primary", variant: string = "solid", class: string = ""
Slots: none
Events: none

### Badge
Showcase: https://component.wrnexusjs.dev/
Mount: <Badge /> (legacy: data-component="Badge")
Category: base
Purpose: Theme-aware, responsive badge component.
Props: label: string = "Badge", size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "pill", class: string = "", icon: string = "", iconPosition: string = "start", dot: boolean = false, dotOnly: boolean = false, dotLabel: string = "Status", animated: boolean = false, avatarSrc: string = "", avatarAlt: string = "", dismissible: boolean = false, dismissLabel: string = "Remove badge", truncate: boolean = false, maxWidth: string = "12rem", anchorLabel: string = "", anchorIcon: string = "", placement: string = "inline", anchorLabelText: string = "Badge anchor"
Slots: none
Events: dismiss

### Blockquote
Showcase: https://component.wrnexusjs.dev/
Mount: <Blockquote /> (legacy: data-component="Blockquote")
Category: base
Purpose: Theme-aware, responsive blockquote component.
Props: quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.", citation: string = "", citationTitle: string = "", citationUrl: string = "", avatarSrc: string = "", avatarAlt: string = "", size: string = "md", color: string = "primary", align: string = "left", variant: string = "default", quoteMark: boolean = true, italic: boolean = true, class: string = ""
Slots: default
Events: none

### Breadcrumb
Showcase: https://component.wrnexusjs.dev/
Mount: <Breadcrumb /> (legacy: data-component="Breadcrumb")
Category: navigation
Purpose: Theme-aware, responsive breadcrumb component.
Props: size: string = "default", color: string = "primary", label: string = "Breadcrumb", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Events: navigate, click

### Button
Showcase: https://component.wrnexusjs.dev/
Mount: <Button /> (legacy: data-component="Button")
Category: base
Purpose: Theme-aware, responsive button component.
Props: label: string = "Button", loadingLabel: string = "Loading…", description: string = "", as: string = "", href: string = "", target: string = "", rel: string = "", type: string = "button", variant: string = "default", color: string = "primary", size: string = "default", disabled: boolean = false, loading: boolean = false, pill: boolean = false, fullWidth: boolean = false, icon: string = "", iconPosition: string = "start", ariaLabel: string = "", ariaPressed: string = "", ariaExpanded: string = "", ariaControls: string = "", title: string = "", autofocus: boolean = false, controlClass: string = "", class: string = ""
Slots: default
Events: click, focus, blur

### ButtonGroup
Showcase: https://component.wrnexusjs.dev/
Mount: <ButtonGroup /> (legacy: data-component="ButtonGroup")
Category: base
Purpose: Theme-aware, responsive button group component.
Props: items: string = [], value: string = "", size: string = "md", color: string = "primary", variant: string = "default", orientation: string = "horizontal", responsive: boolean = false, attached: boolean = true, selectable: boolean = false, toolbar: boolean = false, disabled: boolean = false, ariaLabel: string = "Button group", class: string = ""
Slots: default
Events: click, select, change

### Card
Showcase: https://component.wrnexusjs.dev/
Mount: <Card /> (legacy: data-component="Card")
Category: base
Purpose: Theme-aware, responsive card component.
Props: title: string = "Card title", subtitle: string = "", description: string = "", header: string = "", footer: string = "", imageSrc: string = "", imageAlt: string = "", imagePosition: string = "top", actionLabel: string = "", actionHref: string = "", headerActions: string = [], navigation: string = [], activeNav: string = "", mobileNavigation: boolean = false, alertTitle: string = "", alertDescription: string = "", empty: boolean = false, emptyTitle: string = "No data to show", emptyIcon: string = "icon-[lucide--inbox]", items: string = [], size: string = "md", color: string = "primary", variant: string = "default", layout: string = "vertical", align: string = "left", hover: string = "none", scrollable: boolean = false, maxHeight: string = "18rem", dismissible: boolean = false, ariaLabel: string = "", class: string = ""
Slots: default
Events: click, action, navigate, dismiss, load, error

### Carousel
Showcase: https://component.wrnexusjs.dev/
Mount: <Carousel /> (legacy: data-component="Carousel")
Category: base
Purpose: Theme-aware, responsive carousel component.
Props: size: string = "default", color: string = "primary", title: string = "", description: string = "", items: string = [], activeIndex: number = 0, slidesPerView: number = 1, gap: string = "0.75rem", showPagination: boolean = false, isAutoPlay: boolean = false, autoplayInterval: number = 4000, isInfiniteLoop: boolean = false, isRTL: boolean = false, isCentered: boolean = false, isDraggable: boolean = false, isAutoHeight: boolean = false, isSnap: boolean = false, showCounter: boolean = false, thumbnails: string = "none", ariaLabel: string = "Content carousel", variant: string = "default", class: string = ""
Slots: default
Events: initialize, change, previous, next, play, pause, reachStart, reachEnd, dragStart, dragEnd

### Chart
Showcase: https://component.wrnexusjs.dev/
Mount: <Chart /> (legacy: data-component="Chart")
Category: integrations
Purpose: Theme-aware, responsive chart component.
Props: size: string = "default", color: string = "primary", title: string = "Chart", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: select, dataPointClick, legendToggle

### ChatBubble
Showcase: https://component.wrnexusjs.dev/
Mount: <ChatBubble /> (legacy: data-component="ChatBubble")
Category: base
Purpose: Theme-aware, responsive chat bubble component.
Props: size: string = "default", color: string = "primary", title: string = "", description: string = "", items: string = [], oneSided: boolean = false, showAvatars: boolean = false, showMetadata: boolean = false, ariaLabel: string = "Conversation", variant: string = "default", class: string = ""
Slots: default
Events: action, messageClick, avatarClick, linkClick

### Checkbox
Showcase: https://component.wrnexusjs.dev/
Mount: <Checkbox /> (legacy: data-component="Checkbox")
Category: forms
Purpose: Theme-aware, responsive checkbox component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Checkbox", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", values: string = [], options: string = [], checked: boolean = false, indeterminate: boolean = false, orientation: string = "vertical", card: boolean = false, rightAligned: boolean = false, list: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: default
Events: input, change, focus, blur, invalid

### Clipboard
Showcase: https://component.wrnexusjs.dev/
Mount: <Clipboard /> (legacy: data-component="Clipboard")
Category: integrations
Purpose: Theme-aware, responsive clipboard component.
Props: size: string = "default", color: string = "primary", title: string = "Clipboard", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: copy, success, error

### Collapse
Showcase: https://component.wrnexusjs.dev/
Mount: <Collapse /> (legacy: data-component="Collapse")
Category: base
Purpose: Theme-aware, responsive collapse component.
Props: size: string = "default", color: string = "primary", items: string = [], multiple: boolean = false, mode: string = "panel", initialOpenIndexes: string = [], ariaLabel: string = "Collapsible content", class: string = ""
Slots: default
Events: toggle, open, close

### ColorPicker
Showcase: https://component.wrnexusjs.dev/
Mount: <ColorPicker /> (legacy: data-component="ColorPicker")
Category: forms
Purpose: Theme-aware, responsive color picker component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Color", hiddenLabel: boolean = false, placeholder: string = "", value: string = "#2563eb", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur

### Columns
Showcase: https://component.wrnexusjs.dev/
Mount: <Columns /> (legacy: data-component="Columns")
Category: layout
Purpose: Theme-aware, responsive columns component.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Events: none

### ComboBox
Showcase: https://component.wrnexusjs.dev/
Mount: <ComboBox /> (legacy: data-component="ComboBox")
Category: advanced-forms
Purpose: Editable autocomplete combobox with local and remote suggestions.
Props: size: string = "default", color: string = "primary", label: string = "ComboBox", name: string = "", value: string = "", options: string = [], groups: string = [], placeholder: string = "Search or select an option", searchPlaceholder: string = "Start typing…", clearable: boolean = true, allowCustomValue: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading suggestions…", emptyLabel: string = "No matching options", clearLabel: string = "Clear value", toggleLabel: string = "Toggle suggestions", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, optionTemplate: string = "default", defaultOpen: boolean = false, closeOnSelect: boolean = true, fixed: boolean = false, placement: string = "bottom", autocomplete: string = "off", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, loadMoreLabel: string = "Load more", class: string = ""
Slots: none
Events: search, select, change, clear, open, close, load, error

### Confetti
Showcase: https://component.wrnexusjs.dev/
Mount: <Confetti /> (legacy: data-component="Confetti")
Category: integrations
Purpose: Theme-aware, responsive confetti component.
Props: size: string = "default", color: string = "primary", title: string = "Confetti", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: start, complete

### Container
Showcase: https://component.wrnexusjs.dev/
Mount: <Container /> (legacy: data-component="Container")
Category: layout
Purpose: Theme-aware, responsive container component.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Events: none

### ContextMenu
Showcase: https://component.wrnexusjs.dev/
Mount: <ContextMenu /> (legacy: data-component="ContextMenu")
Category: overlays
Purpose: Theme-aware, responsive context menu component.
Props: size: string = "default", color: string = "primary", title: string = "Context Menu", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
Slots: default
Events: open, close, select

### CopyMarkup
Showcase: https://component.wrnexusjs.dev/
Mount: <CopyMarkup /> (legacy: data-component="CopyMarkup")
Category: advanced-forms
Purpose: Theme-aware, responsive copy markup component.
Props: size: string = "default", color: string = "primary", label: string = "Copy Markup", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: copy, success, error

### CTASection
Showcase: https://component.wrnexusjs.dev/
Mount: <CTASection /> (legacy: data-component="CTASection")
Category: blocks
Purpose: Reusable closing call-to-action section with primary and secondary actions.
Props: eyebrow: string = "", title: string = "Ready to get started?", description: string = "", icon: string = "", align: string = "center", size: string = "default", color: string = "primary", variant: string = "solid", primaryLabel: string = "Get started", primaryHref: string = "#", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", backgroundImage: string = "", maxWidth: string = "xl", class: string = ""
Slots: default, actions, visual, footer
Events: none

### CustomScrollbar
Showcase: https://component.wrnexusjs.dev/
Mount: <CustomScrollbar /> (legacy: data-component="CustomScrollbar")
Category: layout
Purpose: Theme-aware, responsive custom scrollbar component.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Events: scroll

### DataMap
Showcase: https://component.wrnexusjs.dev/
Mount: <DataMap /> (legacy: data-component="DataMap")
Category: integrations
Purpose: Theme-aware, responsive data map component.
Props: size: string = "default", color: string = "primary", title: string = "Data Map", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: select, change

### DataTable
Showcase: https://component.wrnexusjs.dev/
Mount: <DataTable /> (legacy: data-component="DataTable")
Category: integrations
Purpose: Theme-aware, responsive data table component.
Props: size: string = "default", color: string = "primary", caption: string = "Data Table", columns: string = [], rows: string = [], striped: boolean = true, class: string = ""
Slots: default
Events: sort, select, change, rowClick, pageChange

### DatePicker
Showcase: https://component.wrnexusjs.dev/
Mount: <DatePicker /> (legacy: data-component="DatePicker")
Category: base
Purpose: Theme-aware, responsive date picker component.
Props: size: string = "default", color: string = "primary", label: string = "Date Picker", id: string = "", name: string = "", value: string = "", placeholder: string = "", type: string = "date", locale: string = "en-US", firstDayOfWeek: number = 0, months: string = [{ label: "Jan", value: "01" }, { label: "Feb", value: "02" }, { label: "Mar", value: "03" }, { label: "Apr", value: "04" }, { label: "May", value: "05" }, { label: "Jun", value: "06" }, { label: "Jul", value: "07" }, { label: "Aug", value: "08" }, { label: "Sep", value: "09" }, { label: "Oct", value: "10" }, { label: "Nov", value: "11" }, { label: "Dec", value: "12" }], days: string = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31], years: string = [2024, 2025, 2026, 2027, 2028, 2029, 2030], min: string = "", max: string = "", step: string = "", helperText: string = "", cornerHint: string = "", error: string = "", variant: string = "normal", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, open, close, focus, blur, invalid

### DeviceFrame
Showcase: https://component.wrnexusjs.dev/
Mount: <DeviceFrame /> (legacy: data-component="DeviceFrame")
Category: base
Purpose: Theme-aware, responsive device frame component.
Props: size: string = "default", color: string = "primary", title: string = "Device Frame", description: string = "", items: string = [], variant: string = "default", device: string = "phone", orientation: string = "portrait", src: string = "", srcdoc: string = "", frameTitle: string = "Device preview", showToolbar: boolean = true, allow: string = "", class: string = ""
Slots: default
Events: change, rotate

### Divider
Showcase: https://component.wrnexusjs.dev/
Mount: <Divider /> (legacy: data-component="Divider")
Category: layout
Purpose: Theme-aware, responsive divider component.
Props: size: string = "default", color: string = "primary", label: string = "", orientation: string = "horizontal", class: string = ""
Slots: none
Events: none

### DragAndDrop
Showcase: https://component.wrnexusjs.dev/
Mount: <DragAndDrop /> (legacy: data-component="DragAndDrop")
Category: integrations
Purpose: Theme-aware, responsive drag and drop component.
Props: size: string = "default", color: string = "primary", title: string = "Drag And Drop", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: dragStart, dragEnd, dragEnter, dragLeave, drop, change

### Drawer
Showcase: https://component.wrnexusjs.dev/
Mount: <Drawer /> (legacy: data-component="Drawer")
Category: overlays
Purpose: Theme-aware, responsive drawer component.
Props: size: string = "default", color: string = "primary", title: string = "Drawer", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
Slots: default
Events: open, close

### Dropdown
Showcase: https://component.wrnexusjs.dev/
Mount: <Dropdown /> (legacy: data-component="Dropdown")
Category: overlays
Purpose: Theme-aware, responsive dropdown component.
Props: size: string = "default", color: string = "primary", label: string = "Open menu", items: string = [], placement: string = "end", class: string = ""
Slots: trigger, header, footer
Events: toggle, open, close, select

### FeatureCard
Showcase: https://component.wrnexusjs.dev/
Mount: <FeatureCard /> (legacy: data-component="FeatureCard")
Category: blocks
Purpose: Reusable linked feature or service card with icon, badge, description, and action.
Props: icon: string = "", title: string = "Feature", description: string = "", href: string = "", actionLabel: string = "Learn more", actionIcon: string = "", badge: string = "", badgeColor: string = "primary", size: string = "default", color: string = "primary", variant: string = "default", hover: string = "lift", align: string = "left", disabled: boolean = false, class: string = ""
Slots: icon, default, footer
Events: none

### FeatureGrid
Showcase: https://component.wrnexusjs.dev/
Mount: <FeatureGrid /> (legacy: data-component="FeatureGrid")
Category: layout
Purpose: Responsive equal-height grid for feature and service cards.
Props: color: string = "primary", size: string = "default", columns: number = 3, tabletColumns: number = 2, mobileColumns: number = 1, gap: string = "md", minItemWidth: string = "", equalHeight: boolean = true, align: string = "stretch", maxWidth: string = "full", class: string = ""
Slots: default
Events: none

### FeatureIconCard
Showcase: https://component.wrnexusjs.dev/
Mount: <FeatureIconCard /> (legacy: data-component="FeatureIconCard")
Category: blocks
Purpose: Feature card with a prominent themed icon treatment.
Props: icon: string = "icon-[lucide--sparkles]", iconSize: string = "md", iconVariant: string = "soft", title: string = "Feature", description: string = "", href: string = "", actionLabel: string = "Explore", badge: string = "", size: string = "default", color: string = "primary", variant: string = "default", align: string = "left", hover: string = "lift", class: string = ""
Slots: default, footer
Events: none

### FileInput
Showcase: https://component.wrnexusjs.dev/
Mount: <FileInput /> (legacy: data-component="FileInput")
Category: forms
Purpose: Theme-aware, responsive file input component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "File", hiddenLabel: boolean = false, placeholder: string = "Choose a file", value: string = "", icon: string = "icon-[lucide--upload]", iconPosition: string = "start", accept: string = "", multiple: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, select, clear, invalid

### FileUpload
Showcase: https://component.wrnexusjs.dev/
Mount: <FileUpload /> (legacy: data-component="FileUpload")
Category: integrations
Purpose: Theme-aware, responsive file upload component.
Props: size: string = "default", color: string = "primary", title: string = "File Upload", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: select, upload, progress, success, error, cancel, remove

### FileUploadProgress
Showcase: https://component.wrnexusjs.dev/
Mount: <FileUploadProgress /> (legacy: data-component="FileUploadProgress")
Category: base
Purpose: Theme-aware, responsive file upload progress component.
Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, fileName: string = "", fileSize: string = "", uploadedSize: string = "", status: string = "uploading", cancelLabel: string = "Cancel upload", retryLabel: string = "Retry upload", class: string = ""
Slots: none
Events: cancel, retry, complete

### Footer
Showcase: https://component.wrnexusjs.dev/
Mount: <Footer /> (legacy: data-component="Footer")
Category: navigation
Purpose: Responsive application footer with structured links and pre/post content slots.
Props: size: string = "default", color: string = "primary", label: string = "Footer navigation", items: string = [], columns: number = 3, maxWidth: string = "compact", copyright: string = "", class: string = ""
Slots: pre-footer, post-footer, copyright-left, copyright-right
Events: select, action

### Grid
Showcase: https://component.wrnexusjs.dev/
Mount: <Grid /> (legacy: data-component="Grid")
Category: layout
Purpose: Theme-aware, responsive grid component.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Events: none

### Hero
Showcase: https://component.wrnexusjs.dev/
Mount: <Hero /> (legacy: data-component="Hero")
Category: blocks
Purpose: Reusable public-page hero with actions, trust items, badges, and visual slots.
Props: eyebrow: string = "", title: string = "Build something remarkable", highlight: string = "", description: string = "", align: string = "left", size: string = "default", color: string = "primary", variant: string = "default", primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", tertiaryLabel: string = "", tertiaryHref: string = "", badges: string = [], trustItems: string = [], maxWidth: string = "xl", class: string = ""
Slots: eyebrow, actions, trust, default, visual, footer
Events: none

### HeroActions
Showcase: https://component.wrnexusjs.dev/
Mount: <HeroActions /> (legacy: data-component="HeroActions")
Category: base
Purpose: Responsive action group for hero and call-to-action sections.
Props: actions: string = [], align: string = "left", orientation: string = "horizontal", stackOnMobile: boolean = true, fullWidthMobile: boolean = true, size: string = "default", color: string = "primary", class: string = ""
Slots: default
Events: none

### Image
Showcase: https://component.wrnexusjs.dev/
Mount: <Image /> (legacy: data-component="Image")
Category: layout
Purpose: Theme-aware, responsive image component.
Props: size: string = "default", color: string = "primary", src: string = "", alt: string = "", width: string = "", height: string = "", loading: string = "lazy", rounded: boolean = false, class: string = ""
Slots: default
Events: none

### Input
Showcase: https://component.wrnexusjs.dev/
Mount: <Input /> (legacy: data-component="Input")
Category: forms
Purpose: Theme-aware, responsive input component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Input", hiddenLabel: boolean = false, placeholder: string = "", value: string = "", type: string = "text", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, autocomplete: string = "", inputmode: string = "", minlength: string = "", maxlength: string = "", pattern: string = "", min: string = "", max: string = "", step: string = "", class: string = ""
Slots: none
Events: input, change, focus, blur, invalid, keydown, keyup

### InputGroup
Showcase: https://component.wrnexusjs.dev/
Mount: <InputGroup /> (legacy: data-component="InputGroup")
Category: forms
Purpose: Theme-aware, responsive input group component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Input group", hiddenLabel: boolean = false, value: string = "", placeholder: string = "", type: string = "text", startText: string = "", endText: string = "", icon: string = "", iconPosition: string = "start", actionLabel: string = "", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, submit, action

### InputNumber
Showcase: https://component.wrnexusjs.dev/
Mount: <InputNumber /> (legacy: data-component="InputNumber")
Category: advanced-forms
Purpose: Theme-aware, responsive input number component.
Props: size: string = "default", color: string = "primary", variant: string = "default", class: string = "", id: string = "", name: string = "quantity", value: number = 0, min: string = "", max: string = "", step: number = 1, precision: string = "auto", label: string = "", description: string = "", helpText: string = "", error: string = "", invalid: boolean = false, prefix: string = "", suffix: string = "", placeholder: string = "", autocomplete: string = "off", inputMode: string = "decimal", ariaLabel: string = "", required: boolean = false, disabled: boolean = false, inputDisabled: boolean = false, buttonsDisabled: boolean = false, readonly: boolean = false, allowInput: boolean = true, keyboard: boolean = true, wheel: boolean = false, clamp: boolean = true, fullWidth: boolean = false, showButtons: boolean = true, showValidationMessage: boolean = true, decrementLabel: string = "Decrease value", incrementLabel: string = "Increase value", controlsLabel: string = "Quantity controls", requiredMessage: string = "A value is required.", minMessage: string = "Value is below the minimum.", maxMessage: string = "Value is above the maximum."
Slots: none
Events: input, change, increment, decrement

### Kbd
Showcase: https://component.wrnexusjs.dev/
Mount: <Kbd /> (legacy: data-component="Kbd")
Category: layout
Purpose: Theme-aware, responsive kbd component.
Props: size: string = "default", color: string = "primary", label: string = "⌘ K", class: string = ""
Slots: default
Events: none

### LayoutSplitter
Showcase: https://component.wrnexusjs.dev/
Mount: <LayoutSplitter /> (legacy: data-component="LayoutSplitter")
Category: layout
Purpose: Theme-aware, responsive layout splitter component.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Events: resizeStart, resize, resizeEnd

### LegendIndicator
Showcase: https://component.wrnexusjs.dev/
Mount: <LegendIndicator /> (legacy: data-component="LegendIndicator")
Category: base
Purpose: Theme-aware, responsive legend indicator component.
Props: size: string = "default", color: string = "primary", title: string = "Legend Indicator", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: toggle, select

### Link
Showcase: https://component.wrnexusjs.dev/
Mount: <Link /> (legacy: data-component="Link")
Category: layout
Purpose: Theme-aware, responsive link component.
Props: size: string = "default", color: string = "primary", label: string = "Link", href: string = "#", target: string = "", rel: string = "", external: boolean = false, class: string = ""
Slots: default
Events: none

### List
Showcase: https://component.wrnexusjs.dev/
Mount: <List /> (legacy: data-component="List")
Category: base
Purpose: Theme-aware, responsive list component.
Props: size: string = "default", color: string = "primary", title: string = "List", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: none

### ListGroup
Showcase: https://component.wrnexusjs.dev/
Mount: <ListGroup /> (legacy: data-component="ListGroup")
Category: base
Purpose: Theme-aware, responsive list group component.
Props: size: string = "default", color: string = "primary", title: string = "List Group", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: select, change

### Map
Showcase: https://component.wrnexusjs.dev/
Mount: <Map /> (legacy: data-component="Map")
Category: integrations
Purpose: Theme-aware, responsive map component.
Props: size: string = "default", color: string = "primary", title: string = "Map", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: none

### MarketingSectionHeader
Showcase: https://component.wrnexusjs.dev/
Mount: <MarketingSectionHeader /> (legacy: data-component="MarketingSectionHeader")
Category: blocks
Purpose: Marketing section heading with an optional linked action.
Props: id: string = "", eyebrow: string = "", title: string = "", description: string = "", align: string = "split", size: string = "default", color: string = "primary", actionLabel: string = "", actionHref: string = "", actionIcon: string = "", actionExternal: boolean = false, class: string = ""
Slots: icon, actions, default
Events: none

### Marquee
Showcase: https://component.wrnexusjs.dev/
Mount: <Marquee /> (legacy: data-component="Marquee")
Category: base
Purpose: Theme-aware, responsive marquee component.
Props: size: string = "default", color: string = "primary", title: string = "Marquee", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: none

### MegaMenu
Showcase: https://component.wrnexusjs.dev/
Mount: <MegaMenu /> (legacy: data-component="MegaMenu")
Category: navigation
Purpose: Theme-aware, responsive mega menu component.
Props: size: string = "default", color: string = "primary", label: string = "Mega Menu", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Events: open, close, select

### MetricCard
Showcase: https://component.wrnexusjs.dev/
Mount: <MetricCard /> (legacy: data-component="MetricCard")
Category: blocks
Purpose: Single statistic or operational metric with icon, trend, and optional action.
Props: label: string = "Metric", value: string = "0", description: string = "", icon: string = "", prefix: string = "", suffix: string = "", trend: string = "", trendLabel: string = "", trendDirection: string = "neutral", href: string = "", actionLabel: string = "", size: string = "default", color: string = "primary", variant: string = "default", align: string = "left", class: string = ""
Slots: none
Events: none

### MetricGrid
Showcase: https://component.wrnexusjs.dev/
Mount: <MetricGrid /> (legacy: data-component="MetricGrid")
Category: layout
Purpose: Responsive collection of metric cards.
Props: items: string = [], columns: number = 4, tabletColumns: number = 2, mobileColumns: number = 1, gap: string = "md", equalHeight: boolean = true, dividers: boolean = false, size: string = "default", color: string = "primary", variant: string = "default", class: string = ""
Slots: default
Events: none

### Modal
Showcase: https://component.wrnexusjs.dev/
Mount: <Modal /> (legacy: data-component="Modal")
Category: overlays
Purpose: Theme-aware, responsive modal component.
Props: size: string = "default", color: string = "primary", title: string = "Modal", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
Slots: default
Events: open, close, cancel, confirm

### Nav
Showcase: https://component.wrnexusjs.dev/
Mount: <Nav /> (legacy: data-component="Nav")
Category: navigation
Purpose: Theme-aware, responsive nav component.
Props: size: string = "default", color: string = "primary", label: string = "Nav", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Events: select, change

### Navbar
Showcase: https://component.wrnexusjs.dev/
Mount: <Navbar /> (legacy: data-component="Navbar")
Category: navigation
Purpose: Theme-aware, responsive navbar component.
Props: size: string = "default", color: string = "primary", label: string = "Primary navigation", topbarLabel: string = "Utility navigation", brand: string = {}, items: string = [], actions: string = [], active: string = "", sticky: boolean = false, openOnHover: boolean = false, maxWidth: string = "full", mobileLabel: string = "Toggle navigation", class: string = ""
Slots: topbar, actions
Events: toggle, open, close, select, action

### PageHeader
Showcase: https://component.wrnexusjs.dev/
Mount: <PageHeader /> (legacy: data-component="PageHeader")
Category: blocks
Purpose: Public and application page header with breadcrumbs, metadata, and actions.
Props: eyebrow: string = "", title: string = "", description: string = "", icon: string = "", align: string = "left", size: string = "default", compact: boolean = false, showBreadcrumbs: boolean = false, breadcrumbs: string = [], primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", color: string = "primary", variant: string = "default", class: string = ""
Slots: meta, actions, default
Events: none

### Pagination
Showcase: https://component.wrnexusjs.dev/
Mount: <Pagination /> (legacy: data-component="Pagination")
Category: navigation
Purpose: Theme-aware, responsive pagination component.
Props: size: string = "default", color: string = "primary", label: string = "Pagination", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Events: change, previous, next

### PinInput
Showcase: https://component.wrnexusjs.dev/
Mount: <PinInput /> (legacy: data-component="PinInput")
Category: advanced-forms
Purpose: Secure multi-cell PIN and verification-code input with regex and paste support.
Props: size: string = "default", color: string = "primary", label: string = "Verification code", name: string = "pin", value: string = "", length: number = 4, pattern: string = "[0-9]", type: string = "text", inputMode: string = "numeric", placeholder: string = "○", autocomplete: string = "one-time-code", masked: boolean = false, disabled: boolean = false, readonly: boolean = false, required: boolean = false, autoFocus: boolean = false, autoSubmit: boolean = false, allowPaste: boolean = true, clearable: boolean = true, clearLabel: string = "Clear code", separator: string = "", groupSize: number = 0, helpText: string = "", invalid: boolean = false, validationMessage: string = "", class: string = ""
Slots: none
Events: input, change, complete, paste, clear, error

### Popover
Showcase: https://component.wrnexusjs.dev/
Mount: <Popover /> (legacy: data-component="Popover")
Category: overlays
Purpose: Theme-aware, responsive popover component.
Props: size: string = "default", color: string = "primary", title: string = "Popover", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
Slots: default
Events: open, close

### PortalDashboard
Showcase: https://component.wrnexusjs.dev/
Mount: <PortalDashboard /> (legacy: data-component="PortalDashboard")
Category: blocks
Purpose: Responsive portal dashboard with metrics, actions, tasks, and updates.
Props: size: string = "default", color: string = "primary", eyebrow: string = "Overview", eyebrowKey: string = "", title: string = "Dashboard", titleKey: string = "", description: string = "", descriptionKey: string = "", userName: string = "", metrics: string = [], actions: string = [], updates: string = [], tasks: string = [], class: string = ""
Slots: hero-action
Events: action, navigate

### PreferenceSwitcher
Showcase: https://component.wrnexusjs.dev/
Mount: <PreferenceSwitcher /> (legacy: data-component="PreferenceSwitcher")
Category: navigation
Purpose: Accessible theme, accent color, and language preference controls.
Props: size: string = "default", color: string = "primary", themeLabel: string = "Theme", colorLabel: string = "Accent color", languageLabel: string = "Language", languages: string = [, colors: string = [, compact: boolean = true, class: string = ""
Slots: none
Events: theme, color, language

### Progress
Showcase: https://component.wrnexusjs.dev/
Mount: <Progress /> (legacy: data-component="Progress")
Category: base
Purpose: Theme-aware, responsive progress component.
Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, class: string = ""
Slots: none
Events: none

### PublicPageShell
Showcase: https://component.wrnexusjs.dev/
Mount: <PublicPageShell /> (legacy: data-component="PublicPageShell")
Category: layout
Purpose: Consistent structural wrapper for public-facing pages.
Props: maxWidth: string = "full", fullWidth: boolean = true, headerOffset: string = "none", background: string = "default", overflow: string = "clip", minHeight: string = "screen", size: string = "default", color: string = "primary", variant: string = "default", class: string = ""
Slots: before, default, after
Events: none

### Radio
Showcase: https://component.wrnexusjs.dev/
Mount: <Radio /> (legacy: data-component="Radio")
Category: forms
Purpose: Theme-aware, responsive radio component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Radio", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", options: string = [], checked: boolean = false, orientation: string = "vertical", card: boolean = false, rightAligned: boolean = false, list: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, invalid

### RangeSlider
Showcase: https://component.wrnexusjs.dev/
Mount: <RangeSlider /> (legacy: data-component="RangeSlider")
Category: forms
Purpose: Theme-aware, responsive range slider component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Range", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: number = 50, min: number = 0, max: number = 100, step: number = 1, showValue: boolean = true, showBounds: boolean = true, showSteps: boolean = false, marks: string = [], helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur

### Rating
Showcase: https://component.wrnexusjs.dev/
Mount: <Rating /> (legacy: data-component="Rating")
Category: base
Purpose: Theme-aware, responsive rating component.
Props: size: string = "default", color: string = "primary", title: string = "Rating", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: input, change

### Scrollspy
Showcase: https://component.wrnexusjs.dev/
Mount: <Scrollspy /> (legacy: data-component="Scrollspy")
Category: navigation
Purpose: Theme-aware, responsive scrollspy component.
Props: size: string = "default", color: string = "primary", label: string = "Scrollspy", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Events: change

### SearchBox
Showcase: https://component.wrnexusjs.dev/
Mount: <SearchBox /> (legacy: data-component="SearchBox")
Category: advanced-forms
Purpose: Theme-aware, responsive search box component.
Props: size: string = "default", color: string = "primary", label: string = "Search Box", name: string = "", value: string = "", placeholder: string = "", type: string = "search", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: none

### Section
Showcase: https://component.wrnexusjs.dev/
Mount: <Section /> (legacy: data-component="Section")
Category: layout
Purpose: Theme-aware page section with consistent spacing, width, background, and border controls.
Props: id: string = "", size: string = "default", color: string = "primary", variant: string = "default", spacing: string = "lg", maxWidth: string = "xl", fullWidth: boolean = false, borderTop: boolean = false, borderBottom: boolean = false, class: string = ""
Slots: default
Events: none

### SectionHeader
Showcase: https://component.wrnexusjs.dev/
Mount: <SectionHeader /> (legacy: data-component="SectionHeader")
Category: layout
Purpose: Reusable accessible section heading with eyebrow, title, description, icon, and actions.
Props: id: string = "", eyebrow: string = "", title: string = "", description: string = "", align: string = "left", size: string = "default", color: string = "primary", headingLevel: number = 2, maxWidth: string = "3xl", class: string = ""
Slots: icon, default, actions
Events: none

### Select
Showcase: https://component.wrnexusjs.dev/
Mount: <Select /> (legacy: data-component="Select")
Category: forms
Purpose: Theme-aware, responsive select component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Select", hiddenLabel: boolean = false, value: string = "", values: string = [], options: string = [], placeholder: string = "Select an option", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, multiple: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, open, close, invalid

### Sidebar
Showcase: https://component.wrnexusjs.dev/
Mount: <Sidebar /> (legacy: data-component="Sidebar")
Category: navigation
Purpose: Theme-aware, responsive sidebar component.
Props: size: string = "default", color: string = "primary", label: string = "Sidebar", items: string = [], active: string = "", orientation: string = "horizontal", mobileLabel: string = "Open navigation", class: string = ""
Slots: default
Events: toggle, open, close, select

### Skeleton
Showcase: https://component.wrnexusjs.dev/
Mount: <Skeleton /> (legacy: data-component="Skeleton")
Category: base
Purpose: Theme-aware, responsive skeleton component.
Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
Slots: none
Events: none

### Spinner
Showcase: https://component.wrnexusjs.dev/
Mount: <Spinner /> (legacy: data-component="Spinner")
Category: base
Purpose: Theme-aware, responsive spinner component.
Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
Slots: none
Events: none

### SplitHero
Showcase: https://component.wrnexusjs.dev/
Mount: <SplitHero /> (legacy: data-component="SplitHero")
Category: blocks
Purpose: Two-column hero with configurable content and visual placement.
Props: eyebrow: string = "", title: string = "A better digital experience", highlight: string = "", description: string = "", primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", visualPosition: string = "right", reverse: boolean = false, ratio: string = "balanced", size: string = "default", color: string = "primary", variant: string = "default", trustItems: string = [], class: string = ""
Slots: actions, trust, default, visual
Events: none

### StatsBar
Showcase: https://component.wrnexusjs.dev/
Mount: <StatsBar /> (legacy: data-component="StatsBar")
Category: blocks
Purpose: Compact responsive statistics strip.
Props: items: string = [], columns: number = 4, compact: boolean = true, dividers: boolean = true, icons: boolean = true, size: string = "default", color: string = "primary", variant: string = "raised", maxWidth: string = "xl", class: string = ""
Slots: none
Events: none

### Stepper
Showcase: https://component.wrnexusjs.dev/
Mount: <Stepper /> (legacy: data-component="Stepper")
Category: navigation
Purpose: Theme-aware, responsive stepper component.
Props: size: string = "default", color: string = "primary", label: string = "Stepper", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Events: change, previous, next, complete

### StrongPassword
Showcase: https://component.wrnexusjs.dev/
Mount: <StrongPassword /> (legacy: data-component="StrongPassword")
Category: advanced-forms
Purpose: Theme-aware, responsive strong password component.
Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Create a strong password", autocomplete: string = "new-password", minLength: number = 8, specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?", requireLowercase: boolean = true, requireUppercase: boolean = true, requireNumber: boolean = true, requireSpecialCharacter: boolean = true, showRequirements: boolean = true, presentation: string = "inline", hintText: string = "Use a unique password you do not use elsewhere.", emptyLabel: string = "Enter a password", weakLabel: string = "Weak", fairLabel: string = "Fair", goodLabel: string = "Good", strongLabel: string = "Strong", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", class: string = ""
Slots: none
Events: input, change, strength

### StyledIcon
Showcase: https://component.wrnexusjs.dev/
Mount: <StyledIcon /> (legacy: data-component="StyledIcon")
Category: base
Purpose: Theme-aware, responsive styled icon component.
Props: size: string = "default", color: string = "primary", title: string = "Styled Icon", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: none

### Switch
Showcase: https://component.wrnexusjs.dev/
Mount: <Switch /> (legacy: data-component="Switch")
Category: forms
Purpose: Theme-aware, responsive switch component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Switch", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", checked: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur

### Table
Showcase: https://component.wrnexusjs.dev/
Mount: <Table /> (legacy: data-component="Table")
Category: tables
Purpose: Theme-aware, responsive table component.
Props: size: string = "default", color: string = "primary", caption: string = "Table", columns: string = [], rows: string = [], striped: boolean = true, class: string = ""
Slots: default
Events: sort, select, rowClick

### Tabs
Showcase: https://component.wrnexusjs.dev/
Mount: <Tabs /> (legacy: data-component="Tabs")
Category: navigation
Purpose: Theme-aware, responsive tabs component.
Props: size: string = "default", color: string = "primary", label: string = "Tabs", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Events: none

### Textarea
Showcase: https://component.wrnexusjs.dev/
Mount: <Textarea /> (legacy: data-component="Textarea")
Category: forms
Purpose: Theme-aware, responsive textarea component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Textarea", hiddenLabel: boolean = false, placeholder: string = "", value: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, rows: number = 5, resize: string = "vertical", readonly: boolean = false, disabled: boolean = false, required: boolean = false, minlength: string = "", maxlength: string = "", class: string = ""
Slots: none
Events: input, change, focus, blur, invalid

### TextLink
Showcase: https://component.wrnexusjs.dev/
Mount: <TextLink /> (legacy: data-component="TextLink")
Category: layout
Purpose: Styled inline action link with icons, arrows, external state, and disabled handling.
Props: label: string = "Learn more", href: string = "#", target: string = "", rel: string = "", external: boolean = false, icon: string = "", iconPosition: string = "start", showArrow: boolean = true, underline: boolean = false, size: string = "default", color: string = "primary", variant: string = "default", disabled: boolean = false, class: string = ""
Slots: none
Events: click, focus, blur

### Timeline
Showcase: https://component.wrnexusjs.dev/
Mount: <Timeline /> (legacy: data-component="Timeline")
Category: base
Purpose: Theme-aware, responsive timeline component.
Props: size: string = "default", color: string = "primary", title: string = "Timeline", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: none

### TimePicker
Showcase: https://component.wrnexusjs.dev/
Mount: <TimePicker /> (legacy: data-component="TimePicker")
Category: forms
Purpose: Theme-aware, responsive time picker component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Time", hiddenLabel: boolean = false, value: string = "", placeholder: string = "", variant: string = "normal", icon: string = "icon-[lucide--clock-3]", iconPosition: string = "end", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, min: string = "", max: string = "", step: string = "", format: string = "24", minuteStep: number = 5, hours: string = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"], minutes: string = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"], readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, open, close, invalid

### Toast
Showcase: https://component.wrnexusjs.dev/
Mount: <Toast /> (legacy: data-component="Toast")
Category: base
Purpose: Theme-aware, responsive toast component.
Props: size: string = "default", color: string = "primary", title: string = "Toast", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: dismiss, action

### ToastNotifications
Showcase: https://component.wrnexusjs.dev/
Mount: <ToastNotifications /> (legacy: data-component="ToastNotifications")
Category: integrations
Purpose: Theme-aware, responsive toast notifications component.
Props: size: string = "default", color: string = "primary", title: string = "Toast Notifications", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: add, dismiss, clear, action

### ToggleCount
Showcase: https://component.wrnexusjs.dev/
Mount: <ToggleCount /> (legacy: data-component="ToggleCount")
Category: advanced-forms
Purpose: Theme-aware, responsive toggle count component.
Props: size: string = "default", color: string = "primary", variant: string = "segmented", class: string = "", name: string = "billing-cycle", value: string = "monthly", firstValue: string = "monthly", firstLabel: string = "Monthly", secondValue: string = "annual", secondLabel: string = "Annual", ariaLabel: string = "Billing frequency", items: string = [], currency: string = "$", suffix: string = "", firstValueKey: string = "monthly", secondValueKey: string = "annual", emptyValue: string = "—", align: string = "end", fullWidth: boolean = true, disabled: boolean = false, animate: boolean = true, animationDuration: number = 450, animationSteps: number = 18
Slots: none
Events: change, toggle

### TogglePassword
Showcase: https://component.wrnexusjs.dev/
Mount: <TogglePassword /> (legacy: data-component="TogglePassword")
Category: advanced-forms
Purpose: Accessible password field with optional show and hide controls.
Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Enter your password", autocomplete: string = "current-password", minlength: string = "", maxlength: string = "", pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}", fields: string = [], visible: boolean = false, toggleable: boolean = true, toggleMode: string = "button", checkboxLabel: string = "Show password", showLabel: string = "Show password", hideLabel: string = "Hide password", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, helpText: string = "", validationMessage: string = "", class: string = ""
Slots: none
Events: input, change, toggle

### Tooltip
Showcase: https://component.wrnexusjs.dev/
Mount: <Tooltip /> (legacy: data-component="Tooltip")
Category: overlays
Purpose: Theme-aware, responsive tooltip component.
Props: size: string = "default", color: string = "primary", title: string = "Tooltip", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
Slots: default
Events: open, close

### TreeView
Showcase: https://component.wrnexusjs.dev/
Mount: <TreeView /> (legacy: data-component="TreeView")
Category: base
Purpose: Theme-aware, responsive tree view component.
Props: size: string = "default", color: string = "primary", title: string = "Tree View", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: select, toggle, expand, collapse

### Typography
Showcase: https://component.wrnexusjs.dev/
Mount: <Typography /> (legacy: data-component="Typography")
Category: layout
Purpose: Theme-aware, responsive typography component.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Events: none

### WysiwygEditor
Showcase: https://component.wrnexusjs.dev/
Mount: <WysiwygEditor /> (legacy: data-component="WysiwygEditor")
Category: integrations
Purpose: Theme-aware, responsive wysiwyg editor component.
Props: size: string = "default", color: string = "primary", title: string = "Wysiwyg Editor", description: string = "", items: string = [], variant: string = "default", class: string = ""
Slots: default
Events: input, change, focus, blur